/* 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: #fffefd; --side: #f6f5f4; --surface: #fffefd; --subtle: #fafafa;
  --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);
  --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, #27241D cards, no borders; every other step derived from those two */
  color-scheme: dark;
  --bg: #1c1713; --side: #14100d; --surface: #27241d; --subtle: #2d2a22;
  --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: #322e26;
  --line: transparent; --line-soft: #312d26; --line-strong: transparent;
  --control: #36322a; --track: #3d382f; --pop: #322e26;
  --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 8px 24px rgba(0, 0, 0, .7);
  --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; }
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 { 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); } .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 { 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-bottom .side-label { margin-bottom: 6px; }
/* 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: 36px; }
.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); }
.menu-sep { height: 1px; margin: 4px 0; background: var(--line-soft); 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; }
.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; }
.legend i.dash { width: 12px; height: 0; border-top: 1.5px dashed var(--text); border-radius: 0; opacity: .6; vertical-align: 3px; }

/* 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)); }

/* use cases: team mix bars and chips */
.mix { display: flex; gap: 2px; height: 6px; margin-bottom: 6px; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }

/* insights: one card per finding */
.insights { display: grid; gap: 8px; }
.insight { padding: 16px; }
.insight-h { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.insight .route { display: flex; align-items: center; gap: 8px; }
.insight h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.insight p { margin: 6px 0 0; max-width: 760px; font-size: 13px; color: var(--muted); }
.impact { text-align: right; white-space: nowrap; }
.impact b { display: block; font-size: 20px; line-height: 28px; font-weight: 500; }
.impact small { font-size: 12px; color: var(--faint); }
.fix { margin-top: 12px; font-size: 13px; }
.fix span { display: block; margin-bottom: 2px; font-size: 12px; color: var(--faint); }
.evidence { margin-top: 12px; }
.evidence > div { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0;
  font-size: 13px; box-shadow: inset 0 var(--hair) 0 var(--line-soft); }
.evidence b { font-weight: 500; }

/* 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; }

/* 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: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-cell span { color: var(--faint); font-size: 12px; }

/* 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; gap: 16px; padding: 14px 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 .why { margin-top: 6px; font-size: 13px; color: var(--muted); }
.turn .cost { text-align: right; white-space: nowrap; font-size: 13px; font-weight: 500; }
.turn .cost small, .turn .cost a { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 400; }
.turn details { margin-top: 8px; }
.turn summary { cursor: pointer; color: var(--faint); font-size: 12px; list-style: none; }
.turn summary::-webkit-details-marker { display: none; }
pre { margin: 8px 0 0; padding: 12px; background: var(--subtle); border-radius: 8px; box-shadow: 0 0 0 var(--hair) var(--line); white-space: pre-wrap;
  word-break: break-word; font: 12px/18px var(--mono); color: var(--text-2); max-height: 360px; overflow: auto; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin-top: 12px; }
.compare h3 { margin: 0; font-size: 12px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* 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: var(--control); box-shadow: 0 0 0 var(--hair) var(--line-strong), var(--shadow-sm); 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; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--pill); }
.seg button { height: 24px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 500; }
.seg 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, .06); }
.input { height: 32px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--control); 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); }
.split { display: flex; gap: 2px; height: 4px; overflow: hidden; margin-bottom: 4px; max-width: 200px; }
.split .better { background: var(--green); } .split .same { background: var(--track); } .split .worse { background: var(--red); }

/* chart: Mintlify mono axes and tooltip */
.chart { position: relative; }
.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; 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 .form { margin-top: 16px; } .gate .input { flex: 1; }

/* 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 { padding: 0 4px; }
  .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); }
  .insight-h { flex-direction: column; } .impact { text-align: left; }
  .evidence > div { grid-template-columns: minmax(0, 1fr) auto; } .evidence > div > .faint { grid-column: 1 / -1; grid-row: 2; }
  .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; }
  .hide-sm { display: none; }
}