/* ------------------------------------------------------------------------- *
   Type Studio — informational website
   DR / Warp design language, ported 1:1 from the Flutter app (app/lib/theme/
   dr.dart + widgets/dr/). Source aesthetic: Designers Republic + Warp Records
   played as a fictional Japanese audio-conglomerate product catalog. Black
   stock + red ink + signal white + electric cyan/magenta/safety swatches.
   Hard rules everywhere, hard 0-blur drop-shadows, faux regulatory authority.

   Display: Barlow Condensed (light). Body: Inter. Chrome/telemetry: Space Mono.
 * ------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* DR palette — exact match to class DR in dr.dart */
  --paper: #0A0A0A;        /* black stock — page field */
  --paper-hi: #1A1A1A;     /* elevated panels (masthead, footer) */
  --module: #141414;       /* module/card backgrounds */
  --ink: #FF152E;          /* red type + rules + bars */
  --ink-faint: #E08A92;    /* de-emphasised soft red */
  --body: #EDEAE0;         /* bone — long-form reading text */
  --body-faint: #A8A49A;   /* muted bone — secondary text */
  --warp: #FFFFFF;         /* signal white — borders, fills, chevrons */
  --warp-deep: #D8D8D8;
  --cyan: #7FD8F0;
  --magenta: #E91A8C;
  --safety-yellow: #F5D300;
  --safety-green: #00A65E;
  --on-ink: #0A0A0A;       /* foreground on red ink bars (onColorFor) */

  /* spacing grid (DRGrid) */
  --tick: 4px;
  --nib: 8px;
  --pica: 12px;
  --line: 16px;
  --em: 24px;
  --leaf: 32px;
  --page: 48px;

  /* borders (DRBorders) */
  --b-hair: 0.75px;
  --b-thin: 1px;
  --b-thick: 1.5px;
  --b-rule: 2px;

  /* hard 0-blur drop-shadows (DRShadow) */
  --shadow-hard: 6px 6px 0 0 var(--paper);
  --shadow-hard-sm: 3px 3px 0 0 var(--paper);

  --col: 1000px;           /* content column width */
}

::selection { background: var(--ink); color: var(--on-ink); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* Column wrapper — full-bleed bars carry their own bg; the inner column
   keeps content aligned to a fixed measure with the DR responsive padding. */
.dr-inner {
  max-width: var(--col);
  margin: 0 auto;
  padding-left: var(--em);
  padding-right: var(--em);
}
@media (max-width: 600px) {
  .dr-inner { padding-left: var(--line); padding-right: var(--line); }
}

/* ---------- corporate bar (DRCorporateBar) ---------- */

.dr-corporate {
  background: var(--ink);
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--on-ink);
  text-transform: uppercase;
}
.dr-corporate .dr-inner {
  display: flex;
  align-items: center;
  gap: var(--line);
  padding-top: var(--tick);
  padding-bottom: var(--tick);
}
.dr-corporate .corp-mark { font-weight: 700; }
.dr-corporate .corp-mark .w { color: var(--warp); }
.dr-corporate .corp-spacer { flex: 1; }
.dr-corporate .corp-reg { color: var(--cyan); }
@media (max-width: 600px) { .dr-corporate .corp-reg { display: none; } }

/* ---------- masthead (DRMasthead) ---------- */

.dr-masthead { background: var(--paper-hi); border-bottom: var(--b-rule) solid var(--ink); }
.dr-masthead .dr-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--nib);
  padding-top: var(--line);
  padding-bottom: var(--pica);
}
.mh-titles { flex: 1; min-width: 0; }
.dr-masthead-title a { color: inherit; text-decoration: none; border-bottom: none; }
.dr-masthead-title a:hover { color: var(--warp); border-bottom: none; }
.dr-masthead-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.dr-masthead-edition {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 2px;
}
.dr-doccode {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink);
  white-space: nowrap;
  padding-top: 2px;
}
.dr-doccode::before,
.dr-doccode::after { content: "\266E"; color: var(--ink); margin: 0 6px; font-weight: 400; }

/* ---------- canvas (DRCanvas content padding) ---------- */

.dr-canvas { padding-top: var(--line); padding-bottom: var(--page); }

/* ---------- hero strap ---------- */

.dr-strap {
  display: flex;
  align-items: center;
  gap: var(--nib);
  margin-bottom: var(--line);
}
.dr-strap-num {
  background: var(--warp);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 2px var(--nib);
}
.dr-strap-text {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- wordmark (DRWordmark: TYPE / STUDIO ®) ---------- */

.dr-wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 12vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}
.dr-wordmark .slash { color: var(--warp); font-weight: 500; margin: 0 0.1em; }
.dr-wordmark .reg { font-family: 'Inter', sans-serif; font-size: 0.18em; margin-left: 0.04em; align-self: flex-start; }
.dr-wordmark .sup {
  font-family: 'Space Mono', monospace;
  font-size: 0.12em;
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.04em;
  margin-left: 0.06em;
  align-self: flex-start;
}

.dr-valueprop {
  font-size: 15px;
  color: var(--body);
  letter-spacing: 0.05px;
  margin: var(--line) 0 0;
}

/* ---------- dividers (DRDivider) ---------- */

.dr-rule   { height: var(--b-rule); background: var(--ink); border: 0; margin: var(--em) 0; }
.dr-solid  { height: 1px; background: var(--ink); border: 0; margin: var(--pica) 0; }

/* ---------- section header (DRSection) ---------- */

.dr-section {
  display: flex;
  align-items: center;
  gap: var(--pica);
  margin: var(--em) 0 var(--line);
}
.dr-section-num {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.7px;
  padding: var(--tick) var(--pica);
}
.dr-section-title {
  flex: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.dr-section-meta {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---------- operations ledger (What it does) ---------- */

.dr-ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pica); }
.dr-ops > .op-wide { grid-column: 1 / -1; }

.op-row {
  display: flex;
  border: var(--b-thick) solid var(--ink);
  background: var(--module);
  transition: transform 130ms ease, box-shadow 130ms ease;
}
.op-row:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-hard); }

.op-rail {
  flex-shrink: 0;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: var(--b-thick) solid var(--ink);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1;
  color: var(--on-ink);
}
.op-row.acc-cyan    .op-rail { background: var(--cyan); }
.op-row.acc-magenta .op-rail { background: var(--magenta); color: var(--warp); }
.op-row.acc-green   .op-rail { background: var(--safety-green); color: var(--warp); }
.op-row.acc-warp    .op-rail { background: var(--warp); }
.op-row.acc-yellow  .op-rail { background: var(--safety-yellow); }

.op-main { flex: 1; min-width: 0; padding: var(--pica) var(--line) var(--line); }

.op-kicker {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--nib);
}
.op-beta {
  display: inline-block;
  padding: 1px 5px;
  margin-left: 4px;
  border: var(--b-thin) solid var(--ink);
  color: var(--ink);
  font-size: 8px;
  letter-spacing: 1px;
  vertical-align: 1px;
}

.op-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pica);
  flex-wrap: wrap;
}
.op-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.op-flow {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px var(--nib);
  color: var(--on-ink);
}
.op-flow .ar { margin: 0 4px; }
.op-row.acc-cyan    .op-flow { background: var(--cyan); }
.op-row.acc-magenta .op-flow { background: var(--magenta); color: var(--warp); }
.op-row.acc-green   .op-flow { background: var(--safety-green); color: var(--warp); }
.op-row.acc-warp    .op-flow { background: var(--warp); }
.op-row.acc-yellow  .op-flow { background: var(--safety-yellow); }

.op-desc { font-size: 13px; color: var(--body-faint); margin: var(--nib) 0 var(--pica); max-width: 62ch; }

.op-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nib) var(--em);
  border-top: var(--b-hair) solid var(--ink);
  padding-top: var(--nib);
}
.op-spec { font-family: 'Space Mono', monospace; font-size: 9px; text-transform: uppercase; white-space: nowrap; }
.op-spec .k { color: var(--ink-faint); }
.op-spec .v { color: var(--body); font-weight: 700; margin-left: 6px; }

@media (max-width: 820px) {
  .dr-ops { grid-template-columns: 1fr; }
  .dr-ops > .op-wide { grid-column: auto; }
}

@media (max-width: 600px) {
  .op-rail { width: 44px; font-size: 30px; }
  .op-main { padding: var(--nib) var(--pica) var(--pica); }
  .op-name { font-size: 26px; }
  .op-spec { white-space: normal; }
}

/* ---------- tariff schedule (Pricing) ---------- */

.dr-tariff { border: var(--b-thick) solid var(--ink); background: var(--module); }

.tariff-head,
.tariff-row { display: grid; grid-template-columns: 1.15fr 1fr 1fr; }
.tariff-row { border-top: var(--b-hair) solid var(--ink); }

.tariff-cell {
  padding: var(--nib) var(--line);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--body);
  font-weight: 700;
  display: flex;
  align-items: center;
}
.tariff-cell + .tariff-cell { border-left: var(--b-hair) solid var(--ink); }
.tariff-label { color: var(--ink-faint); font-weight: 400; letter-spacing: 1px; }
.tariff-na { color: var(--ink-faint); font-weight: 400; }
.tariff-pro { background: rgba(127, 216, 240, 0.06); }

.tariff-head { background: var(--paper-hi); }
.tariff-head .tariff-cell { padding: var(--pica) var(--line); }
.tariff-head .tariff-label { align-items: flex-end; }
.tariff-tier { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 3px; }
.tariff-tier .t-name {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ink-faint);
}
.tariff-tier .t-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 0.85;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.tariff-tier .t-price .per {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--body-faint);
  margin-left: 3px;
}
.tariff-tier.tariff-pro .t-price { color: var(--cyan); }

.tariff-foot {
  border-top: var(--b-thin) solid var(--ink);
  background: var(--ink);
  padding: var(--nib) var(--line);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--on-ink);
}

@media (max-width: 600px) {
  .tariff-cell { padding: 6px var(--nib); font-size: 9px; letter-spacing: 0.3px; }
  .tariff-head .tariff-cell { padding: var(--nib); }
  .tariff-tier .t-price { font-size: 26px; }
  .tariff-tier .t-name { font-size: 8px; letter-spacing: 1px; }
}

/* ---------- buttons (DRButton) ---------- */

.dr-cue {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: var(--b-thin) solid var(--ink);
  padding: var(--nib) var(--pica);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background 110ms ease, color 110ms ease;
}
.dr-cue:hover { background: var(--ink); color: var(--paper); }
.dr-cue.back .chev { font-size: 14px; line-height: 1; }

.dr-cue-row { display: flex; flex-wrap: wrap; gap: var(--pica); align-items: center; }

/* primary call to action — solid fill so it's unmistakably the button to click */
.dr-cue.primary {
  background: var(--ink); color: var(--on-ink); border-color: var(--ink);
  font-size: 12px; letter-spacing: 2px; padding: var(--pica) var(--em);
}
.dr-cue.primary:hover { background: var(--warp); color: var(--ink); border-color: var(--warp); }

/* ---------- swatch grid (DRSwatch) ---------- */

.dr-swatches {
  border: var(--b-thin) solid var(--ink);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 560px) { .dr-swatches { grid-template-columns: repeat(3, 1fr); } }
.dr-swatch {
  min-height: 48px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.dr-swatch .lab {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.dr-swatch .hex {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 2px;
}

/* ---------- callout (DRCallout) ---------- */

.dr-callout { border: var(--b-thin) solid var(--ink); background: var(--paper-hi); margin: var(--line) 0; }
.dr-callout-head {
  background: var(--ink);
  padding: var(--tick) var(--pica);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.dr-callout-head.tone-warp { color: var(--warp); }
.dr-callout-head.tone-cyan { color: var(--cyan); }
.dr-callout-body { padding: var(--pica); font-size: 13px; color: var(--body); }
.dr-tag { display: inline-block; background: var(--cyan); color: var(--on-ink); padding: 1px 7px; margin-right: var(--nib); letter-spacing: 2px; }

/* ---------- data rows (DRDataRow) ---------- */

.dr-datarows { border: var(--b-thin) solid var(--ink); padding: var(--pica) var(--line); }
.dr-datarow {
  display: flex;
  gap: var(--nib);
  margin-bottom: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
}
.dr-datarow:last-child { margin-bottom: 0; }
.dr-datarow .k { width: 150px; flex-shrink: 0; font-size: 9px; color: var(--ink-faint); }
.dr-datarow .v { font-weight: 700; color: var(--body); }
.dr-datarow .v.warp { color: var(--warp); }
.dr-datarow .v.cyan { color: var(--cyan); }

/* ---------- footer (DRFooter) ---------- */

.dr-footer { background: var(--paper-hi); border-top: var(--b-rule) solid var(--ink); margin-top: var(--page); }
.dr-footer .dr-inner { padding-top: var(--line); padding-bottom: var(--em); }
.dr-footer-top { display: flex; align-items: flex-end; gap: var(--em); }
.dr-footer-barcode { flex: 1; min-width: 0; }
.dr-barcode-svg { width: 100%; height: 48px; display: block; }
.dr-barcode-svg .b { fill: var(--ink); }
.dr-barcode-serial {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 4px;
}
.dr-stamp {
  border: var(--b-thin) solid var(--ink);
  background: var(--warp);
  padding: var(--pica) var(--line);
  flex-shrink: 0;
}
.dr-stamp .lab {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--ink);
}
.dr-stamp .sub {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 2px;
}
.dr-disclaimer {
  border-top: var(--b-hair) solid var(--ink);
  margin-top: var(--pica);
  padding-top: var(--pica);
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  line-height: 1.55;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dr-footer-nav { margin-top: var(--pica); display: flex; flex-wrap: wrap; gap: var(--nib); }

/* ---------- legal doc (LegalDocScreen) ---------- */

.dr-doc-toprow { display: flex; align-items: center; justify-content: space-between; gap: var(--line); }
.dr-doc-ref {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dr-doc-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 0.9;
  letter-spacing: -0.32px;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--line) 0 4px;
}
.dr-doc-published { font-size: 13px; font-style: italic; color: var(--body-faint); margin: 0; }

.dr-prose { font-size: 14px; line-height: 1.65; color: var(--body); letter-spacing: 0.005em; max-width: 72ch; }
.dr-prose h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.88px;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--em) 0 var(--tick);
}
.dr-prose h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.64px;
  text-transform: uppercase;
  color: var(--warp);
  margin: var(--line) 0 var(--tick);
}
.dr-prose p { margin: 0 0 var(--line); }
.dr-prose strong { font-weight: 700; color: var(--ink); }
.dr-prose a { color: var(--warp); text-decoration: underline; text-decoration-color: var(--warp); }
.dr-prose a:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
.dr-prose code {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  background: var(--paper-hi);
  padding: 0.04em 0.35em;
}
.dr-prose-foot {
  margin-top: var(--em);
  padding-top: var(--pica);
  border-top: var(--b-hair) solid var(--ink);
  font-size: 13px;
  color: var(--body-faint);
}
.dr-prose-foot a { color: var(--warp); }