/* One dark theme for long reading sessions.
   Surfaces step up in lightness: the sidebar is the deepest, the workspace a step lighter, cards a
   step above that, and controls (fields, selects, secondary buttons) the most raised, with a border
   that clears 3:1 against the surface around them so a field never has to be hunted for.
   Purple marks what you can act on and where you are. The filled purple is for buttons (white text
   on it clears 4.5:1); a lighter purple is for links, focus rings and the current tab. Semantic
   colors (success, danger, warning, info) always ride beside words, never alone. Gold is for dates
   and events only. Numbers and dates are set in the reading face; a monospace face made the app
   read like a terminal.
   Contrast figures beside the text colors are measured against --panel (WCAG 2.2 ratios).
   color-scheme tells the browser the page is dark, so its own scrollbars, checkboxes, radios,
   date pickers and list popups come out dark too. */
:root{
  color-scheme:dark;

  /* Surfaces, deepest first. */
  --nav:#0e1119;            /* the sidebar: deep charcoal navy */
  --topbar:#11151d;         /* the context bar, between the sidebar and the workspace */
  --bg:#141821;             /* the workspace */
  --panel:#1a1f2a;          /* cards, popups, menus */
  --panel-2:#1f2532;        /* table headers and a card's quieter band */
  --raised:#252c3a;         /* fields, selects, secondary buttons */
  --raised-hover:#2c3444;
  --hover:rgba(255,255,255,.05);

  /* Lines. */
  --border:rgba(255,255,255,.08);          /* between surfaces */
  --border-strong:rgba(255,255,255,.14);   /* menus and popups */
  --control-border:#6b7489;                /* fields and secondary buttons: 3.3:1 on --panel, 3.6:1 on --bg */
  --control-border-hover:#8a93a8;

  /* Text. */
  --text:#eef0f5;           /* 14.5:1, reading text */
  --text-2:#c3c8d3;         /* 9.8:1, secondary text and table headers */
  --muted:#a2a9b7;          /* 7.0:1, labels, meta, placeholders (5.9:1 on a field) */
  --muted2:#8b92a1;         /* 5.3:1, the faintest text; never on a raised field */
  --nav-text:#cdd2dc;       /* 12.4:1 on --nav */
  --nav-heading:#8f97a6;    /* 6.4:1 on --nav */

  /* Purple. */
  --accent:#6c5ce7;         /* filled buttons and picks; white text on it 4.9:1 */
  --accent-hover:#5e4fd6;   /* deeper on hover, so white text gains contrast (5.9:1) */
  --accent-text:#b3a8ff;    /* links, focus, the current tab's line: 7.8:1 on --panel */
  --accent-line:#a497ff;    /* the slim bar beside the current menu item: 6.3:1 on its tint */
  --accent-soft:rgba(108,92,231,.2);  /* selection: the current menu item, a picked row */
  --focus:#b3a8ff;

  /* Semantic, always with words. Each text color clears 6.5:1 on its own tint. */
  --success:#7ee2a8; --success-bg:rgba(47,191,113,.16); --success-line:rgba(47,191,113,.45);
  --danger:#ff9aa5;  --danger-bg:rgba(229,72,77,.16);   --danger-line:rgba(229,72,77,.5);
  --warning:#f3c46b; --warning-bg:rgba(232,162,58,.16);  --warning-line:rgba(232,162,58,.45);
  --info:#93c5fd;    --info-bg:rgba(59,130,246,.16);    --info-line:rgba(59,130,246,.45);
  --neutral-bg:rgba(255,255,255,.06); --neutral-line:rgba(255,255,255,.16);
  --accent2:#3dd6d0;        /* a data color (in favor, yea), not a second accent */

  --shadow:0 16px 40px rgba(0,0,0,.45);   /* popups and menus only */

  /* Type: Windows 11's own family, with optical sizes for text and for titles. */
  --font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif,"Segoe UI Emoji";
  --font-display:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  /* One size per job. Small type is kept for what is small on purpose (a tag, a count, the menu's
     group headings); labels, headings and long reading text each have a step of their own, so a
     form's labels and a card's sections no longer share the tags' 12px. */
  --fs-label:12px;          /* tags, badges, counts and the menu's group headings only */
  --fs-meta:13px;           /* metadata: dates, who and when, help under a field */
  --fs-small:13px;          /* the older name for --fs-meta */
  --fs-table:14px;          /* dense tables, lists and table headers' rows */
  --fs-field-label:14px;    /* a field's label */
  --fs-body:15px;           /* reading text, form fields and navigation */
  --fs-reading:16px;        /* long reading: AI analysis, a summary's paragraph */
  --fs-subhead:16px;        /* a heading inside a card */
  --fs-card:17px;           /* card titles */
  --fs-dialog:20px;         /* a dialog's title */
  --fs-h1:26px;             /* page headings */
  --lh-reading:1.6;
  --measure:70ch;           /* a comfortable line for reading text: about 80 characters */

  /* Space on a 4/8 rhythm, and restrained corners. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --r-sm:6px; --r-md:8px; --r-lg:10px;

  --nav-w:248px;
  --topbar-h:60px;
}

*{box-sizing:border-box}
html{scrollbar-color:#394152 var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.55;
  background:var(--bg);
  color:var(--text);
}

a{color:inherit}
/* The hidden attribute always hides, even on something whose class sets its display (a .btn is
   inline-flex, which used to keep a hidden button on screen). */
[hidden]{display:none !important}
/* Headings are used for what they mean; their look comes from their class, not the browser. */
h1, h2, h3, h4, h5, h6{margin:0}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
input[type=checkbox], input[type=radio]{accent-color:var(--accent)}

/* Read by screen readers, not shown. */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Line icons from the sprite in _Icons.cshtml; they take the color of the text beside them. */
.icon{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}
.icon-sm{width:16px; height:16px}

/* ---- The shell: a sidebar that stays put, a context bar, and the workspace. ---- */
.app-shell{display:grid; grid-template-columns:var(--nav-w) minmax(0, 1fr); min-height:100vh}

.app-nav{
  position:sticky; top:0;
  height:100vh;
  display:flex; flex-direction:column;
  background:var(--nav);
  border-right:1px solid var(--border);
}

.brand{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:8px 12px 0; padding:16px 12px 14px;
  border-radius:var(--r-md);
  text-decoration:none;
}
.brand:hover{background:var(--hover)}
.brand-logo{display:block; width:100%; max-width:180px; height:auto}
.brand-sub{font-size:var(--fs-label); color:var(--nav-heading); letter-spacing:.02em}
.nav-close{display:none}

/* The menu scrolls on its own when the window is short, so every destination stays reachable. */
.nav{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  overflow-y:auto; overscroll-behavior:contain;
  padding:12px 12px 0;
  scrollbar-width:thin; scrollbar-color:#2c3341 transparent;
}
.nav-group{margin-top:var(--s6)}
/* Group headings say what follows; they are not links, so they are small, quiet and set in
   capitals (by the stylesheet only; the markup stays in sentence case). */
.nav-section{
  margin:0 0 6px; padding:0 12px;
  font-size:12px; line-height:16px; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--nav-heading);
}
.nav-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.nav-item{
  position:relative;
  display:flex; align-items:center; gap:12px;
  min-height:40px; padding:8px 12px;
  border-radius:var(--r-md);
  color:var(--nav-text);
  text-decoration:none;
  font-size:var(--fs-body); font-weight:500; line-height:1.3;
  transition:background-color .12s ease, color .12s ease;
}
.nav-item .icon{color:#9aa2b1}
.nav-label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nav-item:hover{background:rgba(255,255,255,.06); color:var(--text)}
.nav-item:hover .icon{color:var(--text)}
/* Inside the item, so the menu's scroll box never clips it. */
.nav-item:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.nav-item.active{background:var(--accent-soft); color:var(--text); font-weight:600}
.nav-item.active .icon{color:var(--accent-text)}
.nav-item.active::before{
  content:''; position:absolute; left:0; top:9px; bottom:9px;
  width:3px; border-radius:0 3px 3px 0;
  background:var(--accent-line);
}
.nav-footer{
  margin-top:auto;
  padding:16px 12px 16px;
  border-top:1px solid var(--border);
  margin-left:-12px; margin-right:-12px;
  padding-left:24px; padding-right:24px;
}
.nav-firm-label{font-size:var(--fs-label); color:var(--nav-heading)}
.nav-firm{font-size:14px; font-weight:600; color:var(--nav-text); overflow-wrap:anywhere}
.nav-group:last-of-type{margin-bottom:var(--s6)}

@media (prefers-reduced-motion: reduce){
  .nav-item{transition:none}
}

/* Quieter color only: the size is the surrounding text's. Small, quiet metadata is .meta (or the
   older .small, the same thing). */
.muted{color:var(--muted)}
.meta, .small{font-size:var(--fs-meta); line-height:1.5; color:var(--muted)}
/* Tabular figures in the reading face, so numbers still line up in columns. A long path or key
   breaks where it must rather than pushing the page sideways on a phone. */
.mono{font-family:var(--font); font-variant-numeric:tabular-nums; font-size:var(--fs-small); color:var(--text); overflow-wrap:anywhere}
.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
/* Long reading text (an analysis, a summary): a step larger, roomier lines, a measure the eye can
   follow back to the next line. */
.prose{font-size:var(--fs-reading); line-height:var(--lh-reading); color:var(--text); max-width:var(--measure)}
.prose p{margin:0 0 12px}
.prose p:last-child{margin-bottom:0}

.app-main{display:flex; flex-direction:column; min-width:0}

/* The context bar: what the work is filed under (session and client) on the left, the person's own
   menu on the right. It stays in view while the page scrolls. */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:var(--s4);
  height:var(--topbar-h);
  padding:0 var(--s6);
  background:var(--topbar);
  border-bottom:1px solid var(--border);
}
.topbar-context{display:flex; align-items:center; gap:var(--s6); flex:1 1 auto; min-width:0}
.topbar-utilities{display:flex; align-items:center; gap:var(--s2); margin-left:auto; flex:none}

.ctx{display:flex; align-items:center; gap:var(--s2); min-width:0; margin:0}
.ctx-label{font-size:var(--fs-label); font-weight:600; color:var(--muted); white-space:nowrap}
.ctx select.ctx-select{
  width:auto; min-width:0; height:36px; min-height:36px; padding:0 10px;
  font-size:14px; font-weight:500;
}
.ctx-session .ctx-select{width:clamp(200px, 22vw, 320px)}
.ctx-client .ctx-select{width:clamp(170px, 16vw, 250px)}
/* No working client yet. So much is filed under one (positions, notes, contacts, reports) that the
   empty picker asks to be filled: the action purple on a dashed edge, like the empty "Add a client"
   slot, with its words in the link purple (6.6:1 on a field) and its label to match. The first page
   of a visit without one also glows briefly (site.js adds is-nudging), unless motion is reduced. */
.ctx-select.is-unset{
  color:var(--accent-text); font-weight:600;
  border:1px dashed var(--accent-text); background:rgba(108,92,231,.14);
}
.ctx-select.is-unset:hover{background:rgba(108,92,231,.22); border-color:var(--accent-line)}
.ctx-select.is-unset option{color:var(--text); font-weight:400}
.ctx-client.is-unset .ctx-label{color:var(--accent-text)}
@keyframes ctx-nudge{
  0%, 100%{box-shadow:0 0 0 0 rgba(179,168,255,0)}
  50%{box-shadow:0 0 0 5px rgba(179,168,255,.35)}
}
.ctx-select.is-unset.is-nudging{animation:ctx-nudge 1.6s ease-in-out 3}
@media (prefers-reduced-motion: reduce){
  .ctx-select.is-unset.is-nudging{animation:none}
}
/* The working client decides where notes and contacts are filed, so once chosen it is set off in
   the selection purple. */
.ctx-select.has-client{border-color:var(--accent-text); background:#2a2752}
.ctx-link{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border:1px dashed var(--control-border); border-radius:var(--r-md);
  color:var(--text); text-decoration:none; font-size:14px; font-weight:500;
}
.ctx-link:hover{background:var(--hover); border-color:var(--control-border-hover)}
.ctx-apply{height:36px}
/* Apply turns into the primary action once a different session is picked. */
.ctx-session.is-pending .ctx-apply{background:var(--accent); border-color:var(--accent); color:#fff}
.ctx-session.is-pending .ctx-apply:hover{background:var(--accent-hover); border-color:var(--accent-hover)}

/* The person's menu: account, settings, reload and sign out. */
.account-menu{position:relative}
.account-trigger{
  display:inline-flex; align-items:center; gap:8px;
  height:40px; padding:0 10px 0 5px;
  font:inherit; font-size:14px; font-weight:500; color:var(--text);
  background:transparent; border:1px solid transparent; border-radius:var(--r-md);
  cursor:pointer;
}
.account-trigger:hover{background:var(--hover); border-color:var(--border)}
.account-trigger[aria-expanded="true"]{background:var(--raised); border-color:var(--control-border)}
.account-trigger .icon{color:var(--muted)}
.avatar{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--accent-soft); border:1px solid rgba(164,151,255,.5);
  color:var(--text); font-size:12px; font-weight:700; letter-spacing:.02em;
}
.account-trigger-name{max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:80;
  min-width:248px; padding:6px;
  background:var(--panel);
  border:1px solid var(--border-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.menu[hidden]{display:none}
.menu-header{padding:8px 10px 10px; margin-bottom:6px; border-bottom:1px solid var(--border)}
.menu-title{font-size:14px; font-weight:600; color:var(--text); overflow-wrap:anywhere}
.menu-sub{font-size:var(--fs-meta); color:var(--muted); overflow-wrap:anywhere}
.menu-item{
  display:flex; align-items:center; gap:10px;
  width:100%; min-height:38px; padding:8px 10px;
  font:inherit; font-size:14px; color:var(--text-2); text-align:left; text-decoration:none;
  background:none; border:0; border-radius:var(--r-sm);
  cursor:pointer;
}
.menu-item .icon{color:var(--muted)}
.menu-item:hover, .menu-item:focus-visible{background:rgba(255,255,255,.07); color:var(--text)}
.menu-item:hover .icon, .menu-item:focus-visible .icon{color:var(--text)}
.menu-item:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.menu-item[aria-current]{color:var(--text); font-weight:600}
.menu-item[aria-current] .icon{color:var(--accent-text)}
.menu-sep{height:1px; margin:6px 0; background:var(--border)}
.menu-form{margin:0}

.topbar-link{
  font:inherit; font-size:14px;
  color:var(--muted);
  background:transparent;
  border:1px solid transparent;
  padding:7px 10px;
  border-radius:var(--r-md);
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
}
.topbar-link:hover, .topbar-link.active{color:var(--text); background:var(--hover)}

.workspace{padding:var(--s6); min-width:0}
.workspace:focus{outline:none}

/* The page's own heading, at the top of the workspace, with an optional line under it saying what
   the page is for (so the first card doesn't have to repeat the page's name to say it). */
.page-head{
  display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--s4); row-gap:6px;
  align-items:start; margin:0 0 var(--s5);
}
.page-head > *{grid-column:1}
/* The page's Help link follows the heading and its line in reading order, and sits beside the heading. */
.page-head > .page-help{grid-column:2; grid-row:1; align-self:center}
.page-help{white-space:nowrap}
.page-help .icon{color:var(--accent-text)}
.page-lede{margin:0; max-width:96ch; font-size:var(--fs-body); line-height:1.55; color:var(--text-2)}
.page-title{
  margin:0;
  font-family:var(--font-display); font-size:var(--fs-h1); font-weight:600;
  line-height:1.2; letter-spacing:-.015em;
  color:var(--text);
}

.card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:var(--r-lg);
}

.card-header{padding:16px 20px; border-bottom:1px solid var(--border)}
/* A card header with an action beside its title (a button, a count): the title takes the room. */
.card-header-row{display:flex; align-items:flex-start; justify-content:space-between; gap:8px 16px; flex-wrap:wrap}
.card-header-row > :first-child{flex:1 1 280px; min-width:0}
.card-title{margin:0; font-family:var(--font-display); font-size:var(--fs-card); font-weight:600; line-height:1.3; color:var(--text)}
.card-sub{font-size:var(--fs-meta); color:var(--muted); margin:4px 0 0; line-height:1.5; max-width:96ch}
.card-body{padding:20px}
/* Cards stacked on a page, without each page setting its own gap. */
.card + .card, .card + .stack, .stack + .card{margin-top:var(--s4)}
.stack{display:flex; flex-direction:column; gap:var(--s4)}

/* Sections inside a card: a heading a step below the card's, and a rule between sections so a long
   card reads as parts. */
.section-title{margin:0 0 6px; font-size:var(--fs-subhead); font-weight:600; line-height:1.35; color:var(--text)}
.section-lede{margin:0 0 12px; font-size:var(--fs-meta); line-height:1.5; color:var(--muted); max-width:96ch}
.subsection-title{margin:0 0 6px; font-size:var(--fs-body); font-weight:600; line-height:1.4; color:var(--text)}
.card-section + .card-section{margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--border)}

/* An empty list or a state with nothing to show: plain words at reading size, saying which it is
   and what to do next, not a whisper. */
.empty{margin:0; font-size:var(--fs-body); line-height:1.55; color:var(--text-2); max-width:96ch}
.empty a, .meta a, .small a, .card-sub a, .section-lede a{color:var(--accent-text)}

/* A list or table in a box of its own that scrolls sideways inside it when it must. */
/* Positioned, so text kept for screen readers (.sr-only, placed absolutely) inside a wide table stays
   in the box; unpositioned, it landed at the table's far right edge and widened the page on a phone. */
.table-wrap{position:relative; overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); -webkit-overflow-scrolling:touch}
.table-wrap > .table{border-radius:inherit}

.grid-2{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:16px;
  align-items:start;
}

@media (max-width: 1100px){
  .grid-2{grid-template-columns:1fr}
}

/* Fields: raised off the card, with an edge that is easy to find. */
.input, select{
  width:100%;
  font:inherit; font-size:var(--fs-body); line-height:20px;
  color:var(--text);
  background:var(--raised);
  border:1px solid var(--control-border);
  padding:8px 12px;
  min-height:38px;
  border-radius:var(--r-md);
}
.input::placeholder, textarea::placeholder{color:var(--muted); opacity:1}
.input:hover, select:hover{border-color:var(--control-border-hover)}
/* A date or time field's focus lands on its inner parts, where the field itself matches :focus-within
   but not :focus, so without the second selector no date field ever showed a ring. */
.input:focus, .input:focus-within, select:focus{border-color:var(--focus); outline:2px solid var(--focus); outline-offset:1px}
textarea.input{line-height:1.5}

select option, select optgroup{
  background:var(--raised);
  color:var(--text);
}

/* A list box keeps showing its picks after it loses focus: without this, the rule above paints
   a picked option like the rest once the browser drops its focused highlight. The gradient
   covers that highlight too, so a pick looks the same focused or not. */
select[multiple] option:checked{
  background:var(--accent) linear-gradient(var(--accent), var(--accent));
  color:#fff;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:14px; font-weight:600; line-height:20px;
  color:#fff;
  background:var(--accent);
  border:1px solid var(--accent);
  padding:8px 16px;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease;
}
.btn:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:#fff}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:disabled:hover{background:var(--accent); border-color:var(--accent)}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.table th, .table td{padding:12px 14px; border-bottom:1px solid var(--border); font-size:var(--fs-table); line-height:1.45}
/* Rows of more than one line read from their top edge. */
.table-top td{vertical-align:top}
.table th{
  color:var(--text-2); background:var(--panel-2);
  font-weight:600; font-size:var(--fs-meta); letter-spacing:.01em;
  text-align:left; white-space:nowrap; vertical-align:bottom;
}
.table th.num, .table td.num{text-align:right}
/* A column header that sorts the list: the header's own look, underlined on hover. */
.th-sort{color:inherit; text-decoration:none}
.th-sort:hover, .th-sort:focus-visible{color:var(--text); text-decoration:underline}
/* A field inside a dense table keeps the table's size. */
.table .input, .table select{font-size:var(--fs-table)}
/* A row's main words, and the quieter line under them. */
.cell-main{font-weight:600; color:var(--text)}
.cell-sub{margin-top:2px; font-size:var(--fs-meta); line-height:1.45; color:var(--muted)}
.table thead th{border-bottom-color:var(--border-strong)}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover td{background:var(--hover)}
.table tr.selected td{background:var(--accent-soft)}

/* The bill list: the bill as people say it ("HB 1466"), and its legal title cut to two lines so
   the list scans; the full title shows on hover and in the bill's popup. */
#billsTable tbody tr{cursor:pointer}
#billsTable td{vertical-align:top}
.bill-name{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.bill-title{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:var(--r-sm);
  border:1px solid var(--neutral-line);
  background:var(--neutral-bg);
  font-size:var(--fs-label);
  line-height:18px;
  color:var(--text-2);
}

/* A status or role in words, tinted by what it means. The words carry the meaning; the tint only
   helps the eye group them. Long statuses wrap rather than spill. */
.tag{
  display:inline-block; max-width:100%;
  padding:1px 8px;
  border-radius:var(--r-sm);
  border:1px solid var(--neutral-line);
  background:var(--neutral-bg);
  color:var(--text-2);
  font-size:var(--fs-label); font-weight:600; line-height:18px;
  white-space:normal; overflow-wrap:anywhere;
}
.tag-success{color:var(--success); background:var(--success-bg); border-color:var(--success-line)}
.tag-danger{color:var(--danger); background:var(--danger-bg); border-color:var(--danger-line)}
.tag-warning{color:var(--warning); background:var(--warning-bg); border-color:var(--warning-line)}
.tag-info{color:var(--info); background:var(--info-bg); border-color:var(--info-line)}
.tag-accent{color:var(--accent-text); background:var(--accent-soft); border-color:rgba(164,151,255,.45)}

/* Term and value pairs. */
.kv{display:grid; grid-template-columns: 160px minmax(0, 1fr); gap:10px 16px; font-size:var(--fs-table)}
.kv > *{min-width:0; overflow-wrap:anywhere}
.k{color:var(--text-2); font-weight:500}
.v{color:var(--text)}

/* A boxed item: testimony entries, roll-call cells. */
.tl-item{padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-lg); background:rgba(255,255,255,.02)}
.tl-date{font-size:var(--fs-meta); color:var(--muted); font-variant-numeric:tabular-nums}
.tl-date > span + span{margin-left:12px; color:var(--muted2)}
.tl-desc{margin-top:2px; font-size:var(--fs-table); line-height:1.5}

/* The action timeline is a sequence, so it reads as one: a rail with a dot for each action, the
   newest filled. */
.timeline{display:flex; flex-direction:column; position:relative; padding-left:24px}
.timeline::before{content:''; position:absolute; left:6px; top:12px; bottom:12px; width:2px; border-radius:1px; background:rgba(255,255,255,.08)}
.timeline > .tl-item{position:relative; padding:6px 0 14px; border:0; border-radius:0; background:none}
.timeline > .tl-item::before{
  content:''; position:absolute; left:-22px; top:11px; width:10px; height:10px; border-radius:50%;
  background:var(--panel); border:2px solid var(--muted2);
}
.timeline > .tl-item:first-child::before{background:var(--accent-text); border-color:var(--accent-text)}

.split-votes{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width: 1100px){.split-votes{grid-template-columns:1fr}}

.vote-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.vote-title{font-weight:600}
.vote-meta{font-size:var(--fs-meta); color:var(--muted); font-variant-numeric:tabular-nums}

/* Elections' results: compact tables with a winner's and a failed measure's rows marked. */
.tbl{width:100%; border-collapse:collapse}
.tbl th, .tbl td{padding:10px 10px; border-top:1px solid var(--border); font-size:var(--fs-table)}
.tbl th{color:var(--text-2); font-weight:600; font-size:var(--fs-meta); text-align:left; background:var(--panel-2)}
.tbl td.num, .tbl th.num{text-align:right; font-variant-numeric:tabular-nums}
.tbl tr.winner td{background:#0e2110}
.tbl tr.winner td:first-child{border-left:3px solid #4ade80; font-weight:700}
.tbl tr.failed td{background:#271010}
.tbl tr.failed td:first-child{border-left:3px solid #ef4444}
.tbl tr:not(.winner):not(.failed) td:first-child{border-left:3px solid transparent}

/* Bill status pills */
.status-pill{display:inline-block; padding:1px 8px; border-radius:var(--r-sm); font-size:var(--fs-label); font-weight:600; line-height:18px}
.status-pill-passed{background:var(--success-bg); color:var(--success); border:1px solid var(--success-line)}
.status-pill-failed{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-line)}
.status-pill-pending{background:var(--neutral-bg); color:var(--text-2); border:1px solid var(--neutral-line)}
.status-pill[hidden]{display:none}
.status-text-passed{color:var(--success); font-size:var(--fs-small)}
.status-text-failed{color:var(--danger); font-size:var(--fs-small)}

/* Party color badges */
.party-badge{display:inline-block; padding:1px 8px; border-radius:var(--r-sm); font-size:var(--fs-label); font-weight:600; line-height:18px}
.party-rep{background:rgba(220,60,60,.18); color:#ffa0a0; border:1px solid rgba(220,60,60,.45)}
.party-dem{background:rgba(55,120,255,.18); color:#a3c1ff; border:1px solid rgba(55,120,255,.45)}
.party-lib{background:rgba(255,190,0,.16); color:#ffd060; border:1px solid rgba(255,190,0,.4)}
.party-ind{background:rgba(160,170,185,.14); color:#c3cbd8; border:1px solid rgba(160,170,185,.35)}
.party-other{background:var(--neutral-bg); color:var(--text-2); border:1px solid var(--neutral-line)}

.winner-star{color:#f5c518; margin-right:5px; font-size:var(--fs-label)}

/* Bill tracking (workspace) */
.tracked-star{color:#f5c518; text-align:center}

/* AI analysis panel (V7 BillSummary) */
/* Model-written, so it sits in its own quietly tinted panel rather than reading as the bill's own
   text. It leads with the takeaway, then the full reading at a reading size, its lines stopping at
   about eighty characters however wide the popup is. Which model wrote it, when and how sure it was
   come last and quietly: provenance, not content. */
.ai-summary{
  margin:16px 0;
  padding:16px 20px 14px;
  border:1px solid rgba(138,126,240,.24);
  border-radius:var(--r-lg);
  background:rgba(138,126,240,.06);
}
.ai-summary-head{display:flex; align-items:center; gap:6px 10px; margin-bottom:10px; flex-wrap:wrap}
.ai-summary-title{margin:0; font-size:var(--fs-table); font-weight:600; line-height:1.4; color:var(--accent-text)}
.ai-summary-meta{font-size:var(--fs-meta); color:var(--muted); margin-left:auto}
.ai-summary-short{margin:0 0 10px; max-width:68ch; font-family:var(--font-display); font-size:17px; font-weight:600; line-height:1.45; color:var(--text)}
.ai-summary-long{max-width:var(--measure); font-size:var(--fs-reading); line-height:var(--lh-reading); color:var(--text-2); white-space:pre-line; overflow-wrap:break-word}
.ai-summary-foot{display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:14px; padding-top:10px; border-top:1px solid rgba(138,126,240,.18); font-size:var(--fs-meta); color:var(--muted)}
.ai-summary-confidence{margin-top:10px; font-size:var(--fs-meta); color:var(--muted)}

/* Analysis describes superseded text: genuine caution, so the warning color, with its words. */
.ai-summary-stale{
  font-size:var(--fs-label); font-weight:600; line-height:18px;
  padding:1px 8px; border-radius:var(--r-sm);
  background:var(--warning-bg); color:var(--warning); border:1px solid var(--warning-line);
}
.ai-summary-stale-note{
  font-size:var(--fs-meta); line-height:1.5; color:var(--text);
  background:var(--warning-bg); border:1px solid var(--warning-line); border-left-width:3px;
  border-radius:var(--r-md); padding:8px 12px; margin-bottom:12px; max-width:var(--measure);
}

/* Not written yet: the section keeps its place, quietly, and says which absence it is. */
.ai-summary-empty{
  border-color:var(--border);
  background:rgba(255,255,255,.02);
}
.ai-summary-empty .ai-summary-title{color:var(--text-2)}
.ai-summary-placeholder{font-size:var(--fs-table); line-height:1.55; color:var(--text-2); max-width:var(--measure)}
.ai-summary-placeholder a{color:var(--accent-text)}

/* The perspective's score on a bill, and the contributions that make it. */
.score-line{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin:2px 0 6px}
.score-value{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.score-word{font-size:var(--fs-table); font-weight:600}
.is-favorable{color:var(--success)}
.is-adverse{color:var(--danger)}
.is-contested{color:var(--text-2)}
.score-note{margin:0 0 6px; font-size:var(--fs-meta); color:var(--muted); max-width:var(--measure)}
.score-drivers{list-style:none; margin:6px 0 0; padding:0; max-width:calc(var(--measure) + 80px)}
.score-driver{display:grid; grid-template-columns:56px minmax(0, 1fr); gap:12px; padding:8px 0; border-top:1px solid var(--border)}
.score-driver-value{text-align:right; font-size:var(--fs-table); font-weight:600; font-variant-numeric:tabular-nums}
.score-driver-what{font-size:var(--fs-table); font-weight:600; color:var(--text)}
.score-driver-why{margin-top:2px; font-size:var(--fs-meta); line-height:1.5; color:var(--text-2)}

/* How a bill did in testimony, at a glance. The three colors were checked against the panel for
   color-blind readers; the gray is dark on purpose, because at the teal's brightness the two
   read as one color. Every number is printed above the bar, so color never carries it alone. */
.testimony-result{
  margin-bottom:14px;
  padding:14px 16px 12px;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:rgba(0,0,0,.15);
}
.testimony-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:10px}
.testimony-stat-label{display:flex; align-items:center; gap:6px; font-size:var(--fs-meta); color:var(--text-2)}
.testimony-stat-figure{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px}
.testimony-stat:nth-child(2) > *{justify-content:center}
.testimony-stat:nth-child(3) > *{justify-content:flex-end}
.testimony-stat-value{font-size:30px; font-weight:600; line-height:1.2}
.testimony-stat-share{font-size:var(--fs-small); color:var(--muted)}
/* A side nobody took stays readable but steps back, so the eye lands on the sides people did. */
.testimony-stat.is-zero .testimony-stat-value{color:var(--muted2)}
.testimony-swatch{width:10px; height:10px; border-radius:3px; flex-shrink:0}
.testimony-bar{display:flex; gap:2px; height:14px; border-radius:4px; overflow:hidden}
.testimony-bar > div{flex-basis:0; min-width:4px}
.testimony-favor{background:#0da8a3}
.testimony-neutral{background:#545d6d}
.testimony-opposed{background:#ec485c}
.testimony-total{margin-top:8px; font-size:var(--fs-meta); color:var(--muted)}

/* Position pills — NDSC color contract:
   support=green / oppose=red / neutral=gray / monitor=blue.
   (Priority has no pill: /Tracked renders it as an inline editable select.) */
.pos-pill{display:inline-block; padding:1px 8px; border-radius:var(--r-sm); font-size:var(--fs-label); font-weight:600; line-height:18px}
.pos-support{background:var(--success-bg); color:var(--success); border:1px solid var(--success-line)}
.pos-oppose{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-line)}
.pos-neutral{background:var(--neutral-bg); color:var(--text-2); border:1px solid var(--neutral-line)}
.pos-monitor{background:var(--info-bg); color:var(--info); border:1px solid var(--info-line)}

/* Client workspace (Clients, Contact Log, the legislator profile's client card). */
.client-bar{display:flex; align-items:center; gap:8px; margin:0}
/* A message after something was done or refused, at the top of what it is about. Plain
   confirmations are informational; a refusal is danger; caution is warning. The bar at the left
   says which at a glance, the words say it outright. */
.flash{
  margin-bottom:12px; padding:10px 14px; border-radius:var(--r-md);
  font-size:var(--fs-table); line-height:1.5; color:var(--text);
  border:1px solid var(--info-line); border-left-width:3px; background:var(--info-bg);
}
.flash-success{border-color:var(--success-line); background:var(--success-bg)}
.flash-warning{border-color:var(--warning-line); background:var(--warning-bg)}
.flash-danger{border-color:var(--danger-line); background:var(--danger-bg)}
.flash a{color:var(--accent-text)}
.btn-small{padding:5px 12px; font-size:13px; line-height:18px; border-radius:var(--r-sm)}
.btn-quiet, .btn-secondary{background:var(--raised); border-color:var(--control-border); color:var(--text); font-weight:500}
.btn-quiet:hover, .btn-secondary:hover{background:var(--raised-hover); border-color:var(--control-border-hover); color:var(--text)}
.btn-danger{background:var(--danger-bg); border-color:var(--danger-line); color:#ffc2c8}
.btn-danger:hover{background:rgba(229,72,77,.26); border-color:var(--danger-line); color:#ffd4d8}
.inline-form{display:inline; margin:0}
.row-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px 16px}
/* A field: its label in readable type above it, an optional hint under it. */
.form-field{display:flex; flex-direction:column; gap:6px; min-width:0}
.form-field label, .field-label{font-size:var(--fs-field-label); font-weight:500; line-height:1.4; color:var(--text-2)}
.form-field textarea{min-height:96px; resize:vertical}
.field-optional{font-weight:400; color:var(--muted)}
.field-hint{margin:0; font-size:var(--fs-meta); line-height:1.45; color:var(--muted)}
.field-hint a{color:var(--accent-text)}
/* A field straight after a row of fields in the same form keeps the rows' rhythm. */
.form-grid + .form-field, .form-field + .form-grid{margin-top:14px}
.field-error{margin:0; font-size:var(--fs-meta); line-height:1.45; color:var(--danger)}
.form-actions{display:flex; gap:8px 12px; align-items:center; margin-top:16px; flex-wrap:wrap}
.form-actions .meta{flex:1 1 240px; min-width:0}
/* Fields that belong together on one line where there is room (a client and its dates), their
   button lined up with the boxes rather than the labels. */
.field-row{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 14px}
.field-row > .form-field{flex:0 1 auto}
.field-row > .btn{min-height:38px}

/* A list of choices to tick: the box beside the first line of its words, what it is in reading
   type, and the details on a quieter line under it. */
.check-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.check-list > li + li{border-top:1px solid var(--border)}
.check-row{display:grid; grid-template-columns:20px minmax(0, 1fr); column-gap:12px; align-items:start; padding:10px 0; cursor:pointer}
.check-row > input[type=checkbox]{width:16px; height:16px; margin:3px 0 0; cursor:pointer}
.check-main{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; color:var(--text); line-height:1.45}
.check-meta{margin-top:2px; font-size:var(--fs-meta); line-height:1.45; color:var(--muted)}
.check-desc{margin-top:4px; font-size:var(--fs-table); line-height:1.55; color:var(--text-2); max-width:var(--measure); overflow-wrap:anywhere; white-space:pre-line}
/* Long words are cut to three lines once script has measured them, with a button to read the rest;
   without script they show in full. */
.check-desc.is-clamped{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.check-more{margin:4px 0 0 32px}
.check-row:hover .check-main{color:#fff}

/* A compact line in place of an empty card: what is missing, and the one thing to do about it. */
.notice{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 12px 10px 16px;
  border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--panel);
  font-size:var(--fs-table); line-height:1.5; color:var(--text-2);
}
.notice > .icon{color:var(--muted)}
.notice-text{flex:1 1 240px; min-width:0}
.notice-action{flex:none}

/* Modal dialogs (the contact report): the browser's default is a white box on a dark page. */
dialog.dialog{
  width:min(560px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:18px 20px;
  box-shadow:var(--shadow);
  overscroll-behavior:contain;
  scrollbar-color:#3a3e4c transparent;
}
dialog.dialog::backdrop{background:rgba(6,8,12,.66)}
/* The page behind an open popup stays put. Rolling the wheel at the popup's top or bottom used to
   scroll the bill list underneath. The gutter keeps the page from shifting sideways when its
   scrollbar goes away. */
html:has(dialog.dialog[open]){overflow:hidden; scrollbar-gutter:stable}
/* The contact form: two columns of fields, so wider than the report. */
dialog.dialog-wide{width:min(880px, calc(100vw - 32px))}
/* One bill: everything about it, so as wide as the screen allows. The head stays in view while
   a long bill scrolls, so Close is always there; it carries the dialog's top padding itself. */
dialog.dialog-bill{width:min(1100px, calc(100vw - 32px)); padding:0 24px 24px}
dialog.dialog-bill .dialog-head{margin:0 -24px 16px; padding:16px 24px 14px; align-items:center}
@media (max-width: 600px){
  dialog.dialog-bill{width:calc(100vw - 16px); max-height:calc(100vh - 16px); padding:0 16px 16px}
  dialog.dialog-bill .dialog-head{margin:0 -16px 14px; padding:12px 16px}
  .bill-fact + .bill-fact{border-left:0; border-top:1px solid var(--border)}
}
/* The top of a bill: what it does in plain words, its legal title under that, then a band of the
   facts people look for first, side by side so they use the popup's width. */
.bill-overview{margin:0 0 18px}
.bill-lead{
  font-family:var(--font-display); font-size:17px; font-weight:500; line-height:1.45; max-width:50rem;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bill-legal-title{
  margin-top:6px; font-size:var(--fs-small); line-height:1.55; color:var(--muted); max-width:50rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.bill-lead.is-open, .bill-legal-title.is-open{display:block; overflow:visible}
.link-btn{font:inherit; font-size:var(--fs-small); color:var(--accent-text); background:none; border:0; padding:0; margin-top:4px; cursor:pointer}
.link-btn:hover{text-decoration:underline}
.bill-facts{
  display:flex; flex-wrap:wrap; margin-top:16px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:rgba(255,255,255,.025);
}
.bill-fact{flex:1 1 200px; padding:12px 16px; min-width:0}
.bill-fact-wide{flex:2 1 320px}
.bill-fact + .bill-fact{border-left:1px solid var(--border)}
.bill-fact-label{font-size:var(--fs-meta); font-weight:500; color:var(--text-2); margin-bottom:4px}
.bill-fact-value{font-size:var(--fs-body)}
.bill-fact-value a, .sponsor-others a, .bill-fact a{color:var(--accent-text); text-decoration:none}
.bill-fact a:hover{text-decoration:underline}
.bill-fact-note{font-size:var(--fs-meta); color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums}
.dialog-title-row{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; min-width:0}
.dialog-head .card-title{font-size:var(--fs-dialog); letter-spacing:-.01em}
.dialog-close .icon{width:16px; height:16px}
.sponsor-others{margin-top:4px; line-height:1.7}
/* A dialog's own actions, at its foot. In a dialog taller than the window they stay in view at its
   bottom edge while the fields scroll under them, so the way to save or cancel is never off screen. */
.dialog-actions{display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border)}
dialog.dialog .dialog-actions{position:sticky; bottom:-18px; z-index:1; margin:16px -20px -18px; padding:14px 20px 18px; background:var(--panel)}

/* Tabs: a line under the row, and the current tab unmistakable: bright text, heavier weight and a
   thick purple bar under it, with its count tinted to match. */
.tab-nav{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:16px}
.tab-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-size:14px; font-weight:500; color:var(--muted);
  background:none; border:0; border-radius:var(--r-sm) var(--r-sm) 0 0;
  padding:12px 14px; margin-bottom:-1px;
  cursor:pointer; transition:color .12s ease, background-color .12s ease;
}
.tab-btn::after{
  content:''; position:absolute; left:8px; right:8px; bottom:0; height:3px;
  border-radius:3px 3px 0 0; background:transparent;
}
.tab-btn:hover{color:var(--text); background:var(--hover)}
.tab-btn.active, .tab-btn[aria-selected="true"]{color:var(--text); font-weight:600}
.tab-btn.active::after, .tab-btn[aria-selected="true"]::after{background:var(--accent-text)}
.tab-btn:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.tab-count{
  min-width:22px; padding:0 7px; border-radius:999px;
  background:var(--neutral-bg); color:var(--text-2);
  font-size:var(--fs-label); font-weight:600; line-height:18px; text-align:center;
  font-variant-numeric:tabular-nums;
}
.tab-btn.active .tab-count, .tab-btn[aria-selected="true"] .tab-count{background:var(--accent-soft); color:var(--text)}

/* A row of filters over a list: a search field taking the room, the toggles beside it, wrapping
   on a narrow screen. */
.toolbar{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; margin-bottom:12px}
.toolbar-search{flex:1 1 280px; max-width:560px; min-width:0}
.toolbar-filter{display:flex; flex-direction:column; min-width:0}
.field-label{display:block; margin-bottom:6px}
.form-field .field-label{margin-bottom:0}
.input-with-icon{position:relative}
.input-with-icon > .icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none}
.input-with-icon > .input{padding-left:38px}
.result-count{font-size:var(--fs-small); color:var(--muted); margin:0 0 10px; font-variant-numeric:tabular-nums}

/* Toggle buttons that act as one control (All / Prime / Co-sponsor). The picked one is filled. */
.segmented{
  display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px;
  background:var(--bg); border:1px solid var(--control-border); border-radius:var(--r-md);
}
.segmented-btn{
  display:inline-flex; align-items:center; gap:6px;
  min-height:30px; padding:4px 12px;
  font:inherit; font-size:13px; font-weight:500; color:var(--text-2); white-space:nowrap;
  background:transparent; border:0; border-radius:var(--r-sm);
  cursor:pointer;
}
.segmented-btn:hover{color:var(--text); background:var(--hover)}
.segmented-btn[aria-pressed="true"]{background:var(--accent); color:#fff; font-weight:600}
.segmented-btn .seg-count{font-variant-numeric:tabular-nums; color:var(--muted)}
.segmented-btn[aria-pressed="true"] .seg-count{color:#fff}
.segmented-btn:focus-visible{outline:2px solid var(--focus); outline-offset:1px}

/* Version Compare tab: one row per version with a From and a To pick. The two picked rows carry the
   selection purple and the versions between them a faint band of it; a pick that would put From
   after To is turned off rather than swapped, so the columns always say what is compared. */
.vc-intro{margin:0 0 10px; font-size:var(--fs-table); color:var(--text-2)}
.version-picker{border:1px solid var(--border); border-radius:var(--r-lg); border-collapse:separate; border-spacing:0; overflow:hidden}
.version-picker tbody tr:first-child td{border-top:1px solid var(--border-strong)}
.version-picker th.pick, .version-picker td.pick{width:52px; text-align:center}
.version-picker td{vertical-align:top; padding-top:7px; padding-bottom:7px}
.version-picker input[type=radio]{width:16px; height:16px; margin:2px 0 0; accent-color:var(--accent); color-scheme:dark; cursor:pointer}
.version-picker input[type=radio]:disabled{opacity:.3; cursor:not-allowed}
.version-picker tr.is-picked td{background:var(--accent-soft)}
.version-picker tr.is-between td{background:rgba(108,92,231,.07)}
.version-picker .version-lc{font-size:var(--fs-label); color:var(--muted); margin-top:2px}
/* Each version says what reaching it did: an amendment that changed the bill is tagged in the info
   blue, with its words; a reprint is quieter, so the amendments stand out. */
.version-picker .version-reprint{color:var(--muted)}
.version-picker .version-tag{margin-left:8px; vertical-align:1px}
.version-picker td.version-pdf{text-align:right; white-space:nowrap}
.version-picker td.version-pdf a{color:var(--accent-text)}

/* The answer for the picked pair: one reading surface. The pair as its heading, then the short
   answer as the largest text, what changed with room between the changes, and the supporting detail
   closed at the foot. Figures stay in the neutral text colors; amber only where something is
   uncertain or out of date. */
.vc-result{--vc-measure:40rem; margin-top:20px; padding:20px 24px 8px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel-2)}
.vc-result-head{padding-bottom:14px; border-bottom:1px solid var(--border)}
.vc-result-kicker{margin:0 0 2px; font-size:var(--fs-meta); color:var(--muted)}
.vc-result-title{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin:0; font-family:var(--font-display); font-size:19px; font-weight:600; line-height:1.35; color:var(--text)}
.vc-arrow{color:var(--muted); font-weight:400}
.vc-result-tools{display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:10px; font-size:var(--fs-meta)}
.vc-pdf{display:inline-flex; align-items:center; gap:4px; color:var(--accent-text)}
.vc-result-tools .btn{margin-left:auto}
.vc-loading{margin:16px 0 14px; font-size:var(--fs-table); color:var(--muted)}
.vc-answer{padding:16px 0 4px}
.vc-verdict{margin:0 0 12px}
.vc-label{margin:0 0 6px; font-size:var(--fs-table); font-weight:600; line-height:1.4; color:var(--text-2)}
.vc-short{margin:0; max-width:var(--vc-measure); font-size:17px; line-height:var(--lh-reading); color:var(--text)}
.vc-between, .vc-message{margin:12px 0 0; max-width:var(--vc-measure); font-size:var(--fs-body); line-height:var(--lh-reading); color:var(--text-2)}
.vc-between .link-btn{font-size:var(--fs-body); margin-top:0}
.vc-caution{margin:12px 0 0; max-width:var(--vc-measure); padding:10px 14px; border-left:3px solid var(--warning-line); border-radius:0 var(--r-md) var(--r-md) 0; background:var(--warning-bg); font-size:var(--fs-body); line-height:1.55; color:var(--text)}
.vc-suggestions{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.vc-section{margin-top:18px; padding-top:16px; border-top:1px solid var(--border)}
.vc-items{margin:0; padding:0; list-style:none; max-width:var(--vc-measure)}
.vc-item + .vc-item{margin-top:18px}
.vc-item-title{margin:0; font-size:var(--fs-reading); font-weight:600; line-height:1.45; color:var(--text)}
.vc-item-text{margin:4px 0 0; font-size:var(--fs-reading); line-height:var(--lh-reading); color:var(--text-2)}
.vc-ba{display:grid; gap:4px; margin:10px 0 0}
.vc-ba-row{display:grid; grid-template-columns:64px minmax(0, 1fr); gap:12px; align-items:baseline}
.vc-ba dt{font-size:var(--fs-meta); color:var(--muted)}
.vc-ba dd{margin:0; font-size:var(--fs-body); line-height:1.5; color:var(--text)}
.vc-item-law{margin:8px 0 0; font-size:var(--fs-table); line-height:1.55; color:var(--muted)}
.vc-item-law-label{color:var(--text-2)}
.vc-more{margin-top:16px; max-width:var(--vc-measure)}
.vc-more > summary{cursor:pointer; font-size:var(--fs-table); color:var(--accent-text); padding:2px 0}
.vc-more[open] > summary{margin-bottom:14px}
.vc-prose{margin:0; max-width:var(--vc-measure); font-size:var(--fs-reading); line-height:var(--lh-reading); color:var(--text-2)}
.vc-limits{margin:0; padding-left:20px; max-width:var(--vc-measure)}
.vc-limits li{margin:4px 0; font-size:var(--fs-body); line-height:1.55; color:var(--text-2)}
.vc-limits li::marker{color:var(--warning)}
.vc-support{margin-top:18px; border-top:1px solid var(--border)}
.vc-disclosure{border-bottom:1px solid var(--border)}
.vc-support .vc-disclosure:last-child{border-bottom:0}
.vc-disclosure > summary{display:grid; grid-template-columns:14px minmax(0, 1fr); column-gap:12px; row-gap:2px; align-items:baseline; padding:12px 0; cursor:pointer; list-style:none}
.vc-disclosure > summary::-webkit-details-marker{display:none}
.vc-disclosure > summary::before{content:'\25B8'; grid-row:1; grid-column:1; color:var(--muted); transition:transform .12s ease}
.vc-disclosure > summary > span{grid-column:2}
.vc-disclosure[open] > summary::before{transform:rotate(90deg)}
.vc-disclosure-title{font-size:var(--fs-body); font-weight:600; color:var(--text)}
.vc-disclosure-meta{font-size:var(--fs-meta); color:var(--muted)}
.vc-disclosure-note{margin:0 0 10px 26px; max-width:var(--vc-measure); font-size:var(--fs-meta); line-height:1.5; color:var(--muted)}
.vc-history{margin:0 0 12px 26px; padding:0; list-style:none; max-width:var(--vc-measure)}
.vc-history-step{padding:10px 0}
.vc-history-step + .vc-history-step{border-top:1px solid var(--border)}
.vc-history-head{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px}
.vc-history-title{font-size:var(--fs-table); font-weight:600; color:var(--text)}
.vc-history-text{margin:4px 0 0; font-size:var(--fs-table); line-height:1.55; color:var(--text-2)}
.vc-history-more{margin-top:4px}
.vc-history-more > summary{cursor:pointer; font-size:var(--fs-meta); color:var(--accent-text)}
.vc-history-more ul{margin:6px 0 0; padding-left:18px}
.vc-history-more li{margin:3px 0; font-size:var(--fs-meta); line-height:1.5; color:var(--text-2)}
.vc-source-group{margin:0 0 14px 26px; max-width:var(--vc-measure)}
.vc-source-title{margin:0 0 6px; font-size:var(--fs-table); font-weight:600; color:var(--text)}
.vc-quote{margin:0 0 8px}
.vc-quote blockquote{margin:0; padding:4px 0 4px 12px; border-left:3px solid var(--border-strong); font-size:var(--fs-table); line-height:1.55; color:var(--text-2); overflow-wrap:anywhere}
.vc-quote figcaption{margin:2px 0 0 15px; font-size:var(--fs-meta); color:var(--muted)}
.vc-about{display:grid; gap:6px; margin:0 0 14px 26px; max-width:var(--vc-measure)}
.vc-about-row{display:grid; grid-template-columns:150px minmax(0, 1fr); gap:12px}
.vc-about dt{font-size:var(--fs-meta); color:var(--muted)}
.vc-about dd{margin:0; font-size:var(--fs-meta); line-height:1.5; color:var(--text-2); overflow-wrap:anywhere}
@media (prefers-reduced-motion: reduce){ .vc-disclosure > summary::before{transition:none} }
@media (max-width: 640px){
  .vc-result{padding:16px 16px 4px}
  .vc-result-title{font-size:18px}
  .vc-result-tools .btn{margin-left:0}
  .vc-short{font-size:var(--fs-reading)}
  .vc-about-row{grid-template-columns:minmax(0, 1fr); gap:0}
  .vc-disclosure-note, .vc-history, .vc-source-group, .vc-about{margin-left:0}
}

/* Roll call votes in the popup: the tally in words and color, the motion, then every member in
   columns, the whole list in the popup's own scroll rather than a box of its own. */
.vote-tally{display:flex; flex-wrap:wrap; gap:4px 14px; margin-bottom:6px; font-size:var(--fs-meta); font-weight:600; font-variant-numeric:tabular-nums}
.vote-yea{color:var(--accent2)}
.vote-nay{color:var(--danger)}
.vote-other{color:var(--muted)}
.vote-result{margin-left:auto}
.vote-desc{margin-bottom:10px; font-size:var(--fs-meta); line-height:1.5; color:var(--muted)}
.vote-list{columns:3 150px; column-gap:16px; font-size:var(--fs-meta); line-height:1.5}
.vote-member{display:flex; align-items:center; gap:6px; padding:2px 0; break-inside:avoid; color:var(--text-2)}
.vote-dot{width:8px; height:8px; border-radius:50%; flex:none; background:rgba(231,238,252,.4)}
.vote-dot.is-yea{background:var(--accent2)}
.vote-dot.is-nay{background:#ff5a6b}

/* Testimony entries: who, where they come from, and which side, with the document beside it. */
.testimony-entry{display:flex; justify-content:space-between; gap:12px}
.testimony-who{font-size:var(--fs-table); color:var(--text)}
.testimony-from{margin-top:2px; font-size:var(--fs-meta); color:var(--muted)}
.testimony-side{flex:none; text-align:right; font-size:var(--fs-meta); white-space:nowrap}
.testimony-side a{color:var(--accent-text)}
.testimony-hearing{margin-bottom:12px}
.testimony-hearing > summary{cursor:pointer; margin-bottom:8px; font-size:var(--fs-table); font-weight:600; color:var(--text)}
.testimony-hearing .tl-item + .tl-item{margin-top:6px}
.side-for{color:var(--accent2)}
.side-against{color:var(--danger)}
.side-other{color:var(--text-2)}
/* A note about where the tab's data comes from, or why there is none: plain words, readable. */
.pane-note{margin:12px 0 0; font-size:var(--fs-meta); line-height:1.55; color:var(--muted); max-width:var(--measure)}
.pane-note:first-child{margin-top:0}
.pane-note a, .pane-empty a{color:var(--accent-text)}
.pane-empty{margin:0; font-size:var(--fs-table); line-height:1.55; color:var(--text-2); max-width:var(--measure)}

/* Tracking a bill, in its popup: the firm's own settings, then each client's position. */
/* Its own area under the tabs, apart from the bill's text and versions above it. */
.bill-tracking{margin-top:36px; padding-top:22px; border-top:1px solid var(--border-strong)}
.bill-tracking-title{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:var(--fs-card); font-weight:600; font-family:var(--font-display); color:var(--text)}
.bill-tracking .form-grid{max-width:560px}
.check-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:6px 16px; max-width:560px}
.check-inline{display:flex; align-items:center; gap:8px; font-size:var(--fs-table); color:var(--text); cursor:pointer}
.check-inline input{width:16px; height:16px; margin:0; flex:none}
.fieldset{border:0; margin:16px 0 0; padding:0; min-width:0}
.fieldset > legend{padding:0; margin-bottom:8px; font-size:var(--fs-field-label); font-weight:500; color:var(--text-2)}

/* Two versions side by side (BillCompare), each PDF in its own frame. */
.compare-title{max-width:120ch}
.compare-picker{margin-bottom:16px}
.compare-picker select{width:auto; max-width:min(420px, 100%)}
.compare-pane-title{margin:0; font-size:var(--fs-body); font-weight:600; color:var(--text)}
.compare-pane-open{display:inline-flex; align-items:center; gap:4px; font-size:var(--fs-meta); color:var(--accent-text); text-decoration:none}
.compare-pane-open:hover{text-decoration:underline}
/* Each pane spans two shared rows, so a label that wraps on one side doesn't push its PDF lower
   than the other one. */
.compare-panes{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:auto 1fr; gap:6px 14px}
.compare-pane{display:grid; grid-row:span 2; grid-template-rows:subgrid}
.compare-pane-head{display:flex; align-items:baseline; gap:4px 10px; flex-wrap:wrap}
.compare-frame{
  display:block; width:100%; height:calc(100vh - 260px); min-height:480px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:#fff;
}
@media (max-width: 1000px){
  .compare-panes{grid-template-columns:1fr; grid-template-rows:none}
  .compare-pane{grid-row:auto; grid-template-rows:auto 1fr}
}
.dialog-head{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin:0 -20px 14px;
  padding:18px 20px 12px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}

/* A term with a definition: a dotted underline says there's one, and it shows on hover or when
   the term has keyboard focus. The definition is real text inside the term, so a screen reader
   reads it too. */
.term{position:relative; border-bottom:1px dotted rgba(235,232,241,.55); cursor:help}
.term:focus-visible{outline:none; border-bottom-color:var(--accent-text)}
.term-tip{
  position:absolute; left:0; bottom:calc(100% + 8px); z-index:30;
  width:max-content; max-width:min(340px, 80vw);
  padding:9px 12px; border-radius:var(--r-md);
  background:#2b3140; color:var(--text); border:1px solid var(--border-strong);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  font-size:var(--fs-small); font-weight:400; line-height:1.5; text-align:left; white-space:normal;
  visibility:hidden; opacity:0; transform:translateY(4px); pointer-events:none;
  transition:opacity .12s ease, transform .12s ease, visibility .12s;
}
.term:hover .term-tip, .term:focus-visible .term-tip{visibility:visible; opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ .term-tip{transition:none; transform:none} }

/* The contact log's filter bar: fields side by side, wrapping on a narrow screen. */
.filter-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:12px}
.filter-bar .filter-search{flex:1 1 240px}
.filter-bar select.input, .filter-bar input[type="date"].input{width:auto; min-width:150px}
.filter-check{display:flex; gap:6px; align-items:center; font-size:14px; color:var(--text); padding-bottom:10px; white-space:nowrap}
.filter-actions{display:flex; gap:10px; align-items:center; padding-bottom:6px}

/* The Bills page: three pickers sharing the width, with the tracking box beside them. */
.bills-filters{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; gap:10px; align-items:end}
@media (max-width: 1100px){ .bills-filters{grid-template-columns:1fr 1fr} }
.filter-chips{margin-top:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.filter-chip{display:inline-block; padding:2px 10px; border-radius:var(--r-sm); font-size:var(--fs-label); font-weight:600; background:var(--accent-soft); color:var(--text)}
.filter-chips a{font-size:var(--fs-small); color:var(--muted); text-decoration:none}
.filter-chips a:hover{color:var(--text); text-decoration:underline}
/* A score column with nothing to show: scored but irrelevant, or not scored yet. */
.score-na{text-align:center; font-size:var(--fs-small); color:var(--muted2); cursor:help}
.pager{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; font-size:var(--fs-small); color:var(--muted)}
.pager-sizes{margin-left:auto; display:flex; gap:6px; align-items:center}
.label-chip{
  display:inline-block; padding:1px 8px; border-radius:var(--r-sm); font-size:var(--fs-label); font-weight:600;
  line-height:18px; color:var(--text); white-space:nowrap;
}
.label-chips{display:flex; flex-wrap:wrap; gap:4px}
.note-item{padding:12px 0; border-bottom:1px solid var(--border)}
.note-item:last-child{border-bottom:0}
.note-body{white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--fs-table); line-height:1.6; max-width:var(--measure)}
.note-meta{font-size:var(--fs-meta); color:var(--muted); margin-top:4px; display:flex; gap:4px 10px; align-items:center; flex-wrap:wrap}
.note-item details summary{cursor:pointer; color:var(--muted); font-size:var(--fs-small)}
.followup-due{color:#f59e0b; font-weight:600}
.nav-count{margin-left:auto; min-width:20px; padding:1px 7px; border-radius:999px; background:#f59e0b; color:#111; font-size:var(--fs-label); font-weight:700; text-align:center; line-height:18px}

/* Sign-in pages: one card in the middle of the screen, no shell. */
.auth-body{display:grid; place-items:center; min-height:100vh; padding:24px}
.auth-shell{width:100%; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:18px}
/* The logo is about four times as wide as it is tall, so it needs the width to be read. */
.auth-brand img{width:min(320px, 100%); height:auto}
.auth-card{width:100%}
/* On a sign-in page the card's title is the page's own heading. */
.auth-card .card-title{font-size:var(--fs-dialog)}
.auth-card .card-body{display:flex; flex-direction:column; gap:12px}
.auth-card .input{width:100%}
.auth-check{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text-2)}
.auth-foot{font-size:var(--fs-small); color:var(--muted)}
/* The shell's sign-out form sits in the person's menu. */
.topbar-form{display:inline; margin:0}
.logo-preview{max-width:260px; max-height:120px; background:#fff; padding:10px; border-radius:var(--r-lg)}
a.btn{text-decoration:none}
/* Admin and Firm pages: a temporary password shown once, row actions, the day's log. */
.temp-password-box{border-color:rgba(111,98,224,.45); background:var(--accent-soft)}
.temp-password{margin-top:8px; font-size:20px; font-weight:600; letter-spacing:.08em; font-variant-numeric:tabular-nums; user-select:all}
.row-actions form{margin:0; display:inline}
.log-view{margin:0; padding:12px; border-radius:var(--r-lg); background:rgba(0,0,0,.28); font-size:var(--fs-meta); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; max-height:520px; overflow:auto; color:var(--text)}
/* The perspective editor: a weight per group, with optional subject areas. */
.input-narrow{width:110px}
.weights-table td{vertical-align:top}
.weights-table details summary{cursor:pointer}
.scope-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:4px 12px; margin:8px 0}
.scope-option{display:flex; align-items:center; gap:6px; font-size:var(--fs-small)}
.preview-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width: 1100px){ .preview-grid{grid-template-columns:1fr} }
/* The Error page's exception, development only. */
.error-details{white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--fs-meta); line-height:1.45; max-height:320px; overflow:auto; color:var(--muted); margin:8px 0 0}
/* Bills list: the bill name is a real link (keyboard reachable); it reads like the cell did. */
.bill-link{color:inherit; text-decoration:none}
.bill-link:hover, .bill-link:focus-visible{text-decoration:underline}
.bill-link:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:4px}
/* Beside every save that files under a client: where it goes and the perspective it is scored through. */
.filing-under{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; font-size:var(--fs-small); color:var(--muted); margin:0 0 8px}
.filing-under strong{color:var(--text); font-weight:600}
.filing-under a{color:var(--accent-text); text-decoration:none}
.filing-under a:hover, .filing-under a:focus-visible{text-decoration:underline}

/* A profile's top line (a legislator's, a committee's): the way back to its list on the left, the
   page's Help link on the right. */
.profile-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 12px}
.back-link{
  display:inline-flex; align-items:center; gap:6px; padding:2px 4px 2px 0;
  font-size:var(--fs-table); font-weight:500; color:var(--accent-text); text-decoration:none;
  border-radius:var(--r-sm);
}
.back-link:hover{text-decoration:underline}
/* A member's role on a committee, set apart by weight rather than color. */
.committee-role-chair{font-weight:600; color:var(--text)}
.committee-role-vice{font-weight:600; color:var(--text-2)}
.committee-role-member{color:var(--muted)}

/* Keyboard: a skip link for people tabbing from the top, visible only while it has focus. */
.skip-link{position:absolute; left:-9999px; top:8px; z-index:200; padding:8px 12px; border-radius:var(--r-md); background:var(--accent); color:#fff; text-decoration:none; font-weight:600}
.skip-link:focus{left:8px}

/* The Menu button and the dimmed page behind the open drawer (narrow windows only). */
.nav-toggle{
  display:none; align-items:center; gap:8px;
  height:38px; padding:0 12px;
  font:inherit; font-size:14px; font-weight:600; color:var(--text);
  background:var(--raised); border:1px solid var(--control-border); border-radius:var(--r-md);
  cursor:pointer; white-space:nowrap;
}
.nav-backdrop{position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.55)}
.topbar-left{display:flex; align-items:center; gap:12px; min-width:0}

/* Medium windows: a narrower menu and the person's name folded into the avatar; just above the
   drawer width the context labels are read by screen readers but not shown, so the bar stays on
   one line. */
@media (max-width: 1280px){
  .account-trigger-name{display:none}
}
@media (max-width: 1180px){
  :root{--nav-w:224px}
  .topbar-context{gap:var(--s4)}
}
@media (max-width: 940px){
  .topbar .ctx-label{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
}

/* Phone and narrow windows: the menu becomes a drawer behind a Menu button, the context bar
   stacks, and wide tables scroll inside their own box instead of widening the whole page. */
@media (max-width: 900px){
  .app-shell{grid-template-columns:1fr; min-height:100vh}
  .app-nav{
    position:fixed; top:0; bottom:0; left:0; height:auto;
    width:min(300px, 86vw); z-index:120;
    transform:translateX(-100%); visibility:hidden;
    transition:transform .2s ease, visibility 0s linear .2s;
    box-shadow:var(--shadow);
  }
  body.nav-open .app-nav{transform:none; visibility:visible; transition:transform .2s ease, visibility 0s}
  .nav-close{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:10px; right:10px; width:36px; height:36px;
    color:var(--text); background:transparent; border:1px solid var(--border-strong); border-radius:var(--r-md);
    cursor:pointer;
  }
  .nav-toggle{display:inline-flex}
  .topbar{position:static; height:auto; flex-wrap:wrap; padding:10px 16px; gap:10px}
  .topbar-utilities{order:1}
  .topbar-context{order:2; flex:1 1 100%; flex-direction:column; align-items:stretch; gap:8px}
  .topbar .ctx-label{position:static; width:64px; height:auto; margin:0; overflow:visible; clip:auto; flex:none}
  .ctx{width:100%}
  .ctx-session .ctx-select, .ctx-client .ctx-select{flex:1 1 auto; width:auto}
  .ctx-link{width:100%; justify-content:center}
  .workspace{padding:16px}
  .page-head{margin-bottom:var(--s4)}
  .page-title{font-size:24px}
  .card-header, .card-body{padding:14px 16px}
  .table{display:block; position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .bills-filters, .form-grid, .kv{grid-template-columns:1fr}
  .pager-sizes{margin-left:0}
  /* 16px stops phones zooming the page when a field takes focus. */
  .input, select, textarea{font-size:16px}
}
@media (prefers-reduced-motion: reduce){ .app-nav{transition:none} }
/* Shared editing: what someone else saved while you were editing, and an item's earlier versions. */
.conflict-box{margin:8px 0; padding:10px 12px; border-radius:var(--r-lg); border:1px solid var(--danger-line); background:var(--danger-bg); font-size:var(--fs-small); color:var(--text)}
.conflict-box .note-body{color:var(--text)}
.history-item{padding:8px 0; border-top:1px solid var(--border); font-size:var(--fs-meta)}
.history-item .small{color:var(--muted); margin-bottom:2px}

/* Support: one ticket (Support/Ticket). The conversation leads, two-thirds and more of the width, with
   the composer under it and a quieter details column beside it; on a narrow window the details follow
   the composer. Entries share one surface and are parted by hairlines, not boxed one by one. A message
   is set for reading (15px, roomy lines, a measure), keeping the line breaks people typed. An internal
   note is boxed in a dashed amber edge on an amber wash, and says "Internal note · Staff only" beside a
   lock, so it never rests on color. A status change is a compact line with its transition. The composer
   is the one place to act: its submit button is the page's one primary action, and it turns amber-edged
   while it holds a note. Tokens added after this was written are used with their values as fallbacks. */
.ticket-page{max-width:1360px}
.ticket-page [hidden]{display:none !important}
.ticket-head{margin:0 0 var(--s5)}
.ticket-head-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
.ticket-back{
  display:inline-flex; align-items:center; gap:6px; padding:2px 4px 2px 0; border-radius:var(--r-sm);
  font-size:14px; font-weight:500; color:var(--accent-text); text-decoration:none;
}
.ticket-back:hover{text-decoration:underline}
.ticket-title{
  margin:0; max-width:60ch;
  font-family:var(--font-display); font-size:28px; font-weight:600; line-height:1.2; letter-spacing:-.015em;
  color:var(--text); overflow-wrap:anywhere;
}
.ticket-context{display:flex; flex-wrap:wrap; row-gap:2px; margin:8px 0 0; font-size:var(--fs-small); line-height:1.5; color:var(--muted)}
.ticket-context > span + span::before{content:"·"; margin:0 8px; color:var(--muted2)}
.ticket-badges{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px}
/* The status, larger than the tags beside it: a dot and the word, tinted the way the lists tint it. */
.ticket-status{
  display:inline-flex; align-items:center; gap:8px; padding:4px 12px; border-radius:999px;
  border:1px solid var(--neutral-line); background:var(--neutral-bg); color:var(--text-2);
  font-size:14px; font-weight:600; line-height:20px;
}
.ticket-status::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.ticket-status-new{color:var(--info); background:var(--info-bg); border-color:var(--info-line)}
.ticket-status-active{color:var(--accent-text); background:var(--accent-soft); border-color:rgba(164,151,255,.45)}
.ticket-status-resolved{color:var(--success); background:var(--success-bg); border-color:var(--success-line)}

.ticket-layout{display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:var(--s5); align-items:start}
.ticket-main{display:flex; flex-direction:column; gap:var(--s4); min-width:0}
.ticket-section-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:16px 20px; border-bottom:1px solid var(--border)}
.ticket-section-title{margin:0; font-family:var(--font-display); font-size:var(--fs-card); font-weight:600; line-height:1.3; color:var(--text)}
.ticket-jump{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:500; color:var(--accent-text); text-decoration:none;
}
.ticket-jump:hover{text-decoration:underline}
.ticket-anchor{position:absolute; top:0; left:0; scroll-margin-top:calc(var(--topbar-h) + var(--s4))}

/* The conversation. */
.ticket-thread{list-style:none; margin:0; padding:0}
.ticket-entry, .ticket-event{
  position:relative;
  display:grid; grid-template-columns:36px minmax(0, 1fr); column-gap:14px;
  border-top:1px solid var(--border);
}
.ticket-thread > li:first-child{border-top:0}
.ticket-entry{padding:18px 20px}
.ticket-avatar{
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--raised); border:1px solid var(--border-strong); color:var(--text-2);
  font-size:13px; font-weight:700; letter-spacing:.02em;
}
.ticket-entry.is-staff .ticket-avatar{background:var(--accent-soft); border-color:rgba(164,151,255,.5); color:var(--text)}
.ticket-entry-main{min-width:0}
.ticket-entry-head{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:2px; margin-bottom:6px}
.ticket-author{font-size:15px; font-weight:600; color:var(--text)}
.ticket-role{font-size:var(--fs-small); color:var(--text-2)}
.ticket-role::before, .ticket-entry-head .ticket-when::before{content:"·"; margin-right:10px; color:var(--muted2)}
.ticket-when{font-size:var(--fs-small); color:var(--muted); font-variant-numeric:tabular-nums}
.ticket-body{
  max-width:var(--measure, 70ch);
  font-size:var(--fs-body); line-height:var(--lh-reading, 1.6); color:var(--text);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
/* An internal note: dashed amber edge, amber wash, and its label with a lock. */
.ticket-entry-note{margin:10px 12px; padding:14px 16px; border:1px dashed var(--warning-line); border-radius:var(--r-lg); background:rgba(232,162,58,.07)}
.ticket-thread > li.ticket-entry-note{border-top:1px dashed var(--warning-line)}
.ticket-entry-note .ticket-avatar{border-style:dashed}
.ticket-note-label{
  display:flex; align-items:center; gap:6px; margin:0 0 4px;
  font-size:var(--fs-small); font-weight:600; color:var(--warning);
}
/* A status change: one compact line, with what was said for the person under it. */
.ticket-event{padding:10px 20px; font-size:14px; color:var(--text-2)}
.ticket-event-icon{display:grid; place-items:center; width:36px; height:24px; color:var(--muted)}
.ticket-event-main{min-width:0}
.ticket-event-line{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; line-height:24px}
.ticket-event-line strong{font-weight:600; color:var(--text)}
.ticket-event-line .ticket-when{margin-left:6px}
.ticket-arrow{color:var(--muted)}
.ticket-entry-note + .ticket-event-with-note{border-top:0; padding-top:0}
.ticket-entry-status{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:14px; padding-top:10px;
  border-top:1px dashed var(--border-strong); font-size:14px; color:var(--text-2);
}
.ticket-entry-status > span{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 6px}
.ticket-said{
  margin-top:10px; padding:10px 14px; max-width:calc(var(--measure, 70ch) + 28px);
  border-left:3px solid var(--border-strong); border-radius:0 var(--r-md) var(--r-md) 0; background:var(--panel-2);
}
.ticket-said-label{margin:0 0 2px; font-size:var(--fs-small); font-weight:600; color:var(--text-2)}
.ticket-said .ticket-body{color:var(--text)}
/* What was just saved: beside the entry it added, which the page opens at. */
.ticket-saved{
  grid-column:1 / -1; display:flex; align-items:flex-start; gap:8px; margin:0 0 14px; padding:10px 14px;
  border:1px solid var(--success-line); border-left-width:3px; border-radius:var(--r-md); background:var(--success-bg);
  font-size:14px; line-height:1.5; color:var(--text);
}
.ticket-saved .icon{margin-top:2px; color:var(--success)}
.ticket-event .ticket-saved{margin-top:4px}

/* Files: a picture as a thumbnail that shows all of it; any file with its name, kind, size and actions. */
.ticket-files{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px}
.ticket-file{
  display:flex; align-items:flex-start; gap:12px; width:min(100%, 360px); min-width:0; padding:8px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel-2);
}
.ticket-thumb{flex:none; display:block; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-md); background:#0b0e14}
.ticket-thumb img{display:block; width:132px; height:88px; object-fit:contain}
.ticket-file-icon{flex:none; display:grid; place-items:center; width:48px; height:56px; border-radius:var(--r-md); background:var(--raised); color:var(--text-2)}
.ticket-file-meta{display:flex; flex-direction:column; gap:2px; min-width:0}
.ticket-file-name{font-size:14px; font-weight:600; color:var(--text); overflow-wrap:anywhere}
.ticket-file-kind{font-size:var(--fs-small); color:var(--muted)}
.ticket-file-actions{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:4px}
.ticket-file-actions a, .ticket-file-actions .link-btn{
  display:inline-flex; align-items:center; gap:4px; margin:0;
  font-size:var(--fs-small); font-weight:500; color:var(--accent-text); text-decoration:none;
}
.ticket-file-actions a:hover, .ticket-file-actions .link-btn:hover{text-decoration:underline}

/* The composer. */
.ticket-composer{border-color:var(--border-strong)}
.ticket-composer.is-note{border:1px dashed var(--warning-line); background:linear-gradient(rgba(232,162,58,.05), rgba(232,162,58,.05)), var(--panel)}
.composer-form{display:flex; flex-direction:column; gap:14px; padding:16px 20px 20px}
.composer-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px}
.composer-modes{
  display:inline-flex; flex-wrap:wrap; gap:2px; margin:0; padding:3px; min-width:0;
  border:1px solid var(--control-border); border-radius:var(--r-md); background:var(--bg);
}
.composer-mode{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:34px; padding:6px 14px; border-radius:var(--r-sm);
  font-size:14px; font-weight:500; color:var(--text-2); cursor:pointer; white-space:nowrap;
}
.composer-mode input{position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none}
.composer-mode:hover{color:var(--text); background:var(--hover)}
.composer-mode:has(input:checked){background:var(--accent); color:#fff; font-weight:600}
.composer-mode-note:has(input:checked){background:var(--warning); color:#1d1404}
.composer-mode:has(input:focus-visible){outline:2px solid var(--focus); outline-offset:2px}
.composer-alert{
  padding:10px 14px; border:1px solid var(--danger-line); border-left-width:3px; border-radius:var(--r-md);
  background:var(--danger-bg); font-size:14px; line-height:1.5; color:var(--text);
}
.composer-alert:focus{outline:2px solid var(--focus); outline-offset:2px}
.composer-reopen{
  margin:0; padding:10px 14px; border:1px solid var(--success-line); border-radius:var(--r-md);
  background:var(--success-bg); font-size:14px; line-height:1.5; color:var(--text);
}
/* Who sees what's being written: public, or staff only, said in words beside its icon. */
.composer-visibility{
  display:flex; align-items:flex-start; gap:10px; padding:10px 14px;
  border:1px solid var(--border-strong); border-radius:var(--r-md); background:var(--panel-2);
}
.composer-visibility > .icon{margin-top:3px; color:var(--accent-text)}
.composer-visibility p{margin:0; font-size:14px; line-height:1.5; color:var(--text-2)}
.composer-visibility strong{font-weight:600; color:var(--text)}
.composer-visibility-note{border:1px dashed var(--warning-line); background:rgba(232,162,58,.09)}
.composer-visibility-note > .icon{color:var(--warning)}
.composer-switched{
  margin:0; padding:8px 14px; border-left:3px solid var(--accent-line); border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--accent-soft); font-size:14px; line-height:1.5; color:var(--text);
}
.composer-switched.to-note{border-left-color:var(--warning); background:rgba(232,162,58,.12)}
.ticket-page .form-field label{font-size:14px; font-weight:500; color:var(--text-2)}
.composer-text{min-height:148px; font-size:var(--fs-body); line-height:1.6}
.support-files-field{margin:0}
.support-files-dropped{font-size:var(--fs-small); font-weight:600; color:var(--warning)}
.composer-status{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px}
.composer-status .form-field{flex:0 1 300px}
.composer-summary{
  margin:0; padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--panel-2); font-size:14px; line-height:1.5; color:var(--text-2);
}
.composer-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.composer-submit{min-height:40px; padding:9px 20px; font-size:15px}
.composer-progress{font-size:var(--fs-small); color:var(--muted)}

/* Details: quieter than the conversation, one panel with term and value pairs and two disclosures. */
.ticket-side{
  display:flex; flex-direction:column; gap:14px; min-width:0; padding:16px 18px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel);
}
.ticket-facts{display:flex; flex-direction:column; gap:10px; margin:0}
.ticket-facts > div{display:grid; grid-template-columns:100px minmax(0, 1fr); gap:8px}
.ticket-facts dt{font-size:var(--fs-small); line-height:1.5; color:var(--muted)}
.ticket-facts dd{margin:0; min-width:0; font-size:14px; line-height:1.5; color:var(--text); overflow-wrap:anywhere}
.ticket-facts dd a{color:var(--accent-text)}
.ticket-fact-note{display:block; font-size:var(--fs-small); color:var(--muted)}
a.ticket-fact-note{color:var(--accent-text)}
.ticket-fact-small{font-size:var(--fs-small) !important; color:var(--text-2) !important}
.ticket-disclosure{padding-top:12px; border-top:1px solid var(--border)}
.ticket-disclosure > summary{
  cursor:pointer; padding:2px 0; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; color:var(--text-2);
}
.ticket-disclosure > summary:hover{color:var(--text)}
.ticket-disclosure[open] > summary{margin-bottom:10px}
.ticket-disclosure > .small{margin:0 0 10px}
.ticket-details-form{display:flex; flex-direction:column; gap:10px}
.ticket-details-form .form-actions{margin-top:2px}
.ticket-details-form .small{margin:0}
.ticket-details-status:empty{display:none}

/* A picture at full size, over the page. */
dialog.ticket-lightbox{width:min(1200px, calc(100vw - 32px)); padding:14px 16px 16px}
.ticket-lightbox-head{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 12px}
.ticket-lightbox-title{flex:1 1 200px; min-width:0; margin:0; font-size:15px; font-weight:600; overflow-wrap:anywhere}
.ticket-lightbox-image{display:block; max-width:100%; max-height:calc(100vh - 150px); margin:0 auto; border-radius:var(--r-md); background:#0b0e14}

@media (min-width: 1181px){
  /* The details stay in view beside a long conversation. */
  .ticket-side{position:sticky; top:calc(var(--topbar-h) + var(--s4)); max-height:calc(100vh - var(--topbar-h) - var(--s8)); overflow-y:auto}
}
@media (max-width: 1180px){
  .ticket-layout{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width: 900px){
  .ticket-title{font-size:24px}
  .ticket-section-head{padding:14px 16px}
  .ticket-entry{padding:14px 16px}
  .ticket-entry, .ticket-event{grid-template-columns:28px minmax(0, 1fr); column-gap:10px}
  .ticket-avatar{width:28px; height:28px; font-size:var(--fs-label)}
  .ticket-event{padding:10px 16px}
  .ticket-event-icon{width:28px}
  .ticket-entry-note{margin:8px; padding:12px}
  .composer-form{padding:14px 16px 16px}
  .composer-modes{display:flex; width:100%}
  .composer-mode{flex:1 1 0}
  .ticket-thumb img{width:112px; height:76px}
}
@media (max-width: 600px){
  .composer-submit{width:100%}
  .ticket-facts > div{grid-template-columns:92px minmax(0, 1fr)}
  /* Lines that would wrap mid-way stack, or part with space alone, so no line starts with a separator. */
  .ticket-context{flex-direction:column}
  .ticket-context > span + span::before{content:none}
  .ticket-role::before, .ticket-entry-head .ticket-when::before{content:none}
}
/* In the ticket lists a status or priority is one or two short words: kept whole, so a narrow
   column squeezes the subject instead of breaking "High" across lines. */
.support-table .tag{white-space:nowrap; overflow-wrap:normal}
.support-chosen{margin:4px 0 0; padding-left:18px}
.support-chosen:empty{display:none}

/* Help: the list of topics, and an article. An article is set for reading: a measure of about
   eighty characters, roomy lines, headings a step below the page's own, and tables for what each
   column means. "On this page" stays beside it on a wide window and leads it on a narrow one. */
.help-back{
  display:inline-flex; align-items:center; gap:6px;
  margin:-4px 0 12px; padding:2px 4px 2px 0;
  font-size:14px; font-weight:500; color:var(--accent-text); text-decoration:none;
  border-radius:var(--r-sm);
}
.help-back:hover{text-decoration:underline}

/* The help home, in the order a newcomer needs it: the tutorial, then the search, a few common tasks,
   and every topic. Section headings are a step below the page's; group cards line up in a grid. */
.help-section-title{margin:0 0 10px; font-family:var(--font-display); font-size:var(--fs-card); font-weight:600; line-height:1.3; color:var(--text)}
.help-kicker{margin:0 0 2px; font-size:var(--fs-meta); font-weight:600; color:var(--accent-text)}

/* Getting started: compact, in the selection tint with the menu's bar, its actions beside the words. */
.help-tutorial-card{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px; max-width:1040px;
  margin:0 0 var(--s6); padding:18px 22px;
  background:var(--accent-soft); border:1px solid rgba(164,151,255,.32); border-left:3px solid var(--accent-line); border-radius:var(--r-lg);
}
.help-tutorial-text{flex:1 1 420px; min-width:0}
.help-tutorial-title{margin:0; font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.3; color:var(--text)}
.help-tutorial-lede{margin:6px 0 0; font-size:var(--fs-body); line-height:1.55; color:var(--text); max-width:70ch}
.help-tutorial-step{font-weight:600}
.help-tutorial-text .meta{margin:6px 0 0; color:var(--text-2); max-width:80ch}
.help-tutorial-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px; flex:0 1 auto}
.help-tutorial-actions form{margin:0}
.help-restart > summary, .tutorial-restart > summary{cursor:pointer; font-size:var(--fs-meta); color:var(--accent-text)}
.help-restart[open]{flex-basis:100%}
.help-restart form{margin:8px 0 0}

/* Find help: a labelled box with its button, the words it searches, and the count. */
.help-search{max-width:760px; margin:0 0 var(--s6)}
.help-search-form{margin:0}
.help-search-row{display:flex; gap:8px; margin-top:6px}
.help-search-row .input-with-icon{flex:1 1 auto; min-width:0}
.help-search-row .btn{flex:none}
.help-search-hint{margin:8px 0 0; max-width:80ch}
.help-search-hint a{color:var(--accent-text)}
.help-find-status{margin:6px 0 0; min-height:1.5em; font-size:var(--fs-table); color:var(--text-2)}

/* Common tasks: short, equal tiles, so they read as shortcuts rather than more topics. */
.help-tasks{margin:0 0 var(--s6)}
.help-task-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap:10px}
.help-task{
  display:flex; flex-direction:column; gap:2px; height:100%;
  padding:12px 14px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel);
  text-decoration:none;
}
.help-task:hover{border-color:var(--control-border); background:var(--panel-2)}
.help-task-title{font-weight:600; color:var(--accent-text)}
.help-task:hover .help-task-title{text-decoration:underline}
.help-task-sub{font-size:var(--fs-meta); line-height:1.45; color:var(--text-2)}

/* Every topic, by the menu's groups: titles lead, summaries are quieter, and while searching the
   sections that match are offered under their topic as links into the article. */
.help-groups{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap:var(--s4); align-items:start}
/* Cards in a grid line up by the grid's gap alone: the margin cards take when stacked would push every card but the first down. */
.help-groups > .card + .card{margin-top:0}
.help-group{padding:18px 20px 8px}
.help-group-title{margin:0 0 4px; font-family:var(--font-display); font-size:var(--fs-subhead); font-weight:600; line-height:1.3; color:var(--text)}
.help-topics{list-style:none; margin:0; padding:0}
.help-topic{padding:10px 0; border-top:1px solid var(--border)}
.help-topic:first-child{border-top:0}
.help-topic-title{font-weight:600; color:var(--accent-text); text-decoration:none}
.help-topic-title:hover{text-decoration:underline}
.help-topic-summary{margin:2px 0 0; font-size:var(--fs-small); line-height:1.5; color:var(--text-2)}
.help-topic-sections{list-style:none; margin:8px 0 2px; padding:0 0 0 12px; border-left:2px solid var(--accent-soft); display:flex; flex-direction:column; gap:2px}
.help-topic-sections a{font-size:var(--fs-small); color:var(--accent-text); text-decoration:none}
.help-topic-sections a:hover{text-decoration:underline}
.help-none{margin:var(--s4) 0 0; max-width:760px; padding:14px 16px; border:1px dashed var(--control-border); border-radius:var(--r-lg); color:var(--text-2)}
.help-none p{margin:0}
.help-none p + p{margin-top:6px}
.help-none a{color:var(--accent-text)}
.help-stuck{margin:var(--s6) 0 0; font-size:var(--fs-small); color:var(--muted)}
.help-stuck a{color:var(--accent-text)}

.help-layout{
  display:grid; grid-template-columns:minmax(0, 720px) 240px; grid-template-areas:"article aside";
  justify-content:start; gap:var(--s6); align-items:start;
}
.help-article{grid-area:article; min-width:0}
.help-aside{
  grid-area:aside;
  position:sticky; top:calc(var(--topbar-h) + var(--s4));
  max-height:calc(100vh - var(--topbar-h) - var(--s8)); overflow-y:auto;
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s5);
}
.help-aside-title{margin:0 0 6px; font-size:var(--fs-meta); font-weight:600; color:var(--text-2)}
.help-toc ul, .help-more ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px}
.help-toc a, .help-more a{font-size:var(--fs-small); line-height:1.45; color:var(--accent-text); text-decoration:none}
.help-toc a:hover, .help-more a:hover{text-decoration:underline}
.help-toc a[aria-current]{display:block; margin-left:-10px; padding-left:8px; border-left:2px solid var(--accent-line); color:var(--text); font-weight:600}
.help-more{margin:0 32px 24px; padding-top:16px; border-top:1px solid var(--border)}

.help-prose{padding:6px 32px 18px; font-size:var(--fs-reading); line-height:1.65; color:var(--text); overflow-wrap:break-word}
.help-prose h2, .help-prose h3{scroll-margin-top:calc(var(--topbar-h) + var(--s4)); color:var(--text)}
.help-prose h2{margin:28px 0 8px; font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em}
.help-prose h3{margin:20px 0 4px; font-size:16px; font-weight:600; line-height:1.4}
.help-prose > :first-child{margin-top:20px}
.help-prose p{margin:0 0 12px}
.help-prose ul, .help-prose ol{margin:0 0 12px; padding-left:22px}
.help-prose li{margin:4px 0}
.help-prose li > p{margin:0 0 6px}
.help-prose li > ul, .help-prose li > ol{margin:4px 0 6px}
.help-prose a{color:var(--accent-text)}
/* A link that opens a page of the app, rather than more help: an arrow says it goes somewhere to act. */
.help-prose a.help-app-link::after{content:"\2009\2197"; content:"\2009\2197" / ""; font-size:.85em}
/* What you should see when a step worked: set off, but quieter than a note. */
.help-prose .help-expect{padding:10px 14px; border-left:3px solid var(--success-line); border-radius:0 var(--r-md) var(--r-md) 0; background:rgba(47,191,113,.08)}
.help-prose strong{font-weight:600}
.help-prose code{font-family:inherit; font-size:inherit; font-weight:600; color:var(--text)}
/* A tip or a note: a quote in the Markdown, set off in the information tint. */
.help-prose blockquote{
  margin:0 0 14px; padding:10px 14px;
  border:1px solid var(--info-line); border-left-width:3px; border-radius:var(--r-md);
  background:var(--info-bg);
}
.help-prose blockquote > :last-child{margin-bottom:0}
.help-prose table{width:100%; margin:6px 0 16px; border:1px solid var(--border); border-radius:var(--r-md); border-collapse:separate; border-spacing:0; overflow:hidden}
.help-prose th, .help-prose td{padding:8px 12px; border-bottom:1px solid var(--border); font-size:var(--fs-table); line-height:1.5; text-align:left; vertical-align:top}
.help-prose th{background:var(--panel-2); color:var(--text-2); font-size:var(--fs-label); font-weight:600; letter-spacing:.02em}
.help-prose td:first-child{font-weight:600; white-space:nowrap}
.help-prose tbody tr:last-child td{border-bottom:0}
.help-prose hr{margin:24px 0; border:0; border-top:1px solid var(--border)}

@media (max-width: 1180px){
  .help-layout{grid-template-columns:minmax(0, 760px); grid-template-areas:"aside" "article"; gap:var(--s4)}
  .help-aside{position:static; max-height:none; overflow:visible; gap:var(--s4)}
  .help-toc ul{flex-direction:row; flex-wrap:wrap; gap:4px 16px}
}
@media (max-width: 900px){
  .help-prose{padding:4px 16px 14px}
  .help-more{margin:0 16px 16px}
  .help-group{padding:14px 16px 6px}
  .help-prose table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .help-prose td:first-child{white-space:normal}
  .help-tutorial-card{padding:14px 16px}
  .help-search-row{flex-wrap:wrap}
  .help-search-row .btn{flex:1 1 auto}
}

/* The way back to the help a page was opened from (HelpReturn): a quiet line above the page's heading. */
.help-return{margin:-6px 0 14px}
.help-return a{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 8px; max-width:100%;
  padding:6px 12px 6px 10px; border:1px solid rgba(164,151,255,.35); border-radius:var(--r-md);
  background:var(--accent-soft); color:var(--text); font-size:var(--fs-table); text-decoration:none;
}
.help-return a:hover{border-color:var(--accent-line)}
.help-return .icon{color:var(--accent-text)}
.help-return strong{font-weight:600}
.help-return-topic{color:var(--text-2)}

/* The tutorial's full guide: each step a section with its number, goal, steps, what to expect and
   its "Try it", the step being worked on set off by the selection bar. */
.guide-aside-actions{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.guide-aside-actions form{margin:0}
.guide-aside-actions .meta{margin:0}
.guide-toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.guide-toc li{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px}
.guide-toc a{font-size:var(--fs-small); line-height:1.45; color:var(--accent-text); text-decoration:none}
.guide-toc a:hover{text-decoration:underline}
.guide-toc li.is-done a{color:var(--text-2)}
.guide-toc-mark{font-size:var(--fs-label); font-weight:600; color:var(--muted)}
.guide-step{
  scroll-margin-top:calc(var(--topbar-h) + var(--s4));
  margin:0 -16px 18px; padding:14px 16px 16px;
  border:1px solid var(--border); border-radius:var(--r-lg); background:rgba(255,255,255,.015);
}
.guide-step.is-current{border-color:rgba(164,151,255,.45); box-shadow:inset 3px 0 0 var(--accent-line)}
.guide-anchor{display:block; position:relative; top:calc(-1 * (var(--topbar-h) + var(--s4)))}
.help-prose .guide-step-kicker{display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 2px; font-size:var(--fs-meta); font-weight:600; color:var(--muted)}
.help-prose .guide-step h3{margin:0 0 6px; font-family:var(--font-display); font-size:19px; line-height:1.3}
.help-prose .guide-goal{color:var(--text-2)}
.help-prose .guide-role{padding:8px 12px; border:1px solid var(--info-line); border-left-width:3px; border-radius:var(--r-md); background:var(--info-bg)}
.help-prose .guide-real{font-size:var(--fs-body); color:var(--text-2)}
.help-prose .guide-real strong{color:var(--warning); font-weight:600}
.guide-step-actions{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:12px}
.guide-step-actions form{margin:0}
.guide-step-actions a{font-size:var(--fs-table)}
@media (max-width: 900px){
  .guide-step{margin:0 -8px 16px; padding:12px}
}

/* ---- The tutorial companion (_TutorialCompanion) ----
   Beside every page while a person's tutorial runs. On a wide window it is a panel at the right,
   under the top bar, and the page narrows to make room for it rather than going under it. On a
   narrow one it is a sheet at the foot of the screen that stays in view as the page scrolls; it sits
   after the page in its flow, so scrolling to the end always brings the last of the page above it.
   Folded, it is a "Resume tutorial" control: in the top bar on a wide window, a slim bar below. */
:root{--tutorial-w:clamp(320px, 24vw, 360px)}
.tutorial-companion{color:var(--text); background:var(--panel)}
.tutorial-form{margin:0}
.tutorial-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px 10px 16px; border-bottom:1px solid var(--border)}
.tutorial-heading{display:flex; align-items:baseline; gap:8px; margin:0; min-width:0}
.tutorial-kicker{font-size:var(--fs-meta); font-weight:700; color:var(--accent-text)}
.tutorial-count{font-size:var(--fs-meta); color:var(--text-2); white-space:nowrap}
.tutorial-body{padding:14px 16px 16px}
.tutorial-title{margin:0 0 4px; font-family:var(--font-display); font-size:18px; font-weight:600; line-height:1.3}
.tutorial-title:focus{outline:none}
.tutorial-title:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.tutorial-goal{margin:0 0 10px; font-size:var(--fs-body); line-height:1.5; color:var(--text-2)}
.tutorial-status{display:flex; align-items:center; gap:6px; margin:0 0 8px; font-size:var(--fs-table); color:var(--text-2)}
.tutorial-status.is-done{color:var(--success)}
.tutorial-note{margin:0 0 10px; padding:8px 10px; font-size:var(--fs-table); line-height:1.5; border:1px solid var(--info-line); border-left-width:3px; border-radius:var(--r-md); background:var(--info-bg)}
.tutorial-needs{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-table); line-height:1.45}
.tutorial-needs li{display:flex; align-items:flex-start; gap:6px}
.tutorial-needs .is-met{color:var(--text-2)}
.tutorial-needs .is-met .icon{color:var(--success); margin-top:2px}
.tutorial-needs .is-unmet{padding:6px 10px; border:1px solid var(--warning-line); border-radius:var(--r-md); background:var(--warning-bg); color:var(--text)}
.tutorial-needs a, .tutorial-note a, .tutorial-more a, .tutorial-foot a, .tutorial-expect a, .tutorial-instructions a, .tutorial-real a{color:var(--accent-text)}
.tutorial-instructions{margin:0 0 12px; padding-left:20px; font-size:var(--fs-body); line-height:1.55}
.tutorial-instructions li{margin:0 0 6px}
.tutorial-instructions li::marker{color:var(--muted); font-weight:600}
.tutorial-instructions strong, .tutorial-expect strong, .tutorial-note strong{font-weight:600}
.tutorial-try{margin:0 0 12px}
.tutorial-try .btn{width:100%}
.tutorial-here{display:flex; align-items:center; gap:6px; margin:0; padding:8px 10px; border-radius:var(--r-md); background:var(--success-bg); border:1px solid var(--success-line); font-size:var(--fs-table); color:var(--text)}
.tutorial-here .icon{color:var(--success)}
.tutorial-expect{margin:0 0 10px; padding:10px 12px; border-left:3px solid var(--success-line); border-radius:0 var(--r-md) var(--r-md) 0; background:rgba(47,191,113,.08)}
.tutorial-expect-title{margin:0 0 2px; font-size:var(--fs-meta); font-weight:700; color:var(--success)}
.tutorial-expect p{margin:0; font-size:var(--fs-table); line-height:1.55}
.tutorial-real{margin:0 0 10px; font-size:var(--fs-meta); line-height:1.5; color:var(--text-2)}
.tutorial-real strong{color:var(--warning); font-weight:600}
.tutorial-more{margin:0 0 12px; font-size:var(--fs-meta); color:var(--muted)}
.tutorial-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-top:12px; border-top:1px solid var(--border)}
.tutorial-actions [data-tutorial-key="complete"], .tutorial-actions [data-tutorial-key="next"], .tutorial-actions [data-tutorial-key="close"]{margin-left:auto}
.tutorial-skipped{margin:0 0 10px; padding-left:20px; font-size:var(--fs-table)}
.tutorial-list{margin-top:14px; border-top:1px solid var(--border); padding-top:10px}
.tutorial-list > summary{cursor:pointer; font-size:var(--fs-table); font-weight:600; color:var(--text)}
.tutorial-list ol{list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; counter-reset:tstep}
.tutorial-list li{counter-increment:tstep}
.tutorial-list-item{
  display:flex; align-items:baseline; gap:8px; width:100%; padding:6px 8px;
  font:inherit; font-size:var(--fs-table); text-align:left; color:var(--text-2);
  background:none; border:0; border-radius:var(--r-sm); cursor:pointer;
}
.tutorial-list-item::before{content:counter(tstep) "."; min-width:1.6em; color:var(--muted); font-variant-numeric:tabular-nums}
.tutorial-list-item:hover{background:var(--hover); color:var(--text)}
.tutorial-list-item[aria-current]{background:var(--accent-soft); color:var(--text); font-weight:600}
.tutorial-list-title{flex:1 1 auto; min-width:0}
.tutorial-list-mark{flex:none; font-size:var(--fs-label); font-weight:600; color:var(--muted)}
.tutorial-list li.is-done .tutorial-list-mark{color:var(--success)}
.tutorial-foot{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-top:12px; font-size:var(--fs-meta)}
.tutorial-foot .link-btn{margin:0; font-size:var(--fs-meta)}
.tutorial-restart{flex-basis:100%}
.tutorial-restart p{margin:6px 0 8px; color:var(--text-2)}
.tutorial-resume-bar{
  display:none; align-items:center; gap:8px; width:100%; min-height:44px; padding:10px 16px;
  font:inherit; font-size:var(--fs-body); font-weight:600; text-align:left; color:var(--text);
  background:var(--accent-soft); border:0; cursor:pointer;
}
.tutorial-resume-bar .icon{transform:rotate(180deg); color:var(--accent-text)}
.tutorial-resume-bar:hover{background:rgba(108,92,231,.3)}
.tutorial-resume-bar:focus-visible, .tutorial-list-item:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}

/* The top bar's control, on a wide window: folds and unfolds the panel. */
.tutorial-topbar{
  display:none; align-items:center; gap:6px; height:36px; padding:0 12px;
  font:inherit; font-size:14px; font-weight:600; color:var(--text); white-space:nowrap;
  background:var(--accent-soft); border:1px solid rgba(164,151,255,.45); border-radius:var(--r-md); cursor:pointer;
}
.tutorial-topbar:hover{background:rgba(108,92,231,.3)}
.tutorial-topbar .icon{color:var(--accent-text)}
.tutorial-topbar-step{font-weight:500; color:var(--text-2)}
.tutorial-topbar[aria-expanded="true"]{background:var(--raised); border-color:var(--control-border)}

@media (min-width: 1200px){
  .tutorial-topbar{display:inline-flex}
  .tutorial-companion[data-state="expanded"]{
    position:fixed; top:var(--topbar-h); right:0; bottom:0; z-index:55;
    width:var(--tutorial-w); overflow-y:auto; overscroll-behavior:contain;
    border-left:1px solid var(--border-strong);
    scrollbar-width:thin; scrollbar-color:#394152 transparent;
  }
  .tutorial-companion[data-state="minimized"]{display:none}
  .tutorial-companion .tutorial-head{position:sticky; top:0; z-index:1; background:var(--panel)}
  /* The page makes room for the panel. */
  body:has(.tutorial-companion[data-state="expanded"]) .workspace{padding-right:calc(var(--tutorial-w) + var(--s6))}
}
/* With the panel open, a help article's "On this page" goes above it a little sooner. */
@media (min-width: 1200px) and (max-width: 1599px){
  body:has(.tutorial-companion[data-state="expanded"]) .help-layout{grid-template-columns:minmax(0, 760px); grid-template-areas:"aside" "article"; gap:var(--s4)}
  body:has(.tutorial-companion[data-state="expanded"]) .help-aside{position:static; max-height:none; overflow:visible; gap:var(--s4)}
  body:has(.tutorial-companion[data-state="expanded"]) .help-toc:not(.guide-toc) ul{flex-direction:row; flex-wrap:wrap; gap:4px 16px}
}
@media (max-width: 1199.98px){
  .tutorial-companion{
    position:sticky; bottom:0; z-index:50; margin-top:auto;
    border-top:1px solid var(--border-strong); box-shadow:0 -10px 28px rgba(0,0,0,.4);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .tutorial-companion[data-state="expanded"] .tutorial-body{max-height:min(40vh, 420px); overflow-y:auto; overscroll-behavior:contain}
  /* A short window (a phone held sideways, or a page zoomed to 200%): less of it, so the page stays in view. */
  @media (max-height: 560px){ .tutorial-companion[data-state="expanded"] .tutorial-body{max-height:30vh} }
  .tutorial-companion[data-state="minimized"] .tutorial-head{display:none}
  .tutorial-companion[data-state="minimized"] .tutorial-resume-bar{display:flex}
  .tutorial-try .btn{width:auto}
}
@media print{ .tutorial-companion, .tutorial-topbar, .help-return{display:none !important} }

/* The companion's step inside an open dialog (tutorial.js): a dialog keeps everything else on the
   page out of reach, so the step comes in with it, folded to one line at the top of the dialog. */
.dialog-head.has-tutorial{flex-wrap:wrap}
.tutorial-in-dialog{flex:1 1 100%; order:10; min-width:0; margin-top:8px; border:1px solid rgba(164,151,255,.4); border-radius:var(--r-md); background:#211f3a}
.tutorial-in-dialog-toggle{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px;
  font:inherit; font-size:var(--fs-table); text-align:left; color:var(--text);
  background:none; border:0; border-radius:var(--r-md); cursor:pointer;
}
.tutorial-in-dialog-toggle .icon{color:var(--accent-text); flex:none}
.tutorial-in-dialog-toggle .tutorial-in-dialog-chevron{margin-left:auto; transition:transform .15s ease}
.tutorial-in-dialog-toggle[aria-expanded="true"] .tutorial-in-dialog-chevron{transform:rotate(180deg)}
.tutorial-in-dialog-label{flex:1 1 auto; min-width:0}
.tutorial-in-dialog-label b{font-weight:600}
.tutorial-in-dialog-body{max-height:38vh; overflow-y:auto; padding:4px 12px 12px; border-top:1px solid var(--border)}
.tutorial-in-dialog-body .tutorial-instructions{margin-top:8px}
.tutorial-in-dialog-body .tutorial-actions{border-top:0; padding-top:4px}
@media (prefers-reduced-motion: reduce){ .tutorial-in-dialog-toggle .tutorial-in-dialog-chevron{transition:none} }