:root { color-scheme: light dark; --fg: #1a1a1a; --muted: #666; --bg: #fafaf7; --card: #fff; --line: #e3e1da; --accent: #b3261e; --booking: #1e5cb3; --event: #1eb350; }
@media (prefers-color-scheme: dark) { :root { --fg: #eee; --muted: #aaa; --bg: #161616; --card: #202020; --line: #333; --accent: #ff8a80; --booking: #82b1ff; --event: #80ffaa; } }
* { box-sizing: border-box; }
/* 16:9 screens: full width, type scales with viewport width, days laid out as columns */
html { font-size: clamp(16px, 1.15vw, 44px); }
body { margin: 0; padding: 1rem 1.5rem; font: 1rem/1.35 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
h1 { margin: 0; font-size: 1.6rem; }
h1 a { color: inherit; text-decoration: none; }
.rooms, footer, article p { color: var(--muted); }
.rooms { margin: 0; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; margin-left: auto; }
nav [data-range], nav [data-view] { font: inherit; font-size: .9rem; color: var(--accent); background: none; border: 1px solid transparent; border-radius: 999px; padding: .25rem .7rem; cursor: pointer; }
nav [data-range]:hover, nav [data-view]:hover { border-color: var(--line); }
nav [data-range].on, nav [data-view].on { color: var(--fg); background: var(--card); border-color: var(--line); }
nav a, nav strong { display: inline-block; padding: .3rem .1rem; }
a { color: var(--accent); }
main { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; }
h2 { margin: 1rem 0 .5rem; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
/* cards: one colour each (--c) for the left stripe and, for the slot running now, an inset outline (takes no space) */
article { --c: var(--accent); margin: 0 0 .6rem; padding: .6rem .8rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 8px; }
article.booking { --c: var(--booking); }
article.event { --c: var(--event); }
article.past { opacity: .45; }
article.now { outline: 2px solid var(--c); outline-offset: -1px; }
article p { margin: .1rem 0; font-size: .9rem; overflow-wrap: anywhere; }
article .time { margin-right: .35rem; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
article .course { color: var(--fg); font-size: 1.05rem; }
/* single day (Today): spread its lessons across the width */
main > section:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1rem; align-items: start; }
main > section:only-child h2 { grid-column: 1 / -1; }
.empty { grid-column: 1 / -1; margin: 2rem 0; color: var(--muted); }
footer { margin-top: 2rem; font-size: .75rem; }
footer p { margin: .2rem 0; }
/* compact cards so a full day fits one screen height: room is already in the header, meta on one line */
article .room { display: none; }
article p:not(.time, .course, .room) { display: inline; }
article p:not(.time, .course, .room) + p:not(.room)::before { content: " · "; }
/* filter page */
#filters { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0 0 .6rem; }
#filters label { display: flex; flex-direction: column; font-size: .75rem; color: var(--muted); }
#filters input, #filters select { min-width: 12rem; max-width: 20rem; font: inherit; font-size: .9rem; padding: .25rem .4rem; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
#filters input[type=date] { min-width: 0; }
#filters-box { border-bottom: 1px solid var(--line); }
#filters-box summary::-webkit-details-marker { display: none; }
#filters-box summary::before { content: "\25b8"; color: var(--muted); }
#filters-box[open] summary::before { content: "\25be"; }
#filters-box summary { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; padding: .5rem 0; font-size: .85rem; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; }
#summary-text { margin-right: auto; }
#favs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-weight: 400; }
#fav-list { display: contents; }
#favs button { font: inherit; font-size: .85rem; color: var(--fg); background: none; border: 0; padding: .3rem .5rem; cursor: pointer; }
.fav { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.fav.on { border-color: var(--accent); }
.fav .fav-x { color: var(--muted); padding-left: 0; }
#fav-save { color: var(--accent) !important; }
#fav-save:disabled { color: var(--muted) !important; cursor: default; }
/* calendar views */
#views, #ranges, #period { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
#period-label { padding-left: .5rem; font-size: .9rem; font-weight: 600; }
#period button { font: inherit; font-size: .9rem; color: var(--accent); background: none; border: 1px solid transparent; border-radius: 999px; padding: .25rem .7rem; cursor: pointer; }
#period button:hover { border-color: var(--line); }
.cal { display: block; --hour: 3rem; }
/* phones: the week keeps readable columns and scrolls sideways */
@media (max-width: 700px) { .cal { overflow-x: auto; } .cal-head, .cal-body { min-width: calc(3.2rem + var(--days) * 7rem); } }
.cal-head, .cal-body { display: grid; grid-template-columns: 3.2rem repeat(var(--days), minmax(0, 1fr)); gap: 0 .25rem; }
.cal-day { padding: .3rem .4rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
.cal-day.on { color: var(--accent); }
.cal-body { height: clamp(18rem, calc(100vh - 13rem), calc(var(--rows) * var(--hour, 3rem))); }
.cal-gutter { display: grid; grid-auto-rows: 1fr; }
.cal-hour { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; transform: translateY(-.35em); }
.cal-col { position: relative; border-left: 1px solid var(--line); background: repeating-linear-gradient(var(--line) 0 1px, transparent 1px calc(var(--hour, 3rem))); }
.cal-col.on { background-color: color-mix(in srgb, var(--accent) 5%, transparent); }
/* "now": a red line at the current time, in lists and in the day/week grid */
.now-line { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .5rem; color: var(--accent); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.now-line::after { content: ""; flex: 1; border-top: 2px solid var(--accent); }
.cal-now { position: absolute; left: 0; right: 0; z-index: 2; border-top: 2px solid var(--accent); pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.ev { position: absolute; overflow: hidden; display: flex; flex-direction: column; padding: .15rem .3rem; font-size: .75rem; line-height: 1.15; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 5px; }
/* bookings (Google Calendar layer): blue, the palette twin of the red accent */
.ev.booking { border-left-color: var(--booking); background: color-mix(in srgb, var(--booking) 8%, var(--card)); }
.month-ev.booking .ev-time { color: var(--booking); }
.ev-time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ev-course { overflow: hidden; }
.ev-meta { color: var(--muted); overflow: hidden; }
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.month-head { padding: .3rem .2rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.month-cell { min-height: 7rem; padding: .3rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; overflow: hidden; }
.month-cell:hover { border-color: var(--accent); }
.month-cell.other { opacity: .45; }
.month-cell.on { border-color: var(--accent); }
.month-num { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.month-ev { display: flex; gap: .3rem; font-size: .7rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-ev .ev-course { text-overflow: ellipsis; }
.month-more { font-size: .7rem; color: var(--muted); }
[hidden] { display: none !important; }
main > .cal, main > .month { grid-column: 1 / -1; }
/* events: green, same saturation/lightness as the red accent and the booking blue */
.ev.event { border-left-color: var(--event); background: color-mix(in srgb, var(--event) 8%, var(--card)); }
.month-ev.event .ev-time { color: var(--event); }
/* multi-select: picked values as chips, then an input to add more */
#filters .chips, .picker .chips { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
#filters .chips { max-width: 24rem; }
#filters .chips input, .picker .chips input { min-width: 8rem; flex: 1; }
.chip input.qty { width: 2.6rem; min-width: 0; flex: none; padding: 0 .2rem; font: inherit; font-size: .8rem; text-align: right; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.chip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .15rem .1rem .5rem; font-size: .85rem; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.chip button { font: inherit; color: var(--muted); background: none; border: 0; padding: 0 .3rem; cursor: pointer; }
.chip button:hover { color: var(--fg); }
/* lab TV: the same layout as the edge node's showcase TV (apps/tv/index.html) */
.tv { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto 1fr auto; background: var(--bg); --mat: color-mix(in srgb, var(--fg) 6%, var(--bg)); }
.tv > header { grid-column: 1 / -1; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 1.4rem; font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
.tv-room-names { overflow: hidden; text-overflow: ellipsis; letter-spacing: .04em; text-transform: uppercase; font-size: 1rem; }
.tv-schedule { contain: strict; padding: .8rem 1.2rem; border-right: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: .6rem; }
/* sizes in em: the page shrinks the column's font until a busy day fits */
.tv-schedule section { flex: none; }
.tv .now-line { font-size: .8em; }
.tv-schedule h2 { margin: 0 0 .3em; font-size: .8em; color: var(--muted); }
.tv article { margin: 0 0 .3em; padding: .25em .6em; font-size: .9em; line-height: 1.25; border-radius: 6px; }
.tv article p, .tv article .course { margin: 0; font-size: 1em; } /* the site's rem sizes would not shrink */
.tv article .time { margin-right: .35rem; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; }
.tv article p.who { display: block; font-size: .89em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-stage { min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--mat); }
.tv-frame { width: min(86%, calc((100vh - 8rem) * 16 / 9)); aspect-ratio: 16 / 9; display: flex; align-items: center; overflow: hidden; background: var(--card); box-shadow: 0 0 0 .35rem var(--card), 0 0 0 calc(.35rem + 1px) var(--line), 0 .8rem 2rem rgb(0 0 0 / .12); }
.tv-frame img { height: 100%; aspect-ratio: 1; padding: 2rem; background: #fff; }
.tv-frame .text { flex: 1; min-width: 0; padding: 2.5rem; display: flex; flex-direction: column; gap: .6rem; }
.tv-frame .text p { margin: 0; }
.tv-frame h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 4.5rem); line-height: 1.1; overflow-wrap: anywhere; }
.tv-frame .when { color: var(--event); font-weight: 600; font-size: clamp(1rem, 1.5vw, 2.2rem); }
.tv-frame .body { color: var(--muted); font-size: clamp(1rem, 1.4vw, 2rem); }
.tv > footer { grid-column: 1 / -1; margin: 0; padding: .2rem 1.4rem; border-top: 1px solid var(--line); }
/* phones: the schedule only */
@media (max-width: 700px) { .tv { position: static; display: block; } .tv > header { flex-wrap: wrap; white-space: normal; padding: .5rem 0; } .tv-schedule { padding: .6rem 0; border: 0; } .tv-schedule section { flex: none; } .tv-stage { display: none; } .tv > footer { padding: .2rem 0; } }
/* book me: slot buttons, the form, the hidden honeypot */
.book main { display: block; max-width: 44rem; }
.slots { display: flex; flex-wrap: wrap; gap: .4rem; }
.slot { font: inherit; padding: .4rem .7rem; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums; }
.slot.on { color: var(--card); background: var(--booking); border-color: var(--booking); }
.book .form { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.5rem; }
.book .form label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
.book .form input, .book .form textarea { font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .4rem .5rem; }
.book .form > button { align-self: flex-start; font: inherit; padding: .5rem 1.2rem; color: var(--card); background: var(--accent); border: 0; border-radius: 999px; cursor: pointer; }
.book .error { color: var(--accent); }
.book .picked { font-weight: 600; margin: 1.5rem 0 0; }
.book .note { font-size: .8rem; color: var(--muted); }
.book .status { font-size: 1.3rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* idea hub: keyword chips and match cards reuse the booking / event colours */
.book p.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.book article button { font: inherit; margin-top: .4rem; padding: .35rem .9rem; color: var(--card); background: var(--booking); border: 0; border-radius: 999px; cursor: pointer; }
.book details { margin: .6rem 0; color: var(--muted); }
.book .idea-title { margin: 1rem 0 .3rem; font-size: 1.4rem; font-weight: 600; }

/* Book me time wheel: two scroll-snap columns (hours, quarter-hour minutes); the middle row is the pick */
.book .wheel-box { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
.wheel { position: relative; display: flex; align-items: center; justify-content: center; gap: .3rem; width: 11rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.wheel::after { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); pointer-events: none; }
.wheel-col { box-sizing: border-box; height: 108px; padding: 36px 0; width: 4rem; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; text-align: center; }
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-item { height: 36px; line-height: 36px; scroll-snap-align: center; font-size: 1.1rem; color: var(--muted); font-variant-numeric: tabular-nums; cursor: pointer; }
.wheel-item.on { color: var(--fg); font-weight: 600; }
.wheel-sep { font-size: 1.1rem; color: var(--fg); }