styles.css

/* =====================================================================
   Renesas AI Models — restyle
   Three switchable directions on data-theme:
     a = Brand Light   (true to Renesas brand: flat, squared, hairlines)
     b = Frosted Light (light branded backdrop + liquid-glass surfaces)
     c = Midnight Glass (refined dark, premium frosted glass)
   All share Renesas Blue #2A289D and the brand condensed display type.
   Drop-in: works with the existing app.js unchanged.
   ===================================================================== */

/* ---------- Brand constants (all themes) ---------- */
:root {
  --brand:        #2A289D;   /* Renesas Blue — corporate */
  --brand-press:  #1F1D78;
  --brand-2:      #43ABE2;   /* secondary sky blue */
  --font-display: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Helvetica Neue", Arial, "Liberation Sans", sans-serif;

  /* badge accent colors (brand secondary palette) */
  --bc-onnx:   #306683;
  --bc-gguf:   #609A3B;
  --bc-cpu:    #706F6F;
  --bc-npu:    #EB6209;
  --bc-dsp:    #883D90;
  --bc-hybrid: #C77A17;
  --bc-modal:  var(--brand);
  --bc-art:    #706F6F;
  --bc-task:   #4C8C7D;
  --bc-soon:   #C9A24B;

  /* accuracy delta vs FP32 reference */
  --acc-down:  #B84A2E;   /* quantization loss */
  --acc-up:    #4E8C5A;   /* gain over reference */
}

/* =====================================================================
   Frosted Light — the single theme: liquid glass over a living,
   branded backdrop. Renesas Blue #2A289D + brand condensed display.
   ===================================================================== */
:root {
  --bg: linear-gradient(165deg, #EEF1F8 0%, #E4E9F4 48%, #EAE6F2 100%);
  --bg-dots: radial-gradient(rgba(42,40,157,0.10) 1.4px, transparent 1.6px);
  --text: #2C2B45;
  --text-dim: #5C5B72;
  --text-mute: #908FA3;

  --radius: 16px;
  --radius-sm: 12px;
  --card-radius: 16px;
  --card-blur: blur(20px) saturate(155%);

  --panel-bg: rgba(255,255,255,0.55);
  --panel-border: rgba(255,255,255,0.75);
  --panel-shadow: 0 18px 44px rgba(42,40,157,0.10), inset 0 1px 0 rgba(255,255,255,0.65);

  --card-bg: rgba(255,255,255,0.58);
  --card-border: rgba(255,255,255,0.8);
  --card-shadow: 0 12px 32px rgba(42,40,157,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
  --card-rule: 0px;
  --card-hover-bg: rgba(255,255,255,0.74);
  --card-hover-border: rgba(42,40,157,0.45);
  --card-hover-shadow: 0 20px 46px rgba(42,40,157,0.18), inset 0 1px 0 rgba(255,255,255,0.8);

  --surface: rgba(255,255,255,0.5);
  --surface-strong: rgba(255,255,255,0.7);
  --surface-border: rgba(255,255,255,0.85);

  --header-bg: rgba(255,255,255,0.6);
  --header-border: rgba(255,255,255,0.7);
  --header-shadow: 0 8px 30px rgba(42,40,157,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
  --header-text: #2C2B45;
  --header-blur: blur(22px) saturate(160%);

  --input-bg: rgba(255,255,255,0.7);
  --input-border: rgba(255,255,255,0.9);
  --chip-bg: rgba(255,255,255,0.65);
  --chip-border: rgba(255,255,255,0.85);

  --brand-tint: rgba(42,40,157,0.12);
  --brand-ring: rgba(42,40,157,0.22);
  --hairline: rgba(42,40,157,0.12);
  --canvas-bg: rgba(255,255,255,0.92);
  --canvas-border: rgba(255,255,255,0.8);
  --table-head-bg: var(--brand);
  --table-head-text: #FFFFFF;
  --code-bg: rgba(42,40,157,0.06);
  --scroll-thumb: rgba(42,40,157,0.28);
  --link-bg: rgba(42,40,157,0.12);
  --link-text: var(--brand);
  --link-border: rgba(42,40,157,0.3);
  --modal-backdrop: rgba(38,40,80,0.4);

  --brand-active: var(--brand);
}

/* =====================================================================
   Base
   ===================================================================== */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-body);
  background: var(--bg);
  background-attachment: fixed;
}
/* ---------- Dynamic, living background: brand network mesh + soft color blooms ---------- */
.bg-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-fx .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.42; will-change: transform; }
.bg-fx .b1 { width: 46vw; height: 46vw; left: -12vw; top: -16vh; background: radial-gradient(circle, rgba(67,171,226,0.70), transparent 68%); animation: fx1 30s ease-in-out infinite; }
.bg-fx .b2 { width: 42vw; height: 42vw; right: -10vw; bottom: -18vh; background: radial-gradient(circle, rgba(150,104,214,0.62), transparent 68%); animation: fx2 36s ease-in-out infinite; }
@keyframes fx1 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(14vw,10vh) scale(1.15); } }
@keyframes fx2 { 0%, 100% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-12vw,12vh) scale(0.92); } }
@media (prefers-reduced-motion: reduce) { .bg-fx .blob { animation: none !important; } }
.topbar, .content { position: relative; z-index: 1; }

/* =====================================================================
   Topbar
   ===================================================================== */
.topbar {
  flex: 0 0 auto;
  z-index: 50;
  border-bottom: 1px solid var(--header-border);
  background: var(--header-bg);
  backdrop-filter: var(--header-blur);
  -webkit-backdrop-filter: var(--header-blur);
  box-shadow: var(--header-shadow);
}
:root[data-theme="a"] .topbar { border-top: 3px solid var(--brand); }
.topbar-inner {
  width: 100%;
  padding: 11px 22px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
}
.brand:hover { opacity: 0.85; }
.brand:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.brand-icon { height: 22px; width: auto; max-width: 168px; object-fit: contain; display: block; }
.brand-divider { width: 1px; height: 26px; background: var(--hairline); flex: 0 0 auto; }
.brand-title {
  color: var(--header-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.brand-subtitle { color: var(--text-dim); font-size: 0.74rem; margin-top: 3px; letter-spacing: 0.04em; }

.tabs { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.nav-item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.nav-item:hover { color: var(--text); background: var(--brand-tint); }
.nav-item.active {
  background: var(--brand-active);
  color: #fff;
  box-shadow: 0 4px 14px rgba(42,40,157,0.32);
}

/* Burger (mobile nav trigger) — hidden until the phone breakpoint */
.nav-burger {
  display: none;
  appearance: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 44px; height: 44px; flex: 0 0 auto; margin-left: auto; cursor: pointer;
  border: 1px solid var(--chip-border); background: var(--chip-bg);
  border-radius: var(--radius-sm);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  transition: border-color 140ms ease, background 140ms ease;
}
.nav-burger:hover { border-color: var(--brand-ring); }
.nav-burger span { display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 180ms ease, opacity 150ms ease; }
.nav-burger.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Theme switch */
.theme-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--chip-border);
  background: var(--surface);
  flex: 0 0 auto;
}
.theme-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: calc(var(--radius-sm) - 2px);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 140ms ease, color 140ms ease;
}
.theme-btn:hover { color: var(--text); }
.theme-btn.active { background: var(--brand-active); color: #fff; box-shadow: 0 2px 8px rgba(42,40,157,0.28); }
.theme-btn .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.12); }
.sw-a { background: #FFFFFF; }
.sw-b { background: linear-gradient(135deg, #E7ECF8, #DCD9EF); }
.sw-c { background: linear-gradient(135deg, #1A1C36, #3937C4); border-color: rgba(255,255,255,0.2); }

/* =====================================================================
   Content / sections
   ===================================================================== */
.content { flex: 1 1 auto; min-height: 0; width: 100%; padding: 8px; overflow: hidden; }
.section {
  display: none;
  height: 100%;
  min-height: 0;
  color: var(--text);
  border-radius: var(--radius);
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}
.section.visible { display: flex; flex-direction: column; }
#sec-overview.visible { overflow: auto; padding: 9px; }
/* Overview content sits directly on the page (no panel frame). */
#sec-overview { border: none; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Model detail page: tall content (config bar, KPIs, tabs, runs table,
   download instructions) needs its own scroll, same as Overview. */
#sec-model.visible { overflow: auto; padding: 9px; }
#sec-model { border: none; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

.section-head { margin-bottom: 18px; }
.section-title {
  margin: 0 0 4px; border: none; padding: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--text);
}

/* =====================================================================
   Typography
   ===================================================================== */
h1, h2, h3 { color: var(--text); margin-top: 0.2rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--hairline); }
h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand); }
:root[data-theme="c"] h3 { color: #B9C0FF; }
pre, code { font-family: "Consolas", ui-monospace, SFMono-Regular, Menlo, monospace; }
pre { background: var(--code-bg); color: var(--text); padding: 11px 13px; border-radius: var(--radius-sm); overflow-x: auto; border: 1px solid var(--hairline); margin: 0; font-size: 0.86rem; }
code { background: var(--code-bg); color: var(--text); padding: 0.1rem 0.34rem; border-radius: 4px; font-size: 0.88em; }

.note { background: var(--surface); border-left: 3px solid var(--brand); padding: 11px 13px; margin: 10px 0 12px; border-radius: var(--radius-sm); color: var(--text); }
.note.note-warn { background: color-mix(in srgb, var(--bc-npu) 12%, transparent); border-left-color: var(--bc-npu); }
.subtle { color: var(--text-dim); margin-top: 0.4rem; }
.tight { margin-top: 0.35rem; }
.no-border { border-bottom: none !important; padding-bottom: 0 !important; }

.link-btn { appearance: none; background: none; border: none; cursor: pointer; color: var(--brand); font-weight: 700; font-size: 0.82rem; padding: 2px 4px; letter-spacing: 0.02em; }
:root[data-theme="c"] .link-btn { color: #B9C0FF; }
.link-btn:hover { text-decoration: underline; }

/* =====================================================================
   Card base (big panels) + glass surfaces
   ===================================================================== */
.card, .stat-tile, .model-card, .metric-card, .constellation {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
}
.card { border-radius: var(--card-radius); padding: 8px; min-width: 0; position: relative; }
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: var(--card-rule);
  background: var(--brand);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.card-head { margin-bottom: 14px; }
.card-head-title {
  margin: 0 0 4px; border: none; padding: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.28rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--text);
}

/* =====================================================================
   Form controls
   ===================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-size: 0.72rem; color: var(--text-dim); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px;
  border: 1px solid var(--chip-border); background: var(--chip-bg);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  border-radius: var(--radius-sm); cursor: pointer; user-select: none; font-size: 0.88rem; color: var(--text);
  transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.pill:hover { border-color: var(--brand-ring); }
.pill.active { background: var(--brand-tint); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); color: var(--text); font-weight: 600; }
.pill input { accent-color: var(--brand); }

.filter-input, .filter-select {
  height: 40px; padding: 0 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--input-border); background: var(--input-bg);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  color: var(--text); outline: none; font-size: 0.92rem; width: 100%; font-family: var(--font-body);
}
.filter-input::placeholder { color: var(--text-mute); }
select.filter-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.filter-select option { background: var(--input-bg); color: var(--text); }
:root[data-theme="c"] .filter-select option { background: #1B1D33; color: var(--text); }
.filter-input:focus, .filter-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.filter-input.compact, .filter-select.compact { height: 36px; font-size: 0.88rem; }
.field.compact { gap: 5px; }
.field.compact .label { font-size: 0.7rem; }

/* =====================================================================
   OVERVIEW
   ===================================================================== */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.stat-tile { border-radius: var(--card-radius); padding: 8px 9px 8px 10px; position: relative; border-left: 3px solid var(--brand); }
.stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text); line-height: 1; }
.stat-label { margin-top: 6px; font-size: 0.78rem; color: var(--text-dim); font-weight: 600; letter-spacing: 0.03em; }

/* Carousel */
.carousel-section { margin-bottom: 20px; }
.carousel-section.featured {
  padding: 8px 10px 4px; margin-bottom: 14px; border-radius: var(--card-radius);
  background: var(--card-bg); border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  position: relative;
}
:root[data-theme="a"] .carousel-section.featured { border-top: 3px solid var(--brand); }
.carousel-section.featured .carousel-title { font-size: 1.42rem; }
.carousel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.carousel-title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; margin: 0; border: none; padding: 0; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
.carousel-actions { display: flex; align-items: center; gap: 8px; }
.carousel-sub { color: var(--text-dim); font-size: 0.8rem; font-weight: 600; margin-right: 4px; }
.carousel-nav {
  width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center;
  cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--text);
  border: 1px solid var(--chip-border); background: var(--chip-bg);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
}
.carousel-nav:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.carousel-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 4px 2px 14px; cursor: grab; }
.carousel-track.dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; user-select: none; }
.carousel-track.dragging .model-card { pointer-events: none; }
.rc-card { flex: 0 0 252px; scroll-snap-align: start; gap: 10px; }
/* Overview carousel hero — shorter than the catalog banner so these cards
   stay tight, but tall enough to read as a real illustration rather than a
   sliver; ".mc-banner.mc-banner-sm" (two classes) outranks the plain
   ".mc-banner" mobile-breakpoint rule below regardless of source order.
   Pairs with the assets/cards/compact/ illustration set (see
   cardIllustrationSrc), redrawn zoomed-out around the same center so their
   focal details survive this crop instead of bleeding off the edge. */
.mc-banner.mc-banner-sm { height: 70px; }
/* "Added"/"Updated" pill sits over the hero image instead of its own row,
   so the compact card doesn't grow a whole extra line for it. */
.rc-meta {
  position: absolute; top: 7px; left: 7px; z-index: 1;
  font-size: 0.68rem; font-weight: 700; color: rgba(255,255,255,0.9);
  display: flex; align-items: center; gap: 5px; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 999px; background: rgba(14,16,38,0.6);
}
.rc-meta.is-new { color: #8FD3F4; }
:root[data-theme="c"] .rc-meta.is-new { color: #B9C0FF; }
.rc-stat { font-size: 0.84rem; color: var(--text-dim); }
.rc-stat b { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); font-weight: 700; }
.rc-stat.empty { color: var(--text-mute); }

/* Constellation */
.constellation-card { padding: 8px; }
/* Rail (regime picker + its "why") at roughly 1/3, results (filters/chart/legend)
   at roughly 2/3 — the two are independent scroll-free blocks, so a plain grid
   with fr tracks is enough; no need for the flex-basis juggling elsewhere in
   this file that has to fight wrapping. */
.cstl-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 11fr); gap: 18px; align-items: start; }
.cstl-rail { display: flex; flex-direction: column; gap: 10px; padding-right: 16px; border-right: 1px solid var(--hairline); min-width: 0; }
.cstl-results { display: flex; flex-direction: column; min-width: 0; }
.cstl-toolbar { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.cstl-caption { margin: 4px 0 0; flex: 1 1 auto; }
.cstl-controls { display: none; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }
.cstl-controls.open { display: flex; }
.cstl-controls .field { min-width: 150px; }
.constellation { border-radius: var(--radius-sm); overflow: hidden; position: relative; background: var(--canvas-bg); border: 1px solid var(--canvas-border); box-shadow: none; }
.constellation canvas { width: 100%; height: 460px; display: block; cursor: grab; }
.constellation canvas:active { cursor: grabbing; }
.cstl-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 12px; align-items: center; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.mini-tooltip {
  position: absolute; pointer-events: none; padding: 9px 11px; border-radius: var(--radius-sm);
  background: rgba(28,30,52,0.95); color: #F4F5FB; backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  font-size: 0.8rem; max-width: 280px; line-height: 1.35; display: none; z-index: 5;
}

/* ---------- Measurement-regime tabs (constellation) ----------
   One tab per unit of measure: the label names the model class, the second line
   names the unit that class is measured in (the actual reason for the split),
   and the count is how many catalog models land there. Stacked as a vertical
   list in the rail column rather than a wrapping pill row — the rail is narrow
   (~1/3 width), so a row would wrap after one or two tabs anyway. */
.cstl-tabs { display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.cstl-tab {
  appearance: none; cursor: pointer; text-align: left; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 8px 12px;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--text);
  border-radius: var(--radius-sm); font-family: var(--font-body);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.cstl-tab:hover { border-color: var(--brand-ring); transform: translateY(-1px); }
.cstl-tab:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ct-label {
  grid-column: 1; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ct-unit {
  grid-column: 1; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-mute); white-space: nowrap;
}
.ct-count {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; min-width: 26px; text-align: center;
  padding: 2px 7px; border-radius: 999px; font-weight: 700; font-size: 0.78rem;
  background: var(--brand-tint); color: var(--brand);
}
.cstl-tab.active {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 8px 20px rgba(42,40,157,0.26), inset 0 1px 0 rgba(255,255,255,0.18);
}
.cstl-tab.active .ct-unit { color: rgba(255,255,255,0.80); }
.cstl-tab.active .ct-count { background: rgba(255,255,255,0.22); color: #fff; }
:root[data-theme="c"] .ct-count { color: #C3C8FF; }

/* Why this tab exists, in the tab itself — the chart is only honest if the
   regime's assumptions are stated next to it. */
.cstl-why {
  margin: 0; padding: 9px 13px; border-radius: var(--radius-sm);
  background: var(--surface); border-left: 3px solid var(--brand-2);
  font-size: 0.83rem; line-height: 1.55; color: var(--text-dim);
}
.cstl-why b { color: var(--text); font-weight: 700; }
.cstl-why i { font-style: italic; }
.cstl-note { margin: 9px 3px 0; font-size: 0.78rem; line-height: 1.45; color: var(--text-dim); }
.cstl-note b { color: var(--text); }

/* Chart-filters toggle: same collapsed-by-default icon button as the catalog's
   facets rail (.facets-collapse-btn), but its own default icon state — this
   button starts collapsed, so it shows the funnel/filter icon at rest and
   swaps to the chevron once opened, the reverse of the catalog button's
   defaults. Scoped by id so it doesn't disturb .facets-collapse-btn elsewhere. */
#cstlFilterToggle .fc-icon-chevron { display: none; }
#cstlFilterToggle .fc-icon-filter { display: inline-flex; }
#cstlFilterToggle.active .fc-icon-chevron { display: inline-flex; }
#cstlFilterToggle.active .fc-icon-filter { display: none; }

/* Roadmap regime: cards instead of a chart (nothing measurable to plot) */
.cstl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px; }
.rm-card {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
  padding: 15px 15px 13px; border-radius: var(--card-radius);
  background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}
.rm-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--bc-soon), transparent);
}
.rm-card:hover {
  transform: translateY(-2px); background: var(--card-hover-bg);
  border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow);
}
.rm-card:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.rm-card .mc-monogram { width: 40px; height: 40px; font-size: 0.86rem; }
.rm-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
.rm-id { display: flex; flex-direction: column; min-width: 0; }
.rm-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.15; color: var(--text); }
.rm-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 2px; }
.rm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-why { display: flex; flex-direction: column; gap: 7px; }
.rm-why-row { position: relative; padding-left: 14px; font-size: 0.8rem; line-height: 1.45; color: var(--text-dim); }
.rm-why-row::before { content: "→"; position: absolute; left: 0; color: var(--bc-soon); font-weight: 700; }
.rm-foot {
  margin-top: auto; display: flex; align-items: center; gap: 7px; padding-top: 9px;
  border-top: 1px solid var(--hairline); font-size: 0.76rem; color: var(--text-dim); font-weight: 600;
}
.rm-size { margin-left: auto; font-weight: 700; color: var(--text); }

/* Variants a regime owns but the current axes cannot place. Named, not dropped:
   an absent point otherwise reads as "never benchmarked". */
.cstl-excluded {
  margin-top: 13px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px dashed color-mix(in srgb, var(--bc-soon) 55%, transparent);
  background: color-mix(in srgb, var(--bc-soon) 8%, transparent);
}
.cx-head {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 8px;
}
.cx-list { display: flex; flex-direction: column; gap: 6px; }
.cx-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer;
  padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface);
  font-size: 0.82rem; transition: background 130ms ease;
}
.cx-item:hover { background: var(--surface-strong); }
.cx-item:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand-ring); }
.cx-head + .cx-list { margin-bottom: 10px; }
.cx-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.02em; }
.cx-miss { font-weight: 600; color: var(--acc-down); }
/* A reference run is intentional, not a gap — never flagged in the warning color */
.cx-ref { font-weight: 600; color: var(--text-dim); }
.cx-has { margin-left: auto; color: var(--text-dim); }
.mt-ref { color: rgba(244,245,251,0.72); }

/* =====================================================================
   CATALOG
   ===================================================================== */
/* Sidebar widened from the original 196px — long facet/KPI labels were wrapping
   too tightly. Kept as a plain vertical rail (a horizontal filter-bar redesign
   was tried and reverted: it stacked one header row too many above the grid). */
.catalog-layout { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: 334px minmax(0, 1fr); transition: grid-template-columns 160ms ease; }
/* Desktop-only collapse: rail shrinks to a bare icon-width strip, everything
   else in it hidden until re-expanded. Defaults to expanded (see the plain
   HTML markup, no .collapsed/.filters-collapsed class at rest). (Mobile has
   its own separate collapse — see the ≤1040px override further down, which
   always wins there.) */
.catalog-layout.filters-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
.facets {
  border-right: 1px solid var(--hairline); padding: 9px 8px; overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.facets.collapsed { align-items: center; overflow: visible; }
.facets.collapsed .facets-title, .facets.collapsed #cgReset,
.facets.collapsed .filter-toggle, .facets.collapsed .facets-body { display: none; }
.facets-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.facets-title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.facets-collapse-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 28px; height: 28px; cursor: pointer; appearance: none;
  border: 1px solid var(--chip-border); background: var(--chip-bg); color: var(--text);
  border-radius: var(--radius-sm); transition: border-color 140ms ease, background 140ms ease;
}
.facets-collapse-btn:hover { border-color: var(--brand-ring); }
/* Expanded: chevron (points left, "collapse me"). Collapsed: filter/funnel icon
   (reads as "this is the filters rail, click to expand") instead of just a
   rotated chevron, since a lone chevron is ambiguous at icon-only width. */
.facets-collapse-btn .fc-icon-filter { display: none; }
.facets.collapsed .facets-collapse-btn .fc-icon-chevron { display: none; }
.facets.collapsed .facets-collapse-btn .fc-icon-filter { display: inline-flex; }
/* Filters can be applied while the rail sits collapsed to icon width (or,
   on phones, behind the closed Filters toggle) — without this dot there is
   no visible sign a filter is still narrowing the catalog. */
.fc-dot { display: none; }
.facets-collapse-btn.has-filters .fc-dot {
  display: block; position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); border: 1.5px solid var(--card-bg);
}

/* Collapsible filter clusters (the toggle button is shown only on phones) */
.filter-toggle {
  display: none; align-items: center; gap: 8px; width: 100%; cursor: pointer;
  appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg);
  color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: 0.03em; padding: 11px 14px; border-radius: var(--radius-sm);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  transition: border-color 140ms ease, background 140ms ease;
}
.filter-toggle:hover { border-color: var(--brand-ring); }
.filter-toggle.active { border-color: var(--brand); background: var(--brand-tint); }
.ft-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: 0 0 auto; }
.filter-toggle.has-filters .ft-dot { display: inline-block; }
.filter-toggle .ft-chevron { margin-left: auto; transition: transform 200ms ease; }
.filter-toggle[aria-expanded="true"] .ft-chevron { transform: rotate(180deg); }
.facets-body { display: flex; flex-direction: column; gap: 12px; }
.facet-groups { display: flex; flex-direction: column; gap: 12px; }
.facet-group-title { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-mute); font-weight: 700; margin-bottom: 5px; }
.facet-opt { display: flex; align-items: center; gap: 8px; padding: 3px 5px; font-size: 0.82rem; color: var(--text); cursor: pointer; border-radius: 6px; }
.facet-opt:hover { background: var(--brand-tint); }
.facet-opt input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 30px; height: 17px; border-radius: 999px; background: rgba(42,40,157,0.18); position: relative; cursor: pointer; transition: background 150ms ease; }
.facet-opt input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28); transition: left 150ms ease; }
.facet-opt input:checked { background: var(--brand); }
.facet-opt input:checked::after { left: 15px; }
.facet-opt input:checked { background: var(--brand); }
.facet-opt input:checked::after { left: 15px; }

.catalog-main { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 9px; border-bottom: 1px solid var(--hairline); flex: 0 0 auto;
}
.toolbar-count { color: var(--text-dim); font-weight: 600; font-size: 0.9rem; }
.toolbar-count b { color: var(--text); font-family: var(--font-display); }
.view-toggle { display: inline-flex; border: 1px solid var(--chip-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--chip-bg); }
.view-btn { appearance: none; border: none; background: transparent; color: var(--text-dim); padding: 8px 14px; font-weight: 700; font-size: 0.84rem; cursor: pointer; font-family: var(--font-body); }
.view-btn.active { background: var(--brand-active); color: #fff; }

.card-grid { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 9px; display: grid; grid-template-columns: repeat(auto-fill, minmax(247px, 1fr)); gap: 12px; align-content: start; }
.table-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px 18px 18px; }

/* Model card — squared Renesas brand language: a top gradient accent that
   sweeps wider on hover, a framed hero stat with a solid left bar, and
   hairline-divided publisher row + footer with a solid-fill repo CTA. */
.model-card {
  position: relative; overflow: hidden;
  border-radius: var(--card-radius); padding: 17px 17px 12px;
  display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 13px;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}
/* Hero illustration — a real repo sample image, else a modality/task SVG
   (see fallbackIllustrationSrc), cropped to a fixed-height strip that bleeds
   to the card's edges so every card carries the same visual weight. */
.mc-banner {
  position: relative;
  margin: -17px -17px 0;
  height: 108px;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-mute) 8%, transparent);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.mc-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-banner-fallback { z-index: 0; }
/* Signature top accent: 3px brand→brand-2 bar, 34% wide at rest, sweeping to
   full width + full opacity on hover. Keep this motif on card-like surfaces. */
.model-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform: scaleX(0.34); transform-origin: left; opacity: 0.8;
  transition: transform 220ms ease, opacity 220ms ease;
}
.model-card:hover {
  transform: translateY(-4px); border-color: var(--card-hover-border); background: var(--card-hover-bg);
  box-shadow: var(--card-hover-shadow);
}
.model-card:hover::before { transform: scaleX(1); opacity: 1; }

/* Publisher row — uppercase, divided from the body by a hairline rule */
.mc-designer {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding-bottom: 5px; border-bottom: 1px solid var(--hairline);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mc-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.mc-logo svg, .mc-logo img { display: block; }
.mc-designer-name { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pulls the title block closer to the publisher row above it: the shared
   subgrid row-gap (13px) is uniform across every row boundary in the card,
   so this negative margin is the only way to tighten just this one gap
   without also cramping the other rows. */
.mc-head { display: flex; gap: 12px; align-items: center; margin-top: -10px; }
.mc-monogram {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 4px 12px rgba(42,40,157,0.18);
}
.mc-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.15; color: var(--text); word-break: break-word; letter-spacing: 0.01em; }
.mc-sub { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-self: start; }
/* Throughput hero — tinted brand panel, framed all round, with a solid brand
   left bar via ::before (squared accent, not a left-border-only card). */
.mc-stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 12px 9px 16px; border-radius: var(--radius-sm);
  background: linear-gradient(115deg, rgba(42,40,157,0.08), rgba(67,171,226,0.05));
  border: 1px solid rgba(42,40,157,0.16);
  /* Explicit floor so the shared subgrid row this sits in can't crush it to
     near-0 and clip the number: overflow:hidden zeroes the automatic minimum
     size CSS Grid would otherwise derive from this box's own content, so
     when the card grid runs short on vertical room (more rows than fit) this
     row shrinks first unless it has a min-height of its own. Sized for 3 fixed
     lines (number, target/quant, one extra KPI) so every card is the same size
     regardless of how many KPIs a model reports — see .mc-stat-extra below. */
  min-height: 86px;
}
.mc-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--brand);
}
.mc-stat-num { font-family: var(--font-display); font-size: 1.78rem; font-weight: 700; color: var(--brand); line-height: 1; }
:root[data-theme="c"] .mc-stat-num { color: #C3C8FF; }
.mc-stat-unit { font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; color: var(--text-dim); margin-left: 4px; }
.mc-stat-sub { font-size: 0.74rem; color: var(--text-dim); font-weight: 600; line-height: 1.25; }
/* Empty state — greyed bar + dashed frame, transparent, italic placeholder */
.mc-stat.empty { align-items: center; text-align: center; background: transparent; border: 1px dashed var(--hairline); }
.mc-stat.empty::before { background: var(--hairline); }
.mc-stat.empty .mc-stat-sub { color: var(--text-mute); font-style: italic; font-weight: 500; }
/* Coming-soon banner — fills the whole stat slot instead of a small subtitle,
   so it reads as the card's headline rather than a missing-data placeholder. */
.mc-stat.soon {
  align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(115deg, color-mix(in srgb, var(--bc-soon) 20%, transparent), color-mix(in srgb, var(--bc-soon) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--bc-soon) 45%, transparent);
}
.mc-stat.soon::before { background: var(--bc-soon); }
.mc-stat-soon-text {
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--bc-soon);
}
/* Third, always-present line in mc-stat: the single best remaining KPI (e.g.
   SigLIP's "Vision Encoder: 396.8 ms", or an LLM's "Prefill: 20.8 tok/s"),
   toggled by the "KPIs to display" filter. Always rendered (min-height reserves
   its line even with empty text) so mc-stat is a fixed 3-line box for every
   card, regardless of how many KPIs a given model reports. */
.mc-stat-extra { display: block; min-height: 1.1em; font-size: 0.72rem; font-weight: 600; color: var(--text-dim); line-height: 1.25; }
.mc-stat-extra b { color: var(--text); font-weight: 700; }
/* Footer — hairline rule on top; uppercase meta, solid-fill repo CTA.
   Negative margin-top trims the shared subgrid row-gap (13px) above just
   this row, the same trick .mc-head uses above — otherwise the gap plus
   this row's own padding-top left too much air under the stat box. */
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: -5px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.mc-foot--empty { margin-top: -13px; padding-top: 0; border-top: none; }
/* License + updated-date stack sized to match the repo button's height */
.mc-meta-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.mc-meta { font-size: 0.72rem; color: var(--text-mute); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-meta-updated { font-size: 0.68rem; color: var(--text-mute); font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-foot .link {
  flex: 0 0 auto;
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 4px 12px rgba(42,40,157,0.24);
}
.mc-foot .link:hover { background: var(--brand-press); border-color: var(--brand-press); color: #fff; }

/* Chips / badges */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  border-radius: var(--radius-sm); padding: 7px 12px; cursor: pointer; font-weight: 700; font-size: 0.86rem; color: var(--text);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}
.chip-btn:hover { border-color: var(--brand); transform: translateY(-1px); }
.chip-btn.active { background: var(--brand-tint); border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-weight: 700; font-size: 0.76rem; letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--bc) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc) 38%, transparent);
  color: var(--bc);
  --bc: var(--bc-art);
}
:root[data-theme="c"] .badge { color: color-mix(in srgb, var(--bc) 55%, white); background: color-mix(in srgb, var(--bc) 24%, transparent); border-color: color-mix(in srgb, var(--bc) 45%, transparent); }
.badge.clickable { cursor: pointer; }
.badge.clickable:hover { border-color: var(--bc); filter: brightness(0.97); }
.badge.onnx { --bc: var(--bc-onnx); }
.badge.gguf { --bc: var(--bc-gguf); }
.badge.cpu  { --bc: var(--bc-cpu); }
.badge.npu  { --bc: var(--bc-npu); }
.badge.dsp  { --bc: var(--bc-dsp); }
.badge.hybrid { --bc: var(--bc-hybrid); }
.badge.modality { --bc: var(--bc-modal); }
.badge.art  { --bc: var(--bc-art); }
.badge.task { --bc: var(--bc-task); }

/* status badges (mockup-style: uppercase pills) */
.badge.status { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem; padding: 3px 9px; }
.badge.status.soon { --bc: var(--bc-soon); }
.badge.status.pending { --bc: var(--bc-soon); }

/* Hero terminal for the download command (the only non-token colors allowed) */
/* Command terminal for the download command — light model-card style,
   with the brand-2 left-border accent, in the model-details modal (#modalActions). */
#modalActions .cmd-row pre {
  background: var(--code-bg);
  color: var(--text);
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--brand);
}
.link { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--link-text); text-decoration: none; padding: 9px 13px; border-radius: var(--radius-sm); border: 1px solid var(--link-border); background: var(--link-bg); transition: background 130ms ease, border-color 130ms ease; }
.link:hover { border-color: var(--brand); filter: brightness(1.02); }
.link.small { padding: 6px 10px; font-size: 0.8rem; }
.link.link-na {
  color: var(--text-mute); background: transparent;
  border: 1px dashed var(--input-border); cursor: default; font-weight: 600;
}
.link.link-na:hover { border-color: var(--input-border); filter: none; }

/* Metrics cards */
.metric-banner { margin: 10px 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--surface-border); font-weight: 700; color: var(--text); }
.metric-card { border-radius: var(--radius-sm); padding: 14px; min-width: 0; }
.metric-card-title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 0.95rem; margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.metric-pre { white-space: pre-wrap; word-break: break-word; margin: 0; border-radius: var(--radius-sm); }

/* =====================================================================
   Merged "Precision & performance" block (selector + metrics)
   Replaces the old precision/quant chip label and the standalone
   "Metrics" heading. The selector drives the metrics shown beside it —
   each option keeps .chip-btn + data-artifact, so the click handler is
   unchanged (zero JS change).
   ===================================================================== */
.pm-heading { margin-top: 20px; }

/* =====================================================================
   Details tabs — "Precision & Performance" | "Download"
   CSS-only via hidden radio inputs + sibling selectors (same pattern
   as the Download/Deploy tabs inside renderActions).
   ===================================================================== */
.det-radio { position: absolute; opacity: 0; pointer-events: none; }

.det-tab-bar {
  display: inline-flex; gap: 4px; padding: 4px; margin: 16px 0 0;
  border: 1px solid var(--brand-ring); background: var(--brand-tint);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgba(42,40,157,0.08);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
}
.det-tab {
  cursor: pointer; user-select: none;
  padding: 8px 18px; border-radius: calc(var(--radius-sm) - 2px);
  font-family: var(--font-display); font-weight: 700; font-size: 0.84rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
  border: 1px solid transparent;
  transition: background 130ms ease, color 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}
.det-tab:hover { background: var(--card-hover-bg); border-color: var(--card-hover-border); }

.det-panel { display: none; padding-top: 14px; }

/* Active tab highlight + matching panel reveal */
.det-radio--perf:checked ~ .det-tab-bar .det-tab--perf,
.det-radio--dl:checked   ~ .det-tab-bar .det-tab--dl {
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 8px rgba(42,40,157,0.28);
}
.det-radio--perf:checked ~ .det-panel-perf { display: block; }
.det-radio--dl:checked   ~ .det-panel-dl   { display: block; }

:root[data-theme="c"] .det-radio--perf:checked ~ .det-tab-bar .det-tab--perf,
:root[data-theme="c"] .det-radio--dl:checked   ~ .det-tab-bar .det-tab--dl {
  background: #6670E6; box-shadow: 0 2px 10px rgba(77,82,201,0.45);
}

.pm-block {
  display: grid;
  grid-template-columns: minmax(140px, 3fr) minmax(0, 4fr) minmax(0, 3fr);   /* precision | est-vs-HIL graph | accuracy */
  gap: 14px;
  align-items: stretch;   /* all three columns share the same height */
  margin-top: 12px;
}

/* ---- Selector rail (left) ---- */
.pm-rail {
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
  padding: 12px;
  min-width: 0;
}
.pm-rail-cap {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.pm-rail-list { display: flex; flex-direction: column; gap: 6px; }

/* Each selectable row keeps .chip-btn (handler-compatible); override the
   inherited tiny-pill look into a full-width row. */
.chip-btn.pm-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--chip-border);
  background: var(--chip-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  font-size: inherit;
  transition: background 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
.chip-btn.pm-opt:hover { background: var(--brand-tint); border-color: var(--brand-ring); transform: none; }
.chip-btn.pm-opt:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* Radio-dot indicator */
.pm-opt-dot {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--text-mute);
  background: transparent;
  display: grid;
  place-items: center;   /* centers the check glyph regardless of box metrics */
  transition: border-color 130ms ease, background 130ms ease;
}

/* Label (condensed display type, like brand titles) */
.pm-opt-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
  word-break: break-word;
}

/* "Selected" badge — only on the active row */
.pm-opt-badge {
  flex: 0 0 auto;
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.3;
}

/* ---- ACTIVE row: unmistakable solid brand fill ---- */
.chip-btn.pm-opt.active {
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 2px 10px rgba(42,40,157,0.28), inset 0 1px 0 rgba(255,255,255,0.18);
  transform: none;
}
.chip-btn.pm-opt.active:hover { background: var(--brand-press); border-color: var(--brand-press); }
.chip-btn.pm-opt.active .pm-opt-label { color: #fff; }
.chip-btn.pm-opt.active .pm-opt-badge { display: inline-block; }
.chip-btn.pm-opt.active .pm-opt-dot { border-color: #fff; background: #fff; }
.chip-btn.pm-opt.active .pm-opt-dot::after {
  content: "";
  width: 3.5px; height: 7px;
  margin-top: -1px;   /* optical lift so the tick sits centred in the circle */
  border: solid var(--brand); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.chip-btn.pm-opt.active:focus-visible { box-shadow: 0 0 0 3px var(--brand-ring), 0 2px 10px rgba(42,40,157,0.28); }

.pm-opt-empty {
  padding: 12px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  text-align: center;
}

/* ---- Column 2: Est-vs-HIL throughput as a small bar graph.
   Bars use flex-grow (not % heights) so they scale to whatever height the
   row stretches to, with no dependence on a definite track height. ---- */
.pm-graph, .pm-acc { display: flex; flex-direction: column; min-width: 0; }

/* Title row: label left, segmented toggle right */
.pm-graph .metric-card-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pm-graph-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Segmented metric control — always shows both options so it's immediately readable */
.pm-metric-seg {
  flex: 0 0 auto; display: inline-flex;
  border: 1px solid var(--chip-border); border-radius: 999px;
  background: var(--chip-bg); overflow: hidden;
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
}
.pm-seg-btn {
  appearance: none; border: none; background: transparent;
  color: var(--text-mute); padding: 3px 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; line-height: 1.55; white-space: nowrap;
  transition: background 130ms ease, color 130ms ease;
}
.pm-seg-btn:hover { color: var(--text); }
.pm-seg-btn.active { background: var(--brand); color: #fff; border-radius: 999px; }
:root[data-theme="c"] .pm-seg-btn.active { background: #6670E6; }

/* Latency bars hidden by default; throughput hidden in lat-view.
   Use double-class selector (.pm-bars.pm-bars-lat) so specificity beats
   the plain .pm-bars { display:flex } rule that comes later. */
.pm-bars.pm-bars-lat { display: none; }
.pm-graph.lat-view .pm-bars.pm-bars-thr { display: none; }
.pm-graph.lat-view .pm-bars.pm-bars-lat { display: flex; }

/* "Higher / lower is better" hint — toggles with the view */
.pm-graph-hint { margin-top: 6px; text-align: center; font-size: 0.68rem; font-weight: 700; color: var(--text-mute); letter-spacing: 0.03em; }
.pm-graph-hint .hint-lat { display: none; }
.pm-graph.lat-view .pm-graph-hint .hint-thr { display: none; }
.pm-graph.lat-view .pm-graph-hint .hint-lat { display: inline; }

.pm-bars { flex: 1 1 auto; display: flex; align-items: stretch; justify-content: center; gap: 22px; min-height: 96px; margin-top: 12px; }
.pm-bar-col { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; }
.pm-bar-val { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; line-height: 1; color: var(--text); }
.pm-bar-track { width: 40px; flex: 1 1 auto; min-height: 56px; display: flex; flex-direction: column; position: relative; }
.pm-bar-fill { width: 100%; min-height: 4px; border-radius: 6px 6px 2px 2px; }
.pm-bar-fill.est { background: var(--brand-2); }
.pm-bar-fill.hil { background: var(--brand); }
.pm-bar-ref-line {
  position: absolute; left: -6px; right: -6px; height: 0;
  border-top: 2px dashed var(--brand-2);
  opacity: 0.7; pointer-events: none; z-index: 2;
}
.pm-bar-lbl { font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); }
.pm-graph-empty { flex: 1 1 auto; display: grid; place-items: center; min-height: 80px; font-size: 0.85rem; }
.pm-graph-foot { margin-top: 10px; text-align: center; font-size: 0.7rem; font-weight: 600; color: var(--text-mute); }

/* ---- Column 3: Accuracy (HIL-first; "—" until published) ---- */
.pm-acc-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.pm-acc-num { font-family: var(--font-display); font-weight: 700; font-size: 1.95rem; line-height: 1; color: var(--brand); }
:root[data-theme="c"] .pm-acc-num { color: #C3C8FF; }
.pm-acc-num.empty { color: var(--text-mute); font-size: 1.6rem; }
.pm-acc-sub { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); }

/* ---- Per-runtime benchmark breakdown (shown when an artifact has more than
   one run, e.g. a vision model measured on several HIL runtimes + an estimate) ---- */
.rt-block {
  margin-top: 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
  padding: 12px 14px;
}
.rt-cap {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.rt-table-wrap { overflow-x: auto; }
.rt-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.rt-table th {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 4px 10px 8px 0;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
.rt-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hairline); color: var(--text); white-space: nowrap; }
.rt-table tbody tr:last-child td { border-bottom: none; }
.rt-table td.rt-eng { font-weight: 600; }
.rt-table td.rt-num { font-variant-numeric: tabular-nums; }
.rt-table td.rt-prec { vertical-align: top; padding-right: 16px; border-right: 1px solid var(--hairline); }
.rt-kind { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.rt-hil { background: var(--brand); color: #fff; }
.rt-est { background: transparent; color: var(--text-mute); border: 1px solid var(--hairline); }
.rt-ref { background: transparent; color: var(--brand); border: 1px solid var(--brand); font-weight: 800; }
:root[data-theme="c"] .rt-hil { background: #6670E6; }
:root[data-theme="c"] .rt-ref { color: #6670E6; border-color: #6670E6; }

/* accuracy delta colouring (shared by the accuracy card + the vs-FP32 table) */
.acc-down { color: var(--acc-down); font-weight: 700; }
.acc-up { color: var(--acc-up); font-weight: 700; }
:root[data-theme="c"] .acc-down { color: #E58163; }
:root[data-theme="c"] .acc-up { color: #7BC08C; }

/* ---- Accuracy card: delta vs FP32 + retention bar ---- */
.pm-acc-delta { margin-top: 6px; font-size: 0.78rem; font-weight: 700; }
.pm-acc-delta.is-ref { color: var(--text-mute); font-weight: 600; }
.pm-acc-bar { margin-top: 8px; width: 100%; max-width: 160px; height: 7px; border-radius: 999px; background: color-mix(in srgb, var(--text-mute) 22%, transparent); overflow: hidden; }
.pm-acc-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acc-down), var(--acc-up)); }
.pm-acc-ret { margin-top: 5px; font-size: 0.68rem; font-weight: 600; color: var(--text-dim); }

/* ---- Device utilization: one-glance strip of NPU instances/cores/freq/TOPS
   used vs. available, plus a derived core-utilization %. ---- */
.pm-kpis { margin-top: 14px; }
.pm-util { margin-top: 14px; }
.pm-util-src { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-mute); }
.pm-util-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.pm-util-item { text-align: center; padding: 8px 6px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--surface-border); }
.pm-util-val { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); }
.pm-util-lbl { margin-top: 3px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); }
.pm-util-pct .pm-util-val { color: var(--brand); }
:root[data-theme="c"] .pm-util-pct .pm-util-val { color: #C3C8FF; }

/* ---- Example image ("what it's doing") ---- */
.ex-fig { margin: 0; width: 100%; max-width: 220px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ex-media {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 120px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-mute) 8%, transparent);
  overflow: hidden;
}
.ex-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-mute);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-align: center;
}
.ex-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
/* Animated SVG fallback sits behind any repo image that loads successfully.
   contain (not cover) so the whole illustration stays visible even though
   the box now stretches taller to match the summary list. */
.ex-img-fallback { object-fit: contain; z-index: 0; background: transparent; }
.ex-cap { margin-top: 6px; font-size: 0.68rem; font-weight: 600; color: var(--text-dim); text-align: center; flex: none; }

/* ---- Dark variant (data-theme="c") — match the established #6670E6 accent ---- */
:root[data-theme="c"] .chip-btn.pm-opt.active {
  background: #6670E6;
  border-color: #6670E6;
  box-shadow: 0 2px 12px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.20);
}
:root[data-theme="c"] .chip-btn.pm-opt.active:hover { background: #565FD6; border-color: #565FD6; }
:root[data-theme="c"] .chip-btn.pm-opt.active .pm-opt-dot::after { border-color: #6670E6; }

/* ---- Responsive: selector ABOVE metrics on narrow screens ---- */
@media (max-width: 760px) {
  .pm-block { grid-template-columns: 1fr; gap: 14px; }
  .pm-rail-list { flex-direction: row; flex-wrap: wrap; }
  .chip-btn.pm-opt { width: auto; flex: 1 1 150px; }
}

/* Mini chart */
.mini-chart-wrap { margin-top: 12px; border: 1px solid var(--canvas-border); border-radius: var(--radius-sm); background: var(--canvas-bg); overflow: hidden; position: relative; }
.mini-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 12px 0; }
.mini-chart-title { font-family: var(--font-display); font-weight: 700; color: #2C2B45; letter-spacing: 0.02em; }
.mini-chart-subtle { color: #5b5750; font-weight: 600; font-size: 0.85rem; }
.mini-chart-wrap canvas { cursor: grab; }
.mini-chart-wrap canvas:active { cursor: grabbing; }

/* Download copy */
.cmd-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cmd-row pre { flex: 1 1 auto; }
.copy-btn { appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--text); white-space: nowrap; transition: background 130ms ease, border-color 130ms ease; }
.copy-btn:hover { background: var(--brand-tint); border-color: var(--brand); }
.copy-btn.copied { background: color-mix(in srgb, var(--bc-gguf) 16%, transparent); border-color: color-mix(in srgb, var(--bc-gguf) 45%, transparent); color: var(--bc-gguf); }
.copy-btn .icon { font-size: 1rem; }


/* =====================================================================
   TABLE
   ===================================================================== */
.table-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* isolation:isolate works around a Chromium/WebKit quirk where sticky-positioned
   descendants (the pinned column, the sticky header) paint outside an ancestor's
   border-radius clip. Belt-and-suspenders: the corner cells below also carry
   their own explicit radius, so the rounding is correct even without it. */
.table-wrap { flex: 1 1 auto; min-height: 0; border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow: auto; isolation: isolate; background: var(--card-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur); }
table.table { width: 100%; min-width: 720px; border-collapse: collapse; background: transparent; }
.table th, .table td { padding: 12px 15px; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; color: var(--text); vertical-align: top; text-align: left; }
/* Header — brand band with a brand-2 accent underline (the signature edge accent) */
.table th {
  background: var(--table-head-bg); color: var(--table-head-text);
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.78rem;
  white-space: nowrap; border-bottom: none; box-shadow: inset 0 -3px 0 var(--brand-2);
}
.table thead th { position: sticky; top: 0; z-index: 3; }
/* Bake the container's rounding into the actual corner cells — position:sticky
   descendants (this header row, the pinned column below) aren't reliably clipped
   by the ancestor .table-wrap's border-radius in every browser. */
.table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-sm); }
.table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-sm); }
.table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-sm); }
.table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-sm); }
.table tbody tr { transition: background 130ms ease; cursor: pointer; }
/* subtle zebra for cross-row scanning (pinned cell gets the matching tint over its opaque base) */
.table tbody tr:nth-child(even) td { background: rgba(42,40,157,0.035); }
.table tbody tr:nth-child(even) .pin { background: linear-gradient(rgba(42,40,157,0.035), rgba(42,40,157,0.035)), var(--panel-bg); }
.table tbody tr:hover td { background: var(--brand-tint); }
.table tbody tr:last-child td { border-bottom: none; }
/* Name reads as the row's title; a left accent bar slides in on hover */
.table td.cell-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--text); white-space: nowrap; }
/* Publisher logo + model name in the Name cell (mirrors the card's .mc-designer) */
.tc-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tc-name .mc-logo { line-height: 0; }
.table tbody tr:hover td.cell-name { box-shadow: inset 3px 0 0 var(--brand); }

.pin { position: sticky; left: 0; z-index: 2; background: var(--panel-bg); }
.table thead .pin { z-index: 4; background: var(--table-head-bg); }
.table tbody tr:hover .pin { background: var(--card-hover-bg); }

.table .badges { flex-direction: column; align-items: flex-start; gap: 6px; }
.table .badges.badges-row { flex-direction: row; flex-wrap: wrap; }
.table th.details-col, .table td.details-col { width: 1%; white-space: nowrap; }
.table td.details-col { vertical-align: middle; }

/* Metric mini-table — label left, value right-aligned in display type */
.cell-metrics { display: grid; gap: 3px; white-space: normal; line-height: 1.2; min-width: 118px; }
.cell-metrics .row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; }
.cell-metrics .k { font-size: 0.66rem; font-weight: 700; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.cell-metrics .v { font-family: var(--font-display); font-weight: 700; color: var(--text); text-align: right; font-size: 0.95rem; line-height: 1; }

.mini-btn { appearance: none; border: 1px solid var(--brand-ring); background: var(--brand-tint); color: var(--brand); border-radius: var(--radius-sm); padding: 7px 12px; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: var(--font-body); transition: background 130ms ease; }
:root[data-theme="c"] .mini-btn { color: #C3C8FF; }
.mini-btn:hover { background: var(--brand); color: #fff; }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: var(--modal-backdrop); backdrop-filter: blur(4px); }
.modal-panel {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  width: min(980px, calc(100vw - 28px)); max-height: calc(100vh - 60px); overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel-bg); backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  border-radius: var(--radius); border: 1px solid var(--panel-border); box-shadow: 0 40px 90px rgba(0,0,0,0.35), var(--panel-shadow);
}
:root[data-theme="a"] .modal-panel { background: #FFFFFF; border-top: 3px solid var(--brand); }
.modal-head { flex: 0 0 auto; z-index: 5; background: var(--header-bg); backdrop-filter: var(--header-blur); border-bottom: 1px solid var(--hairline); border-radius: var(--radius) var(--radius) 0 0; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.modal-head-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--text); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.1; }
.modal-head-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.modal-head-arch { font-size: 0.8rem; color: var(--text-mute); margin-right: 2px; }
.modal-head-meta .badge { font-size: 0.68rem; padding: 2px 8px; }
.icon-btn { appearance: none; border: 1px solid var(--chip-border); background: var(--chip-bg); border-radius: var(--radius-sm); padding: 8px 11px; cursor: pointer; font-weight: 700; color: var(--text); }
.icon-btn:hover { background: var(--brand-tint); border-color: var(--brand); }
.modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 18px 20px; }

/* =====================================================================
   Scrollbars
   ===================================================================== */
.facets::-webkit-scrollbar, .card-grid::-webkit-scrollbar, .table-wrap::-webkit-scrollbar,
.carousel-track::-webkit-scrollbar, #sec-overview::-webkit-scrollbar,
.modal-panel::-webkit-scrollbar { width: 10px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   Responsive
   ---------------------------------------------------------------------
   ≥1281px  Full layout (tuned for wide / ultrawide screens)
   ≤1280px  Laptop — tighten padding, narrower rails, shorter chart
   ≤1040px  Tablet — single-column layouts, catalog filters collapse behind a toggle
   ≤680px   Phone  — switch to natural document scroll, stack everything
   ===================================================================== */

/* ---------- Laptop: keep the desktop layout but ease the spacing ---------- */
@media (max-width: 1280px) {
  .section-title { font-size: 1.7rem; }
  .catalog-layout { grid-template-columns: 210px minmax(0, 1fr); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .constellation canvas { height: 400px; }
  .stat-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1040px) {
  /* Nav stays inline on the header row (no wrap) right down to the phone breakpoint */
  .topbar-inner { padding: 10px 16px; }
  /* .filters-collapsed (desktop icon-rail collapse) must never win here — this
     selector's extra class would otherwise out-specificity the plain rule below. */
  .catalog-layout, .catalog-layout.filters-collapsed { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .facets, .facets.collapsed { border-right: none; border-bottom: 1px solid var(--hairline); max-height: none; overflow: visible; align-items: stretch; }
  #facetsCollapseToggle { display: none; }
  /* Catalog filters collapse behind the "Filters" toggle — the old always-open
     top strip is removed, leaving only "left rail" (desktop) and "collapsed".
     Scoped to .facets-head so the Overview toggle below is unaffected here. */
  .facets-head .filter-toggle { display: flex; width: auto; flex: 1 1 auto; }
  .facets-title { display: none; }
  .facets-body, .facets.collapsed .facets-body { display: none; }
  .facets-body.open, .facets.collapsed .facets-body.open { display: flex; max-height: 50vh; overflow-y: auto; padding-bottom: 2px; }
  /* Overview model constellation: rail (regime picker) stacks above the
     results instead of sitting beside them once there's no room for 1/3+2/3. */
  .cstl-body { grid-template-columns: 1fr; gap: 14px; }
  .cstl-rail { border-right: none; border-bottom: 1px solid var(--hairline); padding: 0 0 14px; }
}

/* ---------- Phone: natural document scroll, burger nav, fully stacked ---------- */
@media (max-width: 680px) {
  /* Release the fixed-viewport lock so the page scrolls as one document */
  html, body { height: auto; }
  body { height: auto; min-height: 100dvh; overflow-y: auto; overflow-x: hidden; }
  .topbar { position: sticky; top: 0; }
  .content { flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; }

  .section { height: auto; min-height: 0; overflow: visible; }
  #sec-overview.visible { overflow: visible; }
  #sec-model.visible { overflow: visible; }

  /* Collapsible filter clusters (Catalog + Overview-constellation filters
     collapse at ≤1040px above). */
  .filter-toggle { display: flex; }
  /* On phone the whole page scrolls, so let the opened filter lists expand fully */
  .facets-body.open { max-height: none; overflow: visible; }

  /* Header stays on a single line: brand left, burger right */
  .topbar-inner { flex-wrap: nowrap; padding: 9px 12px; gap: 12px; }
  .brand-icon { height: 19px; }
  .brand-subtitle { display: none; }
  .nav-burger { display: inline-flex; }

  /* Tabs collapse into a dropdown panel under the header */
  .tabs {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 4px; padding: 8px;
    display: none;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(26px) saturate(165%); -webkit-backdrop-filter: blur(26px) saturate(165%);
    border-bottom: 1px solid var(--header-border); box-shadow: 0 18px 40px rgba(42,40,157,0.20);
  }
  .tabs.open { display: flex; }
  .nav-item { width: 100%; text-align: left; padding: 11px 14px; font-size: 0.96rem; }

  /* Headings scale down */
  .section-title { font-size: 1.45rem; }
  .card-head-title { font-size: 1.12rem; }
  .carousel-section.featured .carousel-title { font-size: 1.18rem; }

  /* Overview */
  .stat-tiles { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 1.7rem; }
  .cstl-controls .field { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); }
  .constellation canvas { height: 320px; }
  .rc-card { flex-basis: 78vw; }
  .cstl-tab { padding: 7px 10px; }
  .ct-label { font-size: 0.9rem; }
  .cx-item { font-size: 0.78rem; }
  .cx-has { margin-left: 0; flex: 1 1 100%; }

  /* Catalog — a wrapping two-up grid that scrolls vertically with the page
     (NOT a single horizontal swipe lane) */
  .toolbar { flex-wrap: wrap; }
  .card-grid {
    flex: 0 0 auto; height: auto; min-height: 0;
    display: grid; grid-template-columns: repeat(2, 1fr);
    overflow-x: hidden; overflow-y: visible;
    gap: 10px; padding-bottom: 16px; scroll-snap-type: none;
  }
  .model-card { width: auto; scroll-snap-align: none; padding: 10px; row-gap: 8px; }
  .mc-banner { margin: -10px -10px 0; height: 92px; }
  .mc-monogram { width: 34px; height: 34px; font-size: 0.8rem; }
  .mc-head { gap: 9px; }
  .mc-title { font-size: 0.95rem; }
  .mc-stat { padding: 8px 10px 8px 11px; min-height: 68px; }
  .mc-stat-num { font-size: 1.18rem; }
  /* Table → cards: collapse each row into a stacked card (no horizontal scroll),
     flowing with the document. Each <td> becomes a labelled space-between row. */
  .table-view { display: block; flex: 0 0 auto; height: auto; min-height: 0; overflow: visible; padding: 8px 10px 16px; }
  .table-wrap { max-height: none; overflow: visible; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  table.table { min-width: 0; display: block; width: auto; }
  .table thead { display: none; }
  .table tbody { display: flex; flex-direction: column; gap: 12px; }
  .table tbody tr {
    position: relative; overflow: hidden; display: block;
    padding: 15px 16px 13px;
    border: 1px solid var(--card-border); border-radius: var(--card-radius);
    background: var(--card-bg); box-shadow: var(--card-shadow);
  }
  /* signature top accent (matches .model-card) */
  .table tbody tr::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transform: scaleX(0.34); transform-origin: left; opacity: 0.85;
  }
  /* cancel desktop row tints + sticky pins inside cards */
  .table tbody tr:hover td, .table tbody tr:nth-child(even) td { background: transparent; }
  .table .pin { position: static !important; left: auto !important; z-index: auto; background: transparent; }
  .table tbody tr:hover td.cell-name { box-shadow: none; }
  .table tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    width: auto; padding: 8px 0; border-bottom: 1px solid var(--hairline);
    font-size: 0.88rem; white-space: normal; text-align: right;
  }
  .table tbody td::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-family: var(--font-display); font-weight: 700; font-size: 0.66rem;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim);
  }
  .table tbody td:last-child { border-bottom: none; }
  /* Name → card title (block, larger, no label) */
  .table tbody td[data-label="Name"] {
    display: block; text-align: left; padding: 0 0 11px; margin-bottom: 4px;
    border-bottom: 1px solid var(--hairline); font-size: 1.18rem; white-space: normal;
  }
  .table tbody td[data-label="Name"]::before { content: none; }
  /* Details → full-width button */
  .table tbody td.details-col { display: block; width: auto; padding: 12px 0 4px; border-bottom: none; }
  .table tbody td.details-col::before { content: none; }
  .table tbody td.details-col .mini-btn { width: 100%; }
  .table .cell-metrics { min-width: 0; }
  .table .badges, .table .badges.badges-row { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }

  /* Modal goes near full-screen */
  .modal-panel { top: 8px; width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .modal-title { font-size: 1.15rem; }
  .modal-body { padding: 14px; }
  .mdl-modal-wrap { margin: -14px; }
}

/* ---------- Small phone ---------- */
@media (max-width: 380px) {
  .stat-tiles { grid-template-columns: 1fr; }
}


/* =====================================================================
   Download / Deploy tabs (no-JS, sibling-selector toggle)
   ===================================================================== */
.dl-tabs-wrap { display: block; margin-top: 6px; }
.dl-tab-radio { position: absolute; opacity: 0; pointer-events: none; }

/* Mode-selector cards */
.dl-mode-sel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px;
}
.dl-mode-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: var(--radius-sm);
  border: 2px solid var(--chip-border); background: var(--chip-bg);
  cursor: pointer; user-select: none;
  transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}
.dl-mode-card:hover:not(.dl-mode-card--na) {
  border-color: var(--brand); background: var(--brand-tint, rgba(42,40,157,0.07));
}
.dl-mode-card--na { opacity: 0.45; cursor: not-allowed; }
.dl-mode-icon {
  flex: 0 0 auto; width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 1rem; font-weight: 700; line-height: 1;
}
.dl-mode-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dl-mode-title {
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
}
.dl-mode-desc { font-size: 0.77rem; color: var(--text-dim); line-height: 1.4; }
.dl-na-tag {
  font-size: 0.72rem; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--text-mute); opacity: 0.85;
}

.dl-panel { display: none; }

/* Active card + matching panel */
.dl-tab-radio--repo:checked   ~ .dl-mode-sel .dl-mode-card--repo,
.dl-tab-radio--deploy:checked ~ .dl-mode-sel .dl-mode-card--deploy {
  border-color: var(--brand); background: var(--brand-tint, rgba(42,40,157,0.07));
  box-shadow: 0 0 0 1px var(--brand);
}
.dl-tab-radio--repo:checked   ~ .dl-mode-sel .dl-mode-card--repo .dl-mode-icon,
.dl-tab-radio--deploy:checked ~ .dl-mode-sel .dl-mode-card--deploy .dl-mode-icon {
  background: var(--brand);
}
.dl-tab-radio--repo:checked   ~ .dl-panel-repo,
.dl-tab-radio--deploy:checked ~ .dl-panel-deploy {
  display: block;
}

/* Numbered deploy steps */
.dl-steps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; }
.dl-steps > li { padding: 0; }
.dl-step-h {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.84rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
}
.dl-step-n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 0.78rem; line-height: 1;
}

/* Dark theme tweaks (theme="c") */
:root[data-theme="c"] .dl-tab-radio--repo:checked   ~ .dl-mode-sel .dl-mode-card--repo,
:root[data-theme="c"] .dl-tab-radio--deploy:checked ~ .dl-mode-sel .dl-mode-card--deploy {
  border-color: #6670E6; box-shadow: 0 0 0 1px #6670E6;
  background: rgba(77,82,201,0.12);
}
:root[data-theme="c"] .dl-mode-icon,
:root[data-theme="c"] .dl-step-n { background: #4D52C9; }

/* =====================================================================
   Command row: full-width, Copy pinned, scrollbar only on <pre>
   ===================================================================== */

/* The row itself spans the full card width and never overflows */
.dl-tabs-wrap .cmd-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;          /* critical: allows the <pre> child to shrink */
  overflow: hidden;      /* no scrollbar on the row */
  box-sizing: border-box;
}

/* The <pre> takes all remaining space and scrolls horizontally on its own */
.dl-tabs-wrap .cmd-row > pre {
  flex: 1 1 auto;
  min-width: 0;          /* critical: lets flex item be narrower than content */
  max-width: 100%;
  margin: 0;
  overflow-x: auto;      /* scrollbar lives HERE only */
  overflow-y: hidden;
  white-space: pre;      /* keep commands single-line and scrollable */
  word-break: normal;
  overflow-wrap: normal;
  box-sizing: border-box;
}
.dl-tabs-wrap .cmd-row > pre code {
  white-space: pre;
  display: block;
  background: transparent;
}

/* Copy button stays pinned on the right, always visible */
.dl-tabs-wrap .cmd-row > .copy-btn {
  flex: 0 0 auto;
  align-self: stretch;   /* matches the <pre> height */
  white-space: nowrap;
  height: fit-content;
}

/* Numbered deploy steps must also allow their flex/grid children to shrink */
.dl-steps,
.dl-steps > li {
  min-width: 0;
  max-width: 100%;
}

/* Slimmer, less intrusive scrollbar inside command boxes (optional polish) */
.dl-tabs-wrap .cmd-row > pre::-webkit-scrollbar { height: 6px; }
.dl-tabs-wrap .cmd-row > pre::-webkit-scrollbar-thumb {
  background: var(--chip-border);
  border-radius: 3px;
}
.dl-tabs-wrap .cmd-row > pre { scrollbar-width: thin; }

/* A reproduce step can be prose instructions (e.g. "flash the board per the
   guide") rather than an actual shell command — render it as plain body
   text (no code font, no box, no copy button) so it doesn't read as
   something to paste into a terminal. */
.cmd-note-text {
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Stack cards on very narrow viewports */
@media (max-width: 420px) { .dl-mode-sel { grid-template-columns: 1fr; } }

/* Tabs wrapper must not exceed the card width */
.dl-tabs-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.dl-panel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.dl-panel-deploy code {
  background: transparent;
}

/* =====================================================================
   MODEL DETAIL — full page (#sec-model) + modal density (openModelModal)
   One shared vocabulary (.mdl-*) driven by a config bar with three axes
   (hardware config × precision × NPU allocation); HIL/SIL are always
   shown side by side, never a fourth selector. Reuses .chip-btn, .badge,
   .metric-card, .pm-acc-*, .det-tab-*, .rt-table, .cmd-row/.copy-btn/.dl-steps
   verbatim rather than inventing parallel styling.
   ===================================================================== */
:root {
  --bc-license: #883D90;
}

.mdl-card {
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: var(--card-blur); -webkit-backdrop-filter: var(--card-blur);
  box-shadow: var(--card-shadow);
  padding: 14px 16px;
  min-width: 0;
}
.mdl-card--rule { border-top: 3px solid var(--brand); }
.mdl-card--accent { border-top: 3px solid var(--brand-2); }

/* Tight gap groups cards within the same section (e.g. the KPI strip
   sitting right under the Performance heading); each section's first
   element then adds its own margin-top on top of this gap so the seam
   between sections reads clearly larger without a second gap system. */
.mdl-page { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }

/* ---- Page head: breadcrumb (navigation) + title (name/meta/chips) ----
   One compact block instead of two full-width bands — the page's own
   topbar already carries the wordmark/primary nav, so this only needs to
   say "where am I" and "what is this", not spend a whole extra row+border
   on each. */
.mdl-pagehead { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.mdl-pagehead-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Back arrow shares the title's own line instead of a separate row above
   it — the name and modality are both restated a breath away (chips right
   below), so this row never needed to repeat them as a breadcrumb either. */
.mdl-hero-title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mdl-back-btn { font-size: 1rem; line-height: 1; padding: 7px 12px; flex: 0 0 auto; }
.mdl-pagehead-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.mdl-updated { font-size: 0.72rem; color: var(--text-mute); line-height: 1.3; }
.mdl-updated b { color: var(--text); font-weight: 700; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--brand); color: #fff; border: 1px solid var(--brand);
  border-radius: var(--radius-sm); padding: 7px 13px; text-decoration: none;
  transition: background 130ms ease, border-color 130ms ease;
}
.btn-primary:hover { background: var(--brand-press); border-color: var(--brand-press); color: #fff; }

/* ---- Hero: title shares the top row (see .mdl-hero-title-row); only the
   meta/chip line still sits below it. ---- */
.mdl-hero-name { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--brand); word-break: break-word; min-width: 0; }
:root[data-theme="c"] .mdl-hero-name { color: #C3C8FF; }
.mdl-hero-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mdl-hero-meta-txt { font-size: 0.85rem; color: var(--text-dim); }
.mdl-hero-sep { width: 1px; height: 12px; background: var(--hairline); flex: 0 0 auto; }
.badge.license { --bc: var(--bc-license); }

/* ---- Summary + example ---- */
.mdl-summary-row { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; align-items: stretch; margin-top: 18px; }
.mdl-spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px 22px; margin-top: 12px; }
.mdl-spec-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mdl-spec-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-mute); }
.mdl-spec-value { font-size: 0.88rem; color: var(--text); overflow-wrap: anywhere; }
.mdl-example { display: flex; flex-direction: column; gap: 8px; }
.mdl-example .ex-fig { max-width: 300px; }
.mdl-example .ex-media { min-height: 170px; }

/* ---- Configuration bar (the one place selection happens) ----
   Each axis is a full-width row (fixed-width label + a chip strip that
   wraps on its own) instead of a shared flex line — a model with many
   precisions/allocations (e.g. 9 EfficientNet size variants) wraps inside
   its own row rather than shoving a sibling group onto a stray line. */
.mdl-cfgbar {
  background: var(--surface);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  border-radius: var(--radius-sm);
  margin-top: 18px;
}
.mdl-cfgbar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.mdl-cfg-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mdl-cfg-row .mdl-cfg-label { flex: 0 0 128px; }
.mdl-cfg-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.mdl-cfg-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.mdl-cfg-chips .chip-btn { padding: 8px 12px; font-size: 0.82rem; }
.mdl-chip-sub { opacity: 0.72; font-weight: 600; }
.mdl-cfg-count { font-size: 0.76rem; font-weight: 600; color: var(--text-dim); flex: 0 0 auto; }
/* Modal density reuses .mdl-cfg-row/.mdl-cfg-label/.mdl-cfg-chips, just
   with a narrower label column and tighter chip padding. */
.mdl-modal-selectors { display: flex; flex-direction: column; gap: 6px; }
.mdl-modal-selectors .mdl-cfg-row .mdl-cfg-label { flex-basis: 80px; }
.mdl-modal-selectors .mdl-cfg-chips .chip-btn { padding: 5px 10px; font-size: 0.78rem; }

/* ---- Performance heading ---- */
.mdl-perf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.mdl-perf-title { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
:root[data-theme="c"] .mdl-perf-title { color: #C3C8FF; }
.mdl-perf-hint { font-size: 0.74rem; color: var(--text-mute); }

/* ---- KPI strip ---- */
.mdl-kpi-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.mdl-kpi-card { display: flex; flex-direction: column; gap: 10px; }
.mdl-kpi-row { display: flex; align-items: flex-end; gap: 12px; }
.mdl-kpi-hil, .mdl-kpi-sil { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mdl-kpi-sil { padding-left: 12px; border-left: 1px dashed var(--text-mute); }
.mdl-kpi-src { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; }
.mdl-kpi-src--hil { color: var(--brand); }
.mdl-kpi-src--sil { color: var(--bc-onnx); }
.mdl-kpi-num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--brand); }
:root[data-theme="c"] .mdl-kpi-num { color: #C3C8FF; }
.mdl-kpi-unit { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); }
.mdl-kpi-sil-num { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; color: var(--bc-onnx); }
.mdl-kpi-note { font-size: 0.72rem; color: var(--text-dim); line-height: 1.4; }
.mdl-kpi-note--empty { color: var(--text-mute); }
.mdl-kpi-note--warn { color: var(--acc-down); font-weight: 700; }

/* ---- Performance row: chart · resources · accuracy ---- */
.mdl-perf-row { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap: 14px; }
.mdl-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.mdl-chart-note { font-size: 0.7rem; color: var(--text-mute); margin-bottom: 12px; }
.mdl-bars { display: flex; align-items: flex-end; justify-content: center; gap: 16px; height: 168px; }
.mdl-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px; flex: 0 0 68px; height: 100%; }
.mdl-bar-val { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); }
.mdl-bar-track { width: 44px; height: 100%; display: flex; align-items: flex-end; }
.mdl-bar-fill { width: 100%; min-height: 4px; border-radius: 6px 6px 2px 2px; }
.mdl-bar-fill--hil { background: var(--brand); border: 1px solid var(--brand); }
.mdl-bar-fill--sil { background: color-mix(in srgb, var(--brand-2) 16%, transparent); border: 1.5px dashed var(--brand-2); }
.mdl-bar-fill--split { display: flex; flex-direction: column; overflow: hidden; border: none; }
.mdl-bar-seg { width: 100%; }
.mdl-bar-seg--npu { background: var(--bc-npu); }
.mdl-bar-seg--cpu { background: var(--bc-cpu); }
.mdl-bar-baseline { height: 1px; background: var(--text); opacity: 0.6; margin-top: 4px; }
.mdl-bar-labels { display: flex; justify-content: center; gap: 16px; margin-top: 8px; }
.mdl-bar-lbl { flex: 0 0 68px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.mdl-bar-name { font-size: 0.76rem; color: var(--text); font-weight: 600; }
.mdl-bar-kind { font-family: var(--font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.mdl-bar-kind--hil { color: var(--brand); }
.mdl-bar-kind--sil { color: var(--bc-onnx); }
.mdl-bars-empty { flex: 1 1 auto; display: grid; place-items: center; min-height: 96px; color: var(--text-mute); font-size: 0.85rem; text-align: center; }
.mdl-bar-split-legend { display: flex; justify-content: center; gap: 14px; margin-top: 8px; font-size: 0.72rem; font-weight: 600; color: var(--text-mute); }
.mdl-bar-split-item { display: inline-flex; align-items: center; gap: 5px; }
.mdl-bar-split-swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mdl-bar-split-swatch--npu { background: var(--bc-npu); }
.mdl-bar-split-swatch--cpu { background: var(--bc-cpu); }

.mdl-res-list { display: flex; flex-direction: column; gap: 8px; }
.mdl-res-row { display: flex; flex-direction: column; gap: 5px; }
.mdl-res-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.78rem; }
.mdl-res-head .k { color: var(--text-dim); flex: 0 0 auto; }
.mdl-res-head .v {
  color: var(--text); font-weight: 600;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
.mdl-res-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text-mute) 20%, transparent); overflow: hidden; display: flex; }
.mdl-res-fill { height: 100%; background: var(--brand); border-radius: 999px; }

/* Headline number promoted from the old standalone "NPU compute used" KPI
   card — same visual weight (.mdl-kpi-num treatment), colored with the NPU
   badge accent so it reads as a hardware/compute figure rather than a
   performance one (those stay brand-blue in the KPI strip). */
.mdl-res-highlight { margin-bottom: 10px; }
.mdl-res-highlight-num { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--bc-npu); }
.mdl-res-highlight-unit { font-size: 0.72rem; font-weight: 600; color: var(--text-dim); }
.mdl-res-highlight-note { margin-top: 4px; font-size: 0.72rem; color: var(--text-dim); line-height: 1.4; }
.mdl-modal-perf .mdl-res-highlight-num { font-size: 1.25rem; }

/* NPU/CPU offload split — two-tone bar using the same accent colors as the
   NPU/CPU hardware badges elsewhere, so the split reads consistently with
   the rest of the UI's compute-unit color coding. */
.mdl-res-split { margin-bottom: 10px; }
.mdl-res-split-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 0.78rem; margin-bottom: 5px; }
.mdl-res-split-head .k { color: var(--text-dim); flex: 0 0 auto; }
.mdl-res-split-head .v { display: flex; gap: 6px; }
.mdl-res-split-tag { font-family: var(--font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.02em; padding: 1px 7px; border-radius: 999px; }
.mdl-res-split-tag--npu { color: var(--bc-npu); background: color-mix(in srgb, var(--bc-npu) 16%, transparent); }
.mdl-res-split-tag--cpu { color: var(--bc-cpu); background: color-mix(in srgb, var(--bc-cpu) 16%, transparent); }
.mdl-res-track--split .mdl-res-fill--npu { background: var(--bc-npu); border-radius: 999px 0 0 999px; }
.mdl-res-track--split .mdl-res-fill--cpu { background: var(--bc-cpu); border-radius: 0 999px 999px 0; }

/* Accuracy card reuses .pm-acc-num / .pm-acc-delta / .pm-acc-bar / .pm-acc-ret. */
.mdl-acc-note { margin-top: 8px; font-size: 0.72rem; color: var(--text-mute); line-height: 1.4; }

/* ---- Reference tabs: reuse .det-tab-bar/.det-tab/.det-panel; add a --runs
   modifier alongside the existing --perf/--dl ones (same mechanism). ---- */
.det-radio--runs:checked ~ .det-tab-bar .det-tab--runs { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(42,40,157,0.28); }
.det-radio--runs:checked ~ .det-panel-runs { display: block; }
:root[data-theme="c"] .det-radio--runs:checked ~ .det-tab-bar .det-tab--runs { background: #6670E6; box-shadow: 0 2px 10px rgba(77,82,201,0.45); }

.mdl-runs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.rt-table tbody tr.rt-row--sel td { background: var(--brand-tint); }

/* Meta column only needs to fit short label/value pairs (ellipsized) and a
   couple of note cards; give the extra room to the commands column so long
   shell commands stay on one line as long as possible before scrolling. */
.mdl-dl-grid { display: grid; grid-template-columns: minmax(0,0.72fr) minmax(0,1.8fr); gap: 20px; }
.mdl-dl-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* .dl-tabs-wrap's own margin-top (used when it sits under its own local
   Download/Deploy tab bar elsewhere) is redundant here — det-panel already
   adds top padding — so it doubled the gap under the tab selector versus
   the All benchmark runs panel. Zero it so both panels sit the same
   distance below the selector. */
.det-panel-dl .dl-tabs-wrap { margin-top: 0; }

/* Left column: tighten the gap right under Toolchain requirements only —
   the gap after the compiler note (or after the artifact note, when there's
   no compiler note) keeps the column's normal rhythm. */
.mdl-dl-col--meta > .mdl-card + .note { margin-top: -8px; }

/* Right column: one bordered cell holding all the download/run/setup
   commands back-to-back, instead of a separate card per step. */
.mdl-dl-cmds-card { display: flex; flex-direction: column; gap: 16px; }
.mdl-dl-cmd-block + .mdl-dl-cmd-block { padding-top: 16px; border-top: 1px solid var(--hairline); }
.mdl-kv-list { display: flex; flex-direction: column; }
.mdl-kv-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 0.82rem; }
.mdl-kv-row:last-child { border-bottom: none; }
.mdl-kv-row .k { color: var(--text-dim); flex: 0 0 auto; }
.mdl-kv-row .v {
  color: var(--text); font-weight: 600; text-align: right;
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Footer ---- */
.mdl-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 0.72rem; color: var(--text-mute); }
.mdl-footer img { height: 12px; opacity: 0.75; }

@media (max-width: 980px) {
  .mdl-summary-row, .mdl-perf-row, .mdl-dl-grid { grid-template-columns: 1fr; }
  .mdl-kpi-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mdl-cfg-row .mdl-cfg-label { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .mdl-kpi-strip { grid-template-columns: 1fr; }
}

/* ---- Modal density (openModelModal): 248px rail + right column ---- */
/* Single element cancels the modal-body padding so the grid + footer sit
   flush with the panel edges; grid/footer below stay in normal flow (no
   margin math of their own), which is what keeps the footer from
   overlapping the grid's bottom edge. */
.mdl-modal-wrap { margin: -16px -18px -20px; }
.mdl-modal-grid { display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 0; }
.mdl-modal-rail {
  border-right: 1px solid var(--hairline); background: var(--surface);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
/* Pin the illustration to exactly the rail's content width — same box the
   "Summary" kv-rows sit in — rather than relying on the fallback
   width:100% (which only matches by coincidence once max-width is out of
   the way). */
.mdl-modal-rail .mdl-example { width: 100%; }
.mdl-modal-rail .mdl-example .ex-fig { width: 100%; max-width: 100%; }
.mdl-modal-rail .mdl-example .ex-media { width: 100%; min-height: 116px; }
.mdl-modal-specs.mdl-kv-list .mdl-kv-row { padding: 6px 0; font-size: 0.78rem; }
.mdl-modal-main { padding: 14px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mdl-modal-kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.mdl-modal-kpi { border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--card-bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mdl-modal-kpi .metric-card-title { margin-bottom: 0; }
.mdl-modal-kpi .mdl-kpi-num { font-size: 1.35rem; }
.mdl-modal-kpi .mdl-kpi-sil-num { font-size: 0.78rem; }
/* Notes are full sentences ("Best run · onnxruntime · batch 1 · derived from
   latency (1000 / p50)") that would otherwise wrap to 2-3 lines and force
   every card in the row to that height — clamp to one line, full text on hover. */
.mdl-modal-kpi .mdl-kpi-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Stretched (grid default) so the chart card matches the height of the
   resources + quick-links column next to it. Naively stretching used to
   leave a dead blank area below the bar labels, so the chart card is a
   column flexbox and the bars area itself (not the card) grows into the
   extra height — it reads as normal chart headroom above the bars rather
   than an unrelated gap under them. */
.mdl-modal-perf { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 12px; align-items: stretch; }
.mdl-modal-perf .mdl-chart-card { display: flex; flex-direction: column; }
.mdl-modal-perf .mdl-chart-card .mdl-bars,
.mdl-modal-perf .mdl-chart-card .mdl-bars-empty { flex: 1 1 auto; height: auto; min-height: 96px; }
.mdl-modal-perf .mdl-bar-col { flex: 0 0 58px; }
.mdl-modal-perf .mdl-bar-lbl { flex: 0 0 58px; }
.mdl-modal-perf .mdl-card { padding: 12px 14px; }
.mdl-modal-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Quick links beside the resources card — plain text rows, not full-width
   pill buttons, so a 3-line list doesn't read as three stacked buttons. */
.mdl-modal-quicklinks { display: flex; flex-direction: column; padding: 6px 14px; }
.mdl-ql-link {
  display: block; padding: 6px 0; font-size: 0.82rem; font-weight: 700; color: var(--link-text);
  text-decoration: none; border-top: 1px solid var(--hairline);
}
.mdl-modal-quicklinks .mdl-ql-link:first-child { border-top: none; }
.mdl-ql-link:hover { color: var(--brand-press); text-decoration: underline; }

@media (max-width: 760px) {
  .mdl-modal-grid { grid-template-columns: 1fr; }
  .mdl-modal-rail { border-right: none; border-bottom: 1px solid var(--hairline); }
  .mdl-modal-perf { grid-template-columns: 1fr; }
  .mdl-modal-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
}