/* SuperSlop TV — design system ported from soulsplay (/Users/i/TURIK,
 * web/src/styles/{tokens,base,typography,button,glass}.css).
 *
 * Port notes:
 *  - Values are copied 1:1 from the soulsplay tokens. Anything that only makes
 *    sense in that React/Telegram app (tabbar geometry, safe-area, z-layers for
 *    sheets, squircle clip-path) is left out — this is a static multi-page site.
 *  - The stream player keeps its own retro look. Nothing here targets it; it is
 *    fenced off by .retro (see the bottom of this file).
 *  - Loaded by every page BEFORE the page's own <style>, so per-page rules still
 *    win where a page needs something special.
 */

/* ── Fonts ── */
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueCyr-Roman.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueCyr-Medium.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueCyr-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Helvetica Neue';src:url('fonts/HelveticaNeueCyr-Heavy.woff2') format('woff2');font-weight:900;font-display:swap;}
@font-face{font-family:'Helvetica Display';src:url('fonts/HelveticaDisplay-XBold.woff2') format('woff2');font-weight:900;font-display:swap;}
@font-face{font-family:'Disket';src:url('fonts/Disket-Mono-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}

:root{
  color-scheme: light;

  /* Colour — soulsplay canon */
  --background:#ffffff;
  --on-background:#696969;
  --surface:#efefef;
  --on-surface:#696969;
  --surface-light:#f7f7f7;
  --surface-75:rgba(255,255,255,.75);

  --accent:#c2e900;        /* fill only; text on it is --on-accent */
  --on-accent:#10120a;
  --accent-ink:#5e7200;    /* lime as TEXT on white (AA) */
  --accent-pressed:#a8cb00;
  --accent-soft:rgba(194,233,0,.18);

  --abstract:#00de73;
  --secondary:#6e6e6e;
  --secondary-surface:#cccccc;
  --secondary-dark:#2f2f2f;
  --light-grey:#a3a3a3;
  --error:#d62839;
  --success:#407fdb;
  --warning:#e85a1c;

  /* Borders / radii */
  --border-color:15,15,15;
  --border-opacity:.12;
  --border:1px solid rgba(var(--border-color),var(--border-opacity));
  --border-radius-x-small:4px;
  --border-radius-small:8px;
  --border-radius-regular:12px;
  --border-radius-large:16px;
  --border-radius-x-large:32px;
  --radius-pill:999px;

  /* Type */
  --font-body:'Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Helvetica Display','Helvetica Neue',sans-serif;
  --font-mono:'Disket',ui-monospace,'SF Mono',Menlo,monospace;

  /* Screen rhythm */
  --space-block:56px;
  --space-head:20px;
  --space-cards:24px;

  --font-size-alpha:112px;   --font-weight-alpha:900;      --line-height-alpha:124px;
  --font-size-xxl-title1:72px; --font-weight-xxl-title1:900; --line-height-xxl-title1:84px;
  --font-size-xxl-title2:56px; --font-weight-xxl-title2:900; --line-height-xxl-title2:68px;
  --font-size-xl-title1:48px;  --font-weight-xl-title1:900;  --line-height-xl-title1:56px;
  --font-size-xl-title2:38px;  --font-weight-xl-title2:900;  --line-height-xl-title2:46px;
  --font-size-lg-title:28px;   --font-weight-lg-title:900;   --line-height-lg-title:36px;
  --font-size-title1:24px;     --font-weight-title1:500;     --line-height-title1:32px;
  --font-size-title2:20px;     --font-weight-title2:600;     --line-height-title2:24px;
  --font-size-body-1:17px;     --font-weight-body-1:600;     --line-height-body-1:22px;
  --font-size-body-2:15px;     --font-weight-body-2:500;     --line-height-body-2:20px;
  --font-size-callout:13px;    --font-weight-callout:500;    --line-height-callout:18px;
  --font-size-caption1:12px;   --font-weight-caption1:600;   --line-height-caption1:16px;

  /* Buttons (canon 32/44/52/60) */
  --button-small-height:32px;   --button-small-font-size:15px;   --button-small-padding:0 16px;
  --button-regular-height:44px; --button-regular-font-size:17px; --button-regular-padding:0 20px;
  --button-large-height:52px;   --button-large-font-size:19px;   --button-large-padding:0 26px;
  --button-xl-height:60px;      --button-xl-font-size:22px;      --button-xl-padding:0 30px;

  /* Shadows / glass */
  --shadow-soft:0 2px 8px rgba(15,15,15,.06);
  --shadow-card:0 6px 16px rgba(15,15,15,.07),0 2px 4px rgba(15,15,15,.05);
  --shadow-float:0 24px 60px rgba(15,15,15,.12),0 6px 16px rgba(15,15,15,.07);
  --glass-bg:rgba(255,255,255,.72);
  --glass-blur:blur(24px) saturate(140%);
  --glass-border:rgba(15,15,15,.08);

  --ease-standard:cubic-bezier(.2,0,0,1);
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box;}

body{
  margin:0;
  background:var(--background);
  background-image:none;
  color:var(--on-background);
  font-family:var(--font-body);
  font-size:var(--font-size-body-2);
  font-weight:var(--font-weight-body-2);
  line-height:var(--line-height-body-2);
  -webkit-font-smoothing:antialiased;
  cursor:auto;
}

a{color:var(--accent-ink);text-decoration:none;}
a:hover{color:var(--on-background);text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
hr{border:0;border-top:var(--border);margin:var(--space-block) 0;}

/* The page shell. Replaces the old <center> + percentage-width <table> layout. */
.wrap{max-width:1040px;margin:0 auto;padding:0 20px;}
.section{margin-bottom:var(--space-block);}
.section > h2, .section > .section-head{margin:0 0 var(--space-head);}

/* ── Typography ── */
.text-alpha,.text-xxl-1,.text-xxl-2,.text-xl,.text-lg{font-family:var(--font-display);}
.text-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.text-alpha{font-size:var(--font-size-alpha);font-weight:var(--font-weight-alpha);line-height:var(--line-height-alpha);}
.text-xxl-1{font-size:var(--font-size-xxl-title1);font-weight:var(--font-weight-xxl-title1);line-height:var(--line-height-xxl-title1);}
.text-xxl-2{font-size:var(--font-size-xxl-title2);font-weight:var(--font-weight-xxl-title2);line-height:var(--line-height-xxl-title2);}
.text-xl{font-size:var(--font-size-xl-title1);font-weight:var(--font-weight-xl-title1);line-height:var(--line-height-xl-title1);}
.text-lg{font-size:var(--font-size-lg-title);font-weight:var(--font-weight-lg-title);line-height:var(--line-height-lg-title);}
.text-title1{font-size:var(--font-size-title1);font-weight:var(--font-weight-title1);line-height:var(--line-height-title1);}
.text-title2{font-size:var(--font-size-title2);font-weight:var(--font-weight-title2);line-height:var(--line-height-title2);}
.text-body-1{font-size:var(--font-size-body-1);font-weight:var(--font-weight-body-1);line-height:var(--line-height-body-1);}
.text-body-2{font-size:var(--font-size-body-2);font-weight:var(--font-weight-body-2);line-height:var(--line-height-body-2);}
.text-callout{font-size:var(--font-size-callout);font-weight:var(--font-weight-callout);line-height:var(--line-height-callout);}
.text-caption{font-size:var(--font-size-caption1);font-weight:var(--font-weight-caption1);line-height:var(--line-height-caption1);}
.text-secondary{color:var(--secondary);}
.text-accent-ink{color:var(--accent-ink);}
.text-error{color:var(--error);}

@media screen and (max-width:960px){
  .text-alpha,.text-xxl-1{font-size:var(--font-size-xl-title1);line-height:var(--line-height-xl-title1);}
  .text-xxl-2{font-size:var(--font-size-xl-title2);line-height:var(--line-height-xl-title2);}
}

h1,h2,h3{font-family:var(--font-display);font-weight:900;color:var(--on-background);margin:0;}
h1{font-size:var(--font-size-xl-title1);line-height:var(--line-height-xl-title1);}
h2{font-size:var(--font-size-lg-title);line-height:var(--line-height-lg-title);}
h3{font-size:var(--font-size-title2);line-height:var(--line-height-title2);font-family:var(--font-body);font-weight:600;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;cursor:pointer;font-family:var(--font-body);font-weight:600;
  text-transform:none;text-decoration:none;
  transition:background-color 120ms var(--ease-standard) 0ms,opacity 120ms var(--ease-standard) 0ms;
}
.btn:active{transition-delay:90ms;}
.btn:hover{text-decoration:none;}
.btn:disabled{color:var(--secondary-dark)!important;background-color:rgba(var(--border-color),.08)!important;cursor:not-allowed;}
.btn--sm{height:var(--button-small-height);font-size:var(--button-small-font-size);padding:var(--button-small-padding);border-radius:var(--border-radius-small);}
.btn--md{height:var(--button-regular-height);font-size:var(--button-regular-font-size);padding:var(--button-regular-padding);border-radius:var(--border-radius-regular);}
.btn--lg{height:var(--button-large-height);font-size:var(--button-large-font-size);padding:var(--button-large-padding);border-radius:var(--border-radius-large);}
.btn--xl{height:var(--button-xl-height);font-size:var(--button-xl-font-size);padding:var(--button-xl-padding);border-radius:var(--border-radius-large);}
.btn--primary{background:var(--accent);color:var(--on-accent);}
.btn--primary:active{background:var(--accent-pressed);}
.btn--primary:hover{color:var(--on-accent);}
.btn--dark{background:var(--on-background);color:var(--background);}
.btn--dark:hover{color:var(--background);}
.btn--ghost{background:transparent;color:var(--on-background);border:var(--border);}
.btn--pill{border-radius:var(--radius-pill);}

/* ── Chips (the soulsplay section nav) ── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 14px;border-radius:var(--radius-pill);
  background:var(--surface);color:var(--on-surface);
  font-size:var(--font-size-callout);font-weight:600;line-height:1;
  text-decoration:none;white-space:nowrap;
  transition:background-color 120ms var(--ease-standard);
}
.chip:hover{background:var(--secondary-surface);color:var(--on-surface);text-decoration:none;}
.chip--active{background:var(--accent);color:var(--on-accent);}
.chip--active:hover{background:var(--accent-pressed);color:var(--on-accent);}

/* ── Cards ── */
.card{
  background:var(--surface-light);
  border-radius:var(--border-radius-large);
  box-shadow:var(--shadow-card);
  padding:20px;
  overflow:hidden;
}
.card--flat{box-shadow:none;border:var(--border);}
.card--accent{background:var(--accent);color:var(--on-accent);}
.card--media{padding:0;}
.card--media img,.card--media video{width:100%;display:block;}
.card-grid{display:grid;gap:var(--space-cards);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}

/* ── Glass (used by the header bar) ── */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  height:24px;padding:0 10px;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  background:var(--surface);color:var(--on-surface);
}
.badge--live{background:var(--error);color:#fff;}
.badge--accent{background:var(--accent);color:var(--on-accent);}

/* ── Forms ── */
.field{
  width:100%;height:var(--button-regular-height);
  padding:0 16px;border-radius:var(--border-radius-regular);
  border:var(--border);background:var(--background);color:var(--on-background);
  font-family:var(--font-body);font-size:var(--font-size-body-2);
  outline:none;
}
.field:focus{border-color:var(--accent-ink);}
.field::placeholder{color:var(--light-grey);}

/* ── Retro fence ─────────────────────────────────────────────────────────
 * Everything inside .retro is deliberately NOT ported: the stream window and
 * its CRT overlay keep the original Win98/HTML4 look. The reset above is
 * undone here so the old <font>/<table> markup renders as it always did. */
.retro,.retro *{box-sizing:content-box;}
.retro{font-family:'Courier New',monospace;color:#111;}
.retro a{color:#006600;}
.retro a:hover{color:#000;}

/* ── Site header (injected by header.js) ───────────────────────────────── */
.ss-head{position:sticky;top:0;z-index:900;}
.ss-head__row{
  /* Two rows, not three: the wordmark and the contract pill share the top line,
     the ten nav chips get the full width underneath. Stacking all three as a
     wrapping flex row made the sticky header 162px tall. */
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:'logo . ca' 'nav nav nav';
  align-items:center;row-gap:12px;column-gap:20px;
  padding-top:12px;padding-bottom:12px;
}
.ss-logo{grid-area:logo;display:flex;flex-direction:column;line-height:1;text-decoration:none;color:var(--on-background);flex:0 0 auto;}
.ss-logo:hover{text-decoration:none;color:var(--on-background);}
.ss-logo__mark{font-family:var(--font-display);font-weight:900;font-size:26px;letter-spacing:-.5px;}
.ss-logo__sub{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:2.5px;color:var(--light-grey);margin-top:3px;}
.ss-nav{grid-area:nav;display:flex;flex-wrap:wrap;gap:6px;}
.ss-ca{
  grid-area:ca;justify-self:end;
  display:inline-flex;align-items:center;gap:8px;
  height:32px;padding:0 6px 0 12px;border:none;
  border-radius:var(--radius-pill);background:var(--surface);
  font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--on-surface);
  cursor:pointer;max-width:100%;
}
.ss-ca__addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;}
.ss-ca__copy{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:var(--radius-pill);
  background:var(--background);font-size:11px;flex:0 0 auto;
}
.ss-ca:hover{background:var(--secondary-surface);}
.ss-tagline{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--light-grey);letter-spacing:1px;
  padding-bottom:18px;
}
@media screen and (max-width:760px){
  .ss-head{position:static;}
  .ss-head__row{row-gap:10px;column-gap:12px;}
  .ss-ca__addr{max-width:120px;}
  /* Ten chips wrapped into five rows on a phone. Scroll them instead — the row
     stays one chip tall and the edge-to-edge bleed hints there is more. */
  /* Полноширинный вынос чипов не должен создавать прокрутку у страницы:
     на узком окне полоса прокрутки съедает часть clientWidth. */
  .ss-head{overflow-x:clip;}
  .ss-nav{
    flex-wrap:nowrap;overflow-x:auto;
    margin:0 -20px;padding:2px 20px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .ss-nav::-webkit-scrollbar{display:none;}
  .ss-nav .chip{flex:0 0 auto;}
}

/* ── Radio strip ── */
.ss-radio{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 18px;margin-bottom:24px;
  background:var(--surface-light);border-radius:var(--radius-pill);
}
.ss-radio__now{color:var(--on-background);}
.ss-radio__ctl{display:inline-flex;gap:6px;}
.ss-radio__list{flex:1 1 auto;min-width:180px;}
.ss-radio__list span{color:var(--secondary);}
@media screen and (max-width:760px){.ss-radio{border-radius:var(--border-radius-large);}}

/* ── Floating side cards (token / NFT) ── */
.ss-side{
  position:fixed;top:50%;transform:translateY(-50%);z-index:850;
  width:230px;padding:10px;
  background:var(--background);border-radius:var(--border-radius-large);
  box-shadow:var(--shadow-float);
}
.ss-side--left{left:16px;}
.ss-side--right{right:16px;}
.ss-side__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px;}
.ss-side__media{display:block;border-radius:var(--border-radius-regular);overflow:hidden;}
.ss-side__media img{width:100%;height:186px;object-fit:cover;}
.ss-side__cap{display:block;text-align:center;padding-top:10px;color:var(--accent-ink);font-weight:600;}
@media screen and (max-width:1400px){.ss-side{display:none;}}

/* Stream window sits in a DS frame, but its own insides stay retro. */
.ss-stream{margin:0 0 var(--space-block);}
.ss-stream table{width:100%;}

/* ── Broadcast console ── */
.ss-console{max-width:720px;margin:0 auto var(--space-block);}
.ss-console__row{display:flex;gap:10px;}
.ss-console__input{flex:1 1 auto;}
.ss-console__status{min-height:20px;padding:10px 2px 12px;}
.ss-console__log{
  display:none;max-height:120px;overflow-y:auto;
  background:var(--background);border-radius:var(--border-radius-regular);
  padding:10px 12px;margin-bottom:12px;font-size:11px;color:var(--secondary);
}
.ss-console__feed{
  max-height:250px;overflow-y:auto;
  background:var(--background);border-radius:var(--border-radius-regular);
  padding:12px 14px;
}
/* Приём закрыт: база недоступна, playlist отдаёт архив. */
.ss-console.is-closed .ss-console__row{opacity:.5;pointer-events:none;}

/* ── Section headings ── */
.ss-h{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--font-size-xl-title1);line-height:var(--line-height-xl-title1);
  color:var(--on-background);letter-spacing:-1px;
  margin:0 0 var(--space-head);
}
@media screen and (max-width:960px){
  .ss-h{font-size:var(--font-size-xl-title2);line-height:var(--line-height-xl-title2);}
}

/* ── Card tables ───────────────────────────────────────────────────────────
 * The sections are authored as <table cellspacing="8"> with <td class="card">.
 * Rather than rewrite that markup, the table itself becomes the grid and its
 * tbody/tr step out of the way with display:contents. Same HTML, DS layout. */
table.card-grid{
  display:grid;width:100%;
  gap:var(--space-cards);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  border-collapse:separate;
}
table.card-grid > tbody,table.card-grid tr{display:contents;}
table.card-grid td{display:block;width:auto!important;}
table.card-grid td.card{background:var(--surface-light);border-radius:var(--border-radius-large);box-shadow:var(--shadow-card);padding:16px;}
table.card-grid td.card img{border:none!important;border-radius:var(--border-radius-regular);margin-bottom:12px;}

/* Card title that used to be <font class="jq" size 28> */
.ss-card-title{
  display:block;font-family:var(--font-body);font-weight:600;
  font-size:var(--font-size-title2);line-height:var(--line-height-title2);
  color:var(--on-background);margin-bottom:6px;
}

/* Standalone decorative GIFs between sections */
.ss-figure{
  display:block;margin:0 auto var(--space-block);
  max-width:520px;width:100%;height:auto;
  border-radius:var(--border-radius-large);
}

/* ── Data tables (schedule, careers) ── */
.ss-table{
  width:100%;border-collapse:collapse;
  background:var(--surface-light);border-radius:var(--border-radius-large);
  overflow:hidden;box-shadow:var(--shadow-soft);
}
.ss-table td,.ss-table th{
  padding:12px 16px;text-align:left;
  border-bottom:1px solid rgba(var(--border-color),.07);
  font-size:var(--font-size-body-2);color:var(--on-background);
}
.ss-table tr:last-child td{border-bottom:none;}
.ss-table tr[onclick]{cursor:pointer;}
.ss-table tr[onclick]:hover td{background:var(--surface);}
.ss-table td[bgcolor],.ss-table th[bgcolor]{background:transparent!important;}

/* ── Terminal block (agents advisory) ── */
.ss-terminal{font-size:var(--font-size-callout);line-height:1.7;color:#c9c9c9;overflow-wrap:anywhere;}
.ss-terminal font{color:inherit!important;}
.ss-terminal b{color:var(--accent);}

/* ── Follow banner ── */
.ss-follow{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.ss-follow__ava img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius-pill);max-width:none;}
.ss-follow__body{flex:1 1 240px;}

/* Nothing outside .retro may push the page sideways. */
.wrap table{max-width:100%;}
.wrap td,.wrap th{overflow-wrap:anywhere;}
.retro table,.retro td{overflow-wrap:normal;}

/* ── Legacy attribute bridge ───────────────────────────────────────────────
 * The pages are authored in HTML4: colour and chrome live in <font color>,
 * bgcolor and bordercolor attributes, hundreds of them. Rewriting every tag
 * would be a far riskier diff than mapping the handful of legacy values onto
 * design tokens here. Scoped to .wrap so .retro keeps its own palette. */
.wrap table[border],
.wrap table[bordercolor],
.wrap td[bordercolor]{border:none!important;}

.wrap [bgcolor="#c0c0c0"],
.wrap [bgcolor="#d0d0d0"],
.wrap [bgcolor="#bbb"],
.wrap [bgcolor="#ddd"],
.wrap [bgcolor="#e8e8e8"]{background-color:var(--surface-light)!important;}
.wrap [bgcolor="#999"],
.wrap [bgcolor="#b8b8b8"]{background-color:var(--surface)!important;}

.wrap font[color="#000"],
.wrap font[color="#111"],
.wrap font[color="#222"],
.wrap font[color="#333"]{color:var(--on-background);}
.wrap font[color="#555"],
.wrap font[color="#666"],
.wrap font[color="#888"],
.wrap font[color="#999"]{color:var(--secondary);}
.wrap font[color="#006600"],
.wrap font[color="#060"]{color:var(--accent-ink);}
.wrap font[color="#cc0000"],
.wrap font[color="#c00"],
.wrap font[color="#f00"]{color:var(--error);}
.wrap font[color="#000080"],
.wrap font[color="#006666"]{color:var(--accent-ink);}

/* Dark blocks keep their own colours — the bridge must not reach inside. */
.card-dark font,.ss-terminal font,.retro font{color:inherit;}
.ss-terminal font[color="#0f0"]{color:var(--accent)!important;}

/* <u> under "CLICK FOR MORE" reads as a link cue, not an underline. */
.wrap .card u{text-decoration:none;color:var(--accent-ink);font-weight:600;}

/* MCP wordmark keeps its two-tone accent on the DS heading. */
.ss-h--mcp{letter-spacing:2px;}
.ss-h__alt{color:var(--accent-ink);}

/* ── Ticker ── */
.wrap marquee{
  display:block;width:100%;
  background:var(--surface-light)!important;
  border-radius:var(--radius-pill);
  padding:10px 0;margin-bottom:var(--space-block);
  font-family:var(--font-mono);font-size:11px;color:var(--secondary);
}
.wrap marquee font{color:var(--secondary)!important;}

/* Dark variant for the agent/MCP advisory tables. */
.ss-table--dark{background:var(--secondary-dark);box-shadow:none;}
.ss-table--dark td,.ss-table--dark th{color:#d4d4d4;border-bottom-color:rgba(255,255,255,.08);}
.ss-table--dark font{color:inherit!important;}
.ss-table--dark tr:hover td{background:rgba(255,255,255,.04);}

/* Slot with no archived video: say so instead of promising a load. */
.vid-placeholder--empty{color:var(--light-grey)!important;}
.vid-placeholder--empty .text-caption{display:block;margin-top:6px;color:var(--light-grey);}

/* ── Table zebra and highlights ────────────────────────────────────────────
 * Rows carry their stripe as a bgcolor attribute in a dozen legacy greys and
 * pastels. Structurally there are only two meanings — "every other row" and
 * "this row is the live one" — so both are expressed once here rather than
 * mapping each hex. Dark tables opt out; they set their own. */
.ss-table:not(.ss-table--dark) tr[bgcolor]{background-color:var(--surface-light)!important;}
.ss-table:not(.ss-table--dark) tr[bgcolor="#ffdddd"],
.ss-table:not(.ss-table--dark) tr[bgcolor="#fff0f0"],
.ss-table:not(.ss-table--dark) tr[bgcolor="#fff0f5"],
.ss-table:not(.ss-table--dark) tr[bgcolor="#fff8f8"]{background-color:var(--accent-soft)!important;}
.ss-table:not(.ss-table--dark) tr[bgcolor="#fff"],
.ss-table:not(.ss-table--dark) tr[bgcolor="#ffffff"]{background-color:transparent!important;}

/* Programme names read as links; the HTML4 underline is not the DS cue. */
.ss-table a{color:var(--accent-ink);text-decoration:none;font-weight:600;}
.ss-table a:hover{color:var(--on-background);text-decoration:underline;}
.ss-table--dark a{color:var(--accent);}

/* Pale legacy tints used as panel backgrounds elsewhere on the pages. */
.wrap [bgcolor="#f8f0ff"],.wrap [bgcolor="#fafaff"],.wrap [bgcolor="#f0f0ff"],
.wrap [bgcolor="#fffff0"],.wrap [bgcolor="#fffaf0"],.wrap [bgcolor="#fff8f0"],
.wrap [bgcolor="#f0fff0"],.wrap [bgcolor="#f0f8ff"],.wrap [bgcolor="#c8c8c8"]{
  background-color:var(--surface-light)!important;
}

/* Clickable rows: the HTML4 cue is <u>, the DS cue is colour + weight. */
.ss-table tr[onclick] u,
.wrap .card u{text-decoration:none;color:var(--accent-ink);font-weight:600;}

/* face="Courier New" is sprinkled across the pages as the old body font.
 * Prose takes the DS body face; blocks that mean "machine output" keep a
 * monospace and are excluded below. */
.wrap font[face="Courier New"]{font-family:var(--font-body);}
.retro font[face],
.ss-terminal font[face],
.ss-table--dark font[face],
.card-dark font[face]{font-family:var(--font-mono);}