/* Built from three reference dashboards, values read from their live CSS and screens:
   Gumloop (sidebar, page heads, share tables, segmented controls, buttons),
   Mintlify (KPI cards, chart cards, mono axes, gray scale, status colors),
   Browserbase (top bar, section heads, stat strips, tables, metadata strips, status pills).
   Type: ABC Diatype (variable), Geist Mono for numbers and axes.
   Light is the default; dark is opt-in from the toggle, remembered per device (data-theme on <html>). */
@font-face { font-family: "ABC Diatype"; src: url(fonts/ABCDiatypeVariable.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #fffdfb; --side: #f6f4f2; --surface: #fffdfb; --subtle: #faf8f6;
  --side-text: #4d4d4d; --side-faint: #929292; --side-active: #e9e7e8; --side-hover: rgba(0, 0, 0, .035);
  --hover: rgba(0, 0, 0, .03); --active: rgba(0, 0, 0, .05); --pill: #f3f3f5;
  --line: #dfdfe6; --line-soft: #ededf1; --line-strong: #d6d6de;   /* a half-pixel edge reads lighter, so a step darker */
  --control: #ffffff; --track: #dcdce3; --pop: #ffffff;   /* button and input fills, bar tracks, popovers */
  --text: #16171a; --text-2: #3f3f46; --muted: #5f5f68; --faint: #8e8e98;
  --green: #1e7951; --green-bg: #e9f6ee; --green-line: #c9ead6;
  --red: #c62a2f; --red-bg: #fdeeee; --red-line: #f6caca;
  --amber: #b64600; --amber-bg: #fff4e6; --amber-line: #fbdcb5;
  --blue: #0c6bbf; --blue-bg: #e9f5ff; --blue-line: #c2e5ff; --blue-solid: #0190ff;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
  --ghost: #e5e4e2;   /* the without-Sovereign bars: quieter than any model's color */
  --hair: .5px;   /* every edge in the app: drawn as a shadow so it stays a true half pixel */
  --shadow-pop: 0 0 0 .5px rgba(0, 0, 0, .08), 0 8px 24px rgba(0, 0, 0, .08);
  /* one hue per model, dark to light within each provider, so stacks read by provider at a glance */
  --m-fable: #9a3f1f; --m-opus: #c8643f; --m-sonnet: #e08d66; --m-haiku: #edb596;
  --m-astra: #0b6b55; --m-sol: #1f9f80; --m-luna: #74cdb4;
  --f-software: #5865d9; --f-writing: #d9822b; --f-data: #2f9e8f; --f-knowledge: #a764cf; --f-planning: #c9a227; --f-other: #9a9aa3;   /* use-case families */
  --sans: "ABC Diatype", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="dark"] {   /* warm dark: #1C1713 page, #24201E cards, no borders; every other step derived from those two */
  color-scheme: dark;
  --bg: #1c1713; --side: #14100d; --surface: #24201e; --subtle: #2a2624;
  --side-text: #bfb9b1; --side-faint: #78716c; --side-active: rgba(255, 255, 255, .07); --side-hover: rgba(255, 255, 255, .04);
  --hover: rgba(255, 255, 255, .03); --active: rgba(255, 255, 255, .06); --pill: #2f2b29;
  --line: transparent; --line-soft: #2e2927; --line-strong: transparent;
  --ghost: #37312e;
  --control: #332f2d; --track: #3a3430; --pop: #2f2b29;
  --text: #eeeae4; --text-2: #d6d1c9; --muted: #a8a29e; --faint: #78716c;
  --green: #3dd68c; --green-bg: rgba(61, 214, 140, .12); --green-line: transparent;
  --red: #ff6b6b; --red-bg: rgba(255, 107, 107, .12); --red-line: transparent;
  --amber: #ffb224; --amber-bg: rgba(255, 178, 36, .12); --amber-line: transparent;
  --blue: #52a8ff; --blue-bg: rgba(82, 168, 255, .12); --blue-line: transparent; --blue-solid: #3b9eff;
  --shadow-sm: 0 0 #0000; --shadow-pop: 0 0 0 .5px rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .28);   /* a soft lift, not a black halo */
  --m-fable: #b4532f; --m-opus: #e0835e; --m-sonnet: #efa985; --m-haiku: #f6d0bc;
  --m-astra: #127a63; --m-sol: #47c3a2; --m-luna: #a5e4d1;
  --f-software: #7c86ec; --f-writing: #e9a05a; --f-data: #52bfae; --f-knowledge: #c28be0; --f-planning: #dcbf55; --f-other: #8a857e;
}

* { box-sizing: border-box; }
* { scrollbar-width: none; }   /* everything scrolls; no scrollbars on show */
*::-webkit-scrollbar { display: none; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/20px var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { flex: none; }
.num { font-variant-numeric: proportional-nums; }   /* Diatype's tabular period is extra wide */
.mono { font-family: var(--mono); font-size: 12px; }
.pos { color: var(--green); } .neg { color: var(--red); } .upg { color: var(--blue); } .muted { color: var(--muted); } .faint { color: var(--faint); }

/* shell: sidebar on the gray app background (a 214px sidebar, 28px rows, 14px text); the content is a
   full-height panel inset 8px (m-2, ml-0: it meets the sidebar) with 12px corners (rounded-xl) that scrolls on its own */
.app { display: grid; grid-template-columns: 214px minmax(0, 1fr); height: 100vh; height: 100dvh; background: var(--side); }
.side { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.org { display: flex; flex: none; align-items: center; gap: 10px; height: 44px; margin-top: 6px; padding: 0 12px 0 10px; font-size: 14px; font-weight: 500; }
.brand-mark { display: block; width: 24px; height: 24px; flex: none; background: var(--text);   /* the logo as a mask: it takes the text color */
  -webkit-mask: url(logo.png) center / contain no-repeat; mask: url(logo.png) center / contain no-repeat; }
.org-name { display: flex; flex-direction: column; line-height: 17px; }
.org-name small { font-size: 10.5px; line-height: 13px; font-weight: 400; color: var(--side-faint); opacity: .75; }   /* the byline, barely there */
.side-body { padding-top: 12px; }
.side-label { padding: 0 16px; font-size: 12px; line-height: 16px; color: var(--side-faint); }
.nav { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }
.nav a { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 5px; border-radius: 6px; color: var(--side-text); font-size: 14px; }
.nav a svg { width: 16px; height: 16px; }
.nav a:hover { background: var(--side-hover); color: var(--text); }
.nav a.on { background: var(--side-active); color: var(--text); }
.side-bottom { margin-top: auto; padding-top: 16px; }
.side-label { margin-bottom: 6px; }
.side-body .side-label { margin-top: 20px; }   /* group heads: Gumloop spacing */
/* profile: the footer button opens a small menu (appearance, sign out), Browserbase/Gumloop menu style */
.side-foot { padding: 6px 8px 8px; }
.profile { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 6px 0 5px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.profile .who { flex: 1; }
.profile svg { width: 16px; height: 16px; color: var(--side-faint); }
.profile:hover, .profile[aria-expanded="true"] { background: var(--side-hover); }
.menu { position: fixed; z-index: 50; width: 224px; padding: 4px; border-radius: 10px; background: var(--pop);
  box-shadow: 0 0 0 var(--hair) var(--line), var(--shadow-pop); }
.menu[hidden] { display: none; }
.menu-head { padding: 6px 8px 4px; font-size: 12px; line-height: 16px; color: var(--faint); }
.menu-row, .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0 8px; font-size: 13px; color: var(--text); }
.menu-row { height: 40px; padding-right: 10px; }
.menu-item { height: 32px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; }
.menu-item:hover { background: var(--active); }
.menu-row svg, .menu-item svg { width: 16px; height: 16px; color: var(--muted); }
.switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--active); }
.switch button { display: grid; place-items: center; width: 28px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: none;
  color: var(--faint); cursor: pointer; transition: background .12s, color .12s; }
.switch button:hover { color: var(--text); }
.switch button.on { background: var(--control); color: var(--text); box-shadow: 0 0 0 var(--hair) var(--line-strong), 0 1px 2px rgba(0, 0, 0, .08); }
:root[data-theme="dark"] .switch button.on { background: rgba(255, 255, 255, .1); box-shadow: none; }
.menu .switch svg { width: 14px; height: 14px; color: currentColor; }
.menu-sep { height: 1px; margin: 4px 0; background: var(--track); transform: scaleY(.5); }
.avatar { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--track);
  color: var(--muted); font-size: 10px; font-weight: 600; }
.cols { min-width: 0; min-height: 0; margin: 8px 8px 8px 0; overflow-y: auto; background: var(--bg); border-radius: 12px; }
/* the public demo: a bar that says so, no account or sign-out, and a notice when a change is tried */
.demo-bar { display: none; position: sticky; top: 0; z-index: 10; align-items: center; gap: 12px; height: 40px; padding: 0 20px; font-size: 13px;
  color: var(--muted); background: var(--bg); box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line-soft); }
.demo .demo-bar { display: flex; }
.demo-bar b { padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 20px; color: var(--blue); background: var(--blue-bg); }
.demo-bar span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo-bar a { font-weight: 500; color: var(--text); white-space: nowrap; }
.demo #account, .demo #signout, .demo .menu-sep { display: none; }
.notice { position: fixed; left: 50%; bottom: 24px; z-index: 80; padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg);
  font-size: 13px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.notice.on { opacity: 1; transform: translate(-50%, 0); }
.spacer { flex: 1; }
main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 40px 80px; }

/* page and section heads: Gumloop titles, Browserbase sections */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sub { margin: 2px 0 0; color: var(--muted); }
.sec { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 32px 0 12px; }
.sec h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.sec .meta { margin-left: 8px; font-size: 13px; font-weight: 400; color: var(--faint); }
.link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; }
.link svg { width: 14px; height: 14px; }

/* cards: Mintlify */
.card { background: var(--surface); border-radius: 12px; box-shadow: 0 0 0 var(--hair) var(--line); }
.card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 16px 16px 0; flex-wrap: wrap; }
.card-h h2 { margin: 0; font-size: 13px; line-height: 20px; font-weight: 500; }
.card-h p { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted); }
.card-b { padding: 16px; }
.grid { display: grid; gap: 8px; }
.two { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.kpi { display: flex; flex-direction: column; min-height: 116px; padding: 12px; background: var(--surface); border-radius: 10px;
  box-shadow: 0 0 0 var(--hair) var(--line); }
.kpi .label { font-size: 13px; color: var(--muted); }
.kpi .value { margin-top: 2px; font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: -.02em; }
.kpi .foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; font-size: 12px; line-height: 16px;
  color: var(--faint); }   /* the delta, its figure and the words share one centre line */
.delta { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.delta svg { width: 10px; height: 10px; }
.delta.up { color: var(--green); } .delta.down { color: var(--red); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 0; margin-right: 6px; vertical-align: 0; }

/* stat strip: Browserbase analytics */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-radius: 12px;
  box-shadow: 0 0 0 var(--hair) var(--line); }
.strip > div { padding: 14px 16px; text-align: center; box-shadow: inset var(--hair) 0 0 var(--line); }
.strip > div:first-child { box-shadow: none; }
.strip .label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.strip .value { margin-top: 4px; font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -.01em; }
.strip .foot { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--faint); }

.strip.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* metadata strip: Browserbase session header */
.facts { display: flex; flex-wrap: wrap; background: var(--surface); border-radius: 12px; box-shadow: 0 0 0 var(--hair) var(--line); }
.facts > div { padding: 12px 16px; box-shadow: inset var(--hair) 0 0 var(--line); min-width: 120px; }
.facts > div:first-child { box-shadow: none; }
.facts .label { font-size: 12px; line-height: 16px; color: var(--faint); }
.facts .value { margin-top: 4px; font-size: 13px; font-weight: 500; }
.facts .value small { margin-left: 6px; font-size: inherit; font-weight: 400; color: var(--faint); }

/* tables: Browserbase rows, Mintlify header band */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-weight: 400; font-size: 12px; line-height: 16px; color: var(--faint); padding: 10px 16px; background: var(--subtle);
  box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line); white-space: nowrap; }
thead tr:first-child th:first-child { border-top-left-radius: 12px; } thead tr:first-child th:last-child { border-top-right-radius: 12px; }
td { padding: 12px 16px; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { box-shadow: none; }
tbody tr.link-row { cursor: pointer; }
tbody tr.link-row:hover td { background: var(--hover); }
th.r, td.r { text-align: right; }
td small { display: block; color: var(--faint); font-size: 12px; line-height: 16px; }
.title-cell { max-width: 460px; }
.title-cell b { display: block; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-cell span { color: var(--faint); font-size: 12px; }
.one-line td { white-space: nowrap; }   /* a table of single-line rows: notes sit beside their value */
.one-line td small { display: inline; margin-left: 6px; font-size: inherit; line-height: inherit; }
.one-line .title-cell { width: 100%; max-width: 0; }   /* the title takes the room that's left and ellipsizes */
.one-line .meter { display: inline-block; width: 96px; margin: 0; vertical-align: middle; }
.title-cell .dot { margin-right: 8px; vertical-align: 0; }

/* share list: Gumloop "chats by source", each row filled to its share */
.share { padding: 8px 8px 10px; }
.share .hd, .share .row { display: grid; grid-template-columns: minmax(0, 1fr) 52px 76px; align-items: center; gap: 8px; padding: 0 8px; }
.share .hd { height: 28px; font-size: 12px; color: var(--faint); }
.share .row { position: relative; height: 36px; font-size: 13px; }
.share .row > * { position: relative; min-width: 0; }
.share .row .fill { position: absolute; inset: 2px auto 2px 0; background: var(--active); }   /* square inside rounded cards */
.share .r { text-align: right; }

/* pills: Browserbase/Gumloop status */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 12px; line-height: 16px;
  font-weight: 500; white-space: nowrap; background: var(--pill); color: var(--muted); }
.badge.green { color: var(--green); background: var(--green-bg); box-shadow: 0 0 0 var(--hair) var(--green-line); }
.badge.red { color: var(--red); background: var(--red-bg); box-shadow: 0 0 0 var(--hair) var(--red-line); }
.badge.amber { color: var(--amber); background: var(--amber-bg); box-shadow: 0 0 0 var(--hair) var(--amber-line); }
.badge.blue { color: var(--blue); background: var(--blue-bg); box-shadow: 0 0 0 var(--hair) var(--blue-line); }
.dot { display: inline-block; width: 8px; height: 8px; flex: none; }
.model { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.arrow { color: var(--faint); }

/* timeline: Browserbase session log */
.turn { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 16px; box-shadow: inset 0 var(--hair) 0 var(--line-soft); }
.turn:first-child { box-shadow: none; }
.turn .t { font-family: var(--mono); font-size: 12px; line-height: 20px; color: var(--faint); }
.turn .route { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.turn .cost { display: flex; align-items: center; gap: 12px; white-space: nowrap; font-size: 13px; font-weight: 500; }
.flag { min-width: 64px; height: 22px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--faint); font-size: 12px;
  font-weight: 500; text-align: right; cursor: pointer; }   /* fixed width: the cost doesn't move when the label changes */
.flag:hover { color: var(--text); }
.flag.on { text-align: center; color: var(--amber); background: var(--amber-bg); box-shadow: 0 0 0 var(--hair) var(--amber-line); }

/* controls: Gumloop buttons and segmented control, Mintlify inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px;
  border: 0; background: transparent; box-shadow: 0 0 0 var(--hair) var(--line-strong); cursor: pointer; font-size: 13px; font-weight: 500; }
.btn:hover { background: var(--subtle); }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary:hover { opacity: .9; }
.btn.small { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
:root[data-theme="dark"] .light-only, :root:not([data-theme="dark"]) .dark-only { display: none; }
.input { height: 32px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; min-width: 0; font-size: 13px;
  box-shadow: 0 0 0 var(--hair) var(--line-strong); }
.input:focus { outline: 0; box-shadow: 0 0 0 1px var(--faint); }
.form { display: flex; gap: 8px; flex-wrap: wrap; }
.secret { font-family: var(--mono); font-size: 12px; padding: 12px; border-radius: 8px; background: var(--subtle); box-shadow: 0 0 0 var(--hair) var(--line-strong); word-break: break-all; }
.empty { display: grid; gap: 2px; padding: 48px 16px; text-align: center; }
.empty b { font-size: 14px; font-weight: 500; color: var(--text-2); } .empty span { font-size: 13px; color: var(--faint); }
.meter { height: 4px; background: var(--active); overflow: hidden; min-width: 96px; margin-bottom: 4px; }
.meter span { display: block; height: 100%; background: var(--blue-solid); }
.meter.over span { background: var(--red); }

/* chart: Mintlify mono axes and tooltip */
.chart { position: relative; flex: 1; min-height: 240px; }
.card:has(> .card-b > .chart) { display: flex; flex-direction: column; }   /* a chart card stretches to its row; the chart fills it */
.card:has(> .card-b > .chart) > .card-b { display: flex; flex: 1; flex-direction: column; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--line-soft); }
.chart text { fill: var(--faint); font: 11px var(--mono); }
.tip { position: absolute; pointer-events: none; min-width: 168px; padding: 8px 10px; border-radius: 8px; background: var(--pop);
  box-shadow: var(--shadow-pop); font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .12s; z-index: 5; }
.tip .row { display: flex; justify-content: space-between; gap: 16px; }
.tip .row + .row { margin-top: 4px; }

/* sign in */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--side); }
.gate .card { width: min(380px, 100%); padding: 24px; box-shadow: 0 0 0 var(--hair) var(--line), var(--shadow-sm); }
.gate h1 { margin-top: 16px; font-size: 20px; line-height: 28px; }
.gate .stack { display: grid; gap: 8px; margin-top: 16px; }
.gate-err { min-height: 16px; margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--red); }

/* phones */
@media (max-width: 980px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .app { display: block; height: auto; min-height: 100vh; }
  .side { position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; gap: 4px; padding-right: 4px; overflow-x: auto;
    scrollbar-width: none; background: var(--side); }
  .side::-webkit-scrollbar { display: none; }
  .side-body, .side-bottom, .nav { display: contents; }
  .side-label, .nav a svg, .who, .profile > svg, .org-name small { display: none; }
  .side-foot { position: sticky; right: 0; margin-left: auto; padding: 0 4px 0 8px; background: var(--side); }   /* the profile stays in view */
  .profile { width: auto; height: 32px; padding: 0 6px; }
  .org { margin-top: 0; }
  .nav a { white-space: nowrap; }
  .cols { overflow: visible; }
  main { padding: 20px 16px 60px; }
  h1 { font-size: 20px; line-height: 28px; }
  .kpi { min-height: 0; } .kpi .value { font-size: 24px; line-height: 32px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip > div { box-shadow: inset 0 var(--hair) 0 var(--line); } .strip > div:nth-child(1) { box-shadow: none; }
  .strip > div:nth-child(even) { box-shadow: inset var(--hair) 0 0 var(--line), inset 0 var(--hair) 0 var(--line); }
  .strip > div:nth-child(2) { box-shadow: inset var(--hair) 0 0 var(--line); }
  .facts > div { flex: 1 1 45%; box-shadow: inset 0 var(--hair) 0 var(--line); } .facts > div:nth-child(-n+2) { box-shadow: none; }
  .turn { grid-template-columns: minmax(0, 1fr) auto; }
  .turn .t { grid-column: 1 / -1; }
  td, th { padding-left: 12px; padding-right: 12px; }
  .title-cell { max-width: 52vw; }
  .one-line .title-cell { width: auto; max-width: none; }   /* phones: the table scrolls in its card instead of crushing the title */
  .hide-sm { display: none; }
}