/* The route board: a source string and a row per route, each joined to the source by
   a wire (pipeline.js draws the wires and runs a comet along each). One board for
   every page that shows one, home and sign-in; design-system tokens only.

   <figure class="board" data-board>
     <div class="src"><b>…</b><span>…</span></div>
     <div class="routes"><svg class="wires" aria-hidden="true" preserveAspectRatio="none"></svg>
       <div class="route"><code>de-DE</code><span class="t">…</span><span class="m">model</span></div>…</div>
     <figcaption class="cap">…</figcaption>
   </figure>
   `.board.typed` adds a column for the kind of text (home's). */

.board { --b-sheet: var(--bg-elevated); --b-rule: var(--border-card); --b-paper: var(--bg-base);
         --b-ink-2: var(--fg-secondary); --b-ink-3: var(--fg-tertiary);
         --b-script: "Hiragino Sans", "Noto Sans JP", "Noto Sans Arabic", "Noto Sans Devanagari", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
         position: relative; margin: 0; background: var(--b-sheet); border: 1px solid var(--b-rule); border-radius: 18px;
         padding: 22px 22px 16px; box-shadow: 0 30px 70px -40px rgba(14, 23, 38, .45); color: var(--fg-primary) }
.board .src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
              padding-bottom: 14px; border-bottom: 1px dashed var(--b-rule) }
.board .src b { font-size: 19px; font-weight: var(--weight-semibold); letter-spacing: -.01em }
.board .src span { font: 12.5px var(--font-mono); color: var(--b-ink-3) }
.board .routes { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); margin-top: 10px }
/* Laid over the rows, not among them: drawn from their height, it must not add to it. */
.board .routes svg.wires { position: absolute; left: 0; top: 0; width: 34px; height: 100%; overflow: visible }
.board .wires path { fill: none; stroke: var(--b-rule); stroke-width: 1.5 }
.board .wires path.on { stroke: color-mix(in oklab, var(--primary-500) 45%, var(--b-sheet)) }
.board .route { grid-column: 2; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center;
                min-height: 44px; border-bottom: 1px solid var(--b-rule) }
.board .route:last-of-type, .board .route.last { border-bottom: 0 }
.board .route code { font: 500 12.5px var(--font-mono); color: var(--b-ink-3) }
.board .route .t { font: 500 16px/1.3 var(--b-script); padding-block: 6px }
.board .route .t[dir="rtl"] { text-align: left }
.board .route .m { font-size: 12.5px; color: var(--b-ink-2); background: var(--b-paper); border: 1px solid var(--b-rule);
                   padding: 3px 9px; border-radius: 999px; white-space: nowrap }
.board .cap { margin-top: 12px; font-size: 13px; color: var(--b-ink-3) }

/* Home's: a column for the kind of text, and a language's two kinds kept together.
   Each source string carries the context that goes with it, as chips at its right;
   the string keeps its line, and where there is no room beside it the chips go under. */
.board.typed .src { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: baseline }
.board.typed .src .line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0 }
.board.typed .src .line b { white-space: nowrap; font-size: 18px }
.board .src .uses { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto }
.board .src .use { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
                   font: 11.5px var(--font-sans); color: var(--b-ink-2); background: var(--b-paper); border: 1px solid var(--b-rule) }
.board .src .use svg { width: 12px; height: 12px; color: var(--fg-accent); flex: none }
/* Under the string, the chips start where it does. */
.board.typed { container-type: inline-size }
/* Narrow, a source string wraps rather than push the board wider than the screen. */
@container (max-width: 520px) { .board .src .uses { margin-left: 0 } .board.typed .src .line b { white-space: normal } }
@container (max-width: 380px) { .board.typed .src .line b { font-size: 16px } }
.board.typed .route { grid-template-columns: 46px 78px minmax(0, 1fr) auto }
.board .route.pair-end { border-bottom-color: var(--b-ink-3) }

@media (max-width: 520px) {
  .board .route, .board.typed .route { padding: 8px 0; gap: 4px 10px }
  .board .route { grid-template-columns: 46px minmax(0, 1fr) }
  .board.typed .route { grid-template-columns: 46px 78px minmax(0, 1fr) }
  .board .route .t { grid-column: 1 / -1; grid-row: 2 }
  .board .route .m { justify-self: end }
}