/* ═════════════════════════════════════════════════════════════════════════════
   VENDORED VERBATIM — DO NOT EDIT THIS FILE HERE.

   Source : Alterspective-Design-System-Showcase — assets/adl.css
   Commit : 11db15509c54dec7dfcb9532da8fa5f7f67b4958
            2026-08-11 — feat(ui): glass context rails — hover-reveal, click-to-anchor (⚓), AI Insights card (ADL-DEC-059) (#36)
   Digest : sha256 df84086383df02e8b2b9587c30da2c9ae61876274b147dbb9d176bcf4c1ea0b4
            (459 lines, LF-normalised, the upstream file as committed)

   Everything after this banner is byte-for-byte the upstream file. The banner
   is the only local addition, and it exists because the last copy carried no
   provenance at all: this file had drifted 4 changed lines and 306 MISSING
   lines from its source — 153 lines vendored against 459 upstream, everything
   from §4 onwards absent — and nothing in the repository could say so, because
   nothing recorded what "its source" meant. A vendored file with no recorded
   revision cannot drift visibly; it can only drift. (An earlier draft of this
   banner said 287 lines and "§4-§12". Neither reproduced: the old copy stopped
   at §3 and upstream continues past §13, so the gap is §4-end.)

   TO RE-SYNC when upstream moves: replace everything after this banner with
   the upstream file, then update Commit, Digest and the line count above.

   TO CHECK for drift — BANNER_LINES is the placeholder replaced below:

     tail -n +39 public/adl.css | tr -d '\r' | sha256sum

   The digest is over LF-NORMALISED bytes deliberately. core.autocrlf is true
   on Windows here, so a digest taken over working-tree bytes changes with the
   checkout, and the check would fail on a clean clone while nothing was wrong.
   Normalised, it equals `git show <Commit>:assets/adl.css | sha256sum` in the
   Showcase repository exactly — the comparison that actually matters.

   FIXING SOMETHING IN HERE MEANS FIXING IT UPSTREAM. A local edit is invisible
   to every other consumer of the design system and is silently destroyed by
   the next re-sync. Page-local corrections belong in app.css, which is linked
   AFTER this file for exactly that purpose (see the pill notes there).
   ═════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════════
   assets/adl.css — the SINGLE SOURCE for the ADL mock-card anatomy and the
   tenant-skin (brand) token scopes. Supersedes the copied-block mechanism
   (DEC-024 → DEC-026): pages <link> this file instead of carrying a verbatim
   copy. Repo-relative, no CDN, no build — pages still open from disk.

   HOW THIS FILE IS ORGANISED (for the next editor, human or AI):
     §1 ANATOMY   — the mock-card component classes. NEVER themeable: no brand
                    may change geometry here (radius, spacing, label placement,
                    rail width). Change = design change = review round.
     §2 BRANDS    — tenant-skin token scopes. A brand ONLY re-declares tokens
                    (colour, type, button radius). To add a brand: copy one
                    scope pair (light + dark), rename the [data-brand="…"]
                    key, and register it in assets/adl-brands.js. Nothing else.
     §3 SWITCHER  — chrome for the brand bar that adl-brands.js renders.

   CONTRACTS THE PAGES RELY ON:
   - Every class that carries layout declares `display` explicitly (ballot
     stimuli must stay <span>-based inside <label class="opt">; standards mode
     gives spans no free block behaviour).
   - Consuming pages define the base (Alterspective) tokens on :root for both
     themes; this file only OVERRIDES them inside brand scopes.
   - Brand overrides apply ONLY inside elements marked class="adl-scope"
     (demo stages), and only when <html data-brand="…"> is set by
     assets/adl-brands.js. Pages without the switcher render house-skin.
   - Load order: <link href="…/adl.css"> BEFORE the page's own <style> so
     page-local extensions can override.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ §1 ANATOMY — ADL mock-card (single source; brands may not touch geometry) ═══ */
.adl-card{display:block;position:relative;background:var(--raise,var(--surface));border-radius:8px;
  font-family:var(--as-font-body,'Montserrat','Helvetica Neue',Arial,sans-serif);
  transition:box-shadow .25s ease,border-color .25s ease}
.adl-card.elevated{box-shadow:var(--sh-2,var(--sh));border:1px solid transparent}
.adl-card.outlined{border:1.5px solid var(--rule-2);box-shadow:none}
.adl-card.filled{background:var(--sunk);border:1px solid transparent;box-shadow:none}
.adl-card.plain{background:transparent;border:0}
.adl-card .edge{display:block;position:absolute;inset:0 auto 0 0;width:5px;border-radius:8px 0 0 8px}
.edge.e-danger{background:var(--danger)} .edge.e-warning{background:var(--warn)}
.edge.e-success{background:var(--ok)} .edge.e-info{background:var(--info,var(--flow-2))}
.adl-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.05rem .3rem}
.adl-head .ttl{display:block;font-weight:680;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink)}
.adl-badge{display:inline-block;margin-left:auto;font-size:.68rem;font-weight:700;padding:.18em .6em;border-radius:999px;white-space:nowrap}
.adl-badge.b-danger{background:var(--danger-soft);color:var(--danger-ink,var(--danger))}
.adl-badge.b-warning{background:var(--warn-soft);color:var(--warn)}
.adl-rows{display:grid;padding:.4rem 1.05rem 1.05rem;gap:.75rem}
.adl-row{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:.55rem .9rem;border-radius:6px}
.adl-card.plain .adl-head{padding-left:.2rem}
.adl-card.plain .adl-rows{padding-left:.2rem;padding-right:.2rem}
.adl-f{display:block;min-width:0;position:relative}
.adl-f .lb{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:680;margin-bottom:.14rem}
.adl-f .vl{display:flex;font-size:.92rem;line-height:1.35;align-items:baseline;gap:.35rem;flex-wrap:wrap;overflow-wrap:anywhere;color:var(--ink)}
.adl-f .vl .ico{font-size:.85em}
.adl-f .vl .sfx{font-size:.78em;font-weight:600;opacity:.9}
.t-neutral{color:var(--ink)} .t-muted{color:var(--ink-3)}
.t-success{color:var(--ok)} .t-warning{color:var(--warn);font-weight:600}
.t-danger{color:var(--danger);font-weight:650} .t-info{color:var(--flow-2,var(--info))}
.pill{display:inline-flex;font-size:.78rem;font-weight:650;padding:.2em .7em;border-radius:999px;line-height:1.4}
.pill.p-ok{background:var(--ok-soft);color:var(--ok)} .pill.p-warn{background:var(--warn-soft);color:var(--warn)}
.pill.p-dan{background:var(--danger-soft);color:var(--danger-ink,var(--danger))} .pill.p-info{background:var(--info-soft);color:var(--info-ink,var(--flow-ink,var(--info)))}
.receipt{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 1.05rem 1rem;padding:.6rem .8rem;
  border-radius:6px;background:var(--ok-soft);color:var(--ok);font-size:.82rem;font-weight:600;
  border:1px solid color-mix(in srgb,var(--ok) 28%,transparent)}
.receipt .nx{margin-left:auto;font-weight:700;color:var(--flow-2,var(--info));cursor:pointer;background:none;border:0;font:inherit;text-decoration:underline;text-underline-offset:2px}
.adl-f.lean-able::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--lean,#ABDD65);transition:width .18s ease}
.adl-f.lean-able:hover::after,.adl-f.lean-able:focus-within::after,.adl-f.lean-able.open::after,.adl-f.lean-able.seal-on::after{width:2.2rem}
@media (prefers-reduced-motion:reduce){.adl-card,.adl-f.lean-able::after{transition:none}}

/* ═══ §2 BRANDS — tenant-skin token scopes ═══════════════════════════════════
   A skin re-declares TOKENS ONLY, inside .adl-scope, under <html data-brand>.
   "alterspective" is the default: no override block — scopes inherit the
   page's own :root tokens. Registry + theme documents: assets/adl-brands.js.

   SHAREDO STANDARD — primary ramp observed live on a stock demo tenant
   (2026-07-30): #219D58, on-dark #6EDD3A; Segoe stack; flat Bootstrap-era
   chrome; cool greys #22292F/#3D4852 in dark. */
[data-brand="sharedo"] .adl-scope{
  --as-font-display:'Segoe UI','Helvetica Neue',Arial,sans-serif; --as-font-body:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --btn-radius:4px;
  --surface:#FFFFFF; --raise:#FFFFFF; --sunk:#F1F5F8; --edge:#D5DDE5; --rule:#E4E9F0; --rule-2:#B9C4CE;
  --ink:#22292F; --ink-2:#4A555F; --ink-3:#5E6B77; --ink-4:#8494A2;
  --flow:#219D58; --flow-2:#1C7A44; --flow-hover:#124E2B; --flow-soft:#D4EEDF; --flow-ink:#124E2B;
  --lean:#219D58; --on-flow:#FFFFFF;
  --sh-2:0 2px 6px rgba(34,41,47,.12),0 14px 30px -16px rgba(34,41,47,.3);
}
:root[data-theme="dark"] [data-brand="sharedo"] .adl-scope,
:root[data-theme="dark"][data-brand="sharedo"] .adl-scope{
  --surface:#2C353D; --raise:#3D4852; --sunk:#3D4852; --edge:#3D4852; --rule:#3D4852; --rule-2:#55626D;
  --ink:#F5F6F7; --ink-2:#CBD3DA; --ink-3:#A9B4BD; --ink-4:#6B7883;
  --flow:#219D58; --flow-2:#63C28B; --flow-hover:#9CD8B5; --flow-soft:color-mix(in srgb,#63C28B 18%,#22292F); --flow-ink:#9CD8B5;
  --lean:#6EDD3A; --on-flow:#17232D; --sh-2:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-brand="sharedo"] .adl-scope{
    --surface:#2C353D; --raise:#3D4852; --sunk:#3D4852; --edge:#3D4852; --rule:#3D4852; --rule-2:#55626D;
    --ink:#F5F6F7; --ink-2:#CBD3DA; --ink-3:#A9B4BD; --ink-4:#6B7883;
    --flow:#219D58; --flow-2:#63C28B; --flow-hover:#9CD8B5; --flow-soft:color-mix(in srgb,#63C28B 18%,#22292F); --flow-ink:#9CD8B5;
    --lean:#6EDD3A; --on-flow:#17232D; --sh-2:none;
  }
}

/* CLIENT EXAMPLE — "Example Legal Pty Ltd": illustrative plaintiff-firm
   palette (deep plum ink, raspberry accent, pill buttons). Neutral name by
   policy — client identity never ships in shareable content; a real tenant
   carries the real firm in its own theme record. */
[data-brand="client"] .adl-scope{
  --as-font-display:Arial,'Helvetica Neue',sans-serif; --as-font-body:Arial,'Helvetica Neue',sans-serif;
  --btn-radius:999px;
  --surface:#FFFFFF; --raise:#FFFFFF; --sunk:#F6EDF1; --edge:#DCC9D2; --rule:#E8DAE1; --rule-2:#C2A6B2;
  --ink:#2E1220; --ink-2:#54313F; --ink-3:#6E4A58; --ink-4:#95707E;
  --flow:#461C2F; --flow-2:#7A2E4A; --flow-hover:#5C2740; --flow-soft:#F6E8EE; --flow-ink:#461C2F;
  --lean:#D91E4F; --on-flow:#FFFFFF;
  --sh-2:0 2px 6px rgba(70,28,47,.14),0 14px 30px -16px rgba(70,28,47,.32);
}
:root[data-theme="dark"] [data-brand="client"] .adl-scope,
:root[data-theme="dark"][data-brand="client"] .adl-scope{
  --surface:#3A1E2C; --raise:#48283A; --sunk:#48283A; --edge:#48283A; --rule:#48283A; --rule-2:#6B4054;
  --ink:#F7F2F4; --ink-2:#DCC8D1; --ink-3:#B291A0; --ink-4:#8A6B79;
  --flow:#E0648C; --flow-2:#E0648C; --flow-hover:#F08CAC; --flow-soft:color-mix(in srgb,#E0648C 18%,#2B0F1C); --flow-ink:#F0B8CA;
  --lean:#F0537B; --on-flow:#2B0F1C; --sh-2:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-brand="client"] .adl-scope{
    --surface:#3A1E2C; --raise:#48283A; --sunk:#48283A; --edge:#48283A; --rule:#48283A; --rule-2:#6B4054;
    --ink:#F7F2F4; --ink-2:#DCC8D1; --ink-3:#B291A0; --ink-4:#8A6B79;
    --flow:#E0648C; --flow-2:#E0648C; --flow-hover:#F08CAC; --flow-soft:color-mix(in srgb,#E0648C 18%,#2B0F1C); --flow-ink:#F0B8CA;
    --lean:#F0537B; --on-flow:#2B0F1C; --sh-2:none;
  }
}
/* Buttons inside a branded scope pick up the brand's radius + on-colour.
   Targets the demo button classes the example pages use. :root[data-brand]
   outranks page-local rules like .adl-f.v-action button.act (0,3,1), because
   pages load their <style> after this file. */
:root[data-brand] .adl-scope button.act,:root[data-brand] .adl-scope .btn.pri,:root[data-brand] .adl-scope .mbtn{border-radius:var(--btn-radius,6px)}
:root[data-brand="sharedo"] .adl-scope button.act,:root[data-brand="sharedo"] .adl-scope .btn.pri,:root[data-brand="sharedo"] .adl-scope .mbtn,
:root[data-brand="client"] .adl-scope button.act,:root[data-brand="client"] .adl-scope .btn.pri,:root[data-brand="client"] .adl-scope .mbtn{
  color:var(--on-flow,#fff)}

/* ═══ §3 SWITCHER — chrome for the brand bar (rendered by adl-brands.js) ═══ */
.brandbar{display:flex;gap:.6rem 1rem;align-items:center;flex-wrap:wrap;margin:1.6rem 0 0;
  padding:.65rem .9rem;background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--flow);border-radius:8px}
.brandbar .bb-label{font-family:var(--as-font-mono,Consolas,monospace);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:650}
.brandbar .bb-seg{display:flex;gap:.35rem;flex-wrap:wrap}
.brandbar .bb-seg button{font:inherit;font-size:.78rem;font-weight:650;padding:.32rem .8rem;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--edge);background:var(--surface);color:var(--ink-2)}
.brandbar .bb-seg button:hover{border-color:var(--flow-hover);color:var(--flow-hover)}
.brandbar .bb-seg button[aria-pressed="true"]{border-color:var(--flow);background:var(--flow-soft);color:var(--flow-ink)}
.brandbar details{margin-left:auto}
.brandbar summary{cursor:pointer;list-style:none;font-family:var(--as-font-mono,Consolas,monospace);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--flow-2);font-weight:650}
.brandbar summary::before{content:"{ } "}
.brandbar pre{margin:.5rem 0 0;padding:.6rem .8rem;background:var(--code-bg,var(--sunk));overflow-x:auto;
  font-family:var(--as-font-mono,Consolas,monospace);font-size:.68rem;line-height:1.55;color:var(--ink-2);border-radius:6px;max-width:min(88vw,40rem)}
.brandbar .bb-note{flex-basis:100%;font-size:.74rem;color:var(--ink-4);margin:0}

/* ═══ §4 SLIDE-REVEAL PEEK CARDS (Anti-Overwhelm & Quiet Explicit Glass) ════
   Provides quiet, context-aware secondary intelligence ONLY when explicitly requested.
   - Quiet Default (FDS-INT): Never auto-opens on hover. Stays collapsed at rest.
   - Explicit Open: Opens ONLY when user clicks the peek tab or presses Enter/Space (.open).
   - Glass Finish: Physical glass translucency (blur(16px) saturate(180%)). ═══ */
.adl-slide-reveal{position:fixed;right:0;top:125px;z-index:90;display:flex;align-items:flex-start;
  transform:translateX(calc(100% - 38px));
  transition:transform 150ms cubic-bezier(0.16,1,0.3,1);
  will-change:transform}
.adl-slide-reveal.open{
  transform:translateX(0)}
.adl-slide-reveal .peek-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;
  width:38px;padding:.85rem .35rem;background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--surface) 60%,var(--rule-2));border-right:0;
  border-radius:10px 0 0 10px;cursor:pointer;font-family:var(--as-font-mono,monospace);font-size:.66rem;
  color:var(--flow-ink);text-align:center;writing-mode:vertical-rl;transform:rotate(180deg);
  box-shadow:-4px 8px 18px rgba(0,0,0,.12);user-select:none;transition:background .15s ease}
.adl-slide-reveal .peek-tab:hover{background:var(--surface)}
.adl-slide-reveal .peek-tab:focus-visible{outline:2px solid var(--flow);outline-offset:-2px}
.adl-slide-reveal .peek-tab .peek-badge{font-size:.6rem;padding:2px 4px;border-radius:4px;background:var(--flow-soft);color:var(--flow-ink);font-weight:700}
.adl-slide-reveal .reveal-content{width:330px;padding:1rem 1.1rem;
  background:color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);
  border:1px solid color-mix(in srgb, var(--surface) 60%, var(--rule-2));border-right:0;
  border-radius:12px 0 0 12px;
  box-shadow:0 16px 36px -8px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2);
  color:var(--ink)}
.adl-slide-reveal .reveal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem;padding-bottom:.4rem;border-bottom:1px solid var(--rule)}
.adl-slide-reveal .reveal-header h4{margin:0;font-size:.85rem;font-weight:700;color:var(--flow-ink)}
.adl-slide-reveal .reveal-header .reveal-ctx-tag{font-size:.62rem;font-family:var(--as-font-mono,monospace);padding:2px 6px;border-radius:4px;background:var(--flow-soft);color:var(--flow-ink);font-weight:700}
.adl-slide-reveal .reveal-close{background:none;border:0;font-size:1.1rem;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 4px}
.adl-slide-reveal .reveal-close:hover{color:var(--ink)}
.adl-slide-reveal .reveal-body{display:flex;flex-direction:column;gap:.65rem;font-size:.78rem;transition:opacity 120ms ease, transform 120ms ease}
.adl-slide-reveal .reveal-body.fading{opacity:0;transform:translateY(3px)}
.adl-slide-reveal .ctx-item{display:flex;flex-direction:column;gap:.15rem;padding:.45rem .65rem;background:color-mix(in srgb,var(--sunk) 85%,transparent);border-radius:6px;border:1px solid var(--rule)}
.adl-slide-reveal .ctx-item .lbl{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.adl-slide-reveal .ctx-item .val{font-size:.76rem;color:var(--ink);font-weight:550}

/* ═══ §5 FOCUS SHARPENING (Anti-Overwhelm Context Sharpening — Whisper Profile) ═
   Gently de-emphasizes non-active peripheral workstream cards while focusing an active card.
   - Whisper Opacity: 0.85 (preserves visual gist & mental map without luminance flashes).
   - Desaturation: filter: saturate(65%) de-emphasizes color salience without peripheral eye capture.
   - Asymmetric Easing: Slow 400ms dim-in (change-blindness), fast 150ms restore (instant response). ═══ */
:root{--adl-peripheral-dim:0.85}
.focus-active .card:not(.focus-target){opacity:var(--adl-peripheral-dim, 0.85);filter:saturate(65%);transition:opacity 400ms cubic-bezier(0.16,1,0.3,1), filter 400ms cubic-bezier(0.16,1,0.3,1)}
.card.focus-target{opacity:1;filter:saturate(100%);box-shadow:var(--sh-2,0 8px 24px rgba(0,0,0,.18));transition:opacity 150ms ease, filter 150ms ease, box-shadow 150ms ease}
@media (prefers-reduced-motion:reduce){.adl-slide-reveal,.adl-slide-reveal .reveal-body,.focus-active .card:not(.focus-target),.card.focus-target{transition:none}}

/* ═══ §6 KEYBOARD COMMAND LAYER & COMMAND PALETTE (ADL-DEC-050) ══════════════
   Enables hands-on-keyboard flow with Ctrl+K command palette & spatial hotkeys. ═══ */
.adl-cmd-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:120;
  background:rgba(0,0,0,0.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;
  opacity:0;pointer-events:none;transition:opacity 120ms ease}
.adl-cmd-backdrop.open{opacity:1;pointer-events:auto}
.adl-cmd-dialog{width:min(90vw,540px);background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid color-mix(in srgb,var(--surface) 65%,var(--rule-2));
  border-radius:12px;box-shadow:0 24px 48px -12px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
  overflow:hidden;display:flex;flex-direction:column}
.adl-cmd-search{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-bottom:1px solid var(--rule)}
.adl-cmd-search input{flex:1;background:none;border:0;outline:0;font-family:var(--as-font-sans,sans-serif);
  font-size:.92rem;color:var(--ink)}
.adl-cmd-search .cmd-kbd{font-family:var(--as-font-mono,monospace);font-size:.65rem;padding:2px 6px;
  border-radius:4px;background:var(--sunk);border:1px solid var(--rule);color:var(--ink-3)}
.adl-cmd-list{max-height:340px;overflow-y:auto;padding:.4rem;display:flex;flex-direction:column;gap:2px}
.adl-cmd-group-lbl{font-size:.62rem;font-family:var(--as-font-mono,monospace);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:.4rem .6rem .2rem}
.adl-cmd-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;
  border-radius:6px;cursor:pointer;font-size:.82rem;color:var(--ink);transition:all 100ms ease}
.adl-cmd-item:hover,.adl-cmd-item.active{background:var(--flow-soft);color:var(--flow-ink);font-weight:600}
.adl-cmd-item .cmd-key-hint{font-family:var(--as-font-mono,monospace);font-size:.64rem;color:var(--ink-3)}

/* ── §7 RESUMPTION HINT TOAST (ADL-DEC-052) ── */
.adl-resumption-hint{position:absolute;top:12px;right:16px;z-index:120;display:inline-flex;align-items:center;
  gap:8px;padding:6px 14px;border-radius:20px;background:rgba(18,30,49,0.88);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.18);color:#f0f4fc;
  font-family:var(--as-font-sans,sans-serif);font-size:.78rem;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,0.3);
  opacity:0;transform:translateY(-6px);transition:opacity 400ms cubic-bezier(.2,0,0,1),transform 400ms cubic-bezier(.2,0,0,1);
  pointer-events:none}
.adl-resumption-hint.visible{opacity:1;transform:translateY(0)}
.adl-resumption-hint.fading{opacity:0;transform:translateY(-4px)}
.adl-resumption-hint .hint-dot{width:6px;height:6px;border-radius:50%;background:var(--flow,#00d2ff);box-shadow:0 0 8px var(--flow,#00d2ff)}

/* ── §8 AI RECOURSE & VISUAL DIFF INSPECTOR (ADL-DEC-053) ── */
.adl-diff-backdrop{position:fixed;inset:0;z-index:9500;background:rgba(8,14,24,0.65);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);display:none;align-items:center;justify-content:center;opacity:0;
  transition:opacity 200ms ease}
.adl-diff-backdrop.open{display:flex;opacity:1}
.adl-diff-dialog{width:90%;max-width:680px;background:rgba(18,30,49,0.94);border:1px solid rgba(255,255,255,0.18);
  border-radius:14px;box-shadow:0 24px 64px rgba(0,0,0,0.45);padding:1.4rem;color:var(--ink,#f0f4fc);
  font-family:var(--as-font-sans,sans-serif);display:flex;flex-direction:column;gap:1rem}
.adl-diff-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:.8rem}
.adl-diff-header h3{font-size:1.05rem;font-weight:600;margin:0;display:flex;align-items:center;gap:.5rem}
.adl-diff-body{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:rgba(0,0,0,0.25);padding:1rem;border-radius:8px;font-size:.82rem}
.adl-diff-col{display:flex;flex-direction:column;gap:.4rem}
.adl-diff-col-lbl{font-size:.65rem;font-family:var(--as-font-mono,monospace);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.adl-diff-add{background:rgba(0,210,160,0.18);color:#00f5b8;padding:2px 4px;border-radius:3px;font-weight:600}
.adl-diff-del{background:rgba(255,75,75,0.18);color:#ff7878;text-decoration:line-through;padding:2px 4px;border-radius:3px}
.adl-diff-actions{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;padding-top:.6rem;border-top:1px solid var(--rule)}
.adl-btn-revert{background:rgba(255,75,75,0.2);color:#ff8888;border:1px solid rgba(255,75,75,0.4);padding:6px 14px;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer;transition:all 150ms ease}
.adl-btn-revert:hover{background:rgba(255,75,75,0.35);color:#fff}
.adl-btn-keep{background:var(--flow-soft);color:var(--flow-ink);border:1px solid var(--flow);padding:6px 14px;border-radius:6px;font-size:.8rem;font-weight:600;cursor:pointer}

/* ── §9 QUANTUM SCHEDULE DEEP EDITOR & AI DOCUMENT EXTRACTION (ADL-DEC-054) ── */
.adl-schedule-wrapper{display:flex;flex-direction:column;gap:1rem;margin-top:1rem;padding:1rem;
  background:color-mix(in srgb,var(--sunk) 60%,transparent);border:1px solid var(--rule);border-radius:10px}
.adl-schedule-header{display:flex;align-items:center;justify-content:space-between}
.adl-schedule-title{font-size:.92rem;font-weight:700;display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.adl-schedule-table{width:100%;border-collapse:collapse;font-size:.8rem;margin-top:.4rem}
.adl-schedule-table th{text-align:left;padding:6px 10px;font-family:var(--as-font-mono,monospace);font-size:.65rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);border-bottom:1px solid var(--rule)}
.adl-schedule-table td{padding:8px 10px;border-bottom:1px solid color-mix(in srgb,var(--rule) 55%,transparent);color:var(--ink)}
.adl-schedule-table input{background:var(--sunk);border:1px solid var(--rule);border-radius:4px;
  color:var(--ink);padding:4px 8px;font-size:.8rem;font-family:var(--as-font-sans,sans-serif);width:100%}
.adl-schedule-table input:focus{border-color:var(--flow);outline:none;box-shadow:0 0 8px var(--flow-soft)}
.adl-ai-doc-hint{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  background:color-mix(in srgb,var(--flow) 8%,transparent);border:1px solid color-mix(in srgb,var(--flow) 25%,transparent);border-radius:8px;font-size:.8rem;color:var(--ink)}
.adl-ai-doc-hint .hint-badge{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--flow)}
.adl-btn-import{background:var(--flow-soft);color:var(--flow-ink);border:1px solid var(--flow);
  padding:5px 12px;border-radius:6px;font-size:.78rem;font-weight:600;cursor:pointer;transition:all 150ms ease}
.adl-btn-import:hover{background:var(--flow);color:#fff}
.adl-quantum-graph-card{padding:10px 14px;background:color-mix(in srgb,var(--sunk) 65%,transparent);border-radius:8px;margin-top:.4rem}
.adl-quantum-graph-lbl{font-size:.68rem;font-family:var(--as-font-mono,monospace);color:var(--ink-3);margin-bottom:6px}
.adl-horizon-btn{background:none;border:1px solid var(--rule);color:var(--ink-2);padding:4px 10px;
  border-radius:6px;font-size:.74rem;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.adl-horizon-btn:hover{border-color:var(--flow);color:var(--flow)}

/* ── §10 DATA PROVENANCE & COURT PDF PRE-FLIGHT GATES (ADL-DEC-055) ── */
.adl-citation-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:4px;
  background:var(--flow-soft);border:1px solid color-mix(in srgb,var(--flow) 40%,transparent);font-size:.68rem;
  font-family:var(--as-font-mono,monospace);color:var(--flow-ink);text-decoration:none;transition:all 150ms ease;
  cursor:pointer;text-align:left}
.adl-citation-tag:hover{background:var(--flow);color:var(--surface)}
.adl-review-badge{display:inline-flex;align-items:center;padding:2px 6px;border-radius:4px;font-size:.65rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.adl-review-badge.candidate{background:var(--warn-soft);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.adl-review-badge.verified{background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.adl-preflight-gate{padding:10px 14px;border-radius:8px;font-size:.8rem;color:var(--warn);
  background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
/* ── §11 CENTERED MODAL POPUP FOR SCHEDULE EDITOR (ADL-COG-06) ── */
.adl-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 24, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.adl-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.adl-modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.94);
  width: 92%;
  max-width: 980px;
  max-height: 88vh;
  background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--flow) 50%, transparent);
  border-radius: 14px;
  box-shadow: var(--sh-pop), 0 0 35px color-mix(in srgb, var(--flow) 22%, transparent);
  padding: 1.5rem;
  z-index: 9995;
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.adl-modal-container.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

#host-parent, #host-ws, .site {
  transition: filter 300ms ease;
}
body.adl-schedule-editor-open #host-parent,
body.adl-schedule-editor-open #host-ws,
body.adl-schedule-editor-open .site {
  filter: blur(5px) opacity(0.3);
  pointer-events: none;
}

/* Widescreen Horizon Mode (spec §16) — the card genuinely morphs to a near-fullscreen canvas;
   ESC returns it to the grid (an advertised mode that does nothing is a silent click) */
.canvas-horizon, .card.canvas-horizon {
  position: fixed;
  inset: 2vh 2vw;
  z-index: 9600;
  overflow: auto;
  background: var(--surface);
  box-shadow: var(--sh-pop);
  border-radius: 12px;
}

/* ── §12 MODAL CONTEXT RAILS (ADL-COG-06 · FDS-INT quiet default · ADL-FOCUS) ──
   While the schedule modal borrows focus, other matter contexts collapse into quiet edge
   tabs; a click reveals a glass panel WITHOUT leaving the schedule. Nothing opens uninvited. */
.adl-modal-ctx-rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:9996;
  display:none;flex-direction:column;gap:8px;padding:4px 0}
.adl-modal-ctx-rail.is-open{display:flex}
.adl-modal-ctx-tab{writing-mode:vertical-rl;text-orientation:mixed;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--rule);border-left:none;border-radius:0 8px 8px 0;color:var(--ink-2);
  padding:12px 6px;font-size:.72rem;font-weight:600;letter-spacing:.05em;cursor:pointer;
  font-family:var(--as-font-sans,sans-serif);transition:color 150ms ease,border-color 150ms ease,background 150ms ease}
.adl-modal-ctx-tab:hover{color:var(--flow);border-color:var(--flow)}
.adl-modal-ctx-tab[aria-expanded="true"]{background:var(--flow-soft);color:var(--flow-ink);border-color:var(--flow)}
.adl-modal-ctx-panel{position:fixed;left:0;top:50%;transform:translate(-105%,-50%);
  width:min(320px,80vw);max-height:70vh;overflow-y:auto;z-index:9997;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--rule-2);border-left:none;border-radius:0 12px 12px 0;box-shadow:var(--sh-pop);
  padding:1rem;display:flex;flex-direction:column;gap:.5rem;
  transition:transform 250ms cubic-bezier(.16,1,.3,1)}
.adl-modal-ctx-panel.open{transform:translate(0,-50%)}
.adl-modal-ctx-rail.right{left:auto;right:0}
.adl-modal-ctx-rail.right .adl-modal-ctx-tab{border:1px solid var(--rule);border-right:none;border-radius:8px 0 0 8px}
.adl-modal-ctx-rail.right .adl-modal-ctx-tab:hover{border-color:var(--flow);border-right:none}
.adl-modal-ctx-tab[data-anchored="true"]{background:var(--flow-soft);color:var(--flow-ink);border-color:var(--flow)}
.adl-modal-ctx-panel.from-right{left:auto;right:0;border:1px solid var(--rule-2);border-right:none;
  border-radius:12px 0 0 12px;transform:translate(105%,-50%)}
.adl-modal-ctx-panel.from-right.open{transform:translate(0,-50%)}
.adl-modal-ctx-panel .ctx-anchor{margin-left:6px;font-size:.75rem}
.adl-modal-ctx-panel .ctx-ai-chip{font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:4px;padding:1px 6px;margin-left:6px}
.adl-modal-ctx-panel .ctx-ai-note{font-size:.64rem;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:.4rem;margin-top:.2rem}
.adl-modal-ctx-panel .ctx-anchor-hint{font-size:.62rem;color:var(--ink-4);text-align:right}
.adl-modal-ctx-panel[data-ai-content="true"]{border-color:color-mix(in srgb,var(--warn) 40%,var(--rule-2))}
.adl-modal-ctx-panel .reveal-header{display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--rule);padding-bottom:.5rem;margin-bottom:.3rem}
.adl-modal-ctx-panel .reveal-header h4{margin:0;font-size:.85rem;color:var(--ink)}
.adl-modal-ctx-panel .reveal-close{background:none;border:0;color:var(--ink-3);font-size:1rem;cursor:pointer;padding:0 4px}
.adl-modal-ctx-panel .reveal-close:hover{color:var(--ink)}
.adl-modal-ctx-panel .ctx-item{display:flex;flex-direction:column;gap:.15rem;padding:.45rem .65rem;
  background:color-mix(in srgb,var(--sunk) 85%,transparent);border-radius:6px;border:1px solid var(--rule)}
.adl-modal-ctx-panel .ctx-item .lbl{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.adl-modal-ctx-panel .ctx-item .val{font-size:.76rem;color:var(--ink);font-weight:550}
@media (prefers-reduced-motion:reduce){.adl-modal-ctx-panel,.adl-modal-ctx-tab,.adl-modal-backdrop,.adl-modal-container{transition:none}}
@media (prefers-reduced-transparency:reduce){.adl-modal-ctx-panel,.adl-modal-ctx-tab{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface)}}

/* ── §13 VALUE-ANCHORED ENTRY & VALUE PEDIGREE TOOLTIPS (ADL-DEC-058) ──
   The value itself is the affordance: a quiet pencil revealed on hover/focus replaces the
   retired full-width glance bar (F1 — the bar spent a card row on attention it never earned).
   Every value can explain itself: a 350ms-intent tooltip carries what it is, where it derives
   from, and its last change (pedigree). Nothing opens uninvited. */
.adl-value-edit {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 1px 6px;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.f:hover .adl-value-edit,
.f:focus-within .adl-value-edit { opacity: 1; }
.adl-value-edit:hover,
.adl-value-edit:focus {
  border-color: var(--flow);
  box-shadow: 0 0 8px color-mix(in srgb, var(--flow) 30%, transparent);
}
.adl-value-tip {
  position: fixed;
  z-index: 9998;
  max-width: 340px;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--rule-2);
  box-shadow: var(--sh-pop);
  font-size: 0.74rem;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.adl-value-tip.show { opacity: 1; transform: translateY(0); }
.adl-value-tip .tip-lbl { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-3); margin-bottom: 2px; }
.adl-value-tip .tip-row { display: block; color: var(--ink-2); margin-top: 2px; }
.adl-value-tip .tip-pedigree { display: block; color: var(--warn); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .adl-value-edit, .adl-value-tip { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .adl-value-tip { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); } }



