/* ==========================================================================
   chrome.css · reader chrome v0.3: site nav variant, phone glass pill + sheet,
   locked-state veil and the unlock reveal (reader side). Owner: Case Study Bot.
   Picked by Shah Oct 29 2026 8:28am ET: nav B, phone pill + sheet, new unlock reveal.
   Everything is scoped to html[data-cs-chrome="reader"], which reader.js sets on case
   pages only. It re-skins Portfolio Site Bot's nav from the outside without editing their
   files, and never styles the gate card. PSB spec to make it native: NAV-SPEC.md

   KB 37 rules kept: glass only on the nav, the pill and its sheet (one glass layer at a
   time on a phone); backdrop-filter is static and never animated; motion is transform and
   opacity only; solid fallbacks for no backdrop-filter, Firefox without it, glass-lite,
   reduced transparency and more contrast; reduced motion = crossfade only.
   ========================================================================== */

/* ---------- 0. Shared material ---------- */
html[data-cs-chrome="reader"] body { background: var(--cs-bg); }
html[data-cs-chrome="reader"] .cs-glass {
  background: var(--cs-glass-fill);
  -webkit-backdrop-filter: var(--cs-glass-blur); backdrop-filter: var(--cs-glass-blur);
  box-shadow: var(--cs-glass-rim), var(--cs-glass-shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-cs-chrome="reader"] .cs-glass { background: var(--cs-glass-solid); }
}
html[data-cs-chrome="reader"].glass-lite .cs-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cs-glass-solid); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-cs-chrome="reader"] .cs-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cs-glass-solid); }
}
@media (prefers-contrast: more) {
  html[data-cs-chrome="reader"] .cs-glass { box-shadow: var(--rd-glass-hc-ring); }
}

/* ---------- 1. Desktop (≥ 64em): slim sand nav that steps aside on scroll down ---------- */
@media (min-width: 64em) {
  html[data-cs-chrome="reader"] .cs-reader { --cs-nav-clear: 76px; }
  html[data-cs-chrome="reader"] #main-navbar {
    transition: var(--rd-bar-move);   /* not "all": never animate the blur */
  }
  html[data-cs-chrome="reader"] #main-navbar .container {
    height: var(--rd-bar-h); border-radius: var(--rd-bar-radius); padding: 0 var(--rd-bar-pad-x); border: 0;
    background: var(--rd-bar-fill); color: var(--rd-bar-ink);
    -webkit-backdrop-filter: var(--rd-bar-blur); backdrop-filter: var(--rd-bar-blur);
    box-shadow: var(--rd-bar-shadow);
    transition: none;
  }
  html[data-cs-chrome="reader"] #main-navbar .container::before,
  html[data-cs-chrome="reader"] #main-navbar .container::after { display: none; }   /* no poster texture, no sheen */
  html[data-cs-chrome="reader"] #main-navbar .nav-inner-container { max-width: var(--rd-bar-max); }
  html[data-cs-chrome="reader"] #main-navbar :is(.nav-title, .nav-link, .nav-link-muted, .nav-burger, a) { color: var(--rd-bar-ink); }
  html[data-cs-chrome="reader"] #main-navbar .nav-title { font-size: var(--rd-bar-title-size); }
  html[data-cs-chrome="reader"] #main-navbar .nav-brand img { width: var(--rd-bar-logo); height: var(--rd-bar-logo); }
  html[data-cs-chrome="reader"] #main-navbar :is(.nav-link, .nav-link-muted) { font-size: var(--rd-bar-link-size); font-family: var(--rd-bar-link-face); font-weight: var(--rd-bar-link-weight); }
  html[data-cs-chrome="reader"] #main-navbar .nav-link[aria-current="page"] {
    color: var(--rd-bar-ink); background: var(--rd-bar-link-current-fill); border-color: transparent; box-shadow: none;
  }
  @media (hover: hover) and (pointer: fine) {
    html[data-cs-chrome="reader"] #main-navbar :is(.nav-link, .nav-link-muted):hover { background: var(--rd-bar-link-hover-fill); color: var(--rd-bar-ink); }
  }
  /* dropdown: solid surface (no glass on glass) */
  html[data-cs-chrome="reader"] #main-navbar .nav-dropdown-menu {
    background: var(--rd-bar-menu-fill); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: var(--rd-bar-menu-shadow);
  }
  html[data-cs-chrome="reader"] #main-navbar .nav-dropdown-menu a { color: var(--cs-text); }
  /* hide on scroll down, show on scroll up / focus (reader.js toggles .cs-nav-away) */
  html[data-cs-chrome="reader"].cs-nav-away #main-navbar:not(:focus-within):not(.menu-open) {
    transform: var(--rd-bar-tuck); opacity: 0;
  }
  html[data-cs-chrome="reader"].glass-lite #main-navbar .container { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--rd-bar-fill-solid); }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-cs-chrome="reader"] #main-navbar .container { background: var(--rd-bar-fill-solid); }
  }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html[data-cs-chrome="reader"] #main-navbar .container { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--rd-bar-fill-solid); }
  }
}

/* ---------- 2. Phone / tablet (< 64em): one glass pill → one glass sheet ---------- */
@media (max-width: 63.99em) {
  html[data-cs-chrome="reader"] .cs-reader { --cs-nav-clear: max(12px, env(safe-area-inset-top, 0px)); }
  html[data-cs-chrome="reader"] #main-navbar { display: none; }   /* the pill carries the site nav on phones */

  html[data-cs-chrome="reader"] .cs-dock {
    gap: 0; padding: 0; height: var(--rd-dock-h); border: 0; overflow: hidden; max-width: var(--rd-dock-glass-max);
    background: var(--rd-dock-glass-fill); -webkit-backdrop-filter: var(--rd-dock-glass-blur); backdrop-filter: var(--rd-dock-glass-blur);
    box-shadow: var(--rd-dock-glass-shadow);
    transition: var(--rd-dock-move);
  }
  html[data-cs-chrome="reader"] .cs-dock.is-open { opacity: 0; transform: var(--rd-dock-open); pointer-events: none; }
  html[data-cs-chrome="reader"] .cs-dock-back { display: none; }   /* "All work" lives in the sheet */
  html[data-cs-chrome="reader"] .cs-dock-toc { border: 0; border-radius: inherit; height: var(--rd-dock-h); padding: var(--rd-dock-toc-pad); gap: var(--rd-dock-toc-gap); width: 100%; }
  html[data-cs-chrome="reader"] .cs-dock-mark { flex: none; width: var(--rd-dock-mark); height: var(--rd-dock-mark); border-radius: 50%; display: grid; place-items: center;
    background: var(--rd-dock-mark-fill); box-shadow: var(--rd-dock-mark-ring); }
  html[data-cs-chrome="reader"] .cs-dock-mark img { width: var(--rd-dock-mark-img); height: var(--rd-dock-mark-img); display: block; }
  html[data-cs-chrome="reader"] .cs-dock-ch { flex: 1 1 auto; font-weight: var(--rd-dock-label-weight); }
  html[data-cs-chrome="reader"] .cs-dock-menu { flex: none; width: var(--rd-dock-menu-w); height: var(--rd-dock-menu-h); position: relative; color: var(--cs-text); }
  html[data-cs-chrome="reader"] .cs-dock-menu::before, html[data-cs-chrome="reader"] .cs-dock-menu::after {
    content: ""; position: absolute; left: 0; right: 0; height: var(--rd-dock-menu-stroke); border-radius: 1px; background: currentColor; }
  html[data-cs-chrome="reader"] .cs-dock-menu::before { top: 1px; } html[data-cs-chrome="reader"] .cs-dock-menu::after { bottom: 1px; }
  html[data-cs-chrome="reader"] .cs-dock-bar { position: absolute; left: var(--rd-progress-dock-inset); right: var(--rd-progress-dock-inset); bottom: var(--rd-progress-dock-bottom); height: var(--rd-progress-dock-h); border-radius: 1px; background: var(--rd-progress-dock-track); overflow: hidden; pointer-events: none; }
  html[data-cs-chrome="reader"] .cs-dock-bar span { display: block; height: 100%; background: var(--rd-progress-dock-fill); transform-origin: 0 50%; transform: scaleX(var(--cs-p, 0)); }

  /* the sheet: grows out of the pill (bottom-left), glass, replaces the pill while open */
  html[data-cs-chrome="reader"] .cs-toc-sheet {
    margin: auto auto calc(var(--rd-sheet-glass-inset) + env(safe-area-inset-bottom, 0px)) var(--rd-sheet-glass-inset); width: calc(100vw - 24px); max-width: var(--rd-sheet-glass-max);
    max-height: var(--rd-sheet-glass-max-h); padding: var(--rd-sheet-glass-pad); border-radius: var(--rd-sheet-glass-radius); overflow: auto; overscroll-behavior: contain;
    color: var(--cs-text); background: var(--rd-sheet-glass-fill);
    -webkit-backdrop-filter: var(--rd-sheet-glass-blur); backdrop-filter: var(--rd-sheet-glass-blur);
    box-shadow: var(--rd-sheet-glass-shadow);
    transform-origin: var(--rd-sheet-origin); opacity: 0; transform: var(--rd-sheet-from);
    transition: var(--rd-sheet-move);
    animation: none;
  }
  html[data-cs-chrome="reader"] .cs-toc-sheet.is-in { opacity: 1; transform: none; }
  html[data-cs-chrome="reader"] .cs-toc-sheet::backdrop { background: rgb(26 25 23 / .32); animation: cs-fade .2s ease-out; }
  html[data-cs-chrome="reader"] .cs-toc-sheet.is-out::backdrop { opacity: 0; transition: opacity .2s; }
  html[data-cs-chrome="reader"] .cs-toc-sheet-head { padding: var(--rd-sheet-glass-head-pad); }
  html[data-cs-chrome="reader"] .cs-sheet-progress { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; font: 500 var(--rd-progress-sheet-size)/1 var(--cs-chrome-font); color: var(--cs-muted); font-variant-numeric: tabular-nums; }
  html[data-cs-chrome="reader"] .cs-sheet-progress i { flex: 1; height: var(--rd-progress-sheet-h); border-radius: var(--rd-progress-sheet-radius); background: var(--rd-progress-sheet-track); overflow: hidden; }
  html[data-cs-chrome="reader"] .cs-sheet-progress i b { display: block; height: 100%; background: var(--rd-progress-sheet-fill); transform-origin: 0 50%; transform: scaleX(var(--cs-p, 0)); }
  html[data-cs-chrome="reader"] .cs-toc-sheet ol { grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 4px; }
  html[data-cs-chrome="reader"] .cs-toc-sheet ol a { min-height: var(--rd-sheet-glass-item-min-h); padding: var(--rd-sheet-glass-item-pad); font-size: var(--rd-sheet-glass-item-size); border-radius: var(--rd-sheet-glass-item-radius); }
  html[data-cs-chrome="reader"] .cs-toc-sheet ol a[aria-current="true"] { background: var(--rd-sheet-glass-item-current-fill); box-shadow: var(--rd-sheet-glass-item-current-ring); }
  html[data-cs-chrome="reader"] .cs-sheet-site { margin: 8px 4px 0; padding-top: 8px; border-top: 1px solid var(--cs-rule); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  html[data-cs-chrome="reader"] .cs-sheet-site a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: var(--rd-sheet-site-pad); border-radius: var(--rd-sheet-glass-item-radius);
    font: 500 var(--rd-sheet-site-size)/1.2 var(--cs-chrome-font); color: var(--cs-text) !important; text-decoration: none; }
  html[data-cs-chrome="reader"] .cs-sheet-site a.cs-sheet-home { grid-column: 1 / -1; font-weight: 600; }
  html[data-cs-chrome="reader"] .cs-sheet-site a.cs-sheet-home img { width: var(--rd-sheet-site-icon); height: var(--rd-sheet-site-icon); }
  html[data-cs-chrome="reader"] .cs-sheet-site a:hover, html[data-cs-chrome="reader"] .cs-toc-sheet ol a:hover { background: var(--rd-sheet-hover-fill); }
  html[data-cs-chrome="reader"] .cs-toc-sheet > .cs-back { display: none; }   /* replaced by the site links block */

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html[data-cs-chrome="reader"] :is(.cs-dock, .cs-toc-sheet) { background: var(--cs-glass-solid); }
  }
  html[data-cs-chrome="reader"].glass-lite :is(.cs-dock, .cs-toc-sheet) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cs-glass-solid); }
  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    html[data-cs-chrome="reader"] :is(.cs-dock, .cs-toc-sheet) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--cs-glass-solid); }
  }
}
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 3. Locked state + unlock reveal (reader side only) ---------- */
/* Locked: no 40px blur over an empty page; the page sits at 0 opacity and a static cover
   skeleton (.cs-veil, built by reader.js, no case text) shows where the cover will be. */
html[data-cs-chrome="reader"] #case-study-content.content-blurred { filter: none; opacity: 0; }
html[data-cs-chrome="reader"] { --cs-veil-out: .22s; --cs-fade-gap: .26s; }   /* v0.3.1 clean fade: veil out first, then the page in (no doubled text) */
html[data-cs-chrome="reader"] #case-study-content { transition: opacity .36s var(--cs-ease-ui); }
html[data-cs-chrome="reader"]:has(.cs-veil) #case-study-content { transition-delay: var(--cs-fade-gap); }   /* only while a veil is on screen */
html[data-cs-chrome="reader"] #case-study-content:has(> #secure-main:not([data-rendered="true"])) { opacity: 0; }
/* The gate card itself is Portfolio Site Bot's (being redesigned); nothing here styles it. */
.cs-veil { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: var(--cs-bg); opacity: 1; transition: opacity var(--cs-veil-out, .22s) ease-out; }
/* perf (PM): no document-level :has(); the veil is appended to <body> after #case-study-content, gate.js sets html.has-gate /
   html.has-secure-main, and #gate-spec (never present) keeps the old :has(#id) specificity. */
html #case-study-content:not(.content-blurred):has(> #secure-main[data-rendered="true"]) ~ .cs-veil { opacity: 0; }
html:not(.has-secure-main, #gate-spec) .cs-veil { display: none; }
html:where(.has-gate):not(#gate-spec) .cs-veil :is(.v-eyebrow, .v-h1, .v-h2, .v-h3) { visibility: hidden; }   /* the gate hero stands in for the cover heading; no stacked title over bars */
.cs-veil-in { max-width: calc(var(--cs-read-wide) + var(--cs-rail-w) + 8rem); margin: 0 auto; padding: calc(12px + 20px) var(--cs-gutter) 0; display: grid; gap: 14px; }
.cs-veil i { display: block; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--cs-text) 7%, transparent); }
.cs-veil .v-eyebrow { width: 46%; height: 10px; background: color-mix(in srgb, var(--cs-accent) 22%, transparent); }
.cs-veil .v-h { height: clamp(2.2rem, 1.3rem + 4vw, 4.2rem); border-radius: 10px; }
.cs-veil .v-h1 { width: 88%; } .cs-veil .v-h2 { width: 76%; } .cs-veil .v-h3 { width: 64%; }
.cs-veil .v-l1 { width: 72%; margin-top: 10px; } .cs-veil .v-l2 { width: 48%; }
.cs-veil .v-plate { height: 42vh; border-radius: var(--cs-radius-card); margin-top: 26px; background: var(--cs-plate); box-shadow: inset 0 0 0 1px var(--cs-rule); }
@media (min-width: 64em) {
  .cs-veil-in { grid-template-columns: var(--cs-rail-w) minmax(0, var(--cs-read-wide)); column-gap: clamp(2.5rem, 4vw, 4.5rem); justify-content: center; padding: calc(76px + 2rem) clamp(1.5rem, 3vw, 3rem) 0; }
  .cs-veil-in > * { grid-column: 2; }
  .cs-veil .v-eyebrow { width: 30%; } .cs-veil .v-h { max-width: 34rem; } .cs-veil .v-l1 { max-width: 28rem; } .cs-veil .v-l2 { max-width: 18rem; }
  .cs-veil .v-plate { height: 34vh; margin-top: 40px; }
}

/* reveal: reader.js adds html.cs-reveal for ~1.2s after the payload renders */
@media (prefers-reduced-motion: no-preference) {
  html.cs-reveal .cs-b--cover .cs-b-head > *, html.cs-reveal .cs-b--cover > :not(.cs-b-head) {
    animation: cs-rise .62s var(--cs-ease-camera) var(--about-reveal-gap, var(--cs-fade-gap, 0s)) both; }
  html.cs-reveal .cs-b--cover .cs-b-head > :nth-child(2) { animation-delay: calc(var(--about-reveal-gap, var(--cs-fade-gap, 0s)) + var(--about-reveal-step, 50ms)); }
  html.cs-reveal .cs-b--cover .cs-b-head > :nth-child(3) { animation-delay: calc(var(--cs-fade-gap, 0s) + 100ms); }
  html.cs-reveal .cs-b--cover > :nth-child(2) { animation-delay: calc(var(--cs-fade-gap, 0s) + 150ms); }
  html.cs-reveal .cs-b--cover > :nth-child(n+3) { animation-delay: calc(var(--cs-fade-gap, 0s) + 200ms); }
  html.cs-reveal .cs-toc { animation: cs-settle-x .6s var(--cs-ease-camera) calc(var(--cs-fade-gap, 0s) + 220ms) both; }
  html.cs-reveal #main-navbar .container, html.cs-reveal .cs-dock { animation: cs-settle-y .6s var(--cs-ease-camera) calc(var(--cs-fade-gap, 0s) + 280ms) both; }
}
@media (prefers-reduced-motion: reduce) {   /* instant swap: no fade, no delay */
  html[data-cs-chrome="reader"] #case-study-content, .cs-veil { transition: none !important; }
}
@keyframes cs-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cs-settle-x { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes cs-settle-y { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 63.99em) { @keyframes cs-settle-y { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } }

/* ---------- 4. Footer type D (v0.3.3) ---------- */
/* The case footer fell back to Poppins: footer.css sets --f-ui: var(--font-ui) and the case skin only remaps --f-display
   (to the reader serif). Point both at type D, the same faces as the home and /work footer headline (ByShah Inter
   Display 560, -0.02em; ByShah Inter for the UI text). Case pages only; PSB can fold this into footer.css's case skin. */
html[data-surface="case"] .site-footer, html[data-cs-chrome="reader"] .site-footer {
  --f-display: var(--rd-footer-face-display); --f-ui: var(--rd-footer-face-ui);
}
html[data-surface="case"] .site-footer .site-footer__h, html[data-cs-chrome="reader"] .site-footer .site-footer__h {
  font-weight: var(--rd-footer-h-weight); letter-spacing: var(--rd-footer-h-tracking);
}

/* Locked blur-only a1 pages (accessibility, amNY, chatbot, podcast, TurboTax; no #secure-main), case review fix 4 (Shah 3:27pm):
   the same nav + cover skeleton + title as Chase/Dependent, painted from HTML/CSS before any script runs. The page holds a static
   .cs-lockveil (its own class: reader.js removes any .cs-veil when the plaintext reader starts, which is at load on these pages).
   The container stays visible so the site nav shows; styles.css keeps every child except #main-navbar at opacity 0 while
   .content-blurred is on, so no case content shows. Unlock (gate.js drops .content-blurred) fades the skeleton out. Gate logic untouched. */
html[data-gate="a1"]:not(.has-secure-main, #gate-spec) #case-study-content.content-blurred { opacity: 1; }
.cs-lockveil { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: var(--cs-bg); opacity: 0; visibility: hidden;
  transition: opacity var(--cs-veil-out, .22s) ease-out, visibility 0s linear var(--cs-veil-out, .22s); }
html[data-gate="a1"]:not(.has-secure-main, #gate-spec) #case-study-content.content-blurred ~ .cs-lockveil { opacity: 1; visibility: visible; transition: none; }
.cs-lockveil-in { max-width: calc(var(--cs-read-wide) + var(--cs-rail-w) + 8rem); margin: 0 auto; padding: calc(12px + 20px) var(--cs-gutter) 0; display: grid; gap: 14px; }
.cs-lockveil i { display: block; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--cs-text) 7%, transparent); }
.cs-lockveil .v-head { visibility: hidden; height: calc(10px + 3 * clamp(2.2rem, 1.3rem + 4vw, 4.2rem) + 3 * 14px); }   /* eyebrow + 3 heading bars of .cs-veil; the gate hero stands in for them */
.cs-lockveil .v-l1 { width: 72%; margin-top: 10px; } .cs-lockveil .v-l2 { width: 48%; }
.cs-lockveil .v-plate { height: 42vh; border-radius: var(--cs-radius-card); margin-top: 26px; background: var(--cs-plate); box-shadow: inset 0 0 0 1px var(--cs-rule); }
@media (min-width: 64em) {
  .cs-lockveil-in { grid-template-columns: var(--cs-rail-w) minmax(0, var(--cs-read-wide)); column-gap: clamp(2.5rem, 4vw, 4.5rem); justify-content: center; padding: calc(76px + 2rem) clamp(1.5rem, 3vw, 3rem) 0; }
  .cs-lockveil-in > * { grid-column: 2; }
  .cs-lockveil .v-l1 { max-width: 28rem; } .cs-lockveil .v-l2 { max-width: 18rem; }
  .cs-lockveil .v-plate { height: 34vh; margin-top: 40px; }
}
@media (max-width: 63.99em) { html[data-gate="a1"] .cs-lockveil-in { padding-top: calc(12px + 20px + var(--nav-h)); } }
@media (prefers-reduced-motion: reduce) { .cs-lockveil { transition: none; } }

/* case studies · case-title fallback (review fix 7, Shah 3:27pm): Newsreader is preloaded; while it loads, fall back to the size-matched Georgia face, not the DM Serif Display web font (a second display face that only flashed in). case-tokens.css is shared with /work, so the override lives here. */
:is([data-surface="case"], html[data-cs-chrome="reader"]) { --cs-font-display: "Newsreader", "DM Serif Display Fallback", Georgia, "Times New Roman", serif; }