/* ============================================================
   dosius-skin.css — Classical skin for the FDA Monk app
   Load AFTER /static/style.css:
     <link rel="stylesheet" href="/static/style.css?v=108">
     <link rel="stylesheet" href="/static/dosius-skin.css?v=1">
   Pure overrides: no class names change, no JS hooks touched.
   ============================================================ */
/* The type (Cormorant Garamond, Lora) comes from /static/fonts.css, served
   here; the pages link it before this sheet. Nothing is fetched from Google. */

/* ---- page to page: a short cross-fade instead of a cut. The head's
   rel=expect holds the new page until it is fully built, so the fade lands
   on the finished layout. Same-origin navigations only; older browsers just
   cut as before. ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
}

/* ---- tokens: remap the existing variables to the Dosius palette ---- */
:root {
  --navy: #201f1d;            /* ink takes over every navy use */
  --navy-2: #3c3937;
  --accent: #b68235;          /* the gold */
  --gold-bright: #e1ad66;
  --bg: #ffffff;              /* white ground (per the approved dashboard) */
  --card: #ffffff;
  --text: #201f1d;
  --muted: #6e6a66;
  --line: rgba(32, 31, 29, .14);
  --hot: #a33224;
  --ok: #3f7d43;
}

/* ---- type ---- */
body {
  font-family: "Lora", Georgia, serif;
  font-size: 14.5px;
}
h1, h2, h3, h4, .brand, .dash-head h1, .viz-title,
.preview-lock-card h2, .drawer-head-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  letter-spacing: 0;
}
.dash-head h1 { font-size: 34px; font-weight: 400; }
.viz-title { font-size: 19px; }
/* patent header line: the "U.S. Patent No." label in the same Cormorant face
   as the title below it; the number itself in Lora, bold */
.pat-no-big .pat-no-lbl {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  text-transform: uppercase;
}
.pat-no-big .pat-no-num {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500;
  font-feature-settings: "lnum" 1, "tnum" 1;   /* lining, tabular figures */
}
/* a patent number inside any other Cormorant heading (the Rx Search patent
   page): the same lining, tabular figures as the patent page's big number */
h1 .h-patno, h2 .h-patno { font-feature-settings: "lnum" 1, "tnum" 1; }
/* feedback dialog: screenshots (pick, paste or drop), shown as removable thumbs */
.fb-shots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; }
.fb-shots #fb-attach { display: inline-flex; align-items: center; gap: 6px; }
.fb-shots-hint { margin: 0; font-size: 12px; }
.fb-thumbs { display: flex; gap: 8px; flex-basis: 100%; }
.fb-thumbs:empty { display: none; }
.fb-thumb { position: relative; width: 84px; height: 60px; border: 1px solid var(--line);
  border-radius: 6px; overflow: visible; background: var(--bg); }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
.fb-thumb-x { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; padding: 0;
  border: 0; border-radius: 50%; background: var(--hot, #c0392b); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer; }
.fb-dialog.fb-drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
/* admin › Feedback: the screenshots that came with a message */
.fb-admin-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fb-admin-shots img { width: 132px; height: 88px; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: 6px; }
.fb-admin-shots a:hover img { border-color: var(--accent); }
/* admin › Content Management: each page's Access menu — a dropdown of ticks,
   one per audience; the closed button names who is ticked */
/* Nothing moves while ticking: the columns are fixed, and the Access button is
   one constant width whatever it says ("Everyone" / "Admins, Beta testers,
   Premium"), the caret pinned to its right edge. */
.cm-table { table-layout: fixed; width: 100%; }
.cm-table th:nth-child(2), .cm-table td:nth-child(2) { width: 190px; }
.cm-table th:nth-child(3), .cm-table td:nth-child(3) { width: 280px; }
.cm-table td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-access { position: relative; display: block; width: 260px; max-width: 100%; }
.cm-access > summary { list-style: none; cursor: pointer; display: flex; width: 100%;
  box-sizing: border-box; align-items: center; justify-content: space-between; gap: 8px; }
.cm-access > summary::-webkit-details-marker { display: none; }
.cm-access .cm-summary { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; transition: color .15s ease; }
.cm-menu { width: 100%; box-sizing: border-box; }
/* the save note has its line reserved, so the card doesn't grow and shrink */
#cm-status { min-height: 1.5em; }
@media (max-width: 720px) {
  .cm-table th:nth-child(2), .cm-table td:nth-child(2) { display: none; }
  .cm-table th:nth-child(3), .cm-table td:nth-child(3) { width: 170px; }
  .cm-access { width: 100%; }
}
.cm-table tr.is-off .cm-summary { color: var(--hot, #c0392b); }
.cm-menu { left: 0; top: calc(100% + 6px); min-width: 190px; padding: 6px; }
.cm-opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 5px;
  font-size: 13.5px; color: var(--text); cursor: pointer; white-space: nowrap; }
.cm-opt:hover { background: rgba(182, 130, 53, .08); }
.cm-opt input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; flex: none; }
.cm-opt.is-locked { color: var(--muted); cursor: not-allowed; }
.cm-opt.is-locked:hover { background: transparent; }
/* admin › Users › Options: "extend beta by N days", a field in the row menu */
.row-menu .beta-extend { border-top: 1px solid var(--line); padding: 8px 12px 4px; }
.row-menu .beta-extend label { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.row-menu .beta-extend input { width: 58px; padding: 3px 6px; margin: 0 4px; font: inherit;
  font-size: 13px; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--text); }
.row-menu .beta-extend button { padding-left: 0; padding-right: 0; }
/* Patent profile tabs: always one row. When the row is wider than the card
   (phones, the side viewer open) it scrolls sideways instead of wrapping onto
   a second line; the bar is hidden, the tabs themselves are the affordance. */
.tabcard .tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabcard .tabs::-webkit-scrollbar { display: none; }
.tabcard .tab { flex: 0 0 auto; white-space: nowrap; margin-bottom: 0; }
/* Claims tab: the claim-chart download sits right-aligned above claim 1 */
.pat-claim-tools { display: flex; justify-content: flex-end;
  padding: 0 0 12px; margin: 0 0 14px; border-bottom: 1px solid var(--line); }
/* the "-1" in the NCE-1 Tracker heading: same lining/tabular figures (the
   heading itself is already Cormorant) */
.nce1-num { font-feature-settings: "lnum" 1, "tnum" 1; }
.pat-no-big .pat-no-num { white-space: nowrap; }   /* EP 1 234 567 stays on one line */
/* Patent numbers in one face everywhere: the page's Lora with tabular
   figures. style.css's Consolas .mono was still reaching the links that
   carry both classes (Legal Challenges, the disputes card), so the rule
   sits here, after that sheet, and wins on order. */
.patent-link, a.patent-link.mono {
  font-family: "Lora", Georgia, serif; font-size: inherit;
  font-variant-numeric: tabular-nums;
}
/* Legal Challenges litigation table: case numbers and filing dates in the
   patent column's face, not Consolas */
.lit-index td.mono {
  font-family: "Lora", Georgia, serif; font-size: inherit;
  font-variant-numeric: tabular-nums;
}
/* US and EP patent pages: identifiers (application, priority and patent
   numbers, kind codes) in the page's Lora with tabular figures, not
   style.css's Consolas -- the same fix the drug profile carries, so both
   patent pages read in one face. */
.pat-page .mono,
.pat-page .patent-link {
  font-family: "Lora", Georgia, serif; font-size: inherit;
  font-variant-numeric: tabular-nums;
}
/* a count inside a Cormorant card heading, e.g. "Procedural steps (57)":
   Cormorant's old-style figures bob up and down, so the count takes the body
   text's Lora figures instead, scaled to sit beside the heading words */
.h-num {
  font-family: "Lora", Georgia, serif; font-size: .8em; font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Tracker chart bars carry the table's status-badge tones: hot (<90 days),
   soon (<1 year), later (beyond). These sit after the .is-current fill rule
   so the tone keeps the fill; selection reads as the ink outline instead. */
.nce-bar.tone-hot rect { fill: oklch(0.55 0.16 25 / .85); }
.nce-bar.tone-hot:hover rect, .nce-bar.tone-hot:focus rect { fill: oklch(0.45 0.16 25); }
.nce-bar.tone-soon rect { fill: rgba(182, 130, 53, .8); }
.nce-bar.tone-soon:hover rect, .nce-bar.tone-soon:focus rect { fill: #a06f24; }
.nce-bar.tone-later rect { fill: oklch(0.55 0.13 145 / .85); }
.nce-bar.tone-later:hover rect, .nce-bar.tone-later:focus rect { fill: oklch(0.45 0.13 145); }
.nce-tracker-chart .nce-bar.is-current rect { stroke: #211f1e; stroke-width: 2; }
a { color: #7d5411; }

/* ---- topbar / brand: the landing's colophon bar, carried into the app ----
   Solid #211f1e (the landing nav's scrolled state), paper wordmark, gold
   period. Everything that sits IN the bar flips to paper/gold; the dropdown
   panels that hang BELOW it stay light — they read as part of the page. */
.topbar { background: #211f1e; border-bottom: 1px solid rgba(243, 242, 242, .14); }
/* Landing's solid nav runs ~50px (11px padding, 28px wordmark). The app bar's
   height is set by its 38px search field, so 6px padding lands the same 51px
   instead of the 57px it had. */
.topbar-inner { padding: 6px 22px; }
.brand, .brand-txt { font-size: 22px; font-weight: 500; color: #f3f2f2; }
.topbar .brand:hover { color: #fff; text-decoration: none; }
.brand-txt span, .topbar-left .brand span { color: var(--accent); font-weight: 500; }
.logo-ph { display: none; }   /* wordmark carries the brand; drop the FM placeholder */
/* signed-out bar (FAQ, Terms, Privacy): the beta landing's nav to the pixel
   (beta-landing.html .gate-nav / .gate-brand), so the wordmark sits in the
   same spot, at the same size, on the same ground from page to page */
.topbar-public { background: #262424; border-bottom: 0; }
.topbar-public .topbar-inner { max-width: none; padding: 20px 48px; gap: 24px; }
.topbar-public .brand { font-size: 23px; font-weight: 500; letter-spacing: 0;
  line-height: 1.6; gap: 0; }
@media (max-width: 920px) { .topbar-public .topbar-inner { padding: 18px 26px; } }
.topbar nav a { color: rgba(243, 242, 242, .78); }
.topbar nav a:hover { color: #f3f2f2; }
.tb-link { color: rgba(243, 242, 242, .78); }
.tb-link:hover { background: rgba(243, 242, 242, .10); color: #f3f2f2; }
.tb-link.active { background: rgba(243, 242, 242, .14); color: #f3f2f2; }
/* same paper as the Dosius wordmark beside it */
.apps-btn { color: #f3f2f2; }
.apps-btn:hover, .apps-dd[open] .apps-btn {
  background: rgba(243, 242, 242, .12); color: #f3f2f2; }
.profile-dd summary::after { color: rgba(243, 242, 242, .55); }
.topbar-search input { border-radius: 7px; font-family: "Lora", serif;
  background: rgba(243, 242, 242, .08); border-color: rgba(243, 242, 242, .25);
  color: #f3f2f2; }
.topbar-search input::placeholder { color: rgba(243, 242, 242, .55); }
/* the search hint is an overlay (a placeholder can't carry a subscript x);
   it shows while the box is empty and sits where the placeholder text sat */
.tb-ph { position: absolute; left: 40px; right: 16px; top: 50%; transform: translateY(-50%);
  display: none; pointer-events: none; font-family: "Lora", serif; font-size: 13.5px;
  color: rgba(243, 242, 242, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search input:placeholder-shown ~ .tb-ph { display: block; }
.tb-ph .rx-x { font-size: .7em; vertical-align: -.25em; }
@media (max-width: 760px) { .tb-ph { font-size: 16px; } }
.topbar-search input:focus { border-color: var(--accent); background: rgba(243, 242, 242, .10);
  box-shadow: 0 0 0 3px rgba(182, 130, 53, .25); color: #f3f2f2; }
/* signed-out bar: the trial CTA reads as the landing's gold-outline pill */
.topbar nav .btn-outline { border: 1px solid var(--accent); color: var(--gold-bright);
  background: transparent; border-radius: 4px; }
.topbar nav .btn-outline:hover { background: rgba(182, 130, 53, .16); color: var(--gold-bright); }

/* ---- buttons: outlined, never filled (Classical voice) ---- */
/* !important throughout the color declarations: the base sheet pins
   .btn { color: #fff !important } for its filled buttons, which outranks any
   normal declaration here — leaving bare-.btn text white on this skin's
   transparent background, i.e. invisible. The ghost variant then needs its
   own !important or the .btn one swallows it. */
.btn {
  background: transparent; border: 1px solid var(--accent);
  color: #5a3b0a !important;
  border-radius: 4px; font-family: "Lora", serif;
}
.btn:hover { background: rgba(182, 130, 53, .12); color: #5a3b0a !important; }
.btn-gold { background: transparent; border: 1px solid var(--accent);
  color: #5a3b0a !important; }
.btn-gold:hover { background: rgba(182, 130, 53, .12); }
.btn-outline { border-color: var(--accent); color: #5a3b0a; }
.btn-ghost { color: var(--muted) !important; border-color: transparent; }
.btn-ghost:hover { color: var(--navy) !important; border-color: var(--line);
  background: transparent; }

/* ---- cards / surfaces ---- */
/* Card outlines run a bit stronger than the interior hairlines (--line, .14)
   so each card reads clearly against the paper ground. */
.card {
  background: #fff; border: 1px solid rgba(32, 31, 29, .22) !important;
  border-radius: 7px; box-shadow: none;
}
.nav-dd-menu, .dash-gear-menu, .obp-suggest, .tb-suggest {
  border-radius: 7px; border-color: var(--line);
  box-shadow: 0 12px 32px rgba(45, 43, 43, .18);
}

/* ---- focus / selection ---- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Stacked-table labels (phones only): the field name in the house gold so it
   reads as a label at a glance, clearly apart from the near-black values. */
@media (max-width: 720px) {
  table.cards td::before {
    color: #7d5411; font-family: "Lora", Georgia, serif;
  }
}

/* Pager controls sit flush against a tab panel's scroll edge, which clipped
   the projecting gold ring — draw it inset so it always fully encloses. */
.tabcard .tabpanel .dt-pager select:focus,
.tabcard .tabpanel .dt-pager select:focus-visible,
.tabcard .tabpanel .dt-page-btn:focus-visible {
  outline-offset: -2px;
}
::selection { background: rgba(182, 130, 53, .25); }

/* ============================================================
   Charts — the bold OKLCH palette from the approved dashboard.
   These target the SVG classes emitted by the dash partials.
   ============================================================ */

/* NCE-1 bars: deep blue, current year gold */
.nce-bar rect { fill: oklch(0.6 0.11 265 / .85); }
.nce-bar:hover rect, .nce-bar:focus rect { fill: oklch(0.5 0.11 265); }
.nce-bar.is-current rect { fill: var(--accent); }
.nce-bar.is-current:hover rect, .nce-bar.is-current:focus rect { fill: #a06f24; }

/* PIV / pulse dots: teal */
.pdot-mark { fill: oklch(0.5 0.1 220); }
.pdot:hover .pdot-mark, .pdot:focus .pdot-mark { fill: var(--accent); }

/* PTAB pulse dots: crimson (the PTAB card uses the same .pdot classes inside
   .ptab-pulse — scope the hue there) */
.ptab-pulse .pdot-mark { fill: oklch(0.5 0.14 25); }
.ptab-pulse .pdot:hover .pdot-mark, .ptab-pulse .pdot:focus .pdot-mark { fill: var(--accent); }
.lit-pulse .pdot-mark { fill: oklch(0.45 0.13 345); }
.lit-pulse .pdot:hover .pdot-mark, .lit-pulse .pdot:focus .pdot-mark { fill: var(--accent); }

/* Patent watch flux: green listed vs crimson delisted (classes confirmed) */
.fbar .flux-add, .flux-add { fill: oklch(0.6 0.12 145 / .8); }
.fbar .flux-del, .flux-del { fill: oklch(0.5 0.15 25 / .8); }
/* legend swatches on the Patent Watch page match the bars */
.sw-add { background: oklch(0.6 0.12 145 / .8); }
.sw-del { background: oklch(0.5 0.15 25 / .8); }
/* a clicked (filtering) bar gets the same ink outline as the NCE tracker's */
.watch-flux-chart .fbar.is-current rect { stroke: #211f1e; stroke-width: 2; }

/* Products timeline: Orange Book / Purple Book segments (classes confirmed) */
.seg-ob-apps { fill: oklch(0.68 0.13 55); }
.seg-pb-apps { fill: oklch(0.52 0.13 310); }
.tlbar:hover .seg-ob-apps, .tlbar:focus .seg-ob-apps,
.ptbar:hover .seg-ob-apps, .ptbar:focus .seg-ob-apps { fill: oklch(0.6 0.13 55); }
.tlbar:hover .seg-pb-apps, .tlbar:focus .seg-pb-apps,
.ptbar:hover .seg-pb-apps, .ptbar:focus .seg-pb-apps { fill: oklch(0.45 0.13 310); }

/* chart chrome */
.viz-grid { stroke: rgba(32, 31, 29, .10); }
.viz-tick, .viz-yr { fill: var(--muted); font-size: 12px; }
.viz-val { fill: var(--text); font-weight: 600; }
.viz-legend .lg { font-size: 12.5px; }

/* ---- badges: literal orange & purple ---- */
.mini-badge { border-radius: 4px; font-family: "Lora", serif; }
.mini-badge.mb-ob { background: oklch(0.68 0.13 55 / .16);
  color: oklch(0.42 0.13 55); border: 1px solid oklch(0.6 0.14 55); }
.mini-badge.mb-pb { background: oklch(0.52 0.13 310 / .16);
  color: oklch(0.35 0.13 310); border: 1px solid oklch(0.52 0.13 310); }

/* ---- tables ---- */
table { font-variant-numeric: tabular-nums; }
.dash-card-body table, .dash-cards table { font-size: 14px; }
thead th { font-family: "Lora", serif; font-weight: 600;
  color: var(--muted); border-bottom: 1px solid var(--line); }
/* Column headings inside cards take the same gold as the profile's
   "Application No." line (.detail-meta), in both themes. */
.card thead th { color: #7d5411; }
html[data-theme="dark"] .card thead th { color: var(--gold-bright); }

/* ---- master timeframe + gear ---- */

/* ---- preview / trial banners ---- */
.preview-banner { background: rgba(182, 130, 53, .12);
  border: 1px solid var(--accent); border-radius: 4px; color: #3a270d; }

/* ---- status badges (NCE-1 tracker, watchlists) — bold hues ---- */
.badge { border-radius: 4px; font-family: "Lora", serif; white-space: nowrap; }
.badge-hot { background: oklch(0.5 0.15 25 / .14); color: oklch(0.4 0.15 25);
  border: 1px solid oklch(0.5 0.14 25); }
.badge-soon { background: rgba(182, 130, 53, .16); color: #5a3b0a;
  border: 1px solid var(--accent); }
.badge-later { background: oklch(0.6 0.12 145 / .14); color: oklch(0.38 0.12 145);
  border: 1px solid oklch(0.48 0.12 145); }
.badge-past { background: rgba(32, 31, 29, .06); color: var(--muted);
  border: 1px solid var(--line); }

/* ---- floating feedback pill: solid gold, the one filled accent the skin
   allows itself, so it reads as a call to action on the dark bar's palette ---- */
.fb-fab { background: var(--accent); color: #211f1e; font-family: "Lora", serif;
  box-shadow: 0 6px 20px rgba(58, 39, 13, .3); }
.fb-fab:hover { background: #a06f24; color: #211f1e; }

/* ---- avatar: gold-outlined, not filled ---- */
/* ring ~32% heavier than 1px (two 15% steps): Chrome snaps fractional
   borders back to 1px, so the extra .32px is an inset shadow in the ring's colour */
.avatar { background: transparent; border: 1px solid var(--accent);
  box-shadow: inset 0 0 0 .32px var(--accent);
  color: #7d5411; font-weight: 600; }
/* on the dark bar the deep gold vanishes; lift to the bright cut */
.topbar .avatar { color: var(--gold-bright); border-color: var(--gold-bright);
  box-shadow: inset 0 0 0 .32px var(--gold-bright); }
/* pinned pages in the bar: the avatar's treatment as a rounded square — the
   bar's own fill, a bright-gold outline — instead of style.css's white tile */
.topbar .fm-quick-ico { background: #211f1e; border: 1px solid var(--gold-bright);
  border-radius: 8px; color: var(--gold-bright); box-sizing: border-box;
  transition: background .16s ease; }
.topbar .fm-quick-ico:hover { background: rgba(225, 173, 102, .14); }
/* the icon is the drawer row's own Lucide glyph, stroked in the outline's gold */
.fm-quick-ico .fq-ico { display: inline-flex; pointer-events: none; }
.fm-quick-ico .fq-ico svg { display: block; }
/* a save that failed: dim the bar so an unsaved pin doesn't pass for a saved one */
.fm-quick.fm-quick-unsaved { opacity: .5; }

/* ---- Rx Book Plus hero + big searchbar ---- */
.obp-hero h1 { font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400; font-size: 42px; }
.obp-hero h1 .rx-x { font-size: .6em; vertical-align: -.22em; }
.obp-gold { color: var(--accent); }
.searchbar { border-radius: 7px; }
/* same Lora as the "Examples:" hint line below the box */
.searchbar input { font-family: "Lora", Georgia, serif; }
/* Bare icon, no ring: the outlined circle read as a second control fighting
   the box it sits in. The round gold tint appears only on hover. */
.searchbar button { background: transparent; border: 0; color: #5a3b0a; }
.searchbar button:hover { background: rgba(182, 130, 53, .12); }
.searchbar button svg { stroke: #7d5411; }

/* ---- sidebar / apps menu active states ---- */
/* (the apps button lives on the dark bar now — its states are defined in the
   topbar section above, not here with the light-ground sidebar) */
.snav.active { background: rgba(182, 130, 53, .12); color: #5a3b0a; }
.snav:hover { background: rgba(182, 130, 53, .08); }

/* ---- apps drawer v2: a ledger-style index (APP-DRAWER-V2.md) ----
   420px white panel, hairline-ruled rows, gold stroke-only Lucide icons,
   Cormorant titles, a pin toggle trailing each row. Same routes and pin
   mechanism as before -- presentation only. */
.nav-mega { width: 420px; min-width: 0; padding: 6px 0; gap: 0; overflow: hidden;
  background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid var(--line); border-radius: 7px;
  box-shadow: 0 12px 32px rgba(45, 43, 43, .22); }
.topbar nav .nav-mega a, .nav-mega a, .nav-mega a:hover {
  display: flex; align-items: baseline; gap: 18px; padding: 13px 26px;
  border-radius: 0; border-left: 3px solid transparent; border-top: 1px solid var(--line);
  background: transparent; text-decoration: none; }
.nav-mega a:first-child { border-top: 0; }
.nav-mega .dz-ico { width: 22px; height: 22px; min-width: 30px; flex: none;
  align-self: center; color: var(--accent); display: inline-flex; align-items: center; }
.nav-mega .mega-txt { flex: 1; gap: 0; }
.nav-mega .mega-txt strong { font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: 18px; line-height: 1.2; color: var(--text);
  font-feature-settings: "lnum" 1, "tnum" 1; }
.nav-mega .mega-txt strong .dd-dot { color: var(--accent); }
.nav-mega .mega-txt strong .rx-x { font-size: .7em; vertical-align: -.1em; }
.nav-mega .mega-txt small { font-family: "Lora", Georgia, serif; font-size: 13px;
  line-height: 19px; color: rgba(32, 31, 29, .6); margin-top: 2px; }
.nav-mega .ask-beta { font-family: "Lora", Georgia, serif; font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; background: transparent;
  color: #7d5411; border: 1px solid var(--accent); border-radius: 4px;
  padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
/* pin toggle: always shown, 30% ink until the row is hovered; gold when pinned */
.nav-mega .mega-pin { width: 16px; height: 16px; margin-left: 0; border-radius: 0;
  opacity: 1; color: rgba(32, 31, 29, .3); align-self: center; }
.nav-mega .mega-pin:hover { background: transparent; }
/* touch screens: a finger-sized pin, so a tap lands on it and not the row */
@media (hover: none) { .nav-mega .mega-pin { width: 36px; height: 36px; margin-right: -8px; } }
.nav-mega .mega-pin.active { color: #7d5411; }
/* hover: 6% gold tint, title warms to gold-800, pin to gold-600 */
.nav-mega a:hover, .topbar nav .nav-mega a:hover { background: rgba(182, 130, 53, .06); }
.nav-mega a:hover .mega-txt strong { color: #5a3b0a; }
.nav-mega a:hover .mega-pin { color: #a06f24; }
.nav-mega a:hover .mega-pin.active { color: #7d5411; }
/* the current page: 3px gold rule, 8% tint, gold-700 icon */
.nav-mega a.is-active, .topbar nav .nav-mega a.is-active { border-left-color: var(--accent);
  background: rgba(182, 130, 53, .08); }
.nav-mega a.is-active .mega-txt strong { color: #5a3b0a; }
.nav-mega a.is-active .dz-ico { color: #7d5411; }
.nav-mega a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 760px) {   /* phones: the full-width sheet from style.css */
  /* the sheet must scroll: overflow: hidden above was clipping the last rows,
     and its height stays inside the viewport under the two-row top bar */
  .nav-mega { width: auto; overflow-y: auto; scrollbar-width: thin;
    max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
  .topbar nav .nav-mega a, .nav-mega a { padding: 12px 18px; }
}

/* ---- forms / auth ---- */
.field input, .onboard-form select { border-radius: 4px; font-family: "Lora", serif; }
.onboard-form select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(182, 130, 53, .15); }
.field input:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(182, 130, 53, .15); }
.filters input[type=text], .filters select { border-radius: 4px;
  font-family: "Lora", serif; }

/* ---- drawers / glossary ---- */
.drawer-icon:hover { border-color: var(--accent); color: #7d5411 !important; }
.drawer-grip:hover, body.drawer-resizing .drawer-grip { background: var(--accent); }

/* ---- public info pages (FAQ, Terms, Privacy) ---- */
/* Headings carry the only bold on these pages, so they must actually look
   bold: the global heading rule's 500 reads light in Cormorant at these
   sizes. 600 is the heaviest cut loaded — 700 would be synthesized. */
.doc-title, .legal-doc h2, .faq-item h2 { font-weight: 600; }

/* ---- section cards (application profile) ---- */
details.sec-card > summary h2 { font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600; font-size: 20px; }
/* The profile's identifying line — applicant, application number, ingredient —
   in the accent. Set at gold-700 rather than the #b68235 that outlines the
   Export button: at 14px the base accent lands near 3:1 on white, which the
   design system reserves for icons and interface chrome, not running text.
   Same hue, legible at this size. */
.drug-profile .detail-meta,
.drug-profile .detail-meta .mono { color: #7d5411; font-weight: 600; }
/* the sponsor in that line links to the company profile: the line's own ink,
   a dotted rule to show it's clickable, solid on hover */
.drug-profile .detail-meta .dm-company { color: inherit; text-decoration: none;
  border-bottom: 1px dotted currentColor; }
.drug-profile .detail-meta .dm-company:hover { border-bottom-style: solid; }

/* Every figure on the drug profile in one face. style.css sets .mono to
   Consolas for identifiers — application and product numbers, docket numbers,
   document codes — which is a third typeface this design system never had, and
   it made those columns read as foreign next to the dates beside them.
   Size is inherited rather than fixed, so the subtitle stays subtitle-sized and
   table cells stay table-sized; only the face and the figures change. */
.drug-profile .mono,
.drug-profile .patent-link,
.drug-profile .use-codes {
  font-family: "Lora", Georgia, serif; font-size: inherit;
  font-variant-numeric: tabular-nums;
}
/* the count sits inside a Cormorant heading and used to inherit its bold,
   old-style figures; it wears the morning brief's numerals instead — Lora,
   regular weight, lining tabular figures */
.obp-count { background: transparent; border: 1px solid var(--line);
  border-radius: 4px; color: #7d5411; font-family: "Lora", Georgia, serif;
  font-weight: 400; font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: 0; }

/* ============================================================
   Appearance switcher + dark theme (2026-08-12)
   base.html stamps html[data-theme="light"|"dark"] before the
   stylesheets load; the stored pref (localStorage "dosius.theme")
   may be "system", which JS resolves against prefers-color-scheme
   and keeps live. Everything below keys off that attribute.
   ============================================================ */

/* ---- the switcher (profile menu) ---- */
.menu-appearance { padding: 6px 14px 8px; }
.ma-label { font-size: 11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ma-opts { display: flex; gap: 6px; }
.ma-opts button { flex: 1; font-family: "Lora", Georgia, serif; font-size: 12.5px;
  padding: 6px 0; border: 1px solid var(--line); border-radius: 4px;
  background: transparent; color: var(--muted); cursor: pointer; }
.ma-opts button:hover { background: rgba(182, 130, 53, .08); }
.ma-opts button.active { background: rgba(182, 130, 53, .14);
  border-color: var(--accent); color: #5a3b0a; }

/* ---- dark tokens: ink ground, paper text, bright-gold accent ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #f3f2f2;            /* ink flips to paper wherever it was text */
  --navy-2: #d9d6d2;
  --accent: #b68235;
  --gold-bright: #e1ad66;
  --bg: #171614;
  --card: #211f1e;
  --text: #d9d6d2;
  --muted: #a5a09a;
  --line: rgba(243, 242, 242, .14);
  --hot: #e0776a;
  --ok: #7db781;
}

/* the deep-gold text/link cut is illegible on ink; lift to the bright cut */
html[data-theme="dark"] a { color: var(--gold-bright); }
html[data-theme="dark"] .btn { color: var(--gold-bright) !important; }
html[data-theme="dark"] .btn:hover { color: var(--gold-bright) !important; }
html[data-theme="dark"] .btn-gold { color: var(--gold-bright) !important; }
html[data-theme="dark"] .btn-outline { color: var(--gold-bright); }
html[data-theme="dark"] .ma-opts button.active,
html[data-theme="dark"] .snav.active,
html[data-theme="dark"] .searchbar button { color: var(--gold-bright); }
html[data-theme="dark"] .searchbar button svg { stroke: var(--gold-bright); }
html[data-theme="dark"] .avatar { color: var(--gold-bright); border-color: var(--gold-bright);
  box-shadow: inset 0 0 0 .32px var(--gold-bright); }
html[data-theme="dark"] .drug-profile .detail-meta,
html[data-theme="dark"] .drug-profile .detail-meta .mono,
html[data-theme="dark"] .obp-count,
html[data-theme="dark"] .obp-gold { color: var(--gold-bright); }
html[data-theme="dark"] .drawer-icon:hover { color: var(--gold-bright) !important; }
html[data-theme="dark"] .preview-banner { color: #e8d7b8; }

/* ---- surfaces: cards, menus, panels ---- */
html[data-theme="dark"] .card {
  background: var(--card);
  border-color: rgba(243, 242, 242, .22) !important;
}
html[data-theme="dark"] .preview-lock-card { background: var(--card); }
html[data-theme="dark"] .nav-dd-menu,
html[data-theme="dark"] .dash-gear-menu,
html[data-theme="dark"] .obp-suggest,
html[data-theme="dark"] .tb-suggest {
  background: rgba(33, 31, 30, .82);
  border-color: rgba(243, 242, 242, .16);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .nav-dd-menu,
  html[data-theme="dark"] .dash-gear-menu,
  html[data-theme="dark"] .obp-suggest { background: #262422; }
}
/* document download controls: gold on hover, like every other stroke control */
.drawer-dl { font-family: "Lora", Georgia, serif; border-radius: 4px; }
.drawer-dl:hover, a.doc-dl-text:hover, .doc-menu a.doc-menu-dl:hover {
  color: #5a3b0a; border-color: var(--accent); background: rgba(182, 130, 53, .10); }
/* the image viewer's header tools wear the same dress as the download button */
.drawer-pill { font-family: "Lora", Georgia, serif; border-radius: 4px; }
.drawer-pill button:hover { color: #5a3b0a; background: rgba(182, 130, 53, .10); }
html[data-theme="dark"] .drawer-pill,
html[data-theme="dark"] .drawer-pill button + button { border-color: rgba(243, 242, 242, .25); }
html[data-theme="dark"] .drawer-pill button { color: rgba(243, 242, 242, .7); }
html[data-theme="dark"] .drawer-pill button:hover { color: var(--gold-bright); background: rgba(182, 130, 53, .16); }
html[data-theme="dark"] .drawer-dl { color: rgba(243, 242, 242, .7); border-color: rgba(243, 242, 242, .25); }
html[data-theme="dark"] .drawer-dl:hover, html[data-theme="dark"] a.doc-dl-text:hover,
html[data-theme="dark"] .doc-menu a.doc-menu-dl:hover {
  color: var(--gold-bright); border-color: var(--gold-bright); background: rgba(182, 130, 53, .16); }
html[data-theme="dark"] .sidebar { background: var(--card); }
/* the drawer at night: solid ink surface, paper text, gold stays gold */
html[data-theme="dark"] .nav-mega { background: #262422; border-color: rgba(243, 242, 242, .16);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .nav-mega a, html[data-theme="dark"] .topbar nav .nav-mega a {
  border-top-color: rgba(243, 242, 242, .12); }
html[data-theme="dark"] .nav-mega .mega-txt strong { color: #f3f2f2; }
html[data-theme="dark"] .nav-mega .mega-txt small { color: rgba(243, 242, 242, .6); }
html[data-theme="dark"] .nav-mega .mega-pin { color: rgba(243, 242, 242, .3); }
html[data-theme="dark"] .nav-mega .mega-pin.active,
html[data-theme="dark"] .nav-mega a:hover .mega-pin,
html[data-theme="dark"] .nav-mega a:hover .mega-txt strong,
html[data-theme="dark"] .nav-mega a.is-active .mega-txt strong,
html[data-theme="dark"] .nav-mega a.is-active .dz-ico,
html[data-theme="dark"] .nav-mega .ask-beta { color: var(--gold-bright); }
html[data-theme="dark"] .nav-mega a:hover { background: rgba(182, 130, 53, .10); }
html[data-theme="dark"] .nav-mega a.is-active { background: rgba(182, 130, 53, .14); }
html[data-theme="dark"] .appbar { background: var(--card); }
html[data-theme="dark"] .chart-detail { background: #262422; }
html[data-theme="dark"] .cd-head { background: #2a2826; }
html[data-theme="dark"] .d-sec,
html[data-theme="dark"] .ptab-item,
html[data-theme="dark"] .lbl-full { background: var(--card); }
html[data-theme="dark"] .gloss-head,
html[data-theme="dark"] .drawer-head,
html[data-theme="dark"] .gloss-code { background: #2a2826; }

/* sticky table/card chrome that pinned itself on white */
html[data-theme="dark"] .cd-table th,
html[data-theme="dark"] .tabcard .tabpanel .table-scroll thead th,
html[data-theme="dark"] .sub-scroll thead th { background: var(--card); }

/* ---- controls: buttons, pills, inputs ---- */
html[data-theme="dark"] .dt-pager select,
html[data-theme="dark"] .dt-page-btn,
html[data-theme="dark"] .ask-act,
html[data-theme="dark"] .ft-box,
html[data-theme="dark"] .lbl-chip,
html[data-theme="dark"] .lbl-expand,
html[data-theme="dark"] .lbl-examples a { background: var(--card); color: var(--muted); }
html[data-theme="dark"] .ft-current { background: rgba(182, 130, 53, .12); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: #2a2826; color: var(--text); border-color: var(--line); }
html[data-theme="dark"] .topbar-search input { background: rgba(243, 242, 242, .08); }
html[data-theme="dark"] .searchbar { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .searchbar input { background: transparent; }
html[data-theme="dark"] .ask-form { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .ask-sql pre { background: #2a2826; }
/* Ask Dosius at night: style.css fills the suggestion cards, the answer card
   and the "New chat" pill with translucent white, which under light text
   read as blank white tiles */
html[data-theme="dark"] .ask-chip { background: var(--card); border-color: var(--line);
  color: var(--text); box-shadow: none; }
html[data-theme="dark"] .ask-chip:hover { border-color: var(--gold-bright);
  background: rgba(225, 173, 102, .08); box-shadow: none; }
html[data-theme="dark"] .ask-answer { background: var(--card); }
html[data-theme="dark"] .ask-new { background: var(--card); color: var(--muted); }
html[data-theme="dark"] .ask-new:hover,
html[data-theme="dark"] .ask-act:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
html[data-theme="dark"] .ask-suggest-label { color: var(--gold-bright); }
/* the question field sits inside the pill: no second, darker box within it */
html[data-theme="dark"] .ask-form input { background: transparent; }
/* buttons don't inherit the page face by default; the cards read in Lora */
.ask-chip, .ask-new, .ask-act, .ask-form input { font-family: inherit; }
html[data-theme="dark"] .al-add input { background: #2a2826; }
html[data-theme="dark"] .al-add input:focus { background: #2a2826; }
html[data-theme="dark"] .al-toggle { background: #454240; }
html[data-theme="dark"] .al-toggle.on { background: var(--accent); }

/* ---- hovers: every light-gray wash becomes a paper whisper ---- */
html[data-theme="dark"] .tb-link:hover,
html[data-theme="dark"] .apps-btn:hover,
html[data-theme="dark"] .side-collapse:hover,
html[data-theme="dark"] .snav:hover,
html[data-theme="dark"] .nav-dd-menu a:hover,
html[data-theme="dark"] .topbar nav .nav-dd-menu a:hover,
html[data-theme="dark"] .dash-add-item:hover,
html[data-theme="dark"] .obp-sug-item:hover,
html[data-theme="dark"] .obp-sug-item.active,
html[data-theme="dark"] .facet-opt:hover,
html[data-theme="dark"] .doc-btn:hover,
html[data-theme="dark"] .drawer-close:hover,
html[data-theme="dark"] .row-menu button:hover,
html[data-theme="dark"] .d-sec > summary:hover,
html[data-theme="dark"] .lblm-item:hover { background: rgba(243, 242, 242, .07); }
html[data-theme="dark"] tr:hover td { background: rgba(243, 242, 242, .05); }

/* ---- danger hovers ---- */
html[data-theme="dark"] .nav-dd-menu a.signout:hover,
html[data-theme="dark"] .snav-out:hover,
html[data-theme="dark"] .dgm-reset:hover,
html[data-theme="dark"] .al-del:hover,
html[data-theme="dark"] .row-menu button.danger:hover,
html[data-theme="dark"] .mega-pin.active:hover { background: rgba(224, 119, 106, .14); }
html[data-theme="dark"] .error { background: rgba(224, 119, 106, .14);
  border-color: rgba(224, 119, 106, .4); }

/* ---- gold-tinted chips & rows ---- */
html[data-theme="dark"] .badge-soon,
html[data-theme="dark"] .chip-soon,
html[data-theme="dark"] .year-drill,
html[data-theme="dark"] .tabcard .tab .tab-count,
html[data-theme="dark"] .obp-sug-item.obp-sug-more:hover,
html[data-theme="dark"] .obp-sug-item.obp-sug-more.active {
  background: rgba(182, 130, 53, .16); color: var(--gold-bright);
  border-color: rgba(182, 130, 53, .5);
}
html[data-theme="dark"] .plan-opt.current { background: rgba(182, 130, 53, .10); }
html[data-theme="dark"] tr.sub-orig td { background: rgba(182, 130, 53, .10); }
html[data-theme="dark"] tr.sub-orig:hover td { background: rgba(182, 130, 53, .16); }
html[data-theme="dark"] tr.sub-orig .doc-btn:hover { background: rgba(182, 130, 53, .22); }

/* ---- status badges: same hues, lifted for ink ---- */
html[data-theme="dark"] .badge-hot { background: rgba(224, 119, 106, .16); color: #e8968b; }
html[data-theme="dark"] .badge-later { color: #8cc491; }
html[data-theme="dark"] .badge-past { background: rgba(243, 242, 242, .07); }
html[data-theme="dark"] .mini-badge.mb-ob { color: #e5a869; }
html[data-theme="dark"] .mini-badge.mb-pb { color: #c4a9e8; }
html[data-theme="dark"] .mb-add { background: rgba(77, 147, 81, .2); color: #8cc491; }
html[data-theme="dark"] .mb-del { background: rgba(168, 54, 52, .22); color: #e8968b; }
html[data-theme="dark"] .ptab-badge-good,
html[data-theme="dark"] .src-badge.good { background: rgba(77, 147, 81, .2); color: #8cc491; }
html[data-theme="dark"] .ptab-badge-bad,
html[data-theme="dark"] .src-badge.bad { background: rgba(224, 119, 106, .16); color: #e8968b; }
html[data-theme="dark"] .ptab-badge-warn,
html[data-theme="dark"] .src-badge.warn { background: rgba(182, 130, 53, .18); color: var(--gold-bright); }
html[data-theme="dark"] .ptab-badge-neutral,
html[data-theme="dark"] .src-badge.neutral { background: rgba(243, 242, 242, .08); color: var(--muted); }

html[data-theme="dark"] mark.nct-hit {
  background: rgba(182, 130, 53, .28); color: var(--gold-bright);
}

/* admin pipelines: progress tracks + project board on the ink ground */
html[data-theme="dark"] .pipe-bar { background: rgba(243, 242, 242, .12); }
html[data-theme="dark"] .ms-node.done .ms-dot { color: #171614; }
html[data-theme="dark"] .ms-node.active .ms-dot {
  box-shadow: 0 0 0 4px rgba(125, 183, 129, .18);
}
html[data-theme="dark"] .ptab-dot { background: var(--card); }

/* ---- ink-filled chrome that flipped to paper with --navy: give the
   hardcoded white text its ink back (inverted-chip look) ---- */
html[data-theme="dark"] .viz-tip,
html[data-theme="dark"] .nce-tip,
html[data-theme="dark"] .fm-toast { color: #211f1e; }
html[data-theme="dark"] .ptray-chip { color: #211f1e; border-color: rgba(32, 31, 29, .35); }

/* ---- chart chrome ---- */
html[data-theme="dark"] .viz-grid { stroke: rgba(243, 242, 242, .12); }
html[data-theme="dark"] .nce-tracker-chart .nce-bar.is-current rect { stroke: #f3f2f2; }
html[data-theme="dark"] .watch-flux-chart .fbar.is-current rect { stroke: #f3f2f2; }

/* ---- Ask page: the gold washes over ink instead of cream ---- */
html[data-theme="dark"] .ask-bg {
  background:
    radial-gradient(70% 60% at 50% 92%, rgba(182, 130, 53, .16), transparent 75%),
    radial-gradient(55% 45% at 15% 55%, rgba(182, 130, 53, .07), transparent 70%),
    radial-gradient(50% 40% at 85% 25%, rgba(182, 130, 53, .06), transparent 70%),
    var(--bg);
}

/* ---- misc: quote blocks, mobile card-tables, selection ---- */
html[data-theme="dark"] .lbl-quote { background: rgba(243, 242, 242, .05); }
@media (max-width: 720px) {
  html[data-theme="dark"] table.cards tr { background: var(--card); }
}
html[data-theme="dark"] ::selection { background: rgba(225, 173, 102, .3); }
html[data-theme="dark"] ::placeholder { color: #7c7771; }

/* ============================================================
   Dashboard v2 — "The Dosius Daily" (design 4b, 2026-08-22)
   Index-and-stage: a centered masthead and range selector, the
   ledger rail on the left (one figure per metric, click to stage,
   drag to reorder), one staged chart or table on the right.
   Behaviour is the card grid's; only the layout + skin changed.
   ============================================================ */
.daily { --chart-scale: 1; max-width: 1240px; margin: 0 auto; }

/* masthead */
.daily-mast { text-align: center; border-bottom: 2px solid var(--text);
  padding: 18px 48px 16px; }
.daily-date { margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: #7d5411; font-variant-numeric: tabular-nums; }
.daily-title { margin: 6px 0 0; font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500; font-size: 34px; line-height: 1.1; color: var(--text); }
.daily-title span { color: var(--accent); }
.nav-mega .dd-dot { color: var(--accent); }

/* morning brief — a single column: a rule-flanked headline naming the window,
   then the model's bullets as plain rows beneath it */
.daily-brief { padding: 0; font-family: "Lora", Georgia, serif; color: var(--text); }
/* the headline sits in its own hairline, the rule running out to either side
   of the text, co-extensive with the range separator below it */
.daily-brief .brief-head, .ledger-head { display: flex; align-items: center; gap: 26px;
  margin: 0; padding: 22px 0 0; }
.daily-brief .brief-head::before, .daily-brief .brief-head::after,
.ledger-head::before, .ledger-head::after {
  content: ""; flex: 1 1 0; min-width: 0; height: 1px; background: var(--line); }
/* "The ledger" sits in the rule above the range row, like the brief's headline */
.ledger-head { padding-top: 20px; }
.daily-brief .bh-txt, .ledger-head .bh-txt { font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #7d5411; white-space: nowrap; font-feature-settings: "tnum" 1; }
.daily-brief .brief-rows { display: flex; flex-direction: column; padding: 14px 36px 28px 36px; }
.daily-brief .brief-row { display: flex; gap: 14px; padding: 7px 0;
  /* each row settles in from just above, one after another, top down;
     --i is the row's index (set by the template and by renderBrief) */
  animation: brief-in .5s cubic-bezier(.22, .75, .3, 1) calc(var(--i, 0) * 110ms) backwards; }
@keyframes brief-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .daily-brief .brief-row { animation: none; } }
.daily-brief .brief-mark { color: var(--accent); font-size: 13px; line-height: 23px; flex: none; }
.daily-brief .brief-row p { margin: 0; font-size: 14px; line-height: 23px;
  font-feature-settings: "tnum" 1; color: color-mix(in srgb, var(--text) 82%, transparent); }
.daily-brief .brief-row strong { font-weight: 600; }
.daily-brief .brief-row a { color: #7d5411; text-decoration: none;
  border-bottom: 1px solid var(--accent); }
.daily-brief .brief-row a:hover { color: #9a6a1c; }
html[data-theme="dark"] .daily-brief .bh-txt, html[data-theme="dark"] .ledger-head .bh-txt,
html[data-theme="dark"] .daily-brief .brief-row a { color: var(--gold-bright); }
/* earlier briefs: the history disc beside the headline, and its calendar */
.daily-brief { position: relative; }
.daily-brief .bh-wrap { display: inline-flex; align-items: center; gap: 10px; }
/* the day being viewed sits on its own line under the headline */
.daily-brief .brief-when { margin: 8px 0 0; text-align: center; font-size: 11px; letter-spacing: .12em;
  color: #7d5411; font-feature-settings: "tnum" 1; }
.daily-brief .brief-when[hidden] { display: none; }
html[data-theme="dark"] .daily-brief .brief-when { color: var(--gold-bright); }
.brief-hist { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted);
  padding: 0; cursor: pointer; }
.brief-hist:hover, .brief-hist.active { color: var(--text); border-color: var(--text); }
.brief-today { border: 0; background: transparent; padding: 0; cursor: pointer; font-family: "Lora", Georgia, serif;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #7d5411;
  border-bottom: 1px solid var(--accent); }
.brief-today[hidden] { display: none; }
.brief-cal { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 30;
  width: 320px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 16px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  box-shadow: 0 12px 32px rgba(45, 43, 43, .22); }
.brief-cal[hidden] { display: none; }
.brief-cal .sc-sel { font-size: 19px; }
.brief-cal .sc-day { height: 38px; }
.brief-cal .sc-day.is-empty { cursor: default; color: color-mix(in srgb, var(--text) 35%, transparent); }
.brief-cal .sc-day.is-empty:hover { background: transparent; }
.brief-cal .bc-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  margin: 2px auto 0; }
.brief-cal .bc-note { margin: 10px 0 0; font-size: 11px; color: var(--muted); text-align: center; }
html[data-theme="dark"] .brief-cal { background: #262422; border-color: rgba(243, 242, 242, .16); }
html[data-theme="dark"] .brief-hist { color: var(--muted); }
html[data-theme="dark"] .brief-hist:hover, html[data-theme="dark"] .brief-hist.active { color: var(--text); border-color: var(--text); }
html[data-theme="dark"] .brief-today { color: var(--gold-bright); }
html[data-theme="dark"] .brief-cal .bc-dot { background: var(--gold-bright); }
.daily-brief .brief-quiet p { color: color-mix(in srgb, var(--text) 55%, transparent); }
.daily-brief.is-pending .brief-quiet p { animation: brief-pulse 1.6s ease-in-out infinite; }
@keyframes brief-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* range selector: centered text tabs; the live one underlined in gold.
   The rule rides above the row, so the brief is parted from the ledger first
   and the range tabs and gear sit on the ledger's side of the line. */
.daily-range { position: relative; padding: 16px 0 10px; }
.daily-range .dash-master-tf { display: flex; justify-content: center; gap: 28px; }
.daily-range .dmtf-lbl, .daily-range .dmtf-btn {
  font-family: "Lora", Georgia, serif; font-size: 11.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: rgba(32, 31, 29, .6); margin: 0; padding: 0 0 2px; line-height: 1.4;
  background: transparent; border: 0; border-bottom: 1px solid transparent;
  border-radius: 0; cursor: pointer;
}
.daily-range .dmtf-lbl { cursor: default; }
.daily-range .dmtf-btn:hover { color: #5a3b0a; background: transparent; }
.daily-range .dmtf-btn.active { color: #5a3b0a; background: transparent;
  border-bottom-color: var(--accent); }

/* NCE-1 tracker, PIV and Patent Watch: the page chart sits flat, not in a card */
.nce-tracker-chart, .watch-flux-chart { margin: 0 0 26px; }
/* a hairline above the chart title runs title to range selector, like the
   Daily's masthead; the chart's x-axis below runs the same full width */
.nce-tracker-chart .viz-head, .watch-flux-chart .viz-head { border-top: 1px solid var(--line);
  padding: 12px 0 0; margin-bottom: 6px; align-items: center; }
.nce-tracker-chart .viz-sub, .watch-flux-chart .viz-sub { margin-bottom: 0; }
/* Patent Watch's right side is two rows (range, then legend): keep the line
   level with the range row rather than centred on both */
.watch-flux-chart .viz-head { align-items: flex-start; }
.watch-flux-chart .viz-sub { margin-top: 0; }
/* let the canvas follow the container's width (no height cap) so the axis is
   exactly co-extensive with the hairline above, not shrunk and centred */
.nce-tracker-chart .nce-bars, .watch-flux-chart .viz-svg { max-height: none; }
/* Filter panel › Columns: a switch per column of the table beside it
   (base.html applyColumns). The checkbox is the control — visually hidden,
   still focusable — and the track beside it draws its state. */
.col-switch { position: relative; display: flex; align-items: center; gap: 10px; padding: 5px 4px;
  font-size: 13px; color: var(--text); border-radius: 5px; cursor: pointer; }
.col-switch:hover { background: rgba(182, 130, 53, .07); }
.col-switch-name { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.col-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.col-switch-track { position: relative; flex: 0 0 30px; height: 17px; border-radius: 999px;
  background: rgba(32, 31, 29, .22); transition: background .16s ease; }
.col-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .16s ease; }
.col-switch input:checked + .col-switch-track { background: var(--accent); }
.col-switch input:checked + .col-switch-track::after { transform: translateX(13px); }
.col-switch input:focus-visible + .col-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.col-switch input:disabled + .col-switch-track { opacity: .45; }
.col-switch:has(input:disabled) { cursor: default; }
html[data-theme="dark"] .col-switch-track { background: rgba(243, 242, 242, .22); }
/* a column switched off: gone from the table and from the phone card rows */
table.datatable .dt-col-off { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .col-switch-track, .col-switch-track::after { transition: none; }
}

/* NCE-1 tracker table: fit beside the filter panel with no sideways scroll.
   Its minimum width was set by unbreakable ingredient / applicant words and by
   one-line headers; let those two columns break anywhere and the headers wrap,
   and keep the short columns (date, status, appl no, patents) on one line. */
@media (min-width: 721px) {
  table.nce-table td:nth-child(4), table.nce-table td:nth-child(5) { overflow-wrap: anywhere; }
  table.nce-table td:nth-child(1), table.nce-table td:nth-child(2),
  table.nce-table td:nth-child(6), table.nce-table td:nth-child(7) { white-space: nowrap; }
  table.nce-table.datatable thead tr:first-child th { white-space: normal; vertical-align: bottom; }
}
/* seven columns need ~700px: on mid-size windows the filter panel stacks above
   the table (as it already does under 900px) instead of squeezing it */
@media (max-width: 1100px) {
  .dt-layout:has(.nce-table) { flex-direction: column; }
  .dt-layout:has(.nce-table) .dt-facets { position: static; flex: none; width: 100%; max-height: 260px; }
  .dt-layout:has(.nce-table) .dt-main { width: 100%; }
}

/* every other date-range selector (NCE-1 tracker, PIV, Patent Watch) wears the
   same dress as the Daily's: plain serif text tabs, the live one underlined in gold */
.nce-tracker-chart .dtf, .watch-flux-chart .dtf, .dtf {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.dtf .dtf-lbl, .dtf .dtf-btn {
  font-family: "Lora", Georgia, serif; font-size: 11.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: rgba(32, 31, 29, .6); margin: 0; padding: 0 0 2px; line-height: 1.4;
  background: transparent; border: 0; border-bottom: 1px solid transparent;
  border-radius: 0; cursor: pointer; text-decoration: none;
}
.dtf .dtf-lbl { cursor: default; }
.dtf .dtf-btn:hover { color: #5a3b0a; background: transparent; border-color: transparent; }
.dtf .dtf-btn.active { color: #5a3b0a; background: transparent;
  border-color: transparent; border-bottom-color: var(--accent); }
/* z-index: the menu must paint above the stage (the translate creates a
   stacking context, so the menu's own z-index alone would not lift it) */
.daily-tools { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 30; }
.dash-saved { font-size: 12px; font-style: italic; font-weight: 400; color: #7d5411; }
/* A- / A+ : chart text size (inside the gear menu) */
.text-size { display: flex; align-items: center; gap: 6px; padding: 2px 10px 8px; }
.tsz-val { min-width: 38px; text-align: center; font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.tsz-btn { display: inline-flex; align-items: baseline; gap: 1px; height: 28px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-family: "Lora", Georgia, serif; font-size: 12px; line-height: 1; }
.tsz-btn:hover { color: var(--text); }
.tsz-btn:disabled { opacity: .35; cursor: default; }
.tsz-a { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }
.tsz-sm { font-size: 13px; } .tsz-lg { font-size: 18px; }
.dash-gear { width: 28px; height: 28px; border: 0; border-radius: 0;
  background: transparent; color: var(--muted); }
.dash-gear:hover { background: transparent; color: var(--text); }
.daily .dash-gear-menu { border-radius: 2px; min-width: 280px; background: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; }
.dash-add-item, .dgm-reset { border-radius: 0; font-family: "Lora", Georgia, serif; }
.dash-add-item { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; white-space: nowrap; padding: 7px 10px; color: var(--muted); }
.dash-add-item.on { color: var(--text); }
.dash-add-item:hover { background: rgba(182, 130, 53, .08); }
.dash-add-item.held { cursor: default; }
.dai-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
/* the switch: a pill track, gold when the figure is in the ledger */
.dai-switch { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px;
  background: rgba(45, 43, 43, .18); transition: background .15s ease; }
.dai-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.dash-add-item.on .dai-switch { background: var(--accent); }
.dash-add-item.on .dai-knob { transform: translateX(14px); }
.dash-add-item.held .dai-switch { opacity: .55; }
.dash-add-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* two columns: ledger rail | stage */
.daily-body { display: grid; grid-template-columns: 300px 1fr; min-height: 640px; }

/* the ledger rail */
.ledger { position: relative; padding: 12px 0 26px; min-width: 0; }
/* the divider starts clear of the range row above it and runs to the page
   footer's rule, so it never meets either line */
.ledger::after { content: ""; position: absolute; top: 6px; bottom: 0; right: 0;
  width: 1px; background: var(--line); }
.ledger-rows { display: flex; flex-direction: column; }
.ledger-row { display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 16px 28px 16px 25px; background: transparent;
  border: 0; border-left: 3px solid transparent; border-top: 1px solid var(--line);
  border-radius: 0; font: inherit; color: inherit;
  transition: background .28s ease, border-color .28s ease; }
.lr-lbl { transition: color .28s ease; }
.ledger-row:first-child { border-top: 0; }
.ledger-row:last-child { border-bottom: 1px solid var(--line); }
.ledger-row:hover { background: rgba(182, 130, 53, .05); }
.ledger-row.is-active { border-left-color: var(--accent); background: rgba(182, 130, 53, .08); }
.ledger-row.dragging { opacity: .45; outline: 1px dashed var(--accent); outline-offset: -1px; }
.ledger-row[hidden] { display: none !important; }
.lr-fig { display: block; font-family: "Cormorant Garamond", Georgia, serif; font-size: 40px;
  line-height: 1; font-feature-settings: "lnum" 1, "tnum" 1; color: var(--text); }
.lr-lbl { display: block; margin-top: 5px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(32, 31, 29, .6); }
.ledger-row.is-active .lr-lbl { color: #5a3b0a; }
/* each figure carries its chart's hue */
.ledger-row[data-hue="nce"] .lr-fig { color: oklch(0.5 0.11 265); }
.ledger-row[data-hue="piv"] .lr-fig { color: oklch(0.5 0.1 220); }
.ledger-row[data-hue="ptab"] .lr-fig { color: oklch(0.5 0.14 25); }
.ledger-row[data-hue="lit"] .lr-fig { color: oklch(0.45 0.13 345); }
.ledger-row[data-hue="flux"] .lrf-a { color: oklch(0.48 0.12 145); }
.ledger-row[data-hue="flux"] .lrf-b { color: oklch(0.5 0.14 25); }
.ledger-row[data-hue="flux"] .lrf-sep { font-size: 22px; color: rgba(32, 31, 29, .4); }
.ledger-note { margin: 18px 28px 0; font-size: 12px; line-height: 19px;
  color: rgba(32, 31, 29, .55); }

/* the stage */
.stage { position: relative; padding: 26px 36px 32px; min-width: 0;
  display: flex; flex-direction: column; }
.stage > [data-card] { display: none; }
.stage > [data-card].is-staged { display: flex; flex-direction: column; flex: 1;
  animation: stage-in .34s cubic-bezier(.22, .75, .3, 1) both; }
@keyframes stage-in { from { opacity: 0; transform: translateY(8px); }
                      to { opacity: 1; transform: none; } }
.stage > [data-card][hidden] { display: none !important; }
.stage-panel { position: relative; padding: 0 !important; margin: 0 !important;
  border: 0 !important; background: transparent; box-shadow: none; border-radius: 0;
  transition: opacity .12s ease; }
.stage-panel.dcard-loading { opacity: .5; }
.dcard-content { display: contents; }
.stage-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.stage-head { padding-right: 0; }
.stage-title { margin: 0; font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--text);
  display: block; letter-spacing: 0; }
/* "NCE-1" in the staged title wears the ledger label's Lora, not Cormorant
   (whose old-style 1 reads as an I); sized down so the caps sit level with
   the Cormorant around it */
.stage-title .st-nce { font-family: "Lora", Georgia, serif; font-size: .86em;
  font-feature-settings: "lnum" 1; }
.stage-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.5;
  color: rgba(32, 31, 29, .6); }
/* the ? disc sits inline at the near right of the staged title (the script
   moves the button into the title's h2) */
.stage-help { display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 12px; position: relative; top: -3px;
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line);
  background: transparent; color: var(--muted); padding: 0; cursor: pointer;
  font-family: "Lora", Georgia, serif; font-size: 10.5px; font-weight: 600; line-height: 1; }
.stage-help:hover, .stage-help.active { color: var(--text); border-color: var(--text); }
.stage-help[hidden] { display: none; }
/* the same disc on a column header (Patent Watch's First Detected): the ? is
   drawn here so the header's text stays the column's name; the explanation
   is the .th-desc strip above the table */
/* the disc is pinned to the header's right edge, clear of the resize handle,
   so the header's ellipsis can't swallow it; the text stops short of it */
th:has(> .th-help) { padding-right: 40px; }
.th-help { position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  margin: 0; width: 16px; height: 16px; font-size: 10px; }
.th-help::before { content: "?"; }
.stage-desc.th-desc { order: -1; margin: 0 0 12px; }   /* above the table in the card's column */
/* the same ? disc beside a key/value label (patent page), explanation in the row below */
.kv .kv-help { margin-left: 8px; top: -1px; }
.kv .kv-help-row > td { padding-top: 0; }
.kv .kv-help-row .stage-desc { margin: 0; }
.stage-desc { order: 2; margin: 14px 0 0; padding: 10px 14px;
  border-left: 3px solid var(--accent); background: rgba(182, 130, 53, .06);
  font-size: 12.5px; line-height: 1.55; color: rgba(32, 31, 29, .7); }
.stage-desc[hidden] { display: none; }

/* the staged chart: full width, value labels above each column */
/* the chart floats in the stage's free height — equal air above and below it,
   title at the top, footer strip at the foot */
.stage .viz-svg, .stage .nce-bars { display: block; width: 100%; height: auto;
  max-height: 560px; margin: auto 0; padding: 18px 0; flex-shrink: 0; }
/* bar charts label every column, so their y-axis and ticks are redundant */
.stage .prod-tl .viz-yaxis, .stage .prod-tl .viz-tick,
.stage .nce-bars .viz-yaxis,
.stage .flux .viz-yaxis, .stage .flux .viz-tick { display: none; }
/* axis + value type scale with --chart-scale (the A-/A+ control) */
.stage .viz-tick, .stage .viz-yr, .stage .nce-yr { font-family: "Lora", Georgia, serif;
  font-size: calc(13px * var(--chart-scale)); fill: rgba(32, 31, 29, .6);
  font-variant-numeric: tabular-nums; }
.stage .viz-val, .stage .nce-val, .stage .prod-val { font-family: "Lora", Georgia, serif;
  font-size: calc(13px * var(--chart-scale)); font-weight: 400; fill: rgba(32, 31, 29, .7);
  font-variant-numeric: tabular-nums; animation: none; }
.stage .viz-val.is-peak { font-weight: 600; fill: var(--text); }
.stage .viz-grid { display: none; }
.viz-axis, .stage .nce-axis, .stage .flux-zero { stroke: rgba(32, 31, 29, .45); stroke-width: 1; }
.stage .ptseg, .stage .nce-bar rect, .stage .flux-add, .stage .flux-del { rx: 0; }
.stage .pdot-mark { stroke: var(--bg); }
.viz-tip, .nce-tip { border-radius: 2px; font-family: "Lora", Georgia, serif; }

/* footer strip: legend left, links right */
.stage-foot { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 14px; }
.stage .stage-table + .stage-foot { margin-top: auto; padding-top: 14px; }
.sf-spacer { flex: 1; }
.stage .viz-legend { display: flex; gap: 16px; align-items: center; }
.stage .viz-legend .lg { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: rgba(32, 31, 29, .6); }
.stage .viz-legend .sw { width: 9px; height: 9px; border-radius: 0; display: inline-block; }
.stage .viz-more { display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 0; font-size: 13px; font-weight: 400; color: #7d5411; text-decoration: none; }
.stage .viz-more:hover { color: var(--text); text-decoration: none; }
.stage .viz-more .vm-arrow { display: inline-block;
  transition: transform .42s cubic-bezier(.22, .75, .3, 1); }
.stage .viz-more:hover .vm-arrow { transform: translateX(4px); }

/* staged tables (approvals, Part D): full width, scroll inside */
/* the table fills the stage's free height, ending just above the foot rule
   (approvals) or the bottom line (Part D); the rest scrolls inside it */
.stage .stage-table { margin-top: 18px; overflow: auto; flex: 1 1 0; min-height: 320px; }
.stage table { font-size: 13.5px; }
.stage thead th { position: sticky; top: 0; z-index: 1; background: var(--bg);
  font-family: "Lora", Georgia, serif; font-size: 10.5px; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); }
.stage thead th.num { text-align: right; }
.stage td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.stage tbody tr:hover td { background: rgba(182, 130, 53, .07); }
.stage tr[data-appl] { cursor: pointer; }
.stage .stage-table .meta-line { font-style: italic; }

/* ------------------------------------------------------------------ Scope */
/* title block is the site's plain h1 + .subtitle, like Legal Challenges and
   PIV; the two columns start under a hairline */
.scope { max-width: 1240px; margin: 0 auto; font-family: "Lora", Georgia, serif; color: var(--text); }
.scope > h1 { flex: none; }
.scope > .subtitle { flex: none; max-width: 78ch; }
.scope-body { display: grid; grid-template-columns: 340px 1fr; min-height: 640px;
  border-top: 1px solid var(--line); }
/* the page itself does not scroll: the masthead, the calendar panel and the
   record's head are frozen, and only the bundles scroll, inside their box */
body:has(.scope) { overflow: hidden; }
.scope { display: flex; flex-direction: column; height: calc(100vh - 51px); }
.scope-body { flex: 1; min-height: 0; }
.scope-left { position: relative; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  box-sizing: border-box; padding: 18px 28px 26px 0; }
.scope-left::after { content: ""; position: absolute; top: 18px; bottom: 0; right: 0; width: 1px;
  background: var(--line); }
/* calendar */
/* head: ‹ [Month ▾] [Year ▾] › — the two selects are the month heading */
.sc-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 8px; }
.sc-jump { display: flex; gap: 14px; align-items: baseline; }
/* a small gold caret to the right of each select says "this opens" */
.sc-selwrap { position: relative; display: inline-block; padding-right: 13px; }
.sc-selwrap::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-20%);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--accent); }
.sc-nav { background: transparent; border: 0; color: var(--muted); font-size: 22px; line-height: 1;
  padding: 2px 8px; cursor: pointer; border-radius: 4px; }
.sc-nav:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sc-sel { font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 500;
  color: var(--text); background: transparent; border: 0; border-bottom: 1px solid transparent;
  padding: 0 2px 1px; cursor: pointer; appearance: none; -webkit-appearance: none; text-align: center; }
.sc-sel:hover, .sc-sel:focus { border-bottom-color: var(--accent); outline: none; }
/* numerals on this page are the ledger's: Cormorant with lining, tabular
   figures (.lr-fig on the Daily), never Cormorant's default old-style ones */
/* the year: a button in the page's numerals, and a popover grid of years in
   the same face (a native select's list can't be given lining figures) */
.sc-year { font-feature-settings: "lnum" 1, "tnum" 1; line-height: 1.2; }
.sc-yearpop { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 20; width: 236px; max-height: 236px; overflow-y: auto; scrollbar-width: thin;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.sc-yearpop[hidden] { display: none; }
.sc-yearpop button { font-family: "Cormorant Garamond", Georgia, serif; font-size: 17px; font-weight: 500;
  font-feature-settings: "lnum" 1, "tnum" 1; color: var(--text); background: transparent; border: 0;
  border-radius: 4px; padding: 3px 4px; cursor: pointer; }
.sc-yearpop button:hover, .sc-yearpop button:focus { background: color-mix(in srgb, var(--text) 7%, transparent);
  outline: none; }
.sc-yearpop button.is-cur { background: color-mix(in srgb, var(--accent) 20%, transparent); color: #5a3b0a;
  font-weight: 600; }
.sc-dow, .sc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sc-dow span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  text-align: center; padding: 0 0 4px; }
.sc-day { position: relative; height: 44px; border: 0; border-radius: 4px; background: transparent;
  font: inherit; color: inherit; cursor: pointer; padding: 3px 4px 0; display: flex;
  flex-direction: column; align-items: flex-start; justify-content: space-between; }
.sc-day:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sc-day .sc-num { font-family: "Cormorant Garamond", Georgia, serif; font-size: 16px; font-weight: 600;
  font-feature-settings: "lnum" 1, "tnum" 1; line-height: 1; }
.sc-day.is-today .sc-num { color: #7d5411; font-weight: 600; }
.sc-day.is-future { color: color-mix(in srgb, var(--text) 55%, transparent); }
.sc-day.is-sel { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 0; }
.sc-day.is-sel-start { border-radius: 4px 0 0 4px; }
.sc-day.is-sel-end { border-radius: 0 4px 4px 0; }
.sc-day.is-sel-start.is-sel-end { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--accent); }
.sc-ticks { display: flex; gap: 2px; align-items: flex-end; height: 12px; width: 100%; }
.sc-tick { display: block; flex: 1; min-width: 2px; max-width: 6px; border-radius: 1px; opacity: .85; }
.sc-day.is-future .sc-tick { opacity: .45; }
/* filters: three labelled groups under the calendar — range (typed fields
   plus the quick-select row), categories, search. Kickers match the ledger's. */
.sc-filters { margin-top: 18px; border-top: 1px solid var(--line); }
.sf-group { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.sf-group:last-child { border-bottom: 0; }
.sf-kicker { margin: 0 0 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #7d5411; }
/* a group's heading row: the kicker at left, one quiet link at right */
.sf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.sf-head .sf-kicker { margin: 0; }
.sf-link { background: transparent; border: 0; padding: 0; font: inherit; font-size: 12px; color: var(--muted);
  cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.sf-link:hover { color: var(--text); }
.sf-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted); }
.sf-range input { width: 100%; min-width: 0; box-sizing: border-box; font: inherit; font-size: 12.5px;
  font-feature-settings: "tnum" 1; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--text); }
.sf-range input:focus { outline: none; border-color: var(--accent); }
/* quick select: one joined row that never wraps; the live preset is filled */
.sc-presets { display: flex; margin: 8px 0 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.sc-presets button { flex: 1; background: transparent; border: 0; border-left: 1px solid var(--line);
  padding: 5px 0; font: inherit; font-size: 11.5px; white-space: nowrap; color: var(--muted); cursor: pointer; }
.sc-presets button:first-child { border-left: 0; }
.sc-presets button:hover { color: var(--text); }
.sc-presets button.is-on { color: var(--text); font-weight: 600;
  background: color-mix(in srgb, var(--accent) 20%, transparent); }
/* category chips: an even two-column grid. The name is set in the text
   colour; the swatch carries the category's colour — filled when the
   category is on, hollow when it is off. */
.scope-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sc-chip { display: flex; align-items: center; gap: 8px; min-height: 34px; box-sizing: border-box;
  font: inherit; font-size: 12.5px; line-height: 1.25; text-align: left; text-wrap: balance; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.sc-chip:hover { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.sc-chip.is-on { color: var(--text); border-color: transparent;
  background: color-mix(in srgb, var(--text) 7%, transparent); }
.sc-chip.is-on:hover { border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.sc-sw { flex: none; width: 12px; height: 12px; box-sizing: border-box; border-radius: 3px;
  border: 2px solid color-mix(in srgb, var(--muted) 60%, transparent); }
.sc-chip.is-on .sc-sw { border-color: var(--mark, var(--hue)); background: var(--mark, var(--hue)); }
/* on the dark ground the swatch is lifted so slate and plum stay visible */
@supports (color: oklch(from red l c h)) {
  html[data-theme="dark"] .sc-chip { --mark: oklch(from var(--hue) calc(l + .14) calc(c + .02) h); }
}
.scope-search { margin: 0; }
.scope-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); }
/* hues: section-header dots take the hue as text color; ticks and
   density bars are empty boxes painted with it */
.sr-sec.hue-blue .sc-dot, .sc-tick.hue-blue, .sr-dens.hue-blue i { color: oklch(0.5 0.11 265); }
.sr-sec.hue-crimson .sc-dot, .sc-tick.hue-crimson, .sr-dens.hue-crimson i { color: oklch(0.5 0.14 25); }
.sr-sec.hue-green .sc-dot, .sc-tick.hue-green, .sr-dens.hue-green i { color: oklch(0.48 0.12 145); }
.sr-sec.hue-plum .sc-dot, .sc-tick.hue-plum, .sr-dens.hue-plum i { color: oklch(0.45 0.13 345); }
.sr-sec.hue-amber .sc-dot, .sc-tick.hue-amber, .sr-dens.hue-amber i { color: oklch(0.6 0.13 55); }
.sr-sec.hue-violet .sc-dot, .sc-tick.hue-violet, .sr-dens.hue-violet i { color: oklch(0.5 0.13 300); }
.sr-sec.hue-slate .sc-dot, .sc-tick.hue-slate, .sr-dens.hue-slate i { color: oklch(0.45 0.05 260); }
.sr-sec.hue-teal .sc-dot, .sc-tick.hue-teal, .sr-dens.hue-teal i { color: oklch(0.52 0.1 195); }
.sc-tick, .sr-dens i { background-color: currentColor; }
/* the same eight colours as a token, for fills (chips, result bundles) */
.hue-blue { --hue: oklch(0.5 0.11 265); }   .hue-crimson { --hue: oklch(0.5 0.14 25); }
.hue-green { --hue: oklch(0.48 0.12 145); } .hue-plum { --hue: oklch(0.45 0.13 345); }
.hue-amber { --hue: oklch(0.6 0.13 55); }   .hue-violet { --hue: oklch(0.5 0.13 300); }
.hue-slate { --hue: oklch(0.45 0.05 260); } .hue-teal { --hue: oklch(0.52 0.1 195); }
/* patent page, File History tab: the same density bars, read-only */
.fh-stats { margin: 4px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
  max-width: 640px; }
.fh-stats .sr-total { margin: 0 0 10px; }
.fh-stats .sr-dens { cursor: default; }
.fh-stats .sr-dens:hover { background: transparent; }
/* the record */
.scope-record { padding: 18px 36px 24px; min-width: 0; }
/* the record: a frozen head (range line, expand/collapse, density strip)
   over the one thing on the page that scrolls, the bundles */
.scope-record { display: flex; flex-direction: column; min-height: 0; }
.sr-head { flex: none; padding: 0 0 12px; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.sr-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sr-range { margin: 0 0 10px; font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px;
  font-weight: 500; font-feature-settings: "lnum" 1, "tnum" 1; }
.sr-total { margin: -6px 0 12px; font-size: 13px; color: var(--muted); font-feature-settings: "tnum" 1; }
.sr-total:empty { display: none; }
.sr-total b { font-weight: 600; color: var(--text); }
/* density: one line per category — name, bar, count — on a shared name column.
   Bars are scaled to the largest category; each line jumps to its bundle. */
.sr-density { display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 1px; margin: 0; }
/* the bar under the head's rule: the expand/collapse chevron at the right */
.sr-bar { flex: none; display: flex; justify-content: flex-end; padding: 0 6px 6px 0; }
.sr-toggle { background: transparent; border: 1px solid var(--line); border-radius: 6px; width: 28px;
  height: 24px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted);
  cursor: pointer; padding: 0; }
.sr-toggle:hover { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); }
.sr-toggle svg { transition: transform .18s ease; }
.sr-toggle.is-collapsed svg { transform: rotate(-90deg); }
.sr-toggle:disabled { opacity: .35; cursor: default; }
#sr-sections { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
.sr-dens { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center;
  font: inherit; font-size: 13px; color: var(--text); text-align: left; background: transparent; border: 0;
  border-radius: 4px; padding: 3px 8px; margin: 0 -8px; cursor: pointer; }
.sr-dens:hover { background: color-mix(in srgb, var(--hue, var(--accent)) 9%, transparent); }
.sr-dens:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sr-dens-track { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sr-dens i { flex: none; display: block; height: 8px; min-width: 3px; border-radius: 0 4px 4px 0; }
.sr-dens b { font-weight: 600; font-feature-settings: "tnum" 1; }
/* each bundle: the category title on the plain ground, and under it the rows
   lightly washed in the category's colour, with a colour bar at their left —
   the way Orange and Purple Book rows are told apart on a company profile */
.sr-sec { margin: 0 0 16px; }
.sr-body { background: color-mix(in srgb, var(--hue, var(--accent)) 7%, transparent);
  border-left: 3px solid var(--hue, var(--accent)); border-radius: 0 6px 6px 0;
  padding: 2px 14px 4px; }
.sr-sec summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 8px;
  padding: 0 0 6px 3px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--hue, #7d5411); }
.sr-sec:not([open]) summary { padding-bottom: 0; }
.sr-sec summary::-webkit-details-marker { display: none; }
.sr-sec summary .sc-dot { font-size: 9px; }
.sr-n { color: var(--muted); letter-spacing: 0; font-weight: 400; font-feature-settings: "tnum" 1; }
.sr-rows { display: flex; flex-direction: column; }
.sr-row { display: grid; grid-template-columns: 92px 1fr 160px; gap: 14px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 14px; line-height: 21px; }
.sr-row:last-child { border-bottom: 0; }
.sr-row.is-sched { color: color-mix(in srgb, var(--text) 70%, transparent); }
.sr-date { font-feature-settings: "tnum" 1; color: var(--muted); }
.sr-txt a { color: #7d5411; text-decoration: none; border-bottom: 1px solid var(--accent); }
.sr-txt small { display: block; font-size: 12px; color: var(--muted); }
.sr-co { font-size: 12px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-more { margin: 8px 0 4px; background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 14px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; }
.sr-empty { color: var(--muted); }
.sr-empty a { color: #7d5411; }
#sr-sections.is-loading { opacity: .5; }
html[data-theme="dark"] .sr-sec summary,
html[data-theme="dark"] .sr-txt a, html[data-theme="dark"] .sr-empty a { color: var(--gold-bright); }
html[data-theme="dark"] .sf-kicker { color: var(--gold-bright); }
html[data-theme="dark"] .sc-day.is-today .sc-num, html[data-theme="dark"] .sr-empty { color: var(--gold-bright); }

@media (max-width: 900px) {
  .daily-mast { padding: 14px 16px 12px; }
  /* phones: the headline keeps its rules, both sides pulled in tight */
  .daily-brief { padding: 0 16px; }
  .daily-brief .brief-head, .ledger-head { padding: 14px 0 0; gap: 12px; }
  .daily-brief .bh-txt { white-space: normal; }
  .daily-brief .brief-rows { padding: 10px 0 12px; }
  .daily-title { font-size: 26px; }
  .daily-date { font-size: 10px; }
  .daily-range { padding-right: 70px; }
  .daily-range .dash-master-tf { gap: 18px; justify-content: flex-start; padding-left: 16px; }
  .daily-body { grid-template-columns: 1fr; min-height: 0; }
  /* the rail becomes a horizontal scroller of figure chips above the stage */
  .ledger { border-bottom: 1px solid var(--line); padding: 14px 0 0; }
  .ledger::after { display: none; }
  .ledger-rows { flex-direction: row; overflow-x: auto; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch; }
  .ledger-row { flex: 0 0 auto; width: auto; min-width: 150px; padding: 10px 16px 12px;
    border-left: 0; border-top: 0; border-bottom: 3px solid transparent; }
  .ledger-row:last-child { border-bottom: 3px solid transparent; }
  .ledger-row.is-active { border-bottom-color: var(--accent); }
  .lr-fig { font-size: 30px; }
  .lr-lbl { font-size: 11px; white-space: nowrap; }
  .ledger-note { display: none; }
  .stage { padding: 18px 16px 24px; }
  /* no ledger column to fill against on phones: cap to the viewport instead */
  .stage .stage-table { flex: 0 1 auto; min-height: 0;
    max-height: max(480px, calc(100vh - 360px)); }
  .stage-help { margin-left: 10px; top: -2px; }
  .stage-title { font-size: 24px; }
  .stage-foot .viz-more { font-size: 12.5px; }
  /* swipe the stage sideways to move through the figures (dashboard.html):
     the new figure slides in from the side it came from, dots mark the place,
     and a swipe past either end gets a small nudge. pan-y leaves vertical
     scrolling to the browser and hands horizontal moves to the script. */
  .stage { touch-action: pan-y; overflow-x: clip; }
  .stage[data-slide="next"] > [data-card].is-staged { animation: stage-in-next .3s cubic-bezier(.22, .75, .3, 1) both; }
  .stage[data-slide="prev"] > [data-card].is-staged { animation: stage-in-prev .3s cubic-bezier(.22, .75, .3, 1) both; }
  .stage.stage-bump-next > [data-card].is-staged { animation: stage-bump-next .28s ease both; }
  .stage.stage-bump-prev > [data-card].is-staged { animation: stage-bump-prev .28s ease both; }
  .stage-dots:not([hidden]) { display: flex; justify-content: center; gap: 4px; padding: 14px 0 0; }
  .stage-dot { width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .stage-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(32, 31, 29, .25); transition: background .2s ease, transform .2s ease; }
  .stage-dot.is-on::before { background: var(--accent); transform: scale(1.35); }
  html[data-theme="dark"] .stage-dot::before { background: rgba(243, 242, 242, .28); }
  html[data-theme="dark"] .stage-dot.is-on::before { background: var(--gold-bright); }
  /* phones scroll the whole page as usual */
  body:has(.scope) { overflow: auto; }
  .scope { display: block; height: auto; }
  .scope-body { grid-template-columns: 1fr; }
  .scope-left { overflow: visible; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
  .scope-record { display: block; }
  #sr-sections { overflow: visible; padding-right: 0; }
  .scope-left::after { display: none; }
  .scope-record { padding: 16px; }
  .sr-row { grid-template-columns: 84px 1fr; }
  .sr-co { display: none; }
}
@media (max-width: 720px) {
  .stage table.cards tr { border: 0; border-bottom: 1px solid var(--line);
    border-radius: 0; background: transparent; margin: 0; padding: 10px 0; }
  .stage table.cards td::before { color: var(--muted); font-weight: 400;
    letter-spacing: .1em; font-family: "Lora", Georgia, serif; }
}
@media (prefers-reduced-motion: reduce) {
  .daily-brief.is-pending .brief-quiet p { animation: none; }
  .stage .viz-more .vm-arrow, .ledger-row, .lr-lbl { transition: none; }
  .stage > [data-card].is-staged,
  .stage[data-slide] > [data-card].is-staged,
  .stage[class*="stage-bump"] > [data-card].is-staged { animation: none; }
  .stage-dot::before { transition: none; }
}
.stage-dots { display: none; }
@keyframes stage-in-next { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes stage-in-prev { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes stage-bump-next { 50% { transform: translateX(-14px); } }
@keyframes stage-bump-prev { 50% { transform: translateX(14px); } }

/* drill-down drawer (click a column / point): wider, and the record list runs
   the full height of the drawer instead of scrolling inside a 340px window */
#cdrawer { width: min(760px, 100vw); }
#cdrawer .drawer-body { padding: 16px 22px 30px; }
#cdrawer .cd-scroll { max-height: none; overflow: visible; border: 0; border-radius: 0; }
#cdrawer .cd-table th { background: var(--bg); font-family: "Lora", Georgia, serif;
  font-weight: 400; letter-spacing: .1em; color: var(--muted); }
#cdrawer .cd-table td { border-bottom: 1px solid var(--line); }
#cdrawer .cd-summary { font-size: 13px; margin-bottom: 12px; }
/* once a column has been dragged (dashboard.html cdResizable) the table is
   fixed-layout: long names wrap inside their column instead of spilling */
#cdrawer .cd-table.cd-sized td, #cdrawer .cd-table.cd-sized th { overflow-wrap: anywhere; }
#cdrawer .cd-table.cd-sized th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* dates, patent and docket numbers in the drawer's own Lora, not style.css's
   Consolas .mono — same rule as the drug profile */
#cdrawer .mono, #cdrawer .patent-link, #cdrawer .cd-table td.num {
  font-family: "Lora", Georgia, serif; font-size: inherit;
  font-variant-numeric: tabular-nums; }

/* ---- the Daily at night ---- */
html[data-theme="dark"] .daily-mast { border-bottom-color: rgba(243, 242, 242, .7); }
html[data-theme="dark"] .daily-date,
html[data-theme="dark"] .dash-saved,
html[data-theme="dark"] .stage .viz-more { color: var(--gold-bright); }
html[data-theme="dark"] .stage .viz-more:hover { color: var(--text); }
html[data-theme="dark"] .daily-range .dmtf-lbl,
html[data-theme="dark"] .daily-range .dmtf-btn { color: rgba(243, 242, 242, .6); }
html[data-theme="dark"] .daily-range .dmtf-btn:hover,
html[data-theme="dark"] .daily-range .dmtf-btn.active { color: var(--gold-bright); }
html[data-theme="dark"] .dtf .dtf-lbl,
html[data-theme="dark"] .dtf .dtf-btn { color: rgba(243, 242, 242, .6); }
html[data-theme="dark"] .dtf .dtf-btn:hover,
html[data-theme="dark"] .dtf .dtf-btn.active { color: var(--gold-bright); }
html[data-theme="dark"] .ledger-row.is-active { background: rgba(182, 130, 53, .12); }
html[data-theme="dark"] .ledger-row:hover { background: rgba(182, 130, 53, .08); }
html[data-theme="dark"] .lr-lbl { color: rgba(243, 242, 242, .6); }
html[data-theme="dark"] .ledger-row.is-active .lr-lbl { color: var(--gold-bright); }
html[data-theme="dark"] .ledger-row[data-hue="nce"] .lr-fig { color: #8fa5dc; }
html[data-theme="dark"] .ledger-row[data-hue="piv"] .lr-fig { color: #5fb3c6; }
html[data-theme="dark"] .ledger-row[data-hue="ptab"] .lr-fig,
html[data-theme="dark"] .ledger-row[data-hue="flux"] .lrf-b { color: #e8968b; }
html[data-theme="dark"] .ledger-row[data-hue="flux"] .lrf-a { color: #8cc491; }
html[data-theme="dark"] .ledger-row[data-hue="lit"] .lr-fig { color: #d68bb0; }
html[data-theme="dark"] .ledger-row[data-hue="flux"] .lrf-sep { color: rgba(243, 242, 242, .4); }
html[data-theme="dark"] .ledger-note, html[data-theme="dark"] .stage-sub,
html[data-theme="dark"] .stage .viz-legend .lg { color: rgba(243, 242, 242, .6); }
html[data-theme="dark"] .stage-desc { color: rgba(243, 242, 242, .7); }
html[data-theme="dark"] .stage .viz-tick, html[data-theme="dark"] .stage .viz-yr,
html[data-theme="dark"] .stage .nce-yr { fill: rgba(243, 242, 242, .55); }
html[data-theme="dark"] .stage .viz-val, html[data-theme="dark"] .stage .nce-val,
html[data-theme="dark"] .stage .prod-val { fill: rgba(243, 242, 242, .65); }
html[data-theme="dark"] .stage .viz-val.is-peak { fill: var(--text); }
html[data-theme="dark"] .viz-axis, html[data-theme="dark"] .stage .nce-axis,
html[data-theme="dark"] .stage .flux-zero { stroke: rgba(243, 242, 242, .45); }
html[data-theme="dark"] .stage tbody tr:hover td { background: rgba(182, 130, 53, .12); }
html[data-theme="dark"] .daily .dash-gear-menu { background: #262422; }
html[data-theme="dark"] .dai-switch { background: rgba(243, 242, 242, .22); }
html[data-theme="dark"] .dash-add-item.on .dai-switch { background: var(--gold-bright); }
html[data-theme="dark"] .tsz-btn { color: var(--muted); }
html[data-theme="dark"] .tsz-btn:hover { color: var(--text); }
html[data-theme="dark"] .stage-help { color: var(--muted); }
html[data-theme="dark"] .stage-help:hover,
html[data-theme="dark"] .stage-help.active { color: var(--text); border-color: var(--text); }

/* ---- drug-profile timeline v2 at night ---- */
html[data-theme="dark"] .tlv-card {
  --tlv-purple-dk: #c4a9e8; --tlv-blue-dk: #a9b9e6; --tlv-green-dk: #8cc491;
  --tlv-red-dk: #e8968b; --tlv-gold-dk: var(--gold-bright); --tlv-gold-7: var(--gold-bright);
  --tlv-muted: rgba(243, 242, 242, .55); --tlv-dim: rgba(243, 242, 242, .6);
  --tlv-track: rgba(243, 242, 242, .22); --tlv-track-past: rgba(243, 242, 242, .5);
}
html[data-theme="dark"] .tlv-chip { border-color: rgba(243, 242, 242, .3); }
html[data-theme="dark"] .tsz-pop { background: #262422; border-color: rgba(243, 242, 242, .16);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .tlv-hit { background: rgba(182, 130, 53, .16); }

/* ---- the first-login walkthrough (tour.js) ---- */
.tour-block { position: fixed; inset: 0; z-index: 901; background: transparent; cursor: default; }
/* Dark mode: the dimmed page is already dark, so the spotlight gets a soft gold
   glow to stand out — no hard edge (not on centred steps, which have no target). */
html[data-theme="dark"] .tour-spot:not(.is-center) {
  box-shadow: 0 0 24px 6px rgba(225, 173, 102, .3), 0 0 0 4000px rgba(10, 9, 8, .62); }
.tour-card.tour-nudge { animation: tour-nudge .32s ease; }
@keyframes tour-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }
@media (prefers-reduced-motion: reduce) { .tour-card.tour-nudge { animation: none; } }
.tour-spot { position: fixed; z-index: 900; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 4000px rgba(32, 31, 29, .56);
  transition: left .32s cubic-bezier(.22,.75,.3,1), top .32s cubic-bezier(.22,.75,.3,1),
    width .32s cubic-bezier(.22,.75,.3,1), height .32s cubic-bezier(.22,.75,.3,1); }
.tour-card { position: fixed; z-index: 902; width: 350px; box-sizing: border-box;
  background: #fff; color: #201f1d; border: 1px solid rgba(32, 31, 29, .14); border-radius: 6px;
  padding: 22px 22px 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); outline: none;
  font-family: "Lora", Georgia, serif; overflow: hidden;
  transition: left .32s cubic-bezier(.22,.75,.3,1), top .32s cubic-bezier(.22,.75,.3,1); }
.tour-card::before { content: ""; position: absolute; width: 14px; height: 14px; background: #fff;
  border-left: 1px solid rgba(32, 31, 29, .14); border-top: 1px solid rgba(32, 31, 29, .14);
  transform: rotate(45deg); display: none; }
.tour-card[data-place="bottom"]::before { display: block; top: -8px; left: var(--ax, 40px); }
.tour-card[data-place="top"]::before { display: block; bottom: -8px; left: var(--ax, 40px); transform: rotate(225deg); }
.tour-card[data-place="left"]::before { display: block; right: -8px; top: var(--ay, 30px); transform: rotate(135deg); }
.tour-card[data-place="right"]::before { display: block; left: -8px; top: var(--ay, 30px); transform: rotate(-45deg); }
.tour-title { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 25px;
  line-height: 1.15; margin: 0 0 8px; color: inherit; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.tour-title .rx-x { font-size: .7em; vertical-align: -.1em; }
.tour-dot, .tour-title .dd-dot { color: #b8892f; }
.tour-ico { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  color: #b8892f; background: rgba(184, 137, 47, .1); }
.tour-ico svg { width: 22px; height: 22px; }
.tour-body p { margin: 0; font-size: 14.5px; line-height: 1.55; color: inherit; }
.tour-body p + p { margin-top: 8px; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.tour-btns { display: flex; gap: 8px; }
.tour-card button { font: inherit; font-size: 13.5px; border-radius: 4px; cursor: pointer; }
.tour-skip { background: none; border: 0; color: rgba(32, 31, 29, .45); padding: 6px 0; }
.tour-skip:hover, .tour-skip:focus-visible { color: #201f1d; text-decoration: underline; outline: none; }
.tour-back { background: none; border: 1px solid rgba(32, 31, 29, .18); color: #201f1d; padding: 7px 14px; }
.tour-back:disabled { opacity: .35; cursor: default; }
.tour-next { background: #201f1d; color: #fbfaf7; border: 1px solid #201f1d; padding: 7px 16px; }
.tour-next:hover, .tour-next:focus-visible { background: #b8892f; border-color: #b8892f; outline: none; }
/* how far along: a gold bar across the top of the card */
.tour-progress { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: rgba(32, 31, 29, .1); }
.tour-progress i { display: block; height: 100%; background: #b8892f; transition: width .32s ease; }
html[data-theme="dark"] .tour-card, html[data-theme="dark"] .tour-card::before { background: #24221f; color: #f1efea; border-color: rgba(241, 239, 234, .16); }
html[data-theme="dark"] .tour-back { color: #f1efea; border-color: rgba(241, 239, 234, .25); }
html[data-theme="dark"] .tour-skip { color: rgba(241, 239, 234, .5); }
html[data-theme="dark"] .tour-skip:hover { color: #f1efea; }
html[data-theme="dark"] .tour-next { background: #f1efea; color: #191817; border-color: #f1efea; }
html[data-theme="dark"] .tour-progress { background: rgba(241, 239, 234, .14); }
@media (max-width: 720px) { .tour-card { padding: 16px 18px 14px; } .tour-title { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card, .tour-progress i { transition: none; } }

/* ---- patent page: Assignments tab (chain of title, flags, entries) ---- */
.asg { --asg-denim: #3d5a80; --asg-gold-ink: #8a5f1f; display: grid; gap: 14px; }
html[data-theme="dark"] .asg { --asg-denim: #9fb6d6; --asg-gold-ink: #e8bd80; }
.asg .asg-intro, .asg .asg-foot { margin: 0; }
.asg .asg-foot { font-size: 12.5px; }
.asg-chain-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 16px; font-size: 13.5px; }
.asg-chain-head strong { color: var(--navy); }
.asg-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  font-weight: 600; font-family: Inter, system-ui, sans-serif; }
.asg .asg-app-note { margin: 0; font-size: 12.5px; }
/* The ledger: date column, a spine of dots, one event per row, oldest first.
   Solid dot = transfer, hollow = name change, gold = owner of record; a
   missing link makes the spine above its row dashed gold. */
.asg-ledger { display: grid; grid-template-columns: 84px 22px minmax(0, 1fr); column-gap: 12px;
  font-variant-numeric: tabular-nums; }
.asg-ledger .asg-row { display: contents; }
.asg-when { text-align: right; padding-top: 1px; }
.asg-when b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--navy); }
.asg-when span { display: block; font-size: 12px; color: var(--muted); }
.asg-spine { position: relative; }
.asg-spine::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--text) 26%, transparent); }
.asg-row:first-child .asg-spine::before { top: 10px; }
.asg-row:last-child .asg-spine::before { bottom: auto; height: 10px; }
.asg-row.is-gap .asg-spine::before { background: repeating-linear-gradient(to bottom, var(--accent) 0 4px, transparent 4px 8px); }
.asg-node { position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--asg-denim); border: 2px solid var(--card); box-shadow: 0 0 0 2px var(--asg-denim); }
.asg-node.is-name { background: var(--card); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 30%, transparent); }
.asg-node.is-owner { background: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.asg-node.is-name.is-owner { background: var(--card); }
.asg-node.is-gap { background: var(--card); box-shadow: 0 0 0 2px var(--accent); }
.asg-ev { padding-bottom: 18px; display: grid; gap: 3px; min-width: 0; }
.asg-row:last-child .asg-ev { padding-bottom: 4px; }
.asg-who { font-size: 14px; color: var(--navy); overflow-wrap: anywhere; }
.asg-who b { font-weight: 600; }
.asg-arr { color: var(--muted); padding: 0 6px; }
.asg-meta { font-size: 12.5px; color: var(--muted); }
.asg-meta .asg-kind { margin-right: 4px; vertical-align: 1px; }
.asg-gap { font-size: 12.5px; color: var(--asg-gold-ink); }
.asg-gap b { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; margin-right: 4px; vertical-align: -3px; }
.asg-fold { margin-top: 3px; font-size: 12.5px; color: var(--navy-2); max-width: 64ch; line-height: 1.45;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 8px; padding: 8px 10px; }
.asg-fold b { font-weight: 600; color: var(--asg-gold-ink); }
.asg-owner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; border-radius: 10px;
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 11%, transparent); padding: 9px 14px; }
.asg-owner .asg-eyebrow { color: var(--asg-gold-ink); }
.asg-owner b { font-weight: 600; color: var(--navy); }
.asg-owner span { font-size: 13px; color: var(--muted); }
@media (max-width: 560px) { .asg-ledger { grid-template-columns: 58px 22px minmax(0, 1fr); column-gap: 8px; } }
/* The flags fold under one summary line; open it to see each one. */
.asg-flags-box { border-radius: 9px; }
.asg-flags-box > summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px;
  border-radius: 9px; font-size: 13px; }
.asg-flags-box > summary::-webkit-details-marker { display: none; }
.asg-flags-box > summary b { color: var(--navy); font-weight: 600; margin-right: 6px; }
.asg-flags-box > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.asg-flags-warn > summary { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.asg-flags-warn > summary .asg-flag-ico { background: var(--accent); }
.asg-flags-info > summary { background: color-mix(in srgb, var(--asg-denim) 11%, transparent); }
.asg-flags-info > summary .asg-flag-ico { background: var(--asg-denim); }
.asg-flags-ok > summary { background: color-mix(in srgb, var(--ok) 11%, transparent); }
.asg-flags-ok > summary .asg-flag-ico { background: var(--ok); }
.asg-caret { color: var(--muted); transition: transform .15s; }
.asg-flags-box[open] .asg-caret { transform: rotate(180deg); }
.asg-flags { display: grid; gap: 8px; margin-top: 8px; }
.asg-flag { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start;
  padding: 9px 12px; border-radius: 9px; font-size: 13px; }
.asg-flag b { color: var(--navy); font-weight: 600; }
.asg-flag-ico { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 Inter, system-ui, sans-serif; color: #fff; margin-top: 1px; }
.asg-flag-warn { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.asg-flag-warn .asg-flag-ico { background: var(--accent); }
.asg-flag-info { background: color-mix(in srgb, var(--asg-denim) 11%, transparent); }
.asg-flag-info .asg-flag-ico { background: var(--asg-denim); }
.asg-flag-ok { background: color-mix(in srgb, var(--ok) 11%, transparent); }
.asg-flag-ok .asg-flag-ico { background: var(--ok); }
html[data-theme="dark"] .asg-flag-ico { color: #171614; }
.asg-jump { background: none; border: 0; padding: 0; font: inherit; color: var(--asg-denim);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.asg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.asg-pill { font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--text); }
.asg-pill span { color: var(--muted); margin-left: 2px; }
.asg-pill.is-on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--navy); font-weight: 600; }
.asg-pill:focus-visible, .asg-x:focus-visible, .asg-jump:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.asg-table td { vertical-align: top; }
.asg-x-col { width: 30px; }
.asg-x { background: none; border: 0; padding: 2px; color: var(--muted); cursor: pointer; border-radius: 4px; }
.asg-x svg { transition: transform .15s; }
.asg-row.is-open .asg-x svg { transform: rotate(90deg); }
.asg-row.is-flash td { background: color-mix(in srgb, var(--accent) 14%, transparent); transition: background .6s; }
.asg-kind { display: inline-block; font: 600 10.5px/1.6 Inter, system-ui, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; padding: 1px 8px; border-radius: 6px; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--muted); }
.asg-kind-ownership, .asg-kind-name { background: color-mix(in srgb, var(--asg-denim) 12%, transparent); color: var(--asg-denim); }
.asg-kind-security { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--asg-gold-ink); }
.asg-kind-release { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.asg-conv { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.asg-party { color: var(--navy); }
.asg-party + .asg-party { margin-top: 4px; }
.asg-party small { display: block; color: var(--muted); font-size: 12px; }
.asg-detail td { background: color-mix(in srgb, var(--text) 3%, transparent); }
.asg-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 26px;
  margin: 0; padding: 6px 6px 8px 30px; font-size: 13px; }
.asg-dl dt { font: 600 10.5px/1.5 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); }
.asg-dl dd { margin: 0; }
@media (max-width: 560px) {
  .asg-dl { padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) { .asg-x svg, .asg-row.is-flash td, .asg-caret { transition: none; } }
/* One scroll only: the Assignments tab keeps the card's usual height and
   scrolls inside it; the entries table has no scroll box of its own. On wide
   screens the table doesn't clip sideways either, so its header row sticks
   to the top of the tab while the entries scroll under it. */
.tabcard .tabpanel[data-panel="p-asg"] .table-scroll { max-height: none; overflow-y: visible; }
@media (min-width: 900px) {
  .tabcard .tabpanel[data-panel="p-asg"] .table-scroll { overflow: visible; }
}

/* ---- SEC filings: the card's table, its filters, and the filing viewer -- */
.sec-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 10px; }
.sec-search { flex: 1 1 220px; min-width: 160px; font: inherit; font-size: 13px; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.sec-shown { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; }
.sec-tablewrap { overflow-x: auto; border-top: 1px solid var(--line); }
.sec-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
.sec-table th, .sec-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sec-table th { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; user-select: none; }
.sec-table th .lbl { cursor: pointer; }
.sec-table th .lbl:hover { color: var(--text); }
.sec-table th .dir { display: inline-block; width: 1em; color: var(--accent); }
.sec-table th.num, .sec-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sec-table td.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; white-space: nowrap; }
.sec-fbtn { width: 18px; height: 18px; margin-left: 2px; vertical-align: -4px; border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--muted); opacity: .55; }
.sec-fbtn::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 5h18l-7 8v6l-4 2v-8z'/></svg>") center/14px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'><path d='M3 5h18l-7 8v6l-4 2v-8z'/></svg>") center/14px no-repeat; }
.sec-fbtn:hover, .sec-table th.filtered .sec-fbtn { opacity: 1; }
.sec-table th.filtered .sec-fbtn { color: var(--accent); }
.sec-table th.filtered .sec-fbtn::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18l-7 8v6l-4 2v-8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18l-7 8v6l-4 2v-8z'/></svg>"); }
tr.sec-filing { cursor: pointer; }
tr.sec-filing:hover, tr.sec-filing.open { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
tr.sec-filing td.tog { width: 28px; color: var(--muted); padding-right: 0; }
tr.sec-filing td.tog svg { transition: transform .18s; }
tr.sec-filing.open td.tog svg { transform: rotate(90deg); }
tr.sec-filing td.reg .name { font-weight: 500; }
tr.sec-filing td.reg .tick { color: var(--muted); font-size: 12px; margin-left: 6px; }
tr.sec-filing .sec-maker { padding: 1px 6px; margin-left: 6px; }
.sec-form { display: inline-block; font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); }
.sec-form.k { background: rgba(182, 130, 53, .14); border-color: transparent; }
.sec-rel { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sec-rel .bar { width: 54px; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.sec-rel .bar i { display: block; height: 100%; background: var(--accent); }
tr.sec-filing td.src { white-space: nowrap; }
tr.sec-filing td.src a { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; text-decoration: none; font-size: 12.5px; }
tr.sec-filing td.src a:hover { color: var(--accent); }
tr.sec-filing td.src a svg { width: 16px; height: 16px; }
tr.sec-filing td.src a.filing { color: var(--text); }
tr.sec-detail td { padding: 0 10px 14px 38px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.sec-hint { margin: 0 0 8px; }
.sec-ex-list { display: grid; gap: 8px; }
.sec-ex { display: block; color: var(--text); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: 9px 12px; font-size: 14px; line-height: 23px; text-decoration: none; cursor: pointer; }
.sec-ex:hover, .sec-ex:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(182, 130, 53, .18); text-decoration: none; }
.sec-ex.is-current { border-color: var(--accent); background: rgba(182, 130, 53, .10); box-shadow: 0 0 0 2px rgba(182, 130, 53, .30); }
.sec-ex.is-current .go { font-weight: 600; }
.sec-ex .n { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; margin-right: 6px; }
.sec-ex .h { color: var(--muted); font-size: 12.5px; }
.sec-ex strong { font-weight: 600; }
.sec-ex .go { color: var(--accent); font-size: 12.5px; margin-left: 8px; white-space: nowrap; }
.sec-also { margin: -2px 0 2px 15px; }
.sec-card { position: relative; }
.sec-pop { position: absolute; z-index: 15; min-width: 220px; max-width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: 10px 12px; font-size: 13px; color: var(--text); }
.sec-pop h4 { margin: 0 0 8px; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sec-pop .opts { display: grid; gap: 4px; max-height: 220px; overflow: auto; }
.sec-pop label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.sec-pop label .c { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12px; }
.sec-pop .row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.sec-pop .row label { flex: 1; display: block; }
.sec-pop input[type=date], .sec-pop input[type=number] { font: inherit; font-size: 13px; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 7px; width: 100%; }
.sec-pop input[type=range] { width: 100%; accent-color: var(--accent); margin-top: 6px; }
.sec-pop .foot { display: flex; gap: 8px; justify-content: space-between; margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.sec-pop .quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sec-pop .quick button { font: inherit; font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 2px 9px; cursor: pointer; }
.sec-pop .quick button:hover { color: var(--text); }
.sec-pop .sort { display: flex; gap: 6px; margin-bottom: 8px; }
.sec-pop .sort button { flex: 1; font: inherit; font-size: 12.5px; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; cursor: pointer; }
.sec-pop .sort button.on { background: rgba(182, 130, 53, .14); border-color: transparent; }
/* Phones: the eight-column table becomes stacked rows. The header turns into
   a strip of sort/filter chips (same buttons, same script); each filing is
   two short lines; its excerpts wrap to the screen instead of the table. */
@media (max-width: 720px) {
  .sec-tablewrap { overflow-x: visible; }
  .sec-table { display: block; min-width: 0; }
  .sec-table thead, .sec-table tbody { display: block; }
  .sec-table thead tr { display: flex; flex-wrap: wrap; gap: 5px; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .sec-table thead th { border: 1px solid var(--line); border-radius: 999px; padding: 3px 4px 3px 9px; font-size: 10.5px; letter-spacing: .02em; }
  .sec-table thead th .dir:empty { display: none; }
  .sec-table thead th:first-child, .sec-table thead th:last-child { display: none; }   /* the toggle and Source columns have no sort */
  .sec-table thead th.num { text-align: left; }
  .sec-fbtn { width: 20px; height: 20px; margin-left: 0; vertical-align: -6px; }
  tr.sec-filing { display: grid; grid-template-columns: 22px auto auto 1fr; gap: 4px 10px; align-items: center;
                  padding: 11px 2px; border-bottom: 1px solid var(--line); }
  tr.sec-filing[hidden], tr.sec-detail[hidden] { display: none; }
  tr.sec-filing td { border: 0; padding: 0; }
  tr.sec-filing td.tog { grid-area: 1 / 1; width: auto; }
  tr.sec-filing td.reg { grid-area: 1 / 2 / auto / -1; }
  tr.sec-filing td:nth-child(3) { grid-area: 2 / 2; }
  tr.sec-filing td:nth-child(4) { grid-area: 2 / 3; }
  tr.sec-filing td:nth-child(7) { grid-area: 2 / 4; justify-self: end; }
  tr.sec-filing td:nth-child(5), tr.sec-filing td:nth-child(6) { text-align: left; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
  tr.sec-filing td:nth-child(5) { grid-area: 3 / 2; }
  tr.sec-filing td:nth-child(6) { grid-area: 3 / 3; }
  tr.sec-filing td:nth-child(5)::before { content: "Mentions "; }
  tr.sec-filing td:nth-child(6)::before { content: "Excerpts "; }
  tr.sec-filing td.src { grid-area: 3 / 4; justify-self: end; }
  tr.sec-filing td.src a { margin: 0 0 0 12px; padding: 4px 0; }
  tr.sec-detail { display: block; }
  tr.sec-detail td { display: block; padding: 10px 0 14px; border-bottom: 1px solid var(--line); }
  .sec-ex { padding: 11px 12px; }
  .sec-ex .go { display: block; margin: 6px 0 0; }
  .sec-also { margin-left: 4px; }
  .sec-pop { max-width: calc(100% - 16px); }
}
.sec-viewer { display: flex; flex-direction: column; gap: 10px; }
.sec-viewer-bar { margin: 0; }
.sec-frame { width: 100%; height: calc(100vh - 230px); min-height: 480px; border: 1px solid var(--line);
  border-radius: 7px; background: #fff; }
html[data-theme="dark"] .sec-frame { background: #f3f2f2; }