:root {
    --bg: #ffffff; --fg: #1c1c1e; --muted: #6e6e73; --line: #e5e5ea;
    --card: #f6f6f8; --accent: #8b5cf6; --mono: ui-monospace, "SF Mono", Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #111113; --fg: #f2f2f7; --muted: #98989f; --line: #2c2c2e; --card: #1b1b1e; }
  }
  * { box-sizing: border-box; }
  /* The hidden attribute must always win — #signin and #obs set their own
     display (grid), which otherwise overrides the UA's display:none and
     leaves a full-height invisible slab in the flow (the double scroll). */
  [hidden] { display: none !important; }
  body { margin: 0; background: var(--bg); color: var(--fg);
         font: 14px/1.5 -apple-system, "SF Pro Text", system-ui, sans-serif; }
  header { display: flex; align-items: center; gap: 20px; padding: 12px 20px;
           border-bottom: 1px solid var(--line); position: sticky; top: 0;
           background: var(--bg); z-index: 2; }
  header h1 { font-size: 15px; margin: 0; font-weight: 700; }
  /* Nine tabs is 737px of buttons. In a flex header that do not shrink and
     do not scroll, that width becomes the PAGE's width: measured 915px of
     document on a 375px phone, so every table, chart and column below was
     laid out for a viewport nobody had. min-width:0 lets the nav be narrower
     than its content; overflow-x lets the content still be reached. */
  nav { display: flex; gap: 4px; min-width: 0; overflow-x: auto;
        scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav::-webkit-scrollbar { display: none; }
  nav button { border: none; background: none; color: var(--muted); font: inherit;
               font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer;
               flex: none; white-space: nowrap; }
  nav button:hover { background: var(--card); }
  nav button.active { color: var(--accent);
                      background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
  header .who { margin-left: auto; color: var(--muted); font-size: 12px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  main { display: grid; grid-template-columns: 340px 1fr; min-height: calc(100vh - 49px); }
  @media (max-width: 800px) { main { grid-template-columns: 1fr; } }
  #list { border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 49px); }

  /* Phone. Three things share one 375px row and none of them fits: the title,
     nine tabs, and an email address. So the tabs take a row of their own and
     scroll edge to edge — bleeding past the header padding, because a strip
     that stops short of the edge reads as ending there.

     The two calc(100vh - 49px) rules above assume a one-row header. With two
     rows they cut the panel short, so the phone drops the nested scroller
     entirely: one page that scrolls, which is what a phone wants anyway. */
  @media (max-width: 700px) {
    header { flex-wrap: wrap; gap: 8px 12px; padding-bottom: 0; }
    header .who { font-size: 11px; max-width: 45vw; }
    /* calc, not 100%: the header's own 20px padding means 100% is 335px on a
       375px phone, and the strip would stop 40px short of the edge it is
       bleeding to. */
    nav { order: 3; width: calc(100% + 40px); margin: 0 -20px;
          padding: 2px 20px 10px; scroll-padding-inline: 20px; }
    main { min-height: 0; }
    /* min-width:0 with the overflow gone: a grid item's automatic minimum
       is its min-content width once it stops scrolling, and the rows are
       BUTTONS now — WebKit sizes a button's min-content from its text, so
       one long name widened the column past the phone, and every row's
       count sat off the right edge where nobody could see it. */
    #list { border-right: none; border-bottom: 1px solid var(--line);
            max-height: none; overflow-y: visible; min-width: 0; }
  }
  .day { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; color: var(--muted);
         text-transform: uppercase; letter-spacing: 0.4px; }
  /* The clickable rows are BUTTONS — trace, user, sender, and the back row —
     so a keyboard can reach them and Enter opens them. This strips the
     button chrome once; each row's own rule below says what it looks like,
     and wins on anything they both mention. */
  .row, .user-row, .back-row, .sender-row {
    appearance: none; width: 100%; margin: 0; border: 0; border-radius: 0;
    background: none; color: inherit; font: inherit; text-align: left;
  }
  .row .top, .row .excerpt, .sender-row .ident { display: block; }
  .row { padding: 10px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
  .row:hover { background: var(--card); }
  .row.active { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
  .row .top { display: flex; gap: 8px; align-items: baseline; }
  .row .chat { font-weight: 600; }
  .row .time { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
  .row .meta, .meta { display: flex; gap: 6px; margin-top: 2px; align-items: center;
               color: var(--muted); font-size: 12px; }
  .badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 99px;
           background: var(--card); border: 1px solid var(--line); }
  .badge.kickoff { color: var(--accent); border-color: var(--accent); }
  .badge.error { color: #e0402f; border-color: #e0402f; }
  .badge.owner { color: var(--accent); border-color: var(--accent); }
  .row .excerpt { color: var(--muted); font-size: 12px; margin-top: 4px;
                  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical; }
  #detail { padding: 18px 22px; overflow-y: auto; max-height: calc(100vh - 49px); }
  #detail .placeholder { color: var(--muted); padding-top: 40vh; text-align: center; }
  details { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px;
            background: var(--card); overflow: hidden; }
  summary { padding: 10px 14px; font-weight: 600; cursor: pointer; user-select: none;
            display: flex; align-items: baseline; gap: 8px; }
  summary .size { margin-left: auto; color: var(--muted); font-size: 11px; font-weight: 400; }
  details pre { margin: 0; padding: 12px 14px; border-top: 1px solid var(--line);
                background: var(--bg); font-family: var(--mono); font-size: 12px;
                white-space: pre-wrap; word-break: break-word; }
  details.reply summary { color: var(--accent); }
  details.recall { border-color: color-mix(in srgb, #10b981 45%, var(--line)); }
  details.recall summary { color: #10b981; }
  details.inbox { border-color: color-mix(in srgb, #f59e0b 45%, var(--line)); }
  details.inbox summary { color: #f59e0b; }
  details.omitted { border-color: color-mix(in srgb, #e0402f 55%, var(--line)); }
  details.omitted summary { color: #e0402f; }
  details.totals pre { font-family: var(--mono); }
  button.copy { margin-left: auto; padding: 4px 12px; border: 1px solid var(--line);
    border-radius: 8px; background: transparent; color: var(--fg); font: inherit;
    font-size: 12px; cursor: pointer; }
  button.copy:hover { border-color: var(--accent); color: var(--accent); }
  #search-box { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  #search-box input { width: 100%; font: inherit; padding: 7px 12px; border-radius: 9px;
                      border: 1px solid var(--line); background: var(--card); color: var(--fg); }
  /* Archetype badges — how the store is shaped: Connector maps people,
     Builder makes projects and documents, Messenger mostly talks. */
  .arch { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
          white-space: nowrap; vertical-align: 2px; }
  .arch-connector { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
  .arch-builder { background: rgba(217, 119, 6, 0.14); color: #b45309; }
  .arch-messenger { background: rgba(2, 132, 199, 0.13); color: #0369a1; }
  h2 .arch { margin-left: 8px; }
  .user-row { display: flex; align-items: baseline; gap: 8px; padding: 11px 16px;
              border-bottom: 1px solid var(--line); cursor: pointer; }
  .user-row:hover { background: var(--card); }
  /* One line each, and the badge stays glued to the name.
     The name was the only thing in this row that could shrink — the badge is
     nowrap and the count has margin-left:auto — so a long name wrapped and
     shoved its own badge to the far side of the row, which read as the badge
     belonging to nothing. Truncating instead keeps the pair together; the
     full name is on the row's title. */
  .user-row .name {
    font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .user-row .arch { flex: none; }
  .user-row .count {
    margin-left: auto; flex: none; color: var(--muted); font-size: 12px;
    white-space: nowrap;
  }
  .back-row { padding: 9px 16px; border-bottom: 1px solid var(--line); cursor: pointer;
              color: var(--accent); font-weight: 600; font-size: 13px; }
  .back-row:hover { background: var(--card); }
  #signin { display: grid; place-items: center; min-height: 70vh; gap: 16px; }
  #signin p { color: var(--muted); max-width: 420px; min-height: 20px; }
  /* Communities tab */
  /* Widths only — the frame comes from .tab. */
  #comm h2 { margin: 0 0 4px; font-size: 18px; }
  #comm .hint { color: var(--muted); font-size: 12px; margin-bottom: 16px; max-width: 640px; }
  #comm select, #comm input { font: inherit; padding: 6px 10px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--card); color: var(--fg); }
  #comm button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 13px;
    border: 1px solid var(--line); border-radius: 9px; background: transparent;
    color: var(--fg); cursor: pointer; }
  #comm button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  #comm button:disabled { opacity: 0.45; cursor: default; }
  #comm button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  #comm button.primary:hover:not(:disabled) { color: #fff; filter: brightness(1.08); }
  #comm button.quiet { border-color: transparent; color: var(--muted); font-weight: 500; }
  #comm button.quiet:hover { color: #e0402f; border-color: transparent; }
  .lineage { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); margin-bottom: 14px; }
  .lineage .who { font-weight: 700; margin-left: 0; font-size: 14px; color: var(--fg); }
  .lineage .sep { color: var(--muted); }
  /* Stat tiles: a headline number is not a chart. */
  /* The list, and what they are on beside it. The distribution describes the
     user base, which is what this tab IS — among the charts it read as one
     more time series, which it is not: it never moves like one. */
  .people-cols { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
  .people-main { min-width: 0; }
  .people-side { position: sticky; top: 16px; }
  .people-side h3 { font-size: 13px; margin: 0 0 4px; }
  @media (max-width: 900px) {
    .people-cols { grid-template-columns: 1fr; }
    .people-side { position: static; }
  }
  /* Over the page, not beside it: the Stats column is already narrow enough
     that taking 320px from it would reflow every chart the moment somebody
     clicked a band. */
  .drawer {
    position: fixed; top: 0; right: 0; bottom: 0; width: 320px; z-index: 20;
    background: var(--bg); border-left: 1px solid var(--line);
    display: flex; flex-direction: column;
    box-shadow: -12px 0 32px color-mix(in srgb, #000 12%, transparent);
  }
  .drawer-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--line);
  }
  #drawer-title { font-weight: 700; font-size: 14px; }
  .drawer-head .scale { margin: 6px 0 0; }
  .drawer-close {
    background: none; border: none; color: var(--muted); font-size: 20px;
    line-height: 1; cursor: pointer; padding: 0 2px;
  }
  #drawer-body { overflow-y: auto; padding: 6px 0; flex: 1; }
  .drawer-row {
    display: flex; align-items: baseline; gap: 8px; width: 100%;
    padding: 8px 16px; background: none; border: none; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
  }
  .drawer-row:hover:not(:disabled) { background: var(--card); }
  .drawer-row:disabled { cursor: default; }
  .drawer-name { font-weight: 500; }
  .drawer-handle { color: var(--muted); font-size: 12.5px; }
  @media (max-width: 700px) { .drawer { width: 100%; } }
  /* In the column with every other chart. The wide viewBox stays — it is
     what keeps the three stages from crowding — but it is drawn at the same
     width as the rest, so the funnel reads as one of the graphs rather than
     a banner above them. 1200x320 is the shape of the 640x180 charts, near
     enough that they sit at the same height. */
  #funnel { width: 100%; height: auto; display: block; margin-top: 6px; }
  /* The whole chart is a hover target, so say so, and let the dimming ease
     rather than snap between five cohorts as the pointer crosses them. */
  #funnel [data-cohort] { cursor: pointer; transition: opacity 0.12s ease; }
  .funnel-legend span[data-cohort] { cursor: pointer; transition: opacity 0.12s ease; }
  #funnel-read { min-height: 1.5em; margin-top: 4px; }
  .funnel-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
  .funnel-legend span { display: inline-flex; align-items: center; gap: 6px;
                        font-size: 12px; color: var(--muted); }
  .funnel-legend i { width: 9px; height: 9px; border-radius: 3px; display: block; }
  .pie { width: 120px; height: 120px; display: block; margin: 10px auto 12px; }
  /* .arch-row, not .arch: that name is the archetype PILL, two hundred lines
     up. Sharing it made this rule win on padding and display for every pill
     on the page — no side padding, a flex box, and on the user page the
     badge dropped under the heading. styles.test.js now refuses a second
     lone selector that fights the first over a property. */
  .arch-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; }
  .arch-row .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
  .arch-row .name { flex: 1; min-width: 0; }
  .arch-row .n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
  .plat { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
  .plat .name { width: 84px; flex: none; font-weight: 600; font-size: 12.5px; }
  .plat .bar { flex: 1; height: 10px; border-radius: 99px; background: var(--card); overflow: hidden; }
  .plat .bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
  .plat .n { flex: none; text-align: right; color: var(--muted); font-size: 12px;
             font-variant-numeric: tabular-nums; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px; margin-bottom: 16px; }
  .tile { border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
  .tile b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.02em;
    line-height: 1.2; }
  .swatch-row { display: flex; align-items: center; gap: 7px; }
  .swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
  .tile span { color: var(--muted); font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.4px; font-weight: 600; }
  .roster { border: 1px solid var(--line); border-radius: 12px; }
  .roster-head { display: flex; align-items: center; gap: 10px; padding: 8px 9px 8px 13px;
    border-bottom: 1px solid var(--line); }
  .roster-head .title { font-size: 11px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.4px; }
  .roster-head .note { margin-left: auto; color: var(--muted); font-size: 12px; }
  .menu { position: relative; }
  #comm .menu > button { padding: 3px 10px; line-height: 1.2; border-color: transparent;
    color: var(--muted); font-size: 16px; }
  #comm .menu > button:hover { border-color: var(--line); color: var(--fg); }
  .menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px;
    background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); padding: 5px; z-index: 3; }
  #comm .menu-pop button { display: block; width: 100%; text-align: left;
    border-color: transparent; font-weight: 500; }
  #comm .menu-pop button:hover:not(:disabled) { background: var(--card);
    border-color: transparent; color: var(--fg); }
  .comm-row { display: flex; align-items: center; gap: 9px; padding: 9px 13px; }
  .comm-row + .comm-row { border-top: 1px solid var(--line); }
  .comm-row .nm { font-weight: 600; }
  .comm-row .at { color: var(--muted); font-size: 12px; }
  .comm-row .num { margin-left: auto; color: var(--muted); font-size: 12px;
    font-variant-numeric: tabular-nums; }
  /* The map. Colors come from the panel's tokens, so dark mode is the same
     drawing in its own ink rather than an inverted one. Presentation
     ATTRIBUTES can't read var(), so identity rides on classes. */
  .map { border: 1px solid var(--line); border-radius: 14px; padding: 6px 6px 2px;
    margin-bottom: 16px; }
  /* A fitted viewBox plus a fixed height: the drawing scales to meet the box
     and stays the same size on the page whether it holds three people or
     twenty, instead of growing taller with the container. */
  .map svg { display: block; width: 100%; height: 540px; cursor: grab;
    touch-action: none; }
  .map svg.dragging { cursor: grabbing; }
  @media (max-width: 700px) { .map svg { height: 360px; } }
  .map .flow { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 2 7; }
  .map .spoke { stroke: var(--muted); stroke-width: 0.6; opacity: 0.45; }
  .map .peep { fill: var(--muted); opacity: 0.55; }
  /* A person an introduction ran through — outside the community, usually
     outside Kith. Hollow, because we hold an id and never a name. */
  .map .bridge { fill: var(--bg); stroke: var(--accent); stroke-width: 1.6;
    cursor: pointer; transition: fill 90ms ease, stroke-width 90ms ease; }
  /* Hovering one contact fills every contact that answered the SAME question.
     One question is usually answered by several people across several maps,
     and until now the only way to see that set was to hover each mark in turn
     and compare the labels by memory. Filled, not enlarged: size on this
     board already means how many people somebody knows. */
  .map .bridge.kin { fill: var(--accent); stroke-width: 2.2; }
  /* The discs answer on hover too, so they say so. */
  .map .person, .map .pnum { cursor: pointer; }
  .map .person { fill: var(--card); stroke: var(--line); stroke-width: 1.3; }
  .map .person.commons { fill: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
  .map .person.connector { stroke: var(--accent); }
  .map .pnum { fill: var(--fg); font-weight: 700; text-anchor: middle;
    font-variant-numeric: tabular-nums; }
  /* One name at a time, on the person under the cursor. Ninety members will
     not carry ninety labels at a readable size, and the picture is about
     shape and weight — who is large, who sits in the middle, who connects to
     whom. A name is a question you ask of one circle, so it waits to be asked.

     HTML, not SVG text: the drawing scales to fit its box, so a six-member
     community magnifies everything inside it about fourfold and a name set in
     drawing credits arrives enormous. Out here it is the size it says it is.

     And no mark of any kind goes on the circle itself. Fill means the
     Commons, stroke means answers running through them — a hover that
     borrowed either would be saying something about that person that isn't
     true. */
  .map { position: relative; }
  .map .pill { position: absolute; transform: translateX(-50%);
    background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 600;
    padding: 2px 8px; border-radius: 99px; white-space: nowrap;
    pointer-events: none; z-index: 2; }
  .map .legend { color: var(--muted); font-size: 11.5px; padding: 4px 8px 8px;
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
  .map .legend i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
  .map .key { width: 11px; height: 11px; border-radius: 99px; display: inline-block;
    border: 1px solid var(--line); background: var(--card); }
  .map .key.commons { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
  .map .key.badged { border-color: var(--accent); border-width: 2px; }
  .map .key.flow { width: 20px; height: 0; border-radius: 0; border: 0;
    border-top: 3px dotted var(--accent); background: none; }
  .map .key.bridge { background: var(--bg); border-color: var(--accent); width: 9px;
    height: 9px; }

  /* EVERY TAB IS A CENTRED COLUMN, said once.
     This was a per-id rule repeated for #comm, #team, #mod, #stats — so each
     new tab ran edge-to-edge until somebody noticed and added another line.
     Bench hit it, the fix was another line, and then Verification hit it too:
     a comment describing the trap is not the same as removing it.
     The class is applied from the TABS table, so a declared tab cannot miss
     it. Per-id rules below still win on specificity, which is how the panels
     with their own widths — and #obs, which sets its own display — keep what
     they had. */
  .tab { max-width: 980px; margin: 0 auto; padding: 24px 22px 60px; }
  #bench h2 { margin: 0 0 4px; font-size: 18px; }
  #bench h3 { font-size: 14px; margin: 22px 0 0; }
  #bench .hint { color: var(--muted); font-size: 12px; margin-bottom: 16px; max-width: 640px; }
  #bench button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 13px;
    border-radius: 9px; border: 1px solid var(--line); background: var(--card);
    color: inherit; cursor: pointer; }
  #bench button:hover { border-color: var(--accent); color: var(--accent); }
  #bench-new { margin: 14px 0 8px; padding: 12px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--card); }
  #bench-search { width: 100%; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--bg); color: inherit; font: inherit; }
  .bench-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
  .bench-picked:empty { display: none; }
  .picked-model { display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 10px; border-radius: 999px; font-size: 13px;
    background: color-mix(in srgb, var(--accent) 14%, transparent); }
  .picked-x { border: 0; background: none; color: var(--muted); cursor: pointer;
    font-size: 15px; line-height: 1; padding: 0 2px; }
  #bench-results:empty { display: none; }
  #bench-results { margin-top: 6px; border: 1px solid var(--line); border-radius: 8px;
    overflow: hidden; max-height: 260px; overflow-y: auto; }
  .model-hit { display: flex; gap: 10px; width: 100%; padding: 7px 10px; border: 0;
    background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
  .model-hit:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .model-hit-age { margin-left: auto; color: var(--muted); font-size: 12px;
    font-variant-numeric: tabular-nums; }
  .model-hit-price { color: var(--muted); font-size: 12px; min-width: 148px;
    text-align: right; font-variant-numeric: tabular-nums; }
  .bench-controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
  .bench-controls input[type=number] { width: 52px; padding: 4px 6px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--bg); color: inherit; font: inherit; }
  .bench-estimate { color: var(--muted); font-size: 12px; }

  .bench-run { display: block; width: 100%; padding: 10px 12px; margin-bottom: 6px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--card);
    color: inherit; font: inherit; cursor: pointer; text-align: left; }
  .bench-run:hover { border-color: var(--accent); }
  .bench-run.is-running { border-color: var(--accent); }
  .bench-run-head { display: flex; gap: 10px; align-items: baseline; }
  .bench-run-label { color: var(--muted); font-size: 12px; }
  .bench-run-note { color: var(--muted); font-size: 12px; margin-top: 4px; }
  .bench-run-note.bad { color: #c0392b; }
  /* The highlights are the row. Opening a run should confirm a decision, not
     be where the decision starts. */
  .bench-highlights { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .bench-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 3px 9px;
    border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
    font-size: 12px; font-variant-numeric: tabular-nums; }
  .bench-chip.best { border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent); }
  .bench-chip-model { font-weight: 600; }
  .bench-chip-stat, .bench-chip-cost { color: var(--muted); }

  .chart { margin: 18px 0; }
  .chart h4 { margin: 0 0 2px; font-size: 14px; }
  .chart-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
  .chart-label { width: 150px; flex: none; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chart-track { flex: 1; height: 16px; border-radius: 4px; background: var(--bg);
    border: 1px solid var(--line); overflow: hidden; }
  .chart-fill { height: 100%; background: var(--accent); border-radius: 3px 0 0 3px; }
  .chart-fill.good { background: #2e9e5b; }
  .chart-fill.bad { background: #c0392b; }
  .chart-value { width: 170px; flex: none; text-align: right; color: var(--muted);
    font-size: 12px; font-variant-numeric: tabular-nums; }
  .bench-table { width: 100%; border-collapse: collapse; margin: 12px 0;
    font-variant-numeric: tabular-nums; }
  .bench-table th { text-align: left; font-weight: 600; color: var(--muted);
    font-size: 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
  .bench-table td { padding: 6px 10px; border-bottom: 1px solid var(--line);
    vertical-align: top; }
  /* The winner is the top row after sorting; it gets the only emphasis on the
     page, because the table exists to answer one question. */
  .bench-table tbody tr:first-child td { font-weight: 600; }

  /* Team tab */
  #team { max-width: 560px; padding: 28px 22px; }
  #team h2 { font-size: 15px; margin: 0 0 4px; }
  #team .hint { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
  .member { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
            border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
            background: var(--card); }
  .member .email { font-weight: 600; }
  .member .by { color: var(--muted); font-size: 12px; margin-left: auto; }
  .member button { border: none; background: none; color: #e0402f; font: inherit;
                   font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 6px; }
  #add { display: flex; gap: 8px; margin-top: 16px; }
  #add input { flex: 1; font: inherit; padding: 8px 12px; border-radius: 10px;
               border: 1px solid var(--line); background: var(--bg); color: var(--fg); }
  #add button { font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 10px;
                border: none; background: var(--accent); color: white; cursor: pointer; }
  #team .note { color: #e0402f; font-size: 12px; margin-top: 8px; min-height: 16px; }
  #stats code { font-family: var(--mono); font-size: 12px; }
  #snapshot-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
  #snapshot-row button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 15px;
    border: 1px solid var(--line); border-radius: 10px; background: transparent;
    color: inherit; cursor: pointer; }
  #snapshot-row button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
  #snapshot-row button:disabled { opacity: 0.5; cursor: default; }
  #snapshot-row .hint { margin: 0; }
  /* Moderation */
  #mod { max-width: 760px; padding: 28px 22px; }
  #mod h2 { font-size: 15px; margin: 0 0 4px; }
  #mod .hint { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
  .mod-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
             border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px;
             background: var(--card); }
  .mod-row .who { font-weight: 600; }
  .mod-row .arrow { color: var(--muted); }
  .mod-row .reason { color: var(--muted); font-size: 13px; margin-top: 3px; }
  /* What a failed load or click says, where the rows or the row would be. */
  .hint.bad, .reason.bad { color: #e0402f; }
  /* A button asking for its second click. !important on purpose: this is
     the one state that must win over every per-tab button rule on the page
     — #comm's, .mod-row's, .member's, .costform's — and losing to any of
     them would be a confirmation nobody could see. */
  button.armed { color: #fff !important; background: #e0402f !important;
    border-color: #e0402f !important; }
  .mod-row .when { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
  /* The team's status line on a verification request. */
  .mod-row .note-wrap { margin-top: 6px; }
  .mod-row .note-field { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
    padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--bg); color: var(--fg); }
  .mod-row .note-field:focus { outline: none; border-color: var(--accent); }
  .mod-row .note-field::placeholder { color: var(--muted); }
  .mod-row .note-meta { color: var(--muted); font-size: 11px; margin-top: 3px; }
  .mod-row button { border: none; border-radius: 8px; padding: 6px 12px; font: inherit;
                    font-size: 12px; font-weight: 600; cursor: pointer; }
  .mod-row button.suspend { background: color-mix(in srgb, #e0402f 12%, var(--bg)); color: #e0402f; }
  .mod-row button.unsuspend { background: var(--card); border: 1px solid var(--line); color: var(--fg); }
  .badge.suspended { color: #e0402f; border-color: #e0402f; }
  /* Stats tab */
  #stats { max-width: 720px; padding: 28px 22px; }
  #stats h2 { font-size: 15px; margin: 0 0 4px; }
  #stats .hint { color: var(--muted); font-size: 13px; }
  /* A row of two or three words that says which question the thing below is
     answering — the reply chart's smoothed/raw, the user list's filter. Not
     scoped to a tab: the second use of it was in another one, which is the
     moment the per-id version of this rule would have been copied (see the
     centred-column note above for how that goes). */
  .scale { display: flex; gap: 6px; margin: 8px 0 2px; }
  .scale button { font: inherit; font-size: 12px; font-weight: 600;
    padding: 4px 11px; border: 1px solid var(--line); border-radius: 9px;
    background: transparent; color: var(--muted); cursor: pointer; }
  .scale button.on { color: var(--accent); border-color: var(--accent); }
  #stats table.models { border-collapse: collapse; width: 100%; margin-top: 10px;
    font-size: 13px; }
  #stats table.models th { text-align: left; font-weight: 600; color: var(--muted);
    font-size: 12px; padding: 4px 10px 4px 0; }
  #stats table.models td { padding: 4px 10px 4px 0; border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums; }
  #stats table.models td.thin { color: var(--muted); }
  #costs h3 { font-size: 13px; font-weight: 600; margin: 22px 0 6px; }
  #costs h3:first-of-type { margin-top: 4px; }
  /* The allowlist marker and the fault rate: the two columns you actually
     read this table for, so neither is allowed to look like body text. */
  #costs .off { color: var(--muted); }
  #costs .faulty { color: #e0402f; font-variant-numeric: tabular-nums; }
  #costs table.models td.num { text-align: right; font-variant-numeric: tabular-nums;
    padding-right: 18px; }
  #costs table.models { border-collapse: collapse; width: 100%; margin-bottom: 18px;
    font-size: 14px; }
  #costs table.models th { text-align: left; font-weight: 600; color: var(--muted);
    font-size: 12px; padding: 0 12px 8px 0; }
  #costs table.models td { padding: 9px 12px 9px 0; border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums; }
  #costs td.thin { color: var(--muted); }
  /* One line, wrapping on a narrow window — an add form for five short
     fields is a row, not a stack of labelled boxes. */
  /* Empty once its fields move into the table's footer row on first render;
     it exists only as their home in the markup. */
  .costform { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .costform:empty { display: none; }
  /* The footer row: fields that fill their column, so each one sits under the
     heading it belongs to. */
  #costs table.models tfoot td { padding: 10px 12px 4px 0; vertical-align: bottom; }
  #costs table.models tfoot input { width: 100%; box-sizing: border-box; }
  #costs table.models tfoot .fieldlab { width: 100%; }
  #costs table.models tfoot td.costact { white-space: nowrap; text-align: right; }
  #costs table.models tfoot td.costact button { margin-left: 6px; }
  .costform input, #costs table.models tfoot input {
    font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 9px;
    border: 1px solid var(--line); background: var(--bg); color: inherit;
  }
  .costform #c-vendor { width: 150px; }
  .costform #c-note { flex: 1; min-width: 180px; }
  .costform #c-usd { width: 110px; }
  /* In the table those fixed widths fight the columns — the cell decides. */
  #costs table.models tfoot #c-vendor,
  #costs table.models tfoot #c-note,
  #costs table.models tfoot #c-usd { width: 100%; min-width: 0; }
  /* The two dates mean different things and a bare picker says neither —
     an invoice period got entered into them once, which silently stopped
     every subscription a month after it started. */
  .fieldlab { display: flex; flex-direction: column; gap: 2px;
    font-size: 11px; color: var(--muted); }
  .costform .editing { border-color: var(--accent); }
  .costform button {
    font: inherit; font-size: 13px; font-weight: 600; padding: 7px 15px;
    border: 1px solid var(--line); border-radius: 9px; background: transparent;
    color: inherit; cursor: pointer;
  }
  .costform button:hover { border-color: var(--accent); color: var(--accent); }
  /* Every metric card, said once. These were hand-listed per id, and every
     card added since fell off one list or another: Groups and Reply speed
     had been rendering their headline at body size for as long as they have
     existed, and the two newest ones joined them. Matching on the id suffix
     means a new card is styled by existing, which is the only version of
     this rule that stays true. (Same trap as the centred-column note above,
     and the same fix.) */
  [id$="-head"]:not(#stats-panel-head) { display: flex; align-items: baseline; gap: 12px;
    margin: 18px 0 6px; cursor: pointer; }
  /* The two headings that open nothing: a pointer over them promised a list
     that never came. */
  #out-head, #infra-head { cursor: default; }
  [id$="-current"] { font-size: 44px; font-weight: 700; letter-spacing: -1px; }
  [id$="-delta"] { font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
  [id$="-chart"] { width: 100%; height: 180px; margin-top: 10px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  /* Every delta on the page is the same chip; only the direction of good
     news differs. More people, messages, entities, groups and referrals is
     up-is-green; less cost, latency, infra and monthly loss is down-is-green.
     Two rules, listed by meaning — the previous shape was four overlapping
     selector lists in which .dials was once pasted mid-list, whose trailing
     comma silently ate the green off four chips and laid them out as flex
     containers. A rule that reads as one sentence cannot lose a member to a
     comma. */
  #stats-delta.up, #msg-delta.up, #ent-delta.up, #grp-delta.up, #ref-delta.up, #act-delta.up,
  #cost-delta.down, #lat-delta.down, #infra-delta.down, #out-delta.down {
    color: #10b981; background: color-mix(in srgb, #10b981 12%, var(--bg)); }
  #stats-delta.down, #msg-delta.down, #ent-delta.down, #grp-delta.down, #ref-delta.down, #act-delta.down,
  #cost-delta.up, #lat-delta.up, #infra-delta.up, #out-delta.up {
    color: #e0402f; background: color-mix(in srgb, #e0402f 12%, var(--bg)); }
  /* Anything with no direction yet, and anything added later. */
  [id$="-delta"].flat { color: var(--muted); background: var(--card); }
  .dials { display: flex; gap: 22px; align-items: center; margin: 10px 0 2px; flex-wrap: wrap; }
  .dials label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
  .dials b { color: var(--fg); font-variant-numeric: tabular-nums; min-width: 34px; }
  .dials input { width: 130px; accent-color: var(--accent); }
  .dials .of { font-style: normal; font-size: 12px; opacity: 0.75; white-space: nowrap; }
  #stats-foot { margin-top: 8px; }
  #stats-head, #stats-chart, #msg-chart, #ent-chart { cursor: pointer; }
  /* The who's-behind-the-number drawer. */
  #stats-panel { position: fixed; top: 49px; right: 0; bottom: 0; width: 320px;
                 background: var(--bg); border-left: 1px solid var(--line);
                 overflow-y: auto; z-index: 3;
                 box-shadow: -8px 0 24px rgba(0,0,0,0.06); }
  #stats-panel-head { display: flex; align-items: center; justify-content: space-between;
                      padding: 12px 16px; border-bottom: 1px solid var(--line);
                      position: sticky; top: 0; background: var(--bg); }
  #stats-panel-head button { border: none; background: none; color: var(--muted);
                             font: inherit; font-size: 14px; cursor: pointer; }
  #stats-panel-head button:hover { color: var(--fg); }
  .sender-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px;
                border-bottom: 1px solid var(--line); }
  .sender-row .rank { color: var(--muted); font-size: 12px; width: 18px; }
  /* Name above, handle below — a long name never wraps mid-word around an
     inline handle; both lines ellipsize instead. */
  .sender-row .ident { flex: 1; min-width: 0; }
  .sender-row .name-line { display: flex; align-items: center; gap: 6px; }
  .sender-row .name { font-weight: 600; white-space: nowrap; overflow: hidden;
                      text-overflow: ellipsis; }
  .sender-row .handle { color: var(--muted); font-size: 12px; white-space: nowrap;
                        overflow: hidden; text-overflow: ellipsis; display: block; }
  .sender-row .dot { width: 7px; height: 7px; border-radius: 99px; background: #10b981;
                     flex: none; }
  .sender-row .count { margin-left: auto; color: var(--muted); font-size: 12px;
                       white-space: nowrap; }
  .sender-row .count .circle { color: var(--accent); }
  .sender-row .count.under { display: block; margin: 3px 0 0; }
  .sender-row { cursor: pointer; }
  .sender-row:hover { background: var(--card); }
  #stats-panel h3 { font-size: 13px; margin: 16px 16px 6px; }
  #stats-panel .user-chart { display: block; width: calc(100% - 32px); margin: 0 16px;
                             height: 120px; background: var(--card); border-radius: 8px; }
  #stats-panel .legend { display: flex; gap: 14px; margin: 6px 16px 0; color: var(--muted);
                         font-size: 11px; align-items: center; }
  #stats-panel .legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block;
                           margin-right: 5px; }
  .crumb { border: none; background: none; color: var(--muted); font: inherit;
           font-size: 13px; cursor: pointer; padding: 0; }
  .crumb:hover { color: var(--fg); }
  /* A link out of a card to the page that holds the rest of it. */
  a.more { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600;
           font-size: 13px; text-decoration: none; }
  a.more:hover { text-decoration: underline; }
  /* The all-time funnel: a wide column, so 1200 drawing units are close to
     1200 pixels and a week of two people is still a visible band. The
     [id$="-chart"] card frame does not apply — this is the funnel's own
     shape, at whatever height its weeks need. */
  #cohorts { max-width: 1240px; }
  #cohorts h2 { font-size: 15px; margin: 8px 0 4px; }
  #cohorts .hint { color: var(--muted); font-size: 13px; }
  #cohorts-chart { width: 100%; height: auto; display: block; margin-top: 12px;
                   border: 0; background: none; }
  .userpage h2 { font-size: 18px; margin: 10px 0 2px; }
  nav button .badge {
    margin-left: 6px; font-size: 11px; font-weight: 700; line-height: 1;
    padding: 3px 6px; border-radius: 99px;
    background: #e0402f; color: #fff;
  }
  #people-q {
    width: 100%; max-width: 420px; margin: 10px 0 6px;
    padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--bg); color: inherit; font: inherit;
  }
  .people-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: 10px; cursor: pointer;
    background: none; color: inherit; font: inherit; text-align: left;
  }
  .people-row:hover { background: var(--card); }
  .people-row .name { font-weight: 600; }
  .people-row .handle { color: var(--muted); font-size: 13px; }
  .people-row .pill {
    font-size: 11px; padding: 2px 8px; border-radius: 99px;
    background: var(--card); color: var(--muted);
  }
  .people-row .pill.bad { color: #e0402f; }
  /* Verification is an identity mark, not an attribute: it belongs against
     the name, the way it does everywhere people already know it from. In
     front, because a mark after the handle is read as "and also verified"
     rather than as part of who this is. */
  /* A fixed slot whether or not there is a mark to put in it, so the names
     line up in one column and the badges hang in a gutter beside them. With
     the badge inline, a verified row started 21px further right than the one
     above it and the list read ragged down the left edge. */
  .people-row .markslot {
    flex: none; width: 15px; height: 15px; display: flex; align-items: center;
  }
  .people-row .check { flex: none; display: block; color: var(--accent); }
  /* The count belongs to the filter, not to a line under it: a pill that
     says how many it will show answers "is it worth clicking" before the
     click. Dimmed so the label still reads first. */
  .scale button .n {
    margin-left: 6px; opacity: 0.65; font-variant-numeric: tabular-nums;
  }
  .scale button.on .n { opacity: 0.8; }
  /* Two rows in one box: the tier and the credits read at a glance, the
     workings underneath for when you care. It was one flex line of four
     phrases, which is a sentence pretending to be a status. */
  .userpage .planstate {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 10px 0 0; font-size: 14px;
  }
  .userpage .planstate-workings {
    flex-basis: 100%; color: var(--muted); font-size: 13px; margin-top: 2px;
  }
  .userpage .planstate-tier {
    font-size: 15px; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 99px;
    background: var(--card); color: var(--muted);
  }
  .userpage .planstate-tier.on {
    background: color-mix(in srgb, var(--accent) 16%, var(--bg)); color: var(--accent);
  }
  .userpage .planstate-note { color: var(--muted); font-size: 13px; }
  .userpage .planstate-week {
    font-size: 13px; padding: 3px 10px; border-radius: 99px;
    background: var(--card); color: var(--muted);
  }
  .userpage .planstate-week.over { color: #e0402f; background: color-mix(in srgb, #e0402f 12%, var(--bg)); }
  .userpage .handle { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 8px; }
  /* The same quiet pill the Users list uses for tester; its own name here
     because .pill is the map's hover tooltip. */
  .userpage .tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
                   background: var(--card); color: var(--muted); margin-left: 8px;
                   vertical-align: 3px; cursor: default; }
  .userpage .legend { display: flex; gap: 14px; margin: 8px 0 0; color: var(--muted);
                       font-size: 12px; align-items: center; }
  .userpage .legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block;
                         margin-right: 5px; }

  /* The chevron on a model row, and the provider rows it unfolds. */
  .models .chev { border: 0; background: none; cursor: pointer; font: inherit; color: var(--muted); padding: 0 6px 0 0; }
  .models .chev:hover { color: var(--fg); }
  .models table.sub { margin: 2px 0 6px 18px; font-size: 12px; }
  .models table.sub th { font-weight: 500; }