/* Under the Hood (under-the-hood.html, app/hood-piece.html). The AI News world (app.css, news.css) and Workflows' column
   and notes (workflows.css). Its own parts, from Spoorthi's pick (A · Swipe cards, 2026-09-27): the map with Inside the
   model as numbered stops on one line, the other kinds as plain rows; a piece as one sheet card at a time with a
   progress bar; charts as HTML bars on one 0 to 100% scale over a sand track. No verdicts, no kickers, no coloured side
   stripes, no shadows on cards. Terracotta: read stops, the next stop's ring, the leading bar, progress, one button.
   Ria's violet only for Ask Ria. */
:root { --peach-soft: rgba(223, 167, 143, .28); }
:root[data-theme="dark"] { --peach-soft: rgba(223, 167, 143, .16); }

/* ---------- the map ---------- */
.hd-head { align-items: flex-start; }
.hd-head h1 { text-wrap: balance; }
.hd-sub { margin: 10px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.hd-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 26px; }
.hd-kind { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.hd-kind h2 { margin: 0; font: 600 26px/1.12 var(--sans); }
.hd-kind h3 { margin: 0 0 6px; font: 600 20px/1.2 var(--sans); }
.hd-order { margin: 6px 0 10px; font-size: 14px; color: var(--faint); }

/* Inside the model: numbered stops on one line */
.hd-stops { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
.hd-stops::before { content: ''; position: absolute; left: 15px; top: 22px; bottom: 22px; width: 1px; background: var(--line-strong); }
.hd-stop { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: center; }
.hd-stop > a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 6px 0; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.35; }
.hd-row-end:empty { display: none; }
.hd-dot { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--sheet); color: var(--muted); font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.hd-dot.next { margin: 0; border-color: var(--accent); color: var(--accent-ink); } /* margin: news.css has a ".next" block of its own (a story's "learn next", 14px above); it pushed this circle 7px below its title */
.hd-dot.read { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.hd-dot .ico { width: 16px; height: 16px; }
.hd-dot.sm { width: 24px; height: 24px; }
.hd-dot.sm .ico { width: 13px; height: 13px; }

/* the other kinds: plain rows */
.hd-others { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 32px; align-content: start; }
.hd-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.hd-rows li { border-top: 1px solid var(--line); }
.hd-rows a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 0; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.35; }
.hd-row-t { min-width: 0; overflow-wrap: anywhere; }
.hd-row-end { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (hover: hover) {
  .hd-stop > a:hover .hd-row-t, .hd-rows a:hover .hd-row-t { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
}

.hd-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.hd-tag.free { background: var(--peach-soft); color: var(--accent-ink); }
.hd-tag.draft { background: var(--warn-soft); color: var(--warn); }
.hd-lock { display: inline-flex; color: var(--faint); }
.hd-lock .ico { width: 15px; height: 15px; }

@media (min-width: 761px) {
  .hd-sub { font-size: 18px; }
  .hd-kind h2 { font-size: 28px; }
}
/* a computer: the series at left, the other kinds in two columns beside it */
@media (min-width: 1180px) {
  .hd-app .hd-col { max-width: 1120px; }
  .nx-head.hd-head h1 { font-size: 52px; }
  .hd-map { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 64px; margin-top: 34px; }
  .hd-others { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 8px; }
}

/* ---------- a piece: one sheet card at a time ---------- */
.hd-piece-app .main { padding-bottom: 20px; }
.hd-piece-col { display: flex; flex-direction: column; max-width: 1120px; height: calc(100dvh - 46px); min-height: 480px; margin: 0 auto; }
.hd-piece-col > .st-bar { flex-shrink: 0; }
#piece { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#piece > .empty, #piece > .skel { flex: none; }
.hd-prog { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 6px 0 14px; }
.hd-prog i { height: 4px; border-radius: 2px; background: var(--line-strong); transition: background .2s; }
.hd-prog i.on { background: var(--accent); }
.hd-reader { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.hd-toc { display: none; }
.hd-main { min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.hd-stage { position: relative; flex: 1; min-height: 0; display: grid; overflow: hidden; }
.hd-card { grid-area: 1 / 1; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 16px; padding: 20px 18px 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .22s ease, opacity .22s ease; }
.hd-card[data-pos="prev"], .hd-card[data-pos="gone"][data-side="l"] { transform: translateX(calc(-100% - 16px)); }
.hd-card[data-pos="next"], .hd-card[data-pos="gone"][data-side="r"] { transform: translateX(calc(100% + 16px)); }
.hd-card[data-pos="gone"] { visibility: hidden; }
.hd-card > * { margin: 0; }
.hd-card h1 { font: 600 30px/1.12 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.hd-card h2 { font: 600 28px/1.12 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.hd-card h3 { margin-top: 6px; font: 600 20px/1.2 var(--sans); }
.hd-card h1:focus, .hd-card h2:focus { outline: none; }
.hd-card h1:focus-visible, .hd-card h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.hd-subtitle { font-size: 16px; line-height: 1.5; color: var(--muted); }
.hd-meta, .hd-k { font-size: 13px; font-weight: 500; color: var(--faint); }
.hd-k + h2 { margin-top: -10px; }
.hd-needs { font-size: 14px; color: var(--muted); }
.hd-needs a { color: var(--accent-ink); font-weight: 500; }
.hd-google { padding: 14px 16px; border-radius: 16px; background: var(--sand); font-size: 15px; line-height: 1.5; }
.hd-google strong { font-weight: 600; }
.hd-open-pic .hd-pic, .hd-md .hd-pic { margin: 0; }
.hd-pic img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); background: #FFFFFF; }

/* the opening as the server sends it, before the page takes over */
.hd-card.hd-ssr { flex: 1; min-height: 0; }

/* the piece's text */
.hd-md { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; font-size: 16px; line-height: 1.6; }
.hd-md > * { margin: 0; }
.hd-md h3 { font: 600 20px/1.2 var(--sans); }
.hd-md h4 { font: 600 15px/1.4 var(--sans); }
.hd-md ul, .hd-md ol { display: grid; gap: 6px; padding-left: 20px; }
.hd-md a { color: var(--accent-ink); }
.hd-md code { padding: 1px 5px; border-radius: 6px; background: var(--sand-2); font: 0.88em/1.4 var(--mono); overflow-wrap: anywhere;
  /* the letters as written: the mono face joins <| and |> into arrows, so a model's <|im_end|> read as a triangle */
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.hd-md blockquote { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--sand-2); color: var(--muted); }
.hd-code { position: relative; border-radius: 14px; background: var(--code-bg); color: var(--code-ink); }
.hd-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 13px/1.6 var(--mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.hd-code pre code { padding: 0; background: none; font: inherit; overflow-wrap: normal; }
.hd-copy { position: absolute; top: 6px; right: 6px; min-height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--code-ink) 12%, transparent); color: var(--code-ink); font-size: 13px; font-weight: 600; }
.hd-code:has(.hd-copy) pre { padding-top: 44px; }
.hd-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.hd-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.hd-table th, .hd-table td { padding: 8px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.hd-table thead th { border-top: 0; background: var(--sand-2); font-weight: 600; white-space: nowrap; }
.hd-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* charts: HTML bars on one 0 to 100% scale over a sand track */
.hd-chart { display: grid; grid-template-columns: minmax(0, max-content) minmax(72px, 1fr) max-content; align-items: center; gap: 8px 10px; margin: 0; }
.hd-chart figcaption { grid-column: 1 / -1; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--muted); }
.hd-row { display: contents; }
.hd-label { max-width: 13em; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.hd-track { position: relative; height: 10px; border-radius: 5px; background: var(--sand); overflow: hidden; }
.hd-bar { display: block; height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--accent) 42%, var(--sand)); }
.hd-bar.top { background: var(--accent); }
.hd-bar.broken { background: transparent; box-shadow: inset 0 0 0 1.5px var(--faint); }
.hd-value { font: 500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; white-space: nowrap; }

/* the end: sources with their labels */
.hd-srcs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hd-src { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }   /* a model's 40-character version id has no place to break */
.hd-srclink { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--accent-ink); font-weight: 500; overflow-wrap: anywhere; }
.hd-srclink .ico { width: 14px; height: 14px; flex-shrink: 0; }
.hd-srclabel { justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--sand); color: var(--ink); font-size: 12px; font-weight: 600; }
.hd-srclabel[data-l="we"] { background: var(--peach-soft); color: var(--accent-ink); }
.hd-srclabel[data-l="nobody"] { background: var(--warn-soft); color: var(--warn); }

/* Ask Ria on a step, in Ria's violet */
.hd-ask { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--ria-soft); color: var(--ria); font-size: 14px; font-weight: 600; text-decoration: none; }
.hd-ask .ico { width: 16px; height: 16px; }
.hd-ask.locked { background: transparent; color: var(--muted); }

/* the gate */
.hd-gate { display: grid; justify-items: start; gap: 12px; margin: auto 0; padding: 8px 0; }
.hd-gate-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sand); color: var(--accent-ink); }
.hd-gate-ico .ico { width: 20px; height: 20px; }
.hd-gate h2 { font: 600 28px/1.12 var(--sans); }
.hd-gate p { margin: 0; max-width: 42ch; color: var(--muted); }
.hd-gate .gate-btns { display: grid; gap: 10px; width: 100%; }
.hd-gate .btn { text-decoration: none; }

/* Back and Next */
.hd-nav { display: flex; gap: 10px; flex-shrink: 0; }
.hd-nav .btn { min-height: 48px; border-radius: 16px; font-size: 16px; font-weight: 600; }
.btn-sand { background: var(--sand); color: var(--ink); }
.btn-sand:hover { background: var(--sand-2); }
.hd-nav #next { flex: 1; min-width: 0; }
.hd-nav #next span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-nav .btn .ico { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 760px) {
  .hd-piece-app .main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  .hd-piece-col { height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)); }
}
@media (min-width: 761px) {
  .hd-card { padding: 28px 32px 32px; }
  .hd-card h1 { font-size: 38px; }
  .hd-card h2 { font-size: 30px; }
  .hd-gate .gate-btns { grid-template-columns: auto auto; width: auto; }
}
/* a computer: the contents at left, the card in the middle with the ones before and after peeking at its sides */
@media (min-width: 1180px) {
  .hd-piece-app .main { padding-bottom: 24px; }
  .hd-piece-col { height: calc(100dvh - 50px); }
  .hd-reader { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
  .hd-toc { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
  .hd-toc-h { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--faint); }
  .hd-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .hd-toc a { display: flex; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: 10px; color: var(--muted); font-size: 14px; line-height: 1.35; text-decoration: none; }
  .hd-toc a:hover { background: var(--sand-2); color: var(--ink); }
  .hd-toc a[aria-current="step"] { background: var(--sand); color: var(--ink); font-weight: 600; }
  .hd-hint { margin: 10px 0 0; padding: 0 10px; font-size: 13px; color: var(--faint); }
  .hd-stage { grid-template-columns: minmax(0, 680px); justify-content: center; }
  .hd-card[data-pos="prev"], .hd-card[data-pos="next"] { opacity: .55; }
  /* a neighbour shows only where it is and its heading, not scraps of its charts and text */
  .hd-card[data-pos="prev"] > :not(h1, h2, .hd-k), .hd-card[data-pos="next"] > :not(h1, h2, .hd-k) { visibility: hidden; }
  .hd-card[data-pos="prev"] { transform: translateX(calc(-100% - 28px)); }
  .hd-card[data-pos="next"] { transform: translateX(calc(100% + 28px)); }
  .hd-nav { width: 100%; max-width: 680px; margin: 0 auto; }
}