/* =====================================================================
   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-modal:  var(--brand);
  --bc-art:    #706F6F;
  --bc-task:   #4C8C7D;

  /* 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; }
.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, #sec-explore.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; }

.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, .model-picker, .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
   ===================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.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; }
.radio-col { display: grid; gap: 8px; }
.field-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.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; }
.rc-card { flex: 0 0 252px; scroll-snap-align: start; gap: 10px; }
.rc-meta { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; gap: 5px; letter-spacing: 0.02em; }
.rc-meta.is-new { color: var(--brand); }
: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; }
.cstl-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }
.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;
}

/* =====================================================================
   CATALOG
   ===================================================================== */
.catalog-layout { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; grid-template-columns: 196px minmax(0, 1fr); }
.facets {
  border-right: 1px solid var(--hairline); padding: 9px 8px; overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.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); }

/* 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); }
.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; }
.explore-filters { display: grid; gap: 10px; }

/* Explore filters: dense progressive-disclosure redesign.
   Secondary ("Advanced") tier is collapsed by default on desktop; the generic
   delegated .filter-toggle handler (index.html) toggles .open on it — no JS. */
.explore-advanced { display: none; }
.explore-advanced.open { display: grid; gap: 10px; }
/* Desktop-visible variant of the toggle (base .filter-toggle is display:none
   >680px). Slimmer + dimmer so it reads as a secondary affordance. */
.filter-toggle--inline {
  display: flex; padding: 7px 12px; font-size: 0.82rem; font-family: var(--font-body);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
}
.filter-toggle--inline svg:first-of-type { opacity: 0.75; }
/* Dense packing, SCOPED to Explore so Catalog/Overview pills are untouched. */
.explore-filters .field-row.two, .explore-advanced .field-row.two { gap: 10px; }
.explore-filters .field.compact { gap: 4px; }
.explore-filters .field.compact .label { font-size: 0.68rem; }
.explore-filters .filter-select.compact { height: 34px; font-size: 0.86rem; padding: 0 10px; }
.explore-filters select.filter-select.compact { background-position: calc(100% - 16px) 14px, calc(100% - 10px) 14px; padding-right: 32px; }
.explore-filters .radio-row { gap: 6px; row-gap: 6px; }
.explore-filters .radio-row .pill { padding: 5px 10px; gap: 6px; font-size: 0.82rem; line-height: 1.15; }
.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; }

.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 15px;
  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;
}
/* 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: 12px; 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 { 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; }
.mc-head { display: flex; gap: 12px; align-items: center; }
.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. */
  min-height: 70px;
}
.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; }
.mc-quants { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; align-self: start; }
/* Footer — hairline rule on top; uppercase meta, solid-fill repo CTA */
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 13px; border-top: 1px solid var(--hairline); }
.mc-foot--empty { 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: 2px; }
.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.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; }

/* =====================================================================
   EXPLORE
   ===================================================================== */
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.grid.explore-grid { display: grid; grid-template-columns: minmax(320px, 32%) 1fr; gap: 16px; margin-top: 10px; }
/* Wide screens: the Configure rail and the result card each fill the full
   section height and scroll internally (the page itself doesn't scroll).
   On smaller screens the columns stack and the section scrolls normally. */
@media (min-width: 1041px) {
  #sec-explore.visible { overflow: hidden; }
  #sec-explore .explore-grid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  /* Both columns fill the section height and scroll internally if content
     overflows. The model list keeps its own natural (size=12) height — a
     native <select> does NOT flex reliably, so we don't stretch it. */
  #sec-explore .explore-grid > .card { min-height: 0; overflow: auto; }
}

.matchline { font-size: 0.9rem; color: var(--text); font-weight: 700; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-tint); border: 1px solid var(--brand-ring); }
.matchline b { font-family: var(--font-display); color: var(--brand); }
:root[data-theme="c"] .matchline b { color: #C3C8FF; }
.model-picker { border-radius: var(--radius-sm); padding: 12px; }
.model-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.model-picker-title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase; }
.model-picker-subtle { font-size: 0.8rem; color: var(--text-dim); font-weight: 600; }
.model-list { height: auto; min-height: 280px; padding: 8px 10px; line-height: 1.4; border-radius: var(--radius-sm); background-image: none !important; padding-right: 12px !important; cursor: auto; }
.model-list option { padding: 7px 8px; border-radius: 4px; }

/* Deploy page: numbered step strip under the section head */
.deploy-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.deploy-steps li {
  display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 7px;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: var(--surface);
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--text-dim);
}
.deploy-steps .ds-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 0.8rem; line-height: 1;
}
.deploy-steps .ds-txt { white-space: nowrap; }
/* 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 on both Explore (#actions) and
   the model-details modal (#modalActions). */
#actions .cmd-row pre,
#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; }

.summary-grid { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: stretch; }
.summary-grid ul { margin: 0; padding-left: 0; list-style: none; }
.summary-grid li { margin: 6px 0; color: var(--text); padding-left: 18px; position: relative; }
.summary-grid li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--brand); }
:root[data-theme="c"] .summary-grid li::before { background: #6670E6; }
/* Stretched to the summary list's height so the illustration grows/shrinks to
   match instead of leaving a mismatched gap or overflow next to it. */
.repo-buttons { display: flex; flex-direction: column; gap: 10px; align-items: stretch; height: 100%; }
.repo-buttons .link { width: 100%; justify-content: center; flex: 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-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin-top: 10px; }
.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: 2px; padding: 3px; margin: 16px 0 0;
  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);
}
.det-tab {
  cursor: pointer; user-select: none;
  padding: 7px 16px; border-radius: calc(var(--radius-sm) - 2px);
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
  transition: background 130ms ease, color 130ms ease, box-shadow 130ms ease;
}
.det-tab:hover { color: var(--text); }

.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-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);
  border: 1px solid var(--card-border);
  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; }

/* Copy button — fix visibility ONLY on Deploy tab (#actions).
   Model-card modal (#modalActions) keeps its original styling untouched. */
#actions .cmd-row .copy-btn {
  align-self: flex-start;                    /* compact, top-aligned, no stretch */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 84px;
  height: 32px;                              /* fixed height, never grows with multi-line pre */
  padding: 0 12px;
  font: 600 12px/1 var(--font-sans, system-ui, sans-serif);
  letter-spacing: 0.02em;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .05s ease;
  box-shadow: 0 1px 0 rgba(20, 18, 80, 0.04);
}

#actions .cmd-row .copy-btn:hover {
  background: rgba(42, 40, 157, 0.08);
  border-color: rgba(42, 40, 157, 0.45);
}

#actions .cmd-row .copy-btn:focus-visible {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(42, 40, 157, 0.22);
}

#actions .cmd-row .copy-btn:active {
  transform: translateY(1px);
  background: rgba(42, 40, 157, 0.14);
}

#actions .cmd-row .copy-btn.is-copied {
  background: var(--brand-2);
  border-color: var(--brand-2);
  color: #fff;
}

/* =====================================================================
   TABLE
   ===================================================================== */
.table-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.table-wrap { flex: 1 1 auto; min-height: 0; border: 1px solid var(--card-border); border-radius: var(--radius-sm); overflow: auto; 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; }
.table tbody tr { transition: background 130ms ease; }
/* 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: 10px; min-width: 0; }
.modal-head-left .det-logo { height: 22px; width: auto; flex: 0 0 auto; }
.modal-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--text); letter-spacing: 0.02em; text-transform: uppercase; }
.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, #sec-explore::-webkit-scrollbar,
#sec-explore .explore-grid > .card::-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: 184px minmax(0, 1fr); }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .grid.explore-grid { grid-template-columns: minmax(300px, 36%) 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; }
  .grid.two, .grid.explore-grid { grid-template-columns: 1fr; }
  .field-row.two { grid-template-columns: 1fr 1fr; }
  .summary-grid { grid-template-columns: 1fr; }
  .repo-buttons { height: auto; align-items: flex-start; }
  .repo-buttons .link { width: auto; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .catalog-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .facets { border-right: none; border-bottom: 1px solid var(--hairline); max-height: none; overflow: visible; }
  /* 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 Explore toggle is unaffected here. */
  .facets-head .filter-toggle { display: flex; width: auto; flex: 1 1 auto; }
  .facets-title { display: none; }
  .facets-body { display: none; }
  .facets-body.open { display: flex; max-height: 50vh; overflow-y: auto; padding-bottom: 2px; }
  /* Overview model constellation — same merge: its "Chart filters" collapse moves
     up here too, so it has only "full" (desktop) and "collapsed" states. */
  #cstlFilterToggle { display: flex; margin-bottom: 12px; }
  .cstl-controls { display: none; margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .cstl-controls.open { display: flex; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
}

/* ---------- 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, #sec-explore.visible { 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; }

  /* 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-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: 54px; }
  .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; }

  /* Explore */
  .field-row.two { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr; }
  .model-list { min-height: 220px; }

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

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

/* Explore: on phone the single "Filters" button reveals #exploreFilters, so
   force the nested Advanced tier open (no two-step) and hide its desktop
   sub-toggle. Must come AFTER the block above to win on source order. */
@media (max-width: 680px) {
  .explore-advanced { display: grid; gap: 10px; }
  .filter-toggle--inline { display: none; }
  .explore-filters .field-row.two, .explore-advanced .field-row.two { grid-template-columns: 1fr 1fr; }
}

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

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

/* Dark themes use the white logo instead */
[data-theme="c"] .det-logo {
  content: url("assets/logo_renesas_white.svg");
}