/* ====
   DisplayInput — "Instrument-Grade" Design System
   A precision-measurement aesthetic for a monitor/TV specifications site.
   Drop-in tokens + components shared across single, comparison, index,
   archive and tool pages.
   ==== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* Surfaces */
  --bg:#F4F6F8;
  --surface:#FFFFFF;
  --surface-2:#FAFBFC;
  --border:#E4E8EC;
  --border-strong:#D3D9DF;
  /* Ink */
  --ink:#0B1220;
  --ink-2:#475467;
  --ink-3:#8A94A6;
  /* Brand — "signal blue" + deep navy (the input/display world) */
  --brand:#1B56F0;
  --brand-ink:#0E1B3A;
  --brand-soft:#EAF0FF;
  --brand-soft-2:#DCE6FF;
  /* Semantic */
  --good:#12924A;  --good-soft:#E6F5EC;
  --warn:#B96E00;  --warn-soft:#FBEFD8;
  --bad:#D63333;   --bad-soft:#FBE7E7;
  --gold:#EFA017;
  /* Type */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Space Grotesk',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Radius / shadow */
  --r:14px; --r-sm:9px; --r-xs:6px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(11,18,32,.04),0 1px 3px rgba(11,18,32,.06);
  --sh-2:0 4px 14px rgba(11,18,32,.07);
  --ring:0 0 0 3px rgba(27,86,240,.18);
}

*{box-sizing:border-box}
.di{
  font-family:var(--sans);color:var(--ink);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  background:var(--bg);
}
.di-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.di p{color:var(--ink-2);margin:0 0 12px}
.di a{color:var(--brand);text-decoration:none}
.di a:hover{text-decoration:underline}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* == Breadcrumb ==== */
.di-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:12.5px;color:var(--ink-3);padding:18px 0 10px;font-weight:500}
.di-crumb a{color:var(--ink-2)}
.di-crumb .sep{color:var(--border-strong)}
.di-crumb [aria-current]{color:var(--ink)}

/* == Hero ==== */
.di-hero{display:grid;grid-template-columns:300px 1fr;gap:32px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:28px;box-shadow:var(--sh-1);margin-bottom:22px}
.di-hero-media{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0%,#fff 0%,var(--surface-2) 100%);
  border:1px solid var(--border);border-radius:var(--r-sm);padding:18px;position:relative}
.di-hero-media img{max-width:100%;height:auto;max-height:240px;object-fit:contain;
  mix-blend-mode:multiply}
.di-verdict-tag{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);
  background:var(--brand-ink);color:#fff}
.di-eyebrow{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:10px}
.di-chip{font-family:var(--sans);font-size:11.5px;font-weight:600;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand-ink);
  border:1px solid var(--brand-soft-2);text-transform:none;letter-spacing:0}
.di-chip.cat{background:#EEF1F4;color:var(--ink-2);border-color:var(--border)}
h1.di-title{font-family:var(--display);font-weight:600;font-size:31px;line-height:1.12;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
.di-keyspecs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0 20px}
.di-keyspec{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px 12px}
.di-keyspec .k{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.di-keyspec .v{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums}
.di-actions{display:flex;flex-wrap:wrap;gap:10px}
.di-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;
  font-size:13.5px;padding:10px 18px;border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;
  transition:.15s}
.di a.di-btn-primary,.di .di-btn-primary{background:var(--brand);color:#fff}
.di a.di-btn-primary:hover{background:#1444cc;text-decoration:none}
.di a.di-btn-ghost,.di .di-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.di a.di-btn-ghost:hover{background:var(--surface-2);text-decoration:none}
.di-btn:focus-visible{outline:none;box-shadow:var(--ring)}

/* == Score gauge (signature instrument) ==== */
.di-gauge{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--brand-ink);
  border-radius:var(--r-sm);padding:16px 18px;color:#fff}
.di-gauge svg{flex:0 0 auto}
.di-gauge .meta{min-width:0}
.di-gauge .lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:#A9B6D6;margin-bottom:3px}
.di-gauge .verd{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.1}
.di-gauge .sub{font-size:12px;color:#9FB0D4;margin-top:3px}
.gauge-num{font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}

/* == Sticky sub-nav ==== */
.di-subnav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:6px;margin:0 0 22px;display:flex;gap:4px;
  overflow-x:auto;box-shadow:var(--sh-1)}
.di-subnav a{flex:0 0 auto;font-size:13px;font-weight:600;color:var(--ink-2);
  padding:8px 16px;border-radius:var(--r-pill)}
.di-subnav a:hover{background:var(--surface-2);text-decoration:none}
.di .di-subnav a.on{background:var(--brand-ink);color:#fff}

/* == Card system ==== */
.di-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  margin-bottom:22px;box-shadow:var(--sh-1);overflow:hidden;scroll-margin-top:64px}
.di-card-hd{display:flex;align-items:center;gap:11px;padding:16px 22px;
  border-bottom:1px solid var(--border)}
.di-card-hd .ico{width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:var(--r-xs);background:var(--brand-soft);color:var(--brand);font-size:15px}
h2.di-card-ht{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;
  color:var(--ink);margin:0}
.di-card-hd .count{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:600;
  color:var(--ink-3);background:var(--surface-2);border:1px solid var(--border);
  padding:2px 8px;border-radius:var(--r-pill)}
.di-card-bd{padding:22px}

/* == Verdict / at-a-glance ==== */
.di-glance{font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.di-glance strong{color:var(--ink);font-weight:600}
.di-glance .lede{font-size:16.5px;color:var(--ink)}
.di-meta-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:16px;
  border-top:1px dashed var(--border)}
.di-meta-pill{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-xs);padding:6px 11px}
.di-meta-pill b{font-family:var(--mono);color:var(--ink);font-weight:600;margin-left:4px}
.di-source{font-size:12px;color:var(--ink-3);margin-top:14px;line-height:1.6}

/* == Metric bars (instrument readout) ==== */
.di-metrics{display:grid;gap:16px}
.di-metric{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline}
.di-metric .mlbl{font-weight:600;color:var(--ink);font-size:14px}
.di-metric .mhint{font-size:12px;color:var(--ink-3);grid-column:1;line-height:1.5}
.di-metric .mval{font-family:var(--mono);font-weight:600;font-size:14px;color:var(--ink);
  grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
.di-track{grid-column:1 / -1;height:8px;border-radius:var(--r-pill);background:#EDF0F3;
  position:relative;overflow:hidden;margin-top:4px}
.di-track .fill{position:absolute;inset:0 auto 0 0;border-radius:var(--r-pill)}
.di-track .fill.s-hi{background:linear-gradient(90deg,#16A34A,#22C07C)}
.di-track .fill.s-mid{background:linear-gradient(90deg,#C77700,#E0A52E)}
.di-track .fill.s-lo{background:linear-gradient(90deg,#D63333,#E96B6B)}
.di-track .ticks{position:absolute;inset:0;display:flex;justify-content:space-between;
  padding:0 10%;pointer-events:none}
.di-track .ticks i{width:1px;background:rgba(255,255,255,.7)}

/* == Score ring breakdown ==== */
.di-scoregrid{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center}
.di-scoregrid .bars{display:grid;gap:13px}
.di-scorebar .top{display:flex;justify-content:space-between;font-size:13.5px;
  font-weight:600;color:var(--ink);margin-bottom:5px}
.di-scorebar .top .n{font-family:var(--mono)}
.di-scorebar .tr{height:7px;border-radius:var(--r-pill);background:#EDF0F3;overflow:hidden}
.di-scorebar .tr i{display:block;height:100%;border-radius:var(--r-pill)}

/* == Two-column audience / pros-cons ==== */
.di-split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.di-panel{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.di-panel-hd{display:flex;align-items:center;gap:8px;padding:12px 16px;font-weight:600;
  font-size:14px}
.di-panel.good .di-panel-hd{background:var(--good-soft);color:var(--good)}
.di-panel.bad  .di-panel-hd{background:var(--bad-soft);color:var(--bad)}
.di-panel-bd{padding:6px 16px 14px}
.di-list{list-style:none;margin:0;padding:0}
.di-list li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);
  font-size:14px;color:var(--ink-2);line-height:1.55}
.di-list li:last-child{border-bottom:0}
.di-list .mk{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;
  place-items:center;font-size:11px;font-weight:700;margin-top:1px}
.di-list.good .mk{background:var(--good-soft);color:var(--good)}
.di-list.bad .mk{background:var(--bad-soft);color:var(--bad)}
.di-list b{color:var(--ink);font-weight:600}

/* audience cards */
.di-aud{display:grid;gap:11px}
.di-aud .row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;
  padding:13px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2)}
.di-aud .row .emo{font-size:18px;line-height:1.2}
.di-aud .row .ti{font-weight:600;font-size:13.5px;color:var(--ink)}
.di-aud .row .ds{font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.5}
.di-aud .row .tag{font-family:var(--mono);font-size:11px;font-weight:600;padding:3px 8px;
  border-radius:var(--r-pill);white-space:nowrap}
.di-aud.good .row .tag{background:var(--good-soft);color:var(--good)}
.di-aud.bad  .row .tag{background:var(--bad-soft);color:var(--bad)}

/* == Spec data sheet ==== */
.di-specgroup{border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:14px;
  overflow:hidden}
.di-specgroup>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:13px 16px;font-weight:600;font-size:14.5px;color:var(--ink);background:var(--surface-2);
  user-select:none}
.di-specgroup>summary::-webkit-details-marker{display:none}
.di-specgroup>summary .gi{width:26px;height:26px;border-radius:var(--r-xs);display:grid;
  place-items:center;background:#fff;border:1px solid var(--border);font-size:13px}
.di-specgroup>summary .gc{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.di-specgroup>summary .ch{transition:.2s;color:var(--ink-3)}
.di-specgroup[open]>summary .ch{transform:rotate(180deg)}
.di-spectable{width:100%;border-collapse:collapse;font-size:13.5px}
.di-spectable tr{border-top:1px solid var(--border)}
.di-spectable td{padding:11px 16px;vertical-align:top}
.di-spectable td.k{width:34%;color:var(--ink-2);font-weight:500;background:var(--surface-2)}
.di-spectable td.v{font-family:var(--mono);color:var(--ink);font-weight:500;
  font-variant-numeric:tabular-nums;white-space:pre-line}
.di-spectable td.m{width:38%;color:var(--ink-3);font-size:12.5px;line-height:1.5;font-family:var(--sans)}
.di-spectable .judge{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;
  border-radius:var(--r-pill);margin-right:6px;text-transform:uppercase;letter-spacing:.03em}
.judge.hi{background:var(--good-soft);color:var(--good)}
.judge.mid{background:var(--warn-soft);color:var(--warn)}
.judge.lo{background:var(--bad-soft);color:var(--bad)}

/* == FAQ accordion ==== */
.di-faq details{border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:10px;
  background:var(--surface)}
.di-faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:600;font-size:14.5px;
  color:var(--ink);display:flex;align-items:center;gap:12px}
.di-faq summary::-webkit-details-marker{display:none}
.di-faq summary .q{flex:1}
.di-faq summary .pm{flex:0 0 auto;width:22px;height:22px;border-radius:var(--r-xs);
  background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:15px;
  transition:.2s}
.di-faq details[open] summary .pm{transform:rotate(45deg)}
.di-faq .a{padding:0 18px 16px 52px;color:var(--ink-2);font-size:14px;line-height:1.65}

/* == Related / internal links ==== */
.di-rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.di-rel{display:block;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);overflow:hidden;transition:.15s}
.di-rel:hover{border-color:var(--brand-soft-2);box-shadow:var(--sh-2);text-decoration:none;
  transform:translateY(-2px)}
.di-rel .ph{aspect-ratio:4/3;background:var(--surface-2);display:grid;place-items:center;
  border-bottom:1px solid var(--border)}
.di-rel .ph img{max-width:84%;max-height:84%;object-fit:contain;mix-blend-mode:multiply}
.di-rel .bd{padding:11px 13px}
.di-rel .br{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.04em}
.di-rel .nm{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35;margin:3px 0 7px}
.di-rel .sc{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--good)}
.di-linkrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.di-linkrow a{font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--brand-soft-2)}
.di-linkrow a:hover{background:var(--brand-soft-2);text-decoration:none}

/* == Comparison table ==== */
.di-cmp{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1)}
.di-cmp-head{display:grid;position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:2px solid var(--border-strong)}
.di-cmp-col{padding:18px;text-align:center;border-left:1px solid var(--border)}
.di-cmp-col:first-child{border-left:0;text-align:left;background:var(--surface-2)}
.di-cmp-col img{max-height:120px;max-width:100%;object-fit:contain;mix-blend-mode:multiply}
.di-cmp-col .nm{font-family:var(--display);font-weight:600;font-size:15px;margin-top:10px;
  line-height:1.25}
.di-cmp-col .br{font-size:11px;color:var(--ink-3);text-transform:uppercase;font-weight:600;
  letter-spacing:.05em}
.di-cmp-score{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-family:var(--mono);
  font-weight:700;font-size:13px;padding:3px 11px;border-radius:var(--r-pill);
  background:var(--good-soft);color:var(--good)}
.di-cmp-row{display:grid;border-top:1px solid var(--border)}
.di-cmp-row:nth-child(even){background:var(--surface-2)}
.di-cmp-cell{padding:13px 16px;text-align:center;border-left:1px solid var(--border);
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink)}
.di-cmp-cell:first-child{border-left:0;text-align:left;font-family:var(--sans);font-weight:600;
  color:var(--ink-2);font-size:13px}
.di-cmp-cell.win{background:var(--good-soft);color:var(--good);font-weight:700;position:relative}
.di-cmp-cell.win::after{content:"WINS";position:absolute;top:3px;right:6px;font-size:8px;
  font-family:var(--sans);font-weight:700;letter-spacing:.05em;color:var(--good);opacity:.7}
.di-cmp-group{padding:11px 16px;font-family:var(--display);font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);background:var(--brand-ink);
  color:#fff;border-top:1px solid var(--border)}

/* == Index / archive cards ==== */
.di-section-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin:30px 0 16px}
.di-section-hd .eb{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--brand);margin-bottom:6px}
.di-section-hd h2{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.01em;
  color:var(--ink);margin:0}
.di-section-hd p{margin:5px 0 0;font-size:14px;color:var(--ink-3)}
.di-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.di-brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.di-brand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 12px;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);
  font-weight:600;font-size:13.5px;color:var(--ink);transition:.15s}
.di-brand:hover{border-color:var(--brand-soft-2);box-shadow:var(--sh-1);text-decoration:none;
  color:var(--brand-ink)}
.di-brand .ct{font-family:var(--mono);font-size:11px;color:var(--ink-3);font-weight:500}

/* == Responsive ==== */
@media(max-width:880px){
  .di-hero{grid-template-columns:1fr;gap:20px;padding:20px}
  .di-hero-media{max-width:260px;margin:0 auto}
  .di-scoregrid{grid-template-columns:1fr;gap:18px;text-align:center}
  .di-scoregrid .gaugewrap{margin:0 auto}
  .di-rel-grid,.di-grid{grid-template-columns:repeat(2,1fr)}
  .di-brand-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  h1.di-title{font-size:25px}
  .di-keyspecs{grid-template-columns:repeat(2,1fr)}
  .di-split{grid-template-columns:1fr}
  .di-spectable td.m{display:none}
  .di-spectable td.k{width:42%}
  .di-rel-grid{grid-template-columns:1fr 1fr}
  .di-cmp-cell,.di-cmp-col{font-size:11.5px;padding:10px 7px}
  .di-card-bd{padding:16px}
}