/* ==========================================================================
   ICCCMLA 2026 — shared shell

   A warm, light, paper-coloured surface. Three things keep it human rather
   than machine-generated:

     1. No monospace chrome. Mono is reserved for the things you actually
        read as data — clock times and Paper IDs — and everything else is
        set in ordinary sentence case at a readable size. No ALL-CAPS
        letter-spaced micro-labels on every box.
     2. Soft edges and light shadows instead of hard hairline rectangles,
        so the page reads as cards resting on paper rather than a wireframe.
     3. Warm neutrals. The greys are browned rather than blued, which is
        what stops a light UI feeling like a spreadsheet.

   It is also deliberately nothing like the ICACT pages: those are a formal
   serif printed document, ruled and justified. This is sans, rounded and
   conversational. Keep them apart.

   Dark mode is a real second skin, not an inversion, and the toggle
   remembers the choice.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Warm paper, not blue-grey. */
  --bg:        #f7f4ee;
  --bg-2:      #efe9e0;
  --panel:     #ffffff;
  --panel-2:   #fbf8f4;
  --raised:    #f2ece3;
  --line:      #e7ded1;
  --line-2:    #d6c9b6;

  --ink:       #2a2520;
  --ink-2:     #5f564b;
  --ink-3:     #8c8274;

  /* "cyan" and "amber" keep their names so the markup does not have to
     change; the values are a deep pine and a warm clay. */
  --cyan:      #10695e;
  --cyan-dim:  #bcded7;
  --amber:     #a85f24;
  --amber-dim: #f0ddc4;
  --green:     #3d7a37;
  --red:       #ab372a;
  --violet:    #63499f;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
          "Liberation Mono", Menlo, monospace;

  --r:   18px;
  --r-s: 11px;
  --pad: clamp(18px, 4vw, 38px);

  --sh-1: 0 1px 2px rgba(60, 44, 24, .05);
  --sh-2: 0 1px 2px rgba(60, 44, 24, .05), 0 10px 26px -16px rgba(60, 44, 24, .30);
  --sh-3: 0 2px 6px rgba(60, 44, 24, .07), 0 20px 44px -24px rgba(60, 44, 24, .38);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Warm charcoal, so the dark skin is the same room with the lights off. */
  --bg:        #1b1917;
  --bg-2:      #221f1c;
  --panel:     #26231f;
  --panel-2:   #2e2a25;
  --raised:    #35302a;
  --line:      #3a3430;
  --line-2:    #4d453c;

  --ink:       #f3ede4;
  --ink-2:     #c4b9aa;
  --ink-3:     #968b7c;

  --cyan:      #63c4b4;
  --cyan-dim:  #2b5f58;
  --amber:     #e09a5e;
  --amber-dim: #6b4a25;
  --green:     #77c06f;
  --red:       #ec8b7e;
  --violet:    #b39ce4;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .34);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .34), 0 10px 26px -16px rgba(0, 0, 0, .70);
  --sh-3: 0 2px 6px rgba(0, 0, 0, .40), 0 20px 44px -24px rgba(0, 0, 0, .80);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A slow warm wash off the top corner. Enough to stop the page feeling like
   a blank sheet, far too faint to read as decoration. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70rem 32rem at 8% -6%, color-mix(in srgb, var(--cyan) 11%, transparent), transparent 62%),
    radial-gradient(52rem 28rem at 96% 2%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 60%);
}

.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 var(--pad) 104px; }

a { color: var(--cyan); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.018em; line-height: 1.2; }

/* Times and Paper IDs. The one place monospace earns its keep. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ top bar --- */

.bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 11px var(--pad);
  padding-top: calc(11px + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar .brand {
  font-size: 15.5px; font-weight: 750; letter-spacing: -.01em;
  color: var(--ink); white-space: nowrap;
}
.bar .brand::before {
  content: ""; display: inline-block;
  width: 9px; height: 9px; border-radius: 50%; margin-right: 9px;
  background: var(--cyan); vertical-align: 1px;
}
.bar nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.bar nav a {
  padding: 6px 13px; border-radius: 999px; font-size: 14.5px;
  color: var(--ink-2); white-space: nowrap;
}
.bar nav a:hover { background: var(--raised); color: var(--ink); text-decoration: none; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px;
  background: var(--panel); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--sh-1);
  font: inherit; font-size: 14px; cursor: pointer;
}
.iconbtn:hover { color: var(--ink); border-color: var(--line-2); }

/* ------------------------------------------------------------- hero ----- */

.hero { padding: 62px 0 40px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 20px; padding: 5px 15px 5px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--sh-1);
  font-size: 14px; color: var(--ink-2);
}
.eyebrow .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 18%, transparent);
}
.hero h1 {
  font-size: clamp(34px, 5.6vw, 58px); font-weight: 780;
  letter-spacing: -.032em; max-width: 17ch;
}
.hero h1 b { color: var(--cyan); font-weight: 780; }
.hero .lede {
  margin: 20px 0 0; max-width: 60ch;
  font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.58; color: var(--ink-2);
}

.facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fact {
  display: flex; flex-direction: column; gap: 1px;
  padding: 12px 18px; min-width: 132px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-s); box-shadow: var(--sh-1);
}
.fact .k { font-size: 13px; color: var(--ink-3); }
.fact .v { font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }

/* ------------------------------------------------------------ sections -- */

section { padding-top: 62px; }
.sechead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.sechead h2 { font-size: clamp(23px, 2.8vw, 31px); }
.sechead .note { margin-left: auto; font-size: 14px; color: var(--ink-3); }
.lead { margin: 0 0 24px; max-width: 70ch; font-size: 16.5px; color: var(--ink-2); }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-2);
}
.panel-pad { padding: clamp(20px, 2.6vw, 30px); }

/* --------------------------------------------------------------- chips -- */
/* Sentence case, not shouted abbreviations. */

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line-2); color: var(--ink-2); background: var(--raised);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.chip.bare::before { display: none; }
.chip.ok      { color: var(--green);  border-color: color-mix(in srgb, var(--green) 38%, transparent);  background: color-mix(in srgb, var(--green) 11%, transparent); }
.chip.warn    { color: var(--amber);  border-color: color-mix(in srgb, var(--amber) 40%, transparent);  background: color-mix(in srgb, var(--amber) 12%, transparent); }
.chip.bad     { color: var(--red);    border-color: color-mix(in srgb, var(--red) 40%, transparent);    background: color-mix(in srgb, var(--red) 11%, transparent); }
.chip.unknown { color: var(--ink-3);  border-color: var(--line-2); background: transparent; }
.chip.info    { color: var(--cyan);   border-color: var(--cyan-dim); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.chip.student { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 36%, transparent); background: color-mix(in srgb, var(--violet) 10%, transparent); }

/* -------------------------------------------------------------- tables -- */

.tw {
  overflow-x: auto; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--panel); box-shadow: var(--sh-2);
}
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th {
  position: sticky; top: 0;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  background: var(--panel-2); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--panel-2); }

/* -------------------------------------------------------------- forms --- */

input[type="text"], input[type="search"], input[type="number"],
input[type="password"], input[type="email"], input[type="url"],
select, textarea {
  width: 100%; padding: 11px 15px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-s);
  font: inherit; font-size: 16px;
  box-shadow: var(--sh-1);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
::placeholder { color: var(--ink-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line-2); box-shadow: var(--sh-1);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--cyan); color: var(--cyan); text-decoration: none; }
.btn.primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.btn.primary:hover { background: color-mix(in srgb, var(--cyan) 88%, #000); color: #fff; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* -------------------------------------------------------------- footer -- */

footer {
  margin-top: 84px; padding: 30px 0 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px; color: var(--ink-3);
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
footer .sp { margin-left: auto; }

/* ------------------------------------------------------------- utility -- */

.muted { color: var(--ink-3); }
.blank {
  display: inline-block; min-width: 150px;
  border-bottom: 1px dashed var(--ink-3); height: 1.05em; vertical-align: -.2em;
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   CONFERENCE IDENTITY                                  added 24 Sept 2026

   What was missing was not decoration. It was the three things that make a
   page read as an international conference rather than as an internal
   document:

     1. A TYPEFACE OF ITS OWN. The pages were set in whatever sans the
        reader's machine had - on Windows, Segoe UI, the face of every
        settings panel. Instrument Sans and Source Sans 3 now carry them,
        self-hosted under the SIL Open Font Licence; see @font-face below.
        Nothing breaks if a file is absent - the stack falls back.
     2. A MASTHEAD, not a headline. The full name, the edition, the dates,
        the clock and the IEEE co-sponsorship, set as letterhead, with the
        IEEE marks shown exactly as supplied and never recoloured.
     3. THE SCALE AND THE SPREAD SAID OUT LOUD. One connected band of
        figures, and the countries named rather than counted.
     4. NAVIGATION FOR A BIG PROGRAMME. Day tabs, and colour by track
        against a validated palette.

   The warm paper, the soft edges and the reserved monospace are untouched,
   and so is the distance from the ICACT pages: no serif anywhere.
   ========================================================================== */

/* Self-hosted, so "no CDN, copy the files and it works" still holds - the
   pages need no network at all. Both faces are SIL Open Font Licence and
   the licences travel with them in assets/fonts/.

     ICCCMLA Display = Instrument Sans   (variable, weight 400-700)
     ICCCMLA Text    = Source Sans 3     (variable, weight 200-900)

   THE SUBSETS ARE NOT OPTIONAL. The programme carries Turkish names
   (Tekirdag, Celikbas) and other Latin Extended-A letters, and one
   author's name is spelt with Cyrillic characters, so the body face needs
   the Cyrillic subset or that name falls back mid-word. unicode-range is
   what keeps this cheap: a reader downloads only the subsets the page
   actually uses - about 59 KB of the two latin files for most visitors.
   The ranges are Google Fonts' own, kept exactly as issued.

   If a file goes missing the stack falls through to the system's best
   display face - on Windows 11, Segoe UI Variable Display - so nothing
   breaks, it only stops looking like itself. */
@font-face {
  font-family: "ICCCMLA Display";
  src: url("fonts/InstrumentSans-latin.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ICCCMLA Display";
  src: url("fonts/InstrumentSans-latin-ext.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "ICCCMLA Text";
  src: url("fonts/SourceSans3-latin.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "ICCCMLA Text";
  src: url("fonts/SourceSans3-latin-ext.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "ICCCMLA Text";
  src: url("fonts/SourceSans3-cyrillic.woff2") format("woff2-variations");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --display: "ICCCMLA Display", "Segoe UI Variable Display", "Seravek",
             "Avenir Next", Optima, var(--sans);
  --text:    "ICCCMLA Text", "Segoe UI Variable Text", var(--sans);
  /* The conference's own two colours: a deep pine and a struck brass. */
  --deep: #0c4f46;
  --gold: #9a6b24;
}
:root[data-theme="dark"] { --deep: #7fd3c3; --gold: #d9a45f; }

body { font-family: var(--text); }
h1, h2, h3, h4, .bar .brand, .fact .v { font-family: var(--display); }

/* ------------------------------------------------------------ the mark -- */
/* A ring with one arrowhead: a feedback loop, which is the one drawing
   that says "cybernetics" without a caption. It is drawn in SVG by the
   page script, so it inherits the ink colour, survives dark mode and
   prints. The old dot is retired. */
.bar .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; }
.bar .brand::before { display: none; }
.bar .brand svg { flex: none; color: var(--deep); }
.bar nav a { font-family: var(--text); }

/* ----------------------------------------------------------- masthead --- */
.hero::before {
  content: ""; display: block; width: 84px; height: 3px; margin-bottom: 26px;
  background: var(--deep); border-radius: 2px;
}

/* The one element on the page that shouts, and it shouts quietly. ALL-CAPS
   on every little box is what made the first draft feel machine-made; this
   is the single exception, and it earns it by being the conference's own
   formal name. */
.hero .eyebrow {
  display: block; margin: 0 0 14px; padding: 0;
  background: none; border: 0; box-shadow: none;
  font-family: var(--display);
  font-size: clamp(11.5px, 1.1vw, 13px); font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3);
}
.hero .eyebrow .dot { display: none; }

.hero h1 {
  font-size: clamp(33px, 5.3vw, 61px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.06; max-width: 19ch;
  text-wrap: balance;
}
.hero h1 b { color: var(--deep); font-weight: 700; }

.hero .lede {
  margin: 22px 0 0; max-width: 64ch;
  font-size: clamp(16px, 1.55vw, 18.5px); line-height: 1.55; color: var(--ink-2);
}
.hero .lede .sep { color: var(--line-2); padding: 0 .5em; }
.hero .lede .clock { font-family: var(--mono); font-size: .93em; }

/* The co-sponsorship is the strongest credibility signal the conference
   has. It gets a plate of its own instead of a clause in mid-paragraph. */
.cosponsor {
  display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 26px; padding: 12px 20px 12px 14px;
  background: var(--panel); border: 1px solid var(--line-2);
  border-left: 3px solid var(--gold);
  border-radius: 4px 14px 14px 4px; box-shadow: var(--sh-1);
  font-size: 14.5px; color: var(--ink-2);
}
.cosponsor b { color: var(--ink); font-weight: 650; }
.cosponsor .seal { flex: none; color: var(--gold); display: inline-flex; }
.cosponsor .words { display: block; max-width: 44ch; }
.cosponsor .rec { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.cosponsor .rec a { color: inherit; text-decoration: underline; }
.cosponsor .rec a:hover { color: var(--ink-2); }

/* THE IEEE MARKS ARE SHOWN AS SUPPLIED - never redrawn, never recoloured,
   never filtered. IEEE blue makes 6.5:1 on white and only 2.4:1 on the
   dark panel, so the dark skin gets a white plate behind the marks rather
   than a lightened logo: the background is ours to change, the mark is
   not. The plate is there in both skins so the two look the same. */
.cosponsor .marks {
  flex: none; display: inline-flex; align-items: center; gap: 18px;
  padding: 9px 14px; border-radius: 9px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 11, .08);
}
.cosponsor .ieee { display: block; width: auto; height: 34px; }
/* The Germany Section mark is the wider of the two and needs less height
   to read at the same weight as the master brand beside it. */
.cosponsor .ieee[alt*="Germany"] { height: 30px; }

@media (max-width: 620px) {
  .cosponsor { flex-direction: column; align-items: flex-start; }
  .cosponsor .ieee { height: 28px; }
}

/* ---------------------------------------------------------- the figures -- */
/* One connected band, not a row of loose widgets: it reads as the
   conference's dimensions. Labels stay in sentence case. */
#hero-facts {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 34px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 15px; box-shadow: var(--sh-2); overflow: hidden;
}
#hero-facts .fact {
  flex: 1 1 128px; gap: 3px; min-width: 0;
  padding: 17px clamp(14px, 1.8vw, 24px);
  background: transparent; border: 0; border-left: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
#hero-facts .fact:first-child { border-left: 0; }
#hero-facts .fact .v {
  font-size: clamp(22px, 2.6vw, 32px); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
#hero-facts .fact .k { font-size: 13.5px; color: var(--ink-3); }

/* -------------------------------------------------------- the countries -- */
/* Two-letter codes, not flag emoji: Windows draws no flags at all, and a
   large part of this audience is on Windows. A code chip is honest
   everywhere and reads like a delegate badge. */
.countries { margin-top: 26px; }
.countries .cap { margin: 0 0 11px; font-size: 14.5px; color: var(--ink-3); }
.countries ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ctry {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 6px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--sh-1);
  font-size: 14px; color: var(--ink-2);
}
.ctry .cc {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--deep); background: color-mix(in srgb, var(--deep) 12%, transparent);
  border-radius: 7px; padding: 4px 7px;
}
.ctry .n { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }

/* --------------------------------------------- local times per session -- */
/* Only the clocks this session's own presenters are actually in, plus the
   reader's own. The whole conversion table on every card would be fourteen
   rows of noise; this is the line a presenter and a chair actually need,
   next to the session's own time. */
.zones {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 12px 0 0; padding: 11px 13px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 12px;
}
.zones .cap { font-size: 13px; color: var(--ink-3); margin-right: 3px; }
.zones .z {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2);
}
.zones .z b {
  font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.zones .z .d { font-size: 11.5px; color: var(--amber); }
.zones .z.you {
  border-color: color-mix(in srgb, var(--deep) 45%, var(--line));
  background: color-mix(in srgb, var(--deep) 9%, var(--panel));
}
.zones .z.you b { color: var(--deep); }

/* ------------------------------------------------------ colour by track -- */
/* THREE TRACKS CARRY A COLOUR AND THE REST SHARE A NEUTRAL, and that is a
   measured limit rather than a preference. These are slots 1-3 of the
   validated categorical palette; every 6- and 5-colour subset of it was run
   through the colourblind-separation validator against these surfaces and
   every one failed. Slot 3 (aqua) sits at 2.8:1 on white, which is the
   relief case: it is legal because the track is ALWAYS written out in words
   beside the colour - on the session card, and in the legend above the
   grid. Never let a chip lose its label.
     worst pair, all comparisons: CVD Delta E 9.2 light / 9.4 dark (floor 8)
                                  normal-vision 24.0 / 20.9 (floor 15)
   Which track holds which slot is fixed by name in Build-ProgrammeData.ps1
   ($TRACK_SLOT), never by how many papers a track happens to have. */
:root {
  --trk-0: #6b6257;   /* neutral: every other track */
  --trk-1: #2a78d6;   /* AI and Deep Learning */
  --trk-2: #eb6834;   /* Machine Learning and Neural Networks */
  --trk-3: #1baf7a;   /* Smart Environments and Applications */
}
:root[data-theme="dark"] {
  --trk-0: #9a8f80;
  --trk-1: #3987e5;
  --trk-2: #d95926;
  --trk-3: #199e70;
}
[data-trk="0"] { --trk: var(--trk-0); }
[data-trk="1"] { --trk: var(--trk-1); }
[data-trk="2"] { --trk: var(--trk-2); }
[data-trk="3"] { --trk: var(--trk-3); }

/* The named chip on a session card. */
.trk {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px 3px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--trk) 38%, var(--line));
  background: color-mix(in srgb, var(--trk) 9%, transparent);
  font-size: 12.5px; color: var(--ink-2); max-width: 34ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trk::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--trk);
}

/* The edge on a session card and on a cell of the at-a-glance grid. */
.ses[data-trk] { border-left: 3px solid var(--trk); }
.gcell[data-trk] { border-left: 3px solid var(--trk); }
.gcell[data-trk="0"] { border-left-color: color-mix(in srgb, var(--trk-0) 55%, transparent); }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.legend .cap { font-size: 13px; color: var(--ink-3); margin-right: 2px; }
.legend .lg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: 13px; color: var(--ink-2);
}
.legend .lg i { width: 9px; height: 9px; border-radius: 50%; background: var(--trk); flex: none; }
.legend .lg .n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* ------------------------------------------------------------ day tabs -- */
.viewbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  margin: 0 0 18px;
}
.viewbar .legend { margin-left: auto; }

.daytabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; }
.daytabs {
  background: var(--raised); border: 1px solid var(--line); border-radius: 999px;
}
.daytabs .dt {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 15px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: 14.5px; cursor: pointer;
}
.daytabs .dt .dim { color: var(--ink-3); font-size: 13px; }
.daytabs .dt:hover { color: var(--ink); }
.daytabs .dt.on {
  background: var(--panel); color: var(--ink); font-weight: 650;
  box-shadow: var(--sh-1);
}
.daytabs .dt.on .dim { color: var(--ink-2); }

/* The pair above the listing follows you down it. */
.daytabs.sticky {
  position: sticky; top: 62px; z-index: 20; margin-bottom: 16px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
}

/* Hiding, not re-rendering: a card on the hidden day keeps everything it
   had, and a link to it still resolves - the script switches back to both
   days rather than leaving the reader at a blank anchor. */
[data-show="1"] > [data-day="2"],
[data-show="2"] > [data-day="1"] { display: none; }

@media print {
  .daytabs { display: none !important; }
  [data-show] > [data-day] { display: revert !important; }
  .ses[data-trk], .gcell[data-trk] { border-left-width: 2px; }
}

/* ------------------------------------------------------- section heads -- */
.sechead { position: relative; }
.sechead h2 { letter-spacing: -.022em; }
section > .sechead::before {
  content: ""; position: absolute; left: 0; top: -17px;
  width: 34px; height: 2px; background: var(--deep); border-radius: 2px; opacity: .85;
}

@media print {
  .hero::before { background: #000; }
  .cosponsor { border-color: #000; }
  #hero-facts { box-shadow: none; }
  section > .sechead::before { background: #000; }
  .zones { border-color: #999; background: none; }
}