/* ─────────────────────────────────────────────────────────────────────────
   SUSTENZA ASSISTANT PAGE — sidebar of conversations + chat column.
   Tokens come from the site; fallbacks match the brand sheet so the page
   holds even if mounted somewhere the variables are missing.
   ───────────────────────────────────────────────────────────────────────── */

.szas{
  /* The first track is auto, not 280px, so it takes its size from the rail.
     That is what lets the rail COLLAPSE: a fixed track cannot be animated
     here - transitioning grid-template-columns silently refused to run in
     this browser and left the property pinned at its old value, while width
     on the rail itself transitions everywhere. See the collapse block. */
  display:grid; grid-template-columns:auto minmax(0,1fr);
  /* The ROW has to be constrained too. With no grid-template-rows the single
     implicit row is auto-sized to its content, so the children stayed 5,042px
     tall while the panel clipped them at 483 - min-height:0 on the children
     cannot help when the track itself is the thing that grew. minmax(0,1fr)
     pins the row to the panel and lets the panes scroll inside it. */
  grid-template-rows:minmax(0,1fr);
  /* Fill the pane, which already excludes the site header. Subtracting
     --nav-h here as well took it off twice and left exactly that much dead
     space under the composer (measured: 71px of --nav-h, 71px of gap). The
     fallback keeps the old behaviour if this is ever mounted outside the
     workspace, where nothing else constrains the height. */
  height:100%;
  max-height:calc(100dvh - var(--nav-h,66px));
  min-height:0;
  overflow:hidden;
  background:var(--paper,#F5F6F2);
}
/* Grid and flex children refuse to shrink below their content unless told to,
   which is the other half of why the inner panes would not scroll. */
.szas__side, .szas__main{min-height:0;}

/* ---- sidebar ---- */
.szas__side{
  width:280px;
  border-right:1px solid var(--hairline,#DCE1DB);
  display:flex; flex-direction:column; gap:10px;
  padding:14px 12px; background:var(--paper,#F5F6F2);
  overflow:hidden;              /* the rail itself never scrolls */
}
/* Only the conversation list scrolls, so the mark and "New conversation"
   stay reachable however long the history gets. */
.szas__side>*{flex:none;}
.szas__side .szas__threads{flex:1 1 auto; min-height:0; overflow-y:auto;}
.szas__new{
  border:1px solid var(--hairline,#DCE1DB); background:var(--surface,#FFF);
  color:var(--ink,#112C28); border-radius:var(--r-sm,8px);
  padding:10px 12px; font:600 13px/1.4 inherit; cursor:pointer; text-align:left;
}
.szas__new:hover{border-color:var(--ink,#112C28);}
.szas__threads{display:flex; flex-direction:column; gap:4px;}
.szas__thread{
  position:relative; display:flex; flex-direction:column; gap:2px;
  border-radius:var(--r-sm,8px); padding:9px 64px 9px 11px; cursor:pointer;
}
.szas__thread:hover{background:var(--surface,#FFF);}
.szas__thread.is-active{background:var(--surface,#FFF);
  box-shadow:var(--shadow-sm,0 1px 2px rgba(17,44,40,.06));}
.szas__thread-t{font-size:12.5px; color:var(--ink,#112C28);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.szas__thread-when{font-size:10.5px; color:var(--muted,#3C4843);}
.szas__thread-acts{position:absolute; right:6px; top:8px; display:none; gap:2px;}
.szas__thread:hover .szas__thread-acts{display:flex;}
.szas__thread-acts button{
  border:0; background:transparent; color:var(--muted,#3C4843);
  cursor:pointer; font-size:12px; padding:2px 5px; border-radius:4px;
}
.szas__thread-acts button:hover{background:var(--paper,#F5F6F2); color:var(--ink,#112C28);}
.szas__thread.is-armed .szas__thread-acts{display:flex;}
.szas__thread.is-armed [data-del]{color:#B0453A; font-weight:600;}

/* ---- main column ---- */
.szas__main{display:flex; flex-direction:column; min-width:0; min-height:0; max-height:100%;}
.szas__head{
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-bottom:1px solid var(--hairline,#DCE1DB);
  background:var(--surface,#FFF);
}
/* Shown at every width now: narrow it opens the drawer, wide it collapses
   the column. It was display:none above the breakpoint back when the rail
   was permanent. */
.szas__burger{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; min-height:28px;
  border:1px solid var(--hairline,#DCE1DB);
  background:transparent; border-radius:6px; padding:4px 9px; cursor:pointer;
  color:var(--muted,#3C4843); font-size:13px; line-height:1;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.szas__burger:hover{background:var(--surface-2,#FAFBF7); color:var(--ink,#112C28);}
.szas__burger:focus-visible{outline:2px solid var(--verified,#1C7A55); outline-offset:1px;}
.szas__title{font-weight:700; color:var(--ink,#112C28); letter-spacing:.01em;}
.szas__status{
  margin-left:auto; font:500 10px/1.5 var(--mono,ui-monospace,Consolas,monospace);
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted,#3C4843);
  text-align:right; max-width:46ch;
}

.szas__scroll{
  /* min-height:0 is doing the real work. A flex child defaults to
     min-height:auto, which refuses to shrink below its own content, so this
     grew to the height of the whole thread (measured: 4,917px inside a 483px
     panel), pushed the composer off the bottom, and left overflow-y:auto with
     nothing to overflow. The scroll only happens once the box is allowed to
     be smaller than what it holds. */
  flex:1 1 auto; min-height:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:22px clamp(14px,4vw,40px);
  display:flex; flex-direction:column; gap:14px;
}
.szas__turn{display:flex; flex-direction:column; gap:6px; max-width:760px;}
.szas__msg{max-width:760px; border-radius:var(--r-lg,16px);
  padding:12px 15px; font-size:13.5px; line-height:1.62;}
/* The reader's own question, inverted against the conversation.
   THE TEXT IS A TOKEN, NOT A LITERAL. --ink flips to near-white in the dark
   theme, so a hardcoded pale text colour put pale on pale: measured 1.01:1,
   which is the reader's own question rendered invisible. --paper flips the
   other way, so the pair stays inverted in both themes by construction
   rather than by luck. */
.szas__msg--you{align-self:flex-end; background:var(--ink,#112C28);
  color:var(--paper,#F5F6F2); border-bottom-right-radius:2px;}
.szas__msg--sz{align-self:flex-start; background:var(--surface,#FFF);
  border:1px solid var(--hairline,#DCE1DB); border-bottom-left-radius:2px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(17,44,40,.06));}

/* Answer-source tags — same register as the docked panel; GROUNDED is the
   engine's alone. */
.szas__tag{
  margin-top:9px; padding-top:7px; border-top:1px solid var(--hairline,#DCE1DB);
  font:600 9.5px/1.5 var(--mono,ui-monospace,Consolas,monospace);
  letter-spacing:.09em; text-transform:uppercase;
}
.szas__tag--local{color:var(--muted,#3C4843);}

.szas__cites{list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;}
.szas__cites li{
  background:var(--surface,#FFF); border:1px solid var(--hairline,#DCE1DB);
  border-radius:var(--r-sm,8px); padding:8px 12px;
  font:400 11px/1.6 var(--mono,ui-monospace,Consolas,monospace);
  color:var(--ink,#112C28);
}
.szas__cite-eyebrow{display:block; font-size:9px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted,#3C4843);
  margin-bottom:3px;}

/* ---- empty state ---- */
.szas__empty{margin:auto; text-align:center; max-width:520px; padding:30px 10px;}
.szas__empty h2{color:var(--ink,#112C28); font-size:20px; margin:0 0 8px;}
.szas__empty p{color:var(--muted,#3C4843); font-size:13px; margin:0 0 18px;}
.szas__chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.szas__chip{
  border:1px solid var(--hairline,#DCE1DB); background:var(--surface,#FFF);
  color:var(--ink,#112C28); border-radius:999px; padding:8px 14px;
  font-size:12px; cursor:pointer;
}
.szas__chip:hover{border-color:var(--verified,#1C7A55); color:var(--verified,#1C7A55);}

/* ---- composer ---- */
.szas__ask{
  display:flex; gap:9px; align-items:flex-end;
  padding:12px clamp(14px,4vw,40px) 16px;
  border-top:1px solid var(--hairline,#DCE1DB); background:var(--surface,#FFF);
}
.szas__ask textarea{
  flex:1; resize:none; border:1px solid var(--hairline,#DCE1DB);
  border-radius:var(--r-md,12px); padding:11px 13px; font:inherit;
  font-size:13.5px; line-height:1.5; background:var(--paper,#F5F6F2);
  color:var(--ink,#112C28); min-height:44px; max-height:150px;
}
.szas__ask textarea:focus{outline:2px solid var(--verified,#1C7A55); outline-offset:1px;}
/* [type="submit"], not `button`: the row holds TWO buttons now - Ask and the
   scope trigger - and this rule is about Ask. Unqualified it also matched the
   trigger, at a higher specificity than .szas__scopepill, and painted it
   --ink; in the light theme that was a near-black pill carrying green text at
   2.8:1, which fails AA and looked like a mistake because it was one. */
/* NOTE: every `.szas__ask button` selector in this file is qualified
   [type="submit"]. The composer row holds two buttons now - Ask, and the
   scope trigger - and an unqualified rule here paints the trigger as well.
   It did: the trigger came out --ink on --ink in the light theme, text
   invisible against its own background. */
.szas__ask button[type="submit"]{
  border:0; background:var(--ink,#112C28); color:#EEF2ED;
  border-radius:var(--r-md,12px); padding:12px 20px;
  font-family:inherit; font-size:13px; font-weight:600; line-height:1;
  cursor:pointer; min-height:44px;
}
.szas__ask button[type="submit"]:disabled{opacity:.55; cursor:default;}

/* ---- "Search in": the scope control ------------------------------------
   IN the composer row, not above it. It changes what the next question means,
   so it belongs beside the question - and a control on its own line above the
   ask box spent a whole row of a small screen on a setting most readers never
   touch.

   Open, it is a popover that rises out of that row. That direction is the
   point: opening downward would have nowhere to go, and opening in place
   would push the answer - the thing they came for - off the top. */
.szas__composer{position:relative;}
.szas__depth{display:flex;align-items:center;flex:0 0 auto;margin:0;padding:0;font:inherit;font-size:12px;color:var(--ink,#112C28);}

/* A KEYCAP. Every button in this control is drawn the same way - a lit top
   edge, a hard lower lip one pixel below the face, a soft drop under that -
   so it reads as a raised thing you press rather than a flat label. Pressing
   drops it onto the lip. Colours are the ones the page already has. */
.szas__scopepill{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  border:1px solid var(--hairline,#DCE1DB); border-radius:var(--r-md,12px);
  padding:0 11px; cursor:pointer; color:var(--ink,#112C28);
  font-family:inherit; font-size:12px; font-weight:500; line-height:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    var(--paper,#F5F6F2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 0 rgba(17,44,40,.10),
    0 5px 9px -4px rgba(17,44,40,.22);
  transition:transform .14s var(--ease,ease), box-shadow .14s var(--ease,ease),
             border-color .14s var(--ease,ease), color .14s var(--ease,ease);
  /* Matches the textarea and the Ask button, so the row has one baseline. */
  min-height:44px; max-width:44%;
}
.szas__scopepill:hover{
  border-color:var(--verified,#1C7A55); color:var(--verified,#1C7A55);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 3px 0 rgba(17,44,40,.11),
    0 8px 12px -5px rgba(17,44,40,.26);
}
.szas__scopepill:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 4px rgba(17,44,40,.2), 0 0 0 rgba(17,44,40,0);
}
.szas__scopepill:focus-visible{outline:2px solid var(--verified,#1C7A55); outline-offset:2px;}
/* A narrowed search is a state worth seeing without reading: the trigger
   carries the accent while it is anything other than everything. */
.szas__scopepill.is-set{
  border-color:var(--verified,#1C7A55); color:var(--verified,#1C7A55);
}
.szas__scopeval{
  font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.szas__scopeico{width:15px; height:15px; flex:none;}
.szas__scopearw{width:13px; height:13px; flex:none; opacity:.7; transition:transform .18s ease;}
.szas__scopepill[aria-expanded="true"] .szas__scopearw{transform:rotate(180deg);}

/* ---- the panel ---- */
.szas__scopepanel{
  position:absolute; z-index:5;
  left:clamp(14px,4vw,40px); right:clamp(14px,4vw,40px); bottom:calc(100% - 10px);
  border:1px solid var(--hairline,#DCE1DB); border-radius:var(--r-md,12px);
  padding:8px 9px 9px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
    var(--surface,#FFF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 10px 28px rgba(17,44,40,.14);
}
.szas__scopepanel[hidden]{display:none;}
.szas__scopehead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:6px;
}
/* Small on purpose: this is a label for the grid, not a heading. */
.szas__scopehead p{
  margin:0; font-family:inherit; font-size:9px; font-weight:700; line-height:1;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted,#3C4843);
}
.szas__scopex{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; cursor:pointer;
  border:1px solid transparent; border-radius:var(--r-sm,9px);
  background:transparent; color:var(--muted,#3C4843);
}
.szas__scopex svg{width:14px; height:14px;}
.szas__scopex:hover{background:var(--paper,#F5F6F2); color:var(--ink,#112C28);}
.szas__scopex:focus-visible{outline:2px solid var(--verified,#1C7A55); outline-offset:2px;}

/* auto-fit, so a narrow pane reflows to fewer columns instead of overflowing.
   140px is the width of the longest label at this size without wrapping. */
.szas__scopegrid{
  display:grid; gap:6px 6px;
  /* Labels wrap rather than clip, so the track no longer has to fit the
     longest name on one line. 150px keeps six across a wide pane and
     reflows down gracefully. */
  grid-template-columns:repeat(auto-fit,minmax(136px,1fr));
}
.szas__scopeopt{
  display:flex; align-items:center; gap:7px; text-align:left;
  padding:6px 9px; border-radius:var(--r-sm,9px); min-height:34px;
  border:1px solid var(--hairline,#DCE1DB); cursor:pointer;
  color:var(--ink,#112C28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    var(--paper,#F5F6F2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 0 rgba(17,44,40,.09),
    0 4px 7px -3px rgba(17,44,40,.2);
  transition:transform .14s var(--ease,ease), box-shadow .14s var(--ease,ease),
             border-color .14s var(--ease,ease), color .14s var(--ease,ease),
             background .14s var(--ease,ease);
}
.szas__scopeopt:hover{
  border-color:var(--verified,#1C7A55); color:var(--verified,#1C7A55);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 3px 0 rgba(17,44,40,.10),
    0 7px 10px -4px rgba(17,44,40,.24);
}
.szas__scopeopt:active{
  transform:translateY(2px);
  box-shadow:inset 0 2px 4px rgba(17,44,40,.2), 0 0 0 rgba(17,44,40,0);
}
/* PICKED = a key that has been pressed and stays down: sunk onto its lip,
   lit green from inside. It does not lift on hover - it is already the thing
   that is chosen. */
.szas__scopeopt.is-on{
  border-color:var(--verified,#1C7A55); color:var(--verified,#1C7A55);
  background:
    linear-gradient(180deg, rgba(28,122,85,.14), rgba(28,122,85,.05)),
    var(--surface,#FFF);
  transform:translateY(2px);
  box-shadow:inset 0 2px 4px rgba(28,122,85,.28), inset 0 0 0 1px var(--verified,#1C7A55);
}
/* The checkbox still carries the state and is still what a screen reader
   announces - it is simply not what a sighted reader looks at, because the
   chip already says on or off twice over, in colour AND in the tick. */
.szas__scopeopt input{
  position:absolute; width:1px; height:1px; margin:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.szas__scopeopt input:focus-visible + .szas__scopeico{
  outline:2px solid var(--verified,#1C7A55); outline-offset:3px; border-radius:3px;
}
.szas__scopeopt .szas__scopeico{width:15px; height:15px; flex:none;}
/* WRAPS, never ellipsis. "Used oil & hazardous waste" does not fit one line
   at any column width that still gives a tidy grid, and half a stream's name
   on a control whose whole job is picking the right stream is the one thing
   it must not do. Two lines cost a few pixels; a hidden name costs a wrong
   search. */
.szas__scopename{
  font-family:inherit; font-size:11.5px; font-weight:600; line-height:1.25;
  white-space:normal;
}
/* Colour is never the only signal: a picked chip also carries a tick. */
.szas__scopeopt.is-on::after{
  content:""; flex:none; width:12px; height:12px; margin-left:auto;
  background:var(--verified,#1C7A55);
  -webkit-mask:var(--sz-tick) center/11px 11px no-repeat;
  mask:var(--sz-tick) center/11px 11px no-repeat;
}
.szas__scopepanel{
  --sz-tick:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

/* On a phone the row is tight: the trigger keeps its icon and drops its
   words, which the aria-label still carries. */
@media (max-width:460px){
  .szas__scopepill{max-width:none; padding:0 10px; gap:5px;}
  .szas__scopeval{display:none;}
  .szas__scopegrid{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));}
}

@media (prefers-reduced-motion:reduce){
  .szas__scopepill, .szas__scopeopt, .szas__scopearw{transition:none;}
  .szas__scopepill:hover, .szas__scopeopt:hover{transform:none;}
}

/* Which streams answered — shown only when the reader narrowed the search;
   under General it would be a line of noise on every answer. */
/* The caution on an answer about penalties or an interpretation, and the
   standing note under the composer: quiet, never alarming, always readable. */
.szas__disc{
  margin:10px 0 0; padding:8px 10px; border-left:2px solid var(--gold,#B8882F);
  font-family:inherit; font-size:12px; line-height:1.5; color:var(--muted,#3C4843);
}
.szas__fine{
  margin:6px 2px 0; font-family:inherit; font-size:11px; line-height:1.45;
  color:var(--muted,#3C4843); text-align:center;
}
.szas__answered{
  margin:10px 0 0; font-family:inherit; font-size:10.5px; font-weight:500; line-height:1.4;
  color:var(--muted,#3C4843); letter-spacing:.02em;
}

/* The scope is why there is no answer. The way out is a button, not advice:
   a reader should not have to work out that widening is even possible. */
.szas__widen{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:9px 0 0; padding:10px 12px;
  border:1px solid var(--hairline,#DCE1DB);
  border-left:3px solid var(--verified,#1C7A55);
  border-radius:var(--r-sm,9px); background:var(--paper,#F5F6F2);
}
.szas__widen p{
  margin:0; font-family:inherit; font-size:11.5px; font-weight:400; line-height:1.45;
  color:var(--muted,#3C4843); flex:1 1 180px;
}
.szas__widenbtn{
  border:1px solid var(--verified,#1C7A55); background:transparent;
  color:var(--verified,#1C7A55); border-radius:999px; padding:7px 14px;
  font-family:inherit; font-size:11.5px; font-weight:600; line-height:1;
  cursor:pointer; min-height:34px;
}
.szas__widenbtn:hover{background:var(--verified,#1C7A55); color:#FFF;}
.szas__widenbtn:focus-visible{outline:2px solid var(--verified,#1C7A55); outline-offset:2px;}

/* The Assistant's advice: its own card under the answer, labelled. A
   suggestion tied to a provision wears the verified edge; general guidance,
   which is not from the rules, is quieter still - dashed, no accent. */
.szas__adv{
  margin:10px 0 0; padding:11px 13px; border:1px solid var(--hairline,#DCE1DB);
  border-left:3px solid var(--verified,#1C7A55); border-radius:var(--r-sm,9px);
  background:var(--surface,#FFF);
}
.szas__adv--general{border:1px dashed var(--hairline,#DCE1DB); background:var(--paper,#F5F6F2);}
.szas__advh{
  margin:0 0 6px; font-family:inherit; font-size:11px; font-weight:600; line-height:1.4;
  letter-spacing:.02em; color:var(--muted,#3C4843);
}
.szas__adv ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;}
.szas__adv li{font-family:inherit; font-size:13px; line-height:1.55; color:var(--ink,#112C28);}
.szas__adv--general li{color:var(--muted,#3C4843);}
.szas__advsrc{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;}
.szas__advsrc span{
  padding:2px 8px; border-radius:999px; border:1px solid var(--hairline,#DCE1DB);
  font-size:10.5px; line-height:1.5; color:var(--muted,#3C4843);
}
.szas__consult{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:9px 0 0;
}
.szas__consult p{margin:0; font-family:inherit; font-size:12px; line-height:1.45; color:var(--muted,#3C4843);}
.wsp[data-theme="dark"] .szas__adv{background:var(--surface); border-color:var(--hairline);}
.wsp[data-theme="dark"] .szas__adv--general{background:transparent;}

/* While the engine works: one line, updated in place, and the sources it
   is reading as small chips. The dot breathes; with reduced motion it holds. */
.szas__stage{display:flex; flex-direction:column; gap:8px; padding:12px 14px;}
.szas__stage p{
  margin:0; display:flex; align-items:center; gap:9px; font-family:inherit; font-size:13px;
  line-height:1.45; color:var(--muted,#3C4843);
}
.szas__stagedot{
  flex:none; width:8px; height:8px; border-radius:50%; background:var(--verified,#1C7A55);
  animation:szasBlink 1.2s infinite;
}
/* "🔍 Searching N regulator documents…" is set apart from the stages after
   it: its own pill, in ink rather than the muted progress grey
   (owner, 28 Sept 2026). */
.szas__stagetxt--search{
  padding:5px 11px; border-radius:999px; border:1px solid var(--hairline,#E3E7E2);
  background:var(--verified-soft,#E7F1EA); color:var(--ink,#112C28); font-weight:600;
}
.szas__stagesrc{display:flex; flex-wrap:wrap; gap:5px;}
.szas__stagesrc[hidden]{display:none;}
.szas__stagesrc span{max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.szas__stagesrc span{
  padding:2px 9px; border-radius:999px; border:1px solid var(--hairline,#DCE1DB);
  font-family:inherit; font-size:11px; line-height:1.6; color:var(--muted,#3C4843);
}
.szas__stage{gap:12px; padding:18px 20px; border-color:var(--verified,#1C7A55);}
.szas__stage .szas__stagetxt{font-weight:600; color:var(--ink,#112C28);}
.szas__stage .szas__waitdetail,.szas__stage .szas__waitlong{
  display:block; font-size:12px; line-height:1.55; margin:0;
}
.szas__stage .szas__waitlong[hidden]{display:none;}
.szas__waitsteps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.szas__waitsteps>span{display:flex; align-items:center; gap:7px; padding:8px 9px;
  border:1px solid var(--hairline,#DCE1DB); border-radius:8px;
  color:var(--muted,#3C4843); font-size:11.5px; line-height:1.4;}
.szas__waitsteps i{width:6px; height:6px; flex:none; border-radius:50%; background:currentColor; opacity:.35;}
.szas__waitsteps .is-current{color:var(--ink,#112C28); background:var(--verified-soft,#E7F1EA); border-color:var(--verified,#1C7A55); font-weight:600;}
.szas__waitsteps .is-current i,.szas__waitsteps .is-done i{opacity:1; background:var(--verified,#1C7A55);}
.szas__waitpreview{display:grid; gap:9px; padding:4px 0;}
.szas__waitpreview span{height:7px; width:88%; border-radius:8px; background:var(--hairline,#DCE1DB); animation:szasWaitPulse 1.8s ease-in-out infinite;}
.szas__waitpreview span:nth-child(2){width:72%; animation-delay:.12s;}
.szas__waitpreview span:nth-child(3){width:52%; animation-delay:.24s;}
.szas__draftnote{margin:7px 0 0; color:var(--muted,#3C4843); font-size:11.5px; line-height:1.5;}
@keyframes szasWaitPulse{0%,100%{opacity:.45;}50%{opacity:.85;}}
@media (max-width:480px){
  .szas__stage{padding:15px 13px;}
  .szas__waitsteps{gap:5px;}
  .szas__waitsteps>span{padding:7px 6px; font-size:11px; gap:5px;}
}
@media (prefers-reduced-motion:reduce){.szas__waitpreview span{animation:none; opacity:.65;}}
@media (prefers-reduced-motion: reduce){ .szas__stagedot{animation:none;} }

/* ---- typing dots ---- */
.szas__typing{display:inline-flex; gap:5px; align-items:center; padding:14px 16px;}
.szas__typing span{width:6px; height:6px; border-radius:50%;
  background:var(--muted,#3C4843); animation:szasBlink 1.2s infinite;}
.szas__typing span:nth-child(2){animation-delay:.2s;}
.szas__typing span:nth-child(3){animation-delay:.4s;}
@keyframes szasBlink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .szas__typing span{animation:none; opacity:.6;}
}

/* ---- wide screens: the rail collapses to nothing ----
   WIDTH, not the grid track. The obvious version of this sets
   grid-template-columns to 0 and transitions it; the rule matched, the class
   was on the element and the media query was true, and the computed value
   stayed at 280px anyway - with the transition disabled the same rule
   resolved to 0px immediately, so the declaration was fine and the
   TRANSITION was what never ran. Sizing the track from the rail (auto) and
   animating the rail's own width sidesteps it and is supported everywhere.

   The padding and the border have to go with the width or the rail leaves
   about 25px of itself behind. overflow:hidden on the base rule is what
   keeps the brand mark and the list from spilling across the answer while
   the width closes. */
@media (min-width:761px){
  .szas__side{
    transition:width .22s cubic-bezier(.22,.61,.36,1),
               padding .22s cubic-bezier(.22,.61,.36,1),
               border-right-width .22s cubic-bezier(.22,.61,.36,1),
               visibility 0s;
  }
  .szas--side-collapsed .szas__side{
    width:0; padding-left:0; padding-right:0; border-right-width:0;
    /* held visible until the width has finished closing, and it is what
       takes the rail out of the tab order where inert is unsupported */
    visibility:hidden;
    transition:width .22s cubic-bezier(.22,.61,.36,1),
               padding .22s cubic-bezier(.22,.61,.36,1),
               border-right-width .22s cubic-bezier(.22,.61,.36,1),
               visibility 0s linear .22s;
  }
  @media (prefers-reduced-motion:reduce){
    .szas__side, .szas--side-collapsed .szas__side{transition:none;}
  }
}

/* ---- small screens: the sidebar becomes a drawer ---- */
@media (max-width:760px){
  .szas{grid-template-columns:1fr;}
  .szas__burger{display:inline-block;}
  .szas__side{
    /* width:auto, or the 280px above would beat the right inset and the
       drawer would stop being 74% of the pane */
    position:absolute; inset:0 26% 0 0; width:auto; z-index:5;
    box-shadow:var(--shadow-lg,0 10px 22px -6px rgba(17,44,40,.14));
    transform:translateX(-102%); transition:transform .18s ease;
  }
  .szas--side-open .szas__side{transform:none;}
  @media (prefers-reduced-motion:reduce){
    .szas__side{transition:none;}
  }
}

/* ── sources behind a disclosure ───────────────────────────────────────
   Closed by default: under a two-line reply a stack of citation cards is
   more furniture than answer. The count stays on the label, so a reader
   sees that sources exist without opening them. Native <details>, so
   keyboard and screen readers work without extra code. */
.szas__srcs{margin-top:10px;}
.szas__srcs>summary{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  list-style:none; user-select:none;
  font:560 11.5px/1 var(--sans,system-ui,sans-serif);
  color:var(--muted,#3C4843);
  background:var(--surface,#FFF);
  border:1px solid var(--hairline,#DCE1DB);
  border-radius:var(--r-sm,8px); padding:7px 11px;
}
.szas__srcs>summary::-webkit-details-marker{display:none;}
.szas__srcs>summary::marker{content:"";}
.szas__srcs>summary:hover{
  border-color:var(--verified,#1C7A55); color:var(--verified,#1C7A55);}
.szas__srcs>summary:focus-visible{
  outline:2px solid var(--verified,#1C7A55); outline-offset:2px;}
.szas__arw{flex:0 0 auto; transition:transform .18s ease;}
.szas__srcs[open] .szas__arw{transform:rotate(90deg);}
.szas__srcs-n{font-weight:400; opacity:.7;}
.szas__srcs .szas__cites{margin-top:8px;}

/* The caret exists only while an answer is being written out. */
.szas__body.is-writing::after{
  content:""; display:inline-block; width:2px; height:1em; margin-left:1px;
  vertical-align:-.15em; background:var(--verified,#1C7A55);
  animation:szas-caret 1s steps(1) infinite;
}
@keyframes szas-caret{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .szas__arw{transition:none;}
  .szas__body.is-writing::after{display:none;}
}


/* ═══════════════════════════════════════════════════════════════════════════
   THE ENGINE CONSOLE'S READING
   The assistant already had the bones of the console at :4032 — a rail of
   conversations, a thread, a composer. What it did not have was the part that
   does the work before a question is asked: a brand at the top of the rail,
   the library's state at the bottom of it, and an opening screen that says
   what the thing is rather than only inviting a question.
   ═══════════════════════════════════════════════════════════════════════════ */

.szas__brand{
  display:flex; align-items:center; gap:9px;
  padding:2px 4px 10px; margin-bottom:2px;
  border-bottom:1px solid var(--hairline,#DCE1DB);
}
.szas__brand img{width:34px; height:auto; flex:0 0 auto;}
.szas__brandt{display:flex; flex-direction:column; gap:1px; min-width:0;}
.szas__brandt b{font-size:14px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink,#112C28); line-height:1.15;}
.szas__brandt span{font-size:10px; color:var(--muted-2,#48524D); line-height:1.3;}

.szas__new{
  display:flex; align-items:center; gap:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 62%),
    var(--surface,#FFF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(17,44,40,.08);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease),
             border-color .16s var(--ease);
}
.szas__new span{font-size:15px; line-height:1; color:var(--verified,#1C7A55);}
.szas__new:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 5px 12px -3px rgba(17,44,40,.18);}
.szas__new:active{transform:translateY(0); box-shadow:inset 0 1px 3px rgba(17,44,40,.18);}

.szas__reclabel{
  margin:6px 0 -2px; padding:0 4px;
  font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2,#48524D);
}

/* The library's own state, where the console keeps it. Not a status badge on
   the conversation: what corpus is loaded is a property of the engine, and it
   is the same sentence whichever thread is open. */
.szas__foot{
  margin-top:auto; padding:10px 6px 2px;
  border-top:1px solid var(--hairline,#DCE1DB);
  font-size:10.5px; line-height:1.5; color:var(--muted-2,#48524D);
}

/* ---- the opening screen ---- */

.szas__empty{max-width:680px; padding:clamp(18px,4vh,44px) 10px; text-align:left;}
.szas__empty h2{
  font-size:clamp(21px,3.4vw,30px); line-height:1.18; letter-spacing:-.022em;
  margin:0 0 10px;
}
.szas__empty h2 em{font-style:normal; color:var(--verified,#1C7A55);}
.szas__empty p{font-size:14px; line-height:1.65; margin:0 0 20px; max-width:60ch;}

.szas__pillars{
  display:grid; gap:10px; margin:0 0 20px;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
}
.szas__pillar{
  display:flex; flex-direction:column; gap:5px;
  padding:13px 14px; border-radius:var(--r-md,12px);
  border:1px solid var(--hairline,#DCE1DB);
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 58%),
    var(--surface,#FFF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(17,44,40,.07);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.szas__pillar:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px -6px rgba(17,44,40,.2);
}
.szas__pillar b{font-size:12.5px; font-weight:600; color:var(--ink,#112C28);}
.szas__pillar span{font-size:11.5px; line-height:1.5; color:var(--muted,#3C4843);}

.szas__chips{justify-content:flex-start;}
.szas__chip{
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    var(--surface,#FFF);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(17,44,40,.07);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease),
             border-color .16s var(--ease), color .16s var(--ease);
}
.szas__chip:hover{transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 5px 12px -3px rgba(17,44,40,.18);}
.szas__chip:active{transform:translateY(0);}

/* ---- dark ----
   The workspace stamps data-theme on its own root, so these hang off that
   rather than off <html>: the marketing page behind stays light. */
.wsp[data-theme="dark"] .szas,
.wsp[data-theme="dark"] .szas__side{background:transparent;}
.wsp[data-theme="dark"] .szas__new,
.wsp[data-theme="dark"] .szas__pillar,
.wsp[data-theme="dark"] .szas__chip{
  background:
    linear-gradient(180deg, rgba(160,240,208,.06), rgba(0,0,0,0) 58%),
    var(--surface);
  box-shadow:inset 0 1px 0 rgba(180,255,222,.1), 0 1px 2px rgba(0,0,0,.45);
}
.wsp[data-theme="dark"] .szas__pillar:hover,
.wsp[data-theme="dark"] .szas__chip:hover,
.wsp[data-theme="dark"] .szas__new:hover{
  box-shadow:inset 0 1px 0 rgba(180,255,222,.16), 0 8px 20px -6px rgba(0,0,0,.7);
}
.wsp[data-theme="dark"] .szas__thread:hover,
.wsp[data-theme="dark"] .szas__thread.is-active{background:rgba(255,255,255,.05);}
.wsp[data-theme="dark"] .szas__ask{background:transparent;}
/* The scope control, in the dark. Same reasoning as the ask box above: the
   pill and the panel are surfaces on the page, not another colour laid over
   it, so they take the ground and earn their edges from the hairline. */
/* The scope control in the dark. The keycaps keep their shape - lit top
   edge, hard lip, drop - but the lip is now a DARK line and the light comes
   from a faint green rim, because a white highlight on a dark ground reads as
   fog rather than as an edge. */
.wsp[data-theme="dark"] .szas__scopepill,
.wsp[data-theme="dark"] .szas__scopeopt{
  border-color:var(--hairline);
  background:
    linear-gradient(180deg, rgba(160,240,208,.09), rgba(0,0,0,0) 62%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(180,255,222,.13),
    0 2px 0 rgba(0,0,0,.55),
    0 6px 10px -4px rgba(0,0,0,.6);
}
.wsp[data-theme="dark"] .szas__scopepill:hover,
.wsp[data-theme="dark"] .szas__scopeopt:hover{
  border-color:var(--verified,#1C7A55);
  box-shadow:
    inset 0 1px 0 rgba(180,255,222,.2),
    0 3px 0 rgba(0,0,0,.55),
    0 9px 14px -5px rgba(0,0,0,.65);
}
.wsp[data-theme="dark"] .szas__scopepill:active,
.wsp[data-theme="dark"] .szas__scopeopt:active{
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6), 0 0 0 rgba(0,0,0,0);
}
.wsp[data-theme="dark"] .szas__scopeopt.is-on{
  background:
    linear-gradient(180deg, rgba(160,240,208,.16), rgba(160,240,208,.06)),
    var(--surface);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), inset 0 0 0 1px var(--verified,#1C7A55);
}
.wsp[data-theme="dark"] .szas__widen{
  background:
    linear-gradient(180deg, rgba(160,240,208,.05), rgba(0,0,0,0) 58%),
    var(--surface);
  border-color:var(--hairline);
  box-shadow:inset 0 1px 0 rgba(180,255,222,.08);
}
/* The panel floats over the thread, so its lift comes from a shadow the dark
   ground can actually show. */
.wsp[data-theme="dark"] .szas__scopepanel{
  background:
    linear-gradient(180deg, rgba(160,240,208,.06), rgba(0,0,0,0) 58%),
    var(--surface);
  border-color:var(--hairline);
  box-shadow:inset 0 1px 0 rgba(180,255,222,.09), 0 14px 34px rgba(0,0,0,.55);
}
.wsp[data-theme="dark"] .szas__scopex:hover{background:rgba(255,255,255,.06);}
.wsp[data-theme="dark"] .szas__widenbtn:hover{color:#06231D;}
.wsp[data-theme="dark"] .szas__ask textarea{
  /* was a saturated teal gradient (#08201D -> #0B2521) that sat apart from
     every other surface. Now it is simply the ground, recessed - an input is
     a hole in the page, not another colour on it. */
  background:var(--paper); color:var(--ink);
  border-color:var(--hairline);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);
}

/* ─── DARK: the panels need elevation, not transparency ────────────────────
   The verbatim block and the reading card were inheriting a light-theme
   white and then being flattened to transparent in dark, so both sat at the
   same depth as the page and the whole column read as one grey field. With
   the ramp widened they can now be what they are: cards, a step above the
   ground, with an edge caught at the top the way a real surface catches
   light from above. */
.wsp[data-theme="dark"] .szas__verbatim,
.wsp[data-theme="dark"] .szas__pane--read{
  background:var(--surface);
  border-color:var(--hairline);
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.wsp[data-theme="dark"] .szas__vsum:hover{background:var(--surface-2);}
.wsp[data-theme="dark"] .szas__vn{
  background:rgba(63,200,148,.14); color:var(--verified);
}
.wsp[data-theme="dark"] .szas__provn{
  background:rgba(63,200,148,.12); border-color:rgba(63,200,148,.45);
}
/* The quote plate is already the brightest object in the column. In dark it
   is lifted a little and given a deeper shadow so it still reads as pressed
   into the page rather than pasted onto it. */
.wsp[data-theme="dark"] .szas__law{
  /* Darker again in dark mode, not lighter. On a near-black ground a bright
     plate glares; a deep one reads as lit from within, which is the effect
     the gloss is for. White measures 13.9:1 on the darkest stop. */
  background:linear-gradient(158deg,#125A3E 0%,#0B3E2A 48%,#062418 100%);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.9),
             0 3px 10px -3px rgba(0,0,0,.65),
             inset 0 1px 0 rgba(255,255,255,.24),
             inset 0 0 0 1px rgba(255,255,255,.06);
}
.wsp[data-theme="dark"] .szas__law--guide{
  background:linear-gradient(162deg,#2A3230 0%,#1F2523 100%);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.8),
             inset 0 1px 0 rgba(255,255,255,.12);
}
/* the user's own question: a filled slab in light, too heavy in dark */
.wsp[data-theme="dark"] .szas__msg--you{
  background:var(--surface-2); color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

@media (prefers-reduced-motion:reduce){
  .szas__new:hover,.szas__pillar:hover,.szas__chip:hover{transform:none;}
}

@media (max-width:760px){
  .szas__brand{padding-bottom:8px;}
  .szas__empty{padding-left:4px; padding-right:4px;}
}

/* The send button took background:--ink with a near-white label. In dark that
   token IS near-white, so the button became a white slab with invisible text.
   It gets its own colours rather than borrowing the text token. */
.szas__ask button[type="submit"]{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%),
    var(--ink,#112C28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 5px rgba(17,44,40,.24);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.szas__ask button[type="submit"]:hover:not(:disabled){transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 6px 14px -4px rgba(17,44,40,.4);}
.szas__ask button[type="submit"]:active:not(:disabled){transform:translateY(0);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3);}
.wsp[data-theme="dark"] .szas__ask button[type="submit"]{
  background:linear-gradient(180deg,#2A6558,#17423A);
  color:#EAF1EC;
  box-shadow:inset 0 1px 0 rgba(180,255,222,.18), 0 2px 6px rgba(0,0,0,.55);
}
@media (prefers-reduced-motion:reduce){
  .szas__ask button[type="submit"]:hover:not(:disabled){transform:none;}
}

/* ═══ THE ASSISTANT, LIT ═════════════════════════════════════
   Ported from a hero-banner component rather than installed as one: that is
   React + Tailwind + shadcn, this page is vanilla JS with its own stylesheet.
   What carries over is the MATERIAL SYSTEM - a lit ground with glass resting
   on it - and not the nav, the badge, the partner strip or its zinc palette.
   The colour is the product's green throughout; nothing here is orange.

   WHY THE FIRST ATTEMPT WAS INVISIBLE, because it is the whole lesson.
   A lit ground was added while the cards stayed OPAQUE. An opaque card must
   stay lighter than the ground behind it or the page inverts - cards read as
   holes, ground reads as fog - so the glow was capped at a 4/255 lift. Safe,
   and indistinguishable from no effect at all.

   The source component has no such cap because its cards are glass: it can
   put a photograph behind them and they still read, because they sit ON the
   light rather than competing with it. So the cards become glass here too,
   and only then can the ground actually be lit.

   The invariant moves with the material. For opaque surfaces the rule was
   "ground stays below surface". For glass it is TEXT CONTRAST THROUGH THE
   GLASS, measured over the BRIGHTEST part of the field - which is the thing
   that actually has to hold. Verified at 4.5:1 for body copy.
   ══════════════════════════════════════════════════════════════════════ */
.wsp[data-theme="dark"] .wsp__pane--assistant{
  position:relative;
  background:
    /* the key light, behind where the question gets asked */
    radial-gradient(90% 58% at 22% -4%, rgba(63,200,148,.13), transparent 60%),
    /* a cooler counter-light, so the field is not one even wash */
    radial-gradient(70% 50% at 86% 2%, rgba(96,168,255,.085), transparent 58%),
    /* warmth low and far off, to stop the foot going flat black */
    radial-gradient(85% 55% at 62% 104%, rgba(221,174,85,.05), transparent 62%),
    /* and the green returning under the composer */
    radial-gradient(110% 60% at 30% 112%, rgba(63,200,148,.07), transparent 60%),
    var(--paper);
  background-attachment:fixed;
}
/* The hero framed itself with ring-1 ring-black/30. The same idea turned
   inward - a vignette that keeps a large lit field from reading as a flat
   printed swatch, and pulls the eye to the middle where the words are. */
.wsp[data-theme="dark"] .wsp__pane--assistant::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  box-shadow:inset 0 0 160px 40px rgba(2,12,10,.55);
}
.wsp[data-theme="dark"] .szas{position:relative; z-index:1;}

/* ---- glass ----
   bg-white/10 + ring-1 ring-white/15 + backdrop-blur, which is the source
   component's card, translated: a green-white film rather than a grey one,
   so it belongs to this product and not to the reference.

   These override the opaque dark rules further up this file, which is why
   they repeat the selector rather than editing it - the light theme keeps
   its own card untouched. */
.wsp[data-theme="dark"] .szas__new,
.wsp[data-theme="dark"] .szas__pillar,
.wsp[data-theme="dark"] .szas__chip{
  background:linear-gradient(180deg, rgba(190,255,228,.10), rgba(190,255,228,.045));
  -webkit-backdrop-filter:blur(10px) saturate(1.15);
  backdrop-filter:blur(10px) saturate(1.15);
  border-color:transparent;
  box-shadow:
    inset 0 0 0 1px rgba(190,255,228,.16),   /* the ring */
    inset 0 1px 0 rgba(220,255,240,.20),     /* lit top edge */
    0 6px 18px -10px rgba(0,0,0,.65);
}
.wsp[data-theme="dark"] .szas__pillar:hover,
.wsp[data-theme="dark"] .szas__chip:hover,
.wsp[data-theme="dark"] .szas__new:hover{
  background:linear-gradient(180deg, rgba(190,255,228,.155), rgba(190,255,228,.07));
  box-shadow:
    inset 0 0 0 1px rgba(190,255,228,.26),
    inset 0 1px 0 rgba(220,255,240,.30),
    0 12px 26px -12px rgba(0,0,0,.72);
}
/* The composer is the one control the reader always comes back to, so it is
   the most solid piece of glass on the page rather than the least. */
.wsp[data-theme="dark"] .szas__ask{
  background:linear-gradient(180deg, rgba(4,18,15,.30), rgba(4,18,15,.62));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(190,255,228,.10);
}
.wsp[data-theme="dark"] .szas__ask textarea{
  background:rgba(6,24,20,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(190,255,228,.13), inset 0 1px 3px rgba(0,0,0,.5);
}
/* The rail of past conversations is furniture, not content: it takes the
   faintest film so the field reads continuously behind it. */
.wsp[data-theme="dark"] .szas__side{
  background:linear-gradient(180deg, rgba(190,255,228,.035), rgba(190,255,228,.012));
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-right:1px solid rgba(190,255,228,.08);
}
.wsp[data-theme="dark"] .szas__head{
  background:linear-gradient(180deg, rgba(4,18,15,.42), rgba(4,18,15,.10));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(190,255,228,.09);
}
.wsp[data-theme="dark"] .szas__thread:hover,
.wsp[data-theme="dark"] .szas__thread.is-active{
  background:rgba(190,255,228,.08);
  box-shadow:inset 0 0 0 1px rgba(190,255,228,.12);
}

/* Where backdrop-filter is unavailable the film would be a flat translucent
   panel over a bright field, which is exactly the unreadable case. Those
   browsers get an opaque surface instead - less atmospheric, still legible. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .wsp[data-theme="dark"] .szas__new,
  .wsp[data-theme="dark"] .szas__pillar,
  .wsp[data-theme="dark"] .szas__chip{ background:var(--surface); }
  .wsp[data-theme="dark"] .szas__ask,
  .wsp[data-theme="dark"] .szas__head{ background:var(--paper); }
  .wsp[data-theme="dark"] .szas__side{ background:var(--paper); }
}

/* ---- the staggered entrance ----
   fadeSlideIn from the source component, unchanged in shape: 20px up, over
   half a second, each block a beat behind the one before it.

   `backwards`, NOT `both`. A forwards fill keeps the animation's final
   transform applied for good, and an animation beats a normal declaration in
   the cascade - so translateY(0) would sit on top of .szas__pillar:hover's
   translateY(-2px) and silently kill the card lift. `backwards` applies the
   FROM state before the delay and hands the element back to its own styles
   the moment it finishes. */
@keyframes szasIn{
  from{ opacity:0; transform:translateY(20px); }
  to  { opacity:1; transform:translateY(0); }
}
.szas__empty h2       { animation:szasIn .5s cubic-bezier(.22,.61,.36,1) backwards; animation-delay:.04s; }
.szas__empty p        { animation:szasIn .5s cubic-bezier(.22,.61,.36,1) backwards; animation-delay:.12s; }
.szas__empty .szas__pillars { animation:szasIn .5s cubic-bezier(.22,.61,.36,1) backwards; animation-delay:.20s; }
.szas__empty .szas__chips   { animation:szasIn .5s cubic-bezier(.22,.61,.36,1) backwards; animation-delay:.28s; }

@media (prefers-reduced-motion:reduce){
  .szas__empty h2,
  .szas__empty p,
  .szas__empty .szas__pillars,
  .szas__empty .szas__chips{ animation:none; }
}

/* THE GLASS RAISES THE FLOOR, SO THE QUIET TEXT HAS TO COME UP WITH IT.
   --muted is tuned for #071A18. Read through a lit film at its brightest the
   effective ground is rgb(45,90,79), and the same ink lands at 4.23:1 -
   under the 4.5 body copy needs. Measured, not guessed, with every glow
   stacked at full strength, which is the worst case any pixel can be.

   Lifted here only. The token itself is correct everywhere else in the
   product and changing it globally would brighten a dozen surfaces that were
   never the problem. */
.wsp[data-theme="dark"] .szas__empty p,
.wsp[data-theme="dark"] .szas__pillar span{ color:#C6D7D0; }


/* ═════════════════════════════════════════════════════════════════════════
   THE EXTRACT — the instrument first, our reading after, provenance last.

   The owner set that order and it is an argument, not a layout: the rule is
   what binds, and our explanation is commentary on it. So an answer that
   carries the instrument's own words is not a chat bubble. It loses the
   bubble entirely (.szas__msg--doc) and the extracts become the objects on
   the page.

   THREE REGISTERS, ONE SUPERFAMILY. Plex Serif for the instrument, Plex Sans
   for our commentary and the interface, Plex Mono for citations. Each maps to
   a real distinction in the content — printed elsewhere / said by us / an
   address you retype into a portal — and all three are Plex, so this is the
   brand's own voice in three registers rather than two borrowed faces.

   COLOUR IS SPENT NOWHERE HERE. --gold is SIGNAL ONLY on this site (credits =
   currency) and cannot tint law. --verified stays scarce: the confirmed
   figures and the GROUNDED mark, nothing else. The extract earns authority by
   looking like a document — its own ground, its own edge, its own citation
   line — and a green stripe on every quote would spend the panel's loudest
   colour on saying nothing.
   ═════════════════════════════════════════════════════════════════════════ */
.szas{
  /* SOURCE SERIF 4 (Adobe) for the instrument. Plex Serif is a corporate
     slab with an engineered feel; this is a transitional book face drawn
     for sustained on-screen reading, which is what a statutory extract
     asks of a reader. Its optical-size axis tunes the fit at this size
     rather than scaling one master. */
  --szas-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  /* The statute gets its own face. Lora is a different serif from the
     interface one on purpose - the instrument's own words should not
     look like anything else on the page. Spectral was cut for reading
     long text on screen: moderate stroke contrast and a generous
     x-height, which is what survives white-on-dark at this size where a
     high-contrast face would thin out and break up. */
  --szas-quote:"Spectral",Georgia,"Times New Roman",serif;
  --szas-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}

/* A bubble is the shape of a remark from somebody. This is not one. */
.szas__msg--doc{
  background:transparent; border:0; box-shadow:none;
  padding:0; border-radius:0; max-width:680px;
}

.szas__stmts{display:flex; flex-direction:column; gap:32px;}
.szas__ext{display:flex; flex-direction:column;}

/* THE ADDRESS. Above the quote, the way a marginal note sits beside a clause:
   you know where you are before you start reading. The rule tick is the only
   ornament in the block and it earns its place by anchoring the line. */
.szas__cite{
  position:relative; margin:0 0 9px; padding-left:26px;
  font:500 9.5px/1.7 var(--szas-mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted,#3C4843);
}
/* Absolute, not a flex child: a long citation runs to two lines, and under
   flex the second line came back to the left edge and sat under the rule.
   Hung off the side, every line of the address stays on the same margin. */
.szas__cite::before{
  content:""; position:absolute; left:0; top:.72em;
  width:16px; height:1px; background:currentColor; opacity:.45;
}
.szas__cite-k{
  display:inline-block; margin-right:7px;
  padding:1.5px 6px; border:1px solid var(--hairline,#DCE1DB);
  border-radius:2px; letter-spacing:.1em; font-weight:600;
}

/* THE INSTRUMENT. Set in a book face because it was printed somewhere before
   it arrived here, and at a size that invites reading rather than skimming.
   Schedules arrive as table rows, so a long one scrolls in its own box
   instead of widening the conversation.

   RAISED, NOT RECESSED. It used to sit on --surface-2, a step DOWN from the
   paper behind it - an inset panel, a hole in the page. A quotation is a thing
   laid ON the page, so it takes --surface (lighter than the ground in both
   themes) with --shadow-md and --hl, the token index.html defines as the "top
   highlight for raised surfaces". The dark theme redefines both, so the card
   lifts correctly there too instead of wearing a light theme's shadow. */
.szas__law{
  margin:0; padding:18px 22px;
  font:400 16px/1.76 var(--szas-serif); font-optical-sizing:auto;
  color:var(--ink,#112C28);
  background:var(--surface,#FFF);
  border:1px solid var(--hairline,#DCE1DB);
  border-radius:var(--r-md,12px);
  box-shadow:var(--shadow-md,0 6px 14px -3px rgba(17,44,40,.11),
             0 16px 32px -8px rgba(17,44,40,.14)),
             var(--hl,inset 0 1px 0 rgba(255,255,255,.9));
  max-width:100%; overflow-x:auto;
}
.szas__law::before{content:"\201C";}
.szas__law::after{content:"\201D";}
/* Guidance is not the instrument. Quoted the same way, marked as the quieter
   thing, because a reader must be able to tell which one binds. */
.szas__law--guide{font-style:italic; color:var(--muted-2,#48524D);}

/* OUR READING. No frame of its own, set inside the extract's measure, so it
   reads as annotation on the block above rather than a second claim of equal
   standing. */
/* The marker that says whose words these are. The citation's typeface and
   case, so the two read as a pair - but NO hanging tick: that tick is a
   margin mark pointing into the instrument, and this paragraph is not in the
   instrument. Same family, different mark, different thing. */
.szas__role{
  margin:16px 0 7px; padding:0 22px;
  font:500 9.5px/1.6 var(--szas-mono);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted,#3C4843);
}
.szas__says{
  margin:0; padding:0 22px;
  font-size:14.5px; line-height:1.68; font-weight:500;
  color:var(--ink,#112C28);
}
.szas__ext--bare .szas__role{margin-top:0; padding:0;}
.szas__ext--bare .szas__says{padding:0;}

/* The substrings the engine's verifier confirmed are literally in the cited
   provision — the same green that means "the engine stands behind this" on
   the GROUNDED mark, at tint strength. Scarce on purpose. */
.szas__val{
  background:var(--verified-soft,#E2F0E8); color:var(--ink,#112C28);
  padding:.5px 4px; border-radius:3px; font-weight:600;
}

.szas__refs{margin-left:6px; white-space:nowrap;}
.szas__ref{
  font:500 10px/1 var(--szas-mono); letter-spacing:.04em;
  color:var(--verified,#1C7A55); text-decoration:none;
  vertical-align:1px; padding:1px 2px; border-bottom:1px solid transparent;
}
a.szas__ref:hover{border-bottom-color:currentColor;}
a.szas__ref:focus-visible{
  outline:2px solid var(--verified,#1C7A55); outline-offset:2px; border-radius:2px;
}

/* PROVENANCE, LAST. You check where something came from after you have read
   it, so the sources stay shut until asked for and speak in the address
   register when opened. */
.szas__tag,
.szas__srcs>summary,
.szas__cite-eyebrow{font-family:var(--szas-mono);}
.szas__msg--doc+.szas__srcs{margin-top:18px;}

/* A document does not type itself into being. Whole extracts, one after
   another, and the quote is never revealed a character at a time. */
@keyframes szasRise{
  from{opacity:0; transform:translateY(7px);}
  to{opacity:1; transform:none;}
}
.szas__stmts--fresh>.szas__ext{
  animation:szasRise .45s var(--ease,cubic-bezier(.22,.61,.36,1)) backwards;
}
.szas__stmts--fresh>.szas__ext:nth-child(1){animation-delay:.04s;}
.szas__stmts--fresh>.szas__ext:nth-child(2){animation-delay:.10s;}
.szas__stmts--fresh>.szas__ext:nth-child(3){animation-delay:.16s;}
.szas__stmts--fresh>.szas__ext:nth-child(4){animation-delay:.22s;}
.szas__stmts--fresh>.szas__ext:nth-child(5){animation-delay:.28s;}
.szas__stmts--fresh>.szas__ext:nth-child(n+6){animation-delay:.34s;}
@media (prefers-reduced-motion:reduce){
  .szas__stmts--fresh>.szas__ext{animation:none;}
}

@media (max-width:640px){
  .szas__stmts{gap:26px;}
  .szas__law{padding:15px 17px; font-size:14.5px; line-height:1.72;
    box-shadow:var(--shadow-sm,0 1px 2px rgba(17,44,40,.06),
               0 1px 1px rgba(17,44,40,.05)),
               var(--hl,inset 0 1px 0 rgba(255,255,255,.9));}
  .szas__role{padding:0 17px; margin-top:13px;}
  .szas__says{padding:0 17px; font-size:14px;}
}

/* ====================================================================
   VERBATIM ABOVE, READING BELOW — and the statute starts closed
   ====================================================================
   The provisions come first because the answer rests on them, and they
   are collapsed because most readers want the answer while an auditor
   wants the clauses. The summary counts them, so "closed" still tells a
   reader how much statute is underneath - it is put away, not hidden. */
.szas__stack{display:flex; flex-direction:column; gap:14px;}

.szas__verbatim{
  border:1px solid var(--hairline,#DCE1DB);
  border-radius:var(--r-lg,16px);
  background:var(--surface,#FFF);
  overflow:hidden;
}
.szas__vsum{
  display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none;
  padding:12px 16px; min-height:44px;
  font:500 11.5px/1.4 var(--szas-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--verified,#1C7A55);
}
.szas__vsum::-webkit-details-marker{display:none;}
.szas__vsum:hover{background:var(--surface-2,#FAFBF7);}
.szas__vsum:focus-visible{outline:2px solid var(--verified,#1C7A55); outline-offset:-2px;}
.szas__verbatim[open] .szas__vsum{border-bottom:1px solid var(--hairline,#DCE1DB);}
.szas__verbatim[open] .szas__arw{transform:rotate(90deg);}
.szas__arw{transition:transform .18s var(--ease,cubic-bezier(.22,.61,.36,1)); flex:none;}
.szas__vn{
  margin-left:auto; font-size:11px; letter-spacing:0;
  background:var(--verified-soft,#E2F0E8); color:var(--verified,#1C7A55);
  border-radius:999px; padding:2px 9px; min-width:22px; text-align:center;
}
.szas__vbody{padding:16px;}

.szas__prov + .szas__prov{margin-top:16px;}
.szas__provhead{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font:500 11.5px/1.4 var(--szas-mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted-2,#48524D);
}
.szas__provn{
  background:var(--verified-soft,#E2F0E8); border:1px solid var(--verified,#1C7A55);
  border-radius:var(--r-xs,6px); padding:1px 7px; color:var(--verified,#1C7A55);
}
.szas__verbatim .szas__cite{margin:0 0 8px;}

/* THE QUOTE IS THE OBJECT ON THE PAGE.
   Deep green, white text, a gradient and a top sheen so it reads as a
   pressed plate rather than a panel. The green is dark enough that white
   clears 4.5:1 comfortably (measured 10.7:1 on #0E4732) - a glossy box
   whose text you cannot read is just a glossy box. Set in Lora, a
   different face from the interface serif on purpose: the instrument's
   own words should not look like anything else on the screen. */
.szas__law{
  margin:0; padding:19px 23px;
  /* BOLD ITALIC, and darker than the interface green.
     Italic because a quotation is somebody else's voice and the page should
     show that before it is read; semibold because white italic serif on a
     dark plate thins out at regular weight and starts to shimmer. The green
     is taken well below the accent - the plate should read as deep rather
     than bright, and white clears 4.5:1 against every stop in the ramp
     (measured 12.2:1 at the darkest). */
  font:600 italic 16.5px/1.7 var(--szas-quote); font-optical-sizing:auto;
  letter-spacing:.002em;
  color:#FFFFFF;
  /* The sheen is a background LAYER, not a pseudo-element. It used to be
     ::before, which meant the plate had only ::after left and the closing
     quote mark was switched off to make room - so the opening quote stopped
     matching anything. Stacking it here gives both pseudo-slots back to the
     punctuation, which is what they are for. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%,
                            rgba(255,255,255,.055) 30%,
                            rgba(255,255,255,0) 52%),
    linear-gradient(158deg,#146647 0%,#0E4732 46%,#08301F 100%);
  border:0; border-radius:var(--r-md,12px);
  box-shadow:0 10px 26px -12px rgba(11,61,43,.55),
             0 2px 6px -2px rgba(11,61,43,.35),
             inset 0 1px 0 rgba(255,255,255,.28);
  position:relative; overflow:hidden;
  max-width:100%; overflow-x:auto;
}
/* the inner edge: a hairline of light around the whole plate, brighter along
   the top, which is what makes a surface read as glass rather than as paint */
.szas__law{
  box-shadow:0 12px 30px -14px rgba(3,26,17,.75),
             0 2px 8px -3px rgba(3,26,17,.55),
             inset 0 1px 0 rgba(255,255,255,.26),
             inset 0 0 0 1px rgba(255,255,255,.07);
}
/* THE QUOTATION MARKS. Inline, in the plate's own face, set back from full
   white so they frame the words instead of competing with them. They are
   generated content on purpose: a reader copying the provision out gets the
   statute's text and not a pair of glyphs the page added. */
.szas__law::before,
.szas__law::after{
  color:rgba(255,255,255,.58); font-style:normal; font-weight:700;
}
.szas__law::before{content:"\201C";}
.szas__law::after{content:"\201D";}
/* Guidance is not the instrument: same plate, lifted off the statute green
   so a reader can still tell which one binds. */
.szas__law--guide{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16) 0%,
                            rgba(255,255,255,.045) 30%,
                            rgba(255,255,255,0) 52%),
    linear-gradient(162deg,#3C4843 0%,#2C3733 100%);
  box-shadow:0 8px 20px -12px rgba(17,44,40,.45),
             inset 0 1px 0 rgba(255,255,255,.18);
}

/* the reading, below the statute, always open */
.szas__pane--read{
  background:var(--surface,#FFF);
  border:1px solid var(--hairline,#DCE1DB);
  border-radius:var(--r-lg,16px);
  padding:18px 20px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(17,44,40,.06));
}
.szas__panehead{
  margin:0 0 14px;
  font:500 11.5px/1.4 var(--szas-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2,#48524D);
}
.szas__pane--read .szas__says{margin:0 0 14px; padding:0;}
.szas__pane--read .szas__says:last-child{margin-bottom:0;}

@media (prefers-reduced-motion:reduce){ .szas__arw{transition:none;} }

/* ─── the noise field, dark only ──────────────────────────────────────────
   Behind the thread, never above it. The canvas is inert to the pointer and
   hidden from the accessibility tree: it is texture, not content. */
.szas__main--velaris{position:relative; isolation:isolate;}
.szas__velaris{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.55;
}
.szas__main--velaris>*:not(.szas__velaris){position:relative; z-index:1;}
/* GLASS, NOT SLABS.
   The panel used to be opaque cards stacked on a texture, which read as two
   unrelated things: a field, and some boxes parked on it. Everything in the
   thread now lets the field through and leans on a blur to keep its text
   legible, so the surfaces belong to the same picture.

   WHERE THE BLUR GOES. backdrop-filter is not free - each blurred element is
   its own backdrop pass, and a long thread with a blur on every chip and
   bubble costs a pass per chip on every frame the field animates underneath.
   So the blur is spent on the two chrome bars and the cards, the large
   surfaces whose text has to survive a bright lobe. Small things (the user's
   own bubbles, the sources chip) get a translucent ground and no filter:
   they still blend, and they cost nothing.

   CONTRAST, measured rather than estimated. The cards sit at 58% of
   --surface. Sampling every pixel of the field for its brightest point
   (72,209,122), compositing it through the canvas opacity and the card:
   body text lands at 9.23:1 and muted text at 5.72:1, with white on the
   statute plate at 10.62:1. All clear of 4.5:1 at the worst pixel on the
   screen, which is the margin a compliance answer deserves. Re-measure
   before lowering these alphas; the field is bright now. */
.wsp[data-theme="dark"] .szas__main--velaris .szas__scroll{background:transparent;}

/* the two chrome bars: title above, composer below */
.wsp[data-theme="dark"] .szas__main--velaris .szas__head,
.wsp[data-theme="dark"] .szas__main--velaris .szas__ask{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--paper) 54%, transparent),
    color-mix(in srgb, var(--paper) 74%, transparent));
  backdrop-filter:blur(26px) saturate(1.4);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);
  border-color:rgba(150,235,196,.12);
}
.wsp[data-theme="dark"] .szas__main--velaris .szas__ask{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

/* the cards: the verbatim shell and the reading pane */
.wsp[data-theme="dark"] .szas__main--velaris .szas__verbatim,
.wsp[data-theme="dark"] .szas__main--velaris .szas__pane--read{
  background:linear-gradient(168deg,
    color-mix(in srgb, var(--surface) 58%, transparent),
    color-mix(in srgb, var(--paper) 62%, transparent));
  backdrop-filter:blur(22px) saturate(1.35);
  -webkit-backdrop-filter:blur(22px) saturate(1.35);
  border:1px solid rgba(150,235,196,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),
             0 18px 40px -26px rgba(2,14,10,.85);
}

/* small surfaces: translucent, deliberately unblurred (see above) */
.wsp[data-theme="dark"] .szas__main--velaris .szas__msg--you{
  background:linear-gradient(168deg,
    rgba(168,240,208,.10), rgba(120,205,168,.055));
  border:1px solid rgba(160,240,200,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  color:var(--ink,#E8EDEC);
}
.wsp[data-theme="dark"] .szas__main--velaris .szas__srcs>summary{
  background:rgba(150,235,196,.055);
  border-color:rgba(150,235,196,.13);
}

/* THE ASK BOX. Light green, glassy, and glossier than anything around it -
   it is the one surface the reader is meant to reach for, so it catches more
   light than the surfaces that only carry text. The tint stays weak enough
   that the placeholder and the typed question both hold their contrast. */
.wsp[data-theme="dark"] .szas__main--velaris .szas__ask textarea{
  background:linear-gradient(180deg,
    rgba(200,255,230,.14) 0%,
    rgba(168,240,208,.055) 45%,
    rgba(120,205,168,.04) 100%);
  border:1px solid rgba(170,245,208,.22);
  color:var(--ink,#E8EDEC);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
             inset 0 -14px 24px -20px rgba(255,255,255,.12),
             0 6px 18px -12px rgba(2,14,10,.70);
}
.wsp[data-theme="dark"] .szas__main--velaris .szas__ask textarea::placeholder{
  color:rgba(214,238,228,.46);
}
/* the send button keeps a solid ground - it is the primary action and the
   one thing that should not look like it is made of the same glass */
.wsp[data-theme="dark"] .szas__main--velaris .szas__ask button[type="submit"]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 6px 16px -10px rgba(2,14,10,.7);
}

/* Without backdrop-filter the translucency has nothing diffusing the field
   behind it, so every blurred surface falls back to its opaque ground. */
@supports not (backdrop-filter: blur(1px)){
  .wsp[data-theme="dark"] .szas__main--velaris .szas__head,
  .wsp[data-theme="dark"] .szas__main--velaris .szas__ask{background:var(--paper);}
  .wsp[data-theme="dark"] .szas__main--velaris .szas__verbatim,
  .wsp[data-theme="dark"] .szas__main--velaris .szas__pane--read{
    background:var(--surface);
  }
  .wsp[data-theme="dark"] .szas__main--velaris .szas__ask textarea{
    background:var(--surface-2);
  }
}
@media (prefers-reduced-motion:reduce){ .szas__velaris{opacity:.6;} }
.szas__generic{display:flex;gap:.6rem;align-items:center;padding:.65rem 1rem;font-weight:600}.szas__genericnotice{padding:.7rem 1rem;margin:0;background:rgba(180,120,30,.12);border-left:3px solid #b8791e;font-size:.85rem;line-height:1.5}

/* Web answer: the links the search returned, quieter than the answer itself */
.szas__websrcs{margin:.8rem 0 0;padding-top:.6rem;border-top:1px solid var(--line,rgba(120,130,125,.3));font-size:.85rem}
.szas__websrcs p{margin:0 0 .3rem;font-weight:600;color:var(--muted,#3C4843)}
.szas__websrcs ul{margin:0;padding-left:1.1rem}
.szas__websrcs a{color:inherit;text-decoration:underline;overflow-wrap:anywhere}
.szas__webtoggle{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:12px;font-weight:600;position:relative;cursor:pointer;padding:8px 3px;color:var(--ink)}
.szas__webtoggle input{position:absolute;width:1px;height:1px;opacity:0}
.szas__switchtrack{width:30px;height:18px;border-radius:20px;background:var(--muted,#6b7770);position:relative;flex:none}
.szas__switchtrack::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:white;transition:transform .15s}
.szas__webtoggle input:checked~.szas__switchtrack{background:var(--accent,#167653)}
.szas__webtoggle input:checked~.szas__switchtrack::after{transform:translateX(12px)}
.szas__webtoggle input:focus-visible~.szas__switchtrack{outline:2px solid var(--ink);outline-offset:3px}
.szas__webtoggle:has(input:disabled){opacity:.6;cursor:wait}
.szas__webtoggle{padding:8px 10px;border:1px solid var(--line,rgba(120,130,125,.3));border-radius:20px;min-height:36px}
.szas__webtoggle--on{color:var(--accent,#167653);border-color:currentColor;background:rgba(22,118,83,.08)}
.szas__webicon{flex:none}.szas__webtoggle:hover{background:rgba(22,118,83,.09)}
.szas__webnotice{font-size:12px;color:var(--muted);padding:5px 12px}
.szas__webnotice summary{cursor:pointer}.szas__webnotice p{margin:6px 0;line-height:1.5}
@media(max-width:540px){.szas__ask{flex-wrap:wrap}.szas__ask textarea{flex-basis:100%}.szas__webtoggle{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.szas__switchtrack::after{transition:none}}

/* Limit tracker: one allowance for Library and Web answers; drawn from the engine's own count */
/* small line at the top right of the thread, beside the conversation's name */
.szas__head .szas__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.szas__meter{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;white-space:nowrap;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.szas__meter b{color:var(--ink);font-weight:700}
.szas__meterbar{display:inline-block;width:44px;height:4px;border-radius:2px;background:var(--hairline);overflow:hidden}
.szas__meterbar i{display:block;height:100%;background:var(--verified);transition:width .3s var(--ease,ease)}
.szas__meter--low .szas__meterbar i{background:#b8791e}
.szas__meter--out b{color:#b3402f}
.szas__meter--out .szas__meterbar i{background:#b3402f}
/* one line above the box when the allowance is used up */
.szas__limitline{margin:0 0 6px;padding:2px 12px;font-size:13px;line-height:1.5;color:var(--muted)}
.szas__upgrade{margin:.7rem 0 0;font-size:.9em;line-height:1.5}
.szas__upgradelink{font-weight:600;text-decoration:underline;color:var(--ink)}
@media (max-width:420px){.szas__meterbar{display:none}}
@media (prefers-reduced-motion:reduce){.szas__meterbar i{transition:none}}

/* WEB DISCLAIMER BANNER (16 Oct 2026): one slim note under the chat while Web mode is on, never inside an answer. */
.szas__webbanner{margin:0 0 6px;padding:5px 12px;font-size:12px;line-height:1.45;color:var(--muted,#3C4843);border:1px solid var(--line,rgba(120,130,125,.3));border-radius:10px;background:rgba(22,118,83,.06)}
.szas__webbanner b{color:var(--accent,#167653);font-weight:600}

/* WEB MODE AS ITS OWN ICON (17 Oct 2026): a round globe button beside Ask; the words stay for screen readers. */
.szas__webtoggle{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;gap:0;border-radius:50%;flex:none;color:var(--muted,#3C4843)}
.szas__webtoggle .szas__webtext{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.szas__webtoggle .szas__switchtrack{display:none}
.szas__webtoggle--on{color:#fff;background:var(--accent,#167653);border-color:var(--accent,#167653);box-shadow:0 0 0 3px rgba(22,118,83,.25)}
.szas__webtoggle--on:hover{background:var(--accent,#167653)}
.szas__webtoggle:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:540px){.szas__webtoggle{margin-left:0}}

/* STREAM CHOICES UNDER THE ASSISTANT'S QUESTION (17 Oct 2026): tap instead of typing. */
.szas__choices{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.szas__choice{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:8px 14px;border-radius:22px;cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line,rgba(120,130,125,.45))}
.szas__choice:hover{background:rgba(22,118,83,.10);border-color:var(--accent,#167653)}
.szas__choice:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.szas__choice--all{color:var(--accent,#167653);border-style:dashed}

/* ASSISTANT SETTINGS (17 Oct 2026): core streams and the allowance tracker, in place of the thread. */
.szas__gear{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-left:8px;border-radius:50%;cursor:pointer;color:var(--muted,#3C4843);background:transparent;border:1px solid var(--line,rgba(120,130,125,.3))}
.szas__gear:hover,.szas__gear.is-on{color:var(--accent,#167653);border-color:var(--accent,#167653);background:rgba(22,118,83,.10)}
.szas__gear:focus-visible,.szas__settingsbtn:focus-visible,.szas__setback:focus-visible,.szas__setbtn:focus-visible,.szas__linkbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.szas__settingsbtn{display:block;width:calc(100% - 24px);margin:10px 12px 0;padding:10px 12px;text-align:left;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line,rgba(120,130,125,.3));border-radius:10px}
.szas__settingsbtn:hover,.szas__settingsbtn.is-on{border-color:var(--accent,#167653);background:rgba(22,118,83,.10)}
.szas__settings{max-width:760px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:22px}
.szas__sethead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.szas__sethead h2{margin:0;font-size:22px}
.szas__setback,.szas__setbtn{font:inherit;font-size:14px;font-weight:600;min-height:44px;padding:8px 16px;border-radius:22px;cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line,rgba(120,130,125,.45))}
.szas__setback:hover,.szas__setbtn:hover{border-color:var(--accent,#167653);background:rgba(22,118,83,.10)}
.szas__setsec{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--line,rgba(120,130,125,.3));border-radius:14px}
.szas__setsec h3{margin:0;font-size:16px}
.szas__setsec p{margin:0;font-size:14px;line-height:1.5;color:var(--muted,#3C4843)}
.szas__setrow{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.szas__setrow input{margin-top:4px;width:18px;height:18px;flex:none}
.szas__setrow small{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--muted,#3C4843)}
.szas__uselist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.szas__use p{margin:4px 0 0;font-size:13px}
.szas__usehead{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.szas__usebar{display:block;height:8px;margin-top:6px;border-radius:8px;background:rgba(120,130,125,.25);overflow:hidden}
.szas__usebar i{display:block;height:100%;background:var(--accent,#167653);border-radius:8px}
.szas__use--low .szas__usebar i{background:#b7791f}
.szas__use--out .szas__usebar i{background:#c0392b}
.szas__coreline{margin:14px 0 0;font-size:14px;color:var(--muted,#3C4843)}
.szas__coreline b{color:var(--ink)}
.szas__linkbtn{font:inherit;font-size:inherit;font-weight:600;padding:0;cursor:pointer;color:var(--accent,#167653);background:none;border:0;text-decoration:underline}
.szas__choice--core{border-color:var(--accent,#167653);background:rgba(22,118,83,.10)}

/* The composer row (17 Oct 2026): the placeholder wrapped to two lines in a narrow box and the box grew scroll arrows.
   An empty box shows one line, ellipsised; a typed one scrolls as before. */
.szas__ask textarea{min-width:0}
.szas__ask textarea:placeholder-shown{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* THE COMPOSER ROW AND THE BRAND BAR (17 Oct 2026): settings gear at the right of the brand bar; a shorter typing box, a
   longer Ask button, and the words "Web mode" beside the Web icon; /stream tags in the chat. */
.szas__brand{display:flex;align-items:center}
.szas__brand .szas__gear{margin-left:auto}
.szas__ask textarea{flex:1 1 160px;max-width:330px}
.szas__ask button[type=submit]{flex:0 0 auto;min-width:160px;padding-left:28px;padding-right:28px}
.szas__webtoggle{width:auto;height:44px;padding:0 16px 0 12px;gap:8px;border-radius:24px}
.szas__webtoggle .szas__webtext{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:14px;font-weight:600;white-space:nowrap}
.szas__slash{display:inline-block;margin-right:2px;padding:0 8px;border-radius:12px;font-weight:600;font-size:.92em;background:rgba(255,255,255,.18)}
@media(max-width:540px){.szas__ask textarea{max-width:none;flex-basis:100%}.szas__ask button[type=submit]{flex:1 1 auto}}

/* WIDE WINDOWS (17 Oct 2026): the composer row stays centred and its controls grow with the window instead of
   huddling at the left; Settings opens with a Back button at its top-left. */
.szas__ask{justify-content:center}
.szas__ask textarea{max-width:clamp(260px,34vw,560px)}
.szas__ask button[type=submit]{min-width:clamp(160px,12vw,240px)}
.szas__sethead{justify-content:flex-start;gap:16px}
.szas__sethead h2{flex:1 1 auto}
.szas__setback{order:-1}
@media(max-width:540px){.szas__ask textarea{max-width:none}}

/* Compact send action; all question controls share the composer bar. */
.szas__ask textarea{flex:1 1 200px;max-width:none;}
.szas__ask button.szas__send[type=submit]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;border-radius:50%;}
.szas__send svg{display:block;flex:none;}
.szas__ask button.szas__send:focus-visible{outline:2px solid var(--verified,#1C7A55);outline-offset:3px;}
@media(max-width:1050px){
  .szas__ask{flex-wrap:wrap;gap:8px;}
  .szas__ask textarea{flex-basis:100%;max-width:none;}
  .szas__ask .szas__webtoggle{width:44px;padding:0;gap:0;}
  .szas__webtoggle .szas__webtext{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .szas__ask button.szas__send{margin-left:auto;}
}
@media(max-width:380px){
  .szas__ask{gap:6px;padding-left:10px;padding-right:10px;}
  .szas__ask .szas__scopepill{padding-left:7px;padding-right:7px;max-width:calc(100% - 216px);min-width:0;}
}

/* Conversation actions: a consistent, keyboard-accessible menu on every row. */
.szas__thread{display:block;padding:0;cursor:default;}
.szas__thread-open{display:flex;flex-direction:column;gap:4px;width:100%;min-height:60px;padding:12px 52px 12px 12px;text-align:left;border:0;border-radius:8px;background:none;font:inherit;color:var(--ink);cursor:pointer;}
.szas__thread-t{max-width:100%;font-size:13px;font-weight:500;}
.szas__chatmore{position:absolute;right:4px;top:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;}
.szas__chatmore:hover,.szas__chatmore[aria-expanded=true]{background:var(--paper,#F5F6F2);color:var(--ink);}
.szas__chatmenu,.szas__rename,.szas__chatconfirm{margin:0 8px 8px;padding:6px;border:1px solid var(--hairline,#DCE1DB);border-radius:10px;background:var(--surface,#FFF);color:var(--ink);}
.szas__chatmenu{display:grid;}
.szas__chatmenu button,.szas__rename button,.szas__chatconfirm button{min-height:44px;border:0;border-radius:6px;padding:8px 10px;background:none;color:inherit;font:inherit;font-size:13px;text-align:left;cursor:pointer;}
.szas__chatmenu button:hover,.szas__rename button:hover,.szas__chatconfirm button:hover{background:var(--paper,#F5F6F2);}
.szas__rename,.szas__chatconfirm{padding:12px;font-size:13px;}
.szas__rename label{display:grid;gap:8px;}
.szas__rename input{min-width:0;width:100%;box-sizing:border-box;min-height:44px;padding:8px;border:1px solid var(--hairline,#DCE1DB);border-radius:6px;font:inherit;background:var(--paper,#F5F6F2);color:var(--ink);}
.szas__rename > div,.szas__chatconfirm > div{display:flex;gap:8px;margin-top:8px;}
.szas__chatconfirm p{margin:0;line-height:1.5;}
.szas__thread .szas__danger{color:#B33B32;}
.wsp[data-theme=dark] .szas__thread .szas__danger{color:#FFB1A8;}
.szas__thread :is(button,input):focus-visible{outline:2px solid var(--verified,#1C7A55);outline-offset:2px;}
.szas__thread button:disabled{opacity:.5;cursor:default;}

/* Composer utilities: thinking-time panel trigger, Web globe and stream grid. */
.szas__ask .szas__depth{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:3px;box-sizing:border-box;flex:0 0 58px;width:58px;height:44px;padding:0 8px;border:1px solid var(--hairline,#DCE1DB);border-radius:12px;background:var(--surface,#FFF);color:var(--ink,#112C28);}
.szas__depth svg{display:block;flex:none;pointer-events:none;}
.szas__deptharw{opacity:.7;}
.szas__ask .szas__depth--deep{color:var(--verified,#1C7A55);border-color:currentColor;background:var(--paper,#F5F6F2);}
.szas__ask .szas__depth:hover{border-color:var(--verified,#1C7A55);}
.szas__ask .szas__depth:focus-within,.szas__ask .szas__webtoggle:focus-within{outline:2px solid var(--verified,#1C7A55);outline-offset:3px;}
.szas__ask .szas__depth:disabled{opacity:.6;cursor:default;}
.szas__ask .szas__webtoggle{box-sizing:border-box;flex:0 0 44px;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;margin-left:0;padding:0;gap:0;border-radius:12px;}
.szas__ask .szas__webtoggle input{inset:0;width:100%;height:100%;margin:0;cursor:pointer;}
.szas__ask .szas__webtoggle input:disabled{cursor:default;}
.szas__ask .szas__webtoggle--on{color:var(--verified,#1C7A55);border-color:currentColor;}
.szas__ask .szas__scopeico{width:18px;height:18px;}
@media(max-width:380px){.szas__ask .szas__scopepill{max-width:calc(100% - 170px);}}

/* Thinking time uses the stream picker's shared panel and selected tiles. */
.szas__thinkingpanel .szas__scopegrid{grid-template-columns:repeat(2,minmax(0,1fr));}
.szas__thinkingpanel .szas__scopeopt{min-height:44px;}
.szas__thinkingpanel .szas__scopex{width:44px;height:44px;}
.szas__thinkingpanel .szas__scopeopt:has(input:focus-visible){outline:2px solid var(--verified,#1C7A55);outline-offset:3px;}
.szas__ask .szas__depth{cursor:pointer;font:inherit;}
.szas__depth[aria-expanded=true] .szas__deptharw{transform:rotate(180deg);}
.szas__ask .szas__depth:focus-visible{outline:2px solid var(--verified,#1C7A55);outline-offset:3px;}
.szas__stage .szas__waithead{align-items:flex-start;}
.szas__stage .szas__stagetxt{min-width:0;flex:1;overflow-wrap:anywhere;}
.szas__stage .szas__stagedot{margin-top:6px;}
.szas__stage .szas__waitmode{font-size:11.5px;font-weight:600;color:var(--muted,#3C4843);}
.szas__stage .szas__stageannounce{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* ═════════════════════════════════════════════════════════════════════════
   PHONE PASS, 26 Oct 2026 (owner: "optimize the Assistant section for phone"). Phones only (max-width 720px); desktop is unchanged.
   Measured on a 400 x 812 phone before this block:
   - the Assistant pane inherited the workspace's 150px "room for the floating buttons" bottom padding, so the page ended
     150px above the tab bar and the ask box floated mid-screen with empty space under it;
   - the ask box text was 13.5px (iPhones zoom the whole page when a field under 16px is tapped);
   - the menu, new-conversation, stream and suggestion buttons were 23-39px tall (guideline 44px);
   - captions were 10-11.5px.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:720px){
  /* the Assistant has no floating buttons, so it takes the whole pane: the ask box sits directly above the tab bar */
  .wsp .wsp__pane.wsp__pane--assistant.is-active{padding:0;}

  /* the page behind never shows through, and nothing scrolls sideways */
  .szas{background:var(--paper,#F5F6F2); overflow-x:hidden; overscroll-behavior:contain;}
  .szas__scroll{-webkit-overflow-scrolling:touch; overscroll-behavior:contain; scroll-padding-bottom:16px;}
  .szas__empty{padding-bottom:20px;}

  /* header: a real 44px menu button and settings button */
  .szas__burger,.szas__gear{min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;}

  /* the ask box: 16px text so the page does not zoom, a comfortable height, and room above the home indicator */
  .szas__ask textarea,.szas__ask input[type=text]{font-size:16px; line-height:1.35; min-height:48px;}
  .szas__ask{padding-bottom:max(8px,env(safe-area-inset-bottom));}
  .szas__ask button,.szas__webtoggle{min-width:44px; min-height:44px;}
  .szas__fine{font-size:12px; line-height:1.4; padding:2px 12px 6px;}

  /* suggestion chips, stream link and new-conversation: 44px targets, readable text */
  .szas__chip{min-height:44px; font-size:14px; padding:10px 14px; display:inline-flex; align-items:center;}
  .szas__linkbtn{min-height:44px; display:inline-flex; align-items:center; font-size:15px;}
  .szas__new{min-height:44px;}
  .szas__side button,.szas__side a{min-height:44px;}

  /* body copy and captions of the empty state */
  .szas__empty p{font-size:15px; line-height:1.5;}
  .szas__pillar b{font-size:14px;}
  .szas__pillar span{font-size:13px; line-height:1.45;}
  .szas__msg .szas__body,.szas__turn .szas__body{font-size:16px; line-height:1.55;}
  .szas__tag{font-size:12px;}

  /* the Web warning: one compact strip instead of a three-line box PLUS a second fine-print warning above the ask box */
  .szas__webbanner{font-size:12px; line-height:1.35; padding:6px 12px; margin:0;}
  .szas__composer:has(.szas__webbanner) .szas__fine{display:none;}
}

/* A phone held sideways (or any short, touch screen): the warning strip becomes one line and the extra fine print goes, so the
   conversation keeps more than a line of room. The full warning is still the first thing on the Web switch's strip. */
@media (max-height:500px) and (pointer:coarse){
  .szas__webbanner{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:4px 12px;}
  .szas__fine{display:none;}
  .szas__pillars{display:none;}
}

/* ---- all screens ---- */
/* The Web switch, when ON, is a green button; its icon had been turned the same green (a later, more specific rule), so the
   button looked like an empty green square. White icon on green. */
.szas__ask .szas__webtoggle--on{color:#fff; border-color:var(--accent,#167653); background:var(--accent,#167653);}

/* Tables and lists in an answer (see md() in sz-assistant.js). A table scrolls sideways inside its own box. */
/* contain:inline-size makes the box report no intrinsic width, so a wide table can never stretch the answer bubble past the screen */
.szas__tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:10px 0; width:100%; max-width:100%; contain:inline-size; border:1px solid var(--hairline,#DCE1DB); border-radius:10px;}
.szas__turn,.szas__msg,.szas__body{min-width:0; max-width:100%;}
.szas__body{overflow-wrap:anywhere;}
.szas__tbl{border-collapse:collapse; width:100%; min-width:max-content; font-size:14px; line-height:1.4;}
.szas__tbl th,.szas__tbl td{padding:8px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hairline,#DCE1DB);}
.szas__tbl th{background:rgba(22,118,83,.08); font-weight:600; white-space:nowrap;}
.szas__tbl tbody tr:last-child td{border-bottom:0;}
.szas__list{margin:8px 0; padding-left:22px;}
.szas__list li{margin:4px 0; padding-left:2px;}

/* a short phone (landscape, or a small screen with the keyboard open): keep the ask box and a little of the thread in view */
@media (max-width:720px) and (max-height:560px){
  .szas__pillars{display:none;}
}

/* Cited source tables: contain wide legal schedules without widening the page. */
.szas__source-table{max-width:100%;min-width:0;margin:1rem 0}
.szas__table-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--sz-border,rgba(128,160,150,.35));border-radius:12px}
.szas__source-table table{border-collapse:collapse;width:100%;font-size:.9em;line-height:1.5;text-align:left}
.szas__source-table caption{padding:12px;text-align:left;font-weight:600}
.szas__source-table th,.szas__source-table td{padding:10px 12px;border-top:1px solid var(--sz-border,rgba(128,160,150,.3));vertical-align:top;min-width:90px}
.szas__source-table th{font-weight:650;background:rgba(128,160,150,.1)}
.szas__table-note{font-size:.8em;opacity:.8;margin:.4rem 0}

/* Visible history-sync errors and safe conflict choices, on phone and desktop. */
.szas__syncnotice{margin:12px 0;padding:12px 14px;border:1px solid currentColor;border-radius:12px;font-size:.875rem;line-height:1.5;overflow-wrap:anywhere}.szas__syncnotice button{display:inline-block;min-height:44px;margin:8px 8px 0 0;padding:8px 12px;border:1px solid currentColor;border-radius:9px;background:transparent;color:inherit;font:inherit;cursor:pointer}.szas__syncnotice button:focus-visible{outline:2px solid currentColor;outline-offset:3px}