/* ===== One spacing and radius system, then the phone layout =====
   Three surface sizes, each with its own padding and radius; nested pieces sit inside the parent's radius.
   banner  (closing card)                       big padding, biggest radius
   card    (route, step, agent, window body)    one padding everywhere
   tile    (situation, request tab)             a step smaller
   nest    (command line, prompt, chips inside)  smallest radius */
:root {
  --pad-banner-b: 64px; --pad-banner-i: 64px; --r-banner: 32px;
  --pad-card: 32px; --r-card: 24px;
  --pad-tile: 24px; --r-tile: 14px;
  --pad-nest: 12px; --r-nest: 10px;
  --gap-cards: 16px;
}
@media (max-width: 60rem) { :root { --pad-banner-b: 56px; --pad-banner-i: 40px; --r-banner: 28px; } }
@media (max-width: 40rem) { :root { --pad-banner-b: 40px; --pad-banner-i: 24px; --r-banner: 24px; --pad-card: 24px; --r-card: 20px; --pad-tile: 20px; } }

.close-card { padding: var(--pad-banner-b) var(--pad-banner-i); border-radius: var(--r-banner); }
.route, .step, .agents > .spot { padding: var(--pad-card); border-radius: var(--r-card); }
.win { border-radius: var(--r-card); }
.win-body { padding: var(--pad-card); }
.sit, .requests button { border-radius: var(--r-tile); }
.sit { padding: var(--pad-tile); }
.sit-cmd, .sit-prompt { border-radius: var(--r-nest); }
.sit-prompt { padding: var(--pad-nest); }
.steps, .agents, .sit-grid, .windows { gap: var(--gap-cards); }

/* ===== Phone and small tablet ===== */
@media (max-width: 60rem) {
  /* section heads sit centred, so every block opens the same way */
  .board-head, .fix-head, .find-head, .steps-head, .output-head, .runs .container > h2, .gate-side { text-align: center; justify-content: center; justify-items: center; }
  .board-head .lead, .find-head .lead, .steps-head .lead, .gate-side .lead { margin-inline: auto; }
  .runs h2, .board-head h2, .fix-head h2, .find-head h2, .steps-head h2, .gate-side h2 { margin-inline: auto; }

  /* hero: the mark on top, then the words, then the buttons, all centred */
  .hero { padding-block: var(--space-xl) var(--section-gap-s); }
  .hero .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); min-height: 0; text-align: center; }
  .hero .hero-mark { order: -1; justify-self: center; width: min(208px, 54vw); margin: 0 auto; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .hero h1 { margin-inline: auto; }
  .hero .lead { margin-inline: auto; }
  .hero .actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 420px; }
  .hero .actions .btn { width: 100%; justify-content: center; }
  .works { justify-content: center; }

  /* before/after: the scroll drives it here too, inside one sticky screen */
  .fix-track { height: 440vh; }
  .fix-sticky { position: sticky; top: 0; height: 100dvh; min-height: 0; padding-block: 100px var(--space-md); gap: var(--space-md); justify-content: center; }
  .fix-head { flex-direction: column; align-items: center; gap: var(--space-sm); }
  .fix-title { margin: 0; justify-items: center; }
  .fix-head h2 { margin: 0; }
  .fix-score { min-height: 48px; }
  .fix-body { flex: 1 1 auto; min-height: 0; max-height: 600px; }
  .fix-stage { height: auto; min-height: 0; }
  .ui-tr { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.15fr) minmax(0, 0.9fr); }

  /* routing: one sticky screen; the requests become a row of icons, the scroll walks them */
  .board-track { height: calc(100dvh + 8 * 42vh); }
  .board-sticky { position: sticky; top: 0; height: 100dvh; min-height: 0; padding-block: 100px var(--space-md); align-items: center; }
  .board-head { flex-direction: column; align-items: center; gap: var(--space-sm); }
  .switch { margin-top: var(--space-lg); gap: var(--space-md); }
  .requests { flex-direction: row; justify-content: space-between; gap: var(--space-2xs); }
  .requests button { flex: 1 1 0; justify-content: center; min-height: 44px; min-width: 0; padding: 0; }
  .requests button > svg { width: 18px; height: 18px; }
  .requests button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .requests button::after { height: 2px; }
  .route { gap: var(--space-md); }
  .route-from q { font-size: var(--text-md); }
  .route-get { font-size: var(--text-md); }
  .board-foot, .stops-foot, .output-head .lead { text-align: center; }
  .board-foot { margin-top: var(--space-md); }
  .output-head h2, .output-head .lead { margin-inline: auto; }

  /* find your situation: one full-width dropdown of our own instead of chips that run off the screen */
  .find-nav { display: none !important; }
  .find-pick { position: relative; z-index: 5; width: 100%; max-width: 420px; margin-inline: auto; }
  .find-pick-btn { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-md)/1.2 var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
  .find-pick-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .find-pick-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .find-pick em { font: 400 12px/1 var(--font-code); font-style: normal; color: var(--ink-dim); }
  .find-pick-btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate var(--dur-short) var(--ease-out); }
  .find-pick.is-open .find-pick-btn { border-color: var(--color-ink-2); background: var(--color-paper-3); }
  .find-pick.is-open .find-pick-btn svg { rotate: 180deg; }
  .find-pick-list { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-xs)); margin: 0; padding: 6px; list-style: none; max-height: min(60dvh, 440px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--color-rule-2); border-radius: 20px; background: var(--color-paper-3); box-shadow: 0 24px 60px oklch(0% 0 0 / 0.55); transform-origin: 50% 0; outline: none; }
  .find-pick-list li { display: flex; align-items: center; gap: var(--space-sm); min-height: 46px; padding: 0 var(--space-md); border-radius: 14px; color: var(--color-ink-2); cursor: pointer; }
  .find-pick-list li span { flex: 1; min-width: 0; }
  .find-pick-list li.is-act { background: var(--tint-2); color: var(--color-ink); }
  .find-pick-list li[aria-selected="true"] { color: var(--color-ink); }
  .find-pick-list li[aria-selected="true"]::before { content: ""; flex: none; width: 6px; height: 6px; margin-left: -2px; border-radius: 50%; background: var(--opal-2); }
  @media (prefers-reduced-motion: no-preference) { .find-pick-list:not([hidden]) { animation: pick-in 180ms var(--ease-out) both; } }
  .find-head { flex-direction: column; align-items: center; }
  .find-head .find-all { display: none; }
  .find-end { position: relative; z-index: 2; display: flex; justify-content: center; margin-top: var(--space-xl); }
  .find-end .btn { width: 100%; max-width: 420px; justify-content: center; background: var(--color-paper-2); }
  .sit-note { text-align: center; }

  /* checked at the gate: the crest and the four checks centred, the checks as a 2 x 2 of quiet tiles */
  .gate-side { justify-items: center; }
  .gate-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); width: 100%; }
  .gate-steps li { flex-direction: column; justify-content: center; gap: var(--space-sm); min-height: 104px; padding: var(--space-md) var(--space-sm); border: 0; border-radius: var(--r-tile); background: var(--color-paper-3); text-align: center; font-size: var(--text-xs); color: var(--color-ink-2); }
  .gate-steps .ico { width: 24px; height: 24px; }
  .gate-sum { justify-content: center; text-align: center; width: 100%; border-top: 0; padding-top: var(--space-xs); }
  .gate-note { text-align: center; }

  /* closing banner: centred copy, full-width buttons */
  .close-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .close-copy h2 { margin-inline: auto; }
  .close-copy .actions { flex-direction: column; align-items: stretch; width: 100%; }
  .close-copy .actions .btn { justify-content: center; }

  /* footer: one solid sheet, the wordmark in two lines so it stays large */
  .foot { background: var(--color-paper-3); border-top: 1px solid var(--color-rule-2); border-radius: var(--r-banner) var(--r-banner) 0 0; padding-top: var(--space-2xl); text-align: left; }
  .foot-mark { aspect-ratio: 1630 / 430; width: calc(100% - 2 * var(--gutter)); margin-block: var(--space-xl) var(--space-lg); -webkit-mask-image: url("img/brand/wordmark-2l.svg"); mask-image: url("img/brand/wordmark-2l.svg"); }
}
@media (min-width: 60.01rem) { .find-end, .find-pick { display: none; } }
/* ===== Catalog page on phones and tablets: an edge index in the right gutter =====
   One short tick per group, pinned to the edge inside the 16px gutter so it never covers a card.
   The current group's tick is longer and brighter; a label names a group only while you touch or enter it. */
@media (max-width: 75rem) {
  .sit-rail { display: grid; left: auto; right: 0; top: 50%; translate: 0 -50%; gap: 0; width: 26px; padding: var(--space-xs) max(0px, env(safe-area-inset-right, 0px)) var(--space-xs) 0; border-radius: 0; background: none; box-shadow: none; touch-action: none; opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-out); }
  .sit-rail.is-on { opacity: 1; pointer-events: auto; }
  .sit-rail:hover, .sit-rail:focus-within { background: none; box-shadow: none; }
  .sit-rail a { justify-content: flex-end; min-height: 24px; padding: 0 4px 0 0; gap: 0; -webkit-tap-highlight-color: transparent; }
  .sit-rail span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 1; translate: none; }
  .sit-rail i { width: 10px; height: 2px; transform-origin: 100% 50%; scale: 0.6 1; background: var(--ink-low); opacity: 0.75; }
  .sit-rail a[aria-current] i, .sit-rail.is-scrub i { opacity: 1; }
  .sit-rail a[aria-current] i { scale: 1.3 1; background: var(--color-ink); }
  .sit-rail.is-scrub i { background: var(--ink-dim); scale: 0.9 1; }
  .sit-rail.is-scrub a[aria-current] i { background: var(--color-ink); scale: 1.3 1; }
  .sit-tip { position: fixed; z-index: calc(var(--z-sticky) + 1); right: 30px; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: var(--space-xs); max-width: calc(100vw - 60px); padding: 7px 12px; border: 1px solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-3); box-shadow: 0 12px 32px oklch(0% 0 0 / 0.5); color: var(--color-ink); font: 500 13px/1.2 var(--font-body); white-space: nowrap; pointer-events: none; opacity: 0; scale: 0.94; transform-origin: 100% 50%; transition: opacity 180ms var(--ease-out), scale 180ms var(--ease-out), top 120ms var(--ease-out); }
  .sit-tip b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
  .sit-tip em { font: 400 11px/1 var(--font-code); font-style: normal; color: var(--ink-dim); }
  .sit-tip.is-on { opacity: 1; scale: 1; }
}
@media (min-width: 75.01rem) { .sit-tip { display: none; } }

@keyframes pick-in { from { opacity: 0; scale: 0.97; translate: 0 -6px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@media (max-width: 40rem) {
  /* on short phones the routing lead gives way so the card still fits */
  .board-head .lead { font-size: var(--text-sm); }

  /* find: a fifth card fades out under the link to every situation, to show there is more */
  .sit--peek { max-height: 170px; overflow: hidden; pointer-events: none; user-select: none; filter: blur(1.5px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, transparent 92%); }
  .find-body:has(.has-peek) + .find-end { margin-top: -84px; }

  /* gate rows: name, author and version grouped on the left, the verdict centred on the right, more air between rules */
  .ck-row:not(.ck-head) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name verdict" "ver verdict"; column-gap: var(--space-md); row-gap: 6px; align-items: center; min-height: 0; padding-block: 22px; }
  .ck-row:not(.ck-head) > span:first-child { grid-area: name; align-self: end; gap: 3px; }
  .ck-row:not(.ck-head) > code { grid-area: ver; grid-column: 1; grid-row: 2; align-self: start; padding: 0; }
  .ck-row:not(.ck-head) > span:last-child { grid-area: verdict; grid-column: 2; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 60rem) and (max-height: 740px) {
  .board-head .lead, .board-foot { display: none; }
  .fix-note { display: none; }
}

/* ===== copy buttons: no outline on hover, the fill and text brighten instead ===== */
.copy, .copy:hover { border-color: transparent; }
.copy:hover { background: var(--color-ink); color: var(--color-paper); }
.copy.is-done:hover { background: var(--tint-2); color: var(--color-ink); }

/* ===== letter tiles for agents without an icon here: the same box and baseline as the logos beside them =====
   The tile's own font is smaller, so its box is set in the parent's size (divided back by that font size). */
.inline-logos .mono-logo { display: inline-block; overflow: hidden; font-size: 0.72em; width: calc(1.05em / 0.72); height: calc(1.05em / 0.72); margin-right: calc(0.3em / 0.72); line-height: calc(1.05em / 0.72); text-align: center; vertical-align: calc(-0.15em / 0.72); border-radius: 0.3em; } /* overflow puts its baseline at the bottom edge, like the svg */
.sv-logos i { font-size: 0.8em; width: calc(2.2em / 0.8); height: calc(2.2em / 0.8); border-radius: 0.6em; }