/* The office board. Everything is sized in rem, and 1rem is 1/120 of the
   screen's width (16px on a 1920-wide screen), so the same composition
   fills a 1080p board, a 4K board and a laptop window alike.

   Colour: the company's navy and gold. Navy is the canvas, gold is spent
   on one thing at a time — the pulse on the day line, the current meeting,
   the progress of the screen that is on. Data bars are a quiet
   periwinkle so the three warnings (red, amber, green) stay unmistakable.
   The light theme (?theme=light) is the same drawing on ivory. */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: oklch(0.17 0.03 268);
  --surface: oklch(0.215 0.032 268);
  --surface-2: oklch(0.26 0.032 268);
  --line: oklch(0.31 0.03 268);
  --fg: oklch(0.96 0.008 268);
  --fg-2: oklch(0.75 0.015 268);
  --fg-3: oklch(0.56 0.018 268);
  --gold: oklch(0.84 0.13 85);
  --gold-soft: oklch(0.32 0.05 85);
  --data: oklch(0.76 0.1 268);
  --data-soft: oklch(0.34 0.05 268);
  --red: oklch(0.72 0.19 25);
  --red-soft: oklch(0.3 0.08 25);
  --amber: oklch(0.8 0.15 70);
  --amber-soft: oklch(0.32 0.07 70);
  --green: oklch(0.8 0.15 160);
  --green-soft: oklch(0.3 0.06 160);
  --heat-lo: oklch(0.25 0.03 268);
  --heat-hi: oklch(0.8 0.11 268);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: calc(min(100vw / 1920, 100vh / 1080) * 16);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: oklch(0.975 0.006 85);
  --surface: #ffffff;
  --surface-2: oklch(0.955 0.008 85);
  --line: oklch(0.9 0.008 268);
  --fg: oklch(0.22 0.04 268);
  --fg-2: oklch(0.46 0.03 268);
  --fg-3: oklch(0.62 0.02 268);
  --gold: oklch(0.66 0.14 80);
  --gold-soft: oklch(0.94 0.06 85);
  --data: oklch(0.5 0.14 268);
  --data-soft: oklch(0.92 0.03 268);
  --red: oklch(0.55 0.2 25);
  --red-soft: oklch(0.95 0.035 25);
  --amber: oklch(0.6 0.15 70);
  --amber-soft: oklch(0.96 0.05 80);
  --green: oklch(0.52 0.14 160);
  --green-soft: oklch(0.95 0.04 160);
  --heat-lo: oklch(0.95 0.012 268);
  --heat-hi: oklch(0.45 0.15 268);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.6rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  cursor: none;
}
body.pointer { cursor: default; }
[hidden] { display: none !important; }
b, strong { font-weight: 600; }
h1, h2, h3, p { margin: 0; }

/* ---------- the frame ---------- */
.board {
  height: 100%;
  display: grid;
  grid-template-rows: 6.5rem 1fr 4.75rem;
}
.top {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 3.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 1rem; flex: none; }
.brand .mark { width: 2.6rem; height: 2.6rem; color: var(--gold); }
.brand b { display: block; font-size: 1.5rem; letter-spacing: -0.01em; line-height: 1.1; }
.brand small { display: block; font-size: 1.05rem; color: var(--fg-2); }
.screen-title { padding-left: 2rem; border-left: 1px solid var(--line); min-width: 0; }
.screen-title h1 { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; white-space: nowrap; }
.screen-title p { font-size: 1.25rem; color: var(--fg-2); margin-top: 0.3rem; white-space: nowrap; }
.rail { flex: 1; align-self: stretch; min-width: 0; display: flex; align-items: center; padding: 0 2rem; }
.rail svg { width: 100%; height: 3.4rem; overflow: visible; }
.rail .line { stroke: var(--line); stroke-width: 2; }
.rail .past { stroke: var(--gold); stroke-width: 2; opacity: 0.55; }
.rail .tick { fill: var(--data); }
.rail .tick.now { fill: var(--gold); }
.rail .pulse { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.rail text { font-family: var(--mono); font-size: 0.95rem; fill: var(--fg-3); }
.clock { flex: none; text-align: right; }
.clock b { display: block; font-family: var(--mono); font-weight: 500; font-size: 2.9rem; line-height: 1; letter-spacing: -0.03em; }
.clock span { font-size: 1.2rem; color: var(--fg-2); }

.stage { position: relative; overflow: hidden; }
.screen {
  position: absolute; inset: 0;
  padding: 2.4rem 3.5rem 2.2rem;
  opacity: 0; visibility: hidden; transform: translateY(0.8rem);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s 0.55s;
}
.screen.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.55s ease, transform 0.55s ease; }
@media (prefers-reduced-motion: reduce) { .screen, .screen.on { transition: none; transform: none; } }

.foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 0 3.5rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.tabs { display: flex; gap: 1.6rem; min-width: 0; }
.tab {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 0.55rem;
  font: inherit; font-size: 1.15rem; color: var(--fg-3);
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tab.on { color: var(--fg); font-weight: 600; }
.tab .bar { height: 0.3rem; background: var(--surface-2); border-radius: 0.2rem; overflow: hidden; }
.tab .bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.tab.done .bar i { transform: scaleX(1); opacity: 0.3; }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.strip { display: flex; align-items: center; gap: 1.4rem; font-size: 1.15rem; color: var(--fg-2); white-space: nowrap; }
.strip .note { color: var(--fg); font-weight: 500; max-width: 60rem; overflow: hidden; text-overflow: ellipsis; }
.strip .note:empty { display: none; }
.strip .status { display: flex; align-items: center; gap: 0.6rem; color: var(--fg-3); }
.strip .status i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--green); display: inline-block; }
.strip .status.attention i { background: var(--amber); }
.strip .status.unknown i { background: var(--fg-3); }
.strip .status.stale { color: var(--amber); }
.strip .status.stale i { background: var(--amber); }

/* ---------- shared pieces ---------- */
.label { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 0.9rem; padding: 1.7rem 2rem; min-width: 0; min-height: 0; overflow: hidden; }
.num { font-family: var(--mono); font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.num.amber { color: var(--amber); }
.pill { display: inline-block; font-size: 1.2rem; font-weight: 600; padding: 0.3rem 0.95rem; border-radius: 99rem; white-space: nowrap; background: var(--surface-2); color: var(--fg-2); }
.pill.red { background: var(--red-soft); color: var(--red); }
.pill.amber { background: var(--amber-soft); color: var(--amber); }
.pill.green { background: var(--green-soft); color: var(--green); }
.pill.blue { background: var(--data-soft); color: var(--data); }
.pill.gold { background: var(--gold-soft); color: var(--gold); }
.pill.faint { opacity: 0.6; }
.chip { font-size: 1.15rem; color: var(--fg-2); border: 1px solid var(--line); padding: 0.15rem 0.7rem; border-radius: 0.4rem; white-space: nowrap; }
.empty { color: var(--fg-3); font-size: 1.4rem; padding: 1rem 0; }
.up { color: var(--green); }
.down { color: var(--red); }
.dot { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 0.2rem; margin-right: 0.7rem; vertical-align: -1px; background: var(--surface-2); }
.dot.accent { background: var(--data); }
.dot.soft { background: var(--data); opacity: 0.45; }
.dot.faint { background: var(--surface-2); }
.meter { height: 0.95rem; background: var(--surface-2); border-radius: 0.5rem; overflow: hidden; margin-top: 1.6rem; display: flex; }
.meter i { display: block; height: 100%; background: var(--data); }
.meter i.soft { opacity: 0.45; }
.split { display: grid; gap: 0.8rem; margin-top: 1.6rem; font-size: 1.45rem; }
.split > div { display: flex; justify-content: space-between; gap: 1rem; }
.split b { font-family: var(--mono); font-weight: 500; }
.bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 11rem; margin-top: 1.3rem; }
.bars i { flex: 1; display: block; background: var(--data); opacity: 0.55; border-radius: 0.2rem 0.2rem 0 0; min-height: 0.2rem; }
.bars i.dim { opacity: 0.25; }
.bars i.hi { background: var(--gold); opacity: 1; }
.axis { display: flex; justify-content: space-between; font-size: 1.1rem; color: var(--fg-3); margin-top: 0.5rem; }
.headline { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.headline b { font-family: var(--mono); font-weight: 500; font-size: 1.7rem; }
.hero { display: flex; flex-direction: column; }
.hero .num { font-size: 11rem; margin-top: 1.6rem; }
.hero .of { font-size: 2rem; color: var(--fg-2); margin-top: 0.6rem; }
.hero .delta { margin-top: auto; padding-top: 1.4rem; font-size: 1.3rem; color: var(--fg-2); }
.note { font-size: 1.1rem; color: var(--fg-3); margin-top: auto; padding-top: 1rem; }
.side { display: grid; grid-template-rows: auto 1fr; gap: 1.7rem; min-height: 0; }

/* ---------- documents ---------- */
.docs { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto 1fr; gap: 1.7rem; height: 100%; }
.band { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 0.9rem; }
.band > div { padding: 1.4rem 2rem; border-left: 1px solid var(--line); display: flex; align-items: baseline; gap: 1.2rem; }
.band > div:first-child { border-left: 0; }
.band .num { font-size: 4.6rem; }
.band .red .num { color: var(--red); }
.band .amber .num { color: var(--amber); }
.band span { font-size: 1.35rem; color: var(--fg-2); line-height: 1.2; }
.rows { margin-top: 0.8rem; }
.row { display: grid; grid-template-columns: 1.2fr 1fr 0.95fr 1.05fr; align-items: center; gap: 1.2rem; padding: 0.78rem 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row b { font-size: 1.65rem; }
.row .when { font-family: var(--mono); font-size: 1.3rem; color: var(--fg-2); }
.row .who { font-size: 1.25rem; color: var(--fg-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .who em { font-style: normal; color: var(--green); font-weight: 600; }
.types { display: grid; gap: 1rem; margin: 1rem 0 1.2rem; }
.type { display: grid; grid-template-columns: 11rem 1fr 2.6rem; align-items: center; gap: 1rem; font-size: 1.4rem; }
.type .stack { display: flex; height: 1.5rem; border-radius: 0.3rem; overflow: hidden; background: var(--surface-2); }
.type .stack i { display: block; height: 100%; }
.type .n { font-family: var(--mono); text-align: right; }
.s-red { background: var(--red); } .s-amber { background: var(--amber); } .s-rest { background: var(--data); opacity: 0.55; }
.legend { display: flex; gap: 1.4rem; font-size: 1.1rem; color: var(--fg-2); margin-bottom: 1.8rem; flex-wrap: wrap; }
.legend i { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 0.2rem; margin-right: 0.5rem; vertical-align: -1px; }
.weeks { display: flex; align-items: flex-end; gap: 0.6rem; height: 8.5rem; margin-top: 1rem; }
.weeks > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.35rem; height: 100%; font-family: var(--mono); font-size: 1rem; color: var(--fg-2); }
.weeks i { display: block; width: 100%; background: var(--data); opacity: 0.7; border-radius: 0.25rem 0.25rem 0 0; min-height: 0.2rem; }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; gap: 1.7rem; height: 100%; }
.plist { margin-top: 0.6rem; }
.plist > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.plist > div:first-child { border-top: 0; }
.plist b { font-size: 1.65rem; display: block; }
.plist small { font-size: 1.25rem; color: var(--fg-2); }
.celebrate { margin-top: 1.6rem; padding: 1rem 1.3rem; border-radius: 0.6rem; background: var(--gold-soft); color: var(--gold); font-size: 1.5rem; font-weight: 600; }
.welcome { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.welcome p { margin-top: 0.6rem; font-size: 1.45rem; line-height: 1.3; }

/* ---------- meetings ---------- */
.meet { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.7rem; height: 100%; }
.agenda { display: grid; gap: 0.75rem; margin-top: 1rem; }
.slot { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: 1.5rem; align-items: center; padding: 1rem 1.5rem; border-radius: 0.65rem; border: 1px solid var(--line); }
.slot .t { font-family: var(--mono); font-size: 1.65rem; font-weight: 500; }
.slot .t small { display: block; font-size: 1.15rem; color: var(--fg-3); font-weight: 400; }
.slot h3 { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em; }
.slot p { margin-top: 0.25rem; font-size: 1.25rem; color: var(--fg-2); }
.slot.ended { opacity: 0.5; }
.slot.now { background: var(--gold-soft); border-color: var(--gold); }
.slot.now .t, .slot.now h3 { color: var(--gold); }
.slot.now .pill { background: var(--gold); color: var(--bg); }
.kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.2rem; margin-top: 1.1rem; }
.kpis .num { font-size: 3.8rem; display: block; }
.kpis span { font-size: 1.2rem; color: var(--fg-2); }
.next { margin-top: 0.6rem; }
.next > div { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: 0.8rem 0; border-top: 1px solid var(--line); font-size: 1.4rem; }
.next > div:first-child { border-top: 0; }
.next span { font-family: var(--mono); color: var(--fg-2); font-size: 1.25rem; }

/* ---------- usage ---------- */
.usage { display: grid; grid-template-columns: 1.05fr 1.5fr 1.05fr; grid-template-rows: 1fr 1fr; gap: 1.7rem; height: 100%; }
.usage .hero { grid-row: 1 / -1; }
.usage .tall { grid-row: 1 / -1; display: flex; flex-direction: column; }
.onboard .num { font-size: 4.6rem; }
.onboard > div:first-child { display: flex; align-items: baseline; gap: 1.2rem; margin-top: 1.2rem; }
.onboard > div:first-child span { font-size: 1.35rem; color: var(--fg-2); line-height: 1.25; }
.onboard .meter { margin-top: 1.4rem; }

/* ---------- activity ---------- */
.act { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.7rem; height: 100%; }
.act .panel { display: flex; flex-direction: column; }
.total { display: flex; align-items: baseline; gap: 1.4rem; margin: 0.8rem 0 2rem; }
.total .num { font-size: 7.5rem; color: var(--gold); }
.total span { font-size: 1.5rem; color: var(--fg-2); line-height: 1.3; }
.dept { display: grid; gap: 1rem; margin-top: 1.2rem; }
.dept > div { display: grid; grid-template-columns: 1fr 4.5rem; gap: 0.4rem 0.8rem; font-size: 1.35rem; align-items: center; }
.dept u { grid-column: 1 / -1; height: 0.6rem; background: var(--surface-2); border-radius: 0.3rem; overflow: hidden; display: block; text-decoration: none; }
.dept u i { display: block; height: 100%; background: var(--data); border-radius: 0.3rem; }
.dept b { font-family: var(--mono); font-weight: 500; text-align: right; color: var(--fg-2); }
.feed { margin-top: 0.6rem; }
.feed > div { display: grid; grid-template-columns: 6rem 1fr; gap: 1.2rem; padding: 0.85rem 0; border-top: 1px solid var(--line); font-size: 1.45rem; }
.feed > div:first-child { border-top: 0; }
.feed span { font-family: var(--mono); font-size: 1.25rem; color: var(--fg-3); padding-top: 0.2rem; }

/* ---------- reports on time ---------- */
.heat { display: grid; grid-template-columns: 1fr 25rem; gap: 1.7rem; height: 100%; }
.grid { display: grid; grid-template-columns: 15rem repeat(var(--months), 1fr); gap: 0.45rem; margin-top: 1.4rem; }
.grid .m { font-size: 1.15rem; color: var(--fg-2); text-align: center; padding-bottom: 0.25rem; }
.grid .d { font-size: 1.4rem; align-self: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0.5rem; }
.cell { height: 3.6rem; border-radius: 0.45rem; display: grid; place-items: center; font-family: var(--mono); font-size: 1.3rem; font-weight: 500; background: color-mix(in oklch, var(--heat-hi) var(--p), var(--heat-lo)); }
.cell.dark { color: var(--bg); }
.cell.none { background: transparent; border: 1px dashed var(--line); color: var(--fg-3); }
.scale { display: flex; align-items: center; gap: 0.9rem; font-size: 1.15rem; color: var(--fg-2); margin-top: 1.5rem; }
.scale u { display: block; width: 18rem; height: 0.9rem; border-radius: 0.45rem; background: linear-gradient(90deg, var(--heat-lo), var(--heat-hi)); }
.scale .hint { margin-left: 1.4rem; color: var(--fg-3); }
.avg .num { font-size: 6.5rem; display: block; margin-top: 1rem; }
.avg .sub { font-size: 1.3rem; color: var(--fg-2); margin-top: 0.8rem; }
.movers { margin-top: 0.4rem; }
.movers > div { padding: 1.05rem 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; font-size: 1.4rem; }
.movers > div:first-child { border-top: 0; }
.movers b { font-family: var(--mono); font-weight: 500; white-space: nowrap; }

/* ---------- pairing, and the curtain ---------- */
.pairing, .curtain {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--bg); color: var(--fg);
  text-align: center;
}
.pairing .mark { width: 4rem; height: 4rem; color: var(--gold); margin-bottom: 1rem; }
.pairing h1 { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.02em; }
.pairing p { font-size: 1.6rem; color: var(--fg-2); margin-top: 0.8rem; max-width: 60rem; }
.pairing .code { font-family: var(--mono); font-size: 11rem; font-weight: 500; letter-spacing: 0.22em; margin: 3rem 0 2rem; color: var(--gold); padding-left: 0.22em; }
.pairing ol { text-align: left; display: inline-grid; gap: 0.6rem; margin: 1.5rem auto 0; padding-left: 2rem; font-size: 1.5rem; color: var(--fg-2); }
.pairing ol b { color: var(--fg); font-weight: 500; }
.pairing .small { font-size: 1.2rem; color: var(--fg-3); margin-top: 2.5rem; }
.curtain { font-size: 1.6rem; color: var(--fg-2); }
.curtain.error { color: var(--amber); }