/* anewera dashboard. Light, clean and professional, the same look as the dashboard shown on
   anewera.ch (apps/site/src/components/product/ProductOverview.astro): white panels on white, a
   cool grey sidebar, hairlines instead of fills, near-black ink, one typeface (Instrument Sans)
   and one accent, deep teal, the site's own (apps/site/src/styles/tokens.css). Status colours
   (amber, red) only for states, always with a word.

   One system: an 8 px spacing grid (4 px for the finest steps), one type scale with tabular
   numerals, one radius per kind of surface, one border and three shadows. Light only since
   7 October 2026, like the website: one look whatever the system setting. Every text colour at
   least WCAG AA against the surfaces it sits on.

   THE ACCENT IS ONE TOKEN. Everything that uses it (text, washes, the heat map, chart lines)
   derives from --accent. To compare another: ?accent=green or ?accent=orange on any URL, or
   AIV_ACCENT=orange when starting the dashboard. */

:root {
  --accent: var(--teal);

  --teal: #23595A;       /* the site's --accent-on-paper */
  --green: #0F7B5F;      /* the old accent, on request only */
  --orange: #E8590C;

  --paper: #FFFFFF;      /* the page */
  --surface: #FFFFFF;    /* panels, tables, menus: apart from the page by a hairline */
  --side: #F9FAFB;       /* the sidebar */
  --sunken: #F5F6F8;     /* wells, segmented controls */
  --hover: #F1F2F4;      /* hover and the current page in the sidebar */
  --ink: #0F1114;
  --ink-2: #444A53;      /* secondary text */
  --muted: #69707A;      /* tertiary text: 5:1 on white, 4.7:1 on the wells */
  --line: #EDEEF1;       /* hairlines */
  --line-2: #E3E5E9;     /* control borders */
  --rival: #BCC2CA;      /* competitors in the bars: one quiet grey */
  --hold: #9A5B00; --hold-soft: #FBF1DF;
  --stop: #B3261E; --stop-soft: #FBE8E5;

  /* Derived from the accent: text that must read as a link, soft washes, and text on the accent. */
  --accent-ink: var(--accent);
  --accent-soft: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent);
  --on-accent: #FFFFFF;

  /* Chart series: the brand (or all engines) in the accent, then four hues checked for colour
     blindness (dataviz validator: all checks pass). Engines: ChatGPT 2, Gemini 3, AI Overview 4,
     Claude 5. Series 5 is light on white (2.3:1), so every chart using it also has a legend,
     labels and a table. */
  --series-own: var(--accent); --series-2: #2A78D6; --series-3: #E2589A; --series-4: #4A3AA7; --series-5: #D4A20A;
  /* How answers name a brand: ink and greys from strong to faint, a caution in amber. The accent
     stays out of the stance scale, as on the website: it belongs to the brand. */
  --stance-recommended: var(--ink);
  --stance-listed: color-mix(in srgb, var(--ink) 50%, var(--surface));
  --stance-source: color-mix(in srgb, var(--ink) 24%, var(--surface));
  --stance-cautioned: var(--hold);
  --stance-unclassified: var(--sunken);

  /* Type: one family, one scale. */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-xs: 12px;     /* captions, badges, axis notes */
  --fs-sm: 13px;     /* secondary lines, labels */
  --fs-base: 14px;   /* interface text, tables */
  --fs-body: 15px;   /* running text */
  --fs-md: 16px;
  --fs-lg: 18px;     /* section titles */
  --fs-xl: 22px;     /* page titles */
  --fs-2xl: 28px;
  --fs-3xl: 40px;
  --fs-4xl: 52px;

  /* Space: an 8 px grid; 4 px only for the finest steps. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 48px; --sp-9: 64px;

  /* Shape: panels, cards, charts, tables and notices share one radius; controls another. */
  --r-panel: 10px;
  --r-menu: 10px;
  --r-control: 8px;
  --r-chip: 6px;
  --r-pill: 999px;
  /* Shadows in the ink's own cool tone, soft and layered as on the website. */
  --shadow-1: 0 1px 2px rgb(15 17 20 / .04);
  --shadow-2: 0 1px 2px rgb(15 17 20 / .04), 0 8px 20px -8px rgb(15 17 20 / .12);
  --shadow-3: 0 1px 2px rgb(15 17 20 / .04), 0 12px 32px -8px rgb(15 17 20 / .14), 0 32px 64px -24px rgb(15 17 20 / .18);

  --gutter: 16px;
  --topbar-h: 56px;
  --content-max: 1200px;
  color-scheme: light;
}
:root[data-accent="orange"] { --accent: var(--orange); }
:root[data-accent="green"] { --accent: var(--green); }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.55 var(--font); font-variant-numeric: tabular-nums; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
code, .mono { font-family: var(--mono); font-size: 0.84em; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.nowrap { white-space: nowrap; }
.label { font-size: var(--fs-sm); color: var(--muted); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-xl); line-height: 1.25; letter-spacing: -0.015em; }
h2 { font-size: var(--fs-lg); line-height: 1.3; }
h3 { font-size: var(--fs-body); line-height: 1.35; }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -64px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: var(--r-control); z-index: 80; }
.skip:focus { top: 8px; }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ---------- the shell: sidebar, then the content with its sticky page header ---------- */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 1023px) { .shell { flex-direction: column; } }

/* ==========================================================================================
   anewera sidebar: START
   Self-contained, so another site can copy it: this block, src/components/Sidebar.astro (markup)
   and public/sidebar.js (collapse, drawer, menus). It reads the shared tokens when they exist and
   falls back to the light theme otherwise. Also needs the .wordmark block below.
   - 1024 px and wider: a sticky full-height column (240 px), or a 64 px rail of icons when
     html[data-sidebar="rail"]; in the rail each name shows as a tooltip on hover and focus.
   - Narrower: .sb-topbar (wordmark, project, menu button) and the sidebar as a drawer, open while
     html[data-drawer="open"]. Without scripts (no html.js) the sidebar sits under the page.
   ========================================================================================== */
.sidebar, .sb-topbar, .sb-scrim {
  --sb-w: 240px;
  --sb-rail: 64px;
  --sb-topbar-h: 56px;
  --sb-bg: var(--side, #F9FAFB);
  --sb-panel: var(--surface, #FFFFFF);
  --sb-ink: var(--ink, #0F1114);
  --sb-ink-2: var(--ink-2, #444A53);
  --sb-muted: var(--muted, #69707A);
  --sb-line: var(--line, #EDEEF1);
  --sb-line-2: var(--line-2, #E3E5E9);
  --sb-hover: var(--hover, #F1F2F4);
  --sb-accent: var(--accent, #23595A);
  --sb-active: var(--hover, #F1F2F4);
  --sb-active-ink: var(--ink, #0F1114);
  --sb-tip-bg: var(--ink, #0F1114);
  --sb-tip-ink: var(--paper, #FFFFFF);
  --sb-font: var(--font, "Instrument Sans", system-ui, sans-serif);
  --sb-radius: var(--r-control, 8px);
  --sb-shadow: var(--shadow-3, 0 16px 40px -12px rgb(0 0 0 / .24));
  font-family: var(--sb-font);
}
.sidebar { display: flex; flex-direction: column; background: var(--sb-bg); color: var(--sb-ink); padding: 16px 12px; }

/* Icons: one set, 20 by 20, a 1.5 px stroke. */
.sb-icon { width: 20px; height: 20px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sb-icon-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: var(--sb-radius); background: transparent; color: var(--sb-muted); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.sb-icon-btn:hover { background: var(--sb-hover); color: var(--sb-ink); border-color: transparent; }
.sb-icon-btn:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 0; }

/* The head: the wordmark (a monogram in the rail) and, in the drawer, the close button. */
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 4px 0 12px; margin-bottom: 16px; }
.sb-mark { display: inline-flex; align-items: center; min-height: 32px; padding: 4px; margin-left: -4px; color: var(--sb-ink); text-decoration: none; border-radius: 6px; }
.sb-mark .wordmark { font-size: 20px; }
.sb-monogram { display: none; width: 32px; height: 32px; place-items: center; border-radius: var(--sb-radius); font: 600 22px/1 var(--sb-font); letter-spacing: -0.04em; color: var(--sb-accent); }

/* The project switcher: a <details> menu with every project, by client. */
.sb-switch { position: relative; margin-bottom: 24px; }
.sb-switch > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 8px 8px 8px; list-style: none; cursor: pointer; user-select: none; background: var(--sb-panel); border: 1px solid var(--sb-line); border-radius: 10px; box-shadow: var(--shadow-1, none); transition: border-color .15s ease, background-color .15s ease; }
.sb-switch > summary::-webkit-details-marker { display: none; }
.sb-switch > summary:hover { border-color: var(--sb-line-2); }
.sb-switch > summary:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 2px; }
.sb-switch[open] > summary { border-color: var(--sb-line-2); }
.sb-avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--sb-radius); background: var(--sb-accent); color: #FFFFFF; font: 600 14px/1 var(--sb-font); }
.sb-switch-names { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.sb-client { font-size: 12px; color: var(--sb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-project { font-size: 14px; font-weight: 600; color: var(--sb-ink); overflow-wrap: anywhere; }
/* Long names wrap to two lines in the switcher; the summary's title has the whole name. */
.sb-switch .sb-project { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.sb-topbar-project .sb-project, .sb-topbar-project .sb-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-switch-icon { color: var(--sb-muted); width: 16px; height: 16px; }
.sb-menu { position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; max-height: min(60vh, 480px); overflow: auto; padding: 4px; background: var(--sb-panel); border: 1px solid var(--sb-line); border-radius: var(--r-menu, 12px); box-shadow: var(--sb-shadow); }
.sb-menu-group { font-size: 12px; font-weight: 500; color: var(--sb-muted); padding: 8px 8px 4px; }
.sb-menu a { display: grid; gap: 2px; padding: 8px; border-radius: var(--sb-radius); color: var(--sb-ink); text-decoration: none; }
.sb-menu a:hover { background: var(--sb-hover); }
.sb-menu a:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: -2px; }
.sb-menu a[aria-current="true"] { background: var(--sb-active); }
.sb-menu-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.sb-menu-detail { font-size: 12px; color: var(--sb-muted); }

/* The pages, in groups. The current one has an accent bar and a soft accent wash. */
.sb-nav { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 24px; margin: 0 -12px; padding: 0 12px 8px; scrollbar-width: thin; }
.sb-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sb-group-label { font-size: 12px; font-weight: 500; color: var(--sb-muted); padding: 0 12px; margin-bottom: 4px; }
.sb-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 12px; border-radius: var(--sb-radius); color: var(--sb-ink-2); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.2; transition: background-color .15s ease, color .15s ease; }
.sb-link .sb-icon { color: var(--sb-muted); transition: color .15s ease; }
.sb-link:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-link:hover .sb-icon { color: var(--sb-ink-2); }
.sb-link:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: -2px; border-radius: var(--sb-radius); }
.sb-link[aria-current="page"] { background: var(--sb-active); color: var(--sb-ink); font-weight: 600; }
.sb-link[aria-current="page"] .sb-icon { color: var(--sb-active-ink); }
/* The current page reads by its grey fill and weight, as on the website; the bar shows only in forced colours. */
.sb-link[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--sb-accent); display: none; }
.sb-label { min-width: 0; overflow-wrap: anywhere; }

/* The foot: the organisation, the maker, the language switch and the collapse button. */
.sb-foot { display: grid; gap: 12px; margin-top: 16px; padding: 16px 4px 0 12px; border-top: 1px solid var(--sb-line); }
.sb-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.sb-lang { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--sb-line); border-radius: 999px; background: var(--sb-panel); }
.sb-lang a { min-width: 32px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; letter-spacing: 0.04em; text-align: center; color: var(--sb-muted); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.sb-lang a:hover { color: var(--sb-ink); background: var(--sb-hover); }
.sb-lang a:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 1px; }
.sb-lang a[aria-current="true"] { background: var(--sb-ink); color: var(--sb-bg); }
.sb-org { display: grid; gap: 2px; min-width: 0; line-height: 1.3; }
.sb-org-name { font-size: 13px; font-weight: 500; color: var(--sb-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-by { font-size: 12px; color: var(--sb-muted); }
.sb-flip { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }

/* Wide screens: a sticky column, or the rail. */
@media (min-width: 1024px) {
  .sidebar { position: sticky; top: 0; z-index: 40; flex: none; width: var(--sb-w); height: 100vh; height: 100dvh; border-right: 1px solid var(--sb-line); transition: width .2s cubic-bezier(.2, .8, .2, 1); }
  .sb-topbar, .sb-scrim, .sb-close { display: none; }

  html[data-sidebar="rail"] .sidebar { width: var(--sb-rail); }
  html[data-sidebar="rail"] .sb-head { justify-content: center; padding: 0; }
  html[data-sidebar="rail"] .sb-mark { margin: 0; padding: 0; }
  html[data-sidebar="rail"] .sb-mark .wordmark { display: none; }
  html[data-sidebar="rail"] .sb-monogram { display: grid; }
  html[data-sidebar="rail"] .sb-switch > summary { justify-content: center; min-height: 40px; padding: 0; border-color: transparent; background: transparent; box-shadow: none; }
  html[data-sidebar="rail"] .sb-switch > summary:hover { background: var(--sb-hover); }
  html[data-sidebar="rail"] .sb-switch-names, html[data-sidebar="rail"] .sb-switch-icon { display: none; }
  html[data-sidebar="rail"] .sb-menu { top: 0; left: calc(100% + 12px); right: auto; width: 264px; }
  html[data-sidebar="rail"] .sb-nav { overflow: visible; gap: 16px; }
  html[data-sidebar="rail"] .sb-group-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-sidebar="rail"] .sb-group + .sb-group { border-top: 1px solid var(--sb-line); padding-top: 16px; }
  html[data-sidebar="rail"] .sb-link { justify-content: center; width: 40px; padding: 0; }
  html[data-sidebar="rail"] .sb-link[aria-current="page"]::before { left: -12px; }
  /* The name as a tooltip: still the link's text for screen readers, shown on hover and focus. */
  html[data-sidebar="rail"] .sb-label { position: absolute; z-index: 70; left: calc(100% + 16px); top: 50%; transform: translate(-4px, -50%); padding: 4px 8px; border-radius: 6px; background: var(--sb-tip-bg); color: var(--sb-tip-ink); font-size: 13px; font-weight: 500; white-space: nowrap; box-shadow: var(--sb-shadow); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; }
  html[data-sidebar="rail"] .sb-link:hover .sb-label, html[data-sidebar="rail"] .sb-link:focus-visible .sb-label { opacity: 1; transform: translate(0, -50%); }
  html[data-sidebar="rail"] .sb-foot { justify-items: center; padding: 16px 0 0; }
  html[data-sidebar="rail"] .sb-org { display: none; }
  html[data-sidebar="rail"] .sb-foot-row, html[data-sidebar="rail"] .sb-lang { flex-direction: column; }
  html[data-sidebar="rail"] .sb-lang { border-radius: 12px; }
  html[data-sidebar="rail"] .sb-lang a { border-radius: 10px; }
  html[data-sidebar="rail"] .sb-flip { transform: scaleX(-1); }
}
/* Short windows: a little less air, so every page fits without scrolling the sidebar. */
@media (min-width: 1024px) and (max-height: 760px) {
  .sb-head, .sb-switch { margin-bottom: 12px; }
  .sb-nav { gap: 12px; }
  .sb-link { min-height: 32px; }
  .sb-foot { margin-top: 8px; padding-top: 12px; }
}

/* Narrow screens: the top bar, and the sidebar as a drawer. */
@media (max-width: 1023px) {
  .sb-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: var(--sb-topbar-h); padding: 0 8px 0 max(16px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--sb-bg) 92%, transparent); border-bottom: 1px solid var(--sb-line); }
  @supports (backdrop-filter: blur(8px)) { .sb-topbar { backdrop-filter: blur(12px) saturate(1.4); } }
  .sb-topbar-mark { display: inline-flex; align-items: center; min-height: 40px; color: var(--sb-ink); text-decoration: none; }
  .sb-topbar-project { display: grid; flex: 1; min-width: 0; padding-left: 12px; border-left: 1px solid var(--sb-line-2); line-height: 1.2; }
  .sb-open { margin-left: auto; color: var(--sb-ink); width: 40px; height: 40px; }
  .sb-collapse { display: none; }
  .sb-close { width: 40px; height: 40px; }
  .sb-link { min-height: 40px; }

  html.js .sidebar { position: fixed; z-index: 60; top: 0; bottom: 0; left: 0; width: min(304px, 86vw); padding: 12px 12px max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: var(--sb-panel); transform: translateX(-100%); visibility: hidden; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
  html.js[data-drawer="open"] .sidebar { transform: none; visibility: visible; box-shadow: var(--sb-shadow); transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  html.js .sb-head { margin-bottom: 16px; }
  .sb-scrim { position: fixed; inset: 0; z-index: 55; background: rgb(12 12 10 / .4); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  html[data-drawer="open"] .sb-scrim { opacity: 1; pointer-events: auto; }
  html[data-drawer="open"] { overflow: hidden; }

  /* No scripts: the sidebar is a plain block under the page. */
  html:not(.js) .sidebar { order: 3; border-top: 1px solid var(--sb-line); padding: 24px 16px 32px; }
  html:not(.js) .sb-open, html:not(.js) .sb-close, html:not(.js) .sb-scrim { display: none; }
  html:not(.js) .sb-nav { overflow: visible; }
}
/* anewera sidebar: END ===================================================================== */

/* The anewera wordmark: "anewera" opens into "a new era" and closes again. Only the two spacers
   move (width 0 to 0.28em); the hidden open copy fixes the box's width, so nothing next to it shifts.
   Rest closed about 6s, open over 0.9s, hold 1.8s, close over 0.9s: 9.6s in all, eased, no bounce.
   No control for it, by design. Reduced motion: static and closed. */
/* Self-contained for reuse (the marketing site): only the accent and ink tokens, with fallbacks. */
.wordmark { display: inline-grid; font-family: var(--font, "Instrument Sans", system-ui, sans-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: var(--ink, currentColor); white-space: nowrap; font-stretch: 96%; }
.wordmark > span { grid-area: 1 / 1; }
.wordmark .wm-open { visibility: hidden; }
.wordmark .wm-open .wm-gap { display: inline-block; width: 0.28em; }
.wordmark .wm-live .wm-gap { display: inline-block; width: 0; }
.wordmark .wm-a { color: var(--accent, #0F7B5F); }
.wordmark.moving .wm-live .wm-gap { animation: anewera-open 9.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes anewera-open {
  0%, 62.5% { width: 0; }
  71.875%, 90.625% { width: 0.28em; }
  100% { width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark.moving .wm-live .wm-gap { animation: none; width: 0; }
}

/* ---------- the page header: title, period and filters, sticky inside the content ---------- */
.page-bar { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
  .page-bar { position: sticky; top: var(--topbar-h); background: color-mix(in srgb, var(--paper) 90%, transparent); }
  @supports (backdrop-filter: blur(8px)) { .page-bar { backdrop-filter: blur(12px) saturate(1.4); } }
}
@media (min-width: 1024px) { .page-bar { top: 0; } }
.page-bar-inner { max-width: var(--content-max); margin: 0 auto; min-height: 64px; padding: 12px var(--gutter); display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
@media (min-width: 1024px) { .page-bar-inner { min-height: 72px; } }
.page-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; flex: 1 1 auto; min-width: 0; }
.page-title h1 { font-size: var(--fs-xl); line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.crumb { font-size: var(--fs-body); font-weight: 500; color: var(--muted); text-decoration: none; border-radius: 4px; }
.crumb:hover { color: var(--ink); }
.crumb-sep { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Sample data: said once, quietly, next to the title. */
.sample-chip { font-size: var(--fs-xs); font-weight: 500; line-height: 20px; color: var(--muted); padding: 0 8px; border: 1px dashed var(--line-2); border-radius: var(--r-pill); white-space: nowrap; cursor: help; }

/* The period (three links) and the filters (a menu with a GET form). */
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 767px) { .controls { width: 100%; margin-left: 0; } .controls .filters { margin-left: auto; } }
.period { display: inline-flex; padding: 2px; border-radius: var(--r-pill); background: var(--sunken); border: 1px solid var(--line); }
.period a { font-size: var(--fs-sm); font-weight: 500; line-height: 20px; color: var(--ink-2); text-decoration: none; padding: 6px 12px; border-radius: var(--r-pill); white-space: nowrap; transition: color .15s ease, background-color .15s ease; }
.period a:hover { color: var(--ink); }
.period a:focus-visible { outline-offset: -2px; border-radius: var(--r-pill); }
.period a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08), inset 0 0 0 1px var(--line); }
.range { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.filters > summary { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; line-height: 20px; padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); transition: border-color .15s ease; }
.filters > summary:hover { border-color: var(--ink-2); }
.filters > summary .count { font-size: var(--fs-xs); background: var(--ink); color: var(--paper); border-radius: var(--r-pill); padding: 0 6px; line-height: 18px; }

/* Menus are <details>: no script needed (sidebar.js only closes them on a click outside). */
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; user-select: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary .chev { width: 10px; height: 10px; flex: none; transition: transform .15s ease; }
details.menu > summary .chev path { fill: none; stroke: currentColor; stroke-width: 1.6; }
details.menu[open] > summary .chev { transform: rotate(180deg); }
.menu-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; min-width: 240px; max-width: calc(100vw - 2 * var(--gutter)); max-height: min(70vh, 560px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-menu); padding: 4px; box-shadow: var(--shadow-3); }
.menu-panel.right { left: auto; right: 0; }
.filters .menu-panel { width: min(520px, calc(100vw - 2 * var(--gutter))); padding: 16px; }
.filter-form { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.filter-form .f { display: grid; gap: 4px; min-width: 0; }
.filter-form .f > span, .filter-form legend { font-size: var(--fs-sm); color: var(--muted); padding: 0; }
.filter-form .wide { grid-column: 1 / -1; }
.filter-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.filter-form .checks { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-form .checks label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-base); padding: 4px 12px 4px 8px; min-height: 32px; border: 1px solid var(--line-2); border-radius: var(--r-pill); cursor: pointer; }
.filter-form .checks label:hover { border-color: var(--ink-2); }
.filter-form .checks label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.filter-form .checks input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.filter-form select, .filter-form input[type=date] { font-size: var(--fs-base); padding: 8px 12px; min-height: 40px; }
.filter-form .actions { grid-column: 1 / -1; justify-content: flex-end; }
.filter-hint { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }

.active-filters { font-size: var(--fs-sm); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.active-filters .chip { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 12px; }

/* ---------- the page ---------- */
main { container: main / inline-size; flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 24px var(--gutter) 64px; }
main:focus { outline: none; }
main > * + *, main > * + figure.chart { margin-top: 24px; }
footer.foot { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 24px var(--gutter) 40px; font-size: var(--fs-sm); color: var(--muted); }
footer.foot p { max-width: 80ch; }
@media (min-width: 768px) {
  :root { --gutter: 32px; }
  main { padding-top: 32px; padding-bottom: 96px; }
  main > * + *, main > * + figure.chart { margin-top: 40px; }
}
@media (min-width: 1280px) { :root { --gutter: 40px; } }

/* ---------- the page's introduction: what it shows, how to read it ---------- */
.page-head { display: grid; gap: 12px; }
.page-head > p { color: var(--ink-2); max-width: 70ch; font-size: var(--fs-md); }
.page-head .lead { font-size: var(--fs-lg); font-weight: 600; line-height: 1.35; color: var(--ink); max-width: 60ch; letter-spacing: -0.01em; }
.page-head .lead a { color: var(--ink); text-decoration-color: var(--line-2); }
.page-head .lead a:hover { text-decoration-color: var(--accent); }
@container main (min-width: 640px) { .page-head .lead { font-size: var(--fs-xl); } }
/* "How to read this": the statistics, folded away until asked for. */
details.how { font-size: var(--fs-base); color: var(--ink-2); max-width: 72ch; }
details.how > summary { cursor: pointer; color: var(--muted); width: fit-content; list-style: none; display: inline-flex; gap: 8px; align-items: center; min-height: 32px; border-radius: 4px; }
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary::before { content: "?"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 11px; font-weight: 600; }
details.how > summary:hover { color: var(--ink); }
details.how > :not(summary) { margin-top: 8px; }
details.how p + p { margin-top: 8px; }

.stack > * + * { margin-top: 12px; }
.stack.loose > * + * { margin-top: 32px; }
.stack.loose > section + .answer-text { margin-top: 16px; }
.row { display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.split { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@container main (min-width: 840px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } .split.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
section > h2, .section-head { margin-bottom: 16px; }
.section-head { display: flex; gap: 4px 16px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.section-head p { color: var(--muted); font-size: var(--fs-base); max-width: 72ch; }

/* ---------- surfaces: one radius, one border, one quiet shadow ---------- */
.panel, .sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; box-shadow: var(--shadow-1); min-width: 0; }
@container main (min-width: 600px) { .panel, .sheet { padding: 24px; } }
.sheet > h2 { margin-bottom: 16px; }
.notice { border: 1px solid var(--line); background: var(--surface); padding: 12px 16px; border-radius: var(--r-panel); font-size: var(--fs-base); display: grid; gap: 8px; }
.notice.good { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.notice.bad { border-color: color-mix(in srgb, var(--stop) 40%, var(--line)); background: var(--stop-soft); }
.notice.hold { border-color: color-mix(in srgb, var(--hold) 35%, var(--line)); background: var(--hold-soft); }
/* Empty states: one look everywhere. A whole page's empty state, and a small one inside a panel. */
.empty-state { border: 1px dashed var(--line-2); background: var(--surface); padding: 32px 24px; border-radius: var(--r-panel); display: grid; gap: 8px; justify-items: start; }
.empty-icon { box-sizing: content-box; width: 20px; height: 20px; padding: 10px; margin-bottom: 4px; border-radius: var(--r-control); background: var(--sunken); fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.empty-state h2 { font-size: var(--fs-md); }
.empty-state p { color: var(--ink-2); max-width: 70ch; }
.empty-state code, .empty-note code { color: var(--ink); background: var(--sunken); padding: 1px 4px; border-radius: 4px; }
.empty-note { font-size: var(--fs-base); color: var(--muted); padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: var(--r-control); max-width: 72ch; }

/* ---------- figures: a row of numbers in one panel, hairlines between ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-1); }
.card { background: var(--surface); padding: 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
@container main (min-width: 600px) { .card { padding: 24px; } }
.card .label { font-size: var(--fs-sm); color: var(--muted); }
.card .value { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
@container main (min-width: 600px) { .card .value { font-size: 32px; } }
.card .value small { font-size: var(--fs-base); font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 4px; white-space: nowrap; }
.card .sub { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.card .sub b { color: var(--ink); font-weight: 500; }
.card.own .value { color: var(--accent-ink); }
svg.meter { display: block; width: 100%; height: 6px; border-radius: 3px; }
svg.meter .track { fill: var(--sunken); }
svg.meter .fill { fill: var(--accent); }
svg.meter.hold .fill { fill: var(--hold); }
svg.meter.stop .fill { fill: var(--stop); }
svg.meter.good .fill { fill: var(--accent); }

/* ---------- badges, changes, keys ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 500; line-height: 20px; padding: 0 8px; border-radius: var(--r-pill); white-space: nowrap; color: var(--ink-2); background: var(--sunken); }
.badge.good { color: var(--accent-ink); background: var(--accent-soft); }
.badge.hold { color: var(--hold); background: var(--hold-soft); }
.badge.stop { color: var(--stop); background: var(--stop-soft); }
.badge.signal { color: var(--accent-ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--accent); }
.badge.signal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.change { font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; }
.change.up { color: var(--accent-ink); }
.change.down { color: var(--stop); }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; background: var(--muted); flex: none; }
.key.line { height: 3px; width: 14px; vertical-align: middle; border-radius: 2px; }
.key.s-own { background: var(--series-own); }
.key.s-2 { background: var(--series-2); }
.key.s-3 { background: var(--series-3); }
.key.s-4 { background: var(--series-4); }
.key.s-5 { background: var(--series-5); }
.key.s-ink { background: var(--ink); }
.key.s-rival { background: var(--rival); }
.key.band { width: 14px; height: 10px; background: var(--series-own); opacity: .22; }
.key.hollow { width: 9px; height: 9px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--ink-2); }
.key[class*="st-"] { background: var(--c); }
.key.st-unclassified { box-shadow: inset 0 0 0 1px var(--line-2); }
.own-name { font-weight: 600; }
.own-name[data-you]::after { content: attr(data-you); font-size: 11px; font-weight: 500; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--r-pill); padding: 1px 6px; margin-left: 8px; vertical-align: 1px; }

/* ---------- buttons and form controls ---------- */
.button, button { font: 500 var(--fs-base)/1 var(--font); border-radius: var(--r-control); padding: 8px 16px; min-height: 40px; cursor: pointer; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: border-color .15s ease, background-color .15s ease; }
.button:hover, button:hover { border-color: var(--ink-2); }
.button.primary, button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.button.primary:hover, button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.button.quiet, button.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.button.quiet:hover, button.quiet:hover { background: var(--sunken); }
button:disabled { opacity: .45; cursor: default; }
input[type=text], input[type=search], input[type=date], select {
  font: 16px/1.4 var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-control); padding: 8px 12px; min-height: 40px; width: 100%; }
select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus { outline: 2px solid var(--accent-wash); outline-offset: 0; border-color: var(--accent); }
form.inline { display: inline; margin: 0; }
.search { display: flex; gap: 8px; align-items: stretch; max-width: 640px; }
.search input { flex: 1; min-width: 0; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions select { width: auto; max-width: 100%; font-size: var(--fs-base); padding: 8px 32px 8px 12px; min-height: 40px; }
.actions button, .actions .button { min-height: 40px; padding: 8px 16px; }
.actions label.row { gap: 8px; flex-wrap: nowrap; max-width: 100%; }
.actions .reset { font-size: var(--fs-base); color: var(--muted); }

/* ---------- tables: hairlines, figures aligned ---------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-1);
  /* A soft shadow at an edge while there is more table to scroll to (it scrolls away with the content). */
  background:
    linear-gradient(to right, var(--surface) 40%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 40%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .14), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .14), transparent) right / 12px 100% no-repeat scroll,
    var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-base); }
table.data caption { text-align: left; padding: 16px 16px 4px; font-weight: 600; }
table.data th { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom; }
table.data td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tbody th { font-size: var(--fs-base); font-weight: 500; color: var(--ink); vertical-align: top; white-space: normal; min-width: 10em; }
table.data td .stacked { display: block; white-space: nowrap; }
table.data tr:last-child > th, table.data tr:last-child > td { border-bottom: 0; }
table.data .num { text-align: right; white-space: nowrap; }
table.data th.num { text-align: right; }
table.data tbody tr { transition: background-color .12s ease; }
table.data tbody tr:hover { background: color-mix(in srgb, var(--sunken) 70%, var(--surface)); }
table.data tr.own-row > * { background: var(--accent-soft); }
table.data td.rate { white-space: nowrap; }
table.data td.progress { min-width: 176px; }
table.data td.progress svg.meter { margin: 8px 0 4px; }
table.data .iv { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
table.data .meta { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }
table.data th[scope=rowgroup] { background: var(--sunken); padding-top: 8px; padding-bottom: 8px; }
table.data th[scope=rowgroup].label { font-size: var(--fs-sm); color: var(--ink-2); font-weight: 500; }
table.data a { color: var(--ink); text-decoration-color: var(--line-2); }
table.data a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
.truncate { display: block; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Statistical detail (intervals, sample sizes) stays out of the way until asked for: the
   "Show margins of error" switch in the page (a checkbox, no script) brings it back. */
.stat { display: none !important; }
body:has(#show-stats:checked) .stat { display: block !important; }
.stats-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); cursor: pointer; user-select: none; min-height: 32px; }
.stats-toggle:hover { color: var(--ink); }
.stats-toggle input { appearance: none; width: 32px; height: 18px; border-radius: var(--r-pill); background: var(--line-2); position: relative; margin: 0; cursor: pointer; transition: background .15s ease; flex: none; }
.stats-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s ease; }
.stats-toggle input:checked { background: var(--accent); }
.stats-toggle input:checked::after { transform: translateX(14px); }
.pm { color: var(--muted); font-size: .8em; font-weight: 400; margin-left: 4px; white-space: nowrap; }

/* Heat map: one hue from the surface to the accent, in five steps. */
table.heat { border-collapse: separate; border-spacing: 4px; width: 100%; font-size: var(--fs-sm); padding: 4px; }
table.heat th { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); text-align: left; padding: 8px; vertical-align: bottom; white-space: nowrap; }
table.heat th.prompt { white-space: normal; min-width: 224px; max-width: 384px; font-size: var(--fs-base); font-weight: 400; line-height: 1.4; color: var(--ink); background: var(--surface); position: sticky; left: 0; z-index: 1; padding: 8px 12px 8px 8px; }
table.heat th.prompt a { color: var(--ink); text-decoration: none; }
table.heat th.prompt a:hover { text-decoration: underline; }
table.heat th.prompt .meta { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
table.heat td { padding: 0; min-width: 88px; border-radius: var(--r-control); }
table.heat td a, table.heat td > span { display: grid; gap: 2px; align-content: center; padding: 8px 12px; text-decoration: none; color: var(--ink); min-height: 56px; border-radius: var(--r-control); transition: box-shadow .12s ease; }
table.heat td a:hover { box-shadow: inset 0 0 0 2px var(--ink); }
table.heat .v { font-size: var(--fs-md); font-weight: 600; line-height: 1.15; }
table.heat .iv, table.heat .n { font-size: var(--fs-xs); line-height: 1.25; opacity: .88; }
table.heat .note { opacity: 1; }
table.heat .pm { color: inherit; opacity: .75; font-size: var(--fs-xs); }
.h-none { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.h0 { background: var(--sunken); }
.h1 { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.h2 { background: color-mix(in srgb, var(--accent) 26%, var(--surface)); }
.h3 { background: color-mix(in srgb, var(--accent) 44%, var(--surface)); }
.h4 { background: color-mix(in srgb, var(--accent) 70%, var(--surface)); }
.h5 { background: var(--accent); }
table.heat .h4 a, table.heat .h5 a, table.heat .h4 > span, table.heat .h5 > span, .legend .h4, .legend .h5 { color: var(--on-accent); }
/* A cell from few answers carries a 135 degree hatch, so it reads as less certain. */
table.heat td.small a, table.heat td.small > span, .legend .swatch.small { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--surface) 60%, transparent) 5px 7px); }
/* Legends sit under their chart and wrap; they never overlap it. */
.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: var(--fs-sm); color: var(--muted); margin-top: 12px; }
.legend .item { display: inline-flex; align-items: center; min-width: 0; }
.legend .swatch { display: inline-block; width: 16px; height: 12px; border-radius: 3px; margin-right: 8px; flex: none; }

/* ---------- charts (server-side SVG) ---------- */
figure.chart { container-type: inline-size; position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 16px; min-width: 0; box-shadow: var(--shadow-1); }
@container main (min-width: 600px) { figure.chart { padding: 24px 24px 16px; } }
figure.chart figcaption { display: grid; gap: 4px; margin-bottom: 16px; }
figure.chart figcaption .t { font-weight: 600; font-size: var(--fs-body); line-height: 1.35; }
figure.chart figcaption .d { font-size: var(--fs-sm); color: var(--muted); }
svg.plot { display: block; width: 100%; height: auto; font: 11px var(--font); font-variant-numeric: tabular-nums; }
/* Each chart is drawn at four widths; the chart's own width (a container query) picks the one
   whose text comes out at about its real size, whether the chart fills the page or half of it. */
svg.plot.narrow, svg.plot.half, svg.plot.medium { display: none; }
@container (max-width: 430px) { svg.plot.wide { display: none; } svg.plot.narrow { display: block; } }
@container (min-width: 431px) and (max-width: 640px) { svg.plot.wide { display: none; } svg.plot.half { display: block; } }
@container (min-width: 641px) and (max-width: 900px) { svg.plot.wide { display: none; } svg.plot.medium { display: block; } }
svg.plot .grid { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
svg.plot .base { stroke: var(--line-2); stroke-width: 1; shape-rendering: crispEdges; }
svg.plot .tick { fill: var(--muted); }
svg.plot .line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.plot .band { fill: var(--c); fill-opacity: .12; stroke: none; }
svg.plot .dot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
svg.plot .hit { fill: transparent; }
svg.plot .pt:hover .hit { fill: var(--c); fill-opacity: .25; }
svg.plot .end-label { fill: var(--ink); font: 500 11px var(--font); }
svg.plot .leader { stroke: var(--muted); stroke-width: 1; }
svg.plot .event line { stroke: var(--muted); stroke-width: 1; }
svg.plot .event text { fill: var(--muted); font: 500 10px var(--font); }
svg.plot .event path { fill: var(--muted); }
.s-own { --c: var(--series-own); }
.s-2 { --c: var(--series-2); }
.s-3 { --c: var(--series-3); }
.s-4 { --c: var(--series-4); }
.s-5 { --c: var(--series-5); }
.s-ink { --c: var(--ink); }
.s-rival { --c: var(--rival); }
.s-hold { --c: var(--hold); }
.s-stop { --c: var(--stop); }
.key.s-hold { background: var(--hold); }
.key.s-stop { background: var(--stop); }
.st-recommended { --c: var(--stance-recommended); }
.st-listed { --c: var(--stance-listed); }
.st-source { --c: var(--stance-source); }
.st-cautioned { --c: var(--stance-cautioned); }
.st-unclassified { --c: var(--stance-unclassified); }

/* Hover and focus on charts: a column per day, a segment per bar. charts.js shows data-tip. */
svg.plot .col { fill: transparent; }
svg.plot .hit-col { fill: transparent; cursor: crosshair; outline: none; }
svg.plot .hit-col:hover, svg.plot .hit-col:focus-visible, svg.plot .hit-col.tip-on { fill: var(--ink); fill-opacity: .05; }
svg.plot .hit-col:focus-visible { stroke: var(--accent); stroke-width: 1.5; }
svg.plot .thin .line { stroke-width: 1.5; }
svg.plot .dot.small { fill: var(--surface); stroke: var(--c); stroke-width: 1.75; }
svg.plot .area { stroke: none; }
svg.plot .g-top { stop-color: var(--c); stop-opacity: .22; }
svg.plot .g-bottom { stop-color: var(--c); stop-opacity: 0; }
figure.chart.bare { background: transparent; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
[data-tip] { cursor: default; }
.chart-tip { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; white-space: pre-line; max-width: 280px; background: var(--ink); color: var(--paper); font: 500 var(--fs-sm)/1.45 var(--font); font-variant-numeric: tabular-nums; padding: 8px 12px; border-radius: var(--r-control); box-shadow: var(--shadow-3); }
.chart-tip[hidden] { display: none; }

/* Stacked bars and columns: segments separated by a 2px gap in the surface colour. */
svg.stack rect.seg { stroke: var(--surface); stroke-width: 2px; vector-effect: non-scaling-stroke; }
svg.stack rect.seg { fill: var(--c); transition: fill-opacity .12s ease; }
svg.stack rect.seg:hover, svg.stack rect.seg.tip-on { fill-opacity: .78; }
svg.stack .track { fill: var(--sunken); stroke: none; }
svg.stack .ref { stroke: var(--ink); stroke-width: 1.25px; stroke-dasharray: none; vector-effect: non-scaling-stroke; }
svg.stack .ref-label { fill: var(--ink-2); font: 500 11px var(--font); }
ul.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.hbars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; margin: 0 -8px; padding: 8px; border-radius: var(--r-control); transition: background-color .12s ease; }
ul.hbars li:hover { background: color-mix(in srgb, var(--sunken) 60%, transparent); }
ul.hbars .who { font-size: var(--fs-base); font-weight: 500; min-width: 0; overflow-wrap: anywhere; display: flex; gap: 4px 8px; align-items: baseline; }
ul.hbars .who > :not(.initial) { min-width: 0; }
ul.hbars .who a { color: var(--ink); text-decoration-color: var(--line-2); }
ul.hbars .who a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
ul.hbars .tag { font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
ul.hbars .val { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
ul.hbars .val small { font-weight: 400; color: var(--muted); font-size: var(--fs-xs); margin-left: 4px; }
ul.hbars .note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
ul.hbars svg { grid-column: 1 / -1; display: block; width: 100%; height: 12px; border-radius: 3px; overflow: hidden; }
ul.hbars svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
ul.hbars .spark-row { grid-column: 1 / -1; display: block; max-width: 320px; }
ul.hbars .spark-row svg.spark { height: 24px; border-radius: 0; overflow: visible; }
/* A ranked list with daily lines: one line per brand when there is room. */
@container main (min-width: 600px) {
  ul.hbars.with-spark { gap: 0; }
  ul.hbars.with-spark li { grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) 88px minmax(0, 0.8fr); grid-template-areas: "who bar val spark" "note bar val spark"; gap: 0 16px; align-items: center; padding: 8px; border-top: 1px solid var(--line); border-radius: 0; }
  ul.hbars.with-spark li:first-child { border-top: 0; }
  ul.hbars.with-spark li:hover { border-radius: var(--r-control); }
  ul.hbars.with-spark li:hover, ul.hbars.with-spark li:hover + li { border-top-color: transparent; }
  ul.hbars.with-spark .who { grid-area: who; }
  ul.hbars.with-spark .note { grid-area: note; }
  ul.hbars.with-spark svg.stack { grid-area: bar; }
  ul.hbars.with-spark .val { grid-area: val; text-align: right; }
  ul.hbars.with-spark .spark-row { grid-area: spark; }
}

/* A brand's round marker with its first letter. */
.initial { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 600; flex: none; background: var(--sunken); color: var(--ink-2); vertical-align: middle; }
.initial.own { background: var(--accent); color: var(--on-accent); }
.initial[class*=" s-"] { background: color-mix(in srgb, var(--c) 18%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--c); }

/* Dot plot: one row per engine, one dot per country, the interval as a faint whisker. */
.dotplot { display: grid; gap: 4px; }
.dotplot .dp-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 32px; }
.dotplot .dp-row > span { font-size: var(--fs-base); font-weight: 500; overflow-wrap: anywhere; }
.dotplot svg { display: block; width: 100%; height: 32px; overflow: visible; }
.dotplot svg .grid { stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.dotplot svg .whisker { stroke: var(--c); stroke-width: 2px; stroke-opacity: .35; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dotplot svg .ring { stroke: var(--surface); stroke-width: 15px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dotplot svg .dot { stroke: var(--c); stroke-width: 11px; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke-width .12s ease; }
.dotplot svg .hole { stroke: var(--surface); stroke-width: 5px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dotplot svg g[data-tip]:hover .dot, .dotplot svg g.tip-on .dot { stroke-width: 14px; }
.dotplot svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.dotplot .dp-axis { position: relative; height: 20px; font-size: var(--fs-xs); color: var(--muted); }
.dotplot .dp-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.dotplot .dp-axis .t0 { left: 0; transform: none; } .dotplot .dp-axis .t25 { left: 25%; } .dotplot .dp-axis .t50 { left: 50%; } .dotplot .dp-axis .t75 { left: 75%; } .dotplot .dp-axis .t100 { left: 100%; transform: translateX(-100%); }
@container main (max-width: 479px) { .dotplot .dp-row { grid-template-columns: 80px minmax(0, 1fr); } .dotplot .dp-row > span { font-size: var(--fs-sm); } }

/* Charts come in once when the page loads, and never move again. The finished chart is the base
   style; the keyframes only hold the starting point, so a chart whose animation does not run (a
   background tab, print, a screenshot) is complete rather than empty. */
@media (prefers-reduced-motion: no-preference) {
  svg.plot .draw { animation: chart-draw 1.1s cubic-bezier(0.33, 1, 0.68, 1) .1s backwards; }
  svg.plot .fade-in, svg .fade-in { animation: chart-fade .7s ease-out .35s backwards; }
  .grow-x { transform-box: fill-box; transform-origin: left center; animation: chart-grow-x .8s cubic-bezier(0.33, 1, 0.68, 1) backwards; }
  .grow-y { transform-box: fill-box; transform-origin: center bottom; animation: chart-grow-y .7s cubic-bezier(0.33, 1, 0.68, 1) backwards; }
}
@keyframes chart-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
@keyframes chart-fade { from { opacity: 0; } }
@keyframes chart-grow-x { from { transform: scaleX(0); } }
@keyframes chart-grow-y { from { transform: scaleY(0); } }
.multiples { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.multiples + ul.plain { margin-top: 16px; }
@container main (min-width: 760px) { .multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
details.numbers { margin-top: 8px; }
details.numbers > summary { cursor: pointer; font-size: var(--fs-sm); color: var(--muted); min-height: 32px; display: flex; align-items: center; width: fit-content; border-radius: 4px; }
details.numbers > summary:hover { color: var(--ink); }
details.numbers .table-wrap { margin-top: 8px; max-height: 360px; overflow: auto; box-shadow: none; }

/* A rate as a short bar: filled to the rate, its interval as a hairline whisker over the track. */
svg.ibar { display: block; flex: none; overflow: visible; }
svg.ibar .track { fill: var(--sunken); }
svg.ibar .fill { fill: var(--c, var(--ink-2)); }
svg.ibar.s-ink .fill { fill: color-mix(in srgb, var(--ink) 38%, var(--surface)); }
svg.ibar .whisker { stroke: var(--ink); stroke-width: 1; stroke-opacity: .55; }
.rate-cell { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.rate-cell .figure { text-align: right; min-width: 64px; }
svg.spark { display: block; width: 100%; height: 32px; overflow: visible; }
svg.spark .line { fill: none; stroke: var(--c, var(--ink)); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg.spark .area { fill: var(--c, var(--ink)); fill-opacity: .08; stroke: none; }
svg.spark .dot { fill: var(--c, var(--ink)); stroke: var(--surface); stroke-width: 2; }

/* ---------- the overview ---------- */
.hero { display: grid; gap: 12px; }
.hero .context { font-size: var(--fs-base); color: var(--muted); }
.hero .context b { color: var(--ink); font-weight: 500; }
/* The finding as one calm line, as on the website's dashboard: a sentence, not a poster. */
.headline { font-size: var(--fs-xl); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; max-width: 52ch; text-wrap: balance; }
@container main (min-width: 640px) { .headline { font-size: 24px; } }
.block-head { display: flex; gap: 4px 24px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.block-head .hint { font-size: var(--fs-base); color: var(--muted); max-width: 60ch; }
.engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
@container main (min-width: 840px) { .engines.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .engines.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.engines.n1 { grid-template-columns: minmax(0, 1fr); }
.engine { background: var(--surface); padding: 16px; display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; min-width: 0; }
@container main (min-width: 600px) { .engine { padding: 24px 24px 16px; } }
a.engine:hover { background: color-mix(in srgb, var(--sunken) 55%, var(--surface)); }
.engine .name { font-size: var(--fs-base); font-weight: 500; color: var(--ink-2); }
.engine .figure { display: flex; align-items: baseline; gap: 2px; }
.engine .big { font-size: var(--fs-2xl); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
@container main (min-width: 600px) { .engine .big { font-size: 32px; } }
.engine .big.none { font-size: var(--fs-xl); color: var(--muted); font-weight: 500; letter-spacing: -0.01em; line-height: 1.6; }
.engine .pm { font-size: var(--fs-body); }
.engine .sub { font-size: var(--fs-sm); color: var(--muted); }
.engine.best .big { color: var(--accent-ink); }
.engine svg.spark { margin: 4px 0; }
.pair { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.stack-panels { display: grid; gap: 24px; min-width: 0; }
@container main (min-width: 880px) { .pair { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; } .stack-panels { gap: 32px; } }

/* The overview's hero: the figures as the chart's legend, then the chart. */
.hero-panel .engines { background: transparent; border: 0; border-radius: 0; gap: 24px 0; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-panel .engine { background: transparent; padding: 0 16px 0 0; }
.hero-panel .engine.total { grid-column: 1 / -1; }
.hero-panel a.engine { border-radius: var(--r-control); }
.hero-panel a.engine:hover { background: transparent; }
.hero-panel a.engine:hover .name { color: var(--ink); }
.hero-panel a.engine:hover .big { color: var(--accent-ink); }
.hero-panel .engine .name { display: inline-flex; align-items: center; gap: 0; }
.hero-panel .engine.total .big { color: var(--accent-ink); }
.hero-panel figure.chart { margin-top: 24px; }
@container main (min-width: 840px) {
  .hero-panel .engines { grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); }
  .hero-panel .engines.n4 { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); }
  .hero-panel .engines.n3 { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); }
  .hero-panel .engines.n2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .hero-panel .engine.total { grid-column: auto; }
  .hero-panel .engine + .engine { padding-left: 24px; border-left: 1px solid var(--line); }
}
@container main (min-width: 840px) and (max-width: 1000px) { .hero-panel .engine .big { font-size: var(--fs-2xl); } }

.block-foot { margin-top: 16px; font-size: var(--fs-base); }

ol.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
ol.steps > li { padding: 24px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
ol.steps > li:first-child { border-top: 0; padding-top: 0; }
ol.steps > li:last-child { padding-bottom: 0; }
ol.steps h3 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.01em; }
ol.steps .why { color: var(--ink-2); font-size: var(--fs-base); max-width: 68ch; }
ul.evidence { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
ul.evidence li { display: grid; gap: 2px; font-size: var(--fs-base); padding: 8px 12px; border-radius: 10px; background: var(--sunken); min-width: 0; }
ul.evidence a { overflow-wrap: anywhere; }
ul.evidence .note { font-size: var(--fs-sm); color: var(--muted); }
ul.evidence q { color: var(--ink-2); font-style: italic; }
ol.steps .more { font-size: var(--fs-base); font-weight: 500; width: fit-content; }

/* ---------- answers ---------- */
.answers-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--shadow-1); }
.answers-list > li + li { border-top: 1px solid var(--line); }
.answers-list a.item, .answers-list div.item { display: grid; gap: 4px; padding: 16px; color: var(--ink); text-decoration: none; transition: background-color .12s ease; }
@container main (min-width: 600px) { .answers-list a.item, .answers-list div.item { padding: 16px 24px; } }
.answers-list div.item > * + * { margin-top: 4px; }
.answers-list a.item:hover { background: color-mix(in srgb, var(--sunken) 60%, var(--surface)); }
.answers-list a.item:focus-visible { outline-offset: -2px; }
.answers-list .head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.answers-list .q { font-weight: 500; }
.answers-list .ex { color: var(--ink-2); font-size: var(--fs-base); overflow-wrap: anywhere; }
.names { display: flex; flex-wrap: wrap; gap: 4px; }
.names span { font-size: var(--fs-xs); line-height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-2); }
.names span.own { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: var(--fs-base); }
.answer-text { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-md)/1.7 var(--font); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 24px; margin-inline: 0; margin-bottom: 0; max-width: 78ch; box-shadow: var(--shadow-1); }
.answer-text:first-child { margin-top: 0; }
mark { color: inherit; padding: 0 2px; border-radius: 3px; }
mark.own { background: var(--accent-wash); box-shadow: inset 0 -2px 0 var(--accent); }
mark.rival { background: color-mix(in srgb, var(--ink) 8%, transparent); box-shadow: inset 0 -2px 0 var(--rival); }
ol.citations { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 12px; }
ol.citations li { counter-increment: c; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px; }
ol.citations li::before { content: counter(c); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--sunken); border-radius: var(--r-chip); width: 24px; height: 24px; display: grid; place-items: center; }
ol.citations a { overflow-wrap: anywhere; }
ol.citations .meta { grid-column: 2; font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
ul.stances { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
ul.stances li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--fs-base); }
ul.stances .evidence { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; min-width: 0; }
blockquote.quoted { grid-column: 2; margin: 4px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--sunken); color: var(--ink-2); font-size: var(--fs-base); overflow-wrap: anywhere; }
blockquote.quoted p { margin: 0; }
blockquote.quoted p + p { margin-top: 4px; }
table.quotes q.passage { display: block; font-size: var(--fs-base); font-weight: 400; line-height: 1.5; max-width: 60ch; overflow-wrap: anywhere; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: var(--fs-base); }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; overflow-wrap: anywhere; }
dl.facts dd code { font-size: 12.5px; }
@container main (max-width: 479px) { dl.facts { grid-template-columns: minmax(0, 1fr); gap: 0; } dl.facts dd { margin-bottom: 12px; } }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
ul.queries { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.queries li { font-size: var(--fs-sm); line-height: 1.5; border: 1px solid var(--line); background: var(--surface); padding: 2px 12px; border-radius: var(--r-pill); overflow-wrap: anywhere; }
ul.queries li b { color: var(--muted); font-weight: 400; margin-left: 8px; }
.run-buttons { gap: 8px; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media (forced-colors: active) { svg.ibar .fill, svg.meter .fill, svg.stack rect.seg { stroke: CanvasText; fill: CanvasText; } .sb-link[aria-current="page"]::before { display: block; background: Highlight; } }

/* ---------- sign-in (hosted dashboard) ---------- */
/* One white card on the page, the wordmark above, as calm as the website. */
.login-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px var(--gutter); background: var(--side); }
.login { width: 100%; max-width: 400px; display: grid; gap: 24px; justify-items: center; }
.login-mark { color: var(--ink); text-decoration: none; }
.login-mark .wordmark { font-size: 26px; }
.login-card { width: 100%; display: grid; gap: 12px; padding: 32px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow-2); }
.login-card h1 { margin: 0; font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.015em; }
.login-intro, .login-done { margin: 0; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.5; }
.login-done { padding: 12px 14px; border-radius: var(--r-control); background: var(--accent-soft); color: var(--ink); }
.login-form { display: grid; gap: 8px; margin-top: 8px; }
.login-form label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.login-form input[type="email"], .login-form input[type="password"] { width: 100%; min-height: 44px; padding: 10px 12px; margin-bottom: 8px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-control); }
.login-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.login-form input[aria-invalid="true"] { border-color: var(--stop); }
.login-error { margin: 0; font-size: var(--fs-sm); color: var(--stop); }
.login-form .button { margin-top: 8px; min-height: 44px; width: 100%; justify-content: center; }
.login-foot { margin: 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
/* The signed-in person and sign-out, at the foot of the sidebar. */
.sb-account { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 0 12px; }
.sb-account-email { font-size: 12px; color: var(--sb-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sb-account form { margin: 0; flex: none; }
.sb-signout { min-height: 28px; padding: 0 10px; font: 500 12px/1 var(--sb-font); color: var(--sb-ink-2); background: transparent; border: 1px solid var(--sb-line-2); border-radius: var(--sb-radius); cursor: pointer; }
.sb-signout:hover { background: var(--sb-hover); color: var(--sb-ink); }
html[data-sidebar="rail"] .sb-account { display: none; }