/* ───────────── Tokens ───────────── */
:root {
  color-scheme: light;
  --bg: #edf0ef;
  --panel: #ffffff;
  --panel-2: #f5f7f6;
  --ink: #17212b;
  --ink-2: #46535f;
  --muted: #6f7c88;
  --line: #dde3e2;
  --grid: #e9edec;

  --rail: #1a2632;
  --rail-2: #233241;
  --rail-ink: #e9eef1;
  --rail-muted: #93a1ae;
  --brand: #f9c90c; /* SKAPS yellow – chrome only, never a data color */

  /* OEE factors – one hue per factor, used everywhere that factor appears */
  --fa: #2a78d6;   /* availability */
  --fp: #eb6834;   /* performance  */
  --fq: #1baf7a;   /* quality      */
  --foee: #17212b; /* OEE itself is ink */

  --shA: #4a3aa7;
  --shB: #eda100;

  --good: #1d7a4b;
  --warn: #9a6200;
  --crit: #c2362f;
  --good-bg: #e2f2e9;
  --warn-bg: #fbf0dc;
  --crit-bg: #fbe5e3;

  --neutral-bar: #a3b1bd;
  --seq-0: #e3eefb; --seq-1: #9ec5f4; --seq-2: #5598e7; --seq-3: #256abf; --seq-4: #0d366b;

  --radius-l: 20px;
  --radius-m: 14px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(23, 33, 43, .04), 0 8px 24px -12px rgba(23, 33, 43, .12);

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: var(--font);   /* big numbers; templates can swap in a condensed face */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f161d; --panel: #17212a; --panel-2: #1d2833; --ink: #eef2f4; --ink-2: #b9c4cd;
    --muted: #8795a2; --line: #2a3742; --grid: #222e38;
    --rail: #0b1117; --rail-2: #16212b; --rail-ink: #e9eef1; --rail-muted: #8796a3;
    --fa: #3987e5; --fp: #d95926; --fq: #199e70; --foee: #eef2f4;
    --shA: #9085e9; --shB: #c98500;
    --good: #4cc08a; --warn: #e0a640; --crit: #ef7a74;
    --good-bg: #173326; --warn-bg: #3a2c12; --crit-bg: #3d1d1c;
    --neutral-bar: #4f5f6d;
    --seq-0: #1f2b37; --seq-1: #184f95; --seq-2: #2a78d6; --seq-3: #6da7ec; --seq-4: #cde2fb;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f161d; --panel: #17212a; --panel-2: #1d2833; --ink: #eef2f4; --ink-2: #b9c4cd;
  --muted: #8795a2; --line: #2a3742; --grid: #222e38;
  --rail: #0b1117; --rail-2: #16212b; --rail-ink: #e9eef1; --rail-muted: #8796a3;
  --fa: #3987e5; --fp: #d95926; --fq: #199e70; --foee: #eef2f4;
  --shA: #9085e9; --shB: #c98500;
  --good: #4cc08a; --warn: #e0a640; --crit: #ef7a74;
  --good-bg: #173326; --warn-bg: #3a2c12; --crit-bg: #3d1d1c;
  --neutral-bar: #4f5f6d;
  --seq-0: #1f2b37; --seq-1: #184f95; --seq-2: #2a78d6; --seq-3: #6da7ec; --seq-4: #cde2fb;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
}

/* ───────────── Base ───────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fa); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }

/* ───────────── Rail ───────────── */
.rail {
  background: var(--rail);
  color: var(--rail-ink);
  padding: 22px 14px 18px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { padding: 0 6px; display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; border-radius: 12px; }
.brand-logo {
  flex: none; width: 58px; height: 70px; padding: 6px; border-radius: 12px; background: #fff;
  display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 18px -8px rgba(0, 0, 0, .5);
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--font-num); font-size: 18px; font-weight: 750; line-height: 1.2; font-variation-settings: "wdth" 96; }
.brand-sub { font-size: 12px; line-height: 1.35; color: var(--rail-muted); margin-top: 2px; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-group { font-size: 12px; color: var(--rail-muted); padding: 14px 10px 6px; }
.nav-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: 10px 12px; border-radius: 12px; color: var(--rail-ink);
  transition: background-color .2s var(--ease);
  position: relative;
}
.nav-item:hover { background: var(--rail-2); }
.nav-item[aria-current="page"] { background: var(--rail-2); }
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--brand);
}
.nav-name { font-weight: 600; font-size: 14px; }
.nav-name .short { display: none; }
.nav-stage { grid-column: 1; font-size: 12px; color: var(--rail-muted); }
.nav-value {
  grid-row: 1 / span 2; grid-column: 2; text-align: right;
  font-family: var(--font-num); font-size: 20px; font-weight: 700; font-variation-settings: "wdth" 75;
}
.nav-value small { display: block; font-size: 11px; font-weight: 500; color: var(--rail-muted); font-variation-settings: "wdth" 100; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.dot.good { background: #4cc08a; } .dot.warn { background: #e0a640; } .dot.crit { background: #ef7a74; } .dot.none { background: var(--rail-muted); }

.rail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }

/* Template switcher (M1 / T1 / T2) */
.tpl { display: flex; gap: 8px; }
.tpl-mobile { display: none; }
.tpl button {
  min-width: 46px; height: 34px; padding: 0 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .18); background: var(--rail-2); color: var(--rail-ink);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.tpl button:hover { border-color: rgba(255, 255, 255, .45); }
.tpl button:active { transform: scale(.96); }
.tpl button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #111417; }
.tpl-block { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.tpl-caption { font-size: 12px; color: var(--rail-muted); }

.rail-foot { margin-top: auto; padding: 0 10px; font-size: 12px; color: var(--rail-muted); display: flex; flex-direction: column; gap: 10px; }
.link-btn { background: none; border: 0; padding: 0; color: var(--rail-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; font-size: 13px; }

/* ───────────── Topbar ───────────── */
main { min-width: 0; padding: 26px 32px 48px; }
.topbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px;
  margin-bottom: 22px;
}
.page-title { font-family: var(--font-num); font-size: 30px; line-height: 1.15; font-weight: 750; letter-spacing: -.01em; font-variation-settings: "wdth" 92; }
.page-sub { color: var(--muted); margin-top: 4px; font-size: 14px; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.control-label { font-size: 12px; color: var(--muted); margin-right: 2px; }

.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--line);
}
.seg button {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 550; color: var(--ink-2); white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }

.dates { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; padding: 3px 8px; }
.dates input { border: 0; background: transparent; font-size: 13px; padding: 4px 2px; min-width: 0; width: 128px; }
.dates span { color: var(--muted); font-size: 12px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--panel);
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
}
.icon-btn:hover { color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; }

/* ───────────── Layout grid & cards ───────────── */
.view { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.view.enter { animation: viewIn .42s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 20px 22px; min-width: 0;
}
.card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.card-title { font-size: 16px; font-weight: 650; letter-spacing: -.005em; }
.card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; max-width: 68ch; }
.chart { width: 100%; height: 300px; }
.chart.tall { height: 340px; }
.chart.short { height: 230px; }

.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend i.line { height: 2px; width: 14px; border-radius: 2px; vertical-align: 3px; }
.legend i.hatch { background: repeating-linear-gradient(135deg, var(--neutral-bar) 0 2px, transparent 2px 5px); border: 1px solid var(--neutral-bar); }

/* Status chip – always icon + label, never color alone */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.crit { background: var(--crit-bg); color: var(--crit); }
.chip.none { background: var(--panel-2); color: var(--muted); }

/* ───────────── Hero: the OEE equation ───────────── */
.hero { border-radius: var(--radius-l); padding: 26px 28px 22px; box-shadow: var(--shadow); }
.equation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.35fr);
  align-items: end; gap: 0 14px;
}
.op { font-family: var(--font-num); font-size: 34px; font-weight: 300; color: var(--muted); padding-bottom: 30px; font-variation-settings: "wdth" 80; }
.factor-name { font-size: 13px; color: var(--ink-2); font-weight: 550; display: flex; align-items: center; gap: 7px; }
.factor-name i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.factor-num {
  font-family: var(--font-num);
  font-size: clamp(36px, 4.4vw, 58px); line-height: 1; font-weight: 700; letter-spacing: -.02em;
  font-variation-settings: "wdth" 72; margin: 8px 0 12px;
}
.factor-num small { font-size: .45em; font-weight: 600; margin-left: 2px; color: var(--ink-2); }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--panel-2); overflow: visible; }
.meter > b {
  position: absolute; inset: 0 auto 0 0; border-radius: 4px; width: 0;
  transition: width 1.1s var(--ease);
}
.meter > u {
  position: absolute; top: -4px; bottom: -4px; width: 2px; border-radius: 1px; background: var(--ink); opacity: .55;
}
.factor-bench { font-size: 12px; color: var(--muted); margin-top: 8px; }

.oee-block { padding-left: 6px; }
.oee-block .factor-name { font-size: 14px; color: var(--ink); font-weight: 650; }
.oee-num {
  font-family: var(--font-num);
  font-size: clamp(64px, 8.4vw, 116px); line-height: .9; font-weight: 800; letter-spacing: -.035em;
  font-variation-settings: "wdth" 66; margin: 6px 0 12px;
}
.oee-num small { font-size: .38em; font-weight: 650; margin-left: 4px; letter-spacing: 0; color: var(--ink-2); }

.verdict {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
}
.verdict p { font-size: 15px; max-width: 72ch; color: var(--ink); }
.verdict p strong { font-weight: 650; }

.stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 18px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
}
.stat { padding: 12px 16px; background: var(--panel-2); min-width: 0; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-value { font-family: var(--font-num); font-size: 22px; font-weight: 700; font-variation-settings: "wdth" 80; line-height: 1.2; margin-top: 2px; }
.stat-value small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 3px; font-variation-settings: "wdth" 100; }

/* ───────────── Overview: line flow ───────────── */
.flow {
  display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr);
  align-items: center;
}
.flow-col { display: flex; flex-direction: column; gap: 12px; }
.flow-links { height: 100%; width: 100%; }
.flow-links path { fill: none; stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; }
.node {
  text-align: left; cursor: pointer; width: 100%;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.node:hover { border-color: var(--ink-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.node-stage { font-size: 12px; color: var(--muted); }
.node-name { font-size: 16px; font-weight: 650; }
.node-oee { font-family: var(--font-num); grid-row: 1 / span 2; grid-column: 2; text-align: right; font-size: 38px; line-height: 1; font-weight: 750; font-variation-settings: "wdth" 68; letter-spacing: -.02em; }
.node-oee small { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.node-bars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.mini-label { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; margin-bottom: 4px; }
.mini-label b { color: var(--ink); font-weight: 600; }
.mini { height: 5px; border-radius: 3px; background: var(--panel-2); position: relative; overflow: hidden; }
.mini b { position: absolute; inset: 0 auto 0 0; border-radius: 3px; width: 0; transition: width 1s var(--ease); }
.node-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.node.slim { padding: 12px 16px; }
.node.slim .node-oee { font-size: 32px; }

/* Factor comparison table */
.ftable { width: 100%; border-collapse: collapse; }
.ftable th { font-size: 12px; font-weight: 550; color: var(--muted); text-align: left; padding: 0 10px 10px; }
.ftable td { padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: middle; }
.ftable td:first-child, .ftable th:first-child { padding-left: 0; }
.ftable .mname { font-weight: 600; white-space: nowrap; }
.ftable .mname small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.bcell { min-width: 96px; }
.bcell .v { font-size: 14px; font-weight: 650; display: block; margin-bottom: 5px; }
.bcell .mini { height: 6px; overflow: visible; }
.bcell .mini u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: .5; border-radius: 1px; }
.ftable tr.clickable { cursor: pointer; }
.ftable tr.clickable:hover td { background: var(--panel-2); }

.insights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.insights li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14px; color: var(--ink); }
.insights li svg { width: 20px; height: 20px; margin-top: 1px; }
.insights li.good svg { color: var(--good); } .insights li.warn svg { color: var(--warn); } .insights li.crit svg { color: var(--crit); } .insights li.info svg { color: var(--muted); }

.multiples { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.multiple { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 12px 4px; background: var(--panel-2); }
.multiple-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; }
.multiple-head span { color: var(--muted); font-weight: 500; }
.multiple .chart { height: 130px; }

/* ───────────── Table ───────────── */
.table-wrap { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-s); }
table.records { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.records th {
  position: sticky; top: 0; z-index: 1; background: var(--panel-2); text-align: right;
  font-weight: 550; color: var(--ink-2); border-bottom: 1px solid var(--line); padding: 0;
}
.records th button { all: unset; display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; cursor: pointer; white-space: nowrap; }
.records th button:focus-visible { outline: 2px solid var(--fa); outline-offset: -2px; }
.records th[aria-sort] button::after { content: ""; display: inline-block; margin-left: 6px; border: 4px solid transparent; vertical-align: 1px; }
.records th[aria-sort="ascending"] button::after { border-bottom-color: currentColor; vertical-align: 3px; }
.records th[aria-sort="descending"] button::after { border-top-color: currentColor; vertical-align: -1px; }
.records td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--grid); white-space: nowrap; }
.records th:nth-child(-n+2), .records td:nth-child(-n+2) { text-align: left; }
.records tbody tr:hover td { background: var(--panel-2); }
/* Date stays visible while the table scrolls sideways on small screens */
.records th:first-child, .records td:first-child { position: sticky; left: 0; background: var(--panel); box-shadow: 1px 0 0 var(--grid); }
.records th:first-child { z-index: 2; background: var(--panel-2); }
.records tbody tr:hover td:first-child { background: var(--panel-2); }
.shift-tag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font-weight: 700; font-size: 12px; color: #fff; }
.shift-tag.A { background: var(--shA); }
.shift-tag.B { background: var(--shB); color: #1a1a1a; }
.dim { color: var(--muted); }

.btn {
  border: 1px solid var(--line); background: var(--panel); padding: 7px 12px; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 550; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: var(--ink-2); }
.btn svg { width: 15px; height: 15px; }

/* Guide */
.guide { width: 100%; border-collapse: collapse; font-size: 14px; }
.guide th { text-align: left; font-size: 12px; font-weight: 550; color: var(--muted); padding: 0 14px 10px 0; }
.guide td { padding: 12px 14px 12px 0; border-top: 1px solid var(--line); vertical-align: top; }
.guide td:first-child { font-weight: 600; white-space: nowrap; }
.loss-no { display: inline-block; font-size: 12px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }

/* Empty */
.empty { text-align: center; padding: 56px 20px; }
.empty h2 { font-size: 20px; margin-bottom: 6px; }
.empty p { color: var(--muted); margin-bottom: 16px; }

/* Notes dialog */
dialog {
  border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px 28px; max-width: 640px; width: calc(100% - 32px);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(10, 16, 22, .45); backdrop-filter: blur(2px); }
dialog h2 { font-size: 20px; margin-bottom: 4px; }
dialog ul { padding-left: 18px; margin: 14px 0 20px; display: flex; flex-direction: column; gap: 10px; }
dialog li { line-height: 1.55; }
dialog[open] { animation: viewIn .3s var(--ease); }

/* ───────────── Responsive ───────────── */
@media (max-width: 1280px) {
  .span-7, .span-5, .span-8, .span-4 { grid-column: span 12; }
  .span-6 { grid-column: span 6; }
}
@media (max-width: 1100px) {
  .equation { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
  .equation .op { display: none; }
  .oee-block { grid-column: 1 / -1; order: -1; padding-left: 0; }
  /* 5 stats: three on the first row, two wider ones on the second */
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stat { grid-column: span 2; }
  .stat:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .rail { min-width: 0; position: static; height: auto; padding: 10px 0 10px; gap: 10px; overflow: visible; }
  .rail-top { padding: 0 16px; }
  .brand { gap: 10px; padding: 0; }
  .tpl-mobile { display: flex; }
  .brand-logo { width: 34px; height: 42px; padding: 3px; border-radius: 8px; }
  .brand-name { font-size: 16px; }
  .brand-sub { display: none; }
  /* Machine menu becomes a grid of tiles: every machine visible, no scrolling */
  .nav {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px;
    padding: 0 16px; min-width: 0;
  }
  .nav-group { display: none; }
  .nav-item {
    width: auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 8px 11px 9px; border-radius: 10px; background: var(--rail-2); white-space: nowrap;
  }
  .nav-item[aria-current="page"] { background: var(--rail-ink); color: var(--rail); }
  .nav-item[aria-current="page"] .nav-value { color: var(--rail); }
  .nav-item[aria-current="page"]::before { display: none; }
  .nav-stage, .nav-value small, .nav-name .long { display: none; }
  .nav-name .short { display: inline; }
  .nav-name { font-size: 12px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav-name .dot { margin-right: 5px; width: 6px; height: 6px; }
  .nav-value { font-size: 20px; line-height: 1.1; text-align: left; }
  .rail-foot { display: none; }
  main { padding: 18px 16px 40px; }
  .span-6 { grid-column: span 12; }
  .flow { grid-template-columns: 1fr; gap: 10px; }
  .flow-links { display: none; }
  .page-title { font-size: 24px; }
  .topbar { margin-bottom: 16px; }
}
@media (max-width: 680px) {
  .nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Filters: full-width rows with evenly sized buttons */
  .controls { width: 100%; gap: 8px; }
  .controls .seg { display: flex; flex: 1 1 100%; }
  .controls .seg button { flex: 1; padding: 7px 6px; }
  #shiftSeg { flex: 1 1 0; }
  #basisSeg { order: 1; } /* keeps the theme button on the shift row */
  .dates { display: flex; flex: 1 1 100%; justify-content: space-between; }
  .dates input { width: auto; flex: 1; min-width: 0; }

  /* Hero: OEE on top, the three factors side by side underneath */
  .hero { padding: 20px 18px 18px; border-radius: var(--radius-m); }
  .equation { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
  .factor-name { font-size: 12px; gap: 5px; }
  .factor-name i { width: 7px; height: 7px; }
  .factor-num { font-size: 27px; margin: 6px 0 9px; }
  .factor-bench { font-size: 11px; }
  .oee-num { font-size: 72px; }
  .verdict { margin-top: 18px; padding-top: 14px; }
  .verdict p { font-size: 14px; }

  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat, .stat:nth-child(n+4) { grid-column: span 1; }
  .stat:last-child { grid-column: 1 / -1; }
  .stat { padding: 10px 14px; }
  .stat-value { font-size: 20px; }

  .card { padding: 16px; }
  .card-head .seg { width: 100%; overflow-x: auto; }
  .card-head .seg button { flex: 1; padding: 6px 4px; font-size: 12px; }
  .ftable th:nth-child(n+2):nth-child(-n+4), .ftable td:nth-child(n+2):nth-child(-n+4) { display: none; }
  .guide td:first-child { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 900px) {
  .tpl-mobile { gap: 6px; }
  .tpl-mobile button { min-width: 40px; height: 32px; padding: 0 8px; font-size: 12px; border-radius: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Templates T1–T4. M1 (above) is the default; each template below
   redefines the tokens and, where needed, the page structure.
   ═══════════════════════════════════════════════════════════════════ */
:root { --ring-track: var(--panel-2); }
[data-template]:not([data-template="m1"]) #themeBtn { display: none; }
.tpl { gap: 6px; }
.tpl button { min-width: 38px; padding: 0 6px; }
@media (max-width: 900px) {
  .tpl-mobile { gap: 5px; }
  .tpl-mobile button { min-width: 34px; height: 32px; padding: 0 4px; font-size: 12px; }
}

/* Gauges shared by T2 (rings) and T4 (arcs) */
.ring, .arc { width: 100%; height: auto; display: block; overflow: visible; }
.ring-val { transition: stroke-dashoffset 1.4s var(--ease); }
.ring-bench { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.arc-bench { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

/* Desktop top bar shared by T1, T2, T3 (T4 keeps a sidebar) */
@media (min-width: 901px) {
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .rail {
    position: sticky; top: 0; z-index: 20; height: auto; overflow: visible;
    flex-direction: row; align-items: center; gap: 20px; padding: 10px 28px;
  }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .brand { padding: 0; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .brand-logo { width: 34px; height: 42px; padding: 3px; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .brand-sub { display: none; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .brand-name { white-space: nowrap; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .nav { flex-direction: row; flex: 1; gap: 4px; min-width: 0; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) :is(.nav-group, .nav-stage, .nav-value small, .nav-name .long, .nav-item::before) { display: none; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .nav-name .short { display: inline; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .nav-item {
    width: auto; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 6px 12px; border-radius: 0; background: transparent;
  }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .nav-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .nav-value { font-size: 20px; text-align: left; line-height: 1.15; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .rail-foot { margin: 0; flex-direction: row; align-items: center; gap: 14px; padding: 0; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) :is(.tpl-caption, #genDate) { display: none; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .tpl-block { padding: 0; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) .rail-foot .link-btn { font-size: 12px; white-space: nowrap; }
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) main { width: 100%; max-width: 1480px; margin: 0 auto; padding-top: 30px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
  :is([data-template="t1"], [data-template="t2"], [data-template="t3"]) #openNotes { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   T1 · Executive Report
   White page, deep navy and muted gold, Source Serif headings and
   figures. Calm and authoritative, like a board-meeting pack.
   ═══════════════════════════════════════════════════════════════════ */
html:root[data-template="t1"] {
  color-scheme: light;
  --bg: #f2f3f6; --panel: #ffffff; --panel-2: #f6f7f9; --ink: #13213c; --ink-2: #3b4863;
  --muted: #677290; --line: #dde2ea; --grid: #edf0f4;
  --rail: #ffffff; --rail-2: #f2f4f8; --rail-ink: #13213c; --rail-muted: #677290;
  --brand: #a8834a;
  --fa: #2a78d6; --fp: #eb6834; --fq: #1baf7a; --foee: #13213c;
  --shA: #4a3aa7; --shB: #eda100;
  --good: #1d7a4b; --warn: #9a6200; --crit: #c2362f;
  --good-bg: #e4f3ea; --warn-bg: #fbf1de; --crit-bg: #fbe7e5;
  --neutral-bar: #b3bccb; --ring-track: #e9edf3;
  --seq-0: #e3eefb; --seq-1: #9ec5f4; --seq-2: #5598e7; --seq-3: #256abf; --seq-4: #0d366b;
  --radius-l: 4px; --radius-m: 4px; --radius-s: 2px;
  --shadow: 0 1px 2px rgba(19, 33, 60, .05);
  --font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Source Serif 4", Georgia, "Times New Roman", serif;
}
[data-template="t1"] .rail { border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(19, 33, 60, .03); }
[data-template="t1"] .brand-name { font-weight: 600; font-size: 19px; }
[data-template="t1"] .nav-name { color: var(--rail-muted); font-weight: 600; }
[data-template="t1"] .nav-value { font-weight: 600; }
[data-template="t1"] .nav-item:hover { background: var(--rail-2); }
[data-template="t1"] .nav-item[aria-current="page"] .nav-name { color: var(--ink); }
[data-template="t1"] .tpl button { background: #fff; border-color: var(--line); color: var(--ink); border-radius: 2px; }
[data-template="t1"] .tpl button:hover { border-color: var(--ink); }
[data-template="t1"] .tpl button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-template="t1"] .link-btn { color: var(--ink-2); }
[data-template="t1"] .brand-logo { box-shadow: 0 0 0 1px var(--line); border-radius: 3px; }
[data-template="t1"] .page-title { font-size: 36px; font-weight: 600; letter-spacing: -.01em; }
[data-template="t1"] .card { border-radius: 4px; padding: 24px 26px; }
[data-template="t1"] .card-title { font-family: var(--font-num); font-size: 19px; font-weight: 600; }
[data-template="t1"] :is(.seg, .dates, .btn, .icon-btn, .table-wrap, .multiple, .seg button) { border-radius: 2px; }
[data-template="t1"] .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
[data-template="t1"] .records th { background: #f3f5f9; }
@media (min-width: 901px) {
  [data-template="t1"] .nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--brand); }
}

.rp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 44px; padding: 36px 40px; border-top: 3px solid var(--ink); }
.rp-kicker { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.rp-big { font-family: var(--font-num); font-size: clamp(80px, 8vw, 120px); font-weight: 500; line-height: .95; letter-spacing: -.025em; color: var(--ink); margin-top: 10px; }
.rp-big small { font-size: .34em; font-weight: 500; margin-left: 4px; color: var(--ink-2); }
.rp-rule { display: block; width: 64px; height: 2px; background: var(--brand); margin: 22px 0 18px; }
.rp-summary { font-family: var(--font-num); font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; margin-bottom: 18px; }
.rp-summary strong { color: var(--ink); font-weight: 600; }
.rp-league, .rp-factors { border-left: 1px solid var(--line); padding-left: 40px; }
.rp-lhead, .rp-row { display: grid; grid-template-columns: 40px minmax(0, 1.3fr) minmax(0, 2fr) 84px; gap: 18px; align-items: center; }
.rp-lhead { font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.rp-lhead span:last-child { text-align: right; }
.rp-row { width: 100%; text-align: left; padding: 15px 0; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease); }
.rp-row:hover { background: var(--panel-2); }
.rp-rank { font-family: var(--font-num); font-size: 22px; font-weight: 600; color: var(--brand); text-align: center; }
.rp-mname { font-family: var(--font-num); font-size: 18px; font-weight: 600; }
.rp-mname small { display: block; font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--muted); }
.rp-bar { position: relative; display: block; height: 6px; background: var(--grid); }
.rp-bar b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width 1.2s var(--ease); }
.rp-bar u { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--brand); }
.rp-val { font-family: var(--font-num); font-size: 26px; font-weight: 600; text-align: right; }
.rp-val small { font-size: 14px; color: var(--ink-2); }
.rp-factors { display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.rp-fhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rp-fname { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.rp-fname i { width: 10px; height: 10px; border-radius: 1px; display: inline-block; }
.rp-fval { font-family: var(--font-num); font-size: 42px; font-weight: 500; line-height: 1; }
.rp-fval small { font-size: 17px; color: var(--ink-2); margin-left: 2px; }
.rp-f .rp-bar { height: 8px; margin: 12px 0 9px; }
.rp-fnote { font-size: 13px; color: var(--muted); }
.rp-figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.rp-figures > div { padding: 18px 22px; border-left: 1px solid var(--line); min-width: 0; }
.rp-figures > div:first-child { border-left: 0; }
.rp-figures small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.rp-figures b { display: block; font-family: var(--font-num); font-size: 32px; font-weight: 600; line-height: 1.2; }
.rp-figures em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   T2 · Glass Command Center
   Midnight gradient, frosted-glass panels, glowing ring gauges.
   Outfit for figures, Manrope for text.
   ═══════════════════════════════════════════════════════════════════ */
html:root[data-template="t2"] {
  color-scheme: dark;
  --bg: #070b1d; --panel: #121935; --panel-2: #1a2246; --ink: #eef1ff; --ink-2: #b6bee4;
  --muted: #8a94c0; --line: rgba(255, 255, 255, .11); --grid: rgba(255, 255, 255, .06);
  --rail: rgba(14, 19, 44, .62); --rail-2: rgba(255, 255, 255, .07); --rail-ink: #eef1ff; --rail-muted: #8a94c0;
  --brand: #5eead4;
  --fa: #3987e5; --fp: #d95926; --fq: #199e70; --foee: #eef1ff;
  --shA: #9085e9; --shB: #c98500;
  --good: #4cc08a; --warn: #e0a640; --crit: #ef7a74;
  --good-bg: rgba(76, 192, 138, .15); --warn-bg: rgba(224, 166, 64, .15); --crit-bg: rgba(239, 122, 116, .15);
  --neutral-bar: #4a5480; --ring-track: rgba(255, 255, 255, .09);
  --seq-0: #1a2246; --seq-1: #184f95; --seq-2: #2a78d6; --seq-3: #6da7ec; --seq-4: #cde2fb;
  --radius-l: 24px; --radius-m: 20px; --radius-s: 12px;
  --shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Outfit", "Manrope", system-ui, sans-serif;
}
[data-template="t2"] body {
  background:
    radial-gradient(1100px 700px at 6% -12%, rgba(56, 189, 248, .20), transparent 60%),
    radial-gradient(900px 620px at 100% 0%, rgba(139, 92, 246, .22), transparent 60%),
    radial-gradient(1000px 700px at 50% 115%, rgba(45, 212, 191, .12), transparent 60%),
    #070b1d;
  background-attachment: fixed;
}
[data-template="t2"] .card {
  background: rgba(255, 255, 255, .045); border: 1px solid var(--line); border-radius: 20px;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow);
}
[data-template="t2"] .card-title { font-family: var(--font-num); font-size: 17px; font-weight: 600; }
[data-template="t2"] .page-title { font-size: 36px; font-weight: 600; letter-spacing: -.01em; }
[data-template="t2"] :is(.seg, .dates) { background: rgba(255, 255, 255, .05); border-radius: 999px; padding: 4px; backdrop-filter: blur(12px); }
[data-template="t2"] .seg button { border-radius: 999px; padding: 6px 14px; }
[data-template="t2"] .seg button[aria-pressed="true"] { background: var(--brand); color: #04121a; }
[data-template="t2"] .btn { background: rgba(255, 255, 255, .06); border-radius: 999px; }
[data-template="t2"] .table-wrap { border-radius: 14px; }
[data-template="t2"] .records th, [data-template="t2"] .records th:first-child { background: #151d3d; }
[data-template="t2"] .records td:first-child { background: #10162f; }
[data-template="t2"] .multiple { background: rgba(255, 255, 255, .04); border-radius: 14px; }
[data-template="t2"] .tpl button { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); border-radius: 999px; }
[data-template="t2"] .tpl button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #04121a; }
[data-template="t2"] .ring-val { filter: drop-shadow(0 0 6px rgba(190, 220, 255, .35)); }
[data-template="t2"] .ring-bench { fill: #121935; stroke: #fff; }
@media (min-width: 901px) {
  [data-template="t2"] .rail {
    top: 14px; width: min(1440px, calc(100% - 48px)); margin: 14px auto 0; padding: 8px 10px 8px 14px;
    background: rgba(14, 19, 44, .55); border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: var(--shadow);
  }
  [data-template="t2"] .brand-logo { width: 30px; height: 36px; border-radius: 8px; }
  [data-template="t2"] .nav { justify-content: center; }
  [data-template="t2"] .nav-item { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; }
  [data-template="t2"] .nav-item:hover { background: rgba(255, 255, 255, .06); }
  [data-template="t2"] .nav-name { font-size: 13px; font-weight: 500; }
  [data-template="t2"] .nav-value { font-size: 14px; font-weight: 600; color: var(--muted); }
  [data-template="t2"] .nav-item[aria-current="page"] { background: rgba(94, 234, 212, .13); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .4); }
  [data-template="t2"] .nav-item[aria-current="page"] .nav-value { color: var(--brand); }
}

.gl-ring { position: relative; display: block; width: 120px; height: 120px; flex: none; }
.gl-ring.md { width: 140px; height: 140px; }
.gl-ring.xl { width: 240px; height: 240px; margin: 4px auto 0; }
.gl-val { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; text-align: center; line-height: 1; }
.gl-val b { font-family: var(--font-num); font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.gl-val small { font-family: var(--font-num); font-size: 13px; margin: 3px 0 0 2px; color: var(--ink-2); }
.gl-val span { flex-basis: 100%; font-size: 12px; color: var(--muted); margin-top: 9px; }
.md .gl-val b { font-size: 32px; }
.xl .gl-val b { font-size: 58px; font-weight: 500; }
.xl .gl-val small { font-size: 20px; margin-top: 7px; }
.gl-center { display: flex; justify-content: center; margin-top: 16px; }
.gl-line { display: flex; flex-direction: column; }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-content: start; }
.gl-m {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; text-align: left;
  padding: 18px; color: var(--ink); cursor: pointer; transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.gl-m:hover { transform: translateY(-3px); border-color: rgba(94, 234, 212, .45); }
.gl-mbody { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.gl-mname { font-family: var(--font-num); font-size: 19px; font-weight: 600; }
.gl-mstage { font-size: 12px; color: var(--muted); }
.gl-fl { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.gl-fl i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.gl-fl b { margin-left: 4px; color: var(--ink); font-weight: 600; }
.gl-oee { display: flex; flex-direction: column; align-items: center; }
.gl-oee .card-head { width: 100%; }
.gl-verdict { text-align: center; max-width: 48ch; margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.gl-verdict strong { color: var(--ink); }
.gl-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-content: start; }
.gl-f { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 14px 20px; }
.gl-fname { display: flex; align-items: center; gap: 7px; font-weight: 600; margin-top: 6px; }
.gl-fname i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gl-fnote { font-size: 12px; color: var(--muted); }
.gl-figs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gl-figs .card { padding: 14px 18px; display: flex; flex-direction: column; min-width: 0; }
.gl-figs small { font-size: 12px; color: var(--muted); }
.gl-figs b { font-family: var(--font-num); font-size: 26px; font-weight: 600; line-height: 1.25; }
.gl-figs em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   T3 · Swiss Precision
   Black, white and one signal red. Strict ruled grid, no boxes,
   very large Hanken Grotesk figures.
   ═══════════════════════════════════════════════════════════════════ */
html:root[data-template="t3"] {
  color-scheme: light;
  --bg: #ffffff; --panel: #ffffff; --panel-2: #f3f3f3; --ink: #000000; --ink-2: #2b2b2b;
  --muted: #6b6b6b; --line: #d4d4d4; --grid: #ececec;
  --rail: #ffffff; --rail-2: #f3f3f3; --rail-ink: #000000; --rail-muted: #6b6b6b;
  --brand: #e30613;
  --fa: #2a78d6; --fp: #eb6834; --fq: #1baf7a; --foee: #000000;
  --shA: #4a3aa7; --shB: #eda100;
  --good: #1d7a4b; --warn: #9a6200; --crit: #c2362f;
  --good-bg: #e6f3eb; --warn-bg: #fbf1de; --crit-bg: #fbe7e5;
  --neutral-bar: #b5b5b5; --ring-track: #eeeeee;
  --seq-0: #e3eefb; --seq-1: #9ec5f4; --seq-2: #5598e7; --seq-3: #256abf; --seq-4: #0d366b;
  --radius-l: 0; --radius-m: 0; --radius-s: 0;
  --shadow: none;
  --font: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-num: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}
[data-template="t3"] .rail { border-bottom: 2px solid #000; }
[data-template="t3"] .brand-name { font-weight: 800; letter-spacing: -.01em; }
[data-template="t3"] .brand-logo { border-radius: 0; box-shadow: 0 0 0 1px #000; }
[data-template="t3"] .nav-name { font-weight: 500; color: var(--rail-muted); }
[data-template="t3"] .nav-value { font-weight: 700; letter-spacing: -.02em; }
[data-template="t3"] .nav-item[aria-current="page"] .nav-name { color: #000; }
[data-template="t3"] .tpl button { border-radius: 0; background: #fff; border-color: #000; color: #000; }
[data-template="t3"] .tpl button[aria-pressed="true"] { background: #000; color: #fff; }
[data-template="t3"] .link-btn { color: #000; }
[data-template="t3"] .view { column-gap: 32px; row-gap: 44px; }
[data-template="t3"] .page-title { font-size: 46px; font-weight: 800; letter-spacing: -.035em; }
[data-template="t3"] .card { background: transparent; border: 0; border-top: 2px solid #000; border-radius: 0; padding: 16px 0 0; }
[data-template="t3"] .card-title { font-size: 15px; font-weight: 700; }
[data-template="t3"] :is(.seg, .dates, .btn, .icon-btn, .chip, .table-wrap, .multiple, .seg button) { border-radius: 0; }
[data-template="t3"] :is(.seg, .dates, .btn, .table-wrap) { border-color: #000; }
[data-template="t3"] .seg button[aria-pressed="true"] { background: #000; color: #fff; }
[data-template="t3"] .multiple { background: #fff; border-color: var(--line); }
@media (min-width: 901px) {
  [data-template="t3"] .nav { gap: 0; }
  [data-template="t3"] .nav-item { border-left: 1px solid var(--line); padding: 4px 14px; }
  [data-template="t3"] .nav-item:hover { background: var(--panel-2); }
  [data-template="t3"] .nav-item[aria-current="page"] { box-shadow: inset 0 3px 0 var(--brand); }
  [data-template="t3"] .nav-value { font-size: 24px; }
}

.sw-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 4px solid #000; }
.sw-cell { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 24px 4px; border-left: 1px solid #000; min-width: 0; }
.sw-cell:first-child { border-left: 0; padding-left: 0; }
.sw-cell.is-weak::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--brand); }
.sw-label { font-size: 14px; font-weight: 700; }
.sw-giant { font-size: clamp(64px, 7.4vw, 112px); font-weight: 700; line-height: .9; letter-spacing: -.055em; }
.sw-giant small { font-size: .3em; font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.sw-bar { position: relative; display: block; height: 6px; background: #eee; }
.sw-bar b { position: absolute; inset: 0 auto 0 0; width: 0; transition: width 1.2s var(--ease); }
.sw-bar u { position: absolute; top: -5px; bottom: -5px; width: 2px; background: #000; }
.sw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.sw-weak { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 700; }
.sw-weak::before { content: ""; width: 8px; height: 8px; background: var(--brand); }
.sw-verdict { margin: 0; font-size: 22px; line-height: 1.45; max-width: 72ch; color: #000; }
.sw-verdict strong { font-weight: 700; }
.sw-figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #000; border-bottom: 1px solid #000; }
.sw-figures > div { padding: 14px 20px 16px; border-left: 1px solid var(--line); min-width: 0; }
.sw-figures > div:first-child { border-left: 0; padding-left: 0; }
.sw-figures small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.sw-figures b { display: block; font-size: 36px; font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.sw-figures em { font-style: normal; font-size: 12px; color: var(--muted); }
.sw-matrix { border-top: 4px solid #000; }
.sw-row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) repeat(3, minmax(0, 1.1fr)) minmax(0, 1fr);
  gap: 0 26px; align-items: center; width: 100%; padding: 18px 0; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line); color: #000; cursor: pointer;
  transition: background-color .2s var(--ease);
}
button.sw-row:hover { background: #f5f5f5; }
.sw-head { font-size: 12px; font-weight: 700; color: var(--muted); padding: 10px 0; border-bottom: 1px solid #000; cursor: default; }
.sw-m { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.sw-m small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.sw-n { display: flex; flex-direction: column; gap: 8px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.sw-n .sw-bar { width: 100%; }
.sw-oee { font-size: 52px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.sw-total { border-top: 2px solid #000; border-bottom: 0; cursor: default; }
.sw-notes { border-top: 2px solid #000; }
.sw-note { display: flex; gap: 14px; align-items: baseline; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.sw-mark { flex: none; width: 10px; height: 10px; background: #000; }
.sw-mark.crit { background: var(--brand); }
.sw-mark.warn { background: #eda100; }
.sw-mark.good { background: var(--good); }

/* ═══════════════════════════════════════════════════════════════════
   T4 · Midnight & Gold
   Near-black, champagne gold hairlines, Cormorant Garamond figures,
   Jost text. Keeps a sidebar; everything else is centred and quiet.
   ═══════════════════════════════════════════════════════════════════ */
html:root[data-template="t4"] {
  color-scheme: dark;
  --bg: #0a0a0c; --panel: #111114; --panel-2: #17171b; --ink: #f2ede3; --ink-2: #c4bcaa;
  --muted: #8f887a; --line: #2a2721; --grid: #1c1a17;
  --rail: #08080a; --rail-2: #141418; --rail-ink: #f2ede3; --rail-muted: #8f887a;
  --brand: #c9a96e;
  --fa: #3987e5; --fp: #d95926; --fq: #199e70; --foee: #c9a96e;
  --shA: #9085e9; --shB: #c98500;
  --good: #6fcf97; --warn: #e0b45c; --crit: #ef7a74;
  --good-bg: rgba(111, 207, 151, .12); --warn-bg: rgba(224, 180, 92, .12); --crit-bg: rgba(239, 122, 116, .12);
  --neutral-bar: #4a4640; --ring-track: #24221e;
  --seq-0: #1c1a17; --seq-1: #4d3f26; --seq-2: #8a6f3f; --seq-3: #c9a96e; --seq-4: #ecdcb8;
  --radius-l: 2px; --radius-m: 2px; --radius-s: 2px;
  --shadow: none;
  --font: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Cormorant Garamond", Georgia, serif;
  --hair: rgba(201, 169, 110, .18);
}
[data-template="t4"] .rail { border-right: 1px solid var(--hair); }
[data-template="t4"] .brand-name { font-size: 24px; font-weight: 500; letter-spacing: .01em; }
[data-template="t4"] .brand-sub { letter-spacing: .06em; }
[data-template="t4"] .brand-logo { border-radius: 2px; }
[data-template="t4"] .nav-name { font-weight: 400; letter-spacing: .04em; }
[data-template="t4"] .nav-value { font-weight: 500; font-size: 26px; }
[data-template="t4"] .nav-item[aria-current="page"] { background: rgba(201, 169, 110, .07); }
[data-template="t4"] .nav-item[aria-current="page"] .nav-value { color: var(--brand); }
[data-template="t4"] .dot { display: none; }
[data-template="t4"] .tpl button { background: transparent; border-color: rgba(201, 169, 110, .35); color: var(--ink); border-radius: 2px; font-weight: 500; }
[data-template="t4"] .tpl button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #0a0a0c; }
[data-template="t4"] .page-title { font-size: 46px; font-weight: 500; letter-spacing: 0; }
[data-template="t4"] .card { background: var(--panel); border-color: var(--hair); border-radius: 2px; }
[data-template="t4"] .card-title { font-size: 14px; font-weight: 500; letter-spacing: .08em; }
[data-template="t4"] :is(.seg, .dates, .btn) { background: var(--panel); border-color: var(--hair); border-radius: 2px; }
[data-template="t4"] .seg button { border-radius: 1px; font-weight: 400; letter-spacing: .03em; }
[data-template="t4"] .seg button[aria-pressed="true"] { background: var(--brand); color: #0a0a0c; }
[data-template="t4"] :is(.table-wrap, .multiple) { border-color: var(--hair); border-radius: 2px; }
[data-template="t4"] .records th { background: #151417; }
[data-template="t4"] .multiple { background: #0e0e11; }
@media (max-width: 900px) {
  [data-template="t4"] .nav-item[aria-current="page"] { background: var(--brand); color: #0a0a0c; }
  [data-template="t4"] .nav-item[aria-current="page"] .nav-value { color: #0a0a0c; }
}

.gd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 20px 6px; }
.gd-kicker { font-family: var(--font); font-size: 13px; font-weight: 400; letter-spacing: .24em; color: var(--brand); }
.gd-big { font-family: var(--font-num); font-size: clamp(112px, 12vw, 176px); font-weight: 300; line-height: .92; letter-spacing: -.01em; color: var(--ink); margin-top: 10px; }
.gd-big small { font-size: .32em; color: var(--brand); margin-left: 6px; font-weight: 300; }
.gd-rule { display: block; width: 120px; height: 1px; background: var(--brand); margin: 18px 0 14px; }
.gd-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .08em; color: var(--ink-2); }
.gd-status svg { width: 13px; height: 13px; }
.gd-status.good svg { color: var(--good); } .gd-status.warn svg { color: var(--warn); } .gd-status.crit svg { color: var(--crit); }
.gd-verdict { font-family: var(--font-num); font-style: italic; font-size: 22px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin-top: 16px; }
.gd-verdict strong { font-style: normal; font-weight: 600; color: var(--ink); }
.gd-factors, .gd-collection { display: grid; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.gd-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-collection { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gd-f, .gd-m { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 30px 14px 28px; border-left: 1px solid var(--hair); min-width: 0; }
.gd-f:first-child, .gd-m:first-child { border-left: 0; }
.gd-m { background: none; border-top: 0; border-right: 0; border-bottom: 0; color: var(--ink); cursor: pointer; transition: background-color .35s var(--ease); }
.gd-m:hover { background: rgba(201, 169, 110, .05); }
.gd-arcwrap { position: relative; display: block; width: 100%; max-width: 220px; }
.gd-m .gd-arcwrap { max-width: 180px; }
.gd-fval, .gd-mval { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--font-num); font-weight: 400; line-height: 1; }
.gd-fval { font-size: 52px; }
.gd-mval { font-size: 40px; }
.gd-fval small, .gd-mval small { font-size: .4em; color: var(--brand); margin-left: 2px; }
.gd-fname, .gd-mname { font-size: 13px; letter-spacing: .16em; color: var(--brand); }
.gd-fnote { font-size: 13px; color: var(--muted); max-width: 30ch; }
.gd-apq { display: flex; gap: 16px; font-family: var(--font-num); font-size: 19px; }
.gd-apq small { display: block; font-family: var(--font); font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.gd-figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gd-figures > div { text-align: center; padding: 16px 12px; border-left: 1px solid var(--hair); min-width: 0; }
.gd-figures > div:first-child { border-left: 0; }
.gd-figures small { display: block; font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.gd-figures b { display: block; font-family: var(--font-num); font-size: 38px; font-weight: 500; line-height: 1.2; }
.gd-figures em { font-style: normal; font-size: 12px; color: var(--muted); }

/* ───────────── Responsive for T1–T4 ───────────── */
@media (max-width: 1280px) {
  .gl-factors { grid-column: span 12; }
}
@media (max-width: 1100px) {
  .rp-hero { grid-template-columns: minmax(0, 1fr); padding: 28px 28px; }
  .rp-league, .rp-factors { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; }
  :is(.rp-figures, .sw-figures, .gd-figures) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :is(.rp-figures, .sw-figures, .gd-figures) > div { grid-column: span 2; }
  :is(.rp-figures, .sw-figures, .gd-figures) > div:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--line); }
  .rp-figures > div:nth-child(4), .gd-figures > div:nth-child(4) { border-left: 0; }
  .sw-figures > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .sw-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .sw-cell:nth-child(n+3) { border-top: 1px solid #000; padding-top: 18px; margin-top: 18px; }
  .gd-collection { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-m:nth-child(4) { border-left: 0; }
  .gd-m:nth-child(n+4) { border-top: 1px solid var(--hair); }
}
@media (max-width: 900px) {
  .sw-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
  .sw-row > :nth-child(n+3):nth-child(-n+5) { display: none; }
}
@media (max-width: 700px) {
  .gl-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-factors { gap: 10px; }
  .gl-f { padding: 16px 6px 14px; gap: 6px; }
  .gl-ring.md { width: 96px; height: 96px; }
  .md .gl-val b { font-size: 22px; }
  .md .gl-val small { font-size: 11px; }
  .gl-fname { font-size: 12px; }
  .gl-fnote { font-size: 11px; }
  .gd-factors { grid-template-columns: minmax(0, 1fr); }
  .gd-f { border-left: 0; border-top: 1px solid var(--hair); }
  .gd-f:first-child { border-top: 0; }
}
@media (max-width: 560px) {
  .rp-hero { padding: 22px 18px; }
  .rp-big { font-size: 84px; }
  .rp-lhead { display: none; }
  .rp-row { grid-template-columns: 30px minmax(0, 1fr) 72px; grid-template-areas: "rank name val" ". bar bar"; gap: 8px 12px; }
  .rp-rank { grid-area: rank; } .rp-mname { grid-area: name; } .rp-val { grid-area: val; } .rp-row .rp-bar { grid-area: bar; }
  .rp-fval { font-size: 34px; }
  :is(.rp-figures, .sw-figures, .gd-figures) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.rp-figures, .sw-figures, .gd-figures) > div, :is(.rp-figures, .sw-figures, .gd-figures) > div:nth-child(n+4) { grid-column: span 1; }
  :is(.rp-figures, .sw-figures, .gd-figures) > div:last-child { grid-column: 1 / -1; }
  :is(.rp-figures, .gd-figures) > div:nth-child(odd) { border-left: 0; }
  :is(.rp-figures, .gd-figures) > div:nth-child(4) { border-left: 1px solid var(--line); }
  :is(.rp-figures, .sw-figures, .gd-figures) > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sw-figures > div { padding-left: 12px; }
  .sw-figures > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sw-figures b, .rp-figures b, .gd-figures b { font-size: 26px; }
  .gl-m { grid-template-columns: 100px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .gl-m .gl-ring { width: 100px; height: 100px; }
  .gl-ring.xl { width: 210px; height: 210px; }
  .xl .gl-val b { font-size: 48px; }
  .gl-grid { grid-template-columns: minmax(0, 1fr); }
  .sw-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sw-cell { padding: 14px 12px 4px; }
  .sw-cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sw-giant { font-size: 54px; }
  .sw-verdict { font-size: 18px; }
  .sw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sw-row > :nth-child(6) { display: none; }
  .sw-oee { font-size: 40px; }
  .gd-big { font-size: 104px; }
  .gd-collection { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-m { border-left: 1px solid var(--hair); border-top: 1px solid var(--hair); padding: 22px 8px; }
  .gd-m:nth-child(odd) { border-left: 0; }
  .gd-m:first-child, .gd-m:nth-child(2) { border-top: 0; }
  .gd-mval { font-size: 32px; }
  .gd-apq { gap: 10px; font-size: 16px; }
  .gd-figures > div { padding: 14px 8px; }
}