/* ─── Tokens ──────────────────────────────────────────────────────────────
   From the printed program: a dark page, the cover's red, pale type – kept
   a step off pure black and white so it's easy on the eyes at 1 AM.
   Every text colour meets WCAG AAA (7:1) on the surfaces it's used on;
   session cells use the spreadsheet's topic colours, nudged where needed
   to reach 7:1 with the cell text (see lib/color.js). Red marks "yours"
   (plan) and "now". Follows the device's light/dark setting. */

:root {
  color-scheme: dark;
  --bg: #1b1b1e;
  --panel: #242428;
  --panel-2: #2e2e33;
  --line: #4a4a50;
  --line-soft: #313136;
  --text: #e8e6e3;
  --muted: #b4b2ae;
  --ink: #1b1b1e;          /* text on coloured cells */
  --red: #e8203d;          /* lines, outlines, icons */
  --red-text: #ff8f8f;     /* red words on the page */
  --red-fill: #a50f25;     /* red behind white words */
  --focus: #7ab8ff;
  --ok: #7fd4a8;
  --warn: #f5c04a;
  --map-filter: invert(0.88) hue-rotate(180deg) contrast(0.88);
  --shadow: 0 16px 48px rgb(0 0 0 / 0.45);

  --body: Lato, 'Helvetica Neue', Arial, sans-serif;

  --r: 4px;
  --top-h: 56px;
  --head-h: 72px;
  --gutter: clamp(16px, 2.5vw, 28px);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f4f4f2;
    --panel: #e9e9e6;
    --panel-2: #deded9;
    --line: #b9b9b4;
    --line-soft: #d9d9d4;
    --text: #222225;
    --muted: #4a4a4d;
    --red: #d01c36;
    --red-text: #96001a;
    --focus: #0b5bc4;
    --ok: #155c3c;
    --warn: #f0b73e;
    --map-filter: none;
    --shadow: 0 16px 48px rgb(0 0 0 / 0.14);
  }
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }
/* A topic's cell colour: --c on a light page, --cd on a dark one. */
[style*='--c'] { --cell: var(--cd, var(--c)); }
@media (prefers-color-scheme: light) { [style*='--c'] { --cell: var(--c); } }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--body);
  min-height: 100dvh;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
kbd { font: inherit; font-size: 0.85em; padding: 0 0.35em; border: 1px solid var(--line); border-radius: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--red-fill); color: #fff; padding: 8px 12px; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }
main:focus { outline: none; }

@media (min-width: 900px) { .only-narrow { display: none !important; } }
@media (max-width: 899.98px) { .only-wide { display: none !important; } }

/* ─── Header + tabs ──────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 30;
  height: var(--top-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
/* No event logo: this site isn't the organisers'. */
.brand { display: flex; align-items: center; gap: 14px; line-height: 1; flex: none; }
.unofficial { padding: 5px 9px; border-radius: var(--r); background: var(--red-fill); color: #fff; font-size: 13px; font-weight: 900; letter-spacing: 0.02em; }
.official { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; text-underline-offset: 3px; }
.official svg { width: 15px; height: 15px; }
.official:hover { color: var(--red-text); }

.tabs { display: flex; gap: 2px; align-self: stretch; }
.tab {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  text-decoration: none; color: var(--muted); font-weight: 700; font-size: 15px;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab[aria-current] { color: var(--text); border-bottom-color: var(--text); }
.tab[data-tab='plan'] svg { color: var(--red); }
.tab[data-tab='plan'][aria-current] svg { fill: var(--red); }
.tab-count { min-width: 20px; padding: 0 6px; border-radius: 3px; background: var(--red-fill); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
/* Back to the links page at the site root. */
.home-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; }
.home-link svg { width: 16px; height: 16px; }
.home-link:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 899.98px) {
  .top { gap: 12px; }
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    justify-content: space-around; align-self: auto;
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 1px solid var(--line);
  }
  .tab { flex-direction: column; gap: 2px; font-size: 12px; padding: 6px 14px; position: relative; border-bottom: 0; border-top: 3px solid transparent; margin: 0; }
  .tab[aria-current] { border-top-color: var(--text); }
  .tab svg { width: 22px; height: 22px; }
  .tab-count { position: absolute; top: 2px; right: 4px; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ─── Buttons & controls ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 7px 14px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: var(--text); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line); }
.btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-primary:hover { background: color-mix(in oklab, var(--text) 82%, var(--bg)); }
.btn-quiet { background: transparent; border-color: transparent; }
.btn-quiet:hover { border-color: var(--line); }
.btn-danger { color: var(--red-text); }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border: 0; border-radius: var(--r); background: transparent; color: var(--muted);
}
.icon-btn:hover { background: var(--panel-2); color: var(--text); }
.link { border: 0; background: none; padding: 0; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--red-text); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; flex: none; }
.seg button { border: 0; background: none; padding: 7px 13px; color: var(--muted); font-weight: 700; font-size: 14px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed='true'] { background: var(--text); color: var(--bg); }

/* "Add to my plan". Icon-only on cells; labelled in lists and the detail. */
.star {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r); background: none; color: var(--muted);
}
.star svg { width: 20px; height: 20px; }
.star:hover { color: var(--text); }
.star[aria-pressed='true'] { color: var(--red); }
.star[aria-pressed='true'] svg { fill: currentColor; }
.star-label {
  width: auto; height: 36px; padding: 0 12px 0 9px; gap: 7px; display: inline-flex; align-items: center;
  border: 1.5px solid currentColor; color: var(--text); font-weight: 700; font-size: 14px; white-space: nowrap;
}
.star-label svg { width: 17px; height: 17px; }
.star-label[aria-pressed='true'] { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
.star-label[aria-pressed='true']:hover { background: color-mix(in oklab, var(--red-fill) 85%, black); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  max-width: 100%; min-width: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: var(--r);
  border: 1px solid var(--line); background: transparent; font-size: 14px; line-height: 1.2; text-align: left;
}
.chip .sw { width: 12px; height: 12px; border-radius: 2px; background: var(--cell); }
.chip .n { color: var(--muted); font-size: 12px; }
.chip-label { min-width: 0; overflow-wrap: break-word; }
.chip .n:empty { display: none; }
.chip:hover { border-color: var(--text); }
.chip[aria-pressed='true'] { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip[aria-pressed='true'] .n { color: inherit; }
/* Filter chips are always filled (topic colour, or neutral for Classes);
   selected ones get a check mark and a ring, so the colour stays visible. */
.chip-topic, .chip-topic[aria-pressed='true'] { background: var(--cell); border-color: var(--cell); color: var(--ink); }
.chip-classes, .chip-classes[aria-pressed='true'] { background: var(--panel-2); border-color: var(--line); color: var(--text); }
.chip-topic:hover, .chip-classes:hover { border-color: var(--text); }
/* Selecting a chip never changes its size: a ring, and a check badge on the corner. */
.chip-topic, .chip-classes { position: relative; }
.chip .chk { display: none; position: absolute; top: -7px; right: -7px; width: 17px; height: 17px; padding: 2.5px; border-radius: 50%; background: var(--text); color: var(--bg); stroke-width: 3.5; }
.chip[aria-pressed='true'] .chk { display: block; }
.chip-topic[aria-pressed='true'], .chip-classes[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }

.tag { font-style: normal; font-size: 11px; font-weight: 900; padding: 1px 5px; border-radius: 2px; background: var(--text); color: var(--bg); vertical-align: 1px; }
.tag-quiet { background: var(--panel-2); color: var(--muted); }
.ion { font-size: 11px; font-weight: 900; padding: 0 5px; border-radius: 2px; border: 1px solid currentColor; vertical-align: 1px; }
.pill { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 2px; border: 1px solid var(--line); color: var(--muted); vertical-align: 1px; }
.badge { min-width: 18px; padding: 0 5px; border-radius: 2px; background: var(--text); color: var(--bg); font-size: 12px; line-height: 18px; text-align: center; }

/* ─── Schedule: day bar, filter bar ──────────────────────────────────────── */

/* Days, search and filter chips stay pinned under the top bar together. */
.sched-sticky { position: sticky; top: var(--top-h); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
/* Phones: the Filters panel lives in here, so lift the block over the top bar and tabs while it's open. */
.filters-open .sched-sticky { z-index: 61; }
.sched-head {
  height: var(--head-h);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 0 var(--gutter);
  background: var(--bg);
}
.days { display: flex; gap: 2px; align-self: stretch; align-items: flex-end; }
.day {
  display: flex; align-items: baseline; gap: 7px; text-decoration: none;
  padding: 10px 14px 8px 0; margin-right: 14px; color: var(--muted);
  border-bottom: 4px solid transparent;
}
.day-name { font-weight: 900; font-size: clamp(24px, 3vw, 32px); line-height: 1; letter-spacing: -0.01em; }
.day-date { font-size: 14px; font-weight: 700; }
.day:hover { color: var(--muted); }
.day[aria-current='true'] { color: var(--text); border-bottom-color: var(--red); }
.day-abbr { display: none; }
.sched-head { min-width: 0; }
.days { min-width: 0; }
.sched-tools { display: flex; gap: 10px; align-items: center; padding-bottom: 10px; min-width: 0; }
.sched-tools .search-head { width: clamp(200px, 24vw, 340px); }
.head-clear { color: var(--text); }
@media (min-width: 900px) and (max-width: 1180px) {
  .day-full { display: none; }
  .day-abbr { display: inline; }
}

.filters { padding: 10px var(--gutter) 12px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 10px; }
.fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
/* Topic chips: each as wide as its label, wrapping onto a new line as needed. */
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend { row-gap: 9px; column-gap: 7px; }
.legend .chip { padding: 4px 11px; border-radius: 10px; font-size: 13.5px; gap: 4px; }
.legend .chip-classes { margin-right: 10px; }
.legend h3 { font-size: 13px; font-weight: 700; color: var(--muted); }
.search {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 38px; width: min(320px, 100%);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--muted);
}
.search:focus-within { border-color: var(--text); }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear { display: grid; place-items: center; width: 28px; height: 28px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); }
.search-clear:hover { background: var(--panel-2); }
.search-clear svg { width: 16px; height: 16px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--red); }
.hint { color: var(--muted); font-size: 13px; font-weight: 400; }
.fine { color: var(--muted); font-size: 13px; line-height: 1.6; }


/* Phones: the filter bar becomes a full-screen sheet. */
@media (max-width: 899.98px) {
  :root { --head-h: 60px; }
  .day { padding: 8px 8px 6px 0; margin-right: 8px; }
  .day-name { font-size: 24px; }
  .sched-tools { padding-bottom: 8px; }
  .filters {
    position: fixed; inset: 0; z-index: 60; overflow-y: auto; gap: 22px; border: 0;
    padding: 16px var(--gutter) 0;
    background: var(--bg); transform: translateY(100%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0s 0.25s;
  }
  .filters-open .filters { transform: none; visibility: visible; transition: transform 0.25s ease; }
  .fbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 16px; }
  .fbar .legend { flex-basis: auto; }
  .fbar .seg { display: flex; }
  .fbar .seg button { flex: 1; padding: 9px; }
  .search { width: 100%; height: 44px; }
  .fbar .link { align-self: flex-start; }
  .legend h3 { flex-basis: 100%; }
  .legend .chip { padding: 7px 13px; font-size: 15px; }
  .chip { padding: 7px 11px; font-size: 15px; }
}
@media (max-width: 600px) {
  .day-full, .day-date { display: none; }
  .day-abbr { display: inline; }
  .day { margin-right: 4px; white-space: nowrap; }
}
@media (max-width: 420px) {
  .sched-tools .btn .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sched-tools .btn { padding: 7px 10px; }
  .sched-tools .seg button { padding: 7px 9px; }
}
.filters-top { display: flex; align-items: center; justify-content: space-between; }
.filters-top h2 { font-weight: 900; font-size: 28px; }
.filters-done { position: sticky; bottom: 0; margin: auto calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 30%); }
.filters-done .btn { width: 100%; min-height: 48px; }

#results { padding: 0 var(--gutter) 40px; }
#results:has(> .grid-scroll) { padding-bottom: 16px; }
/* Match count: always laid out, only shown while filtering, so turning a filter on doesn't push the page down. */
.match-note { color: var(--muted); font-size: 14px; white-space: nowrap; }
.match-note.is-off { visibility: hidden; }
.empty { padding: 48px 0; color: var(--muted); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* Banners */
.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  margin: 0 0 14px; padding: 12px 16px;
  border: 1px solid var(--warn); border-left-width: 6px; border-radius: var(--r);
}
.banner p { max-width: 70ch; }
.banner-actions { display: flex; gap: 6px; }

/* Now / next */
.now { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 4px 0 16px; }
.now-group { min-width: 0; max-width: 100%; }
.now-group h2 { font-size: 14px; font-weight: 900; margin-bottom: 6px; display: flex; gap: 8px; align-items: baseline; }
.now-group:first-child h2 { color: var(--red-text); }
.now-group h2 span { color: var(--muted); font-weight: 700; }
.now-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.mini {
  position: relative; flex: none; width: 230px; display: flex;
  background: var(--cell); color: var(--ink); border-radius: var(--r);
}
.mini-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 9px 4px 10px 11px; border: 0; background: none; color: inherit; }
.mini-title { font-weight: 900; line-height: 1.2; }
.mini-meta { font-size: 13px; }
.mini.is-starred { box-shadow: inset 0 0 0 3px var(--red); }

/* Cells: the star sits in the corner of every session. */
.mini .star, .ev .star { color: var(--ink); }
.mini .star:hover, .ev .star:hover { color: var(--ink); background: rgb(0 0 0 / 0.1); }
.mini .star[aria-pressed='true'], .ev .star[aria-pressed='true'] { background: var(--red-fill); color: #fff; border-radius: 0 var(--r) 0 var(--r); }

/* Open spaces */
/* Open spaces: one compact row per space, above the filters. */
#open-box { padding: 0 var(--gutter); }
.open-strip { border-bottom: 1px solid var(--line-soft); }
.open-strip summary { padding: 9px 0; font-weight: 700; cursor: pointer; font-size: 15px; }
.open-strip summary .sum-now { font-weight: 400; color: var(--ok); margin-left: 6px; }
.open-strip ul { list-style: none; margin: 0; padding: 0 0 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 760px) { .open-strip ul { grid-template-columns: minmax(0, 1fr); } }
.open-strip button { width: 100%; text-align: left; border: 0; background: none; padding: 4px 0; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.4; }
.open-strip button:hover .o-name { text-decoration: underline; text-underline-offset: 3px; }
.o-name { font-weight: 700; }
.o-hours { color: var(--muted); }
.o-hours .is-now { color: var(--ok); }
.o-note { display: block; font-size: 13px; }

@media (max-width: 480px) { .open-strip button { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--ok); }

/* ─── Grid ───────────────────────────────────────────────────────────────── */

.grid-scroll {
  overflow: auto;
  /* Exactly fills the window below the day bar once the page is scrolled
     to the end, so neither the room names nor the last hour get hidden. */
  height: calc(100dvh - var(--top-h) - var(--sticky-h, var(--head-h)) - 16px); min-height: 420px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg);
}
@media (max-width: 899.98px) {
  .grid-scroll { height: calc(100dvh - var(--top-h) - var(--sticky-h, var(--head-h)) - 16px - 64px - env(safe-area-inset-bottom)); }
}
.grid {
  display: grid; position: relative;
  grid-template-columns: 62px repeat(var(--cols), minmax(140px, 1fr));
  grid-template-rows: auto auto;
  min-width: min-content;
}
.g-corner, .g-room {
  position: sticky; top: 0; z-index: 6; grid-row: 1;
  background: var(--bg); border-bottom: 2px solid var(--text);
}
.g-corner { left: 0; z-index: 8; grid-column: 1; }
.g-room {
  display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 8px 7px;
  font-weight: 900; font-size: 15px; line-height: 1.1;
  text-decoration: none; border-left: 1px solid var(--line-soft);
}
a.g-room:hover { color: var(--red-text); }
.g-room small { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.g-times {
  position: sticky; left: 0; z-index: 5; grid-column: 1; grid-row: 2;
  background: var(--bg); border-right: 1px solid var(--line);
}
.g-tick { position: absolute; right: 7px; transform: translateY(-50%); font-weight: 700; font-size: 13px; color: var(--muted); white-space: nowrap; }
.g-tick.is-first { transform: none; margin-top: 3px; }
.g-layer { grid-column: 2 / -1; grid-row: 2; position: relative; }
.g-hours {
  position: absolute; left: 0; right: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(color-mix(in oklab, var(--line-soft) 50%, transparent) 1px, transparent 1px);
  background-size: 100% var(--hour), 100% var(--half);
}
.g-layer-top { pointer-events: none; z-index: 4; }
/* Day dividers in the All view. */
.g-day { position: absolute; left: 0; right: 0; z-index: 3; background: var(--bg); border-top: 2px solid var(--text); }
.g-day span { position: sticky; left: 72px; display: inline-block; padding: 9px 10px; font-weight: 900; font-size: 20px; line-height: 1.2; }
.g-col { grid-row: 2; position: relative; border-left: 1px solid var(--line-soft); }
/* The shared "Other spaces" columns sit under one header. */
.g-room-other { justify-content: flex-end; }
.g-col-other { border-left-style: dashed; }

/* Lunch and dinner run the full width, as on the sheet. */
.g-break {
  position: absolute; left: 0; right: 0;
  background: var(--panel);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.g-break-label { position: absolute; left: 0; display: block; padding: 7px 9px; white-space: nowrap; font-size: 14px; font-weight: 900; color: var(--muted); }
.g-open {
  position: absolute; display: flex; flex-direction: column; justify-content: flex-start; padding: 0; text-align: left;
  border: 2px solid var(--text); border-radius: var(--r);
  background: var(--panel-2) repeating-linear-gradient(-45deg, transparent 0 10px, var(--line-soft) 10px 12px);
  color: var(--text);
}
.g-open:hover { border-color: var(--red); }
.g-open span { position: sticky; top: 60px; /* below the pinned room names */ display: block; padding: 8px 10px; font-size: 14px; line-height: 1.3; }
.g-open b { display: block; font-size: 16px; font-weight: 900; }

.ev { position: absolute; padding: 2px 5px 2px 2px; }
.ev-open {
  display: flex; flex-direction: column; gap: 1px; overflow: hidden;
  width: 100%; height: 100%; padding: 5px 16px 5px 8px; text-align: left;
  border: 0; border-radius: var(--r);
  background: var(--cell); color: var(--ink);
}
.ev-open:hover { filter: brightness(1.06); }
.ev .star { position: absolute; top: 1px; right: 2px; width: 28px; height: 28px; border-radius: 0 var(--r) 0 var(--r); }
.ev .star svg { width: 17px; height: 17px; }
.ev-time { font-size: 12px; font-weight: 700; }
.ev-room { font-size: 12px; font-weight: 400; line-height: 1.2; }
.ev-title { font-weight: 900; font-size: 14px; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; flex: none; }
.ev-who { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ev.is-short .ev-title { -webkit-line-clamp: 1; }
.ev-who { font-size: 12.5px; line-height: 1.25; }
.ev.is-wide .ev-open { padding: 8px 18px 8px 12px; }
.ev.is-wide .ev-title { font-size: 17px; }
.ev.is-starred .ev-open { box-shadow: inset 0 0 0 3px var(--red); }
.ev.is-short .ev-open { padding-top: 3px; }
.ev.is-short .ev-who { display: none; }
/* Filtered out: an outline in the topic colour, muted text. Past: greyed
   colour. Neither uses transparency, which would lower text contrast. */
/* Filtered out: faded. (Applied to the cell's parts, not the cell, so the
   corner tag isn't trapped under the next column.) These aren't meant to be
   read, so they're exempt from the contrast targets. */
.ev.is-dim > .ev-open, .ev.is-dim > .star, .grp-item.is-dim { opacity: 0.32; }
.ev.is-past .ev-open, .ev.is-past .star, .slot.is-past .row { filter: saturate(0.15); }

/* A session's star: a round tag pinned on the cell's top-right corner, so
   the text keeps the full width. The click area reaches past the circle. */
.ev > .star {
  top: -3px; right: 0; z-index: 4; width: 19px; height: 19px; border-radius: 50%;
  background: var(--bg); color: var(--text); box-shadow: 0 0 0 1.25px var(--cell);
}
.ev > .star::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }
.ev > .star svg { width: 11px; height: 11px; }
.ev > .star:hover { background: var(--panel-2); color: var(--text); }
.ev > .star[aria-pressed='true'] { background: var(--red-fill); color: #fff; border-radius: 50%; box-shadow: 0 0 0 1.25px var(--red-fill); }
/* The grid's right edge would clip the overhang, so tuck it in there. */
.g-col-last .ev > .star { right: 7px; top: 5px; }

/* Several classes at once in a merged column: one block, a pill per room. */
.ev-group { display: flex; flex-direction: column; gap: 4px; padding: 4px 7px 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.grp-head { font-size: 12px; font-weight: 900; color: var(--text); padding: 1px 2px 0; }
.grp-head span { font-weight: 700; color: var(--muted); margin-left: 4px; }
.grp-list { list-style: none; margin: 0; padding: 0 3px; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
.grp-item { position: relative; flex: 1 1 0; min-height: 0; display: flex; border-radius: 7px; }
.ev .grp-item .ev-open { padding: 2px 32px 2px 10px; justify-content: center; border-radius: 7px; }
.grp-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; line-height: 1.15; }
.grp-room { font-size: 12px; font-weight: 400; margin-right: 3px; }
.grp-title { font-weight: 900; }
.ev .grp-item .star { top: 50%; right: 4px; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; }
.ev .grp-item .star[aria-pressed='true'] { border-radius: 50%; }
.grp-item.is-starred .ev-open { box-shadow: inset 0 0 0 3px var(--red); }
/* Friends' initials in a pill sit beside the star, not under the title. */
.grp-item .ev-friends { position: absolute; top: 50%; right: 32px; transform: translateY(-50%); margin: 0; padding: 0; pointer-events: none; }
.grp-item .ev-friends i { width: 18px; height: 18px; margin-left: -4px; }
.grp-item:has(.ev-friends) .ev-open { padding-right: calc(36px + var(--nf, 1) * 14px); }
.ev-friends, .row-friends, .t-friends, .d-friends { display: flex; align-items: center; gap: 3px; }
/* Friends' initials: pinned to the cell's bottom-right corner, clear of the text flow. */
.ev-friends { margin-top: auto; padding-top: 3px; }
.ev > .ev-open .ev-friends { position: absolute; right: 6px; bottom: 5px; margin: 0; padding: 0; }
.ev > .ev-open .ev-friends i + i { margin-left: -4px; }
.ev > .ev-open { position: relative; }
.ev-friends i, .row-friends i, .t-friends i, .d-friends i, .friend i {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-style: normal; font-size: 11px; font-weight: 900; background: var(--f); color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--ink);
}
.g-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); }
.g-now-tick {
  position: absolute; right: 3px; transform: translateY(-50%); z-index: 1;
  padding: 1px 5px; border-radius: 2px; background: var(--red-fill); color: #fff;
  font-weight: 900; font-size: 13px;
}

/* ─── List ───────────────────────────────────────────────────────────────── */

.slots { list-style: none; margin: 0; padding: 0; }
/* All days in the list: the day name stays pinned under the day bar. */
.list-day {
  position: sticky; top: calc(var(--top-h) + var(--sticky-h, var(--head-h))); z-index: 10;
  margin: 26px 0 0; padding: 6px 0 8px; background: var(--bg); border-bottom: 2px solid var(--text);
  font-weight: 900; font-size: 24px; line-height: 1.2;
}
.list-day:first-of-type { margin-top: 0; }
.list-day + .slots .slot:first-child { border-top: 0; }
.list-day + .slots .slot-time { top: calc(var(--top-h) + var(--sticky-h, var(--head-h)) + 56px); }
.slot { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.slot-time { position: sticky; top: calc(var(--top-h) + var(--sticky-h, var(--head-h)) + 8px); align-self: start; font-weight: 900; font-size: 22px; line-height: 1.1; padding-top: 6px; }
.slot.is-past .slot-time { color: var(--muted); }
.slot.is-current .slot-time { color: var(--red-text); }
.slot-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.row {
  display: flex; align-items: center; gap: 8px; padding-right: 10px;
  border-radius: var(--r); background: var(--cell); color: var(--ink);
}
.row .star-label { color: var(--ink); border-color: var(--ink); }
.row .star-label:hover { background: rgb(0 0 0 / 0.08); }
.row .star-label[aria-pressed='true'] { color: #fff; border-color: var(--red-fill); }
.row.is-starred { box-shadow: inset 0 0 0 3px var(--red); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 10px 6px 10px 14px; text-decoration: none; }
.row-main:hover .row-title { text-decoration: underline; text-underline-offset: 3px; }
.row-title { font-weight: 900; line-height: 1.25; }
.row-who { font-size: 14px; }
.row-where { font-size: 14px; }
.row-friends { font-size: 13px; margin-top: 3px; }
.row-break { color: var(--muted); font-size: 14px; font-weight: 700; padding: 8px 14px; background: var(--panel); border-radius: var(--r); }

@media (max-width: 599.98px) {
  .slot { grid-template-columns: minmax(0, 1fr); }
  .slot-time { position: static; padding: 0 0 8px; font-size: 20px; }
  .row .star-label { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .row .star-label span { display: none; }
}

/* ─── Detail panel ───────────────────────────────────────────────────────── */

.scrim { position: fixed; inset: 0; z-index: 49; background: rgb(0 0 0 / 0.55); }
.detail {
  position: fixed; z-index: 50; top: 0; right: 0; bottom: 0;
  width: min(500px, 100vw);
  background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: slide-in 0.2s ease-out;
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
@media (max-width: 599.98px) {
  .detail { top: 8vh; width: 100vw; border-left: 0; border-radius: 10px 10px 0 0; overflow: hidden; animation-name: rise; }
  @keyframes rise { from { transform: translateY(40px); opacity: 0; } }
}
.d-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.d-head { position: relative; padding: 20px 24px 20px; background: var(--cell); color: var(--ink); }
.d-close { position: absolute; top: 10px; right: 10px; color: var(--ink); }
.d-close:hover { background: rgb(0 0 0 / 0.1); color: var(--ink); }
.d-topic { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 8px; padding-right: 40px; }
.d-topic .sw { display: none; }
.d-head h2 { font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; padding-right: 30px; }
.d-head h2:focus { outline: none; }
.d-long { margin-top: 8px; font-size: 15px; line-height: 1.35; }
.d-when { margin-top: 14px; font-weight: 900; font-size: 17px; }
.d-when span { font-weight: 400; }
.d-where { margin-top: 2px; display: flex; gap: 12px; flex-wrap: wrap; }
.d-where a { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-underline-offset: 3px; }
.d-who { margin-top: 6px; }
.d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.d-actions .btn { background: transparent; color: var(--ink); border-color: var(--ink); }
.d-actions .btn:hover { background: rgb(255 255 255 / 0.3); }
/* Same shape as the buttons beside it; the star and (once added) the red fill set it apart. */
.d-actions .star-label { height: auto; min-height: 38px; padding: 7px 14px 7px 11px; border: 1px solid var(--ink); border-radius: var(--r); background: transparent; color: var(--ink); font-size: 15px; }
.d-actions .star-label:hover { background: rgb(255 255 255 / 0.3); }
.d-actions .star-label[aria-pressed='true'] { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
.d-body { padding: 22px 24px 48px; display: flex; flex-direction: column; gap: 18px; }
.d-alert { padding: 10px 12px; border-left: 4px solid var(--warn); background: var(--panel); }
.d-clash { padding: 10px 12px; border-left: 4px solid var(--red); background: var(--panel); }
.d-clash a { font-weight: 700; }
.d-friends { gap: 4px; color: var(--muted); }
.d-notes { margin: 0; padding-left: 18px; color: var(--muted); }
.d-desc { display: flex; flex-direction: column; gap: 12px; font-size: 17px; line-height: 1.6; max-width: 62ch; }
.d-desc a, .d-bio a { overflow-wrap: anywhere; }
.d-none { color: var(--muted); }
.d-section h3 { font-size: 14px; font-weight: 900; margin-bottom: 8px; }
.d-also { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.d-also a { font-weight: 700; text-underline-offset: 3px; }
.d-bio { border-top: 1px solid var(--line); padding-top: 14px; }
.d-bio summary { cursor: pointer; font-weight: 900; }
.d-bio p { margin-top: 10px; color: var(--muted); line-height: 1.6; }

/* ─── My plan ────────────────────────────────────────────────────────────── */

.plan { max-width: 860px; margin: 0 auto; padding: 28px var(--gutter) 60px; }
.plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.plan-head h1 { font-weight: 900; font-size: clamp(36px, 6vw, 52px); line-height: 1; letter-spacing: -0.015em; }
.plan-sub { color: var(--muted); margin-top: 6px; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.friends { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 8px; font-size: 15px; }
.friends-label { color: var(--muted); }
.friend { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r); }
.friend button { border: 0; background: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 5px; font-weight: 700; }
.friend .friend-x { color: var(--muted); padding: 4px 8px 4px 2px; }
.friend .friend-x svg { width: 14px; height: 14px; }
.friend.is-hidden { text-decoration: line-through; }
.friend.is-hidden i { background: var(--line); }

.plan-day { margin-top: 30px; }
.plan-day h2 { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--text); }
.plan-day h2 span { font-weight: 900; font-size: 30px; line-height: 1; }
.plan-day h2 small { color: var(--muted); font-size: 15px; font-weight: 400; }
.timeline { list-style: none; margin: 0; padding: 0; }
.t-item { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.t-time { display: flex; flex-direction: column; font-weight: 900; line-height: 1.15; padding-top: 2px; }
.t-time span { font-size: 18px; }
.t-time small { font-size: 14px; font-weight: 700; color: var(--muted); }
.t-card { border-left: 6px solid var(--cell); padding-left: 12px; min-width: 0; }
.t-title { font-weight: 900; font-size: 17px; line-height: 1.3; }
.t-title a { text-decoration: none; }
.t-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.t-edit { border: 0; background: none; padding: 0; font-weight: 900; text-align: left; text-decoration: underline dotted; text-underline-offset: 4px; }
.t-meta { color: var(--muted); font-size: 15px; }
.t-warn { color: var(--red-text); font-size: 14px; font-weight: 700; margin-top: 3px; }
.t-friends { font-size: 14px; color: var(--muted); margin-top: 4px; }
.t-friend .t-card { border-left-style: dashed; }
.t-friend .t-title { font-weight: 400; }
.t-open .t-card { border-left-style: dotted; }
.t-gap { padding: 6px 0 6px 88px; color: var(--muted); font-size: 14px; border-bottom: 1px solid var(--line-soft); }
/* Side-by-side comparison with friends (wide screens; phones keep the list). */
.plan.is-compare { max-width: 1240px; }
.cmp-wrap { overflow-x: auto; }
.cmp { display: grid; grid-template-columns: 76px repeat(var(--n), minmax(220px, 1fr)); min-width: min-content; }
.cmp-row { display: contents; }
.cmp-row > * { padding: 10px 8px; border-bottom: 1px solid var(--line-soft); }
.cmp-head > * { display: flex; align-items: center; gap: 7px; padding-top: 12px; padding-bottom: 8px; font-weight: 900; font-size: 15px; border-bottom: 1px solid var(--line); }
.cmp-head i, .cmp-card i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 900; background: var(--f); color: var(--ink); }
.cmp-time { font-weight: 900; font-size: 15px; padding-left: 0; }
.cmp-cell { display: flex; flex-direction: column; gap: 6px; }
.cmp-card { position: relative; padding: 7px 34px 8px 10px; border-radius: var(--r); border-left: 5px solid var(--cell); background: var(--panel); }
/* In more than one person's column: filled with the session's colour. */
.cmp-card.is-shared { background: var(--cell); color: var(--ink); }
.cmp-card.is-shared .cmp-meta { color: var(--ink); }
.cmp-card.is-shared .star { color: var(--ink); }
.cmp-title { font-weight: 900; line-height: 1.25; }
.cmp-title a { text-decoration: none; }
.cmp-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cmp-meta { font-size: 14px; color: var(--muted); }
.cmp-card .star { position: absolute; top: 3px; right: 2px; }
.cmp-card .t-warn { font-size: 13px; }
@media (min-width: 760px) { .only-list { display: none; } }
@media (max-width: 759.98px) { .cmp-wrap { display: none; } }

.empty-plan { align-items: flex-start; max-width: 52ch; }
.empty-title { font-weight: 900; font-size: 26px; color: var(--text); }

@media (max-width: 599.98px) {
  .t-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; }
  .t-time span { font-size: 16px; }
  .t-gap { padding-left: 66px; }
}

/* ─── Map ────────────────────────────────────────────────────────────────── */

.mapv { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; min-height: calc(100dvh - var(--top-h)); }
.map-stage { padding: 20px var(--gutter); }
.map-box { position: relative; width: 100%; max-width: 980px; margin: 0 auto; border-radius: var(--r); overflow: hidden; background: #fff; }
.map-box img { display: block; width: 100%; height: auto; filter: var(--map-filter); }
.map-box svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-box rect { fill: transparent; stroke: transparent; stroke-width: 4; cursor: pointer; }
.map-box a:hover rect { fill: color-mix(in oklab, var(--text) 14%, transparent); }
.map-box a.is-active rect { fill: color-mix(in oklab, var(--red) 30%, transparent); stroke: var(--red); stroke-width: 6; animation: pulse 1.6s ease-in-out 2; }
@keyframes pulse { 50% { stroke-width: 14; } }
.map-side { border-left: 1px solid var(--line-soft); padding: 24px var(--gutter) 40px; overflow-y: auto; }
.map-side h1 { font-weight: 900; font-size: 34px; line-height: 1; }
.map-floor { font-size: 14px; font-weight: 900; color: var(--muted); margin: 20px 0 6px; }
.map-list { list-style: none; margin: 0; padding: 0; }
.map-list a { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; }
.map-list a:hover b { color: var(--red-text); }
.map-list span { font-size: 14px; color: var(--muted); }
.map-room h1 { margin-top: 12px; }
.map-events { list-style: none; margin: 16px 0 0; padding: 0; }
.map-events h3 { font-weight: 900; font-size: 20px; margin: 14px 0 6px; }
.map-events ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.map-events ul a { display: block; padding: 6px 10px; background: var(--cell); color: var(--ink); border-radius: var(--r); text-decoration: none; font-weight: 700; }
.map-events ul a span { font-size: 13px; display: block; font-weight: 400; }
@media (max-width: 899.98px) {
  .mapv { grid-template-columns: minmax(0, 1fr); }
  .map-stage { padding: 12px; }
  .map-side { border-left: 0; }
}

/* ─── Dialogs & toast ────────────────────────────────────────────────────── */

dialog {
  width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 40px);
  padding: 0; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--text); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgb(0 0 0 / 0.65); }
.dlg { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.dlg h2 { font-weight: 900; font-size: 26px; line-height: 1.1; }
.dlg-sub { color: var(--muted); font-size: 15px; margin-top: -6px; }
.dlg label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; font-size: 14px; }
.dlg .opt { color: var(--muted); font-weight: 400; }
.dlg input, .dlg select, .dlg textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); font-weight: 400; font-size: 16px;
}
.dlg input:focus, .dlg select:focus, .dlg textarea:focus { outline: none; border-color: var(--text); }
.dlg .mono { font-family: ui-monospace, monospace; font-size: 13px; }
.dlg-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
@media (max-width: 520px) {
  .dlg-row { grid-template-columns: 1fr 1fr; }
  .dlg-day { grid-column: 1 / -1; }
}
.dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.spacer { flex: 1; }
.dlg-preview { max-height: 38vh; overflow-y: auto; padding: 4px 12px 12px; border-radius: var(--r); background: var(--panel); }
.dlg-preview h3 { font-weight: 900; font-size: 18px; margin: 10px 0 4px; }
.dlg-preview ul { list-style: none; margin: 0; padding: 0; }
.dlg-preview li { padding: 3px 0 3px 10px; border-left: 5px solid var(--cell); margin: 3px 0; font-size: 15px; }
.dlg-preview li span { color: var(--muted); display: inline-block; min-width: 64px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 10px 12px 10px 16px; border-radius: var(--r);
  background: var(--text); color: var(--bg); font-weight: 700; font-size: 15px;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast button { border: 0; background: none; color: var(--bg); text-decoration: underline; font-weight: 700; }
@media (max-width: 899.98px) { .toast { bottom: calc(80px + env(safe-area-inset-bottom)); } }

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

/* ─── Print (My plan) ────────────────────────────────────────────────────── */

@media print {
  :root { --bg: #fff; --panel: #fff; --panel-2: #f3f3f3; --text: #000; --muted: #444; --faint: #666; --line: #bbb; --line-soft: #ddd; --ink: #000; }
  [style*='--c'] { --cell: var(--c); }
  body { background: #fff; padding: 0; }
  .top, .tabs, .plan-actions, .friends, .star, .icon-btn, .toast, .detail, .scrim, .banner { display: none !important; }
  .plan { padding: 0; max-width: none; }
  .t-item { break-inside: avoid; }
  .plan-day { break-inside: avoid-page; }
}