/* rikAI — technology page. Loads after style.css and only adds what this
   page needs: the reorder map, the training stages, the score tiles, the
   grounding gates, and the pipeline diagram. Same tokens, same voice. */

.nav-links a[aria-current="page"] { color: var(--gold); }

/* ── hero + reorder map ───────────────────────────────────────────── */

.tech-hero { padding-bottom: 40px; }

.stream {
  /* the hero centers children with flex, which shrink-wraps a figure —
     pin the width or the map collapses to its text */
  width: min(760px, 100%);
  margin: 56px auto 0;
}

.stream svg {
  display: block;
  width: 100%;
  height: auto;
}

.stream figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--paper-dim);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.st-ja {
  font-family: var(--display);
  font-size: 30px;
  fill: var(--paper);
}

.st-en {
  font-family: var(--body);
  font-size: 21px;
  fill: var(--gold);
}

.st-path {
  fill: none;
  stroke: color-mix(in srgb, var(--ai-light) 55%, transparent);
  stroke-width: 1.4;
}

.st-path.implied {
  stroke-dasharray: 4 5;
  stroke: color-mix(in srgb, var(--paper-dim) 60%, transparent);
}

/* the map draws itself once: JA words land, curves unspool, EN words light
   up — then it settles and stays put. Reload to watch it again. */
@media (prefers-reduced-motion: no-preference) {
  .st-ja { opacity: 0; animation: st-in 0.9s ease both; }
  .st-ja.d1 { animation-delay: 0.0s; }
  .st-ja.d2 { animation-delay: 0.25s; }
  .st-ja.d3 { animation-delay: 0.5s; }
  .st-ja.d4 { animation-delay: 0.75s; }
  .st-ja.d5 { animation-delay: 1.0s; }

  .st-path {
    stroke-dasharray: 620;
    stroke-dashoffset: 620;
    animation: st-draw 1.5s ease both;
  }
  .st-path.p1 { animation-delay: 1.3s; }
  .st-path.p2 { animation-delay: 1.55s; }
  .st-path.p3 { animation-delay: 1.8s; }
  .st-path.p4 { animation-delay: 2.05s; }
  .st-path.p5 { animation-delay: 2.3s; }
  .st-path.p6 { animation-delay: 2.55s; }

  .st-en { opacity: 0; animation: st-in 0.9s ease both; }
  .st-en.e1 { animation-delay: 3.4s; }
  .st-en.e2 { animation-delay: 3.05s; }
  .st-en.e3 { animation-delay: 3.2s; }
  .st-en.e4 { animation-delay: 2.9s; }
  .st-en.e5 { animation-delay: 2.6s; }
  .st-en.e6 { animation-delay: 2.75s; }
}

@keyframes st-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes st-draw {
  from { stroke-dashoffset: 620; }
  to { stroke-dashoffset: 0; }
}

/* ── section subheads ─────────────────────────────────────────────── */

.section-sub {
  margin-top: 16px;
  color: var(--paper-dim);
  font-size: 15.5px;
  max-width: 62ch;
}

.section-sub.center { margin-left: auto; margin-right: auto; }

/* ── model cards ──────────────────────────────────────────────────── */

.models {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 12px;
}

.model-card {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 30px 32px;
}

.mc-kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ai-light);
  margin-bottom: 10px;
}

.model-card h3 {
  font-size: 23px;
  margin-bottom: 12px;
}

.model-card h3 b { color: var(--gold); font-weight: 600; }

.mc-what { color: var(--paper-dim); font-size: 14.5px; }

.mc-facts {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ink-line) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  color: var(--paper-dim);
}

.mc-facts b { color: var(--gold); font-weight: 700; margin-right: 4px; }

/* ── speed bars — the run-speed strip inside the size ladder ──────── */

.speed {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--ink-line) 55%, transparent);
}

.jury-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ai-light);
  margin-bottom: 16px;
}

.srow {
  display: grid;
  grid-template-columns: 118px 1fr 58px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.sname { font-size: 12px; color: var(--paper-dim); }
.sval { font-size: 12px; font-weight: 700; color: var(--gold); text-align: right; }

.sbar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-line) 45%, transparent);
  overflow: hidden;
}

.sbar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: color-mix(in srgb, var(--paper-dim) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left;
}

.sbar i.gold { background: var(--gold); }

.go .sbar i { transition: transform 0.9s ease 0.25s; transform: scaleX(1); }

.jury-fn { margin-top: 16px; font-size: 11.5px; color: var(--paper-dim); }

/* ── score tiles ──────────────────────────────────────────────────── */

.stat-tiles {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.stat-tiles li {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 26px 20px 22px;
  text-align: center;
}

.stat-tiles b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 34px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.stat-tiles span {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--paper-dim);
}

.scores-note {
  margin-top: 26px;
  font-size: 13px;
  color: var(--paper-dim);
  max-width: 62ch;
}

/* ── the benchmark chart and the size ladder ──────────────────────── */

.cmp, .ladder {
  margin-top: 34px;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 26px 28px 22px;
}

.ladder { margin-top: 18px; }

/* the dataset switcher — one pill, three eval sets, the same three panels */
.dset-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding: 4px;
  background: color-mix(in srgb, var(--ink) 65%, transparent);
  border: 1px solid var(--ink-line);
  border-radius: 999px;
}

.dset-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--paper-dim);
  padding: 8px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.dset-tab:hover { color: var(--paper); }

.dset-tab:focus-visible { outline: 2px solid var(--ai-light); outline-offset: 2px; }

.dset-tab[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

/* the BSD chart — the stock scaling curve, and the 0.8B that jumps it */

.bsd-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 14px 0 18px;
  font-size: 11.5px;
  color: var(--paper-dim);
}

.bsd-key .k { display: inline-flex; align-items: center; gap: 7px; }
.bsd-key i { display: inline-block; }
.k-dot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--paper-dim) 75%, transparent); }
.k-sq { width: 9px; height: 9px; border-radius: 2px; background: var(--gold); }
.k-lift { width: 16px; border-top: 2px dotted var(--gold); }

.bsd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* an odd panel count on a two-column grid — the last one sits centered */
.bsd-fig:nth-child(odd):last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 11px);
}

.bsd-fig { margin: 0; min-width: 0; }
.bsd-fig figcaption { font-size: 12.5px; font-weight: 700; color: var(--paper); margin-bottom: 6px; }
.fcs { font-weight: 400; color: var(--paper-dim); margin-left: 8px; }
.bsd-fig svg { width: 100%; height: auto; display: block; }

.bx-grid { stroke: color-mix(in srgb, var(--ink-line) 55%, transparent); stroke-dasharray: 3 6; }
.bx-axis { stroke: var(--ink-line); }
.bx-tick, .bx-lab { font-family: var(--body); font-size: 11px; fill: var(--paper-dim); }
.bx-gold { font-family: var(--body); font-size: 11.5px; font-weight: 700; fill: var(--gold); }
.bx-l1 { stroke: color-mix(in srgb, var(--paper-dim) 80%, transparent); }
.bx-p1 { fill: color-mix(in srgb, var(--paper-dim) 90%, transparent); }
.bx-lift { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 2 5; }
.bx-me { fill: var(--gold); }

.ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.reveal .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.go .ln { transition: stroke-dashoffset 1.1s ease 0.2s; stroke-dashoffset: 0; }
.reveal .pt, .reveal .ptlab, .reveal .bx-lift, .reveal .bx-me, .reveal .bx-gold { opacity: 0; }
.go .pt, .go .ptlab { transition: opacity 0.5s ease 0.95s; opacity: 1; }
.go .bx-lift { transition: opacity 0.5s ease 1.25s; opacity: 1; }
.go .bx-me, .go .bx-gold { transition: opacity 0.5s ease 1.35s; opacity: 1; }

/* the size ladder — two stock checkpoints, one conclusion */
.lad {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  text-align: center;
}

.lad li {
  border: 1px dashed color-mix(in srgb, var(--ink-line) 80%, transparent);
  border-radius: 10px;
  padding: 16px 10px 14px;
}

.lad li.pick { border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }

.lad .lsz {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.lad b {
  display: block;
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}

.lad li.pick b { color: var(--gold); }

/* ── grounding gates ──────────────────────────────────────────────── */

.gates { display: flex; flex-direction: column; gap: 26px; margin-top: 10px; }

.gate-name {
  font-size: 14.5px;
  margin-bottom: 10px;
}

.gate-name i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--paper-dim);
  margin-left: 10px;
}

.gate-bars { display: flex; flex-direction: column; gap: 6px; }

.gbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gbar i {
  display: block;
  height: 12px;
  width: calc(var(--w) * 0.86);   /* leave room for the number */
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
}

.gbar.base i { background: color-mix(in srgb, var(--paper-dim) 40%, transparent); }
.gbar.tuned i { background: var(--gold); }
.gbar.tuned.good-low i { background: var(--gold); }

.go .gbar i { transition: transform 1s ease; transform: scaleX(1); }
.go .gbar.tuned i { transition-delay: 0.35s; }

.gbar span {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--paper-dim);
}

.gbar.tuned span { color: var(--gold); }

.gate-legend {
  margin-top: 26px;
  font-size: 12.5px;
  color: var(--paper-dim);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gate-legend .lg {
  width: 22px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}

.gate-legend .lg.base { background: color-mix(in srgb, var(--paper-dim) 40%, transparent); }
.gate-legend .lg.tuned { background: var(--gold); margin-left: 18px; }

/* ── pipeline ─────────────────────────────────────────────────────── */

.pipe-sec .section-head { text-align: center; margin-bottom: 0; }

.pipe {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
}

.pipe-node {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 16px 24px;
  text-align: center;
  font-size: 15px;
  max-width: 420px;
}

.pipe-node > span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--paper-dim);
}

.pipe-node > span em { font-style: normal; color: var(--gold); }

.pn-top { font-family: var(--display); font-size: 20px; }

.pn-facts { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }

.pn-model {
  border-color: color-mix(in srgb, var(--ai-light) 45%, transparent);
}

.pn-out { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }

.pipe-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: min(640px, 100%);
}

.pipe-row .pipe-node { max-width: none; }

/* the models row, opened up: each card shows its actual prompt, and the
   pill between them is the tool call from the reasoning model back to
   the translator */
.pipe-row.pr-models {
  width: min(880px, 100%);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
}

.pn-model { text-align: left; padding: 18px 20px 16px; }

.pm-name { font-family: var(--display); font-size: 17px; }

.pm-cap { margin: 2px 0 4px; font-size: 11px; color: var(--paper-dim); }

.pm-prompt { list-style: none; margin: 10px 0 0; padding: 0; }

.pm-prompt li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink-line) 70%, transparent);
  font-size: 12px;
  line-height: 1.55;
  color: var(--paper-dim);
}

.pm-prompt i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ai-light);
  border: 1px solid color-mix(in srgb, var(--ai-light) 45%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}

.pm-prompt li.det i {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

.pm-out {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink-line) 70%, transparent);
  font-size: 12.5px;
  color: var(--paper);
}

.pipe-call {
  align-self: center;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--paper-dim);
}

.pipe-call b { font-size: 18px; line-height: 1; color: var(--gold); }
.pipe-call .v { display: none; }

/* the philosophy, earned by the diagram above it */
.pipe-creed {
  margin: 46px auto 0;
  max-width: 26ch;
  text-align: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.6vw, 25px);
  line-height: 1.55;
  color: var(--paper);
}

.pipe-creed em { font-style: normal; color: var(--gold); }

/* flowing connectors — a dashed gold thread marching downward */
.pipe-link {
  width: 2px;
  height: 34px;
  background-image: linear-gradient(to bottom, var(--gold) 45%, transparent 45%);
  background-size: 2px 9px;
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .pipe-link { animation: thread 0.9s linear infinite; }
}

@keyframes thread {
  to { background-position-y: 9px; }
}

.pipe-note {
  margin-top: 36px;
  font-size: 14.5px;
  color: var(--paper-dim);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.pipe-note b { color: var(--paper); }

/* ── local closer ─────────────────────────────────────────────────── */

.local-inner { text-align: center; }

.local-inner h2 { font-size: clamp(28px, 3.6vw, 38px); margin-top: 12px; }

.local-inner .btn-big { margin-top: 32px; display: inline-block; }

/* ── design philosophy ────────────────────────────────────────────── */

.philo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 10px;
}

.philo-item {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 24px 24px 22px;
}

.philo-item h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--paper);
  margin: 0 0 10px;
}

.philo-item p {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--paper-dim);
  margin: 0;
}

/* ── responsive ───────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .models { grid-template-columns: 1fr; }
  .stat-tiles { grid-template-columns: 1fr 1fr; }
  .philo { grid-template-columns: 1fr; gap: 14px; }

  /* the model cards need their width — stack them, rotate the call pill */
  .pipe-row.pr-models { grid-template-columns: 1fr; gap: 14px; }
  .pipe-call { width: auto; flex-direction: row; justify-content: center; gap: 10px; padding: 2px 0; }
  .pipe-call .h { display: none; }
  .pipe-call .v { display: block; }

  /* the chart panels shrink with the viewport — SVG text units grow to hold
     the rendered size steady */
  .bx-tick, .bx-lab { font-size: 13px; }
  .bx-gold { font-size: 13.5px; }
}

@media (max-width: 680px) {
  .stream { margin-top: 40px; }
  .stat-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-tiles b { font-size: 27px; }
  .pipe-row { grid-template-columns: 1fr; gap: 14px; }
  .pipe-link.split, .pipe-link.join { height: 24px; }

  .cmp, .ladder { padding: 20px 18px 16px; }
  .dset-tabs { display: flex; }
  .dset-tab { flex: 1 1 auto; font-size: 12px; padding: 7px 10px; text-align: center; }
  .bsd-grid { grid-template-columns: 1fr; gap: 28px; }
  .bsd-fig:nth-child(odd):last-child { width: 100%; }
  .bx-tick, .bx-lab { font-size: 15px; }
  .bx-gold { font-size: 16px; }
  .lad { gap: 10px; }
  .lad li { padding: 12px 6px 10px; }
  .lad b { font-size: 20px; }
}

/* ── reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sbar i, .gbar i { transform: scaleX(1); transition: none; }
  .reveal .ln { stroke-dashoffset: 0; transition: none; }
  .reveal .pt, .reveal .ptlab, .reveal .bx-lift, .reveal .bx-me, .reveal .bx-gold { opacity: 1; transition: none; }
}

/* ── section rhythm ───────────────────────────────────────────────── */

/* the shared 110px+110px seams read as dead gaps on this page —
   tighten every section boundary below the hero (desktop only;
   phones keep style.css's compact rhythm) */
@media (min-width: 681px) {
  #pair      { padding-bottom: 72px; }
  #scores    { padding-top: 84px; padding-bottom: 72px; }
  #reasoning { padding-top: 84px; padding-bottom: 72px; }
  #pipeline  { padding-top: 84px; padding-bottom: 72px; }
  #local     { padding-top: 84px; }
}