/* Helm: read from across a room. 1rem = one hundredth of 1080-wide stage width (see html font-size), so the
   whole board scales with the screen and any spare space goes to the tiles. */
:root {
  --bg: #06090e;
  --surface: #0e141c;
  --surface-2: #131b25;
  --hair: rgba(255, 255, 255, .075);
  --ink: #f3f6f9;
  --ink-2: #aab5c1;
  --ink-3: #808c99;
  --brass: #d8b26a;
  --ice: #8fc1ec;
  --ok: #2fd58a;
  --warn: #ffb224;
  --bad: #ff5a64;
  --bad-fill: #c81e2e;
  --stale: #8795a6;
  --tile-gap: 1.2rem;
}
* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html {
  font-size: 10px;
  font-size: min(calc(100vw / 108), calc(100vh / 192));
  background: var(--bg);
  height: 100%;
}
body {
  height: 100%; overflow: hidden; color: var(--ink); background: var(--bg);
  font-family: Roboto, "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 2rem; line-height: 1.25;
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
ul { list-style: none; padding: 0; }

/* A very low, cold light from the top so the black isn't flat. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(120% 40% at 70% -6%, rgba(80, 130, 180, .14), transparent 70%);
}

#stage {
  position: fixed; inset: 0; padding: 2.2rem 2.4rem 2rem; display: flex; flex-direction: column; gap: 1.4rem;
  transition: transform 60s linear; will-change: transform;
}

/* ------------------------------------------------------------------ top */
#top { display: flex; justify-content: space-between; align-items: center; flex: none; }
#time { font-size: 12rem; font-weight: 200; line-height: .95; letter-spacing: -.02em; margin-left: -.5rem; }
#time small { font-size: 3.4rem; font-weight: 400; letter-spacing: .02em; color: var(--ink-2); margin-left: .9rem; }
#date { font-size: 2.8rem; font-weight: 400; color: var(--ink-2); margin-top: .4rem; }
#brand { display: flex; align-items: baseline; gap: .8rem; margin-top: .9rem; font-size: 1.8rem; color: var(--ink-3); }
#brand b { font-size: 2.2rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
#foot { flex: none; text-align: center; font-size: 1.5rem; letter-spacing: .08em; color: var(--ink-3); }
#conn { display: flex; align-items: center; gap: .8rem; font-size: 1.8rem; color: var(--ink-3); margin-top: .3rem; height: 2.4rem; }
#connDot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--ok); transition: background .6s; }
#conn[data-lost="1"] { color: var(--warn); font-weight: 500; }
#conn[data-lost="1"] #connDot { background: var(--warn); animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

#overall { display: flex; align-items: center; gap: 2.4rem; text-align: right; }
#ovLabel { font-size: 6.6rem; font-weight: 600; line-height: 1.02; letter-spacing: -.01em; transition: color .9s; color: var(--ink-2); max-width: 54rem; }
#ovLine { font-size: 2.4rem; color: var(--ink-2); margin-top: .8rem; }
#overall[data-state="ok"] #ovLabel, #overall[data-state="quiet"] #ovLabel { color: var(--ok); }
#overall[data-state="warn"] #ovLabel { color: var(--warn); }
#overall[data-state="bad"] #ovLabel { color: var(--bad); }
#overall[data-state="stale"] #ovLabel, #overall[data-state="none"] #ovLabel { color: var(--stale); }
.ring { position: relative; width: 15.6rem; height: 15.6rem; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring path, .ring circle { fill: none; stroke-width: 7; transition: stroke .9s; }
.ringnum { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ringnum b { font-size: 5.2rem; font-weight: 300; line-height: 1; }
.ringnum span { font-size: 1.6rem; color: var(--ink-2); margin-top: .3rem; text-align: center; line-height: 1.1; }
.seg-ok, .seg-quiet { stroke: var(--ok); }
.seg-warn { stroke: var(--warn); }
.seg-bad { stroke: var(--bad); }
.seg-stale, .seg-none { stroke: #4a5664; }

/* ------------------------------------------------------------------ alert strip */
#alert {
  flex: none; border-radius: 1.4rem; padding: 1rem 2.4rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 5.6rem; transition: background .9s, border-color .9s, min-height .6s; border: .1rem solid var(--hair); background: var(--surface);
}
#alertBody { min-width: 0; transition: opacity .5s; flex: 1; }
#alertBody.swap { opacity: 0; }
#alertWhere { font-size: 2rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
#alertWhat { font-size: 3.6rem; font-weight: 600; line-height: 1.12; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#alertWhy { font-size: 2.6rem; line-height: 1.2; margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#alertCount { flex: none; font-size: 2.2rem; font-weight: 500; text-align: right; }
#alert[data-state="ok"] { cursor: default; }
#alert[data-state="ok"] #alertWhere, #alert[data-state="ok"] #alertWhy { display: none; }
#alert[data-state="ok"] #alertWhat { font-size: 2.6rem; font-weight: 400; color: var(--ink-2); }
#alert[data-state="bad"] { min-height: 15.5rem; background: var(--bad-fill); border-color: #ff8a92; animation: strip 3.2s ease-in-out infinite; }
#alert[data-state="warn"] { min-height: 15.5rem; background: #4f3706; border-color: var(--warn); }
#alert[data-state="warn"] #alertWhere { color: var(--warn); }
#alert[data-state="stale"], #alert[data-state="none"] {
  min-height: 15.5rem; border-color: var(--stale);
  background: repeating-linear-gradient(135deg, #17202b 0 1.4rem, #1d2834 1.4rem 2.8rem);
}
#alert[data-state="stale"] #alertWhere, #alert[data-state="none"] #alertWhere { color: var(--ink-2); }
@keyframes strip { 50% { background: #a81725; } }

/* ------------------------------------------------------------------ tiles */
#grid { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.row { display: flex; gap: var(--tile-gap); min-height: 0; flex-basis: 0; }
.group { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.group > h3 {
  font-size: 1.9rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass);
  margin: 0 0 .55rem .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.tiles { flex: 1 1 0; display: grid; gap: var(--tile-gap); min-height: 0; grid-auto-rows: minmax(0, 1fr); }

.tile {
  position: relative; overflow: hidden; border-radius: 1.3rem; padding: 1.1rem 1.3rem 1rem; display: flex; flex-direction: column; min-height: 0;
  background: linear-gradient(170deg, var(--surface-2), var(--surface)); border: .1rem solid var(--hair);
  transition: background-color .9s, border-color .9s, color .9s, transform .15s; cursor: pointer;
}
.tile:active { transform: scale(.98); }
.t-head { display: flex; align-items: flex-start; gap: .8rem; flex: none; }
.lamp {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-top: .55rem; background: var(--ok);
  box-shadow: 0 0 1.2rem rgba(47, 213, 138, .55); transition: background .9s, box-shadow .9s;
}
.t-name { font-size: 2.3rem; font-weight: 600; line-height: 1.14; min-width: 0; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.t-word { font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; color: var(--ok); margin-top: .1rem; transition: color .9s; text-transform: uppercase; flex: none; height: 2rem; display: none; }
.tile:not([data-state="ok"]) .t-word { display: block; }
.tile:not([data-state="ok"]) .t-label { -webkit-line-clamp: 1; }
.t-num { margin-top: auto; padding-top: .3rem; flex: none; }
.t-value { font-size: 5.6rem; font-weight: 300; line-height: 1.02; letter-spacing: -.015em; white-space: nowrap; }
.t-value[data-len="m"] { font-size: 4.5rem; }
.t-value[data-len="l"] { font-size: 3.9rem; }
.t-label { font-size: 1.75rem; color: var(--ink-2); line-height: 1.16; margin-top: .25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .9s; }
.t-graph { position: relative; flex: none; height: 3.1rem; margin-top: .6rem; color: var(--ice); }
.t-graph[data-kind="ribbon"] { height: 1.5rem; margin-top: 1rem; }
.t-graph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.t-graph .line { fill: none; stroke: currentColor; stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.t-graph .area { fill: currentColor; opacity: .13; }
.t-graph .dot { position: absolute; right: -.4rem; width: .9rem; height: .9rem; margin-top: -.45rem; border-radius: 50%; background: currentColor; transition: top .9s; }
.rb-track { fill: rgba(255, 255, 255, .07); }
.rb-ok { fill: rgba(47, 213, 138, .5); }
.rb-warn { fill: var(--warn); }
.rb-bad { fill: var(--bad); }

.tile[data-state="warn"] { background: #3a2905; border-color: var(--warn); }
.tile[data-state="warn"] .lamp { background: var(--warn); box-shadow: 0 0 1.4rem rgba(255, 178, 36, .7); }
.tile[data-state="warn"] .t-word { color: var(--warn); }
.tile[data-state="bad"] { background: var(--bad-fill); border-color: #ff8a92; animation: tile-bad 3.2s ease-in-out infinite; }
@keyframes tile-bad { 50% { background-color: #a81725; } }
.tile[data-state="bad"] .lamp { background: #fff; box-shadow: 0 0 1.6rem rgba(255, 255, 255, .8); }
.tile[data-state="bad"] .t-word, .tile[data-state="bad"] .t-label { color: #fff; }
.tile[data-state="bad"] .t-graph { color: #fff; }
.tile[data-state="bad"] .rb-ok { fill: rgba(255, 255, 255, .4); }
.tile[data-state="bad"] .rb-warn, .tile[data-state="bad"] .rb-bad { fill: #fff; }
.tile[data-state="stale"], .tile[data-state="none"] { background: repeating-linear-gradient(135deg, #111821 0 1rem, #161f2a 1rem 2rem); border-color: #3a4552; }
.tile[data-state="stale"] .lamp, .tile[data-state="none"] .lamp { background: #566372; box-shadow: none; }
.tile[data-state="stale"] .t-word, .tile[data-state="none"] .t-word { color: var(--ink-2); }
.tile[data-state="stale"] .t-value, .tile[data-state="none"] .t-value { color: var(--ink-3); }
.tile[data-state="stale"] .t-graph, .tile[data-state="none"] .t-graph { color: #5d6a79; }
.tile[data-state="stale"] .rb-ok, .tile[data-state="none"] .rb-ok { fill: rgba(255, 255, 255, .2); }
.tile[data-state="quiet"] .lamp { background: #5e88a8; box-shadow: none; }
.tile[data-state="quiet"] .t-word { color: #8fb1cb; }

/* The hero: one wide tile, its number on the left and its day on the right. */
.tile.hero { flex-direction: row; gap: 2.4rem; align-items: stretch; padding: 1.3rem 2rem 1.2rem; }
.tile.hero .h-left { flex: 0 0 44rem; display: flex; flex-direction: column; min-width: 0; }
.tile.hero .t-value, .tile.hero .t-value[data-len] { font-size: 9.6rem; font-weight: 200; }
.tile.hero .t-label { font-size: 2.1rem; }
.tile.hero .t-name { font-size: 2.7rem; flex: none; }
.tile.hero .t-head { align-items: center; }
.tile.hero .lamp { margin-top: 0; }
.tile.hero .t-word { margin: 0 0 0 .8rem; height: auto; font-size: 1.8rem; }
.tile.hero .h-right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tile.hero .t-graph { flex: 1 1 0; height: auto; min-height: 0; margin-top: 0; }
.h-sub { display: flex; gap: 3rem; justify-content: flex-end; flex: none; margin-bottom: .6rem; }
.h-sub div { text-align: right; }
.h-sub b { display: block; font-size: 3.6rem; font-weight: 300; line-height: 1.05; }
.h-sub span { font-size: 1.7rem; color: var(--ink-2); }
.tile[data-state="bad"] .h-sub span { color: #fff; }
.h-cap { flex: none; font-size: 1.55rem; color: var(--ink-3); text-align: right; margin-top: .35rem; }
.tile[data-state="bad"] .h-cap { color: #fff; }

/* ------------------------------------------------------------------ lower panel */
#lower { flex: none; height: 39.6rem; display: flex; gap: 1.4rem; transition: height .6s; }
body[data-alert="1"] #lower { height: 30.2rem; }
#desk { flex: 0 0 33rem; }
#work { flex: 1; min-width: 0; }
#desk, #work { background: var(--surface); border: .1rem solid var(--hair); border-radius: 1.4rem; padding: 1.5rem 1.9rem; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#lower h2 { font-size: 1.9rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); display: flex; justify-content: space-between; gap: 1rem; flex: none; margin-bottom: 1rem; }
#lower h2 em { font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ink-2); white-space: nowrap; }
#deskList li { font-size: 2.2rem; line-height: 1.18; padding: .7rem 0; border-top: .1rem solid var(--hair); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#deskList li:first-child { border-top: 0; padding-top: 0; }
#deskList li.ask::before { content: "Needs your answer · "; color: var(--brass); font-weight: 600; }
#deskList li.calm { color: var(--ink-3); border: 0; }
#workList { flex: 1; min-height: 0; transition: opacity .6s; }
#workList.swap { opacity: 0; }
#workList li { display: flex; gap: 1.8rem; padding: .7rem 0; border-top: .1rem solid var(--hair); align-items: flex-start; }
#workList li:first-child { border-top: 0; padding-top: 0; }
.w-main { flex: 1; min-width: 0; }
.w-title { font-size: 2.3rem; font-weight: 600; line-height: 1.14; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-title i { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 1.9rem; margin-left: .7rem; }
.w-next { font-size: 1.75rem; line-height: 1.18; color: var(--ink-2); margin-top: .2rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.w-when { flex: none; width: 11.5rem; text-align: right; }
.w-date { font-size: 2.5rem; font-weight: 300; line-height: 1.05; white-space: nowrap; }
.w-tag { font-size: 1.45rem; color: var(--ink-3); margin-top: .1rem; white-space: nowrap; }
.w-tag.you { color: var(--brass); font-weight: 600; }

/* ------------------------------------------------------------------ modal */
#modal { position: fixed; inset: 0; z-index: 20; background: rgba(2, 4, 8, .78); display: flex; align-items: center; justify-content: center; padding: 3rem 2.4rem; opacity: 0; transition: opacity .28s; }
#modal.open { opacity: 1; }
#sheet {
  position: relative; width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #0d131b; border: .1rem solid rgba(255, 255, 255, .14); border-radius: 2rem; box-shadow: 0 3rem 9rem rgba(0, 0, 0, .7);
  transform: translateY(1.6rem) scale(.985); transition: transform .28s;
}
#modal.open #sheet { transform: none; }
#closeBtn { position: absolute; top: 1.6rem; right: 1.6rem; z-index: 2; width: 8.4rem; height: 8.4rem; border-radius: 50%; background: rgba(255, 255, 255, .09); border: 0; display: flex; align-items: center; justify-content: center; }
#closeBtn:active { background: rgba(255, 255, 255, .22); }
#closeBtn svg { width: 3.6rem; height: 3.6rem; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
#sheetBody { overflow-y: auto; padding: 2.8rem 3.2rem 1.4rem; -webkit-overflow-scrolling: touch; min-height: 0; flex: 1 1 auto; }
#sheetFoot { flex: none; display: flex; justify-content: space-between; padding: 1.2rem 3.2rem 1.5rem; font-size: 1.8rem; color: var(--ink-3); border-top: .1rem solid var(--hair); }
#sheetBar { flex: none; height: .55rem; background: var(--brass); transform-origin: left; transform: scaleX(1); }
.m-eyebrow { font-size: 2rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--brass); }
.m-title { font-size: 5.6rem; font-weight: 600; line-height: 1.05; margin-top: .4rem; padding-right: 10rem; }
.m-state { display: inline-flex; align-items: center; gap: 1rem; font-size: 2.6rem; font-weight: 600; margin-top: 1.2rem; }
.m-state i { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: currentColor; }
.m-state[data-state="ok"] { color: var(--ok); } .m-state[data-state="warn"] { color: var(--warn); } .m-state[data-state="bad"] { color: var(--bad); }
.m-state[data-state="stale"], .m-state[data-state="none"] { color: var(--ink-2); } .m-state[data-state="quiet"] { color: #8fb1cb; }
.m-head { font-size: 2.3rem; color: var(--ink-2); margin-top: 1.5rem; }
.m-head b { display: block; font-size: 8rem; font-weight: 200; line-height: 1; color: var(--ink); letter-spacing: -.015em; }
.m-sec { margin-top: 2.8rem; }
.m-sec > h4 { font-size: 1.9rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.m-prob { display: flex; gap: 1.4rem; padding: 1.2rem 1.6rem; border-radius: 1.1rem; background: rgba(255, 255, 255, .045); margin-top: .8rem; }
.m-prob > i { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; margin-top: .85rem; background: var(--stale); }
.m-prob[data-state="bad"] { background: rgba(200, 30, 46, .3); } .m-prob[data-state="bad"] > i { background: var(--bad); }
.m-prob[data-state="warn"] { background: rgba(255, 178, 36, .15); } .m-prob[data-state="warn"] > i { background: var(--warn); }
.m-prob b { display: block; font-size: 2.8rem; font-weight: 600; line-height: 1.18; }
.m-prob span { display: block; font-size: 2.4rem; color: var(--ink-2); line-height: 1.22; margin-top: .2rem; }
.m-prob[data-state="bad"] span { color: #ffd9dc; }
.m-prob small { display: block; font-size: 1.9rem; color: var(--ink-3); margin-top: .2rem; }
.m-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.m-fact { padding: 1.2rem 1.6rem; background: rgba(255, 255, 255, .045); border-radius: 1.1rem; }
.m-fact b { display: block; font-size: 4.4rem; font-weight: 300; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-fact span { font-size: 1.9rem; color: var(--ink-2); line-height: 1.18; display: block; }
.m-chart { margin-top: 1.4rem; }
.m-chart:first-of-type { margin-top: 0; }
.m-chart-h { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; font-size: 2.3rem; font-weight: 500; margin-bottom: .3rem; }
.m-chart-h em { font-style: normal; font-size: 1.9rem; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.m-chart svg { width: 100%; display: block; }
.m-chart text { font-size: 15px; fill: var(--ink-3); font-family: inherit; }
.m-chart .grid { stroke: rgba(255, 255, 255, .075); stroke-width: 1; }
.m-chart .line { fill: none; stroke: var(--ice); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.m-chart .area { fill: var(--ice); opacity: .11; }
.m-chart .end { fill: var(--ice); stroke: #0d131b; stroke-width: 2; }
.m-chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.m-chips span { font-size: 1.9rem; padding: .5rem 1.1rem; border-radius: 99rem; background: rgba(47, 213, 138, .1); color: #bfe9d4; }
.m-chips span.q { background: rgba(143, 177, 203, .12); color: #bdd0df; }
.m-chips span.more { background: none; color: var(--ink-3); }
.m-ribbon svg { width: 100%; height: 3rem; display: block; }
.m-ribbon .labels { display: flex; justify-content: space-between; font-size: 1.7rem; color: var(--ink-3); margin-top: .5rem; }
.m-legend { display: flex; gap: 2.4rem; font-size: 1.9rem; color: var(--ink-2); margin-top: .9rem; }
.m-legend i { display: inline-block; width: 1.5rem; height: 1.5rem; border-radius: .3rem; margin-right: .7rem; vertical-align: -.15rem; }
.m-note { font-size: 2.3rem; color: var(--ink-2); margin-top: 1rem; }

/* ------------------------------------------------------------------ pairing */
#pair { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; padding: 4rem; }
.pairmark { width: 11rem; height: 11rem; fill: none; stroke: var(--brass); stroke-width: 2; }
#pair h1 { font-size: 6rem; font-weight: 300; margin-top: 1.4rem; }
#pairHint { font-size: 2.8rem; color: var(--ink-2); min-height: 3.6rem; }
#pairHint.err { color: var(--bad); }
#pairCode { display: flex; gap: 1.1rem; margin: 2rem 0 3rem; }
#pairCode i { width: 8.4rem; height: 10.8rem; border-radius: 1.2rem; background: var(--surface-2); border: .15rem solid var(--hair); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 6rem; font-weight: 300; }
#pairCode i.on { border-color: var(--brass); }
#keypad { display: grid; grid-template-columns: repeat(3, 19rem); gap: 1.4rem; }
#keypad button { height: 15.4rem; border-radius: 1.6rem; border: .1rem solid var(--hair); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 6rem; font-weight: 300; }
#keypad button:active { background: #24303e; }
#keypad button.alt { font-size: 2.8rem; font-weight: 400; color: var(--ink-2); background: none; }
#keypad[data-busy="1"] { opacity: .4; pointer-events: none; }