/* Puffit refinement, loaded last on every page. Same palette, cards, type and layout as the archive's stylesheets: only existing tokens are used, and the
   -aa values are those same tokens leaned toward --ink until small text passes WCAG AA. See docs/REDESIGN-2026-11-02.md. */

/* Contrast. Computed on :root from the theme's own tokens, then taken over on body, so light and dark both follow and a theme switch needs nothing else. */
:root{
  --pos-aa:color-mix(in srgb,var(--pos) 76%,var(--ink));
  --neg-aa:color-mix(in srgb,var(--neg) 84%,var(--ink));
  --warn-aa:color-mix(in srgb,var(--warn) 82%,var(--ink));
  --dim-aa:color-mix(in srgb,var(--dim) 62%,var(--ink));
  --muted-aa:color-mix(in srgb,var(--muted) 86%,var(--ink));
  --accent-aa:color-mix(in srgb,var(--accent) 76%,var(--ink));
}
body{--pos:var(--pos-aa);--neg:var(--neg-aa);--warn:var(--warn-aa);--dim:var(--dim-aa);--muted:var(--muted-aa);--board-dim:var(--muted-aa);--flap-pos:var(--pos-aa);--flap-neg:var(--neg-aa)}
.sh-it.cur>.sh-a,.sh-it.open>.sh-a{color:var(--accent-aa)}
.crumbs span:last-child{color:var(--muted)}
/* Green as small text, on the same soft tints. Green as a fill (buttons, bars, the logo) keeps --accent. */
:where(main) :where(p,li)>a:not([class]),.bk-rule,.bq-all,.kb-all,.kc-kind,.pz-eb,.rn-eb,.bk-eb,.gx-n,.sp-pill,.picker-item.on,.rvx .rc .badge,.rvx .rc .ft2 .go2{color:var(--accent-aa)}

/* The two-line header: the name, then what it is measured in. */
th small{display:block;margin-top:3px;font:500 10.5px/1.1 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
th[data-tip]{cursor:help}
th.sortable[data-tip]{cursor:pointer}
th:focus-visible{outline-offset:-2px}
th:has(>small).asc:after,th:has(>small).desc:after{position:absolute;top:9px;margin:0 0 0 -2px}
th.r:has(>small).asc:after,th.r:has(>small).desc:after{right:0}

/* Numbers. Same fixed-width figures in the columns, the secondary line under them aligned to the right edge. */
td.num,td .num,.tri-p{font-variant-numeric:tabular-nums}
.net-c{gap:3px;border-radius:8px;cursor:help}
.net-c .small,.tri-p .small{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.life{display:inline-block;line-height:1.3}
.life[data-tip]{cursor:help}
.life small{font-size:11px}
td .age{display:inline-block;max-width:7ch;line-height:1.2;white-space:normal}

/* Fit the tables that can fit. The wrapper turns the page's own scroll on when they do, so the sticky header below works. */
@media(min-width:1100px){
  .panel th,.panel td{padding-inline:5.5px}
  .btn.sm{padding-inline:8px}
  .panel th:first-child,.panel td:first-child{padding-left:18px}
  .panel th:last-child,.panel td:last-child{padding-right:18px}
  .tbl-wrap.fits{overflow-x:clip;overflow-y:visible}
  .tbl-wrap.fits th{top:72px;z-index:3}
  .leg{gap:6px}
}

/* A table wider than its card says so at the edge it continues past. Pure CSS: the covers scroll with the content, the shadows stay. */
.tbl-wrap:not(.fits){
  background:
    linear-gradient(90deg,var(--surface) 30%,transparent) 0 0/34px 100% no-repeat local,
    linear-gradient(270deg,var(--surface) 30%,transparent) 100% 0/34px 100% no-repeat local,
    linear-gradient(90deg,color-mix(in srgb,var(--ink) 10%,transparent),transparent) 0 0/12px 100% no-repeat scroll,
    linear-gradient(270deg,color-mix(in srgb,var(--ink) 10%,transparent),transparent) 100% 0/12px 100% no-repeat scroll;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
}
.tbl-wrap:not(.fits) th{background:transparent}

/* On a narrow screen the coin stays beside the numbers it belongs to. Only where the first column is a short name, not a long route. */
@media(max-width:1099px){
  table:has(tbody td:first-child .coin) tr>:first-child,
  table:has(tbody td:first-child>.exn) tr>:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:1px 0 0 var(--line)}
  table:has(tbody td:first-child .coin) tbody tr:hover>:first-child{background:var(--surface2)}
  td:first-child>.coin{gap:6px}
  .coin small{font-size:10px}
}

/* The venue wall: columns that line up read faster than a ragged row. Nothing is hidden and the order stays. Short lists keep their row. */
.exs:has(>.chip:nth-child(13)){display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:6px}
.exs:has(>.chip:nth-child(13)) .chip{min-width:0;height:30px;gap:6px;padding-inline:3px 8px;font-size:12px;border-color:var(--line)}
.exs:has(>.chip:nth-child(13)) .chip.on{border-color:var(--line)}
.exs:has(>.chip:nth-child(13)) .chip .mg{width:22px;height:22px}
.chip{color:var(--muted)}
.chip.on{color:var(--ink)}
.chip:focus-visible{border-radius:999px}
@media(max-width:560px){
  .exs:has(>.chip:nth-child(13)){grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .exs:has(>.chip:nth-child(13)) .chip{height:34px;font-size:11.5px;padding-inline:3px 4px;gap:4px;letter-spacing:-.01em;overflow:hidden;white-space:nowrap}
  .exs:has(>.chip:nth-child(13)) .chip .mg{width:20px;height:20px}
}

/* The status line: a note, not an alarm. */
.status{row-gap:2px;line-height:1.45}
.st-miss{font-size:12px;cursor:help}
.st-miss:before{content:"·";margin-right:8px}
@media(max-width:560px){
  .st-miss{flex-basis:100%}.st-miss:before{content:none}
  .panel th:first-child,.panel td:first-child{padding-right:6px}
  td:first-child>.coin{display:inline-grid;grid-template-columns:26px auto;column-gap:6px;line-height:1.2;align-items:center}
  td:first-child>.coin>:first-child{grid-row:1/3}
  td:first-child>.coin>small{grid-column:2}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dark by the system, with no choice made on the site's switch. The archive's tokens follow the system, but some of its blocks set their
   dark values only under :root[data-theme=dark]: the header kept its light glass under light-coloured text, the theme button showed the sun,
   the home sections and footer their light tints. The same values here, from the dark tokens (--surface 84 % is the header's own glass). */
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --pf-mint:color-mix(in srgb,var(--accent) 4%,var(--surface));
    --pf-mint2:color-mix(in srgb,var(--accent) 13%,var(--surface));
    --pf-sh:0 1px 0 color-mix(in srgb,var(--board) 20%,transparent),0 22px 50px -24px color-mix(in srgb,var(--board) 80%,transparent);
  }
  :root:not([data-theme=light]) .sh{--glass:color-mix(in srgb,var(--surface) 84%,transparent);--mint:var(--pf-mint);--mint2:var(--pf-mint2);--chip:var(--surface3);
    --shd:0 1px 0 color-mix(in srgb,var(--board) 25%,transparent),0 18px 44px -22px color-mix(in srgb,var(--board) 80%,transparent);
    --pan:0 30px 70px -30px color-mix(in srgb,var(--board) 90%,transparent)}
  :root:not([data-theme=light]) .sh-th .moon{transform:none;opacity:1}
  :root:not([data-theme=light]) .sh-th .sun{transform:translateY(-26px) rotate(60deg);opacity:0}
  :root:not([data-theme=light]) .sf{--glass:color-mix(in srgb,color-mix(in srgb,var(--surface) 62%,var(--ground)) 70%,transparent)}
  :root:not([data-theme=light]) .sf-deco{opacity:.3}
  :root:not([data-theme=light]) .ab{--mint:var(--pf-mint);--mint2:var(--pf-mint2)}
  :root:not([data-theme=light]) .gx{--mint:var(--pf-mint);--mint2:var(--pf-mint2);--sh:0 1px 0 color-mix(in srgb,var(--board) 20%,transparent),0 12px 30px -20px color-mix(in srgb,var(--board) 80%,transparent)}
  :root:not([data-theme=light]) .pb{--sh:0 1px 0 color-mix(in srgb,var(--board) 20%,transparent),0 22px 50px -22px color-mix(in srgb,var(--board) 80%,transparent)}
  :root:not([data-theme=light]) .sp2{--sh:var(--pf-sh)}
  :root:not([data-theme=light]) .sx{--sh:var(--pf-sh);--scr:var(--ground2);--bub:color-mix(in srgb,var(--surface2) 60%,var(--surface3));--scrI:var(--ink);--scrM:var(--muted)}
  :root:not([data-theme=light]) .ab-gl3{filter:drop-shadow(0 22px 26px color-mix(in srgb,var(--board) 55%,transparent))}
  :root:not([data-theme=light]) .ab-shd{background:radial-gradient(closest-side,color-mix(in srgb,var(--board) 60%,transparent),transparent)}
  :root:not([data-theme=light]) .bc-go{color:var(--accent-ink)}
  :root:not([data-theme=light]) .pz-chip{background:color-mix(in srgb,color-mix(in srgb,var(--accent) 3%,var(--surface3)) 92%,transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 20px 34px -18px color-mix(in srgb,var(--board) 80%,transparent)}
  /* The bot modal: tgm.css copies its dark rules for the system's dark too, all but two. The chat's dots kept their light teal (lost on the
     dark chat) and the time in the visitor's own bubble its light green on the dark blue. Mint is accent and ink half and half, the time
     Telegram's blue (--tg, the modal's own) leaned toward ink. Under the switch's dark tgm.css's own values still win, as it loads later. */
  :root:not([data-theme=light]) .tgm-chat:before{background-image:radial-gradient(color-mix(in srgb,color-mix(in srgb,var(--accent) 50%,var(--ink)) 25%,transparent) 1px,transparent 1.4px),
    radial-gradient(color-mix(in srgb,color-mix(in srgb,var(--accent) 50%,var(--ink)) 18%,transparent) 1px,transparent 1.4px)}
  :root:not([data-theme=light]) .tgm-m.me s{color:color-mix(in srgb,var(--tg) 60%,var(--ink))}
}

/* Tooltips: one kind everywhere. It lives on body, so a table's scroll cannot clip it, and a refresh cannot close it. */
.tfr:after{display:none}
.tfr:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.net-c:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-tip{max-width:min(340px,calc(100vw - 20px));white-space:pre-line}
.bcell[data-tip]{cursor:help}

/* An empty table explains itself instead of looking broken. */
td.empty .dx-e{display:block;margin-bottom:6px;font:600 15px var(--sans);color:var(--ink)}
td.empty .dx-w{display:block;max-width:60ch;margin-inline:auto;font-size:13px;line-height:1.55}

/* Home cards before the first price arrives: the same soft shimmer as the page skeletons, and no made-up 0.00%. */
.pb-price:empty,.pb-chg:empty{display:inline-block;min-width:8ch;min-height:1.2em;border-radius:7px;background:linear-gradient(90deg,var(--surface3),var(--surface2),var(--surface3)) 0 0/200% 100%;animation:pf-shim 1.5s ease-in-out infinite;vertical-align:middle}
.pb-chg:empty{min-width:6ch;padding:0}
@keyframes pf-shim{to{background-position:-200% 0}}

/* Rhythm: a section heading keeps its distance from what it heads. */
.sec-title+.gd-list,.sec-title+.tools{margin-top:12px}
.sec-title+.sec-lead{margin-top:4px}
.panel-h .hint{line-height:1.45}

/* Comfortable targets on touch. Only the hit area grows: padding offset by margin, so nothing moves. */
@media(pointer:coarse),(max-width:760px){
  .crumbs a{display:inline-block;padding-block:6px;margin-block:-6px}
  .sf a{padding-block:5px;margin-block:-5px}
  a.exn{padding-block:5px;margin-block:-5px}
  .tfr{width:26px;height:26px}
  .kc-reset{padding-block:6px;margin-block:-6px}
  .sf :is(ul,nav) a{display:inline-block}
}