/* OKO final polish: only rendered contrast/readability defects, 2026-10-02.
   Font sources, navigation, footer, account details and layout remain inherited. */
html body.oko-preview .xsg-pi-detail-value.is-account,
html body.oko-preview .xsg-pi-platform-account small {
  color: #1e3653 !important;
}

html body.oko-preview .oko-hero-art-caption-v5 {
  color: #405b73 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

html body.oko-preview #oko-workflow-v3 .wf-intro-note-v4 {
  color: #405b73 !important;
}

html body.oko-preview .xsg-hf-lead,
html body.oko-preview #primary.xsg-sourcing-agent-unified .xsg-guide-final .xsg-guide-kicker {
  color: #1e3653 !important;
}

html body.oko-preview .oko-toolkit-reference {
  background: #1e3653 !important;
  border-color: #365b80 !important;
  color: #ffffff !important;
}
html body.oko-preview .oko-toolkit-reference > span {
  color: #ffffff !important;
}
html body.oko-preview .oko-toolkit-reference > b {
  color: #ffffff !important;
}

/* Homepage editorial captions and the guide CTA have more specific legacy rules. */
html body.oko-preview[data-oko-kind="home"] #main .xsgn-sub,
html body.oko-preview[data-oko-kind="home"] #main .xsgn-card > p:not(.xsgn-num),
html body.oko-preview[data-oko-kind="home"] #main .xsgn-meta {
  color: #405b73 !important;
}
html body.oko-preview[data-oko-kind="home"] #main .xsgn-meta {
  font-size: 12px !important;
  line-height: 1.6 !important;
}
html body.oko-preview[data-oko-kind="home"] #main .xsg-guide-band .oko-guide-actions-v3 .xsg-button--dark,
html body.oko-preview[data-oko-kind="home"] #main .xsg-guide-band .oko-guide-actions-v3 .xsg-button--dark > span {
  color: #ffffff !important;
}

@media (max-width: 800px) {
  html body.oko-preview[data-oko-kind="home"] #main .xsg-guide-band__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.oko-preview[data-oko-kind="home"] #main .xsg-guide-band__grid > div {
    min-width: 0 !important;
  }
  html body.oko-preview[data-oko-kind="home"] #main .xsg-guide-band__art .oko-book {
    max-width: 100% !important;
  }
}

/* Four legacy topic archives use the same content edge as the global header. */
html body.oko-preview:is(.category-logistics-compliance, .category-product-development, .category-retail-readiness, .category-supplier-management) #oko-content .ast-container {
  width: min(1280px, calc(100% - 64px)) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
html body.oko-preview:is(.category-logistics-compliance, .category-product-development, .category-retail-readiness, .category-supplier-management) #oko-content .ast-row {
  margin-inline: 0 !important;
}
@media (max-width: 1300px) {
  html body.oko-preview:is(.category-logistics-compliance, .category-product-development, .category-retail-readiness, .category-supplier-management) #oko-content .ast-container {
    width: calc(100% - 48px) !important;
  }
}
@media (max-width: 767px) {
  html body.oko-preview:is(.category-logistics-compliance, .category-product-development, .category-retail-readiness, .category-supplier-management) #oko-content .ast-container {
    width: calc(100% - 32px) !important;
  }
}

/* The three capability labels need a single-column flow on narrow phones. */
@media (max-width: 380px) {
  html body.oko-preview[data-oko-kind="home"] #main .xsg-home-portfolio__facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.oko-preview[data-oko-kind="home"] #main .xsg-home-portfolio__facts > span {
    display: flex !important;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-width: 0;
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  html body.oko-preview[data-oko-kind="home"] #main .xsg-home-portfolio__facts > span > strong {
    flex: 0 0 auto;
    display: inline !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
  }
}

/* Active text in the opened WhatsApp panel; keep green branding and RTL layout. */
html body.oko-preview .oko-wa-head h2,
html body.oko-preview .oko-wa-head p {
  color: #1e3653 !important;
}
html body.oko-preview .oko-wa-note {
  color: #405b73 !important;
  font-size: 12px !important;
}

/* 2026-10-06: bounded interaction fixes. Layered important declarations win
   over legacy hover specificity without escalating repeated-ID selectors.
   Only colors, outlines and link decoration change; layout is unchanged. */
@layer oko-interaction-contrast {
  body.oko-preview .xsg77 .route:is(:hover, :focus-visible) {
    color: #1e3653 !important;
    background: #edf5fc !important;
    border-color: #1e3653 !important;
  }
  body.oko-preview .xsg77 .route[aria-pressed="true"] {
    color: #1e3653 !important;
    background: #e5f2fe !important;
    border-color: #1e3653 !important;
  }
  body.oko-preview .oko-content form :is(input, textarea)::placeholder {
    color: #526579 !important;
    opacity: 1 !important;
  }
  body.oko-preview .xsg-orange-hover-button,
  body.oko-preview .xsg-orange-hover-button * {
    transition-property: transform, box-shadow, border-color !important;
  }
  body.oko-preview .oko-footer a:is(:hover, :focus-visible) {
    color: #1e3653 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
  }
  body.oko-preview .xsg-orange-hover-button:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-color: #1e3653 !important;
    color: #1e3653 !important;
  }
  body.oko-preview .xsg-orange-hover-button:not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) * {
    color: inherit !important;
  }
  body.oko-preview .xsg-services-card__cta > span {
    color: #1e3653 !important;
    border-color: #65829b !important;
  }
  body.oko-preview .xsg-services-card:is(:hover, :focus-within) .xsg-services-card__cta > span {
    color: #1e3653 !important;
    background: #95cdff !important;
    border-color: #1e3653 !important;
  }
  body.oko-preview .xsg-blog-v2-feature-copy a,
  body.oko-preview .xsg-blog-v2-feature-copy a :is(b, span) {
    color: #ffffff !important;
  }
  body.oko-preview .xsg-blog-v2-feature-copy a {
    text-decoration: underline !important;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
  }
  body.oko-preview .xsg-blog-v2-feature-copy a:is(:hover, :focus-visible) {
    text-decoration-thickness: 2px;
  }
  body.oko-preview :is(a, button, input, select, textarea, summary, [tabindex="0"]):focus-visible {
    outline: 3px solid #1e3653 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px #ffffff !important;
  }
}