/* Hylē v4 · atmosphere.css — Round 3. The landing's world (live field + evidence threads) as a system layer.
   Direction: plan/redesign-v4/round3/DIRECTION-R3.md. Three doses: environment (auth/flow), header moment (public), accent (app).
   AA rule: white text only on solid night or on the veiled blue/night side of the field; work happens on solid paper. */

/* ---------- Threads (HyleAtmo.scene) ---------- */
.atmo-svg { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.atmo-guide { fill: none; stroke: rgba(255,255,255,.26); stroke-width: 1.2; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.atmo-line { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.atmo-t.is-gap .atmo-line { stroke: var(--brand-glow); stroke-dasharray: 5 6; }
.atmo-t.is-gap .atmo-guide { stroke: rgba(255,210,154,.3); }
.atmo-end { fill: var(--brand-night); stroke: rgba(255,255,255,.55); stroke-width: 1.5; transition: fill var(--d-3), stroke var(--d-3); }
.atmo-end.is-on { fill: #fff; stroke: #fff; }
.atmo-t.is-gap .atmo-end.is-on { fill: var(--brand-night); stroke: var(--brand-glow); }
.atmo-packet { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)) drop-shadow(0 0 14px rgba(255,210,154,.7)); }
.atmo-packet.is-gap { fill: var(--brand-glow); }
.atmo-ping { fill: none; stroke: #fff; stroke-width: 1.5; }
.atmo-svg.is-converged .atmo-t.is-on .atmo-line { stroke-width: 2; filter: drop-shadow(0 0 6px rgba(255,210,154,.85)); }
/* On paper (app empty states, 404/500 glyph labels): the same grammar in ink and accent. */
.atmo-t.no-guide .atmo-guide { display: none; }
.atmo-on-paper .atmo-guide { stroke: var(--hairline-strong); }
.atmo-on-paper .atmo-line { stroke: var(--accent); }
.atmo-on-paper .atmo-t.is-gap .atmo-line { stroke: var(--brand-orange); }
.atmo-on-paper .atmo-end { fill: var(--paper); stroke: var(--ink-4); }
.atmo-on-paper .atmo-end.is-on { fill: var(--accent); stroke: var(--accent); }

/* ---------- Night nodes on the field (solid, AA) ---------- */
.atmo-node { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--brand-night); color: #fff; font-size: var(--fs-ui); line-height: 1.35;
  box-shadow: inset 0 0 0 1px var(--night-edge), 0 28px 60px -28px rgba(5,15,40,.75); }
.atmo-node .t-mono, .atmo-node small { color: var(--on-dark-2); }
.atmo-node small { display: block; font-size: var(--fs-small); line-height: 1.4; }
.atmo-node b { font-weight: 600; }
.atmo-node .cite { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.atmo-node .cite.gap { background: rgba(225,145,54,.2); color: var(--brand-glow); }
.atmo-node.is-dim { color: var(--on-dark-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 50px -30px rgba(5,15,40,.6); }
.atmo-node.is-gap { box-shadow: inset 0 0 0 1px rgba(255,210,154,.4), 0 28px 60px -28px rgba(5,15,40,.75); }
.atmo-node.is-lit { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 4px rgba(255,255,255,.08), 0 28px 60px -28px rgba(5,15,40,.75); }
.atmo-node-ico { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.1); color: #fff; }
.atmo-node-ico svg { width: 16px; height: 16px; }
.atmo-hub { position: relative; z-index: 2; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-night); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 0 18px rgba(255,255,255,.25); transition: background var(--d-3), box-shadow var(--d-3); }
.atmo-hub.is-on { background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.16), 0 0 24px rgba(255,210,154,.8); }
.atmo-eyebrow { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--on-dark-2); }

/* ---------- Field environment (auth / flow pages) ---------- */
body.atmo { background: var(--brand-night); }
.atmo-field { position: fixed; inset: 0; height: 100lvh; z-index: 0; }
/* Stronger veil: top strip (bar), bottom strip (legal line) and the left third stay night-blue for white type. */
.atmo-field .veil { background:
  linear-gradient(180deg, rgba(8,18,40,.52) 0, rgba(8,18,40,.18) 120px, rgba(8,18,40,0) 260px),
  linear-gradient(0deg, rgba(8,18,40,.62) 0, rgba(8,18,40,.2) 110px, rgba(8,18,40,0) 220px),
  radial-gradient(ellipse 60% 70% at 50% 50%, rgba(8,18,40,.16), rgba(8,18,40,0) 70%); }
.atmo-card { position: relative; z-index: 2; background: var(--paper); border-radius: var(--r-2xl); box-shadow: 0 2px 6px rgba(5,15,40,.18), 0 50px 110px -40px rgba(5,15,40,.7), 0 0 0 1px rgba(255,255,255,.08); }

/* ---------- Public header moment on the field (band, then the paper sheet takes over) ---------- */
.atmo-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: calc(var(--nav-h) + clamp(28px, 6vh, 64px)) 0 calc(var(--band-pad, 96px)); }
.atmo-band > .field { z-index: -1; }
.atmo-band .field .veil { background:
  linear-gradient(180deg, rgba(8,18,40,.5) 0, rgba(8,18,40,.12) 120px, rgba(8,18,40,0) 220px),
  linear-gradient(90deg, rgba(8,18,40,.42) 0%, rgba(8,18,40,.18) 46%, rgba(8,18,40,0) 70%); }
.atmo-band .t-display, .atmo-band .t-title { color: #fff; }
.atmo-band .atmo-lede { max-width: 54ch; margin-top: 16px; font-size: var(--fs-lead); line-height: var(--lh-lead); color: #fff; text-wrap: pretty; }
.atmo-band .page-crumb, .atmo-band .page-crumb a { color: #fff; }
.atmo-band .page-crumb svg { color: rgba(255,255,255,.8); }
.atmo-kicker { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--brand-night); box-shadow: inset 0 0 0 1px var(--night-edge); color: #fff; font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.atmo-kicker .kd { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-glow); box-shadow: 0 0 0 3px rgba(255,210,154,.2); }
.atmo-sheet { position: relative; z-index: 2; margin-top: -40px; border-radius: var(--r-2xl) var(--r-2xl) 0 0; background: var(--paper); }
/* 10-09 C4: a .page-head promoted to the band drops its paper hairline (notices). */
.atmo-band.page-head { border-bottom: 0; }
@media (max-width: 640px) {
  .atmo-band { padding-top: calc(var(--nav-h) + 20px); --band-pad: 72px; }
  .atmo-band .field .veil { background: linear-gradient(180deg, rgba(8,18,40,.5) 0, rgba(8,18,40,.28) 50%, rgba(8,18,40,.36) 100%); }
  .atmo-sheet { margin-top: -28px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

/* ---------- Document head band (Audit-fix A) ----------
   Was a 6px gradient strip at y=0 plus a glow cropped by the viewport top: under the transparent nav it read as a cut
   sliver of shader (terms, privacy, refund, notices: founder review). Now the whole head, from y=0 behind the nav down to
   the title block, is ONE paper-field band (HyleAtmo.paperField mode "band", mounted on .atmo-ribbon) that fades to paper
   before the head's bottom rule. Title and text stay on paper-tinted ground (AA). No strip, no hard edge. */
.atmo-ribbon { position: relative; isolation: isolate; --paper-field-wash: .16; --paper-field-glyph: .2; }
.atmo-ribbon::before, .atmo-ribbon::after { content: none !important; }
.atmo-ribbon-tile { --tile: 44px; margin-bottom: 18px; }
@media (max-width: 640px) { .atmo-ribbon::after { width: 80vw; height: 220px; opacity: .2; } .atmo-ribbon-tile { --tile: 36px; margin-bottom: 12px; } }

/* ---------- Paper field (Audit-fix A) ----------
   One canvas per page (atmosphere.js paperField). App pages: fixed behind the shell, the shell and content sit above it.
   CSS field (.is-css) when WebGL2 is missing or software-rendered: the same wash, dot dither and grain, static. */
.paper-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.paper-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
/* z-index -1 in the root stacking context: above the canvas (body paper propagates to it), below every box. No stacking
   context on .app, so dialogs/sheets inside it still layer over body-level chrome (bottom nav, palette, toasts). */
.paper-field.is-app { position: fixed; z-index: -1; }
.paper-field.is-band { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%); }
.paper-field.is-css::before { content: ""; position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .08 0 0 0 0 .075 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(58% 60% at 8% -10%, rgba(18,117,216,.11), rgba(18,117,216,0) 70%),
    radial-gradient(60% 64% at 94% -8%, rgba(225,145,54,.14), rgba(225,145,54,0) 72%),
    radial-gradient(42% 40% at 100% 100%, rgba(225,145,54,.06), rgba(225,145,54,0) 70%); }
.paper-field.is-css::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(28,88,160,.34) 0 .9px, transparent 1.3px); background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(52% 46% at 80% 0%, #000 0%, rgba(0,0,0,0) 78%), radial-gradient(40% 36% at 14% 0%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 78%);
  mask-image: radial-gradient(52% 46% at 80% 0%, #000 0%, rgba(0,0,0,0) 78%), radial-gradient(40% 36% at 14% 0%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 78%); }
.paper-field.is-band.is-css::after { -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,0) 70%); mask-image: linear-gradient(180deg, #000, rgba(0,0,0,0) 70%); opacity: .7; }
@media print { .paper-field { display: none; } }

/* ---------- Live field glyph (404, 500, empty and success states) ---------- */
.atmo-glyph { --g: 168px; position: relative; isolation: isolate; overflow: hidden; flex: none; width: var(--g); height: var(--g); border-radius: calc(var(--g) * .26); color: #fff; background: var(--brand-night);
  box-shadow: 0 30px 70px -30px rgba(11,24,48,.6), inset 0 0 0 1px rgba(255,255,255,.08); }
.atmo-glyph > .field { z-index: -1; border-radius: inherit; }
.atmo-glyph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atmo-glyph .gl { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.atmo-glyph .gl.is-gap { stroke: var(--brand-glow); stroke-dasharray: 4 5; }
.atmo-glyph .gn { fill: #fff; }
.atmo-glyph .gn.is-gap { fill: none; stroke: var(--brand-glow); stroke-width: 2; }
.atmo-glyph .gp { fill: #fff; filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); opacity: 0; }
.atmo-glyph .gx { fill: none; stroke: #ffb4a8; stroke-width: 2.2; stroke-linecap: round; }
.atmo-glyph.is-sm { --g: 88px; box-shadow: 0 18px 40px -22px rgba(11,24,48,.55); }
.atmo-glyph.is-xs { --g: 64px; box-shadow: 0 14px 30px -18px rgba(11,24,48,.5); }
.atmo-glyph.is-sm .gl, .atmo-glyph.is-xs .gl { stroke-width: 2.6; }

/* ---------- Pending facts: a quiet inline badge, never the largest object ---------- */
.gap-chip { min-height: 24px; padding: 0 8px 0 7px; gap: 6px; border: 0; border-radius: var(--r-sm); background: var(--warning-tint); color: var(--warning); font-size: var(--fs-small); font-weight: 500; }
.gap-chip::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; }
.gap-chip svg { display: none; }
.gap-note { padding: 0; border: 0; background: none; border-radius: 0; gap: 8px; color: var(--ink-2); font-size: var(--fs-desc); line-height: var(--lh-desc); align-items: baseline; }
.gap-note svg { display: none; }
.gap-note::before { content: "Pending"; flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); background: var(--warning-tint); color: var(--warning); font-size: var(--fs-small); font-weight: 600; line-height: 1; transform: translateY(-1px); }
.gap-note.no-badge::before { content: none; }



/* ---------- Band layout helpers (public header moments) ---------- */
.atmo-band-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 48px clamp(40px, 6vw, 96px); }
.atmo-band-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.atmo-band-copy .atmo-lede { margin-top: 0; }
.atmo-band-art { position: relative; min-width: 0; }
.atmo-band .page-sub { color: #fff; }
.atmo-band .btn-light { color: var(--ink); }
@media (max-width: 960px) { .atmo-band-grid { grid-template-columns: minmax(0, 1fr); } }



/* ---------- Recovery (404, 500): a live field glyph beside the message ---------- */
.atmo-recover { grid-template-columns: minmax(0, 580px) auto; justify-content: center; align-items: center; column-gap: clamp(56px, 7vw, 120px); }
.atmo-recover > .rec-glyph { order: 2; --g: 320px; }
.atmo-recover .recover-mark { display: none; }
.rec-glyph-steps { position: absolute; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .02em; color: rgba(255,255,255,.9); }
.rec-glyph-steps li.is-x { color: #ffd6cf; }
.rec-glyph .field .veil { background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(8,18,40,.36), rgba(8,18,40,.12) 70%), linear-gradient(0deg, rgba(8,18,40,.5), rgba(8,18,40,0) 40%); }
@media (max-width: 900px) {
  .atmo-recover { grid-template-columns: minmax(0, 1fr); }
  .atmo-recover > .rec-glyph { order: -1; --g: 112px; justify-self: start; margin-bottom: 4px; }
  .rec-glyph-steps { display: none; }
  .rec-glyph .gl { stroke-width: 7; } .rec-glyph .gx { stroke-width: 7; }
}



/* ---------- Specimen on the field (email preview): the artefact floats on the live field ---------- */
.atmo-canvas { position: relative; isolation: isolate; overflow: hidden; background: var(--brand-night) !important; background-image: none !important; }
.atmo-canvas > .field { z-index: -1; }
.atmo-canvas > .field .veil { background: linear-gradient(180deg, rgba(8,18,40,.3), rgba(8,18,40,.08) 30%, rgba(8,18,40,.2)); }
.atmo-canvas .spx-frame { box-shadow: 0 2px 6px rgba(5,15,40,.2), 0 60px 120px -40px rgba(5,15,40,.75), 0 0 0 1px rgba(255,255,255,.1); }


/* Night chips carry their counts in on-dark ink (pressed = white chip, ink count). */
.chip-night .count { color: var(--on-dark-2); }
.chip-night[aria-pressed="true"] .count { color: var(--ink-3); }


/* =====================================================================================================
   App brand layer (Round 3): restrained but unmistakable. Field tile + soft wash in the sidebar brand row, a resting
   field hairline under the topbar (the live rule while jobs run), section titles on the middle type steps, thread art
   in empty states, a moving field edge on running rows. Phone: one bottom bar at a time inside a study.
   ===================================================================================================== */
/* Sidebar surface + brand lockup moved to shell-app.css / components.css (Audit-fix A). */
.app-top::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--brand-gradient); opacity: .5; pointer-events: none; }
.app-top.is-live::before { height: 2px; opacity: .9; }

/* Section titles: the middle steps of the scale, so a page reads title → section → row. */
.app-body .sec-title, .app-body .fg-h { font-size: var(--fs-heading); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.app-body .rd-h { font-size: var(--fs-heading); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.app-body .wb-rail-h { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -.01em; }
.app-body .rs-group-h, .app-body .tp-group-h { font-size: var(--fs-ui); color: var(--ink); }

/* Running rows: the field edge moves while the job runs. */
.list-row.is-running::before { background: linear-gradient(180deg, var(--brand-blue), var(--brand-orange), var(--brand-blue)); background-size: 100% 300%; animation: atmo-run 2.4s linear infinite; }
@keyframes atmo-run { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } }

/* Empty states: the field tile with the thread glyph (drawn when it appears). */
.state-art.atmo-state { width: 76px; height: 76px; border-radius: 22px; color: #fff; overflow: hidden; box-shadow: 0 18px 36px -18px rgba(13,50,110,.55); }
.state-art.atmo-state svg { width: 40px; height: 40px; overflow: visible; }
.state-art.atmo-state .sa-gap { stroke: var(--brand-glow); stroke-dasharray: 2.5 3; }

/* Phone: inside a study (workbench, reader) the dock is the one bottom bar; it slims while you read. */
@media (max-width: 640px) {
  .wb-page .bottom-nav, .rd-page .bottom-nav { display: none; }
  [data-dock].is-slim { padding-top: 4px; padding-bottom: calc(4px + var(--dock-inset, 0px)); }
  .rd-dock.is-slim .rd-fab { min-height: 44px; }
  .rd-dock.is-slim .rd-fab-t span { display: none; }
}

/* Settings family on phone: the rail becomes one select. */
.set-rail-select { display: none; }
@media (max-width: 640px) {
  .set-page .set-rail { display: none !important; }
  .set-rail-select { display: block; margin: 0 0 16px; }
  .set-rail-select select { width: 100%; height: 48px; padding: 0 40px 0 14px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2367635b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font-size: var(--fs-body); font-weight: 500; color: var(--ink); -webkit-appearance: none; appearance: none; }
}