/* Compact timeline semantics. Keep the existing .deliverable geometry,
   typography, neutral glass planes, highlight layers and animation shared
   with .is-aligned; only the at-risk semantic colors change to amber.
   Load after status-glass.css. Green and blue selectors are not targeted. */
@media screen and (forced-colors:none) {
  body.optical-site #scope-change .deliverable.is-at-risk,
  body.optical-site #scope-change .specialist {
    --semantic-light:var(--status-amber-rgb);
    /* Match the aligned border's rendered alpha without changing its width. */
    border-color:color-mix(in srgb,var(--status-amber-edge) 70%,transparent)!important;
  }

  body.optical-site[data-appearance="light"] #scope-change .deliverable.is-at-risk {
    border-color:color-mix(in srgb,var(--status-amber-edge) 50%,transparent)!important;
  }

  body.optical-site #scope-change .deliverable.is-at-risk .deliverable-status {
    color:var(--status-amber-accent)!important;
    -webkit-text-fill-color:currentColor!important;
  }

  /* Preserve the existing row width, wrapping, padding, struck-through label
     and specialist-change/track-appear animations. Only round its container. */
  body.optical-site #scope-change .specialist {
    border-radius:12px;
  }

  /* Noninteractive status pill uses the shared amber badge palette. It may
     wrap at narrow widths without clipping the existing timeline animation. */
  body.optical-site #scope-change .specialist > .specialist-warning {
    display:inline-flex;
    align-items:center;
    box-sizing:border-box;
    max-width:100%;
    padding:4px 10px;
    border:1px solid color-mix(in srgb,var(--status-amber-accent) 55%,transparent);
    border-radius:999px;
    background:linear-gradient(108deg,#ffffffa6,#ffffff2b 32%,transparent 67%) 0 0/100% 4px no-repeat,
      linear-gradient(#ffffff29,#ffffff05 42%,#00000026) 0 0/100% 100% no-repeat,
      var(--status-amber-base);
    box-shadow:inset 0 1px 1px #ffffff40;
    backdrop-filter:blur(18px) saturate(145%);
    -webkit-backdrop-filter:blur(18px) saturate(145%);
    color:var(--status-amber-accent)!important;
    -webkit-text-fill-color:currentColor!important;
    font-family:inherit;
    font-size:var(--text-xs);
    font-weight:700;
    line-height:1.4;
    white-space:normal;
    text-shadow:none;
  }
}

@media screen and (prefers-reduced-transparency:reduce) and (forced-colors:none) {
  body.optical-site #scope-change .specialist > .specialist-warning {
    background:var(--status-amber-base);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}
@media screen and (forced-colors:active) {
  body.optical-site #scope-change .specialist > .specialist-warning {
    forced-color-adjust:auto;
    border:1px solid CanvasText;
    border-radius:999px;
    color:CanvasText!important;
    -webkit-text-fill-color:CanvasText!important;
    background:Canvas;
  }
}

/* Owner refinements: Deliverables 2-4 match their blue peer typography
   and left inset. Preserve measured card dimensions and existing amber glass.
   Repeated #scope-change matches the shared status rule's three-ID specificity. */
@media screen and (forced-colors:none) {
  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision),
  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision) > :is(strong,span),
  body.optical-site main#main #scope-change .deliverable-track > .deliverable.is-at-risk,
  body.optical-site main#main #scope-change .deliverable-track > .deliverable.is-at-risk > :is(.deliverable-name,.deliverable-status) {
    color:#fff!important;
    -webkit-text-fill-color:currentColor!important;
    text-align:left!important;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision) {
    padding:10px 14px!important;
    min-height:115.09375px;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision) > strong {
    font-family:inherit;
    font-size:15px!important;
    font-weight:650!important;
    line-height:1.6!important;
    letter-spacing:normal!important;
    text-transform:none!important;
    margin:0!important;
    padding:0!important;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision) > span {
    font-family:inherit;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.6!important;
    letter-spacing:normal!important;
    text-transform:none!important;
    margin:0!important;
    padding:0!important;
  }
}
@media screen and (max-width:600px) and (forced-colors:none) {
  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision) {
    min-height:107.09375px;
  }
}

/* Light appearance uses the existing neutral reading ink for amber deliverables.
   Dark appearance retains white text; card materials and geometry stay shared. */
@media screen and (forced-colors:none) {
  body.optical-site[data-appearance="light"] main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision),
  body.optical-site[data-appearance="light"] main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision) > :is(strong,span),
  body.optical-site[data-appearance="light"] main#main #scope-change .deliverable-track > .deliverable.is-at-risk,
  body.optical-site[data-appearance="light"] main#main #scope-change .deliverable-track > .deliverable.is-at-risk > :is(.deliverable-name,.deliverable-status) {
    color:var(--opt-ink)!important;
  }
}

/* Keep the compact Deliverable 1 status aligned with its existing title. */
@media screen {
  body.optical-site main#main #scope-change .deliverable-track > .deliverable.is-aligned > .deliverable-status {
    text-align:left!important;
  }
}

/* Desktop outcome spacing and standalone deliverable alignment.
   The existing full desktop layout starts at 1024px; smaller layouts are unchanged. */
@media screen and (min-width:1024px) {
  body.optical-site main#main #scope-change#scope-change .change-map .impact-layout {
    align-items:start;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles {
    align-self:start;
    height:auto;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-stable {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-height:64px;
    height:auto;
    padding:16px 20px!important;
    margin:0 0 20px!important;
    align-items:baseline;
    align-content:center;
    gap:12px;
    text-align:left;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-stable > :is(strong,span) {
    margin:0;
    padding:0;
    text-align:left;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid {
    gap:20px;
    grid-auto-rows:1fr;
    align-items:stretch;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision),
  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article.impact-decision {
    box-sizing:border-box;
    min-height:128px;
    height:auto;
    padding:20px!important;
    gap:12px;
    align-items:flex-start;
    justify-content:flex-start;
    text-align:left!important;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article > :is(strong,span) {
    margin:0!important;
    padding:0!important;
    text-align:left!important;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-summary {
    align-self:start;
    height:auto;
    padding:32px;
    gap:28px;
    text-align:left;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-summary h4 {
    margin:0 0 12px;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-summary ul {
    gap:8px;
  }

  body.optical-site main#main #scope-change#scope-change .scope-timeline .deliverable-track > .deliverable {
    align-items:center;
    justify-content:center;
    text-align:center!important;
  }

  body.optical-site main#main #scope-change#scope-change .scope-timeline .deliverable-track > .deliverable > :is(.deliverable-name,.deliverable-status) {
    text-align:center!important;
  }

  body.optical-site main#main #scope-change#scope-change .scope-timeline .deliverable-track > .deliverable > .deliverable-status {
    min-width:min-content;
    align-self:center;
  }
}

/* Mobile deliverables keep the standalone timeline and compact outcome distinct.
   The paragraph cap uses the same base font as Deliverable 1, without changing it. */
@media screen and (max-width:767px) {
  body.optical-site main#main #scope-change#scope-change .scope-timeline .deliverable-track > .deliverable {
    align-items:center;
    text-align:center!important;
  }

  body.optical-site main#main #scope-change#scope-change .scope-timeline .deliverable-track > .deliverable > :is(.deliverable-name,.deliverable-status) {
    text-align:center!important;
  }

  body.optical-site main#main #scope-change#scope-change .change-map .impact-tiles .small-grid > article:not(.impact-decision) {
    box-sizing:border-box;
    width:100%;
    max-width:calc(34 * var(--text-base));
    min-height:0;
    height:auto;
    padding:10px 14px!important;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 10px;
    text-align:left!important;
  }
}

/* Source text uses the existing navy/cyan optical palette with white reading ink.
   Restrict the semantic correction to this quotation and retain its glass geometry. */
@media screen and (max-width:767px) and (forced-colors:none) {
  body.optical-site main#main .approved-home #ah-supplied-requirement#ah-supplied-requirement .ah-finding-detail > blockquote {
    --surface-refine-base:#111d35;
    --surface-refine-accent:#80e6ff;
    --surface-refine-edge:linear-gradient(130deg,#f2feff 0%,#80e6ff 22%,#a7bbff66 50%,#d7a6ff 82%,#fff 100%);
    color:#fff!important;
    -webkit-text-fill-color:currentColor!important;
  }
}

/* The separate suggested correction uses the approved green surface layers.
   Its current row geometry, text styles, badges and shadow remain unchanged. */
@media screen and (max-width:767px) and (forced-colors:none) {
  body.optical-site main#main .approved-home #ah-suggested-correction {
    --surface-refine-base:var(--surface-refine-green);
    --surface-refine-accent:var(--surface-refine-green-accent);
    --surface-refine-edge:linear-gradient(125deg,#fff,var(--surface-refine-green-accent) 26%,#70b8a080 56%,var(--surface-refine-green-accent) 88%,#fff);
    border-color:transparent;
    background:linear-gradient(140deg,
      color-mix(in srgb,var(--surface-refine-base) 82%,#fff),
      var(--surface-refine-base) 32%,var(--surface-refine-base) 68%,
      color-mix(in srgb,var(--surface-refine-base) 91%,var(--surface-refine-accent))) padding-box,
      var(--surface-refine-edge) border-box;
  }
}

/* Reserve the verified DOCX thumbnail before lazy loading. The auto intrinsic
   ratio keeps the existing loaded image geometry; no replacement asset is used. */
@media screen and (max-width:767px) {
  body.optical-site main .sample-row .optical-sample-stack:has(> img[src*="stratum-sample-written-proposal-docx.webp"]) {
    --sample-ratio:calc(480 / 622)!important;
  }

  body.optical-site main .sample-row .sample-shot .optical-sample-stack > img[src*="stratum-sample-written-proposal-docx.webp"] {
    aspect-ratio:auto 480 / 622;
  }
}

/* The correction remains pending review: use the same amber badge material
   as the adjacent Review required badge, without changing its wording. */
@media screen and (max-width:767px) and (forced-colors:none) {
  body.optical-site main#main .approved-home #ah-suggested-correction > summary > .ah-badge {
    --semantic-light:var(--status-amber-rgb);
    color:var(--status-amber-accent)!important;
    -webkit-text-fill-color:currentColor!important;
    border:1px solid color-mix(in srgb,var(--status-amber-accent) 55%,transparent)!important;
    background:linear-gradient(108deg,#ffffffa6,#ffffff2b 32%,transparent 67%) 0 0/100% 4px no-repeat,
      linear-gradient(#ffffff29, #ffffff05 42%,#00000026) 0 0/100% 100% no-repeat,
      var(--status-amber-base)!important;
    border-radius:999px!important;
    box-shadow:inset 0 1px 1px #ffffff40!important;
    font-family:inherit;
    letter-spacing:normal;
    text-shadow:none!important;
    filter:none!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  }

  body.optical-site main#main .approved-home #ah-suggested-correction > summary > .ah-badge::before,
  body.optical-site main#main .approved-home #ah-suggested-correction > summary > .ah-badge::after {
    content:none!important;
  }
}
@media screen and (max-width:767px) and (prefers-reduced-transparency:reduce) and (forced-colors:none) {
  body.optical-site main#main .approved-home #ah-suggested-correction > summary > .ah-badge {
    background:var(--status-amber-base)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}

/* Approved risk status ink, shared across mobile and desktop.
   The real impact-layout ancestor also matches the prior light-theme specificity. */
@media screen and (forced-colors:none) {
  body.optical-site main#main #scope-change#scope-change .scope-timeline .deliverable-track > .deliverable.is-at-risk > .deliverable-status,
  body.optical-site main#main #scope-change#scope-change .change-map .impact-layout .impact-tiles .small-grid > article:not(.impact-decision) > span {
    color:var(--status-amber-accent)!important;
    -webkit-text-fill-color:currentColor!important;
  }
}