/* Tidestar — a press-room dashboard of the Kraken ecosystem.
   Concept: process inks (CMYK) on a printed sheet. Magenta = the Wire (what is being said),
   cyan = markets and charts, yellow = points and "live", key = text. Panels carry crop marks.
   Overview: the Wire on the left, the numbers on the right. Wide screens fit it on one screen,
   each half scrolling on its own; narrower screens show the numbers first and scroll the page. */
:root {
  --paper: #ECEEF1;
  --sheet: #FAFBFC;
  --key: #14161B;
  --key-2: #596070;
  --rule: #D3D8DF;
  --cyan: #0089BA;
  --cyan-wash: #DDF1F8;
  --magenta: #C8106B;
  --magenta-wash: #F9E1EE;
  --yellow: #F2CF00;
  --yellow-wash: #FFF5C2;
  --up: #08825A;
  --down: #C8104F;
  --band: linear-gradient(135deg, #F7F8FA, #E3E6EB 60%, #D6DAE0);   /* the INK token's band: satin silver */
  --band-ink: #14161B;
  --band-2: #596070;
  --spark: #E0A800; --spark-edge: rgba(20, 22, 27, .55);
  --foil-shadow: rgba(20,22,27,.18); --foil-edge: rgba(20,22,27,.3);
  --foil-line: linear-gradient(90deg, #4A515C, #B9C0CA 50%, #4A515C);
  --stars: 0; --stars-tone: none;   /* the starlight is a night thing: dark theme only */
  --f-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", "SF Mono", Menlo, Consolas, monospace;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --pad: 16px;
  /* type scale: every size on the page is one of these */
  --t-label: 11px;   /* mono labels, badges, table heads */
  --t-meta: 12px;    /* sources, times, notes */
  --t-small: 13px;   /* secondary text */
  --t-ui: 14px;      /* body, table cells */
  --t-read: 15px;    /* posts */
  --t-h3: 18px;      /* card titles */
  --t-num-s: 22px;   /* small figures, card names */
  --t-num: 28px;     /* figures, tab titles */
  --t-hero: 40px;    /* the one number on each overview card */
  color-scheme: light;
}
@media (min-width: 1000px) {
  :root { --gutter: max(clamp(24px, 3.2vw, 56px), env(safe-area-inset-left, 0px));
          --gutter-r: max(clamp(24px, 3.2vw, 56px), env(safe-area-inset-right, 0px)); --pad: 20px; }
}
@media (min-width: 1900px) { :root { --gutter: calc((100vw - 1780px) / 2); --gutter-r: calc((100vw - 1780px) / 2); } }
/* dark: follows the system unless the viewer picked a theme with the toggle (data-theme on <html>) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C0E11; --sheet: #13161B; --key: #E8EAEE; --key-2: #8B93A3; --rule: #262B34;
    --cyan: #33C3EE; --cyan-wash: #0E2630; --magenta: #FF54A5; --magenta-wash: #2E1222;
    --yellow: #FFE04A; --yellow-wash: #2B2610; --up: #3FD69C; --down: #FF5E8C;
    --band: linear-gradient(135deg, #F4F6F8, #DDE1E6 60%, #C9CED6); --band-ink: #13161B; --band-2: #4A515C;
    --spark: var(--yellow); --spark-edge: var(--sheet);
    --foil-shadow: rgba(0,0,0,.55); --foil-edge: rgba(255,255,255,.2);
    --foil-line: linear-gradient(90deg, #8D96A3, #F4F6F8 50%, #8D96A3); --stars: .85; --stars-tone: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --paper: #0C0E11; --sheet: #13161B; --key: #E8EAEE; --key-2: #8B93A3; --rule: #262B34;
    --cyan: #33C3EE; --cyan-wash: #0E2630; --magenta: #FF54A5; --magenta-wash: #2E1222;
    --yellow: #FFE04A; --yellow-wash: #2B2610; --up: #3FD69C; --down: #FF5E8C;
    --band: linear-gradient(135deg, #F4F6F8, #DDE1E6 60%, #C9CED6); --band-ink: #13161B; --band-2: #4A515C;
    --spark: var(--yellow); --spark-edge: var(--sheet);
    --foil-shadow: rgba(0,0,0,.55); --foil-edge: rgba(255,255,255,.2);
    --foil-line: linear-gradient(90deg, #8D96A3, #F4F6F8 50%, #8D96A3); --stars: .85; --stars-tone: none;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* no scrollbars anywhere: every pane, table and the page still scroll with the wheel, a finger or the keyboard */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--key); font: 400 var(--t-ui)/1.5 var(--f-text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cyan); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
h2, h3, p { margin: 0; }
h2, h3 { text-wrap: balance; }
.mono, .meta, time { font-family: var(--f-mono); }
.muted { color: var(--key-2); }
.small { font-size: var(--t-small); }
.up { color: var(--up); }
.down { color: var(--down); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- masthead ---------- */
/* The lockup: the mark is exactly as tall as the two lines beside it (24 + 4 + 12 = 40px),
   so its top meets the name's cap line and its bottom the tagline's baseline. */
.mast { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 32px;
  padding: 0 var(--gutter-r) 0 var(--gutter); border-bottom: 1px solid var(--rule); background: var(--sheet); }
.brand { display: inline-flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--key); }
.brand svg { width: 40px; height: 40px; flex: none; overflow: visible; }
.brand-words { display: flex; flex-direction: column; justify-content: space-between; height: 40px; }
.brand-name { font: 800 26px/24px var(--f-display); letter-spacing: .07em; text-transform: uppercase; }
.brand-sub { font: 400 var(--t-label)/12px var(--f-mono); color: var(--key-2); letter-spacing: .03em; }
/* the tabs fill the bar's height, so their words sit on the same middle line as the name and the switch,
   while the current tab's underline still lies on the bar's lower edge */
.tabs { display: flex; align-items: stretch; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { font: 500 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  color: var(--key-2); display: flex; align-items: center; padding: 15px 12px 12px;
  border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--key); }
.tabs a[aria-current="page"] { color: var(--key); border-bottom-color: var(--key); border-image: var(--foil-line) 1; }
/* the theme switch: a small square slider with a satin thumb, light on the left and dark on the right */
.theme { display: inline-flex; align-self: center; margin-left: 12px; padding: 6px 0; background: none; border: 0; cursor: pointer; }
.theme-track { position: relative; display: block; width: 46px; height: 24px; background: var(--paper); border: 1px solid var(--rule); }
.theme:hover .theme-track { border-color: var(--key-2); }
.theme-track svg { position: absolute; top: 5px; width: 12px; height: 12px; color: var(--key-2); }
.theme-sun { left: 4px; }
.theme-moon { right: 4px; }
.theme-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: linear-gradient(135deg, #F4F6F8, #C4CAD1 55%, #9EA6B0);
  box-shadow: 0 0 0 1px rgba(20, 22, 27, .14), 0 1px 2px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .55);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
.theme[aria-checked="true"] .theme-thumb { transform: translateX(22px); }
/* phones and tablets: the theme switch sits on the brand's row, the tabs get a row of their own */
@media (max-width: 999px) {
  .mast { column-gap: 12px; }
  .theme { order: 1; margin-left: auto; padding: 10px 0; }
  .tabs { order: 2; width: 100%; margin-left: 0; }
  .tabs a { padding-inline: 6px; letter-spacing: .06em; }
  .tabs a:first-child { padding-left: 0; }
}

/* ---------- starlight ---------- */
/* dark theme only: a quiet field of points and tiny sparks over the whole paper, sparse at the top and thick
   at the bottom, seen only between the sheets; a few of them breathe */
body.app::before, body.app::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: 0;
  pointer-events: none; z-index: 0; background-repeat: repeat-x; background-position: left bottom; filter: var(--stars-tone);
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1));
  mask-image: linear-gradient(to top, #000, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1)); }
body.app::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='1000' fill='%23E9EDF2'%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.81' transform='translate(205.3 977.2) scale(0.184)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.73' transform='translate(232.0 991.0) scale(0.172)'/%3E%3Ccircle cx='48.1' cy='990.9' r='0.69' fill-opacity='0.68'/%3E%3Ccircle cx='145.1' cy='640.2' r='0.88' fill-opacity='0.97'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.92' transform='translate(618.5 992.4) scale(0.137)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.90' transform='translate(75.0 918.0) scale(0.190)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.75' transform='translate(405.5 880.8) scale(0.127)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.69' transform='translate(130.7 567.4) scale(0.190)'/%3E%3Ccircle cx='290.4' cy='925.9' r='0.77' fill-opacity='0.89'/%3E%3Ccircle cx='367.0' cy='755.4' r='0.80' fill-opacity='0.93'/%3E%3Ccircle cx='623.5' cy='987.0' r='0.71' fill-opacity='0.68'/%3E%3Ccircle cx='313.0' cy='995.2' r='1.00' fill-opacity='0.82'/%3E%3Ccircle cx='557.3' cy='918.6' r='1.01' fill-opacity='0.83'/%3E%3Ccircle cx='292.3' cy='320.1' r='1.06' fill-opacity='0.97'/%3E%3Ccircle cx='42.3' cy='541.3' r='1.18' fill-opacity='0.81'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.82' transform='translate(180.7 870.8) scale(0.175)'/%3E%3Ccircle cx='110.2' cy='987.1' r='0.69' fill-opacity='0.48'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.93' transform='translate(157.4 867.2) scale(0.174)'/%3E%3Ccircle cx='351.2' cy='240.8' r='0.79' fill-opacity='0.90'/%3E%3Ccircle cx='266.5' cy='892.0' r='0.71' fill-opacity='0.94'/%3E%3Ccircle cx='115.4' cy='956.2' r='1.01' fill-opacity='0.58'/%3E%3Ccircle cx='170.1' cy='996.0' r='1.00' fill-opacity='0.68'/%3E%3Ccircle cx='606.4' cy='556.8' r='1.07' fill-opacity='0.73'/%3E%3Ccircle cx='38.1' cy='210.1' r='1.16' fill-opacity='0.88'/%3E%3Ccircle cx='252.0' cy='864.6' r='0.64' fill-opacity='0.51'/%3E%3Ccircle cx='46.6' cy='964.4' r='0.64' fill-opacity='0.54'/%3E%3Ccircle cx='4.1' cy='980.4' r='0.62' fill-opacity='0.51'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.53' transform='translate(553.7 653.8) scale(0.162)'/%3E%3Ccircle cx='234.2' cy='986.2' r='0.93' fill-opacity='0.92'/%3E%3Ccircle cx='309.8' cy='991.5' r='0.79' fill-opacity='0.51'/%3E%3Ccircle cx='527.8' cy='978.0' r='0.97' fill-opacity='0.46'/%3E%3Ccircle cx='96.7' cy='737.0' r='1.28' fill-opacity='0.46'/%3E%3Ccircle cx='549.6' cy='548.8' r='0.72' fill-opacity='0.59'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.88' transform='translate(489.2 745.3) scale(0.147)'/%3E%3Ccircle cx='516.9' cy='36.6' r='1.17' fill-opacity='0.92'/%3E%3Ccircle cx='471.6' cy='958.1' r='0.62' fill-opacity='0.73'/%3E%3Ccircle cx='21.7' cy='936.0' r='1.27' fill-opacity='0.59'/%3E%3Ccircle cx='286.6' cy='136.3' r='0.86' fill-opacity='0.99'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.56' transform='translate(139.8 954.6) scale(0.195)'/%3E%3Ccircle cx='573.0' cy='319.3' r='1.16' fill-opacity='0.71'/%3E%3Ccircle cx='57.6' cy='597.6' r='1.13' fill-opacity='0.95'/%3E%3Ccircle cx='306.1' cy='973.6' r='1.16' fill-opacity='0.88'/%3E%3Ccircle cx='618.1' cy='866.9' r='1.11' fill-opacity='0.67'/%3E%3Ccircle cx='111.4' cy='985.4' r='1.16' fill-opacity='0.53'/%3E%3Ccircle cx='96.4' cy='343.7' r='0.85' fill-opacity='0.99'/%3E%3Ccircle cx='350.8' cy='984.7' r='1.05' fill-opacity='0.46'/%3E%3Ccircle cx='336.8' cy='143.1' r='1.18' fill-opacity='0.69'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.61' transform='translate(134.0 944.8) scale(0.190)'/%3E%3Ccircle cx='167.9' cy='849.6' r='0.85' fill-opacity='0.52'/%3E%3Ccircle cx='293.6' cy='692.9' r='1.24' fill-opacity='0.95'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.74' transform='translate(317.9 745.6) scale(0.173)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.89' transform='translate(116.5 992.8) scale(0.177)'/%3E%3Ccircle cx='462.3' cy='722.8' r='0.99' fill-opacity='0.63'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.76' transform='translate(496.9 986.1) scale(0.153)'/%3E%3Ccircle cx='492.1' cy='772.7' r='1.24' fill-opacity='0.76'/%3E%3Ccircle cx='284.1' cy='658.6' r='1.08' fill-opacity='0.73'/%3E%3Ccircle cx='289.9' cy='747.2' r='1.09' fill-opacity='0.71'/%3E%3Ccircle cx='558.0' cy='125.8' r='1.26' fill-opacity='0.59'/%3E%3Ccircle cx='534.9' cy='983.5' r='0.65' fill-opacity='0.52'/%3E%3Ccircle cx='156.1' cy='992.9' r='1.23' fill-opacity='0.82'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.81' transform='translate(97.5 516.1) scale(0.226)'/%3E%3Ccircle cx='615.5' cy='960.7' r='0.94' fill-opacity='0.97'/%3E%3Ccircle cx='629.6' cy='333.3' r='0.96' fill-opacity='0.54'/%3E%3Ccircle cx='218.3' cy='968.6' r='0.61' fill-opacity='0.63'/%3E%3Ccircle cx='354.2' cy='832.7' r='1.04' fill-opacity='0.46'/%3E%3Ccircle cx='327.7' cy='993.6' r='1.28' fill-opacity='0.99'/%3E%3Ccircle cx='70.2' cy='942.3' r='0.79' fill-opacity='0.47'/%3E%3Ccircle cx='85.9' cy='847.1' r='0.78' fill-opacity='0.95'/%3E%3Ccircle cx='98.4' cy='171.9' r='0.66' fill-opacity='0.76'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.68' transform='translate(36.2 555.8) scale(0.233)'/%3E%3Ccircle cx='405.0' cy='386.1' r='0.65' fill-opacity='0.50'/%3E%3Ccircle cx='549.3' cy='821.6' r='1.25' fill-opacity='0.64'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.74' transform='translate(170.9 982.6) scale(0.133)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.56' transform='translate(103.2 991.8) scale(0.157)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.73' transform='translate(481.1 928.0) scale(0.162)'/%3E%3Ccircle cx='15.5' cy='948.8' r='0.99' fill-opacity='0.46'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.96' transform='translate(119.8 799.4) scale(0.218)'/%3E%3Ccircle cx='277.1' cy='784.8' r='0.95' fill-opacity='0.91'/%3E%3Ccircle cx='438.7' cy='41.9' r='1.09' fill-opacity='0.64'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.64' transform='translate(403.5 858.0) scale(0.136)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.59' transform='translate(46.4 480.8) scale(0.130)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.82' transform='translate(533.0 262.1) scale(0.149)'/%3E%3Ccircle cx='189.2' cy='816.8' r='0.78' fill-opacity='0.54'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.75' transform='translate(607.6 58.5) scale(0.236)'/%3E%3Ccircle cx='199.6' cy='893.4' r='0.93' fill-opacity='0.45'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.73' transform='translate(319.0 964.2) scale(0.152)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.47' transform='translate(57.9 861.4) scale(0.157)'/%3E%3Ccircle cx='151.1' cy='690.4' r='1.06' fill-opacity='0.74'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.66' transform='translate(452.2 244.6) scale(0.238)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.80' transform='translate(94.5 504.3) scale(0.220)'/%3E%3Ccircle cx='567.7' cy='640.4' r='0.70' fill-opacity='0.85'/%3E%3Ccircle cx='335.0' cy='775.9' r='1.18' fill-opacity='0.91'/%3E%3Ccircle cx='373.1' cy='223.0' r='0.76' fill-opacity='0.83'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.65' transform='translate(19.7 980.3) scale(0.220)'/%3E%3Ccircle cx='357.0' cy='639.8' r='0.94' fill-opacity='0.79'/%3E%3Ccircle cx='6.1' cy='392.7' r='0.97' fill-opacity='0.86'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.86' transform='translate(418.4 991.2) scale(0.129)'/%3E%3Ccircle cx='171.8' cy='500.6' r='1.28' fill-opacity='0.56'/%3E%3Ccircle cx='316.2' cy='876.2' r='1.14' fill-opacity='0.71'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.49' transform='translate(391.2 618.1) scale(0.150)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.76' transform='translate(471.4 921.2) scale(0.127)'/%3E%3Ccircle cx='173.9' cy='582.3' r='0.80' fill-opacity='0.83'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.71' transform='translate(326.4 808.2) scale(0.227)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.96' transform='translate(126.8 48.0) scale(0.175)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.70' transform='translate(519.6 69.7) scale(0.145)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.77' transform='translate(598.3 960.5) scale(0.183)'/%3E%3Ccircle cx='606.1' cy='984.4' r='1.22' fill-opacity='0.90'/%3E%3Ccircle cx='448.5' cy='956.4' r='0.62' fill-opacity='0.94'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.70' transform='translate(3.8 785.4) scale(0.137)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.91' transform='translate(217.6 913.5) scale(0.210)'/%3E%3Ccircle cx='534.3' cy='986.6' r='1.23' fill-opacity='0.96'/%3E%3Ccircle cx='187.2' cy='883.2' r='1.01' fill-opacity='0.67'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.60' transform='translate(229.6 840.2) scale(0.132)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.96' transform='translate(528.8 930.3) scale(0.152)'/%3E%3Ccircle cx='326.9' cy='970.4' r='1.22' fill-opacity='0.66'/%3E%3Ccircle cx='517.2' cy='635.9' r='0.98' fill-opacity='0.95'/%3E%3Ccircle cx='458.8' cy='994.7' r='1.13' fill-opacity='0.85'/%3E%3Ccircle cx='411.3' cy='932.7' r='0.69' fill-opacity='0.48'/%3E%3Ccircle cx='302.4' cy='901.4' r='1.28' fill-opacity='0.61'/%3E%3Ccircle cx='168.4' cy='603.6' r='0.88' fill-opacity='0.62'/%3E%3Ccircle cx='109.8' cy='978.0' r='0.95' fill-opacity='0.56'/%3E%3Ccircle cx='143.1' cy='197.1' r='0.70' fill-opacity='1.00'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.64' transform='translate(122.9 988.3) scale(0.149)'/%3E%3Ccircle cx='167.3' cy='708.4' r='0.89' fill-opacity='0.94'/%3E%3Ccircle cx='265.6' cy='756.5' r='0.64' fill-opacity='0.66'/%3E%3Ccircle cx='179.4' cy='73.2' r='1.04' fill-opacity='0.52'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.60' transform='translate(546.3 958.9) scale(0.168)'/%3E%3Ccircle cx='285.8' cy='101.7' r='0.62' fill-opacity='0.92'/%3E%3Ccircle cx='24.4' cy='529.7' r='1.01' fill-opacity='0.94'/%3E%3Ccircle cx='4.1' cy='869.9' r='1.20' fill-opacity='0.96'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.51' transform='translate(615.2 946.4) scale(0.183)'/%3E%3Ccircle cx='435.1' cy='127.2' r='1.14' fill-opacity='0.85'/%3E%3Ccircle cx='293.0' cy='728.1' r='0.76' fill-opacity='0.47'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.62' transform='translate(582.7 614.6) scale(0.150)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.51' transform='translate(402.8 542.1) scale(0.183)'/%3E%3Ccircle cx='372.4' cy='872.4' r='0.61' fill-opacity='0.57'/%3E%3Ccircle cx='194.6' cy='815.7' r='1.22' fill-opacity='0.98'/%3E%3Ccircle cx='304.4' cy='955.1' r='1.09' fill-opacity='0.59'/%3E%3Ccircle cx='198.3' cy='995.8' r='0.89' fill-opacity='0.72'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.96' transform='translate(164.4 586.3) scale(0.124)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.83' transform='translate(213.8 844.6) scale(0.216)'/%3E%3Ccircle cx='471.1' cy='775.4' r='0.82' fill-opacity='0.56'/%3E%3Ccircle cx='522.2' cy='956.6' r='0.81' fill-opacity='0.57'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.55' transform='translate(602.6 781.0) scale(0.170)'/%3E%3Ccircle cx='424.5' cy='112.4' r='0.75' fill-opacity='0.53'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.48' transform='translate(616.6 979.5) scale(0.167)'/%3E%3Ccircle cx='571.6' cy='240.5' r='1.25' fill-opacity='0.85'/%3E%3Ccircle cx='212.1' cy='971.6' r='0.62' fill-opacity='0.96'/%3E%3Ccircle cx='423.9' cy='878.9' r='0.72' fill-opacity='0.66'/%3E%3Ccircle cx='5.8' cy='935.8' r='0.69' fill-opacity='0.64'/%3E%3C/svg%3E"); opacity: var(--stars); }
body.app::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='1000' fill='%23E9EDF2'%3E%3Ccircle cx='289.9' cy='719.2' r='0.96' fill-opacity='0.96'/%3E%3Ccircle cx='375.2' cy='971.9' r='1.16' fill-opacity='0.73'/%3E%3Ccircle cx='63.5' cy='924.1' r='1.09' fill-opacity='0.50'/%3E%3Ccircle cx='30.5' cy='42.4' r='1.03' fill-opacity='0.98'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.74' transform='translate(101.0 993.3) scale(0.143)'/%3E%3Ccircle cx='156.9' cy='995.6' r='1.19' fill-opacity='0.71'/%3E%3Ccircle cx='332.1' cy='624.0' r='0.92' fill-opacity='0.72'/%3E%3Ccircle cx='179.8' cy='9.1' r='1.10' fill-opacity='1.00'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.61' transform='translate(199.4 953.2) scale(0.212)'/%3E%3Ccircle cx='257.1' cy='308.3' r='1.19' fill-opacity='0.66'/%3E%3Ccircle cx='4.3' cy='964.1' r='1.29' fill-opacity='0.95'/%3E%3Ccircle cx='255.2' cy='992.9' r='0.79' fill-opacity='0.80'/%3E%3Ccircle cx='59.1' cy='908.0' r='0.68' fill-opacity='0.98'/%3E%3Ccircle cx='159.7' cy='989.6' r='0.72' fill-opacity='0.48'/%3E%3Ccircle cx='357.5' cy='826.9' r='0.69' fill-opacity='0.55'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.68' transform='translate(408.1 984.5) scale(0.152)'/%3E%3Ccircle cx='617.6' cy='383.1' r='0.75' fill-opacity='0.62'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.80' transform='translate(248.9 290.0) scale(0.239)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.87' transform='translate(136.0 942.7) scale(0.156)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.77' transform='translate(46.9 987.6) scale(0.192)'/%3E%3Ccircle cx='238.9' cy='822.1' r='1.00' fill-opacity='0.98'/%3E%3Ccircle cx='551.6' cy='972.4' r='1.17' fill-opacity='0.53'/%3E%3Ccircle cx='161.7' cy='970.4' r='0.74' fill-opacity='0.86'/%3E%3Ccircle cx='604.5' cy='243.1' r='0.67' fill-opacity='0.78'/%3E%3Ccircle cx='28.5' cy='83.6' r='0.78' fill-opacity='0.58'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.61' transform='translate(520.9 674.0) scale(0.206)'/%3E%3Ccircle cx='47.5' cy='957.5' r='1.03' fill-opacity='0.76'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.56' transform='translate(178.4 172.7) scale(0.152)'/%3E%3Ccircle cx='285.7' cy='993.9' r='1.00' fill-opacity='0.55'/%3E%3Ccircle cx='87.2' cy='889.8' r='1.06' fill-opacity='0.94'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.53' transform='translate(438.7 689.5) scale(0.122)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.98' transform='translate(575.7 538.5) scale(0.196)'/%3E%3Ccircle cx='308.8' cy='498.9' r='0.65' fill-opacity='0.63'/%3E%3Ccircle cx='349.1' cy='489.1' r='1.09' fill-opacity='0.95'/%3E%3Ccircle cx='505.3' cy='180.1' r='1.23' fill-opacity='0.64'/%3E%3Ccircle cx='554.5' cy='851.1' r='1.00' fill-opacity='0.88'/%3E%3Ccircle cx='399.0' cy='876.4' r='0.66' fill-opacity='0.77'/%3E%3Ccircle cx='408.1' cy='18.5' r='0.87' fill-opacity='0.93'/%3E%3Ccircle cx='468.5' cy='695.7' r='0.66' fill-opacity='0.69'/%3E%3Ccircle cx='478.1' cy='995.6' r='0.76' fill-opacity='0.78'/%3E%3Ccircle cx='445.3' cy='782.7' r='0.78' fill-opacity='0.79'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.82' transform='translate(8.6 922.8) scale(0.140)'/%3E%3Ccircle cx='576.4' cy='598.4' r='0.83' fill-opacity='0.69'/%3E%3Ccircle cx='424.8' cy='967.7' r='1.24' fill-opacity='0.69'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.77' transform='translate(557.9 872.5) scale(0.136)'/%3E%3Ccircle cx='317.8' cy='325.2' r='1.27' fill-opacity='0.92'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.70' transform='translate(176.3 973.5) scale(0.146)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.72' transform='translate(261.7 638.4) scale(0.221)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.49' transform='translate(620.6 818.6) scale(0.225)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.76' transform='translate(26.4 527.1) scale(0.215)'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.70' transform='translate(12.1 979.8) scale(0.220)'/%3E%3Ccircle cx='154.0' cy='982.7' r='0.91' fill-opacity='0.48'/%3E%3Ccircle cx='402.1' cy='604.9' r='1.08' fill-opacity='0.89'/%3E%3Cpath d='M18 1C19 13 23 17 35 18C23 19 19 23 18 35C17 23 13 19 1 18C13 17 17 13 18 1Z' fill-opacity='0.55' transform='translate(126.8 799.8) scale(0.177)'/%3E%3Ccircle cx='455.4' cy='973.4' r='1.09' fill-opacity='0.60'/%3E%3C/svg%3E"); background-position: 213px bottom; opacity: 0; }
/* the breathing layer runs only where it can be seen: the dark theme */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.app::after { animation: starlight 9s ease-in-out infinite alternate; } }
:root[data-theme="dark"] body.app::after { animation: starlight 9s ease-in-out infinite alternate; }
@keyframes starlight { from { opacity: 0; } to { opacity: var(--stars); } }
.mast, .views, .foot { position: relative; z-index: 1; }

/* ---------- views ---------- */
.views { padding: 20px var(--gutter-r) 20px var(--gutter); }
.view[hidden] { display: none !important; }
.overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 1000px) {
  .overview { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  /* the news adds no height of its own: it is as tall as the numbers beside it and scrolls inside */
  .overview > .wire { grid-column: 1; grid-row: 1; contain: size; }
  .overview > .pulse { grid-column: 2; grid-row: 1; }
  .wire .pane-body { overflow-y: auto; }
}

/* wide screens: the overview is one screen; the Wire scrolls, the page does not */
@media (min-width: 1200px) and (min-height: 760px) {
  body.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
  .views { min-height: 0; overflow: hidden; }
  .view { height: 100%; }
  .view.scroll { overflow-y: auto; }
  /* as tall as the numbers, never taller than the screen; the news follows the numbers */
  .overview { grid-template-rows: fit-content(100%); align-content: start; align-items: stretch; }
  .pane { min-height: 0; }
  .pane-body { overflow-y: auto; }
  /* room for the last sheet's crop mark, so the numbers don't scroll by 4px; the news stops level with the sheet */
  .pulse { min-height: 0; overflow-y: auto; padding-bottom: 5px; }
  .overview > .wire { margin-bottom: 5px; }
}

/* ---------- sheets (panels with crop marks) ---------- */
.sheet { position: relative; background: var(--sheet); border: 1px solid var(--rule); }
.sheet::before, .sheet::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; }
.sheet::before { top: -5px; left: -5px; border-top: 1px solid var(--key-2); border-left: 1px solid var(--key-2); }
.sheet::after { bottom: -5px; right: -5px; border-bottom: 1px solid var(--key-2); border-right: 1px solid var(--key-2); }

.pane { display: flex; flex-direction: column; }
.pane-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding: 16px var(--pad) 12px;
  border-bottom: 1px solid var(--rule); }
.pane-titles { display: flex; align-items: baseline; gap: 12px; }
.pane-title { font: 800 var(--t-num)/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.pane-sub { font: 400 var(--t-small)/1.3 var(--f-text); color: var(--key-2); }
.pane-head .metas { margin-left: auto; }
.wire .pane-title { box-shadow: inset 0 -6px 0 var(--magenta-wash); }
.pane-body { flex: 1 1 auto; min-height: 0; }

.meta { font: 400 var(--t-label)/1.4 var(--f-mono); color: var(--key-2); white-space: nowrap; }
.meta.is-stale { color: var(--down); }
.metas { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; }

/* ---------- overview, right half: the ecosystem in numbers ---------- */
.pulse { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* a sheet on the overview: a head, then a table or a row of figures running edge to edge */
.board { padding: 16px var(--pad); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.board .table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--pad)); }
.board .figures { margin: 0 calc(-1 * var(--pad)) -16px; border-top: 1px solid var(--rule); }
.board .figures > div { padding-block: 12px 14px; }
.go { text-decoration: none; }
/* a board that opens its tab: the whole sheet answers the pointer */
[data-go] { cursor: pointer; }
.go::after { content: " →"; color: var(--key-2); }
.go:hover::after { color: inherit; }
.h-note { font: 400 var(--t-label) var(--f-mono); color: var(--key-2); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.fig-note { display: block; margin-top: 4px; font-size: var(--t-meta); color: var(--key-2); }
.fig-note b { font: 600 var(--t-meta) var(--f-mono); }
/* Kraken over its two columns, the rest of the head standing on the second row */
table.across thead th { vertical-align: bottom; }
table.across th.group { text-align: center; padding-bottom: 4px; border-bottom-color: var(--rule); }
table.across thead tr:first-child th[rowspan] { border-bottom: 1px solid var(--rule); }
/* a narrow board (a phone, or the right half of a mid-size screen) keeps the columns that fit:
   no Listed, Kraken as one column, shares as a number */
.board { container-type: inline-size; }
.only-narrow { display: none; }
@container (max-width: 599px) {
  .board th, .board td { padding-inline: 8px; }
  .board th:first-child, .board td:first-child { padding-left: var(--pad); }
  .board th:last-child, .board td:last-child { padding-right: var(--pad); }
  .board th { white-space: normal; }
  .board .only-wide { display: none; }
  .board .only-narrow { display: table-cell; }
  .board .share { display: none; }
  .board .share-v { margin-left: 0; }
}
/* narrower still: figures stack, the label and its change on the left, the number on the right */
@container (max-width: 459px) {
  .board .figures { grid-template-columns: minmax(0, 1fr); }
  .board .figures > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    padding-inline: var(--pad); border-right: 0; border-bottom: 1px solid var(--rule); }
  .board .figures > div:last-child { border-bottom: 0; }
  .board .fig-label { grid-area: 1 / 1; }
  .board .fig-note { grid-area: 2 / 1; }
  .board .fig-value { grid-area: 1 / 2 / span 2; }
}

/* ---------- the Wire ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { font: 500 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  border: 1px solid var(--rule); background: transparent; color: var(--key-2); padding: 8px 12px; cursor: pointer; }
.chips button:hover { border-color: var(--key-2); }
.chips button[aria-pressed="true"] { background: var(--key); border-color: var(--key); color: var(--sheet); }
.notice { margin: 16px var(--pad) 0; padding: 12px 12px; font-size: var(--t-small); border-left: 3px solid var(--yellow); background: var(--yellow-wash); }

/* one post a row, newest first: the logo, then who and when, then what was said in two lines at most */
.posts { list-style: none; margin: 0; padding: 0 var(--pad); }
.post { border-bottom: 1px solid var(--rule); min-width: 0; }
.post:last-child { border-bottom: 0; }
.post-link { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; padding: 12px 0;
  text-decoration: none; color: inherit; }
.post-link > .logo { grid-row: 1 / span 2; grid-column: 1; }
.post-link > .post-top, .post-link > .post-text { grid-column: 2; }
.post-link:hover { color: inherit; }
.post-link:hover .post-text { text-decoration: underline; }
.post-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.who { font-weight: 650; font-size: var(--t-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.handle { font: 400 var(--t-label)/1.4 var(--f-mono); color: var(--key-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* a story most readers should not miss: a faint yellow wash on its row and a spark twinkling on its logo's corner */
.post.major { background: linear-gradient(90deg, var(--yellow-wash), transparent 85%); margin-inline: -8px;
  padding-inline: 8px; }
.post-spark { grid-area: 1 / 1; align-self: start; justify-self: start; width: 22px; height: 22px; margin: -10px 0 0 -10px;
  fill: var(--spark); stroke: var(--spark-edge); stroke-width: 2; paint-order: stroke; cursor: help;
  animation: twinkle 2.6s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: .8; transform: scale(.8) rotate(0deg); }
  45% { opacity: 1; transform: scale(1.2) rotate(45deg); }
  55% { opacity: 1; transform: scale(1) rotate(45deg); }
}
.post-top time { margin-left: auto; padding-left: 8px; font-size: var(--t-label); color: var(--key-2); white-space: nowrap; }
.post-text { font-size: var(--t-read); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.empty { padding: 20px 0; color: var(--key-2); }
/* where one day's news ends and the day before begins: the date, then a dashed line */
.day-sep { display: flex; align-items: center; gap: 12px; padding: 16px 0 6px;
  font: 500 var(--t-label)/1 var(--f-mono); letter-spacing: .04em; color: var(--key-2); }
.day-sep::after { content: ""; flex: 1; border-top: 1px dashed var(--rule); }
.day-sep[hidden] { display: none; }
/* the sheet's last row, under the scrolling list, so it sits level with the bottom of the numbers */
.more { flex: none; display: block; width: 100%; margin: 0; padding: 14px var(--pad);
  font: 500 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--key); background: transparent; border: 0; border-top: 1px solid var(--rule); cursor: pointer; }
.more:hover { background: var(--paper); }

/* one news item in a window: who and when, the headline, the summary, the way to the original */
/* fixed to the screen (the sheet class would make it relative) and scrolling inside itself when taller than the screen */
dialog.story { position: fixed; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0;
  overflow: auto; overscroll-behavior: contain; color: var(--key); }
dialog.story::before, dialog.story::after { display: none; }
dialog.story::backdrop { background: rgba(12, 14, 17, .55); }
.story-top { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px var(--pad); border-bottom: 1px solid var(--rule); }
.story-who { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.story-who time { margin-left: auto; font-size: var(--t-label); color: var(--key-2); white-space: nowrap; }
.story-close { display: grid; place-items: center; width: 32px; height: 32px; flex: none; padding: 0; cursor: pointer;
  background: transparent; color: var(--key-2); border: 1px solid var(--rule); }
.story-close:hover { color: var(--key); border-color: var(--key-2); }
.story-close svg { width: 14px; height: 14px; }
.story-title { padding: 20px var(--pad) 0; font: 650 20px/1.3 var(--f-text); text-wrap: balance; }
.story-text { padding: 12px var(--pad) 20px; font-size: var(--t-read); line-height: 1.6; text-wrap: pretty; overflow-wrap: anywhere; }
.story-link { display: block; padding: 14px var(--pad); border-top: 1px solid var(--rule);
  font: 500 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.story-link:hover { background: var(--paper); color: var(--key); }

/* logos and avatars */
.logo { display: block; flex: none; object-fit: cover; background: var(--paper); border: 1px solid var(--rule); }
.logo.round { border-radius: 50%; }
.logo.square { border-radius: 5px; }
.mono-gram { display: grid; place-items: center; font: 700 var(--t-meta)/1 var(--f-display); color: var(--key-2); }

/* ---------- tabs: shared parts ---------- */
.view.scroll { display: flex; flex-direction: column; gap: 24px; }
/* tabs read better at a fixed measure than stretched across a wide screen */
.view.scroll > * { width: 100%; max-width: 1240px; margin-inline: auto; }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; }
.block-head h2 { font: 800 var(--t-num)/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.head-link { font: 500 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
/* jump to a section further down the tab */
.jump { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.jump a { font: 500 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--key-2);
  text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.jump a:hover { color: var(--key); border-bottom-color: var(--key); }
.subsection { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 16px; }
.subsection + .subsection { margin-top: 24px; }
.sub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.sub-head .meta { margin-left: auto; }
.sub-title { font: 800 var(--t-num-s)/1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card { position: relative; background: var(--sheet); border: 1px solid var(--rule); padding: 16px var(--pad); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card::before { content: ""; position: absolute; top: -5px; left: -5px; width: 9px; height: 9px; border-top: 1px solid var(--key-2); border-left: 1px solid var(--key-2); }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.card-head h2, .card-head h3 { font: 700 var(--t-h3)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: .05em; }
.card-head .meta { white-space: normal; }
.card .table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--pad)); }
/* a narrow card (two side by side on a mid-size screen) shows shares as a number and lets heads wrap */
.card { container-type: inline-size; }
@container (max-width: 559px) {
  .card .share { display: none; }
  .card .share-v { margin-left: 0; }
  .card th { white-space: normal; }
}
.card .check { padding: 4px 8px; border: 0; }
.appsub { font: 600 var(--t-small)/1.2 var(--f-text); color: var(--key-2); margin: 8px 0 0; }
.appsub span { font: 400 var(--t-label) var(--f-mono); margin-left: 8px; }
.card .appsub:first-of-type { margin-top: 0; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1000px) { .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a row of figures on a sheet */
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures > div { padding: 12px var(--pad); border-right: 1px solid var(--rule); min-width: 0; }
.figures > div:last-child { border-right: 0; }
.fig-label { display: block; font: 400 var(--t-label)/1.3 var(--f-mono); color: var(--key-2); text-transform: uppercase; letter-spacing: .06em; }
.fig-value { font: 700 var(--t-num)/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .figures > div { padding-inline: 12px; }
  .fig-value { font-size: var(--t-num-s); }
  .figures.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures.four > div:nth-child(2) { border-right: 0; }
  .figures.four > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
.check { font: 400 var(--t-label)/1.4 var(--f-mono); padding: 8px var(--pad); }
.check.ok { color: var(--up); }
.check.warn { color: var(--down); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: var(--t-ui); }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th:first-child, td:first-child { padding-left: var(--pad); }
th:last-child, td:last-child { padding-right: var(--pad); }
th { position: sticky; top: 0; background: var(--sheet); font: 500 var(--t-label)/1.2 var(--f-mono); text-transform: uppercase;
  letter-spacing: .07em; color: var(--key-2); z-index: 1; }
td.n, th.n, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--paper); }
tr.grp td { font: 600 var(--t-label)/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--key-2); background: var(--paper); padding-top: 8px; padding-bottom: 6px; }
tr.partial td { color: var(--key-2); }
tfoot td { font-weight: 650; border-top: 1px solid var(--key-2); border-bottom: 0; font-variant-numeric: tabular-nums; }
table.platforms td:first-child { white-space: normal; }
/* Kraken's coins on Ink: one slim strip, the title and each coin in a row */
.kcoins { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 12px var(--pad); margin: 20px 0; }
.kcoins-title { font: 500 var(--t-label)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--key-2); }
.kcoin { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.kcoin .logo { align-self: center; }
.kcoin-v { font: 700 var(--t-num-s)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.kcoin:hover b { text-decoration: underline; text-underline-offset: 3px; }
.kcoins .meta { margin-left: auto; }

/* Best on Ink right now: two short lists side by side (stacked in a narrow board) */
.best-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 calc(-1 * var(--pad)) -16px;
  border-top: 1px solid var(--rule); }
.best-col { padding: 12px var(--pad) 14px; min-width: 0; }
.best-col + .best-col { border-left: 1px solid var(--rule); }
.best-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px;
  font: 500 var(--t-label)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--key-2); }
.best-head .go { text-transform: none; letter-spacing: 0; }
.best-list { list-style: none; margin: 0; padding: 0; }
.best-list li { border-bottom: 1px solid var(--rule); }
.best-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: inherit; text-decoration: none; }
.best-row:hover { color: inherit; }
.best-row:hover .best-what b { text-decoration: underline; text-underline-offset: 3px; }
/* under the name: who runs it, and on hover (or focus) where the row will take you */
.best-sub { display: grid; margin-top: 2px; }
.best-sub > * { grid-area: 1 / 1; transition: opacity .15s; }
.best-dest { color: var(--cyan); opacity: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.best-row:hover .best-sub > :first-child, .best-row:focus-visible .best-sub > :first-child { opacity: 0; }
.best-row:hover .best-dest, .best-row:focus-visible .best-dest { opacity: 1; }
.best-v[data-tip] { text-decoration: none; }
.best-list li .icons { min-width: 26px; }
.best-what { flex: 1; }
.best-what .proj { gap: 6px; }
.best-list li:last-child { border-bottom: 0; }
.best-what { display: flex; flex-direction: column; min-width: 0; }
.best-what b { font-weight: 650; overflow-wrap: anywhere; }
.best-v { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: none; }
.best-v b, b.best-v { font: 700 var(--t-num-s)/1.1 var(--f-display); font-variant-numeric: tabular-nums; }
.best-v .small { font-size: var(--t-label); }
@container (max-width: 559px) {
  .best-cols { grid-template-columns: minmax(0, 1fr); }
  .best-col + .best-col { border-left: 0; border-top: 1px solid var(--rule); }
}

/* one line of story above a board's table */
.lede { font-size: var(--t-read); line-height: 1.45; text-wrap: pretty; }
.lede b { font-weight: 650; }
/* names in tables are links; underline only on hover so a column of names stays calm */
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
.sym { font: 700 var(--t-ui)/1 var(--f-display); letter-spacing: .04em; }
.sec { font-weight: 650; font-size: var(--t-ui); }
.sec-n { font: 400 var(--t-label)/1.3 var(--f-mono); color: var(--key-2); margin-left: 4px; }
.share { display: inline-block; width: 70px; height: 6px; background: var(--paper); border: 1px solid var(--rule); vertical-align: middle; }
.share span { display: block; height: 100%; background: var(--cyan); }
.share-v { font: 400 var(--t-label) var(--f-mono); color: var(--key-2); margin-left: 6px; }
.cell-note { display: block; margin-top: 2px; white-space: normal; }

/* ---------- Markets tab ---------- */
/* a liquidation is one line: when, which side and markets, how much */
.liqs { list-style: none; margin: 0; padding: 0; }
.liq { display: grid; grid-template-columns: 4px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--rule); }
.liq:last-child { border-bottom: 0; }
.liq::before { content: ""; align-self: stretch; background: var(--rule); }
.liq.long::before { background: var(--down); }
.liq.short::before { background: var(--up); }
.liq time { font-size: var(--t-meta); color: var(--key-2); }
.liq span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.liq b { font-variant-numeric: tabular-nums; }
details.markets-all > summary { cursor: pointer; list-style: none; }
details.markets-all > summary::-webkit-details-marker { display: none; }
details.markets-all > summary h3::before { content: "+ "; color: var(--key-2); }
details.markets-all[open] > summary h3::before { content: "− "; }
.sector-tables .appsub { margin-top: 16px; }
.sector-tables .table-wrap { margin-top: 4px; }

/* one chart frame everywhere */
.chartrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1000px) { .chartrow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* six charts on the Ink tab: two by three on mid widths, three by two on wide screens */
@media (min-width: 700px) { .chartrow.six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .chartrow.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* a chart's head: the title, its source on a line of its own beneath */
.chartcard .card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
.chart-empty { padding: 40px 0; text-align: center; }
.chart { position: relative; margin: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
/* --k is viewBox units per screen pixel (set by app.js), so labels stay 10.5px on any card */
.chart .tick { fill: var(--key-2); font-family: var(--f-mono); font-size: calc(10.5px * var(--k, 1)); }
.chart .grid, .chart .line, .chart .cross { vector-effect: non-scaling-stroke; }
.chart .area { fill: var(--cyan); fill-opacity: .12; }
.chart .line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; }
.chart .end, .chart .dot { fill: var(--cyan); stroke: var(--sheet); stroke-width: 2; }
.chart .cross { stroke: var(--key-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart [hidden] { display: none; }
.chart .bars rect { fill: var(--cyan); fill-opacity: .7; }
.chart .bars rect:hover { fill-opacity: 1; }
.tip { position: absolute; top: 0; pointer-events: none; background: var(--sheet); border: 1px solid var(--key);
  padding: 4px 8px; font: 600 var(--t-meta)/1.4 var(--f-text); white-space: nowrap; transform: translateY(-100%); }
.tip span { display: block; font: 400 var(--t-label) var(--f-mono); color: var(--key-2); }

/* ---------- DeFi and Apps tabs ---------- */
.card-head .chips { margin-right: auto; }
.earn tbody[hidden], .earn tr[hidden] { display: none; }
.pts { font: 600 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; background: var(--yellow); color: #14161B; padding: 3px 4px 2px; margin-left: 8px; vertical-align: 2px; }
/* token icons: one, or two overlapping for a pool */
.pos { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.icons { display: inline-flex; flex: none; min-width: 22px; }
.icons .logo + .logo { margin-left: -8px; box-shadow: 0 0 0 2px var(--sheet); }
.proj { display: inline-flex; align-items: center; gap: 8px; }
.assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.asset { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--rule); text-decoration: none; position: relative; }
.asset:hover { border-color: var(--key-2); color: inherit; }
.asset-sym { font: 600 var(--t-label) var(--f-mono); letter-spacing: .06em; color: var(--key-2); }
.asset-v { font: 700 var(--t-num)/1.05 var(--f-display); font-variant-numeric: tabular-nums; }
.asset-n { font-size: var(--t-meta); color: var(--key-2); }
.appcat { display: flex; flex-direction: column; gap: 12px; }
.appcat-title { font: 700 var(--t-h3)/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.appgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.app-card { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--sheet); border: 1px solid var(--rule); text-decoration: none; min-width: 0; }
.app-card:hover { border-color: var(--key-2); color: inherit; }
.app-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.app-name { font-weight: 650; font-size: var(--t-ui); }
.app-cat { font-size: var(--t-meta); color: var(--key-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the rest of the directory, folded into one bar that opens in place */
details.more-apps { display: block; }
details.more-apps > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px;
  background: var(--sheet); border: 1px solid var(--rule); cursor: pointer; list-style: none; }
details.more-apps > summary::-webkit-details-marker { display: none; }
details.more-apps > summary:hover { border-color: var(--key-2); }
details.more-apps > summary .appcat-title::before { content: "+ "; color: var(--key-2); }
details.more-apps[open] > summary .appcat-title::before { content: "− "; }
details.more-apps .appgrid { margin-top: 12px; }
.more-apps-sub { font-size: var(--t-small); color: var(--key-2); }

/* ---------- INK Token tab ---------- */
/* the token's own sheet: a solid band with its name, then its facts beside its history */
.token-head { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  padding: 20px var(--pad) 22px; background: var(--band); color: var(--band-ink); }
/* a brushed-silver line along the band's foot, like the mark and the current tab */
.token-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #5E6672, #C9CED6 50%, #5E6672); }
.token-tick { font: 800 64px/.85 var(--f-display); letter-spacing: .04em; }
.token-about { margin-top: 10px; font-size: var(--t-read); text-wrap: pretty; }
.token-state { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.token-head .status { border-color: currentColor; }
.token-head .meta { color: var(--band-2); }
.token-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.token-body > * { padding: 12px var(--pad) 16px; min-width: 0; }
.token-tl { border-top: 1px solid var(--rule); }
.token-tl .appsub { margin: 4px 0 4px; }
@media (min-width: 1000px) {
  .token-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .token-tl { border-top: 0; border-left: 1px solid var(--rule); }
}
@media (max-width: 559px) { .token-state { align-items: flex-start; } .token-tick { font-size: 52px; } }
.facts { display: grid; gap: 0; margin: 0; }
.facts > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font: 500 var(--t-label)/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--key-2); }
.facts dd { margin: 0; text-wrap: pretty; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.timeline li:last-child { border-bottom: 0; }
.timeline li.next .tl-date { color: var(--key); font-weight: 600; }
.tl-date { font: 400 var(--t-meta)/1.4 var(--f-mono); color: var(--key-2); white-space: nowrap; }
.tl-what { text-wrap: pretty; }
/* only the exceptions are marked; everything else on the timeline is official */
.tl-kind { font: 500 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--key-2); white-space: nowrap; }
.tl-kind.rumour { font-style: italic; }
.facts a, .tl-what a { text-decoration-color: var(--rule); }
.facts a:hover, .tl-what a:hover { text-decoration-color: currentColor; }
@media (max-width: 559px) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .timeline li { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-date { grid-column: 1 / -1; }
}
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ladder li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.ladder-k { font: 500 var(--t-meta) var(--f-mono); color: var(--key-2); }
.ladder-bar { height: 14px; background: var(--paper); border: 1px solid var(--rule); }
.ladder-bar span { display: block; height: 100%; background: var(--cyan); }
.odds .chips { margin-bottom: 12px; }
.odds [data-panel] { display: flex; flex-direction: column; gap: 8px; }
.odds [data-panel][hidden] { display: none; }
.odds .go { align-self: flex-start; }
.ladder-v { font: 700 var(--t-num-s)/1 var(--f-display); text-align: right; font-variant-numeric: tabular-nums; }
.status { font: 600 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; padding: 4px 6px 3px; border: 1px solid var(--rule); white-space: nowrap; }
.status.live { background: var(--yellow); border-color: var(--yellow); color: #14161B; }
.status.ended { color: var(--key-2); }
.scenario { }
.notes { display: grid; gap: 4px; font-size: var(--t-small); line-height: 1.45; color: var(--key-2); text-wrap: pretty; }
/* the points calculator: two choices in, a price per point out */
.calc-in { display: grid; gap: 16px; }
.slide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; }
.slide-k { font-size: var(--t-small); color: var(--key-2); }
.slide output { font: 700 var(--t-num-s)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.slide input { grid-column: 1 / -1; width: 100%; height: 24px; margin: 0; accent-color: var(--cyan); cursor: pointer; }
.calc-out { margin: 0; }
.calc-out > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.calc-out dt { font-weight: 650; }
.calc-out dt span { display: block; font-size: var(--t-meta); font-weight: 400; color: var(--key-2); }
.calc-out dd { margin: 0; font: 700 var(--t-num)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.points { }
.live-pts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; align-items: start; }
.lp { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--rule); }
.lp-k { font-size: var(--t-small); color: var(--key-2); }
.lp-v { font: 700 var(--t-num)/1.05 var(--f-display); font-variant-numeric: tabular-nums; }
.lp-v small { font: 400 var(--t-meta) var(--f-text); color: var(--key-2); margin-left: 4px; }
.lp-bar { height: 8px; background: var(--sheet); border: 1px solid var(--rule); }
.lp-bar span { display: block; height: 100%; background: var(--cyan); }
.lp-n { font-size: var(--t-small); color: var(--key-2); line-height: 1.45; }
.pt-name { display: inline-flex; align-items: center; gap: 12px; font-weight: 650; text-decoration: none; white-space: nowrap; }
/* in the programs table a status is a word with a dot, not a box: five boxes in a column shout */
.pts-table .status { border: 0; padding: 0; background: none; color: var(--key); }
.pts-table .status.live::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--yellow); vertical-align: 1px; }
.pts-table .status.ended { color: var(--key-2); }

/* ---------- footer ---------- */
/* the footer: one quiet line, the disclaimer on the left and the sources on the right */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px;
  padding: 8px var(--gutter-r) 10px var(--gutter); font: 400 var(--t-label)/1.5 var(--f-mono); color: var(--key-2);
  border-top: 1px solid var(--rule); background: var(--sheet); }
.foot-note { margin: 0; }
.foot-src { white-space: nowrap; }
.foot-by { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.foot-by a { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--key-2); }
.foot-by a:hover { color: var(--key); }
.foot-by svg { width: 14px; height: 14px; }

/* ---------- phones ---------- */
/* a table's optional columns give way in a narrow card; a "narrow" column stands in for several of them */
.narrow { display: none; }
@container (max-width: 559px) {
  .card .opt { display: none; }
  .card .narrow { display: table-cell; }
}
/* a phone on its side or a small tablet: the least needed column gives way first */
@container (max-width: 760px) { .card .opt3 { display: none; } }
/* the narrowest phones: tighter cells, one more column gives way */
@container (max-width: 420px) {
  .card .opt2, .board .opt2 { display: none; }
  .card th, .card td, .board th, .board td { padding-inline: 6px; }
  .card th:first-child, .card td:first-child, .board th:first-child, .board td:first-child { padding-left: var(--pad); }
  .card th:last-child, .card td:last-child, .board th:last-child, .board td:last-child { padding-right: var(--pad); }
  /* names may wrap; numbers never do */
  .card td:first-child, .board td:first-child, .card td:first-child b, .card td:first-child a { white-space: normal; }
  .card th { white-space: normal; }
}
@media (max-width: 360px) { .tabs a { padding-inline: 3px; letter-spacing: .02em; } .tabs { gap: 0; } }
/* a table still wider than its card fades at the edge it can scroll to */
.table-wrap.fades:not(.at-end) { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
  mask-image: linear-gradient(to right, #000 82%, transparent); }
/* no hover on a touch screen: rows that are links say so with an arrow, and taps don't flash grey */
@media (hover: none) {
  .best-row .best-what b::after { content: " ↗"; color: var(--key-2); font-weight: 400; }
  .best-dest { display: none; }
}
a, button, [data-tip] { -webkit-tap-highlight-color: transparent; }
.foot { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

/* ---------- explanations: a dotted label shows a short note when the pointer rests on it ---------- */
[data-tip] { cursor: help; text-decoration: underline dotted var(--rule); text-decoration-thickness: 1px; text-underline-offset: 3px; }
[data-tip]:hover { text-decoration-color: var(--key-2); }
[data-tip]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.hint { position: fixed; z-index: 50; max-width: 320px; padding: 8px 10px; pointer-events: none;
  background: var(--key); color: var(--sheet); font: 400 var(--t-small)/1.45 var(--f-text);
  text-transform: none; letter-spacing: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); animation: fade .15s ease-out; }
.hint[hidden] { display: none; }

/* ---------- motion ---------- */
/* Only opacity and transform move (the compositor draws them, so a phone does not work for it), only once per
   event, and never on the minute-by-minute refresh except to mark what changed. Reduced motion turns it all off. */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes glow { from { background-color: var(--yellow-wash); } to { background-color: transparent; } }
/* a tab fades in when opened */
.view:not([hidden]) { animation: rise .24s cubic-bezier(.2, .8, .2, 1); }
/* the first look at a view: sheets rise one after another, share bars fill from the left */
.reveal .sheet, .reveal .card { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both; }
.reveal .sheet:nth-child(2), .reveal .card:nth-child(2) { animation-delay: .06s; }
.reveal .sheet:nth-child(3), .reveal .card:nth-child(3) { animation-delay: .12s; }
.reveal .sheet:nth-child(n+4), .reveal .card:nth-child(n+4) { animation-delay: .18s; }
.reveal .share span { transform-origin: left; animation: grow .7s .2s cubic-bezier(.2, .8, .2, 1) both; }
/* news: a page opened with More news, and posts that arrived since the last refresh */
.post.in { animation: rise .35s cubic-bezier(.2, .8, .2, 1) both; }
.post.fresh { animation: rise .45s cubic-bezier(.2, .8, .2, 1) both, glow 2.4s ease-out; }
.post-link { transition: background-color .15s; }
.post-link:hover { background-color: var(--paper); }
/* a number that changed on refresh glows yellow for a moment */
.changed { animation: glow 1.8s ease-out; }
/* the story window rises in over a fading backdrop */
dialog.story[open] { animation: pop .22s cubic-bezier(.2, .8, .2, 1); }
dialog.story[open]::backdrop { animation: fade .22s ease-out; }
/* the mark turns a quarter on hover, like a spark catching the light */
.brand svg { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.brand:hover svg { transform: rotate(90deg); }
.more, .story-link, .story-close, .chips button { transition: background-color .15s, border-color .15s, color .15s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { transition: none !important; animation: none !important; } }