/* ==========================================================================
   BRIEF GUARD — THE CHAMBER
   A cinematic workspace for Indian legal work. The lawyer steps through the
   landing's door into the same dark, atmospheric world — drifting aurora depth,
   film grain, an edge vignette — where the legal document is a LUMINOUS PAGE
   floating in the void, lit by brass. Motion is slow, intentional and buttery
   (GPU-only transform/opacity/filter, easing cubic-bezier(.16,1,.3,1)); the
   base state is always fully resolved, so no-JS and reduced-motion users get a
   finished, still-beautiful room.

   Dark is the hero. A full light theme exists for parity (a bright drafting
   room). Everything is scoped to `body.app-workspace`; app.html links ONLY this
   file, so verify.html / plugins.html (styles.css) are untouched.
   ========================================================================== */

/* ============================ TOKENS — LIGHT (a clean drafting room) ======= */
/* A near-neutral warm-white paper (greige, not saturated cream) so surfaces read
   as clean paper, not an "AI beige". Brass is the ONE bold accent; status stays
   green/red/amber. The aurora is dialled right down for light (see --atmos /
   --atmos-sat) so no muddy teal/green cast bleeds onto the page. */
body.app-workspace{
  --void:#eae8e2; --bg:#f3f2ee; --bg2:#f7f6f2;
  --surface:#fffefc; --surface-2:#f3f2ee; --surface-3:#eae8e2;
  --line:rgba(38,34,26,.12); --line2:rgba(38,34,26,.055); --hair:rgba(38,34,26,.2);
  --glass:color-mix(in srgb,var(--surface) 80%,transparent);
  /* Ink scale tuned for WCAG AA on the paper surfaces (clarity first). */
  --ink:#211d15; --body:#413c32; --muted:#69645a; --faint:#8b867b;
  --gold:#8a6716; --gold-soft:#a8842f; --gold-dim:#755713;
  --accent:#8a6716; --accent-ink:#5f480f; --accent-soft:#f1e9d6;
  --accent-glow:rgba(138,103,22,.22);
  --primary-bg:#221e17; --primary-fg:#faf6ec;
  --ok:#12794a; --ok-bg:#e6f4ed; --ok-line:#a7ddbf;
  --bad:#bd2c1c; --bad-bg:#fbece9; --bad-line:#f0c3ba;
  --warn:#976006; --warn-bg:#f7eed7; --warn-line:#eaca8e;
  --purp:#6941c6; --purp-bg:#f2eefe; --purp-line:#d8d1f8;
  --grey:#5c6472; --grey-bg:#edece7; --grey-line:#dddbd3;
  --info:#175cd3; --info-bg:#e9f2fe; --info-line:#b3d5fb;
  --amber:#c2650f;
  /* the paper */
  --page:#fffefb; --page-2:#f5f3ee; --page-ink:#211d15;
  --page-halo:rgba(138,103,22,.09);
  --scrim:rgba(34,28,16,.38);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Charter",Georgia,ui-serif,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --track:.22em;
  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px;
  --fs-lg:17px; --fs-xl:21px; --fs-2xl:27px;
  --r-xs:5px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(30,24,10,.06),0 1px 1px rgba(30,24,10,.04);
  --shadow:0 2px 8px -2px rgba(30,24,10,.08),0 18px 40px -22px rgba(30,24,10,.26);
  --shadow-lg:0 8px 20px -6px rgba(30,24,10,.12),0 40px 80px -32px rgba(30,24,10,.34);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent);
  --dur-1:.14s; --dur-2:.28s; --dur-3:.55s; --dur-4:.9s;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.42,.5,1);
  /* Light: a whisper of atmosphere, heavily desaturated so no coloured cast bleeds. */
  --atmos:.12; --atmos-sat:.35; --grain:.22; --vig:.1;
  color-scheme:light;
}

/* ============================ TOKENS — DARK (the hero) ===================== */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) body.app-workspace{ color-scheme:dark;
  --void:#06070a; --bg:#080a0e; --bg2:#0b0d12;
  --surface:#0e1117; --surface-2:#141922; --surface-3:#1b212c;
  --line:rgba(233,229,220,.09); --line2:rgba(233,229,220,.05); --hair:rgba(233,229,220,.17);
  --glass:color-mix(in srgb,#0d1016 72%,transparent);
  --ink:#efe9dd; --body:#c4c8d0; --muted:#8a909c; --faint:#59606d;
  --gold:#c9a86a; --gold-soft:#b7955a; --gold-dim:#9a844f;
  --accent:#c9a86a; --accent-ink:#e7d5aa; --accent-soft:rgba(201,168,106,.13);
  --accent-glow:rgba(201,168,106,.42);
  --primary-bg:#efe9dd; --primary-fg:#14110b;
  --ok:#83d9aa; --ok-bg:rgba(59,169,122,.15); --ok-line:rgba(59,169,122,.5);
  --bad:#f08479; --bad-bg:rgba(219,86,75,.17); --bad-line:rgba(219,86,75,.5);
  --warn:#eec172; --warn-bg:rgba(201,154,62,.16); --warn-line:rgba(201,154,62,.5);
  --purp:#ab90f2; --purp-bg:rgba(120,90,200,.2); --purp-line:rgba(120,90,200,.42);
  --grey:#9aa4b3; --grey-bg:rgba(233,229,220,.06); --grey-line:rgba(233,229,220,.13);
  --info:#7fb0ee; --info-bg:rgba(90,140,220,.16); --info-line:rgba(90,140,220,.42);
  --amber:#e0651a;
  --page:#12151c; --page-2:#161a22; --page-ink:#efe9dd;
  --page-halo:rgba(201,168,106,.24);
  --scrim:rgba(3,4,6,.62);
  --shadow-sm:0 1px 2px rgba(0,0,0,.55);
  --shadow:0 2px 10px rgba(0,0,0,.5),0 20px 46px -22px rgba(0,0,0,.8);
  --shadow-lg:0 8px 24px rgba(0,0,0,.58),0 50px 100px -34px rgba(0,0,0,.9);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 32%,transparent);
  --atmos:1; --atmos-sat:1; --grain:.6; --vig:1;
}}
:root[data-theme="dark"] body.app-workspace{ color-scheme:dark;
  --void:#06070a; --bg:#080a0e; --bg2:#0b0d12;
  --surface:#0e1117; --surface-2:#141922; --surface-3:#1b212c;
  --line:rgba(233,229,220,.09); --line2:rgba(233,229,220,.05); --hair:rgba(233,229,220,.17);
  --glass:color-mix(in srgb,#0d1016 72%,transparent);
  --ink:#efe9dd; --body:#c4c8d0; --muted:#8a909c; --faint:#59606d;
  --gold:#c9a86a; --gold-soft:#b7955a; --gold-dim:#9a844f;
  --accent:#c9a86a; --accent-ink:#e7d5aa; --accent-soft:rgba(201,168,106,.13);
  --accent-glow:rgba(201,168,106,.42);
  --primary-bg:#efe9dd; --primary-fg:#14110b;
  --ok:#83d9aa; --ok-bg:rgba(59,169,122,.15); --ok-line:rgba(59,169,122,.5);
  --bad:#f08479; --bad-bg:rgba(219,86,75,.17); --bad-line:rgba(219,86,75,.5);
  --warn:#eec172; --warn-bg:rgba(201,154,62,.16); --warn-line:rgba(201,154,62,.5);
  --purp:#ab90f2; --purp-bg:rgba(120,90,200,.2); --purp-line:rgba(120,90,200,.42);
  --grey:#9aa4b3; --grey-bg:rgba(233,229,220,.06); --grey-line:rgba(233,229,220,.13);
  --info:#7fb0ee; --info-bg:rgba(90,140,220,.16); --info-line:rgba(90,140,220,.42);
  --amber:#e0651a;
  --page:#12151c; --page-2:#161a22; --page-ink:#efe9dd;
  --page-halo:rgba(201,168,106,.24);
  --scrim:rgba(3,4,6,.62);
  --shadow-sm:0 1px 2px rgba(0,0,0,.55);
  --shadow:0 2px 10px rgba(0,0,0,.5),0 20px 46px -22px rgba(0,0,0,.8);
  --shadow-lg:0 8px 24px rgba(0,0,0,.58),0 50px 100px -34px rgba(0,0,0,.9);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 32%,transparent);
  --atmos:1; --atmos-sat:1; --grain:.6; --vig:1;
}

/* ============================ RESET + BASE ================================= */
*{box-sizing:border-box}
[hidden]{display:none!important}
body.app-workspace{
  margin:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  background:var(--void);
  color:var(--body);font-family:var(--sans);font-size:var(--fs-base);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1;
}
body.app-workspace h1,body.app-workspace h2,body.app-workspace h3,body.app-workspace h4{
  margin:0;font-family:var(--serif);color:var(--ink);font-weight:500}
body.app-workspace p{margin:0}
body.app-workspace button{font-family:inherit}
body.app-workspace a{color:inherit;text-decoration:none}
body.app-workspace ::selection{background:color-mix(in srgb,var(--gold) 30%,transparent);color:var(--ink)}
body.app-workspace ::-webkit-scrollbar{width:11px;height:11px}
body.app-workspace ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 26%,transparent);border-radius:20px;border:3px solid transparent;background-clip:padding-box}
body.app-workspace ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 44%,transparent);background-clip:padding-box}

/* ============================ ATMOSPHERE (the world) ====================== */
/* Drifting aurora depth, exactly the landing's language, tuned per theme. */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--atmos);
  filter:saturate(var(--atmos-sat,1));
  transition:opacity var(--dur-4) var(--ease),filter var(--dur-4) var(--ease)}
.aurora{position:absolute;border-radius:50%;filter:blur(125px);opacity:.72;will-change:transform}
.aurora-1{width:60vw;height:60vw;left:-16vw;top:-22vw;
  background:radial-gradient(circle at 40% 40%,rgba(28,78,122,.66),transparent 64%);
  animation:drift1 46s var(--ease) infinite alternate}
.aurora-2{width:52vw;height:52vw;right:-14vw;top:8vh;
  background:radial-gradient(circle at 50% 50%,rgba(201,168,106,.3),transparent 62%);
  animation:drift2 58s var(--ease) infinite alternate}
.aurora-3{width:48vw;height:48vw;left:14vw;bottom:-26vw;
  background:radial-gradient(circle at 50% 50%,rgba(44,60,96,.62),transparent 64%);
  animation:drift3 66s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(7vw,5vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-6vw,-5vh,0) scale(1.14)}}
@keyframes drift3{to{transform:translate3d(6vw,-5vh,0) scale(1.1)}}

/* Film grain — self-contained SVG noise, blended over the field. */
.wk-grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  animation:wkGrain 5s steps(6) infinite}
@keyframes wkGrain{0%{background-position:0 0}20%{background-position:-7px 5px}40%{background-position:6px -7px}
  60%{background-position:-5px -4px}80%{background-position:7px 5px}100%{background-position:0 0}}

/* Edge vignette — pulls focus to the chamber's centre (dark theme, mostly). */
body.app-workspace::after{content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:var(--vig);
  transition:opacity var(--dur-4) var(--ease);
  background:
    radial-gradient(130% 100% at 50% -8%,transparent 46%,rgba(2,3,5,.5) 100%),
    linear-gradient(180deg,rgba(2,3,5,.34),transparent 16%,transparent 82%,rgba(2,3,5,.5))}

/* ============================ TOP CHROME (the lintel) ===================== */
.topbar{position:relative;z-index:30;flex:none;display:grid;
  grid-template-columns:minmax(0,auto) minmax(200px,1fr) minmax(0,auto);align-items:center;gap:clamp(10px,1.6vw,20px);
  padding:0 clamp(14px,2vw,26px);height:60px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--void) 82%,transparent),color-mix(in srgb,var(--void) 30%,transparent));
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line)}
.tb-left{display:flex;align-items:center;gap:15px;min-width:0}
.tb-right{display:flex;align-items:center;gap:8px;justify-self:end;min-width:0}
.brand{display:inline-flex;align-items:center;gap:11px;background:none;border:0;cursor:pointer;padding:4px 2px}
.brand-mark{position:relative;overflow:hidden;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;
  font-family:var(--serif);font-size:19px;color:var(--gold);
  background:linear-gradient(160deg,var(--surface-3),var(--surface));
  border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 18px -12px var(--accent-glow);
  transition:transform var(--dur-2) var(--ease-spring),box-shadow var(--dur-2) var(--ease)}
.brand-mark.sm{width:24px;height:24px;font-size:15px;border-radius:7px}
.brand-mark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,color-mix(in srgb,var(--gold) 65%,transparent) 50%,transparent 66%);
  transform:translateX(-160%)}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -10px var(--accent-glow)}
.brand:hover .brand-mark::after{animation:sheen 1s var(--ease)}
@keyframes sheen{to{transform:translateX(160%)}}
.brand-word{font-family:var(--serif);font-size:17px;color:var(--ink);letter-spacing:.01em;white-space:nowrap;transition:letter-spacing var(--dur-2) var(--ease)}
.brand:hover .brand-word{letter-spacing:.03em}
.crumbs{display:flex;align-items:center;gap:9px;font-size:var(--fs-sm);color:var(--muted);min-width:0;overflow:hidden;white-space:nowrap}
.crumbs .sep{color:var(--faint)}
.crumbs .cur{color:var(--ink);font-weight:600}
.crumbs .cr-link{cursor:pointer;transition:color var(--dur-1)}
.crumbs .cr-link:hover{color:var(--gold)}

/* The omnibar — a glowing command well, the soul of the app. */
.omnibar{position:relative;display:flex;align-items:center;gap:11px;width:100%;max-width:540px;justify-self:center;height:40px;padding:0 8px 0 15px;
  background:color-mix(in srgb,var(--surface-2) 55%,transparent);
  border:1px solid var(--line);border-radius:var(--r-pill);cursor:text;color:var(--muted);overflow:hidden;
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2) var(--ease)}
.omnibar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(120% 180% at 50% 140%,var(--accent-glow),transparent 60%);transition:opacity var(--dur-3) var(--ease)}
.omnibar:hover{border-color:color-mix(in srgb,var(--gold) 46%,var(--line));background:color-mix(in srgb,var(--surface-2) 80%,transparent);
  box-shadow:0 12px 34px -20px var(--accent-glow),0 0 0 1px color-mix(in srgb,var(--gold) 12%,transparent)}
.omnibar:hover::before{opacity:1}
.ob-ico{position:relative;color:var(--gold);font-size:13px;flex:none;animation:obPulse 3.4s var(--ease) infinite}
@keyframes obPulse{0%,100%{opacity:.72}50%{opacity:1;transform:scale(1.09)}}
.ob-text{position:relative;flex:1;text-align:left;font-size:var(--fs-sm);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ob-lead{color:var(--faint)}
.ob-cycle{color:var(--body);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.ob-cycle.swap{opacity:0;transform:translateY(-5px)}
.ob-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-2px;border-radius:2px;background:var(--gold);animation:obBlink 1.1s steps(1) infinite}
@keyframes obBlink{50%{opacity:0}}
.ob-key{position:relative;flex:none;font-size:11px;font-weight:600;color:var(--faint);letter-spacing:.02em;
  padding:3px 8px;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--surface) 55%,transparent)}

.appbar-status{display:flex;align-items:center;gap:7px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.02em;
  color:var(--muted);background:color-mix(in srgb,var(--surface-2) 55%,transparent);
  border:1px solid var(--line);padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.badge.live::before,.badge.ai::before{background:var(--ok);box-shadow:0 0 8px color-mix(in srgb,var(--ok) 75%,transparent)}
.badge.demo::before,.badge.regex::before{background:var(--warn);box-shadow:0 0 8px color-mix(in srgb,var(--warn) 75%,transparent)}
.link{font-size:var(--fs-sm);color:var(--faint);transition:color var(--dur-1);white-space:nowrap}
.link:hover{color:var(--gold)}
.icon-btn{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 45%,transparent);
  color:var(--body);font-size:16px;cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-2) var(--ease-spring)}
.icon-btn:hover{color:var(--ink);border-color:var(--hair);background:var(--surface-2);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
#tourBtn:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 42%,var(--line))}

/* ============================ BUTTONS ===================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--sans);
  font-size:var(--fs-md);font-weight:600;letter-spacing:.01em;padding:10px 18px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 70%,transparent);color:var(--body);cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-1) var(--ease),background var(--dur-2),border-color var(--dur-2),color var(--dur-2),box-shadow var(--dur-2)}
.btn span{display:inline-block;transition:transform var(--dur-2) var(--ease)}
.btn:hover span{transform:translateX(3px)}
.btn:hover{color:var(--ink);border-color:var(--hair)}
.btn:active{transform:scale(.98)}
.btn-sm{padding:7px 13px;font-size:var(--fs-sm)}
.btn-lg{padding:13px 24px;font-size:var(--fs-base)}
.btn-block{width:100%}
.btn-ghost{background:transparent;border-color:transparent}
.btn-ghost:hover{background:color-mix(in srgb,var(--surface-2) 70%,transparent);border-color:var(--line)}
.btn-quiet{background:transparent;border-color:var(--hair);color:var(--body)}
.btn-quiet:hover{color:var(--ink);border-color:color-mix(in srgb,var(--gold) 46%,var(--hair));background:color-mix(in srgb,var(--gold) 6%,transparent)}
.btn-primary{background:var(--primary-bg);color:var(--primary-fg);border-color:transparent;font-weight:650;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 36px -20px color-mix(in srgb,var(--primary-bg) 80%,transparent)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 20px 44px -20px color-mix(in srgb,var(--primary-bg) 85%,transparent);color:var(--primary-fg)}
.btn-primary:active{transform:translateY(0) scale(.98)}
/* the ONE gold hero action */
.btn-verify{position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:650;cursor:pointer;border:1px solid transparent;
  background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 94%,#fff),var(--gold));color:#1a1204;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 12px 30px -14px var(--accent-glow);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2),filter var(--dur-2)}
.btn-verify svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-verify:hover{transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,0 18px 40px -14px var(--accent-glow)}
.btn-verify:active{transform:scale(.98)}
.btn-tour{background:transparent;border-color:var(--hair);color:var(--body)}
.btn-tour:hover{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 46%,var(--hair));background:color-mix(in srgb,var(--gold) 6%,transparent)}
.btn-tour .bt-play{font-size:.7em;color:var(--gold);transition:transform var(--dur-2) var(--ease)}
.btn-tour:hover .bt-play{transform:scale(1.25)}

/* ============================ THE STUDIO shell ============================ */
.studio{position:relative;z-index:5;flex:1;min-height:0;display:flex;overflow:hidden}

/* ---- THE SPINE — navigation that also expresses the workflow as a lit
   journey. Every effect is GPU-only (transform/opacity/filter); the resolved
   state is a complete, legible rail with no JS and under reduced motion. ---- */
.rail{position:relative;flex:none;width:92px;display:flex;flex-direction:column;align-items:stretch;gap:2px;
  padding:14px 12px 10px;border-right:1px solid var(--line);overflow:visible;z-index:77;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 42%,transparent),transparent 62%);
  transition:width var(--dur-3) var(--ease),background var(--dur-3) var(--ease)}
.rail.pinned{width:272px;overflow-y:auto;overflow-x:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 64%,transparent),color-mix(in srgb,var(--surface) 30%,transparent))}
/* the sliding "you are here" light on the spine's edge */
.rail-ind{position:absolute;left:0;top:0;width:3px;height:34px;border-radius:0 3px 3px 0;background:var(--gold);opacity:0;z-index:3;
  transform:translateY(60px);transform-origin:center;pointer-events:none;
  box-shadow:0 0 16px 1px var(--accent-glow),0 0 5px var(--gold);
  transition:transform var(--dur-3) var(--ease-spring),opacity var(--dur-2) var(--ease)}
.rail-ind.on{opacity:1}
.rail-sep{height:1px;background:var(--line);margin:8px 14px;transition:opacity var(--dur-3) var(--ease)}

/* the workflow group — a lit path threading Draft → Research → Verify → Collab */
.rail-flow{position:relative;display:flex;flex-direction:column;gap:2px;padding:6px 0}
.rail-flow-line{position:absolute;left:50%;top:28px;bottom:28px;width:2px;transform:translateX(-50%);pointer-events:none;
  border-radius:2px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 26%,transparent),color-mix(in srgb,var(--gold) 10%,transparent));
  opacity:.75;transition:opacity var(--dur-3) var(--ease)}
.rail-flow-fill{position:absolute;inset:0;transform-origin:top center;transform:scaleY(0);border-radius:2px;
  background:linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--gold) 55%,transparent));
  box-shadow:0 0 10px var(--accent-glow);transition:transform var(--dur-4) var(--ease-spring)}
.rail.pinned .rail-flow-line{opacity:0}
.rail-support{display:flex;flex-direction:column;gap:2px}

/* stations */
.rail-btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px 6px;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  transition:color var(--dur-1),transform var(--dur-1) var(--ease-spring);
  animation:stationIn .6s var(--ease) both}
@keyframes stationIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.rb-home{animation-delay:.05s}
.rail-flow .rb-flow:nth-of-type(1){animation-delay:.12s}
.rail-flow .rb-flow:nth-of-type(2){animation-delay:.18s}
.rail-flow .rb-flow:nth-of-type(3){animation-delay:.24s}
.rail-flow .rb-flow:nth-of-type(4){animation-delay:.30s}
.rail-support .rb-sub:nth-of-type(1){animation-delay:.34s}
.rail-support .rb-sub:nth-of-type(2){animation-delay:.38s}
.rail-support .rb-sub:nth-of-type(3){animation-delay:.42s}

.rb-ico{position:relative;display:grid;place-items:center;width:44px;height:40px;flex:none;border-radius:14px;
  background:color-mix(in srgb,var(--surface-2) 42%,transparent);border:1px solid var(--line);
  transition:transform var(--dur-2) var(--ease-spring),background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.rb-ico::after{content:"";position:absolute;inset:-5px;border-radius:18px;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,var(--accent-glow),transparent 68%);transition:opacity var(--dur-2) var(--ease)}
.rb-ico svg{position:relative;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke-width var(--dur-2) var(--ease)}
.rb-sub .rb-ico{width:38px;height:34px;border-radius:11px}
.rb-sub .rb-ico svg{width:19px;height:19px}
.rb-mini{font-size:10px;font-weight:600;letter-spacing:.01em;transition:color var(--dur-1)}
.rb-sub .rb-mini{font-size:9.5px;color:var(--faint)}
/* live issue count on the Verify station — the pipeline reflects the document's state */
.rb-count{position:absolute;top:0;right:8px;z-index:3;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-family:var(--sans);font-size:9px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);box-shadow:var(--shadow-sm);
  animation:railCountPop .4s var(--ease-spring) both}
.rb-count.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
@keyframes railCountPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
.rail.pinned .rb-count{right:12px}
/* step number on workflow stations */
.rb-step{position:absolute;top:1px;right:13px;z-index:2;width:15px;height:15px;border-radius:50%;display:none;place-items:center;
  font-size:8.5px;font-weight:700;color:var(--faint);background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line);
  transition:color var(--dur-2),border-color var(--dur-2),background var(--dur-2),transform var(--dur-2) var(--ease-spring)}
.rail-btn:hover{color:var(--ink)}
.rail-btn:hover .rb-ico{transform:translateY(-2px) scale(1.09);border-color:color-mix(in srgb,var(--gold) 34%,var(--line));
  background:color-mix(in srgb,var(--gold) 9%,transparent);box-shadow:0 10px 22px -14px var(--accent-glow)}
.rail-btn:hover .rb-ico::after{opacity:.55}
.rail-btn:hover .rb-ico svg{stroke-width:1.95}
.rail-btn:active{transform:scale(.92)}
.rail-btn.on{color:var(--gold)}
.rail-btn.on .rb-ico{background:var(--accent-soft);border-color:color-mix(in srgb,var(--gold) 46%,transparent);transform:scale(1.06);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent),0 12px 26px -12px var(--accent-glow),inset 0 0 16px -8px var(--accent-glow)}
.rail-btn.on .rb-ico::after{opacity:1;animation:railPulse 2.6s var(--ease) infinite}
@keyframes railPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.1)}}
.rail-btn.on .rb-step{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:var(--accent-soft);transform:scale(1.12)}
/* the "draw" — active/hover workflow icons ink themselves in */
.rb-flow .rb-ico svg :is(path,circle,rect,line){stroke-dasharray:130}
.rb-flow:hover .rb-ico svg :is(path,circle,rect,line),
.rb-flow.on .rb-ico svg :is(path,circle,rect,line){animation:railDraw .85s var(--ease) both}
@keyframes railDraw{from{stroke-dashoffset:130}to{stroke-dashoffset:0}}

/* the flyout — a rich "what this does" card beside a collapsed station */
.rb-fly{position:absolute;left:calc(100% + 12px);top:50%;z-index:40;width:238px;
  display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px 14px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--hair);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(-50%) translateX(-8px) scale(.96);transform-origin:left center;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-spring)}
.rb-fly::before{content:"";position:absolute;left:-5px;top:50%;width:9px;height:9px;transform:translateY(-50%) rotate(45deg);
  background:inherit;border-left:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rb-title{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:var(--fs-md);font-weight:600;color:var(--ink)}
.rb-badge{font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--gold) 20%,transparent);padding:2px 7px;border-radius:var(--r-pill)}
.rb-desc{font-size:var(--fs-xs);color:var(--muted);line-height:1.5}
.rail:not(.pinned) .rail-btn:hover .rb-fly,
.rail:not(.pinned) .rail-btn:focus-visible .rb-fly{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
/* pinned = expanded labelled mode */
.rail.pinned .rail-flow{padding:2px 0}
.rail.pinned .rail-btn{flex-direction:row;align-items:center;gap:13px;padding:8px 12px 8px 8px;border-radius:var(--r-md);
  transition:background var(--dur-1) var(--ease),color var(--dur-1)}
.rail.pinned .rail-btn:hover{background:color-mix(in srgb,var(--gold) 8%,transparent)}
.rail.pinned .rail-btn.on{background:var(--accent-soft)}
.rail.pinned .rail-btn:hover .rb-ico{transform:none}
.rail.pinned .rb-mini,.rail.pinned .rb-step{display:none}
.rail.pinned .rb-fly{position:static;opacity:1;transform:none;pointer-events:auto;width:auto;flex:1;min-width:0;
  padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.rail.pinned .rb-fly::before{display:none}
.rail.pinned .rb-desc{white-space:normal;overflow:hidden;text-overflow:ellipsis}
.rail-foot{margin-top:auto;padding-top:10px;display:flex;justify-content:center}
.rail.pinned .rail-foot{justify-content:flex-end;padding-right:6px}
.rail-pin{display:grid;place-items:center;width:35px;height:35px;border-radius:var(--r-sm);border:1px solid transparent;
  background:transparent;color:var(--faint);cursor:pointer;transition:background var(--dur-1),color var(--dur-1),transform var(--dur-2) var(--ease-spring)}
.rail-pin svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rail-pin:hover{color:var(--ink);background:var(--surface-2)}
.rail-pin[aria-pressed="true"]{color:var(--gold);transform:rotate(45deg)}

/* ---- stage: home OR canvas ---- */
.stage{position:relative;flex:1;min-width:0;overflow:hidden}
.home,.editor-view{position:absolute;inset:0}

/* ============================ HOME — THE LAUNCHPAD =======================
   A cinematic entry in the landing's spirit: a grand hero beside a living
   "proof" card, the workflow as a lit path, then matters as luminous dossiers.
   Reveals are transform/opacity only — never a layout reflow. */
.home{overflow:auto;padding:clamp(30px,5vw,68px) clamp(20px,4vw,60px) 96px}
.stage-swap{animation:swapIn var(--dur-3) var(--ease) both}
@keyframes swapIn{from{opacity:0;transform:translateY(14px) scale(.994)}to{opacity:1;transform:none}}
/* a soft brass bloom behind the hero */
.home-glow{position:absolute;left:50%;top:-4%;width:min(1120px,116%);height:520px;transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(58% 60% at 50% 0%,var(--page-halo),transparent 72%);opacity:.75;filter:blur(24px)}
.home-hero,.home-flow,.home-body{position:relative;z-index:1}
.home-hero{position:relative;max-width:1160px;margin:0 auto clamp(28px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(26px,4.5vw,60px);align-items:center}
.hh-copy{min-width:0}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:var(--track);text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.kicker::before{content:"§";font-family:var(--serif);font-size:15px;letter-spacing:0;opacity:.85}
.home-title{font-size:clamp(2.05rem,4.9vw,3.5rem);line-height:1.04;letter-spacing:-.028em;color:var(--ink);margin-bottom:22px}
.home-title em{font-style:italic;color:var(--gold);font-weight:400}
.home-lede{font-size:clamp(1rem,1.35vw,1.15rem);color:var(--body);line-height:1.64;max-width:56ch}
.home-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.home-plug{margin-top:20px;font-size:var(--fs-sm);color:var(--muted)}
.home-plug a{color:var(--gold);font-weight:600}
.home-plug a:hover{text-decoration:underline;text-underline-offset:2px}

/* the living proof card — a citation caught before filing (decorative, echoes the landing) */
.hh-proof{position:relative;display:flex;flex-direction:column;gap:14px;animation:proofIn 1s var(--ease) .22s both}
@keyframes proofIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.hp-doc{position:relative;overflow:hidden;padding:20px 20px 18px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface) 62%,transparent));
  border:1px solid var(--hair);box-shadow:var(--shadow-lg)}
.hp-docbar{display:flex;gap:6px;margin-bottom:15px}
.hp-docbar i{width:34px;height:6px;border-radius:3px;background:var(--line)}
.hp-docbar i:first-child{width:66px;background:color-mix(in srgb,var(--gold) 40%,var(--line))}
.hp-line{font-family:var(--serif);font-size:14px;line-height:1.95;color:var(--body);margin:0}
.hp-line + .hp-line{margin-top:8px}
.hp-cite{position:relative;white-space:nowrap;font-family:var(--mono);font-size:11.5px;letter-spacing:-.02em;padding-bottom:2px}
.hp-cite::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;transform:scaleX(0);transform-origin:left}
.hp-cite.ok{color:var(--ok)}
.hp-cite.ok::after{background:var(--ok);box-shadow:0 0 10px color-mix(in srgb,var(--ok) 55%,transparent);animation:hpDraw 5.5s var(--ease) 1s infinite}
.hp-cite.bad{color:var(--bad)}
.hp-cite.bad::after{background:var(--bad);box-shadow:0 0 10px color-mix(in srgb,var(--bad) 55%,transparent);animation:hpDraw 5.5s var(--ease) 2.4s infinite}
@keyframes hpDraw{0%{transform:scaleX(0)}12%{transform:scaleX(1)}76%{transform:scaleX(1)}88%,100%{transform:scaleX(0)}}
.hp-tick{display:inline-block;margin-left:5px;color:var(--ok);opacity:0;transform:scale(.5);animation:hpPop 5.5s var(--ease) 1.5s infinite}
.hp-flag{display:inline-block;margin-left:5px;color:var(--bad);opacity:0;transform:scale(.5);animation:hpPop 5.5s var(--ease) 2.9s infinite}
@keyframes hpPop{0%,8%{opacity:0;transform:scale(.5)}20%{opacity:1;transform:scale(1)}76%{opacity:1}88%,100%{opacity:0;transform:scale(.5)}}
.hp-scan{position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold) 22%,transparent) 78%,transparent);
  border-bottom:1.5px solid color-mix(in srgb,var(--gold) 70%,transparent);opacity:0;
  animation:hpScan 5.5s var(--ease) .4s infinite}
@keyframes hpScan{0%{opacity:0;transform:translateY(-64px)}6%{opacity:1}22%{opacity:1}30%,100%{opacity:0;transform:translateY(220px)}}
.hp-verdict{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 66%,transparent);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.hp-ring{position:relative;width:40px;height:40px;flex:none;border-radius:50%;
  background:conic-gradient(var(--warn) 0 72%,var(--line) 72%);
  -webkit-mask:radial-gradient(circle 13px at 50% 50%,transparent 98%,#000);mask:radial-gradient(circle 13px at 50% 50%,transparent 98%,#000)}
.hp-vtext{display:flex;flex-direction:column;line-height:1.3}
.hp-vtext b{font-family:var(--serif);font-size:var(--fs-md);color:var(--ink);font-weight:600}
.hp-vtext span{font-size:var(--fs-xs);color:var(--muted)}
/* live hero ticker (matters present): recolour the ring per matter + fade each change in */
.hp-ring.bad{background:conic-gradient(var(--bad) 0 84%,var(--line) 84%)}
.hp-ring.clear{background:conic-gradient(var(--ok) 0 100%,var(--line) 100%)}
.hp-ring.idle{background:conic-gradient(var(--muted) 0 28%,var(--line) 28%)}
.hp-sub{font-size:11px!important;line-height:1.35!important;color:var(--muted)!important;font-family:var(--sans)!important}
.hh-proof.tick-in .hp-doc,.hh-proof.tick-in .hp-verdict{animation:tickIn .5s var(--ease) both}
@keyframes tickIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* story-style progress bars (one per matter): active fills over time, then advances */
.hp-bars{display:flex;gap:5px;margin-bottom:3px}
.hp-bar{flex:1;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;overflow:hidden;
  background:color-mix(in srgb,var(--muted) 24%,transparent);transition:background var(--dur-2)}
.hp-bar:hover{background:color-mix(in srgb,var(--muted) 42%,transparent)}
.hp-bar > i{display:block;height:100%;width:100%;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left}
.hp-bar.done > i{transform:scaleX(1)}
.hp-bar.active > i{animation:hpBar 4.2s linear forwards}
@keyframes hpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hh-proof.live{cursor:pointer}
.hp-open{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hp-go{flex:none;font-family:var(--sans);font-size:11px;color:var(--faint);opacity:0;transition:opacity var(--dur-2)}
.hh-proof.live:hover .hp-go{opacity:1}

.home-body{max-width:1160px;margin:0 auto}
.home-sec{display:flex;align-items:center;gap:15px;margin:0 0 20px;font-family:var(--sans);font-size:var(--fs-2xs);
  font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--faint)}
.home-sec::after{content:"";flex:1;height:1px;background:var(--line)}
/* the matters-feed header — a clear masthead for the "notification bar of matters" */
.feed-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line);animation:heroRise .7s var(--ease) both}
.fh-title{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.fh-sub{margin-top:7px;font-size:var(--fs-md);color:var(--muted)}
.fh-sub .fh-dot{color:var(--faint);margin:0 5px}
.fh-issues{color:var(--bad);font-weight:650}
.fh-clear{color:var(--ok);font-weight:650}
.fh-actions{display:flex;gap:9px;flex-wrap:wrap}

/* matters as a scannable feed: title + client, status, progress, real issues */
.matter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.matter-wrap{position:relative}
.matter-card{position:relative;width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface) 66%,transparent));
  padding:22px 22px 16px;cursor:pointer;font:inherit;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-2)}
.matter-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 0% 0%,var(--accent-soft),transparent 56%);transition:opacity var(--dur-3) var(--ease)}
.matter-card::after{content:"§";position:absolute;right:-6px;bottom:-20px;font-family:var(--serif);font-size:92px;line-height:1;
  color:color-mix(in srgb,var(--gold) 7%,transparent);pointer-events:none;transition:transform var(--dur-3) var(--ease),color var(--dur-3) var(--ease)}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.matter-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--gold) 34%,var(--hair))}
.matter-card:hover::before{opacity:1}
.matter-card:hover::after{transform:translateY(-4px) rotate(-4deg);color:color-mix(in srgb,var(--gold) 13%,transparent)}
.matter-card[data-status="closed"]{opacity:.72}
.matter-card[data-status="closed"]:hover{opacity:1}
.mc-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:13px}
.mc-glyph{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;font-family:var(--serif);
  font-size:17px;color:var(--gold);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);
  box-shadow:inset 0 0 12px -6px var(--accent-glow);transition:transform var(--dur-2) var(--ease-spring)}
.matter-card:hover .mc-glyph{transform:rotate(-6deg) scale(1.08)}
.mc-badges{display:flex;align-items:center;gap:6px}
.mc-title{position:relative;font-family:var(--serif);font-size:var(--fs-xl);font-weight:600;color:var(--ink);line-height:1.18;margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mc-meta{position:relative;font-size:var(--fs-sm);color:var(--muted);text-transform:capitalize}
.mc-meta .mc-dot{color:var(--faint);margin:0 3px}
/* status chip */
.mc-status{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid transparent;white-space:nowrap}
.mc-status.st-active{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.mc-status.st-pending{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.mc-status.st-closed{color:var(--muted);background:var(--grey-bg);border-color:var(--grey-line)}
/* progress: verified of drafted */
.mc-progress{position:relative;margin-top:15px}
.mcp-track{height:6px;border-radius:6px;background:color-mix(in srgb,var(--ink) 9%,transparent);overflow:hidden}
.mcp-fill{display:block;height:100%;width:100%;border-radius:6px;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--gold-soft),var(--gold));box-shadow:0 0 8px -2px var(--accent-glow);
  transition:transform var(--dur-4) var(--ease-spring)}
/* the bar "resolves" (fills to its value) as the card reveals — the same live-
   checking vocabulary as the proof card, woven through the populated feed. */
.matter-wrap.revealed .mcp-fill{transform:scaleX(var(--fillto,0))}
.mcp-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:var(--fs-xs);color:var(--muted)}
.mc-issues{font-weight:650;font-variant-numeric:tabular-nums;padding:2px 9px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap}
.mc-issues.is-bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.mc-issues.is-clear{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.mc-issues.is-idle{color:var(--faint);background:var(--grey-bg);border-color:var(--grey-line)}
.mc-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:15px;padding-top:12px;border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--faint)}
.mc-activity{font-variant-numeric:tabular-nums}
.mc-open{font-size:var(--fs-xs);font-weight:600;color:var(--gold);opacity:0;transform:translateX(-6px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.matter-card:hover .mc-open{opacity:1;transform:translateX(0)}
.mt-shared{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--gold);
  background:var(--accent-soft);padding:3px 8px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--gold) 22%,transparent)}
/* Close / Reopen — a separate control, revealed on hover/focus (never nested in the card button) */
.mc-controls{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:6px;
  opacity:0;transform:translateY(-4px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.matter-wrap:hover .mc-controls,.matter-wrap:focus-within .mc-controls{opacity:1;transform:translateY(0)}
.mc-ctl{font:inherit;font-size:11px;font-weight:600;cursor:pointer;color:var(--muted);
  background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--hair);
  border-radius:var(--r-pill);padding:4px 11px;box-shadow:var(--shadow-sm);
  transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1)}
.mc-ctl:hover{color:var(--ink);border-color:color-mix(in srgb,var(--gold) 42%,var(--hair));background:color-mix(in srgb,var(--gold) 8%,transparent)}
/* the "create matter" tile — a premium first station in the grid */
.matter-new{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;cursor:pointer;font:inherit;
  border:1.5px dashed color-mix(in srgb,var(--gold) 34%,var(--line));border-radius:var(--r-lg);padding:24px 22px;
  background:color-mix(in srgb,var(--surface) 30%,transparent);color:var(--body);overflow:hidden;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-2),background var(--dur-2)}
.matter-new::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 0% 0%,var(--accent-soft),transparent 58%);transition:opacity var(--dur-3) var(--ease)}
.matter-new:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 52%,var(--line));box-shadow:var(--shadow);
  background:color-mix(in srgb,var(--surface) 52%,transparent)}
.matter-new:hover::before{opacity:1}
.mn-plus{position:relative;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:24px;font-weight:300;line-height:1;
  color:var(--gold);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--gold) 24%,transparent);margin-bottom:6px;
  transition:transform var(--dur-2) var(--ease-spring)}
.matter-new:hover .mn-plus{transform:rotate(90deg) scale(1.06)}
.mn-t{position:relative;font-family:var(--serif);font-size:var(--fs-xl);font-weight:600;color:var(--ink)}
.mn-d{position:relative;font-size:var(--fs-sm);color:var(--muted)}
/* a gorgeous empty state — an invitation, not a dead end */
.home-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  padding:clamp(40px,7vw,72px) 24px;color:var(--muted);line-height:1.6;
  border:1px dashed var(--line);border-radius:var(--r-xl);
  background:radial-gradient(80% 120% at 50% 0%,var(--accent-soft),transparent 62%),color-mix(in srgb,var(--surface) 30%,transparent)}
.he-seal{display:grid;place-items:center;width:74px;height:74px;border-radius:20px;font-family:var(--serif);font-size:38px;color:var(--gold);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);
  box-shadow:inset 0 0 26px -10px var(--accent-glow),var(--shadow-sm);animation:esFloat 5s var(--ease) infinite;margin-bottom:6px}
.home-empty h3{font-size:var(--fs-2xl);letter-spacing:-.01em}
.home-empty p{max-width:46ch;color:var(--muted)}
.he-cta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* the workflow "path of light" strip — full-width band */
.home-flow{list-style:none;margin:0 auto clamp(28px,4vw,46px);padding:0;max-width:1160px;display:flex;gap:0;flex-wrap:wrap}
.flow-step{flex:1 1 190px;position:relative;display:flex;flex-direction:column;gap:9px;padding:20px 20px 18px;text-align:left;
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 46%,transparent);cursor:pointer;font:inherit;overflow:hidden;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
  animation:flowIn .6s var(--ease) both;animation-delay:calc(.28s + var(--fi,0) * .1s)}
.flow-step:first-child{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.flow-step:last-child{border-radius:0 var(--r-lg) var(--r-lg) 0}
.flow-step:not(:first-child){border-left:0}
@keyframes flowIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* the connecting arrow between steps */
.flow-step:not(:last-child)::after{content:"";position:absolute;right:-8px;top:50%;z-index:2;width:16px;height:16px;
  transform:translateY(-50%);background-repeat:no-repeat;background-position:center;background-size:16px 16px;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.fs-idx{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--faint);opacity:.7;transition:color var(--dur-2) var(--ease)}
.flow-step:hover{transform:translateY(-4px);z-index:3;box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--gold) 34%,var(--hair));
  background:color-mix(in srgb,var(--surface) 78%,transparent);border-radius:var(--r-lg)}
.flow-step:hover .fs-idx{color:var(--gold)}
.flow-step:active{transform:translateY(-1px) scale(.99)}
.fs-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--gold);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--gold) 20%,transparent);transition:transform var(--dur-2) var(--ease-spring)}
.fs-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flow-step:hover .fs-ico{transform:scale(1.14) rotate(-5deg)}
.fs-name{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;color:var(--ink)}
.fs-desc{font-size:var(--fs-xs);color:var(--muted);line-height:1.45}

/* one matter, opened */
.matter-detail{animation:swapIn var(--dur-3) var(--ease) both}
.detail-back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;font:inherit;
  font-size:var(--fs-sm);font-weight:600;color:var(--muted);padding:6px 0;margin-bottom:18px;transition:color var(--dur-1)}
.detail-back:hover{color:var(--gold)}
.detail-back span{transition:transform var(--dur-2) var(--ease)}
.detail-back:hover span{transform:translateX(-3px)}
.detail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.detail-title{font-size:clamp(1.7rem,3.3vw,2.4rem);letter-spacing:-.022em;color:var(--ink);line-height:1.08}
.detail-meta{margin-top:9px;font-size:var(--fs-md);color:var(--muted)}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(244px,1fr));gap:15px}
.doc-open{position:relative;text-align:left;border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--surface) 60%,transparent));
  padding:20px 18px;cursor:pointer;font:inherit;box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-2);animation:cardIn .45s var(--ease) both}
.doc-open:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--gold) 30%,var(--hair))}
.doc-wrap{position:relative;display:grid}
.doc-del{position:absolute;top:10px;right:10px;z-index:2;font:inherit;font-size:11px;font-weight:600;cursor:pointer;
  color:var(--muted);background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--hair);
  border-radius:var(--r-pill);padding:3px 10px;opacity:0;transform:translateY(-4px);box-shadow:var(--shadow-sm);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),color var(--dur-1),border-color var(--dur-1),background var(--dur-1)}
.doc-wrap:hover .doc-del,.doc-wrap:focus-within .doc-del{opacity:1;transform:translateY(0)}
.doc-del:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--hair));background:var(--bad-bg)}
.doc-open .do-ico{font-family:var(--serif);font-size:22px;color:var(--gold);margin-bottom:12px;display:block}
.do-title{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;color:var(--ink);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.do-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.do-type{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.do-chip{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap}
.do-chip.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.do-chip.bad{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.doc-empty{grid-column:1/-1;padding:38px 20px;text-align:center;color:var(--muted);line-height:1.65;
  border:1px dashed var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 32%,transparent)}

/* ============================ CASE FILE =================================
   The uploaded source record a matter is drafted FROM — parsed + indexed once,
   then reused to GROUND drafting (see case_index.py). Theme-aware via tokens. */
.case-panel{margin-top:34px;padding-top:26px;border-top:1px solid var(--line);animation:cardIn .5s var(--ease) both}
.case-head{margin-bottom:15px}
.case-title{font-family:var(--serif);font-size:var(--fs-xl);font-weight:600;color:var(--ink);letter-spacing:-.012em}
.case-count{color:var(--faint);font-weight:500}
.case-sub{margin-top:6px;font-size:var(--fs-md);color:var(--muted);line-height:1.55;max-width:66ch}
.case-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:26px 20px;border:1px dashed var(--line);border-radius:var(--r-md);cursor:pointer;
  background:color-mix(in srgb,var(--surface) 32%,transparent);color:var(--muted);
  transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.case-drop:hover{border-color:color-mix(in srgb,var(--gold) 40%,var(--hair));background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.case-drop:focus-visible{outline:none;border-color:color-mix(in srgb,var(--gold) 40%,var(--hair));box-shadow:var(--ring)}
.case-drop.dragover{border-color:var(--gold);border-style:solid;background:var(--accent-soft);transform:translateY(-2px)}
.case-drop.busy{opacity:.55;pointer-events:none}
.case-drop-ico{font-size:20px;color:var(--gold);line-height:1}
.case-drop-text{font-size:var(--fs-md);color:var(--body)}
.case-drop-link{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.case-drop-hint{font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.case-list{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.case-file{display:flex;align-items:center;gap:13px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%,transparent),color-mix(in srgb,var(--surface) 60%,transparent));
  box-shadow:var(--shadow-sm);animation:cardIn .4s var(--ease) both;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-2)}
.case-file:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--gold) 24%,var(--hair))}
.cf-ico{font-family:var(--serif);font-size:18px;color:var(--gold);flex:none}
.cf-main{flex:1;min-width:0}
.cf-name{font-size:var(--fs-md);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-meta{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:var(--fs-2xs);color:var(--faint);flex-wrap:wrap}
.cf-kind{font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cf-badge{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:var(--r-pill);
  padding:1px 8px;font-weight:700;letter-spacing:.03em}
.cf-del{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;color:var(--faint);cursor:pointer;font-size:13px;
  transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1)}
.cf-del:hover{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.case-empty{margin-top:14px}

/* ============================ CANVAS — THE LUMINOUS PAGE ================== */
.editor-view{display:flex;flex-direction:column}
.canvas-bar{position:relative;z-index:6;flex:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px clamp(16px,2.5vw,30px);
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 50%,transparent),transparent)}
.cb-title{display:flex;align-items:center;gap:11px;flex:1;min-width:180px}
.doc-title{flex:1;min-width:120px;border:0;border-bottom:1.5px solid transparent;background:transparent;font-family:var(--serif);
  font-size:var(--fs-xl);font-weight:600;color:var(--ink);outline:none;padding:2px 0;letter-spacing:-.01em;transition:border-color var(--dur-1)}
.doc-title::placeholder{color:var(--faint)}
.doc-title:hover{border-bottom-color:var(--line)}
.doc-title:focus{border-bottom-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.doc-type-chip{flex:none;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);
  background:var(--accent-soft);padding:3px 9px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--gold) 18%,transparent)}
.cb-meta{display:flex;align-items:center;gap:10px}
.save-state{font-size:var(--fs-xs);color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.cb-actions{display:flex;align-items:center;gap:9px}
.collab-presence{display:flex;align-items:center}
.collab-chip{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;margin-left:-7px;
  border-radius:var(--r-pill);background:var(--chip,#3f6fd6);color:#fff;font-size:10px;font-weight:700;
  border:2px solid var(--void);box-shadow:var(--shadow-sm);text-transform:uppercase;cursor:default;transition:transform var(--dur-1) var(--ease)}
.collab-chip:first-child{margin-left:0}
.collab-chip:hover{transform:translateY(-2px)}
.collab-chip.me{box-shadow:0 0 0 2px color-mix(in srgb,var(--chip,#3f6fd6) 55%,var(--void)),var(--shadow-sm)}
.collab-editing{font-size:var(--fs-xs);color:var(--gold);font-style:italic;white-space:nowrap}

/* formatting toolbar */
.editor-toolbar{position:relative;z-index:6;flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px clamp(16px,2.5vw,30px);
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 28%,transparent)}
.tb-group{display:flex;align-items:center;gap:2px}
.tb-sep{width:1px;height:20px;background:var(--line);margin:0 5px}
.tb-spacer{flex:1}
.tb-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 9px;
  border:1px solid transparent;background:transparent;color:var(--body);font:inherit;font-size:var(--fs-sm);font-weight:550;
  border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-2)}
.tb-btn:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink);box-shadow:0 6px 14px -10px var(--accent-glow)}
.tb-btn:active{transform:scale(.93)}
.tb-btn[aria-pressed="true"],.tb-btn.on{background:var(--accent-soft);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 30%,var(--line))}
.tb-btn b,.tb-btn i,.tb-btn u{font-size:14px}
#tcToggle.on{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
#tcAcceptAll{color:var(--ok)}#tcRejectAll{color:var(--bad)}

/* the page floats as a luminous sheet in the void */
.editor-wrap{position:relative;flex:1;overflow:auto;padding:clamp(24px,4vw,58px) clamp(20px,3.5vw,48px) clamp(40px,6vw,80px);
  display:flex;justify-content:center;align-items:flex-start}
.editor-stack{position:relative;width:100%;max-width:832px;min-height:100%;
  /* the paper carries its own token context so it reads as paper in any theme */
  --surface:var(--page);--surface-2:var(--page-2);--ink:var(--page-ink);
  --body:color-mix(in srgb,var(--page-ink) 74%,transparent);--muted:color-mix(in srgb,var(--page-ink) 56%,transparent);
  --faint:color-mix(in srgb,var(--page-ink) 42%,transparent);--line:color-mix(in srgb,var(--page-ink) 12%,transparent);
  background:linear-gradient(180deg,var(--page),var(--page-2));
  border:1px solid color-mix(in srgb,var(--page-ink) 12%,transparent);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg),inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent);
  transition:box-shadow var(--dur-3) var(--ease);animation:pageIn var(--dur-4) var(--ease) both}
/* the halo — the page's luminance bleeding into the dark */
.editor-stack::before{content:"";position:absolute;inset:-8% -10%;z-index:-1;pointer-events:none;border-radius:34px;
  background:radial-gradient(74% 56% at 50% 4%,var(--page-halo),transparent 74%);
  filter:blur(34px);opacity:1;transition:opacity var(--dur-3) var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(22px) scale(.965)}to{opacity:1;transform:none}}
.editor-stack:focus-within{box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--gold) 34%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent)}
#editor{width:100%;box-sizing:border-box;padding:clamp(36px,5vw,62px) clamp(30px,5vw,68px);min-height:100%;
  font-family:var(--serif);font-size:16.5px;line-height:1.92;color:var(--page-ink);outline:none;overflow-wrap:break-word;tab-size:4;caret-color:var(--gold)}
#editor:focus{outline:none}
#editor.is-empty::before{content:attr(data-placeholder);color:color-mix(in srgb,var(--page-ink) 42%,transparent);font-family:var(--sans);font-size:15px;pointer-events:none}
#editor>*:first-child{margin-top:0}
#editor p{margin:0 0 .9em}
#editor h1{font-size:1.72em;margin:.2em 0 .5em;font-weight:600}
#editor h2{font-size:1.36em;margin:1em 0 .4em;font-weight:600}
#editor h3{font-size:1.16em;margin:.9em 0 .35em;font-weight:600}
#editor ul,#editor ol{margin:0 0 .9em;padding-left:1.7em}
#editor li{margin:.2em 0}
#editor blockquote{margin:0 0 .9em;padding:.2em 0 .2em 1em;border-left:3px solid color-mix(in srgb,var(--page-ink) 20%,transparent);color:color-mix(in srgb,var(--page-ink) 74%,transparent);font-style:italic}
#editor a{color:var(--accent)}

/* inline compose affordance — Draft = a NEW document; options right on the canvas,
   floating over the (empty) page, never a full overlay that hides your work */
.canvas-compose{position:absolute;z-index:8;left:50%;top:clamp(16px,3vw,32px);width:min(760px,calc(100% - 36px));
  transform:translateX(-50%);padding:20px 22px 18px;border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--hair);
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--gold) 10%,transparent);
  backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  animation:composeIn var(--dur-3) var(--ease-spring) both}
@keyframes composeIn{from{opacity:0;transform:translateX(-50%) translateY(-10px) scale(.985)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.canvas-compose::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:var(--r-lg) var(--r-lg) 0 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--accent-glow) 30%,var(--accent-glow) 70%,transparent);opacity:.75}
.cc-head{margin-bottom:14px}
.cc-kicker{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.cc-title{font-family:var(--serif);font-size:var(--fs-xl);font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:5px}
.cc-sub{font-size:var(--fs-sm);color:var(--muted);line-height:1.5;max-width:56ch}
.cc-row{display:flex;gap:9px;flex-wrap:wrap;align-items:stretch}
.cc-row #ccType{flex:0 0 auto;min-width:150px;max-width:200px}
.cc-row #ccInstr{flex:1 1 240px;min-width:0}
.cc-row .btn{flex:none}
.cc-dismiss{margin-top:12px;background:none;border:0;font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);cursor:pointer;padding:2px 0;transition:color var(--dur-1)}
.cc-dismiss span{display:inline-block;transition:transform var(--dur-2) var(--ease)}
.cc-dismiss:hover{color:var(--gold)}
.cc-dismiss:hover span{transform:translateX(3px)}

/* citation verification marks — a calm underline that blooms gold, then resolves */
#editor mark.hl{color:inherit;border-radius:2px;padding:0 1px;cursor:pointer;
  border-bottom:2.5px solid color-mix(in srgb,var(--page-ink) 45%,transparent);
  background:color-mix(in srgb,var(--page-ink) 6%,transparent);
  animation:markDraw .8s var(--ease) both;transition:background var(--dur-2),box-shadow var(--dur-2)}
@keyframes markDraw{
  0%{background:transparent;border-bottom-color:transparent}
  40%{background:color-mix(in srgb,var(--gold) 34%,transparent);border-bottom-color:var(--gold);box-shadow:0 0 12px -2px var(--accent-glow)}
}
#editor.marks-quiet mark.hl{animation:none}
#editor mark.hl:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 24%,transparent)}
#editor mark.hl-verified{border-bottom-color:#1f9d63;background:color-mix(in srgb,#1f9d63 13%,transparent)}
#editor mark.hl-fabricated,#editor mark.hl-metadata_mismatch{border-bottom-color:#d24236;background:color-mix(in srgb,#d24236 13%,transparent)}
#editor mark.hl-negative_treatment{border-bottom-color:#cf7318;background:color-mix(in srgb,#cf7318 14%,transparent)}
#editor mark.hl-unverified,#editor mark.hl-existence_only{border-bottom-color:#c79427;background:color-mix(in srgb,#c79427 16%,transparent)}
#editor mark.mark-flash{background:color-mix(in srgb,var(--gold) 32%,transparent);border-bottom-color:var(--gold);box-shadow:0 0 16px -2px var(--accent-glow);transition:background .25s var(--ease)}
/* track changes */
#editor ins.tc{text-decoration:none;color:#1f9d63;background:color-mix(in srgb,#1f9d63 13%,transparent);border-radius:2px;padding:0 1px;box-shadow:inset 0 -2px 0 color-mix(in srgb,#1f9d63 48%,transparent)}
#editor del.tc{color:#d24236;background:color-mix(in srgb,#d24236 11%,transparent);text-decoration:line-through;border-radius:2px;padding:0 1px}
#editor.tracking{caret-color:#d24236}
/* numbered paragraphs */
#editor.numbered{counter-reset:para}
#editor.numbered>p{position:relative;counter-increment:para;padding-left:2.4em}
#editor.numbered>p::before{content:counter(para) ".";position:absolute;left:0;top:0;color:color-mix(in srgb,var(--page-ink) 45%,transparent);font-family:var(--mono);font-size:.85em;font-weight:600}
/* page view — A4 */
.editor-wrap.page-view{padding:28px 26px 70px}
.editor-wrap.page-view .editor-stack{max-width:210mm}
.editor-wrap.page-view #editor{padding:25mm 25mm;min-height:297mm}

/* the VERIFY showstopper — a brass scan beam sweeping the page */
.verify-scan{position:absolute;left:-3%;right:-3%;top:0;height:130px;pointer-events:none;z-index:7;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold) 12%,transparent) 52%,color-mix(in srgb,var(--gold) 30%,transparent) 88%,transparent);
  border-bottom:1.5px solid color-mix(in srgb,var(--gold) 78%,transparent);
  box-shadow:0 10px 32px -4px var(--accent-glow)}
.verify-scan.run{animation:scanSweep 1.25s var(--ease) forwards}
@keyframes scanSweep{0%{opacity:0;transform:translateY(-110px)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(var(--scan-to,900px))}}
/* the world holds its breath during a verify: atmosphere dims, page glows brighter */
body.app-workspace.verifying .atmos{opacity:calc(var(--atmos) * .4)}
body.app-workspace.verifying .rail,body.app-workspace.verifying .canvas-bar,body.app-workspace.verifying .editor-toolbar{filter:brightness(.86) saturate(.9)}
body.app-workspace.verifying .editor-stack::before{opacity:1.4}
body.app-workspace.verifying .editor-stack{box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--gold) 30%,transparent),0 0 80px -30px var(--accent-glow)}
body.app-workspace .rail,body.app-workspace .canvas-bar,body.app-workspace .editor-toolbar{transition:filter var(--dur-3) var(--ease)}

/* selection toolbar — inline AI on selected text */
.sel-toolbar{position:fixed;z-index:65;display:flex;align-items:center;gap:2px;padding:5px;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--hair);box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;transform:translateY(5px) scale(.97);pointer-events:none;transition:opacity var(--dur-1) var(--ease),transform var(--dur-2) var(--ease-spring)}
.sel-toolbar.show{opacity:1;transform:none;pointer-events:auto}
.sel-toolbar button{border:0;background:transparent;color:var(--body);font:inherit;font-size:var(--fs-sm);font-weight:600;
  padding:6px 11px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.sel-toolbar button:hover{background:var(--accent-soft);color:var(--gold)}
.sel-toolbar .st-div{width:1px;height:18px;background:var(--line);margin:0 3px}
.sel-toolbar .st-cite{color:var(--gold)}

/* per-change accept/reject popover (created by editor.js) */
#tcPopover{position:fixed;z-index:70;display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--hair);
  border-radius:11px;box-shadow:var(--shadow-lg);padding:6px 8px;font-size:12px;animation:pop .16s var(--ease)}
#tcPopover.tc-ins-pop{border-left:3px solid var(--ok)}#tcPopover.tc-del-pop{border-left:3px solid var(--bad)}
#tcPopover .tc-kind{font-weight:600;color:var(--ink);margin-right:2px}
#tcPopover button{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:4px 10px;font:inherit;font-size:12px;font-weight:550;cursor:pointer;color:var(--body)}
#tcPopover .tc-accept{color:var(--ok)}#tcPopover .tc-accept:hover{background:var(--ok-bg)}
#tcPopover .tc-reject{color:var(--bad)}#tcPopover .tc-reject:hover{background:var(--bad-bg)}

/* export dropdown */
.export-wrap{position:relative}
.export-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:196px;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:6px;animation:pop .16s var(--ease)}
.export-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;font-size:var(--fs-sm);color:var(--body);
  padding:9px 11px;border-radius:var(--r-sm);cursor:pointer;transition:background var(--dur-1),color var(--dur-1)}
.export-menu button:hover{background:var(--accent-soft);color:var(--gold)}
/* Account menu (top-bar): the signed-in name opens this — email line + Sign out. */
.auth-wrap{position:relative}
.auth-menu{min-width:210px}
.auth-menu-email{padding:8px 11px 9px;font-size:var(--fs-xs);color:var(--muted);
  border-bottom:1px solid var(--line);margin-bottom:4px;word-break:break-all;-webkit-user-select:text;user-select:text}

/* verify badge */
.verify-badge{font-size:var(--fs-xs);font-weight:600;padding:6px 12px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;
  font-family:var(--sans);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--grey-bg);color:var(--muted);transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1)}
.verify-badge:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.verify-badge.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.verify-badge.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.verify-badge.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad-line)}
.verify-badge.stale{background:var(--grey-bg);color:var(--faint);font-style:italic}
.verify-badge.checking{background:var(--accent-soft);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.verify-badge.checking::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;vertical-align:-1px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--gold) 38%,transparent);border-top-color:var(--gold);animation:vbSpin .7s linear infinite}
@keyframes vbSpin{to{transform:rotate(360deg)}}
.verify-badge.pop{animation:badgePop .55s var(--ease-spring)}
@keyframes badgePop{0%{transform:scale(.8)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
.verify-cheer{position:fixed;z-index:75;pointer-events:none;width:0;height:0}
.verify-cheer i{position:absolute;width:6px;height:6px;border-radius:2px;background:var(--gold);opacity:0;animation:cheer .9s var(--ease) forwards}
@keyframes cheer{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--cx,0),var(--cy,-30px)) scale(.3)}}

/* inline citation fix popover */
.hl-popover{position:fixed;z-index:70;width:min(340px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--hair);
  border-left:3px solid var(--muted);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:15px 17px;font-size:var(--fs-sm);animation:pop .2s var(--ease)}
.hl-popover.k-fabricated,.hl-popover.k-metadata_mismatch{border-left-color:var(--bad)}
.hl-popover.k-negative_treatment{border-left-color:var(--amber)}
.hl-popover.k-unverified,.hl-popover.k-existence_only{border-left-color:var(--warn)}
.hl-popover.k-verified{border-left-color:var(--ok)}
.hp-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.hp-cite{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink);font-weight:600}
.hp-msg{color:var(--body);line-height:1.55;margin:0 0 10px}
.hp-fix{color:var(--ink);background:var(--accent-soft);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:11px;line-height:1.5;border:1px solid color-mix(in srgb,var(--gold) 16%,transparent)}
.hp-fix b{color:var(--accent-ink)}
.hp-open{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:600;color:var(--gold);background:none;border:0;cursor:pointer;padding:0;transition:gap var(--dur-1)}
.hp-open:hover{gap:7px;text-decoration:underline;text-underline-offset:2px}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* ============================ THE COMMAND SURFACE ========================
   A centred spotlight that scales in over a dimmed, blurred canvas (Raycast /
   Superhuman feel). One focused tool at a time — Assist · Draft · Research ·
   Tools · Practice. No permanent docked side panel. All motion is GPU-only
   (transform/opacity/filter); the layout never reflows on open. */
.cmd-scrim{position:fixed;inset:0;z-index:76;background:color-mix(in srgb,var(--scrim) 82%,transparent);
  backdrop-filter:blur(10px) saturate(1.05);-webkit-backdrop-filter:blur(10px) saturate(1.05);
  opacity:0;pointer-events:none;transition:opacity var(--dur-3) var(--ease)}
.cmd-scrim.show{opacity:1;pointer-events:auto}
.cmd-surface{position:fixed;z-index:78;left:50%;top:7vh;width:min(680px,calc(100vw - 40px));max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 96%,transparent);border:1px solid var(--hair);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--gold) 10%,transparent);
  backdrop-filter:blur(22px) saturate(1.12);-webkit-backdrop-filter:blur(22px) saturate(1.12);
  transform:translateX(-50%) translateY(12px) scale(.97);opacity:0;pointer-events:none;will-change:transform;
  transition:transform var(--dur-3) var(--ease-spring),opacity var(--dur-2) var(--ease)}
.cmd-surface.open{transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:auto}
.cmd-surface::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,var(--accent-glow) 30%,var(--accent-glow) 70%,transparent);opacity:.7}
.cmd-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.cmd-kicker{display:block;font-family:var(--serif);font-size:var(--fs-xl);color:var(--ink);font-weight:600;letter-spacing:-.01em}
.cmd-hint{margin-top:5px;font-size:var(--fs-sm);color:var(--muted);line-height:1.5;max-width:48ch}
.cmd-close{flex:none;width:33px;height:33px;border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:14px;cursor:pointer;transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1),transform var(--dur-2) var(--ease-spring)}
.cmd-close:hover{color:var(--ink);background:var(--surface-2);border-color:var(--hair);transform:rotate(90deg)}
.cmd-body{flex:1;min-height:0;display:flex;flex-direction:column}
.cmd-surface #panelAsk{min-height:min(56vh,520px)}
.ipanel{flex:1;min-height:0;overflow:auto;padding:20px 22px}
#panelAsk{padding:0;display:flex;flex-direction:column}
/* content-rise when a surface opens or swaps tools */
.ip-in{animation:panelRise .5s var(--ease) both}

/* ============================ THE VERIFY DOCK ============================
   Verify's cinematic reveal — NOT a side column. An audit dock that rises over
   the foot of the canvas, tied to the marks in the document above. The page
   stays fully lit and interactive so you can read the marks as you triage.
   Carries the risk-ring gauge, findings, and copy-audit-report. */
.verify-dock-scrim{display:none;position:fixed;inset:0;z-index:43;background:color-mix(in srgb,var(--scrim) 40%,transparent);
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease)}
.verify-dock-scrim.show{opacity:1;pointer-events:auto}
/* THE ANALYSIS PANEL — a right-side review rail (Word/Grammarly style): the
   document is NEVER covered; the canvas slides left to make room, and you can
   keep editing while you triage. On phones it falls back to a bottom sheet. */
.verify-dock{position:absolute;z-index:44;top:0;right:0;bottom:0;width:var(--dock-w,430px);max-width:94vw;
  display:flex;flex-direction:column;overflow:hidden;
  background:color-mix(in srgb,var(--surface) 96%,transparent);border-left:1px solid var(--hair);
  box-shadow:-18px 0 44px -28px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--gold) 10%,transparent);
  backdrop-filter:blur(22px) saturate(1.12);-webkit-backdrop-filter:blur(22px) saturate(1.12);
  transform:translateX(calc(100% + 40px));opacity:0;pointer-events:none;will-change:transform;
  transition:transform var(--dur-3) var(--ease),opacity var(--dur-2) var(--ease)}
.verify-dock::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,transparent,var(--accent-glow) 26%,var(--accent-glow) 74%,transparent);opacity:.8}
.verify-dock.open{transform:translateX(0);opacity:1;pointer-events:auto}
/* the canvas makes room — document, toolbar and title bar all stay reachable */
body.dock-open .editor-wrap,body.dock-open .canvas-bar,body.dock-open .editor-toolbar{
  padding-right:calc(var(--dock-w,430px) + 18px);transition:padding-right var(--dur-3) var(--ease)}
.editor-wrap,.canvas-bar,.editor-toolbar{transition:padding-right var(--dur-3) var(--ease)}
/* desktop: non-modal — no scrim, keep editing while the panel is open */
.verify-dock-scrim{display:none!important}
@media (max-width:960px){
  .verify-dock-scrim{display:block!important}
  .verify-dock{top:auto;left:0;right:0;bottom:0;width:100%;max-width:none;max-height:72vh;
    border-left:0;border-top:1px solid var(--hair);border-radius:var(--r-xl) var(--r-xl) 0 0;
    transform:translateY(calc(100% + 40px))}
  .verify-dock.open{transform:translateY(0)}
  body.dock-open .editor-wrap,body.dock-open .canvas-bar,body.dock-open .editor-toolbar{padding-right:0}
}
.vd-head{flex:none;display:flex;align-items:center;gap:13px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 40%,transparent),transparent)}
.vd-badge{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;color:var(--gold);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);box-shadow:inset 0 0 14px -7px var(--accent-glow)}
.vd-badge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vd-headline{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.vd-kicker{font-family:var(--serif);font-size:var(--fs-lg);color:var(--ink);font-weight:600;letter-spacing:-.01em}
.vd-hint{font-size:var(--fs-xs);color:var(--muted)}
.vd-close{flex:none;width:33px;height:33px;border-radius:var(--r-sm);border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:14px;cursor:pointer;transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1),transform var(--dur-2) var(--ease-spring)}
.vd-close:hover{color:var(--ink);background:var(--surface-2);border-color:var(--hair);transform:rotate(90deg)}
.vd-body{flex:1;min-height:0;display:flex;flex-direction:column}
.vd-body .ipanel{padding:16px 18px}

/* shared panel blocks + fields */
.insp-block{margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.insp-block:last-child{margin-bottom:0}
.insp-title{font-size:var(--fs-2xs);font-weight:700;color:var(--muted);letter-spacing:var(--track);text-transform:uppercase;display:flex;align-items:center;gap:8px}
.insp-note{font-size:var(--fs-xs);color:var(--muted);line-height:1.55;margin:2px 0 0}
.insp-empty{font-size:var(--fs-sm);color:var(--muted);line-height:1.65;padding:16px;border:1px dashed var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.pill{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);background:var(--accent-soft);padding:2px 8px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--gold) 18%,transparent)}
.field{width:100%;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 60%,transparent);padding:10px 12px;font:inherit;font-size:var(--fs-sm);
  color:var(--ink);outline:none;resize:vertical;transition:border-color var(--dur-1),box-shadow var(--dur-1),background var(--dur-1)}
.field::placeholder{color:var(--faint)}
.field:hover{border-color:var(--hair)}
.field:focus{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:var(--ring);background:var(--surface)}
select.field{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
.chips-actions{display:flex;flex-wrap:wrap;gap:7px}
.chip-btn{border:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 70%,transparent);color:var(--body);font:inherit;font-size:var(--fs-xs);padding:6px 12px;border-radius:var(--r-pill);
  cursor:pointer;transition:transform var(--dur-1) var(--ease),background var(--dur-1),border-color var(--dur-1),color var(--dur-1),box-shadow var(--dur-2)}
.chip-btn:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--gold) 40%,var(--line));color:var(--gold);box-shadow:0 6px 14px -10px var(--accent-glow)}
.chip-btn:active{transform:scale(.95)}
.empty-state{text-align:center;padding:36px 18px;display:flex;flex-direction:column;align-items:center;gap:13px}
.empty-state .es-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:var(--r-md);background:var(--accent-soft);color:var(--gold);
  font-size:23px;border:1px solid color-mix(in srgb,var(--gold) 18%,transparent);box-shadow:inset 0 0 18px -8px var(--accent-glow);animation:esFloat 4.5s var(--ease) infinite}
@keyframes esFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.empty-state h4{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;color:var(--ink)}
.empty-state p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;max-width:34ch}
.draft-opts{display:flex;align-items:center;gap:10px}
.opt-label{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}
.draft-opts select{flex:1}
#knowState{font-size:11px;color:var(--faint)}

/* assist / chat */
.chat-actions{display:flex;flex-wrap:wrap;gap:7px;padding:16px 20px 12px;border-bottom:1px solid var(--line)}
.chat-thread{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.cmsg{max-width:92%;padding:11px 14px;border-radius:16px;font-size:var(--fs-sm);line-height:1.55;white-space:pre-wrap;word-wrap:break-word;box-shadow:var(--shadow-sm);animation:riseSm .34s var(--ease) both}
@keyframes riseSm{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.cmsg.user{align-self:flex-end;background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 22%,var(--surface-2)),var(--surface-2));color:var(--ink);
  border:1px solid color-mix(in srgb,var(--gold) 26%,var(--line));border-bottom-right-radius:5px}
.cmsg.assistant{align-self:flex-start;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.cmsg-insert{display:inline-block;margin-top:9px;border:1px solid var(--line);background:var(--surface);color:var(--gold);font:inherit;font-size:11.5px;font-weight:600;
  padding:5px 11px;border-radius:8px;cursor:pointer;transition:background .16s,border-color .16s}
.cmsg-insert:hover{background:var(--accent-soft);border-color:color-mix(in srgb,var(--gold) 34%,var(--line))}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 34%,transparent);align-items:flex-end}
.chat-input textarea{flex:1;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 60%,transparent);padding:10px 12px;font:inherit;font-size:var(--fs-sm);
  color:var(--ink);outline:none;resize:none;max-height:120px;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.chat-input textarea::placeholder{color:var(--faint)}
.chat-input textarea:focus{border-color:color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:var(--ring)}

/* research */
.research-results{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.auth{border:1px solid var(--line);border-radius:var(--r-md);padding:15px;background:color-mix(in srgb,var(--surface-2) 70%,transparent);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-2);animation:cardIn .42s var(--ease) both}
.auth:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--hair)}
.auth-head{display:flex;align-items:center;gap:8px;justify-content:space-between}
.auth-name{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:var(--fs-md);line-height:1.32}
.auth-cite{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--muted);margin:4px 0 7px}
.auth-snip{font-size:var(--fs-xs);color:var(--body);line-height:1.5;margin-bottom:10px}
.insert-cite{font-size:var(--fs-xs)}

/* verify panel */
.verify-empty{padding:26px 8px;color:var(--body);font-size:var(--fs-sm);line-height:1.65;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.verify-empty p{margin:0}
.verify-empty::before{content:"";display:grid;place-items:center;width:54px;height:54px;border-radius:var(--r-md);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--gold) 18%,transparent);box-shadow:inset 0 0 18px -8px var(--accent-glow);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a86a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l7 2.5v5.4c0 4.4-3 7.3-7 8.6-4-1.3-7-4.2-7-8.6V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:27px}
.verify-empty.loading{display:block;text-align:left;padding:4px 0}
.verify-empty.loading::before{display:none}
.risk-mini{display:flex;align-items:center;gap:16px;padding:17px;margin-bottom:15px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--surface-2) 80%,transparent),color-mix(in srgb,var(--surface-2) 46%,transparent));
  border:1px solid var(--line);border-radius:var(--r-lg);animation:gaugeIn .55s var(--ease-spring) both}
@keyframes gaugeIn{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
.rm-gauge{position:relative;width:68px;height:68px;flex:none}
.rm-gauge svg{width:68px;height:68px;transform:rotate(-90deg)}
.rm-track{fill:none;stroke:var(--line);stroke-width:7}
.rm-arc{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.15s var(--ease),stroke .5s}
.rm-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:23px;color:var(--ink);font-variant-numeric:tabular-nums}
.rm-info{flex:1;min-width:0}
.rm-label{font-family:var(--serif);font-size:var(--fs-lg);font-weight:600;color:var(--ink);margin-bottom:8px}
.rm-bar{height:7px;border-radius:6px;background:var(--line);overflow:hidden}
.rm-bar>i{display:block;height:100%;width:0;border-radius:6px;transition:width 1.15s var(--ease),background .5s}
.rm-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:8px;font-variant-numeric:tabular-nums}
.summary-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;color:var(--muted);background:var(--grey-bg);border:1px solid var(--line);padding:4px 10px;border-radius:var(--r-pill)}
.chip b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.chip.v-verified{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.chip.v-verified b{color:var(--ok)}
.chip.v-fabricated,.chip.v-metadata_mismatch{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.chip.v-fabricated b,.chip.v-metadata_mismatch b{color:var(--bad)}
.chip.v-negative_treatment{color:var(--amber);background:color-mix(in srgb,var(--amber) 13%,transparent);border-color:color-mix(in srgb,var(--amber) 32%,transparent)}
.chip.v-existence_only,.chip.v-unverified{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.chip.v-existence_only b,.chip.v-unverified b{color:var(--warn)}
.chip.v-info,.chip.v-statute{color:var(--info);background:var(--info-bg);border-color:var(--info-line)}
.findings{display:flex;flex-direction:column;gap:9px;margin-bottom:15px}
.finding{border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface-2) 66%,transparent);overflow:hidden;
  transition:border-color var(--dur-2),box-shadow var(--dur-2);animation:findIn .5s var(--ease) both}
.finding:nth-child(2){animation-delay:.07s}.finding:nth-child(3){animation-delay:.14s}
.finding:nth-child(4){animation-delay:.21s}.finding:nth-child(5){animation-delay:.28s}
.finding:nth-child(n+6){animation-delay:.34s}
@keyframes findIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
.finding.k-verified{border-left:3px solid var(--ok)}
.finding.k-fabricated,.finding.k-metadata_mismatch{border-left:3px solid var(--bad)}
.finding.k-negative_treatment{border-left:3px solid var(--amber)}
.finding.k-unverified,.finding.k-existence_only{border-left:3px solid var(--warn)}
.finding.k-info{border-left:3px solid var(--info)}
.finding.open{box-shadow:var(--shadow-sm)}
.finding.flash{animation:cardflash 1.1s var(--ease)}
@keyframes cardflash{0%{background:var(--accent-soft)}100%{background:color-mix(in srgb,var(--surface-2) 66%,transparent)}}
.finding-head{display:flex;align-items:center;gap:9px;padding:12px 13px;cursor:pointer}
.finding-head .dotc{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none;box-shadow:0 0 6px -1px currentColor}
.k-verified .dotc{background:var(--ok)}.k-fabricated .dotc,.k-metadata_mismatch .dotc{background:var(--bad)}
.k-negative_treatment .dotc{background:var(--amber)}.k-unverified .dotc,.k-existence_only .dotc{background:var(--warn)}
.k-info .dotc{background:var(--info)}
.finding-head .cite{flex:1;min-width:0;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.finding-head .chev{color:var(--faint);transition:transform var(--dur-2) var(--ease)}
.finding.open .finding-head .chev{transform:rotate(90deg)}
.finding-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-3) var(--ease)}
.finding.open .finding-body{grid-template-rows:1fr}
.finding-body .fb{overflow:hidden;padding:0 13px}
.finding.open .finding-body .fb{padding:0 13px 13px}
.finding .msg{font-size:var(--fs-sm);color:var(--body);line-height:1.55;margin:0 0 8px}
.finding .mc{font-size:var(--fs-xs);color:var(--muted);margin-bottom:7px}
.finding .mc b{color:var(--ink)}
.quote{font-size:var(--fs-xs);line-height:1.5;padding:7px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);margin-bottom:6px;display:flex;flex-direction:column;gap:2px}
.quote.good{border-left:2px solid var(--ok)}.quote.bad{border-left:2px solid var(--bad)}
.quote .q{color:var(--ink);font-style:italic}.quote .qn{color:var(--muted)}
.ground{font-size:var(--fs-xs);line-height:1.5;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);color:var(--body)}
.ground .gv{font-weight:700}
.ground.supported{border-left:2px solid var(--ok)}.ground.supported .gv{color:var(--ok)}
.ground.unsupported,.ground.contradicted{border-left:2px solid var(--bad)}.ground.unsupported .gv,.ground.contradicted .gv{color:var(--bad)}
.ground.abstain{border-left:2px solid var(--warn)}.ground.abstain .gv{color:var(--warn)}
.verify-skel{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.verify-skel .sk-head{display:flex;align-items:center;gap:14px;padding:17px;background:color-mix(in srgb,var(--surface-2) 66%,transparent);border:1px solid var(--line);border-radius:var(--r-lg)}
.verify-skel .sk-ring{width:66px;height:66px;border-radius:50%;flex:none;background:conic-gradient(var(--gold) 0 30%,var(--line) 30%);
  -webkit-mask:radial-gradient(circle 26px at 50% 50%,transparent 98%,#000);mask:radial-gradient(circle 26px at 50% 50%,transparent 98%,#000);animation:skSpin 1.1s linear infinite}
@keyframes skSpin{to{transform:rotate(360deg)}}
.verify-skel .sk-headlines{flex:1;display:flex;flex-direction:column;gap:9px}
.sk-card{padding:13px;border:1px solid var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface-2) 66%,transparent);display:flex;flex-direction:column;gap:9px}
.sk-line{height:11px;border-radius:6px;background:var(--line);position:relative;overflow:hidden}
.sk-line::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 22%,transparent),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}

/* tools */
.statute-rows{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow:auto;margin-top:2px}
.st-row{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 11px;background:color-mix(in srgb,var(--surface-2) 66%,transparent)}
.st-map{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.st-map b{color:var(--gold)}
.st-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.deadline-rows{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.dl-row{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 11px;background:color-mix(in srgb,var(--surface-2) 66%,transparent)}
.dl-date{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;color:var(--gold);white-space:nowrap;min-width:76px}
.dl-body{display:flex;flex-direction:column;gap:2px}
.dl-body b{font-size:13px;color:var(--ink)}.dl-body span{font-size:11.5px;color:var(--muted);line-height:1.4}

/* practice */
.conflict-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);border-radius:var(--r-sm);padding:8px 10px;font-size:12px;line-height:1.4}
.mini-list{display:flex;flex-direction:column;gap:6px;margin-top:4px;max-height:200px;overflow:auto}
.mini-item{font-size:12.5px;color:var(--body);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;background:color-mix(in srgb,var(--surface-2) 66%,transparent)}
.mini-item .mi-sub{color:var(--muted);font-size:11px}

/* ============================ COMMAND PALETTE ============================= */
.palette-scrim{position:fixed;inset:0;z-index:80;background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;padding-top:13vh;animation:fadein var(--dur-2) ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.palette{width:min(620px,92vw);background:color-mix(in srgb,var(--surface) 97%,transparent);border:1px solid var(--hair);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--gold) 10%,transparent);overflow:hidden;animation:rise var(--dur-3) var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.palette input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:19px 22px;font-family:var(--serif);font-size:var(--fs-xl);color:var(--ink);outline:none}
.palette input::placeholder{color:var(--faint);font-family:var(--sans);font-size:var(--fs-lg)}
.palette-list{list-style:none;margin:0;padding:8px;max-height:52vh;overflow:auto}
.palette-list li{padding:12px 14px;border-radius:var(--r-sm);cursor:pointer;font-size:var(--fs-md);color:var(--body);display:flex;align-items:center;gap:12px;transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1) var(--ease)}
.palette-list li .pl-ico{width:18px;text-align:center;color:var(--gold);flex:none}
.palette-list li .pl-tag{margin-left:auto;font-size:var(--fs-2xs);color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.palette-list li .pl-key{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.palette-list li.sel,.palette-list li:hover{background:var(--accent-soft);color:var(--ink)}
.palette-list li.pl-none{color:var(--faint);cursor:default}

/* ============================ MODALS ===================================== */
.modal-scrim{position:fixed;inset:0;z-index:80;background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein var(--dur-2) ease}
.modal{width:min(470px,94vw);background:color-mix(in srgb,var(--surface) 99%,transparent);border:1px solid var(--hair);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);padding:28px;animation:rise var(--dur-3) var(--ease);display:flex;flex-direction:column;gap:13px}
.modal h3{font-size:var(--fs-2xl);letter-spacing:-.01em}
.modal .insp-note{margin-top:-4px}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:8px}
.modal-lg{width:min(580px,94vw)}
/* Sign in with Google — a compact, centered consent dialog (Google-only). The
   button is Google-drawn and appears once the server confirms SSO is configured
   (workspace.js initGoogleSignin); otherwise the "unavailable" note explains why. */
.modal-auth{width:min(400px,94vw);align-items:center;text-align:center}
.auth-google{display:flex;flex-direction:column;gap:14px;align-items:center}
.auth-google .gsi-btn{display:flex;justify-content:center;min-height:40px;color-scheme:light}
.auth-unavailable{color:var(--faint)}
.auth-unavailable code{font-size:.92em;padding:1px 5px;border-radius:5px;
  background:color-mix(in srgb,var(--surface-2) 70%,transparent);border:1px solid var(--line)}
.team-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.team-org-switch{display:flex;align-items:center;gap:8px}
.team-org-switch select{min-width:150px}
.new-org-row{display:flex;gap:8px}
.new-org-row input{flex:1}
.team-role-note{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.team-role-note b{color:var(--ink)}
.team-invite{display:flex;gap:8px;flex-wrap:wrap}
.team-invite input{flex:1;min-width:150px}
.team-invite select{min-width:130px}
.member-list{display:flex;flex-direction:column;gap:7px;max-height:340px;overflow:auto}
.member{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;background:color-mix(in srgb,var(--surface-2) 66%,transparent)}
.mem-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.mem-name{font-size:13.5px;font-weight:600;color:var(--ink)}
.mem-name .you{font-size:10px;font-weight:700;color:var(--gold);background:var(--accent-soft);padding:1px 6px;border-radius:20px;margin-left:4px;text-transform:uppercase;letter-spacing:.04em}
.mem-email{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem-ctl{display:flex;align-items:center;gap:8px;flex-shrink:0}
.role-sel{font:inherit;font-size:12px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.role-chip{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--grey-bg);padding:3px 9px;border-radius:20px}
.role-chip.r-owner{color:var(--gold);background:var(--accent-soft)}
.role-chip.r-admin{color:var(--purp);background:var(--purp-bg)}
.mem-x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
.mem-x:hover{color:var(--bad);background:var(--bad-bg)}
.mem-x.leave{font-size:12px;font-weight:600;color:var(--muted)}
.mem-x.leave:hover{color:var(--bad)}
.invite-list{margin-top:6px}
.invite-h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:8px 0 4px}
.invite-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--body);padding:7px 2px;border-bottom:1px solid var(--line2)}
.inv-x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:12px}
.inv-x:hover{color:var(--bad)}

/* ============================ GUIDED DRAFT (Phase 5) =====================
   "Draft from the record": a calm, stepped flow — review the auto-extracted brief,
   choose the document + confirm the legal hook, then generate. Theme-aware via
   tokens; GPU-only motion (opacity/transform); reduced-motion resolves at rest. */
.modal-guided{width:min(720px,94vw);max-height:min(88vh,880px);padding:24px 26px 22px;gap:16px}
.guided-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.guided-headline{display:flex;flex-direction:column;gap:4px;min-width:0}
.guided-title{font-family:var(--serif);font-size:var(--fs-2xl);letter-spacing:-.015em;color:var(--ink);line-height:1.12;
  overflow:hidden;text-overflow:ellipsis}
.modal-guided .cmd-close{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;
  transition:color var(--dur-1),background var(--dur-1),border-color var(--dur-1)}
.modal-guided .cmd-close:hover{color:var(--ink);background:color-mix(in srgb,var(--surface-2) 70%,transparent);border-color:var(--line)}

/* stepper — numbered stations threaded by a hairline; active/done in brass */
.guided-steps{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.gs-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;text-align:center}
.gs-step:not(:last-child)::after{content:"";position:absolute;top:13px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;
  background:var(--line);border-radius:2px;transition:background var(--dur-3) var(--ease)}
.gs-step.done:not(:last-child)::after{background:color-mix(in srgb,var(--gold) 62%,var(--line))}
.gs-dot{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:var(--fs-xs);font-weight:700;color:var(--muted);background:var(--surface);border:1.5px solid var(--line);
  transition:color var(--dur-2),background var(--dur-2),border-color var(--dur-2),transform var(--dur-2) var(--ease)}
.gs-name{font-size:var(--fs-2xs);font-weight:600;letter-spacing:.02em;color:var(--faint);transition:color var(--dur-2)}
.gs-step.active .gs-dot{color:var(--primary-fg);background:var(--primary-bg);border-color:transparent;transform:scale(1.08)}
.gs-step.active .gs-name{color:var(--ink)}
.gs-step.done .gs-dot{color:var(--gold);background:var(--accent-soft);border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.gs-step.done .gs-dot::before{content:"✓"}
.gs-step.done .gs-dot{font-size:0}
.gs-step.done .gs-dot::before{font-size:var(--fs-sm)}

/* body — scrolls internally so the stepper + footer stay pinned */
.guided-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px 2px 2px 0;margin-right:-4px}
.guided-panel.gp-in{animation:gpIn .42s var(--ease) both}
@keyframes gpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* step 1 — the extracted brief */
.gbrief{display:flex;flex-direction:column;gap:18px}
.gb-note{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-sm);color:var(--body);line-height:1.5;
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--gold) 22%,transparent);
  border-radius:var(--r-md);padding:10px 13px}
.gb-note .gb-mode{margin-left:auto;flex:none;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);background:var(--grey-bg);border:1px solid var(--grey-line);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
.gb-note .gb-mode.gb-mode-ai{color:var(--gold);background:var(--accent-soft);border-color:color-mix(in srgb,var(--gold) 34%,transparent)}
.gb-summary{font-family:var(--serif);font-size:var(--fs-lg);color:var(--ink);line-height:1.4}
.gb-sec{display:flex;flex-direction:column;gap:9px}
.gb-sec-head{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--muted)}
.gb-sec-head .gb-count{font-weight:600;letter-spacing:normal;text-transform:none;color:var(--faint)}
.gb-parties{display:flex;flex-direction:column;gap:6px}
.gb-party{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-md);padding:7px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.gb-party .gb-pname{font-weight:650;color:var(--ink)}
.gb-party .gb-role{margin-left:auto;font-size:var(--fs-2xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--gold) 20%,transparent);border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap}
.gb-timeline{display:flex;flex-direction:column;border-left:2px solid color-mix(in srgb,var(--gold) 34%,var(--line));padding-left:14px;gap:11px}
.gb-event-row{position:relative;display:flex;gap:12px;font-size:var(--fs-sm);line-height:1.5}
.gb-event-row::before{content:"";position:absolute;left:-19px;top:5px;width:8px;height:8px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.gb-date{flex:none;width:96px;font-variant-numeric:tabular-nums;font-weight:650;color:var(--gold-soft)}
.gb-ev{color:var(--body)}
.gb-facts{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none;counter-reset:gbfact}
.gb-fact{position:relative;padding-left:26px;font-size:var(--fs-sm);color:var(--body);line-height:1.55}
.gb-fact::before{counter-increment:gbfact;content:counter(gbfact);position:absolute;left:0;top:0;width:18px;height:18px;
  display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--muted);background:var(--grey-bg);border-radius:50%}
.gb-issues{display:flex;flex-wrap:wrap;gap:7px}
.gb-issue{font-size:var(--fs-sm);color:var(--body);background:color-mix(in srgb,var(--info) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--info) 26%,transparent);border-radius:var(--r-pill);padding:5px 12px;line-height:1.4}
.gbrief-loading,.gbrief-empty{padding:34px 20px;text-align:center;color:var(--muted);line-height:1.6}
.gbrief-loading{color:var(--faint)}
.gbrief-empty .gbe-ico{font-size:26px;color:var(--gold);display:block;margin-bottom:8px}
.gbrief-empty h4{font-family:var(--serif);font-size:var(--fs-xl);color:var(--ink);margin-bottom:6px}
.gbrief-empty p{max-width:52ch;margin:0 auto 16px}
.gbrief-empty .gbe-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* step 2 — the hook chips */
.guided-issue-chips{display:flex;flex-wrap:wrap;gap:7px}
.gb-issue-chip{font:inherit;font-size:var(--fs-xs);color:var(--body);cursor:pointer;text-align:left;
  background:color-mix(in srgb,var(--surface-2) 55%,transparent);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:5px 11px;line-height:1.35;transition:border-color var(--dur-1),color var(--dur-1),background var(--dur-1),transform var(--dur-1) var(--ease)}
.gb-issue-chip:hover{border-color:color-mix(in srgb,var(--gold) 44%,var(--hair));color:var(--ink);transform:translateY(-1px)}
.gb-issue-chip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.guided-lang{flex-direction:row;align-items:center;gap:12px}
.guided-lang .field{max-width:220px}

/* step 2 — the client anchor + the resolved posture (spec Part 0) */
.guided-anchor{display:flex;gap:10px;flex-wrap:wrap}
.guided-anchor select{flex:1 1 240px;min-width:0}
.guided-anchor input{flex:1 1 260px;min-width:0}
.guided-posture{margin-top:10px}
.gp-box{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:color-mix(in srgb,var(--surface-2) 45%,transparent)}
.gp-row{display:flex;align-items:baseline;gap:12px}
.gp-k{flex:none;width:96px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.gp-v{color:var(--body);font-size:var(--fs-sm);line-height:1.45;min-width:0}
.gp-v b{color:var(--ink)}
.gp-note{font-size:var(--fs-2xs);color:var(--faint);padding-top:2px;border-top:1px dashed var(--line2)}
.gp-stop{padding:12px 14px;border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1.5;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--bad,#c0392b) 45%,var(--line));
  background:color-mix(in srgb,var(--bad,#c0392b) 9%,transparent)}
.gp-stop b{display:block;margin-bottom:2px}

/* step 3 — confirm */
.guided-confirm{display:flex;flex-direction:column;gap:2px}
.gc-row{display:flex;align-items:baseline;gap:14px;padding:12px 2px;border-bottom:1px solid var(--line2)}
.gc-k{flex:none;width:110px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.gc-v{color:var(--ink);font-size:var(--fs-md);line-height:1.5}
.gc-v.gc-muted{color:var(--muted)}
.gc-note{margin-top:14px;font-size:var(--fs-sm);color:var(--muted);line-height:1.6}

/* footer */
.guided-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.guided-foot-right{display:flex;align-items:center;gap:9px;margin-left:auto}

/* grounding provenance — shown in the analysis dock after a grounded draft */
.grounding-prov{display:flex;align-items:flex-start;gap:11px;margin-bottom:16px;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--ok-line);background:var(--ok-bg);animation:cardIn .4s var(--ease) both}
.grounding-prov.ungrounded{border-color:var(--grey-line);background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.gp-ico{flex:none;font-size:13px;line-height:1.5;color:var(--ok)}
.grounding-prov.ungrounded .gp-ico{color:var(--faint)}
.gp-main{min-width:0}
.gp-line{font-size:var(--fs-sm);color:var(--ink);line-height:1.4}
.gp-line b{color:var(--ok)}
.grounding-prov.ungrounded .gp-line b{color:var(--ink)}
.gp-sub{margin-top:3px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.45}
.gp-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gp-file{font-size:var(--fs-2xs);color:var(--body);background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 10px;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

@media (max-width:600px){
  .modal-guided{padding:20px 16px 16px;max-height:92vh}
  .gs-name{display:none}
  .gs-step:not(:last-child)::after{top:13px;left:calc(50% + 16px);right:calc(-50% + 16px)}
  .gb-date{width:auto;min-width:78px}
  .guided-lang{flex-direction:column;align-items:stretch;gap:8px}
  .guided-lang .field{max-width:none}
  .gc-row{flex-direction:column;gap:3px}
  .gc-k{width:auto}
}

/* ============================ TOAST ====================================== */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:90;background:color-mix(in srgb,var(--surface) 96%,transparent);
  color:var(--ink);border:1px solid var(--hair);border-radius:var(--r-pill);padding:11px 20px;font-size:var(--fs-sm);font-weight:550;box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:toastIn .34s var(--ease)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================ MOBILE BAR ================================= */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:16;gap:2px;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0));
  overflow-x:auto;scrollbar-width:none;background:color-mix(in srgb,var(--void) 90%,transparent);border-top:1px solid var(--hair);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.mobile-bar::-webkit-scrollbar{display:none}
.mobile-bar button{flex:none;border:1px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-xs);font-weight:600;
  padding:9px 14px;border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;transition:background var(--dur-1),color var(--dur-1)}
.mobile-bar button.on{color:var(--gold);background:var(--accent-soft)}

/* ============================ FOCUS ====================================== */
.btn:focus-visible,.tb-btn:focus-visible,.chip-btn:focus-visible,.rail-btn:focus-visible,.icon-btn:focus-visible,.verify-badge:focus-visible,
.export-menu button:focus-visible,#tcPopover button:focus-visible,.omnibar:focus-visible,.cmd-close:focus-visible,.vd-close:focus-visible,.matter-card:focus-visible,
.matter-new:focus-visible,.doc-open:focus-visible,.flow-step:focus-visible,.mobile-bar button:focus-visible,.brand:focus-visible,.sel-toolbar button:focus-visible,.rail-pin:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#editor:focus-visible{outline:2px solid color-mix(in srgb,var(--gold) 55%,transparent);outline-offset:-3px;border-radius:12px}
.field:focus-visible{outline:none}

/* ============================ ENTRANCE CHOREOGRAPHY ======================
   Cinematic staggered reveals via CSS as a graceful default. When JS motion is
   on (body.motion), GSAP drives a richer cascade instead (these are disabled). */
.home-hero .kicker{animation:heroRise .8s var(--ease) both}
.home-title{animation:heroRise .9s var(--ease) .06s both}
.home-lede{animation:heroRise .9s var(--ease) .14s both}
.home-cta{animation:heroRise .9s var(--ease) .22s both}
.home-plug{animation:heroRise .9s var(--ease) .3s both}
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
body.app-workspace.motion .home-hero .kicker,
body.app-workspace.motion .home-title,body.app-workspace.motion .home-lede,
body.app-workspace.motion .home-cta,body.app-workspace.motion .home-plug{animation:none}
/* topbar + rail glide in on first paint */
.topbar{animation:lintelDrop .9s var(--ease) both}
@keyframes lintelDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.rail{animation:spineIn 1s var(--ease) .1s both}
@keyframes spineIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.cmd-surface.open .cmd-head{animation:panelPop .55s var(--ease-spring) both}
.verify-dock.open .vd-head{animation:panelPop .55s var(--ease-spring) both}
@keyframes panelPop{from{opacity:0;transform:translateY(-9px)}to{opacity:1;transform:none}}
@keyframes panelRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================ THEME MORPH ================================ */
:root.theme-anim body.app-workspace *:not(.aurora):not(.wk-grain):not(.verify-scan){
  transition:background-color .5s var(--ease),border-color .5s var(--ease),
    color .4s var(--ease),fill .4s var(--ease),box-shadow .5s var(--ease)!important}

/* ============================ THE GUIDED TOUR =========================== */
.tour{position:fixed;inset:0;z-index:120;font-family:var(--sans)}
.tour-scrim{position:absolute;inset:0;background:color-mix(in srgb,#05060a 74%,transparent);
  backdrop-filter:blur(9px) saturate(1.05);-webkit-backdrop-filter:blur(9px) saturate(1.05);animation:fadein var(--dur-3) var(--ease)}
.tour-scrim::before{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:overlay;
  background:radial-gradient(80vw 60vh at 50% 28%,rgba(201,168,106,.18),transparent 70%)}
.tour-scrim::after{content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
  background-image: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='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E")}
.tour-cine{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(580px,92vw);z-index:2;text-align:center;color:#efe9dd}
.ta-ico{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 20px;border-radius:17px;font-size:28px;
  color:#c9a86a;background:linear-gradient(160deg,rgba(30,34,44,.9),rgba(16,19,26,.9));
  border:1px solid rgba(201,168,106,.34);box-shadow:0 24px 54px -26px rgba(201,168,106,.5)}
.ta-ico svg{width:31px;height:31px;fill:none;stroke:#c9a86a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ta-kicker{display:inline-block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:#c9a86a;margin-bottom:12px}
.ta-title{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3rem);line-height:1.05;letter-spacing:-.02em;color:#fff;margin-bottom:12px}
.ta-title em{font-style:italic;color:#c9a86a;font-weight:400}
.ta-line{font-size:1.07rem;line-height:1.6;color:#c4c8d0;max-width:44ch;margin:0 auto 24px}
.ta-demo{position:relative;height:196px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,21,28,.82),rgba(11,13,18,.82));border:1px solid rgba(233,229,220,.1);box-shadow:0 44px 96px -52px rgba(0,0,0,.9)}
.tour-cine.swap{animation:actSwap .55s var(--ease)}
@keyframes actSwap{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.td{position:absolute;inset:0;padding:22px 24px;display:flex;flex-direction:column;gap:9px;justify-content:center}
.td-line{font-family:var(--serif);color:#c4c8d0;line-height:1.7}
.td-h{height:11px;border-radius:5px;background:rgba(201,168,106,.5);width:0;animation:tdGrow 1.1s var(--ease) .2s forwards}
.td-b1{height:9px;border-radius:5px;background:rgba(233,229,220,.16);width:0;animation:tdGrow 1.1s var(--ease) .5s forwards}
.td-b2{height:9px;border-radius:5px;background:rgba(233,229,220,.16);width:0;animation:tdGrow 1.1s var(--ease) .8s forwards}
@keyframes tdGrow{to{width:var(--w,80%)}}
.td-langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.td-langs span{font-size:11px;padding:4px 9px;border-radius:6px;color:#8a909c;border:1px solid rgba(233,229,220,.12);transition:all .4s var(--ease)}
.td-langs span.on{color:#c9a86a;border-color:rgba(201,168,106,.5);background:rgba(201,168,106,.1)}
.td-card{display:flex;flex-direction:column;gap:3px;padding:9px 12px;border-radius:8px;background:rgba(18,22,30,.8);
  border:1px solid rgba(233,229,220,.1);border-left:2px solid #3ba97a;opacity:0;transform:translateX(-10px);animation:tdIn .5s var(--ease) forwards}
.td-card.g2{animation-delay:.5s}.td-card.g3{animation-delay:.8s}
.td-card.ghost{border-left-color:#db564b;animation-delay:1.15s;opacity:0}
.td-card.ghost .tc-n{color:#8a909c;text-decoration:line-through;text-decoration-color:#db564b}
.tc-n{font-family:var(--serif);font-size:12.5px;color:#efe9dd}
.tc-t{font-family:var(--mono);font-size:9.5px;color:#83d9aa}
.td-card.ghost .tc-t{color:#f08479}
@keyframes tdIn{to{opacity:1;transform:none}}
.td-verify{font-family:var(--serif);font-size:14.5px;line-height:2.1;color:#c4c8d0}
.td-cite{position:relative;white-space:nowrap;font-family:var(--mono);font-size:12px;padding-bottom:3px}
.td-cite::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;transform:scaleX(0);transform-origin:left}
.td-ok{color:#83d9aa}.td-ok::after{background:#3ba97a;box-shadow:0 0 10px rgba(59,169,122,.4);animation:tdDraw 1s var(--ease) .4s forwards}
.td-bad{color:#f08479}.td-bad::after{background:#db564b;box-shadow:0 0 10px rgba(219,86,75,.4);animation:tdDraw 1s var(--ease) 1s forwards}
.td-tick{display:inline-block;margin-left:5px;color:#83d9aa;opacity:0;transform:scale(.5);animation:tdPop .5s var(--ease-spring) 1.2s forwards}
.td-flag{display:inline-block;margin-left:5px;color:#f08479;opacity:0;transform:scale(.5);animation:tdPop .5s var(--ease-spring) 1.8s forwards}
@keyframes tdDraw{to{transform:scaleX(1)}}
@keyframes tdPop{to{opacity:1;transform:none}}
.td-collab{align-items:center}
.td-av{display:flex;margin-bottom:14px}
.td-av i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#0a0b0e;
  margin-right:-8px;border:2px solid #0b0d12;font-style:normal;opacity:0;transform:scale(.5);animation:tdPop .5s var(--ease-spring) forwards}
.td-av i:nth-child(1){background:#e0a3b6}.td-av i:nth-child(2){background:#9fc2e8;animation-delay:.2s}
.td-av i:nth-child(3){background:#c9a86a;animation-delay:.4s}
.td-cursor{position:relative;font-family:var(--serif);font-size:14px;color:#c4c8d0;line-height:2}
.td-live{color:#c9a86a}
.td-caret{display:inline-block;width:2px;height:1.05em;background:#e0a3b6;margin-left:1px;vertical-align:-2px;animation:obBlink 1s steps(1) infinite}
.td-export{margin-top:14px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#83d9aa;
  padding:5px 12px;border:1px solid rgba(59,169,122,.5);border-radius:20px;opacity:0;animation:tdPop .5s var(--ease-spring) 1.2s forwards}
.tour-spot{position:absolute;border-radius:16px;z-index:1;pointer-events:none;
  box-shadow:0 0 0 9999px color-mix(in srgb,#05060a 76%,transparent),0 0 0 2px rgba(201,168,106,.85),0 0 44px 6px rgba(201,168,106,.36);
  transition:left .6s var(--ease-spring),top .6s var(--ease-spring),width .6s var(--ease),height .6s var(--ease)}
.tour-caption{position:absolute;z-index:3;width:min(272px,80vw);padding:14px 16px;border-radius:var(--r-md);color:#efe9dd;
  background:linear-gradient(180deg,rgba(22,26,34,.98),rgba(14,17,24,.98));border:1px solid rgba(201,168,106,.32);
  box-shadow:0 32px 74px -32px rgba(0,0,0,.9);transition:left .55s var(--ease),top .55s var(--ease)}
.tour-caption b{display:block;font-family:var(--serif);font-size:var(--fs-lg);color:#fff;margin-bottom:4px}
.tour-caption span{font-size:var(--fs-sm);color:#c4c8d0;line-height:1.5}
.tour-caption::before{content:"";position:absolute;left:-6px;top:26px;width:10px;height:10px;transform:rotate(45deg);
  background:rgba(22,26,34,.98);border-left:1px solid rgba(201,168,106,.32);border-bottom:1px solid rgba(201,168,106,.32)}
.tour-bar{position:absolute;left:50%;bottom:clamp(20px,4vh,42px);transform:translateX(-50%);z-index:4;
  display:flex;align-items:center;gap:16px;padding:10px 12px 10px 18px;border-radius:var(--r-pill);
  background:color-mix(in srgb,#0b0d12 92%,transparent);border:1px solid rgba(233,229,220,.14);box-shadow:0 26px 64px -26px rgba(0,0,0,.9);animation:toastIn .4s var(--ease)}
.tour-skip{background:none;border:0;color:#8a909c;font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;padding:6px 8px;transition:color var(--dur-1)}
.tour-skip:hover{color:#efe9dd}
.tour-dots{display:flex;gap:7px}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:rgba(233,229,220,.24);transition:background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-spring)}
.tour-dots i.on{background:#c9a86a;transform:scale(1.35)}
.tour-dots i.done{background:rgba(201,168,106,.55)}
.tour-nav{display:flex;gap:8px}
.tour-nav button{font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;border-radius:var(--r-sm);padding:8px 16px;transition:all var(--dur-1) var(--ease)}
#tourBack{background:transparent;border:1px solid rgba(233,229,220,.16);color:#c4c8d0}
#tourBack:hover{border-color:rgba(233,229,220,.36);color:#fff}
#tourBack:disabled{opacity:.4;cursor:default}
.tn-primary{background:#c9a86a;border:1px solid transparent;color:#1a1204;box-shadow:0 12px 26px -14px rgba(201,168,106,.9)}
.tn-primary:hover{transform:translateY(-1px);background:color-mix(in srgb,#c9a86a 90%,#fff)}
.tour-skip:focus-visible,.tour-nav button:focus-visible{outline:2px solid #c9a86a;outline-offset:2px}

/* ============================ POINT 2 — disabled scoped actions =========== */
/* Draft needs a matter; Verify + co-edit need a document. Disabled-looking, but
   still clickable so a warm notice can explain WHY + how to unblock. */
.rail-btn.is-disabled,.mobile-bar button.is-disabled{opacity:.42;cursor:not-allowed}
.rail-btn.is-disabled:hover{transform:none;background:none}
.rail-btn.is-disabled .rb-ico{color:var(--faint)}
.mobile-bar button.is-disabled:active{transform:none}
/* the toast can carry one action (e.g. "Create a matter") on a blocked notice */
.toast.has-act{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 20px}
.toast-msg{font-size:var(--fs-sm);font-weight:550}
.toast-act{font:inherit;font-size:var(--fs-sm);font-weight:650;cursor:pointer;white-space:nowrap;
  color:var(--primary-fg);background:var(--accent);border:1px solid transparent;border-radius:var(--r-pill);padding:7px 14px;
  transition:transform var(--dur-1) var(--ease),filter var(--dur-1) var(--ease)}
.toast-act:hover{transform:translateY(-1px);filter:brightness(1.07)}
.toast-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================ POINT 4/5 — analysis: drafting notes ======== */
.verify-badge.note{background:var(--accent-soft);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
/* a quiet hint when the frugal auto-check is holding back on a short draft */
.verify-badge.hint{background:var(--grey-bg);color:var(--muted);border-color:var(--grey-line);font-style:italic;font-weight:600}

/* ============================ Re-analyze FAB (manual on-demand trigger) ==== */
.reanalyze-fab{position:absolute;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.6vh,26px);z-index:9;
  display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:var(--fs-sm);font-weight:650;cursor:pointer;
  color:var(--primary-fg);background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:var(--r-pill);padding:11px 18px;
  box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--gold) 20%,transparent);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);
  animation:fabIn .5s var(--ease-spring) both}
@keyframes fabIn{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
.reanalyze-fab:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 0 1px color-mix(in srgb,var(--gold) 34%,transparent)}
.reanalyze-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reanalyze-fab.fab-off{opacity:0;transform:translateY(10px) scale(.96);pointer-events:none}
.reanalyze-fab .rf-ico svg{width:17px;height:17px;display:block}
.reanalyze-fab .rf-spin{display:none;width:15px;height:15px;flex:none;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--primary-fg) 45%,transparent);border-top-color:var(--primary-fg);
  animation:vbSpin .7s linear infinite}
.reanalyze-fab.running .rf-spin{display:inline-block}
.reanalyze-fab.running .rf-ico{display:none}
.rf-badge{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);display:grid;place-items:center;
  font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;
  color:var(--gold);background:var(--primary-fg);box-shadow:var(--shadow-sm)}
/* drafting-suggestion marks in the document — a dotted amber underline,
   deliberately NOT the citation marks (mark.hl); clicking opens its note */
#editor mark.sg{color:inherit;background:none;cursor:pointer;padding:0 1px;border-radius:2px;
  border-bottom:2px dotted color-mix(in srgb,var(--amber) 72%,transparent);
  transition:background var(--dur-1) var(--ease)}
#editor mark.sg:hover{background:color-mix(in srgb,var(--amber) 13%,transparent)}
#editor mark.sg.sg-high{border-bottom-color:color-mix(in srgb,var(--amber) 92%,transparent)}
#editor mark.sg.sg-low{border-bottom-color:color-mix(in srgb,var(--amber) 46%,transparent)}
/* analysis dock: two clearly-distinct sections */
.analysis-sec{margin-top:18px}
.as-head{display:flex;align-items:baseline;gap:8px;margin:0 0 11px;font-family:var(--sans);font-size:var(--fs-2xs);
  font-weight:700;letter-spacing:var(--track);text-transform:uppercase;color:var(--faint)}
.as-head .as-sub{font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--faint);opacity:.85}
.drafting-sec .as-head{color:var(--amber)}
.drafting-findings{display:flex;flex-direction:column;gap:8px}
.dfind{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r-sm);
  padding:11px 13px;background:color-mix(in srgb,var(--surface) 42%,transparent);animation:cardIn .4s var(--ease) both}
.dfind.d-missing{border-left-color:var(--muted);border-left-style:dashed}
.dfind.d-risk{border-left-color:var(--bad)}
.dfind.flash{animation:cardflash 1.1s var(--ease)}
.dfind-head{display:flex;align-items:center;gap:8px}
.d-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--amber)}
.d-sev-high{background:var(--bad)}.d-sev-low{background:var(--gold-soft)}
.d-clause{flex:1;font-weight:650;color:var(--ink);font-size:var(--fs-sm)}
.d-tag{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);white-space:nowrap;
  background:color-mix(in srgb,var(--amber) 13%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);
  border-radius:var(--r-pill);padding:2px 8px}
.d-tag-missing{color:var(--muted);background:var(--grey-bg);border-color:var(--grey-line)}
.d-tag-risk{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.d-note{margin-top:6px;font-size:var(--fs-sm);color:var(--body);line-height:1.5}
.d-actions{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:var(--fs-sm);color:var(--muted);flex-wrap:wrap}
.d-check{color:var(--muted);margin-right:2px;font-size:14px}
.d-goto,.d-improve{font:inherit;font-size:var(--fs-xs);font-weight:650;cursor:pointer;border-radius:var(--r-sm);
  padding:5px 11px;transition:transform var(--dur-1) var(--ease),filter var(--dur-1) var(--ease),border-color var(--dur-1),color var(--dur-1)}
.d-goto{color:var(--body);background:transparent;border:1px solid var(--hair)}
.d-goto:hover{border-color:color-mix(in srgb,var(--gold) 42%,var(--hair));color:var(--ink)}
.d-improve{color:var(--primary-fg);background:var(--accent);border:1px solid transparent;box-shadow:var(--shadow-sm)}
.d-improve:hover{transform:translateY(-1px);filter:brightness(1.07)}
.d-goto:focus-visible,.d-improve:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Pre-filing checks (Phase 4) — a distinct group in the same dock, reusing the
   drafting-notes card language with an info-blue accent so it never reads as a
   citation issue or a drafting note. Informational only (no destructive action). */
.checks-sec .as-head{color:var(--info)}
.checks-findings{display:flex;flex-direction:column;gap:8px}
.cfind{border:1px solid var(--line);border-left:3px solid var(--info);border-radius:var(--r-sm);
  padding:11px 13px;background:color-mix(in srgb,var(--surface) 42%,transparent);animation:cardIn .4s var(--ease) both}
.cfind.c-high{border-left-color:var(--bad)}
.cfind.c-medium{border-left-color:var(--amber)}
.cfind.c-low{border-left-color:var(--info)}
.cfind.c-info{border-left-color:var(--muted);border-left-style:dashed}
.cfind-head{display:flex;align-items:center;gap:8px}
.c-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--info)}
.c-dot.c-sev-high{background:var(--bad)}.c-dot.c-sev-medium{background:var(--amber)}
.c-dot.c-sev-low{background:var(--info)}.c-dot.c-sev-info{background:var(--muted)}
.c-label{flex:1;font-weight:650;color:var(--ink);font-size:var(--fs-sm)}
.c-kind{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  color:var(--info);background:color-mix(in srgb,var(--info) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--info) 30%,transparent);border-radius:var(--r-pill);padding:2px 8px}
.c-detail{margin-top:6px;font-size:var(--fs-sm);color:var(--body);line-height:1.5}
.c-foot{margin-top:8px;display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--faint)}
.c-badge{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-pill);
  padding:2px 7px;border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok)}
.c-badge.c-todo{border-color:var(--grey-line);background:var(--grey-bg);color:var(--muted)}

/* ============================ HOME — scroll-reveal motion language ========= */
/* Landing-style reveals driven by IntersectionObserver (see workspace.js), rooted
   at each real scroller (the home, the rail, the activity panel). Items rise/fade/
   scale in, staggered via --ri. GPU-only. Reveal transitions are declared PER
   element type so they never clobber those elements' own hover transitions. */
[data-reveal]{opacity:0}
[data-reveal].revealed{opacity:1}
.matter-wrap[data-reveal],.act-row[data-reveal],.sc-hero[data-reveal],.sc-stage[data-reveal]{transform:translateY(16px) scale(.995)}
.matter-wrap[data-reveal].revealed,.act-row[data-reveal].revealed,.sc-hero[data-reveal].revealed,.sc-stage[data-reveal].revealed{transform:none}
.matter-wrap[data-reveal]{transition:opacity .6s var(--ease) calc(var(--ri,0)*.05s),transform .6s var(--ease) calc(var(--ri,0)*.05s)}
.sc-hero[data-reveal],.sc-stage[data-reveal]{transition:opacity .7s var(--ease) calc(var(--ri,0)*.09s),transform .7s var(--ease) calc(var(--ri,0)*.09s)}
/* the "New matter" tile reveals via opacity only (keeps its snappy hover lift) */
.matter-new[data-reveal]{transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2),border-color var(--dur-2),background var(--dur-2),opacity .6s var(--ease) calc(var(--ri,0)*.05s)}

/* ============================ POINT 4 — matters feed ====================== */
/* Matters fill the width as a wrapping grid (cards stretch, then wrap — never a
   cramped column or a clipped card). Recent Activity is a full-width collapsible
   strip below, so nothing reserves a dead column. */
.matter-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px;padding:4px 2px}
.matter-rail .matter-wrap{min-width:0}
.matter-rail .matter-new{flex:0 0 clamp(200px,64vw,236px);align-self:stretch}
.activity-panel{margin-top:20px;min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--surface) 32%,transparent);overflow:hidden;box-shadow:var(--shadow-sm)}
.ap-head{display:flex;align-items:center;gap:9px;width:100%;flex:none;background:none;border:0;border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--faint);padding:14px 16px 11px;cursor:pointer;text-align:left;transition:color var(--dur-2)}
.ap-head:hover{color:var(--muted)}
.ap-title{flex:1}
.ap-count{letter-spacing:0;font-weight:600;font-size:11px;color:var(--muted);padding:1px 8px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--muted) 15%,transparent)}
.ap-count:empty{display:none}
.ap-chev{display:inline-flex;width:15px;height:15px;color:var(--faint);transition:transform var(--dur-2) var(--ease)}
.activity-panel.collapsed .ap-chev{transform:rotate(-90deg)}
.activity-panel.collapsed .ap-head{border-bottom:0}
.activity-panel.collapsed .activity-feed{display:none}
.activity-feed{overflow-y:auto;max-height:clamp(220px,42vh,360px);padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px}
.feed-empty{margin-top:12px;padding:32px 20px;text-align:center;color:var(--muted);font-size:var(--fs-md);line-height:1.6;
  border:1px dashed var(--line);border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 28%,transparent)}
/* search matters (POINT 3) */
.feed-search{position:relative;display:flex;align-items:center}
.feed-search .fs-ico{position:absolute;left:11px;width:15px;height:15px;color:var(--faint);pointer-events:none}
.feed-search .fs-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feed-search input{font:inherit;font-size:var(--fs-sm);color:var(--ink);width:clamp(148px,19vw,220px);
  padding:8px 12px 8px 32px;border-radius:var(--r-pill);border:1px solid var(--hair);
  background:color-mix(in srgb,var(--surface) 58%,transparent);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.feed-search input::placeholder{color:var(--faint)}
.feed-search input:focus{outline:none;border-color:color-mix(in srgb,var(--gold) 45%,var(--hair));box-shadow:var(--ring);background:var(--surface)}
/* filtered items: fade the result set in (GPU), collapse non-matches out of flow */
.matter-wrap.filtered-out,.matter-new.filtered-out,.act-row.filtered-out{display:none}
@keyframes refilterIn{from{opacity:.25;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
.matter-wrap.refilter{animation:refilterIn .32s var(--ease)}

/* ============================ POINT 1b — activity rows ==================== */
/* Reveal uses transform (translateY/scale); hover uses background/border/shadow
   only (no transform) so the two never fight. */
.act-row{display:flex;align-items:center;gap:13px;width:100%;text-align:left;font:inherit;cursor:pointer;
  padding:11px 12px;border:1px solid transparent;border-radius:var(--r-md);background:transparent;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),
    opacity .55s var(--ease) calc(var(--ri,0)*.045s),transform .55s var(--ease) calc(var(--ri,0)*.045s)}
.act-row:hover{background:color-mix(in srgb,var(--surface) 66%,transparent);border-color:var(--line);box-shadow:var(--shadow-sm)}
.act-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;font-family:var(--serif);
  font-size:15px;font-weight:700;color:var(--muted);background:var(--grey-bg);border:1px solid var(--grey-line)}
.act-bad .act-ico{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line);animation:actPulse 2.6s var(--ease) infinite}
.act-ok .act-ico{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.act-new .act-ico{color:var(--gold);background:var(--accent-soft);border-color:color-mix(in srgb,var(--gold) 24%,transparent)}
@keyframes actPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 42%,transparent)}55%{box-shadow:0 0 0 6px transparent}}
.act-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.act-title{font-weight:650;color:var(--ink);font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act-event{font-size:var(--fs-sm);color:var(--muted)}
.act-bad .act-event{color:var(--bad)}
.act-time{flex:none;font-size:var(--fs-xs);color:var(--faint);font-variant-numeric:tabular-nums}
.act-closed{opacity:.62}

/* ============================ POINT 1a — empty-home showcase ============== */
.home-showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4vw,60px);
  align-items:center;padding:clamp(10px,3vh,36px) 0 42px;animation:heroRise .7s var(--ease) both}
.sc-hero{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sc-hero .kicker{animation:heroRise .8s var(--ease) both}
.sc-title{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.05;letter-spacing:-.025em;color:var(--ink);margin:14px 0 0}
.sc-title em{font-style:italic;color:var(--gold)}
.sc-lede{margin:18px 0 0;max-width:52ch;font-size:var(--fs-lg);line-height:1.6;color:var(--body)}
.sc-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sc-proof{margin-top:30px;width:min(430px,100%)}
.sc-stage{position:relative;min-width:0}
.sc-acts{position:relative;height:clamp(320px,44vh,392px)}
.sc-act{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:translateY(14px) scale(.99);
  pointer-events:none;transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.sc-act.on{opacity:1;transform:none;pointer-events:auto}
.sc-ico{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:12px;color:var(--gold);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--gold) 24%,transparent)}
.sc-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sc-kicker{margin-top:14px;font-family:var(--sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--gold)}
.sc-h{font-size:var(--fs-2xl);color:var(--ink);margin-top:6px;letter-spacing:-.01em}
.sc-line{margin-top:6px;font-size:var(--fs-md);color:var(--muted);line-height:1.55;max-width:46ch}
.sc-demo{position:relative;height:clamp(150px,20vh,182px);margin-top:16px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,21,28,.92),rgba(11,13,18,.93));border:1px solid rgba(233,229,220,.1);
  box-shadow:0 30px 70px -42px rgba(0,0,0,.72)}
.sc-dots{display:flex;gap:8px;margin-top:20px}
.sc-dot{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:color-mix(in srgb,var(--muted) 34%,transparent);
  transition:background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-spring)}
.sc-dot.on{background:var(--gold);transform:scale(1.3)}
.sc-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sc-acts.reduced{position:static;height:auto;display:flex;flex-direction:column;gap:30px}
.sc-acts.reduced .sc-act{position:static;opacity:1;transform:none;pointer-events:auto}

/* ============================ RESPONSIVE ================================ */
@media (max-width:1180px){ .verify-dock{left:calc(50% + 40px);width:min(760px,calc(100% - 128px))} }
@media (max-width:920px){
  .home-showcase{grid-template-columns:1fr;gap:30px}
  .sc-proof{display:none}
  .sc-acts{height:clamp(300px,50vh,360px)}
}
@media (max-width:860px){
  /* the feed stacks: rail on top (still horizontal), activity below, both short */
  .feed-cols{grid-template-columns:1fr;gap:16px}
  .activity-feed{max-height:clamp(180px,34vh,280px)}
  .feed-search input{width:100%}
  .fh-actions{width:100%}
  .feed-search{flex:1 1 auto}
}
@media (max-width:960px){
  .home-hero{grid-template-columns:1fr;gap:26px}
  .hh-proof{display:none}
}
@media (max-width:820px){
  .topbar{grid-template-columns:auto 1fr auto;gap:10px;padding:0 12px;height:56px}
  .ob-text,.ob-key{display:none}
  .omnibar{width:auto;justify-self:end;padding:0 12px;gap:0}
  .link,.brand-word{display:none}
  .rail{display:none}
  .mobile-bar{display:flex;z-index:79}   /* stays above the sheets so it can switch tools */
  .editor-stack::before{display:none}
  /* lift the Re-analyze FAB clear of the bottom action bar */
  .reanalyze-fab{right:14px;bottom:calc(58px + env(safe-area-inset-bottom,0) + 12px);padding:10px 15px}
  /* command surface becomes a bottom sheet, seated above the tool bar */
  .cmd-scrim{backdrop-filter:blur(6px) saturate(1.03);-webkit-backdrop-filter:blur(6px) saturate(1.03)}
  .cmd-surface{left:0;right:0;top:auto;bottom:calc(52px + env(safe-area-inset-bottom,0));width:100%;max-width:100%;max-height:calc(84vh - 52px);
    border-left:0;border-right:0;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -40px 90px -34px rgba(0,0,0,.7);
    transform:translateY(calc(100% + 60px)) scale(1);opacity:1}
  .cmd-surface.open{transform:translateY(0) scale(1)}
  .cmd-surface #panelAsk{min-height:min(54vh,480px)}
  /* verify dock becomes a bottom sheet too, tied to the marks above */
  .verify-dock{left:0;right:0;bottom:calc(52px + env(safe-area-inset-bottom,0));width:100%;max-width:100%;max-height:calc(78vh - 52px);
    border-left:0;border-right:0;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -40px 90px -34px rgba(0,0,0,.7);
    transform:translateY(calc(100% + 60px));opacity:1}
  .verify-dock.open{transform:translateY(0)}
  .verify-dock-scrim{display:block}
  .editor-wrap{padding:14px 12px 82px}
  .editor-wrap.page-view{padding:14px 12px 82px}
  #editor{padding:28px 22px}
  .home{padding:28px 18px 96px}
  .canvas-bar{padding:10px 14px;gap:10px}
  .cb-title{min-width:140px}
  .editor-toolbar{padding:8px 12px;gap:5px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .editor-toolbar::-webkit-scrollbar{display:none}
  .editor-toolbar .tb-group{flex:none}
  .tb-spacer{flex:none;width:6px}
  .tb-btn{min-width:38px;height:38px}
  .icon-btn{width:38px;height:38px}
  .home-flow{flex-direction:column;gap:10px;max-width:none}
  .flow-step{flex:1 1 auto;border-radius:var(--r-lg)!important;border-left:1px solid var(--line)!important}
  .flow-step:not(:last-child)::after{display:none}
  .tour-bar{bottom:auto;top:calc(12px + env(safe-area-inset-top,0))}
  .tour-cine{top:52%}
  .ta-demo{height:170px}
}
@media (max-width:460px){
  .appbar-status{display:none}
  .detail-head{flex-direction:column;align-items:flex-start}
  .btn-tour{width:100%}
}

/* ============================ REDUCED MOTION ============================
   No drift, no grain shimmer, no loops — but the resolved room stays intact. */
@media (prefers-reduced-motion:reduce){
  .aurora,.wk-grain,.ob-ico,.empty-state .es-ico,.he-seal,.verify-skel .sk-ring,
  .hp-scan,.hp-cite::after,.hp-tick,.hp-flag,.rail-btn.on .rb-ico::after{animation:none}
  .hp-cite::after{transform:scaleX(1)}.hp-tick,.hp-flag{opacity:1;transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}
  .cmd-surface,.cmd-scrim,.verify-dock,.verify-dock-scrim,.rm-arc,.rm-bar>i,.btn,.matter-card,.matter-new,.doc-open,.tb-btn,.sel-toolbar,
  .case-drop,.case-file,.cf-del,
  .rail,.rail-ind,.rail-flow-fill,.rb-fly,.rb-ico,.rb-step,.flow-step,.rail-btn,.brand-mark,.tour-spot,.tour-caption{transition-duration:.01ms!important}
  .ob-caret,.td-caret{display:none}
  .verify-scan{display:none}
  /* scroll-reveals resolve instantly (no hidden state, no flash) */
  [data-reveal]{opacity:1!important;transform:none!important}
  .matter-wrap .mcp-fill{transform:scaleX(var(--fillto,0))!important;transition:none!important}
  /* Re-analyze FAB: no spinner under reduced motion — a text state only */
  .reanalyze-fab .rf-spin{display:none!important}
  .reanalyze-fab.running .rf-ico{display:inline-flex!important}
}

/* ============================ PRINT ==================================== */
@media print{
  @page{size:A4;margin:22mm 22mm}
  .atmos,.wk-grain,.topbar,.rail,.cmd-surface,.cmd-scrim,.verify-dock,.verify-dock-scrim,.mobile-bar,.canvas-bar,.editor-toolbar,.hl-popover,#tcPopover,.sel-toolbar,
  .export-menu,.palette-scrim,.modal-scrim,.toast,.home,.verify-scan{display:none!important}
  body.app-workspace::after{display:none!important}
  body.app-workspace{height:auto!important;overflow:visible!important;background:#fff!important;display:block!important}
  .studio,.stage,.editor-view{display:block!important;position:static!important;height:auto!important;overflow:visible!important}
  .editor-wrap{display:block!important;overflow:visible!important;padding:0!important}
  .editor-stack{max-width:none!important;width:100%!important;border:0!important;box-shadow:none!important;background:#fff!important;animation:none!important}
  .editor-stack::before{display:none!important}
  #editor{padding:0!important;min-height:0!important;color:#000!important;font-size:12pt;line-height:1.6}
  #editor mark.hl{background:none!important;border:0!important;color:#000!important}
  #editor ins.tc{color:#000!important;background:none!important;box-shadow:none!important}
  #editor del.tc{display:none!important}
  #editor.numbered>p::before,#editor h1,#editor h2,#editor h3{color:#000}
  #editor p,#editor li,#editor blockquote{page-break-inside:avoid}
}

/* ==========================================================================
   DRAFT STUDIO — the one drafting flow (choose → outline & details → draft)
   ========================================================================== */
.draft-studio{position:absolute;inset:0;overflow-y:auto;z-index:8;background:var(--bg);
  padding:24px clamp(18px,3vw,40px) 0;}
.draft-studio > *{width:min(1240px,100%);margin-left:auto;margin-right:auto;}
.ds-head{margin-bottom:18px;}
.ds-step{padding-bottom:8px;}
.ds-head{display:flex;align-items:flex-start;gap:18px;}
.ds-headline{flex:1;min-width:0;}
.ds-kicker{font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:var(--track);text-transform:uppercase;color:var(--gold);}
.ds-title{font:600 var(--fs-2xl)/1.15 var(--serif);color:var(--ink);margin:6px 0 4px;}
.ds-sub{font-size:var(--fs-md);color:var(--muted);max-width:60ch;}
.ds-close{position:static;}
.ds-crumbs{display:flex;align-items:center;gap:8px;margin-top:8px;flex:0 0 auto;}
.ds-crumb{font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;transition:color var(--dur-2) var(--ease);}
.ds-crumb.on{color:var(--gold);}
.ds-crumb-line{width:26px;height:1px;background:var(--hair);}
.ds-step{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start;}
.ds-step > .ds-foot{grid-column:1 / -1;}
.ds-main{min-width:0;}
.ds-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:14px;}
.ds-side-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm);}
.ds-adv{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 16px;}
.ds-adv summary{cursor:pointer;font:600 var(--fs-sm)/1.4 var(--sans);color:var(--body);
  display:flex;align-items:center;gap:8px;list-style:none;}
.ds-adv summary::-webkit-details-marker{display:none;}
.ds-adv[open] summary{margin-bottom:8px;}
.ds-foot{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:14px;
  justify-content:flex-end;padding:14px 0 18px;border-top:1px solid var(--line2);margin-top:8px;
  background:linear-gradient(to top,var(--bg) 72%,transparent);}
.ds-foot .btn-ghost{margin-right:auto;}
.ds-foot-note{font-size:var(--fs-sm);color:var(--muted);}
.ds-search-row{margin-bottom:14px;}
.ds-search{width:100%;max-width:420px;}
.ds-cat{font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--faint);margin:18px 0 10px;}
.ds-cat:first-child{margin-top:0;}
.ds-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.ds-card{position:relative;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:13px 14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);}
.ds-card:hover{transform:translateY(-2px);border-color:var(--hair);box-shadow:var(--shadow);}
.ds-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow);}
.ds-card.sel::after{content:"✓";position:absolute;top:10px;right:12px;color:var(--gold);font-weight:700;}
.ds-card-name{font:600 var(--fs-md)/1.3 var(--sans);color:var(--ink);}
.ds-card-desc{font-size:var(--fs-xs);line-height:1.45;color:var(--muted);}
.ds-card-needs{font-size:var(--fs-2xs);color:var(--faint);border-top:1px dashed var(--line2);padding-top:6px;}
.ds-card-custom{border-style:dashed;}
.ds-custom-name{margin-top:2px;}
.ds-record{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-lg);
  padding:12px 14px;border:1px solid var(--line);background:var(--surface-2);}
.ds-record.grounded{border-color:var(--ok-line);background:var(--ok-bg);}
.ds-record .gp-ico{color:var(--gold);}
.ds-record .gp-line{font-size:var(--fs-sm);color:var(--body);}
.ds-record .gp-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;}
.ds-record .gp-files{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;}
.ds-record .btn{margin-top:8px;}
/* outline */
.ds-plan-head{margin-bottom:10px;}
.ds-plan-sub{font-size:var(--fs-sm);color:var(--muted);margin-top:4px;max-width:64ch;}
.ds-outline{list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:dsec;}
.ds-sec{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:9px 12px;counter-increment:dsec;transition:box-shadow var(--dur-2) var(--ease),opacity var(--dur-2) var(--ease);}
.ds-sec::before{content:counter(dsec,decimal-leading-zero);font:600 var(--fs-2xs)/1 var(--mono);color:var(--faint);width:20px;}
.ds-sec.dragging{opacity:.55;box-shadow:var(--shadow-lg);}
.ds-sec.locked{background:var(--surface-2);}
.ds-grip{cursor:grab;color:var(--faint);letter-spacing:-2px;user-select:none;font-size:14px;}
.ds-sec-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ds-sec-label{border:0;background:transparent;font:600 var(--fs-md)/1.3 var(--sans);color:var(--ink);
  padding:0;width:100%;outline:none;}
.ds-sec-note{border:0;background:transparent;font-size:var(--fs-xs);color:var(--muted);padding:0;width:100%;outline:none;}
.ds-sec-label:focus,.ds-sec-note:focus{box-shadow:inset 0 -1px 0 var(--gold);}
.ds-sec input[readonly]{pointer-events:none;}
.ds-lock{font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  border-radius:var(--r-pill);padding:4px 9px;white-space:nowrap;}
.ds-sec-x{border:0;background:transparent;color:var(--faint);cursor:pointer;border-radius:var(--r-xs);
  padding:4px 7px;font-size:var(--fs-sm);}
.ds-sec-x:hover{color:var(--bad);background:var(--bad-bg);}
.ds-sec-none{font-size:var(--fs-sm);color:var(--muted);background:var(--surface-2);
  border:1px dashed var(--line);border-radius:var(--r-md);padding:16px;}
.ds-add-sec{margin-top:10px;}
/* questions */
.ds-questions{display:flex;flex-direction:column;gap:10px;max-height:44vh;overflow:auto;}
.ds-q-ask{font-size:var(--fs-sm);color:var(--body);display:block;margin-bottom:4px;}
.ds-q-crit{color:var(--amber);font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-left:6px;}
.ds-q-src{color:var(--ok);font-size:var(--fs-2xs);margin-left:6px;}
.ds-q.from-record .field{border-color:var(--ok-line);background:var(--ok-bg);}
@media (max-width:960px){
  .ds-step{grid-template-columns:1fr;}
  .ds-side{position:static;}
  .draft-studio{padding:18px 16px 90px;}
}

/* ---- generation dock — live pipeline progress -------------------------- */
.gen-dock{position:fixed;right:22px;bottom:22px;z-index:60;width:min(330px,calc(100vw - 32px));
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.gd-head{display:flex;align-items:center;gap:9px;}
.gd-pulse{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--accent-glow);
  animation:gdPulse 1.6s var(--ease) infinite;}
@keyframes gdPulse{0%{box-shadow:0 0 0 0 var(--accent-glow);}70%{box-shadow:0 0 0 9px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.gd-title{flex:1;font:600 var(--fs-sm)/1.35 var(--sans);color:var(--ink);min-width:0;}
.gd-sections{list-style:none;display:flex;flex-direction:column;gap:5px;max-height:38vh;overflow:auto;}
.gd-sec{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);color:var(--muted);}
.gd-dot{width:7px;height:7px;border-radius:50%;border:1.5px solid var(--faint);flex:0 0 auto;transition:all var(--dur-2) var(--ease);}
.gd-sec.run{color:var(--ink);}
.gd-sec.run .gd-dot{border-color:var(--gold);background:var(--gold);animation:gdPulse 1.4s var(--ease) infinite;}
.gd-sec.done{color:var(--body);}
.gd-sec.done .gd-dot{border-color:var(--ok);background:var(--ok);}
.gd-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gd-exact{font:600 9px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:var(--r-pill);padding:2.5px 6px;}
.gd-foot{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line2);padding-top:8px;}
.gd-note{font-size:var(--fs-xs);color:var(--muted);line-height:1.45;}
.gd-usage{font:500 var(--fs-2xs)/1.4 var(--mono);color:var(--faint);}
.gen-tail{opacity:.75;}
.gen-tail::after{content:"▍";color:var(--gold);animation:tailBlink 1s steps(2) infinite;}
@keyframes tailBlink{50%{opacity:0;}}

/* ---- rail: matter-scoped context label + the gold Draft hero ------------ */
.rail-ctx{display:block;font:600 9px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);text-align:center;padding:2px 4px 6px;max-width:64px;margin:0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rail-ctx.live{color:var(--gold);}
.rb-draft .rb-ico{color:var(--gold);}
.rb-draft.on .rb-ico,.rb-draft:hover .rb-ico{color:var(--gold);}
.rb-draft .rb-mini{color:var(--gold);}

/* ---- history menu (version snapshots) ----------------------------------- */
.history-menu{min-width:290px;max-height:340px;overflow:auto;padding:6px;}
.hist-row{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:var(--r-sm);}
.hist-row:hover{background:var(--surface-2);}
.hist-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.hist-main b{font:600 var(--fs-sm)/1.3 var(--sans);color:var(--ink);}
.hist-meta{font-size:var(--fs-2xs);color:var(--faint);}
.hist-empty{padding:12px;font-size:var(--fs-sm);color:var(--muted);}

/* ---- "Edit…" instruction popover ---------------------------------------- */
.sel-instruct{position:fixed;z-index:70;display:flex;gap:8px;align-items:center;width:min(430px,calc(100vw - 24px));
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:8px;}
.sel-instruct .field{flex:1;min-width:0;}


/* ---- "Any other document" — pinned first, never hidden ------------------- */
.ds-card-any{grid-column:1 / -1;flex-direction:row;align-items:center;gap:16px;
  border-style:dashed;border-color:color-mix(in srgb,var(--gold) 45%,transparent);}
.ds-card-any .ds-any-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.ds-card-any .ds-custom-name{max-width:340px;}
.ds-cards-any{display:grid;margin-bottom:16px;}

/* ---- THE MATTER WORKBENCH — every tool here acts on THIS matter ---------- */
.matter-bench{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;
  margin:16px 0 22px;}
.mb-tool{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:13px 15px;cursor:pointer;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);}
.mb-tool:hover{transform:translateY(-2px);border-color:var(--hair);box-shadow:var(--shadow);}
.mb-tool .mbt-ico{width:20px;height:20px;color:var(--muted);}
.mb-tool .mbt-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.mb-tool b{font:600 var(--fs-md)/1.2 var(--sans);color:var(--ink);}
.mb-tool span{font-size:var(--fs-xs);color:var(--muted);line-height:1.4;}
.mb-primary{border-color:color-mix(in srgb,var(--gold) 50%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 9%,var(--surface)),var(--surface));}
.mb-primary .mbt-ico,.mb-primary b{color:var(--gold);}
.mb-primary:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow);}

/* matter-seeded research suggestions */
.research-seeds{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px;}
.research-seeds .rs-label{font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-right:2px;}
.rs-chip{border:1px solid var(--line);background:var(--surface-2);color:var(--body);
  border-radius:var(--r-pill);padding:5px 11px;font-size:var(--fs-xs);cursor:pointer;
  transition:border-color var(--dur-1) var(--ease);max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.rs-chip:hover{border-color:var(--gold);color:var(--ink);}


/* ---- analysis lifecycle states ------------------------------------------ */
.dfind{transition:opacity var(--dur-2) var(--ease)}
.dfind.busy{opacity:.65;pointer-events:none}
.dfind.resolved{opacity:.66}
.dfind.resolved .d-note{text-decoration:line-through;text-decoration-color:var(--faint)}
.dfind.stale .d-note{color:var(--warn)}
.d-done{color:var(--ok);font-size:var(--fs-xs);font-weight:600}
.d-stale{color:var(--warn);font-size:var(--fs-xs)}
.d-dismiss,.d-reopen,.d-reanalyze{border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:var(--r-pill);padding:4px 10px;font-size:var(--fs-2xs);cursor:pointer;
  transition:color var(--dur-1),border-color var(--dur-1)}
.d-dismiss:hover,.d-reopen:hover,.d-reanalyze:hover{color:var(--ink);border-color:var(--hair)}
.d-improve[disabled]{opacity:.7;cursor:progress}
.d-allclear{font-size:var(--fs-sm);color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-line);
  border-radius:var(--r-md);padding:11px 13px}
.d-addressed{margin-top:10px;border-top:1px dashed var(--line2);padding-top:8px}
.d-addressed summary{cursor:pointer;font:600 var(--fs-2xs)/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);list-style:none;padding:4px 0}
.d-addressed summary::-webkit-details-marker{display:none}
.d-addressed summary:hover{color:var(--muted)}
.drafting-sec.loading .sk-card{margin-top:8px}

/* ---- studio record panel: loading + embedded brief ----------------------- */
.ds-record.loading{border-style:dashed}
.rec-spin{display:inline-block;animation:recSpin 1s linear infinite}
@keyframes recSpin{to{transform:rotate(360deg)}}
.ds-record .sk-line{height:9px;border-radius:5px;background:var(--surface-3);
  animation:skPulse 1.3s ease-in-out infinite;margin-top:6px}
@keyframes skPulse{0%,100%{opacity:.55}50%{opacity:1}}
.ds-record-brief{margin-top:12px;display:flex;flex-direction:column;gap:14px;
  border-top:1px dashed var(--line2);padding-top:12px;max-height:44vh;overflow:auto}
.ds-brief-block #dsBrief{display:flex;flex-direction:column;gap:12px;max-height:34vh;overflow:auto}
.gb-more{font-size:var(--fs-2xs);color:var(--faint);padding-top:4px}