/* ==========================================================================
   /insights/ — the field explorer, layout G1 "One place" (id 2154, spec §9)
   ==========================================================================

   Loaded after styles.css, entity.css, nav.css and page.css; ported from
   docs/features/insights/explorer-mockup.html (G1). One workspace: a rail of
   fields on the left, the chart on the right, no boxed cards; hairlines
   divide. Every rule is scoped under `.ins`, the server-rendered wrapper, so
   nothing leaks into the site's own classes. One sans family at 400/600.

   Colour: surfaces and text reuse the site tokens (--color-*), so the page
   follows the site's two theme entry points: light by default, dark under
   `prefers-color-scheme: dark` unless `[data-theme="light"]`, and again under
   `[data-theme="dark"]`. insights.js reads the chart tokens with
   getComputedStyle to mix heatmap ramps.

   CONTRAST, against the real page ground (#c6cec7 light, #101418 dark):
   text >= 4.5:1 (muted #4f4c47 5.31 / #a8a49a 7.44; accent #185c4c 4.88 /
   #5cbfa1 8.30) and marks >= 3:1 (the desaturated series hue #33609a 3.98 /
   #5f8cc8 5.35; c2 #b4461a 3.41 / #d95926 4.76; c3 #11734f 3.64 / #199e70
   5.43; node #706c64 3.25 / #77736b 3.92). The heatmap ramps are not held to
   3:1: a pale cell means a small value, and every cell carries its number. */

:root {
  --ins-bg: var(--color-bg);
  --ins-surface: var(--color-surface);
  --ins-rule: var(--color-rule);
  --ins-text: var(--color-text);
  --ins-muted: #4f4c47;
  --ins-faint: #55524d;
  --ins-accent: #185c4c;
  --hair: rgba(26, 26, 25, .1); --hover: rgba(26, 26, 25, .055); --grid: rgba(26, 26, 25, .08);
  --acc-tint: rgba(24, 92, 76, .09); --acc-line: rgba(24, 92, 76, .45);

  --ins-s100: #cde2fb; --ins-s250: #86b6ef; --ins-s400: #3987e5; --ins-s550: #1c5cab; --ins-s700: #0d366b;
  --ins-div-neg: #e34948; --ins-div-mid: #f0efec; --ins-div-pos: #2a78d6;
  --ins-c1: #33609a; --ins-c2: #b4461a; --ins-c3: #11734f; --ins-other: #6f6b64;
  --ins-node: #706c64; --ins-edge: rgba(26, 26, 25, .22); --ins-edge-hot: rgba(51, 96, 154, .85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ins-muted: var(--color-text-muted); --ins-faint: var(--color-text-faint); --ins-accent: var(--color-accent);
    --hair: rgba(242, 240, 235, .1); --hover: rgba(242, 240, 235, .06); --grid: rgba(242, 240, 235, .07);
    --acc-tint: rgba(92, 191, 161, .12); --acc-line: rgba(92, 191, 161, .5);
    --ins-s100: #1d2a3c; --ins-s250: #184f95; --ins-s400: #2a78d6; --ins-s550: #5598e7; --ins-s700: #b7d3f6;
    --ins-div-neg: #e66767; --ins-div-mid: #383835; --ins-div-pos: #3987e5;
    --ins-c1: #5f8cc8; --ins-c2: #d95926; --ins-c3: #199e70; --ins-other: #6b6862;
    --ins-node: #77736b; --ins-edge: rgba(242, 240, 235, .16); --ins-edge-hot: rgba(95, 140, 200, .9);
  }
}
:root[data-theme="dark"] {
  --ins-muted: var(--color-text-muted); --ins-faint: var(--color-text-faint); --ins-accent: var(--color-accent);
  --hair: rgba(242, 240, 235, .1); --hover: rgba(242, 240, 235, .06); --grid: rgba(242, 240, 235, .07);
  --acc-tint: rgba(92, 191, 161, .12); --acc-line: rgba(92, 191, 161, .5);
  --ins-s100: #1d2a3c; --ins-s250: #184f95; --ins-s400: #2a78d6; --ins-s550: #5598e7; --ins-s700: #b7d3f6;
  --ins-div-neg: #e66767; --ins-div-mid: #383835; --ins-div-pos: #3987e5;
  --ins-c1: #5f8cc8; --ins-c2: #d95926; --ins-c3: #199e70; --ins-other: #6b6862;
  --ins-node: #77736b; --ins-edge: rgba(242, 240, 235, .16); --ins-edge-hot: rgba(95, 140, 200, .9);
}

/* --- Frame ---------------------------------------------------------------- */
.ins { color: var(--ins-text); font-size: 14px; line-height: 1.45; }
.ins.js [hidden] { display: none !important; }
.ins button, .ins input { font: inherit; color: inherit; }
.ins button:focus-visible, .ins input:focus-visible { outline: 2px solid var(--ins-accent); outline-offset: -2px; }
.ins svg.i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
html.ins-lock { overflow: hidden; }

.ins .ibar { display: flex; align-items: center; gap: 16px; height: 56px; border-bottom: 1px solid var(--hair); }
.ins .ibar h1 { font-size: 14px; font-weight: 600; margin: 0; white-space: nowrap; }
.ins .asof { margin-left: auto; font-size: 12px; color: var(--ins-muted); white-space: nowrap; }

/* The rail: 264 px at 1280, 288 at 1440, never over 296 (Jae, 2026-10-22: the
   368 px rail was too wide). The chart takes the rest. */
.ins { --rail-w: clamp(264px, 20vw, 296px); }
.ins .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); }
/* "irail", not "rail": styles.css owns .rail (the related-companies card grid). */
.ins .irail { position: sticky; top: calc(var(--nav-stack, 82px) + 8px); align-self: start; max-height: calc(100vh - var(--nav-stack, 82px) - 8px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; border-right: 1px solid var(--hair); padding: 16px 8px 24px 0; }
.ins .main { min-width: 0; padding: 32px 0 64px 40px; display: flex; flex-direction: column; gap: 8px; }
.ins .phonebar { display: none; }

/* --- The rail ------------------------------------------------------------- */
/* Layout H (Jae's cards 2026-10-23): starting points first, grouped by
   dataset. Behind "Build your own chart": the field on the chart, one line per
   field that can be added (its mark says what a tap draws), the filter, the
   measure and the chart's link. Plain rows: no boxes, no outlines. */
.ins .rh { margin: 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ins-muted); }
.ins .sg { margin-top: 12px; }
.ins .sgh { display: flex; justify-content: space-between; margin: 0 8px 4px; font-size: 12px; font-weight: 600; color: var(--ins-muted); }
.ins .sgh span { font-weight: 400; font-variant-numeric: tabular-nums; }
.ins .st { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer; }
.ins .st svg.i { width: 16px; height: 16px; color: var(--ins-muted); }
.ins .st:hover { background: var(--hover); }
.ins .st.on { background: var(--acc-tint); box-shadow: inset 0 0 0 1px var(--acc-line); }
.ins .st.on svg.i { color: var(--ins-accent); }
.ins .build { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 16px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--hair); background: none; font-size: 14px; font-weight: 600; cursor: pointer; }
.ins .build:hover { box-shadow: inset 0 0 0 1px var(--ins-accent); color: var(--ins-accent); }
.ins .bsub { margin: 6px 8px 0; font-size: 12px; color: var(--ins-muted); text-align: center; }
.ins .back { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--ins-accent); font-size: 13px; cursor: pointer; }
.ins .dtabs { display: flex; justify-content: space-between; gap: 8px; margin: 10px 8px 18px; font-size: 13px; white-space: nowrap; }
.ins .dtabs button { padding: 0 0 4px; border: 0; background: none; color: var(--ins-muted); cursor: pointer; }
.ins .dtabs button:hover { color: var(--ins-text); }
.ins .dtabs button[aria-pressed="true"] { color: var(--ins-text); font-weight: 600; box-shadow: 0 2px 0 var(--ins-accent); }
.ins .onx { display: flex; align-items: center; gap: 6px; min-height: 36px; padding-left: 8px; font-size: 15px; font-weight: 600; }
.ins .onx .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ins .onx.sub { min-height: 32px; font-size: 14px; font-weight: 400; }
.ins .onx .k { color: var(--ins-muted); }
.ins .ox { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ins-muted); cursor: pointer; }
.ins .ox:hover { background: var(--hover); color: var(--ins-text); }
.ins .hint { margin: 4px 8px 0; font-size: 13px; color: var(--ins-muted); }
.ins .ah { margin: 16px 8px 2px; font-size: 12px; color: var(--ins-muted); }
.ins .adds { display: grid; }
.ins .ad { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font-size: 14px; text-align: left; cursor: pointer; }
.ins .ad svg.i { width: 16px; height: 16px; color: var(--ins-muted); }
.ins .ad .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins .ad kbd { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ins-muted); opacity: 0; }
.ins .adds:hover kbd, .ins .adds:focus-within kbd { opacity: 1; }
.ins .ad:hover, .ins .ad:focus-visible { background: var(--hover); color: var(--ins-accent); }
.ins .ad:hover svg.i, .ins .ad:focus-visible svg.i { color: var(--ins-accent); }
.ins .gk { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 8px 0; font-size: 12px; color: var(--ins-muted); }
.ins .gk span { display: inline-flex; align-items: center; gap: 4px; }
.ins .gk svg.i { width: 12px; height: 12px; }
.ins .only { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; margin-top: 12px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font-size: 14px; text-align: left; cursor: pointer; }
.ins .only svg.i { color: var(--ins-muted); }
.ins .only:hover, .ins .only[aria-expanded="true"] { background: var(--hover); }
.ins .drill { margin: 0 8px; font-size: 12px; color: var(--ins-muted); }
.ins .mft { margin: 16px 8px 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.ins .mbtn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; border: 0; background: none; font-size: 13px; color: var(--ins-muted); cursor: pointer; text-align: left; }
.ins .mbtn b { color: var(--ins-text); font-weight: 600; }
.ins .lnk { display: block; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--ins-accent); font-size: 13px; cursor: pointer; }
.ins .lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.ins .copied { font-size: 12px; color: var(--ins-muted); }
.ins .copied:empty { display: none; }
.ins .keys { margin: 6px 0 0; font-size: 12px; color: var(--ins-muted); }
@media (hover: none) { .ins .keys, .ins .ad kbd { display: none; } }
.ins .cv { width: 12px; height: 12px; color: var(--ins-muted); opacity: .7; }
/* Before the script runs: the fields as a plain list (the server's markup). */
.ins .xseed { display: grid; gap: 1px; }
.ins .xf { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font-size: 14px; text-align: left; }
.ins .xf svg.i { color: var(--ins-muted); }

/* --- The chart column ----------------------------------------------------- */
.ins .titlerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
.ins .ctitle { font-size: 22px; font-weight: 600; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.ins .tside:empty { display: none; }
.ins .ctype { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--hair); background: none; font-size: 13px; white-space: nowrap; cursor: pointer; }
.ins .ctype .k { color: var(--ins-muted); }
.ins .ctype:hover, .ins .ctype[aria-expanded="true"] { background: var(--hover); }
.ins .note { display: flex; align-items: center; gap: 4px; margin: 0; min-height: 24px; font-size: 12px; color: var(--ins-muted); font-variant-numeric: tabular-nums; }
.ins .info { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--ins-muted); cursor: help; }
.ins .info:hover { background: var(--hover); color: var(--ins-text); }
.ins .info[aria-expanded="true"] { background: var(--hover); color: var(--ins-text); }
.ins .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ins .legendrow { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.ins .legendrow .legend:empty + .seg { margin-left: auto; }
.ins .legend { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--ins-muted); }
.ins .legend:empty { display: none; }
/* Layout C (Jae's card 2026-10-22): a slot tag on the legend and on each axis title. */
.ins .lgh { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; color: var(--ins-text); font-weight: 600; }
.ins .tagk { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ins-accent); }
.ins svg.chart .axt { fill: var(--ins-text); font-weight: 600; }
.ins svg.chart .axt .tagk { fill: var(--ins-accent); font-size: 10.5px; letter-spacing: .04em; }
.ins .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-left: 6px; background: var(--ins-other); }
.ins .sw-1 { background: var(--ins-c1); }
.ins .sw-2 { background: var(--ins-c2); }
.ins .sw-3 { background: var(--ins-c3); }
.ins .sw-node { background: var(--ins-node); border-radius: 50%; }
.ins .sw-line { width: 14px; height: 1px; border-radius: 0; background: var(--ins-muted); }
.ins .sw-dot { border-radius: 50%; }
.ins .ramp { display: inline-block; width: 110px; height: 8px; border-radius: 2px; }
.ins .ramp-seq { background: linear-gradient(90deg, var(--ins-s100), var(--ins-s250), var(--ins-s400), var(--ins-s550), var(--ins-s700)); }
.ins .ramp-div { background: linear-gradient(90deg, var(--ins-div-neg), var(--ins-div-mid), var(--ins-div-pos)); }
.ins .seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--hair); border-radius: 999px; }
.ins .seg button { border: 0; background: none; border-radius: 999px; padding: 4px 11px; font-size: 12px; color: var(--ins-muted); cursor: pointer; white-space: nowrap; }
.ins .seg button[aria-pressed="true"] { background: var(--hover); color: var(--ins-text); font-weight: 600; }

.ins .chartbox { overflow-x: auto; min-height: 120px; margin-top: 16px; }
.ins .chartbox[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.ins .empty { color: var(--ins-muted); font-size: 15px; padding: 28px 0; }
.ins svg.chart { display: block; }
.ins svg.chart.off { display: none; }
.ins svg.chart text { fill: var(--ins-text); font-family: var(--font-sans); }
.ins svg.chart .ax { fill: var(--ins-muted); font-size: 12px; }
.ins svg.chart .cellnum { font: 500 11px var(--font-sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.ins svg.chart .cellnum.bv { font: 400 12px var(--font-sans); fill: var(--ins-muted); }
.ins svg.chart .cellnum.sm { font-size: 10px; }
.ins svg.chart text.cellnum.ink-dark { fill: #1a1a19; }
.ins svg.chart text.cellnum.ink-light { fill: #ffffff; }
.ins .edges line { stroke: var(--ins-edge); stroke-width: 1; }
.ins .edges line.hot { stroke: var(--ins-edge-hot); stroke-width: 1.5; }
.ins circle.n { fill: var(--ins-node); stroke: var(--ins-bg); stroke-width: 1.5; cursor: pointer; }
.ins circle.n.top { fill: var(--ins-c1); }
.ins circle.n.dim { opacity: .18; }
/* A mark that drills down on click (layout H). */
.ins svg.chart .dr { cursor: pointer; }
.ins svg.chart rect.dr:hover, .ins svg.chart circle.dr:hover { filter: brightness(1.18); }
.ins #tip .tk { font-size: 12px; opacity: .75; }
.ins svg.chart .nlabel { font-size: 11.5px; font-weight: 500; paint-order: stroke; stroke: var(--ins-bg); stroke-width: 3px; pointer-events: none; }
.ins .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 12px; color: var(--ins-muted); border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 16px; }
.ins .linkbtn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ins-muted); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.ins .tablebox { overflow-x: auto; }
.ins .tablebox table { border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.ins .tablebox td, .ins .tablebox th { padding: 5px 10px; border-bottom: 1px solid var(--hair); text-align: right; white-space: nowrap; }
.ins .tablebox th { font-weight: 600; color: var(--ins-muted); }
.ins .tablebox td:first-child, .ins .tablebox th:first-child { text-align: left; }
/* Tooltip: position is written by the script (CSSOM), visibility by class. */
.ins #tip { position: fixed; left: 0; top: 0; pointer-events: none; background: var(--ins-text); color: var(--ins-bg); font-size: 13px; line-height: 1.4; padding: 7px 10px; border-radius: 7px; max-width: 280px; z-index: 120; opacity: 0; transition: opacity .08s; }
.ins #tip.on { opacity: 1; }

/* --- Menus: search, a grouped list, keyboard ------------------------------- */
.ins .pop { position: fixed; z-index: 95; width: 300px; max-height: min(440px, calc(100vh - 16px)); display: flex; flex-direction: column; background: var(--ins-surface); color: var(--ins-text); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .06); font-size: 14px; }
.ins .pop-s { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--hair); color: var(--ins-muted); flex: none; }
.ins .pop-s input { flex: 1; min-width: 0; border: 0; background: none; font-size: 14px; color: var(--ins-text); outline: none; }
.ins .pop-s input:focus-visible { outline: none; }
.ins .pop-s input::placeholder { color: var(--ins-muted); }
.ins .pop-l { overflow-y: auto; padding: 4px; }
.ins .pg { display: flex; align-items: center; gap: 8px; padding: 8px 8px 4px; font-size: 12px; color: var(--ins-muted); }
.ins .pi { display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font-size: 14px; text-align: left; cursor: pointer; }
.ins .pi .pic { width: 14px; display: inline-flex; color: var(--ins-muted); flex: none; }
.ins .pi .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins .pi .m { margin-left: auto; padding-left: 8px; font-size: 12px; color: var(--ins-muted); font-variant-numeric: tabular-nums; }
.ins .pi .ck { color: var(--ins-accent); flex: none; }
.ins .pi .m + .ck { margin-left: 8px; }
.ins .pi .t + .ck { margin-left: auto; }
.ins .pi.act { background: var(--hover); }
.ins .pi[aria-selected="true"] .t { font-weight: 600; }
.ins .pi[aria-disabled="true"] { opacity: .4; cursor: default; }
.ins .pnone { margin: 8px; font-size: 12px; color: var(--ins-muted); }
.ins .pop.full { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; height: 72vh; max-height: none; border-radius: 16px 16px 0 0; }

/* --- Signed out: the chart column becomes a quiet sign-in block ----------- */
.ins .intro { display: grid; gap: 16px; justify-items: start; max-width: 720px; padding: 48px 0 64px; }
.ins .intro h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.ins .intro p { margin: 0; font-size: 15px; color: var(--ins-muted); max-width: 60ch; }
.ins .intro .intro-note { font-size: 13px; }
.ins .intro-shot { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--hair); }
/* Signed in, the explorer replaces the intro; until then it is never shown. */
.ins.authed .intro, .ins:not(.authed) .app, .ins:not(.authed) .scrim, .ins:not(.authed) .sheet { display: none !important; }
.ins .signin { justify-self: start; margin-top: 8px; padding: 8px 16px; border-radius: 999px; background: var(--ins-accent); color: var(--ins-bg); text-decoration: none; font-weight: 600; }
.ins .signin:hover { filter: brightness(1.08); }
.ins .signin:focus-visible { outline: 2px solid var(--ins-accent); outline-offset: 2px; }

/* --- Account, in the header's right corner -------------------------------- */
.ins .acct { position: relative; display: flex; align-items: center; }
.ins .acct:empty { display: none; }
.ins .acct-in { font-size: 13px; font-weight: 600; color: var(--ins-text); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; padding: 4px 2px; }
.ins .acct-in:hover { text-decoration-color: currentColor; }
.ins .acct-in:focus-visible { outline: 2px solid var(--ins-accent); outline-offset: 2px; border-radius: 4px; }
.ins .acct-btn { width: 28px; height: 28px; border: 1px solid var(--hair); border-radius: 999px; background: var(--hover); font-size: 13px; font-weight: 600; cursor: pointer; }
.ins .acct-btn:hover, .ins .acct-btn[aria-expanded="true"] { border-color: var(--ins-muted); }
.ins .acct-menu:not([hidden]) { position: absolute; right: 0; top: calc(100% + 6px); z-index: 95; width: 260px; max-width: calc(100vw - 32px); padding: 4px; background: var(--ins-surface); color: var(--ins-text); border: 1px solid var(--hair); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .06); }
.ins .acct-email { margin: 0; padding: 8px 8px 6px; font-size: 12px; color: var(--ins-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--hair); margin-bottom: 4px; }
.ins .acct-item { display: block; width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: none; font-size: 14px; text-align: left; cursor: pointer; }
.ins .acct-item:hover, .ins .acct-item:focus-visible { background: var(--hover); }
.ins .acct-check { display: flex; align-items: center; justify-content: space-between; }
.ins .acct-state { font-size: 12px; color: var(--ins-muted); }
.ins .acct-check[aria-checked="true"] .acct-state { color: var(--ins-text); font-weight: 600; }
.ins .acct-note { margin: 0 8px; font-size: 12px; color: var(--ins-muted); min-height: 0; }
.ins .acct-note:empty { display: none; }
.ins .ctitle:focus { outline: none; }
.ins .ctitle:focus-visible { outline: 2px solid var(--ins-accent); outline-offset: 2px; border-radius: 4px; }
.ins .acct-warn { margin: 0; padding: 8px; font-size: 13px; line-height: 1.4; }
.ins .acct-row { display: flex; gap: 8px; padding: 4px 8px 8px; }
/* White on #a23a26 is 6.63:1 in both themes. */
.ins .acct-danger { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: #a23a26; color: #ffffff; font-size: 13px; font-weight: 600; cursor: pointer; }
.ins .acct-plain { height: 30px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: none; font-size: 13px; cursor: pointer; }
.ins .acct-err:not([hidden]) { margin: 4px 8px 6px; font-size: 12px; color: var(--ins-text); }

/* --- The one-time newsletter question --------------------------------------- */
.ins .welcome:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.ins .nl { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ins .nl input { width: 16px; height: 16px; margin: 0; accent-color: var(--ins-accent); }
.ins .nl-save { height: 28px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--hover); font-size: 13px; font-weight: 600; cursor: pointer; }
.ins .nl-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; border: 0; border-radius: 6px; background: none; color: var(--ins-muted); cursor: pointer; }
.ins .nl-x:hover { background: var(--hover); color: var(--ins-text); }
.ins .nl-err:empty { display: none; }
.ins .nl-err { font-size: 12px; color: var(--ins-text); }
@media (max-width: 599px) {
  /* Room for the account control: the data date is in the footer too. */
  .ins .ibar:has(.acct:not(:empty)) .asof { display: none; }
  .ins .ibar .acct { margin-left: auto; }
}

/* --- Phone and narrow windows: the rail becomes a bottom sheet ------------- */
/* Above the site nav (z-index 90), so the modal sheet covers it. */
.ins .scrim:not([hidden]) { position: fixed; inset: 0; background: rgba(10, 12, 12, .38); z-index: 100; }
.ins .sheet:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; height: 72vh; z-index: 105; display: flex; flex-direction: column; background: var(--ins-bg); border-top: 1px solid var(--hair); border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); }
.ins .sheet-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 20px; border-bottom: 1px solid var(--hair); }
.ins .sheet-h b { font-size: 15px; }
.ins .sheet-h button { width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ins .sheet-b { flex: 1; overflow-y: auto; padding: 8px 8px 32px; }
@media (max-width: 899px) {
  .ins .ibar { height: 48px; }
  .ins .app { display: block; }
  .ins.js .irail { display: none; }
  .ins .main { padding: 8px 0 64px; }
  .ins .phonebar { display: flex; align-items: center; gap: 12px; padding: 4px 0 8px; border-bottom: 1px solid var(--hair); }
  /* The recipe in full: it wraps rather than cutting an in-use value. */
  .ins .sum { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font-size: 14px; color: var(--ins-muted); }
  .ins .sum b { color: var(--ins-text); font-weight: 600; }
  .ins .si { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .ins .si svg.i { color: var(--ins-muted); }
  .ins .sum b .si svg.i { color: var(--ins-text); }
  .ins .sumbtn { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; background: none; font-size: 14px; font-weight: 600; cursor: pointer; }
  .ins .titlerow { flex-wrap: wrap; gap: 8px; margin-top: 16px; }
  .ins .ctitle { font-size: 18px; }
  .ins .rtag { max-width: 55%; }
}

/* --- Before the script runs -------------------------------------------------
   Last, so these win at equal specificity. Without insights.js the rail reads
   as a plain list of the fields, with one line saying why nothing charts. */
.ins:not(.js) .main, .ins:not(.js) .rtag, .ins:not(.js) .cv { display: none; }
.ins:not(.js) .app { display: block; }
.ins:not(.js) .irail { position: static; max-height: none; max-width: 368px; border-right: 0; }
@media (min-width: 900px) { .ins:not(.js) .irail { max-width: var(--rail-w); } }

@media (prefers-reduced-motion: reduce) {
  .ins #tip, .ins .chartbox { transition: none !important; }
}