/* The Arthalyze surface (T618; DL-O80, DL-O82): the look of every page comes from ONE source, the
   approved Fable page docs/08-ui-ux/prototypes/approved-current/glass-elevation-v2/ (every number in
   claude/arthalyze-glass-elevation-cto-handoff.md). Figma frames give layout and words only.
   - glass.js draws the scene (graphite, glow, 32 px grid, markers, the saffron band, the aperture
     ring or iris) on one fixed canvas, and every ".card.glass" as see-through liquid glass (WebGL)
     that bends the band, ring and grid behind it. The panels themselves are transparent boxes.
   - This file keeps the same scene in CSS for a page without scripts, and the approved CSS panel
     for a browser without WebGL (html.no-gl) or with "reduce transparency".
   - No halo behind words anywhere: the shader caps the glass brightness under every line of words.
   - Reduced motion: glass.js runs the still version (window.motion level 3); nothing here moves. */

:root {
  --scene-bg: #0d191f;
  --grid-step: 32px; --grid-off: 16px; --grid-col: rgba(118, 148, 163, .14);
  --dot-step: 64px; --dot-col: rgba(189, 213, 222, .48); --dot-r: 1.1px;
  --band-fill: rgba(166, 67, 10, .27); --band-edge: rgba(231, 167, 126, .53); --band-h: 20px;
  --band-rot: -27.5deg; --band-x: 57vw; --band-y: 51vh;
  --ring-col: rgba(180, 210, 223, .40); --ring2-col: rgba(123, 158, 175, .20); --ring-x: 69vw; --ring-y: 49vh;
  --glow: radial-gradient(72vw 72vw at 65% 50%, #23363f 0%, #14252d 65%, #0d191f 100%);
  --panel-fill: rgba(16, 29, 34, .50); --panel-rim: rgba(226, 246, 255, .62);
  --sheath: rgba(197, 226, 235, .38); --seam: rgba(7, 21, 26, .71);
  --hair: rgba(206, 228, 234, .16);          /* approved hairline between rows (kpis, tables) */
  --well: rgba(9, 19, 24, .42); --well-rim: rgba(206, 228, 234, .14);   /* approved light wells (tiles, file rows) */
}

/* ---- the scene: glass.js draws it on a fixed canvas; the CSS below is the no-script version ---- */
body.app { background: var(--scene-bg); position: relative; }
.arth-scene { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; display: block; }
html:not(.glass-scene) body.app::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-color: var(--scene-bg);
  background-image:
    radial-gradient(circle, var(--dot-col) var(--dot-r), transparent calc(var(--dot-r) + .5px)),
    linear-gradient(var(--grid-col) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-col) 1px, transparent 1px),
    var(--glow);
  background-size: var(--dot-step) var(--dot-step), var(--grid-step) var(--grid-step), var(--grid-step) var(--grid-step), 100% 100%;
  background-position:
    calc(var(--grid-off) - var(--dot-r) + .5px) calc(var(--grid-off) - var(--dot-r) + .5px),
    var(--grid-off) var(--grid-off), var(--grid-off) var(--grid-off), 0 0;
}
html:not(.glass-scene) body.app::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  width: 200vmax; height: var(--band-h);
  left: calc(var(--band-x) - 100vmax); top: calc(var(--band-y) - var(--band-h) / 2);
  background: var(--band-fill);
  border-top: 1px solid var(--band-edge); border-bottom: 1px solid var(--band-edge);
  transform: rotate(var(--band-rot)); transform-origin: 50% 50%;
}
.appbar { box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.appbar.scene { box-shadow: none; }
.page, .appbar { position: relative; z-index: 1; }
.appbar { z-index: 2; }

/* ---- glass panels ---------------------------------------------------------------------------- */
/* radius: main 30 px, secondary 22 px (glass.js marks the first visible panel of a page as main) */
.card.glass { position: relative; isolation: isolate; border-radius: 30px; touch-action: pan-y pinch-zoom;
  --sig-behind: rgba(16, 29, 34, .5); }
.card.glass.sec { border-radius: 22px; }
.card.glass > * { position: relative; }
.card.glass.more > summary { position: static; }
/* the glass layer (glass.js): one WebGL canvas behind the page's words, clipped to the page so it never
   makes the page longer; it scrolls with the page between frames (T618 speed, CTO 1 Nov) */
body.app { position: relative; }
.glass-clip { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.glass-layer { position: absolute; left: 0; top: 0; display: block; pointer-events: none; will-change: transform; }

/* WebGL on: the panel is a transparent box; glass.js paints the material under it */
html.gl .card.glass { background: transparent; border: 0; box-shadow: none; }
/* no WebGL, or "reduce transparency": the approved CSS panel (fill 50 %, rim, sheath, seam, shadow) */
html:not(.gl) .card.glass {
  background: var(--panel-fill);
  border: 1.15px solid var(--panel-rim);
  box-shadow: 0 5px 16px rgba(0, 0, 0, .56);
}
html:not(.gl) .card.glass::before { content: ""; position: absolute; inset: 5.5px; border-radius: 24px; pointer-events: none; border: .8px solid var(--sheath); }
html:not(.gl) .card.glass::after { content: ""; position: absolute; inset: 7px; border-radius: 23px; pointer-events: none; border: .5px solid var(--seam); }
html:not(.gl) .card.glass.sec::before { border-radius: 16px; }
html:not(.gl) .card.glass.sec::after { border-radius: 15px; }
html:not(.gl) .glass-clip { display: none; }

/* ---- fields: the approved glass well (the note box of idea 4), not a solid box ---------------- */
input[type=text], input[type=password], input[type=date], input[type=email], select, textarea, .field.search.inset {
  background: rgba(7, 17, 22, .55); border: 0; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(226, 247, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .06); }
.field.search.inset input { background: transparent; box-shadow: none; border-radius: 0; }

/* ---- status pills (UA-16): the approved page's pills (glass elevation v2: .pill.ok, .check) ---- */
.pill { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 5px 9px; border-radius: 99px; white-space: nowrap; line-height: 1.2; }
.state.pill.ok, table.list.strips .state.pill.ok { color: #1a1208; background: #8fdcae; }
.state.pill.warn, table.list.strips .state.pill.warn { color: #1a1208; background: #ffd38a; }
/* file rows (UA-06): the approved page's .filerow and .mono, word for word */
.filerow { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(9,19,24,.42); border: 1px solid rgba(206,228,234,.14); font-size: 14px; }
.mono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 600; font-size: 12px; background: rgba(244,119,33,.14); border: 1px solid rgba(234,183,139,.4); color: #f6b87d; }
.filerow .b { color: var(--muted); font-size: 12px; margin: 2px 0 0; overflow-wrap: anywhere; }
.filerow .fname { font-size: 14px; font-weight: 500; }
.filerow .status, .filerow .detail { margin: 2px 0 0; font-size: 13px; }
ul.files > li:has(> .filerow) { border-top: 0; padding: 5px 0; }
/* the whole case row opens the case (UA-16); the name stays the one real link */
table.list.strips tr { position: relative; }
table.list.strips a.rowlink::after { content: ""; position: absolute; inset: 0; }
table.list.strips tr:hover td { background: rgba(226, 245, 255, .04); }

/* ---- rows: hairlines and light wells, never solid boxes ---------------------------------------- */
ul.files > li, ol.facts > li, .fold, dl.figures dt, dl.figures dd { border-color: var(--hair); }
table.list th, table.list td { border-color: var(--hair); }
table.list.strips { border-collapse: collapse; border-spacing: 0; margin-top: 0; }
table.list.strips td, table.list.strips td:first-child { background: none; box-shadow: none; border-radius: 0;
  border-bottom: 1px solid var(--hair); padding: 16px 12px 16px 0; }
table.list.strips th { padding: 0 12px 10px 0; border-bottom: 1px solid var(--hair); }
table.list.strips tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
  table.list.strips tr { background: none; border-radius: 0; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  table.list.strips tr:last-child { border-bottom: 0; }
  table.list.strips td, table.list.strips td:first-child { border: 0; padding: 2px 0; }
}
.tile { background: var(--well); border: 1px solid var(--well-rim); border-radius: 18px; will-change: transform; }
.tile .v { position: relative; }
.tile .old { position: absolute; left: 0; top: 0; pointer-events: none; }

/* ---- choice chips (idea 4): the light button's material, smaller, with a selected state -------- */
.seg { position: relative; isolation: isolate; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  color: #f4f6f1; font: 500 14px/1.25 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  --fx: 50%; --fy: 30%;
  background: linear-gradient(180deg, rgba(226,245,255,.12), rgba(226,245,255,.03) 38%, rgba(244,119,33,.07) 65%, rgba(166,67,10,.22));
  box-shadow: inset 0 0 0 1px rgba(226,247,255,.42), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(226,247,255,.28), 0 4px 8px -5px rgba(0,0,0,.75), 0 0 0 3px rgba(4,12,16,.5), 0 0 0 4px rgba(130,160,170,.1);
  transition: transform 260ms cubic-bezier(.34,1.56,.64,1), box-shadow 200ms ease-out, background 200ms ease-out, color 200ms; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.seg::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: .8; background-image: var(--sparkle, none); background-size: 256px 128px; background-position: var(--sp, 0 0);
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 50% 50%, transparent 50%, #000 90%); mask-image: radial-gradient(ellipse 55% 75% at 50% 50%, transparent 50%, #000 90%); }
.seg::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; pointer-events: none; opacity: .45;
  background: radial-gradient(ellipse 60% 70% at var(--fx) var(--fy), rgba(255,255,255,.28), transparent 70%), radial-gradient(ellipse 80% 60% at 50% 120%, rgba(244,119,33,.35), transparent 70%); transition: opacity 120ms ease-out; }
.seg:hover:not([disabled]) { filter: brightness(1.06); }
.seg:active:not([disabled]), .seg.is-down { transform: translateY(1.5px) scale(.97, .93); transition: transform 90ms ease-out, box-shadow 90ms ease-out; box-shadow: inset 0 0 0 1px rgba(236,250,255,.7), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(226,247,255,.4), 0 1px 3px -2px rgba(0,0,0,.8), 0 0 0 3px rgba(4,12,16,.7), 0 0 0 4px rgba(130,160,170,.14); }
.seg:active::after, .seg.is-down::after { opacity: 1; }
.seg:focus-visible, .seg:has(input:focus-visible) { outline: 3px solid #ffd38a; outline-offset: 4px; }
.seg.on, .seg:has(input:checked) { background: linear-gradient(180deg, rgba(226,245,255,.16), rgba(244,119,33,.18) 32%, rgba(244,119,33,.32) 62%, rgba(166,67,10,.62)); box-shadow: inset 0 0 0 1.25px rgba(236,250,255,.75), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,221,190,.5), 0 6px 10px -6px rgba(0,0,0,.8), 0 0 0 3px rgba(4,12,16,.6), 0 0 0 4px rgba(234,183,139,.28); color: #f4f6f1; }
.seg.on::after, .seg:has(input:checked)::after { opacity: .85; }
.seg .tick { display: none; flex: none; width: 14px; height: 14px; stroke: #ffddbe; fill: none; stroke-width: 2.2; }
.seg.on .tick, .seg:has(input:checked) .tick { display: inline; }
.seg.expected { box-shadow: inset 0 0 0 1px rgba(236,250,255,.52), inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(255,221,190,.42), 0 4px 8px -5px rgba(0,0,0,.75), 0 0 0 3px rgba(4,12,16,.5), 0 0 0 4px rgba(234,183,139,.22); background: linear-gradient(180deg, rgba(226,245,255,.13), rgba(244,119,33,.09) 38%, rgba(244,119,33,.14) 65%, rgba(166,67,10,.36)); }
.seg.expected.on { background: linear-gradient(180deg, rgba(226,245,255,.16), rgba(244,119,33,.18) 32%, rgba(244,119,33,.32) 62%, rgba(166,67,10,.62)); box-shadow: inset 0 0 0 1.25px rgba(236,250,255,.75), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,221,190,.5), 0 6px 10px -6px rgba(0,0,0,.8), 0 0 0 3px rgba(4,12,16,.6), 0 0 0 4px rgba(234,183,139,.28); }
.seg[disabled] { cursor: default; opacity: .6; }
.seg input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.segs { gap: 12px; }

/* ---- results: the film strip of months covered (idea 3) -------------------------------------- */
.cover.film-strip { grid-column: 2; display: grid; gap: 10px; align-content: start; min-width: 0; }
.film-strip .acct { margin: 0; font-size: 14px; font-weight: 500; }
.film-strip .acct small { color: var(--muted); font-weight: 400; font-size: 12px; }
.film-strip .acct.unsure { color: var(--muted); }
.film { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; padding: 9px 8px; border-radius: 12px;
  background: rgba(7,17,22,.55); box-shadow: inset 0 0 0 1px rgba(226,247,255,.22), inset 0 1px 0 rgba(255,255,255,.08); }
.film::before, .film::after { content: ""; position: absolute; left: 8px; right: 8px; height: 3px; background: repeating-linear-gradient(90deg, rgba(226,247,255,.28) 0 5px, transparent 5px 12px); border-radius: 2px; }
.film::before { top: 3px; } .film::after { bottom: 3px; }
.frame { position: relative; height: 40px; border-radius: 6px; overflow: hidden; background: rgba(4,12,16,.7); box-shadow: inset 0 0 0 1px rgba(226,247,255,.18), inset 0 1px 0 rgba(255,255,255,.1); }
.frame i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(255,221,190,.35), rgba(244,119,33,.9) 22%, rgba(166,67,10,.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.frame.part i { height: 50%; }
.frame.gap { background: rgba(4,12,16,.45); box-shadow: inset 0 0 0 1px rgba(226,247,255,.1), inset 0 0 0 100px rgba(0,0,0,0); }
.frame.gap::after { content: ""; position: absolute; left: 30%; right: 30%; top: 50%; height: 1px; background: rgba(206,228,234,.25); }
.months { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 6px; padding: 0 8px; color: var(--muted); font-size: 11px; text-align: center; }
.film-strip .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 12px; margin: 0; }
.film-strip .legend i { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; background: linear-gradient(180deg, rgba(255,221,190,.35), rgba(244,119,33,.9) 22%, rgba(166,67,10,.95)); }
.film-strip .legend i.half { background: linear-gradient(180deg, rgba(4,12,16,.7) 50%, rgba(244,119,33,.9) 50%); }
.film-strip .legend i.none { background: rgba(4,12,16,.7); box-shadow: inset 0 0 0 1px rgba(226,247,255,.25); }
@media (max-width: 860px) { .cover.film-strip { grid-column: 1; } }

/* ---- the analysing moment (idea 2): the iris in the card; step changes (idea 5) --------------- */
.iris-cv { display: block; width: 264px; height: 264px; max-width: 100%; margin: 0 auto 8px; }
.working { text-align: center; }
.working .actions { justify-content: center; }
.view.morphing { position: relative; overflow: clip; overflow-clip-margin: 32px; }
.morph-out { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 24px; pointer-events: none; }

/* Processing (pages without the iris): the wordmark breathes slowly instead of a fake percentage. */
.logo.pulse { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---- plain versions ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .logo.pulse { animation: none; }
  .seg, .seg:active { transition: none; }
}
html.still .seg, html.still .seg:active { transition: none; }
@media (prefers-reduced-transparency: reduce) {
  html:not(.gl) .card.glass { background: var(--panel); --sig-behind: var(--panel); }
}

/* T618 (CTO 2 Nov): words never leave their chip, pill or row at any width or with any font; they
   wrap inside the box instead. One line looks exactly as before. */
.seg { min-width: 0; max-width: 100%; padding-top: 6px; padding-bottom: 6px; overflow-wrap: anywhere; }
.pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.filerow > * { min-width: 0; }
.filerow .fname, .filerow .status, .filerow .detail { overflow-wrap: anywhere; }
.chip { max-width: 100%; overflow-wrap: anywhere; }