/* Status Board wall display: dark, high contrast, readable across a room. Sizes inside panels
   are in em so wall.js can scale a whole panel with one font-size. */
:root {
  --bg: #07090c;
  --panel: #12161c;
  --panel-2: #1a2028;
  --line: #2a323d;
  --text: #eef2f6;
  --dim: #8d98a6;
  --red: #ff4b4b;
  --red-bg: #4a1014;
  --amber: #ffb627;
  --amber-bg: #44320a;
  --green: #3ddc7a;
  --blue: #5cb3ff;
  --slate: #5b7fa6;
  --slate-bg: #1c2a3b;
  --accent: #c8102e;
  --gap: 0.45vmin;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: none;
}
#wall { height: 100%; width: 100%; }

/* A screen mounted on its side (or upside down) that cannot turn its own picture: the display's
   setting turns the whole page. Sizes use vmin, so text is the same size whichever way it faces,
   and overlays inside the turned body turn with it. */
html.rot90, html.rot270, html.rot180 { overflow: hidden; }
html.rot90 body, html.rot270 body { position: absolute; top: 0; left: 0; width: 100vh; height: 100vw; transform-origin: 0 0; }
html.rot90 body { -webkit-transform: rotate(90deg) translateY(-100%); transform: rotate(90deg) translateY(-100%); }
html.rot270 body { -webkit-transform: rotate(-90deg) translateX(-100%); transform: rotate(-90deg) translateX(-100%); }
html.rot180 body { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

/* ---------- pairing and messages ---------- */
#wall.pairing, #wall.message {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-size: 2.4vmin; text-align: center; padding: 4vmin;
}
.pair-box { max-width: 80%; }
.pair-title { font-size: 2em; font-weight: 700; margin-bottom: 0.6em; }
.pair-code {
  font-size: 7em; font-weight: 800; letter-spacing: 0.12em; line-height: 1;
  padding: 0.25em 0.5em; border: 0.06em solid var(--accent); border-radius: 0.15em; margin: 0.2em 0 0.4em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.pair-url { font-size: 1.2em; color: var(--blue); word-break: break-all; }
.dim { color: var(--dim); }

/* ---------- board frame ---------- */
#wall.board { display: flex; flex-direction: column; padding: var(--gap); gap: var(--gap); }
.grid { flex: 1; min-height: 0; display: grid; gap: var(--gap); }

.panel {
  min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel); border: 0.12vmin solid var(--line); border-radius: 0.6vmin;
  font-size: 2vmin; line-height: 1.22;
}
.phead {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.3em 0.55em; background: var(--panel-2); border-bottom: 1px solid var(--line);
  font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.ptitle { flex: 1; font-size: 1.12em; }
.ppage { color: var(--dim); font-weight: 600; font-size: 0.8em; }
.ppage:empty { display: none; }
.pbody { flex: 1; min-height: 0; overflow: hidden; padding: 0.35em 0.55em; position: relative; }
.paged .items { transition: transform 0.6s ease; }
/* A paged panel is already at its smallest size: a long title gives way to the page count. */
.paged .ptitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.empty { color: var(--dim); margin: 0.2em 0; }
.empty.small { font-size: 0.85em; }

/* ---------- status colours ---------- */
.badge {
  flex: none; font-size: 0.78em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.12em 0.5em; border-radius: 1em; border: 0.1em solid currentColor;
}
.badge.st-in_service { color: var(--green); border: 0; padding: 0; font-size: 0.7em; font-weight: 700; }
.badge.st-limited { color: #111; background: var(--amber); border-color: var(--amber); }
.badge.st-oos { color: #fff; background: var(--red); border-color: var(--red); }
.badge.st-reserve { color: #fff; background: var(--slate); border-color: var(--slate); }

.panel.st-oos { border-color: var(--red); box-shadow: inset 0 0 0 0.2vmin var(--red); }
.panel.st-oos .phead { background: var(--red-bg); }
.panel.st-limited { border-color: var(--amber); }
.panel.st-reserve { border-color: var(--slate); }
.panel.st-reserve .phead { background: var(--slate-bg); }
.ucard.st-reserve { border-color: var(--slate); }
.panel.st-limited .phead { background: var(--amber-bg); }
.reason { font-weight: 700; color: var(--amber); margin-bottom: 0.25em; }
.panel.st-oos .reason, .ucard.st-oos .reason { color: var(--red); }

/* ---------- notes ---------- */
.notes { list-style: none; margin: 0; padding: 0; }
.note {
  padding: 0.18em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em;
}
.note:last-child { border-bottom: 0; }
.ntext { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
.note.is-oos .ntext { color: #ffd2d2; }
.note.sev-warn .ntext { color: #ffe3a3; }
.note.sev-alert .ntext { color: #fff; font-weight: 700; }
.tag {
  flex: none; font-size: 0.72em; font-weight: 800; padding: 0.05em 0.35em; border-radius: 0.25em;
  position: relative; top: -0.08em;
}
.tag.oos { background: var(--red); color: #fff; }
.tag.alert { background: var(--amber); color: #111; }
.ndate { color: var(--dim); font-size: 0.8em; white-space: nowrap; }
.new { font-size: 0.65em; font-weight: 800; color: var(--blue); border: 1px solid var(--blue); border-radius: 0.25em; padding: 0 0.25em; }
.unsure { color: var(--dim); font-size: 0.8em; padding: 0 0.1em; }

/* ---------- tracker chips and list ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.25em; margin-bottom: 0.25em; }
.chip { font-size: 0.82em; padding: 0.08em 0.45em; border-radius: 0.3em; border: 1px solid var(--line); white-space: nowrap; }
.chip.ok { color: var(--dim); }
.chip.warn { color: var(--amber); border-color: var(--amber); }
.chip.alert, .chip.expired { color: #fff; background: var(--red); border-color: var(--red); }

.trackers { list-style: none; margin: 0; padding: 0; }
.trk {
  display: flex; flex-wrap: wrap; gap: 0 0.6em; align-items: baseline;
  padding: 0.15em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.trk:last-child { border-bottom: 0; }
.tname { flex: 1 1 8em; min-width: 0; }
.tunit, .tdue { color: var(--dim); font-size: 0.85em; }
.tdays { white-space: nowrap; }
.trk.ok .tdays { color: var(--green); }
.trk.warn .tdays { color: var(--amber); }
.trk.alert .tdays, .trk.expired .tdays { color: var(--red); }
.trk.expired { background: var(--red-bg); }

/* ---------- staff ---------- */
.staff { list-style: none; margin: 0; padding: 0; }
.person { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5em; padding: 0.15em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.person:last-child { border-bottom: 0; }
.pname { flex: 1 1 8em; min-width: 0; font-weight: 600; }
.prole { color: var(--dim); font-weight: 400; font-size: 0.85em; }
.pstat { font-size: 0.8em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.person.available .pstat { color: var(--green); }
.person.unavailable .pstat { color: #fff; background: var(--red); padding: 0 0.35em; border-radius: 0.2em; }
.person.off_duty .pstat { color: var(--dim); }
.person.off_duty .pname { color: var(--dim); }
.pnote { flex-basis: 100%; color: var(--dim); font-size: 0.85em; }

/* ---------- apparatus cards (units panel) ---------- */
.unit-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: 0.4em; }
.ucard { background: var(--panel-2); border: 1px solid var(--line); border-radius: 0.3em; padding: 0.3em 0.45em; }
.ucard.st-oos { border-color: var(--red); }
.ucard.st-limited { border-color: var(--amber); }
.where { color: var(--dim); font-weight: 600; font-size: 0.75em; }
.ucard-head .where { margin-left: 0.5em; }
.ubig .where { display: block; margin: 0.2em 0; font-size: 0.9em; }
.ucard-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4em; margin-bottom: 0.2em; }

/* ---------- media: a portrait letter-size page ---------- */
.k-media .pbody { padding: 0.3vmin; }
.media-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3vmin; }
.media-page { background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.media-page img { width: 100%; height: 100%; object-fit: contain; display: block; }
.k-image .pbody { padding: 0; }
.k-text .pbody { display: flex; align-items: center; justify-content: center; }
.k-text .stext.left { align-self: stretch; width: 100%; }
.img-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.img-stage img { width: 100%; height: 100%; display: block; object-fit: contain; }
.img-stage img.fit-cover { object-fit: cover; }
.stext { white-space: pre-wrap; overflow-wrap: break-word; text-align: center; font-weight: 700; line-height: 1.2; }
.stext.left { text-align: left; }
.media-cap { flex: none; max-width: 100%; font-size: 1.4vmin; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- cycle: the panel itself is just a frame for the part on show ---------- */
.panel.k-cycle { background: none; border: 0; }
.cycle { height: 100%; }
.cycle > .panel { height: 100%; }

/* ---------- flag ---------- */
.k-flag .pbody { display: flex; align-items: center; }
.flags { display: flex; flex-wrap: wrap; gap: 0.2em 0.9em; align-items: center; width: 100%; }
.flag { display: flex; gap: 0.35em; align-items: center; white-space: nowrap; }
.fimg { height: 1.1em; width: auto; border: 1px solid rgba(255, 255, 255, 0.25); }
.flag b { font-weight: 800; letter-spacing: 0.04em; }
.flag.full b { color: var(--text); }
.flag.half b { color: #111; background: var(--amber); padding: 0 0.3em; border-radius: 0.2em; }
.flag.unknown b { color: var(--dim); }
.fnote { flex-basis: 100%; color: var(--dim); font-size: 0.6em; }
.panel.k-flag.half { border-color: var(--amber); }

/* ---------- weather and tides ---------- */
.wnow { display: flex; align-items: baseline; gap: 0.4em; flex-wrap: wrap; }
.wtemp { font-size: 1.8em; font-weight: 800; line-height: 1; }
.wtext { color: var(--text); }
.wwind { color: var(--dim); font-size: 0.85em; }
.wper { color: var(--dim); margin-top: 0.15em; }
.wper b { color: var(--text); font-weight: 600; }
.walert { background: var(--red); color: #fff; padding: 0.1em 0.35em; border-radius: 0.2em; margin-bottom: 0.15em; }
.panel.has-alert { border-color: var(--red); }
.k-tides .pbody { display: flex; align-items: center; }
.tides { display: flex; flex-wrap: wrap; gap: 0.1em 1em; }
.tide { white-space: nowrap; }
.tide.high b { color: var(--blue); }
.tide.low b { color: var(--dim); }
.tft { color: var(--dim); font-size: 0.85em; }

/* ---------- clock ---------- */
.k-clock .pbody { display: flex; align-items: center; justify-content: center; }
.clock { text-align: center; white-space: nowrap; }
.ctime { font-size: 1.9em; font-weight: 800; line-height: 1; }
.cshift { color: var(--accent, #c8102e); font-weight: 800; font-size: 0.75em; margin-top: 0.1em; letter-spacing: 0.03em; }
.cdate { color: var(--dim); font-size: 0.6em; margin-top: 0.15em; }
.k-clock.cwrap .clock { white-space: normal; }

/* ---------- ticker ---------- */
.ticker {
  flex: none; overflow: hidden; white-space: nowrap; background: var(--panel-2);
  border: 0.12vmin solid var(--line); border-radius: 0.6vmin; font-size: 2.3vmin; padding: 0.25em 0;
}
.ticker-run { display: inline-block; animation: ticker linear infinite; }
.ticker-run span { padding-right: 6em; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- status bar ---------- */
.status {
  flex: none; display: flex; align-items: center; gap: 1em;
  font-size: 1.45vmin; color: var(--dim); padding: 0 0.5em; white-space: nowrap;
}
.sleft { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.spow { opacity: 0.75; }
#wall.stale .spow { display: none; }
.sdots { display: flex; gap: 0.4em; }
.sdots .dot { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--line); }
.sdots .dot.on { background: var(--text); }
#wall.stale .status {
  font-size: 2.4vmin; font-weight: 800; color: #fff; background: var(--red);
  border-radius: 0.6vmin; padding: 0.3em 0.6em; animation: blink 2s step-end infinite;
}
#wall.stale .grid { opacity: 0.55; }
@keyframes blink { 50% { background: #8a1a1a; } }

@media (prefers-reduced-motion: reduce) {
  .ticker-run { animation-duration: 0s !important; }
  #wall.stale .status { animation: none; }
}

/* ---------- apparatus styles: compact and minimal ---------- */
.badge.big { font-size: 1em; }
.badge.big.st-in_service { font-size: 0.9em; font-weight: 800; letter-spacing: 0.04em; }
.ubig .badge.big { display: inline-block; font-size: 1.5em; margin-bottom: 0.2em; }
.ubig .reason { font-size: 1.05em; }
.unit-cards.compact { grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); }
.ucard.compact .ucard-head { margin-bottom: 0; }
.ucard.compact .reason { margin: 0.2em 0 0; font-size: 0.9em; }
.usum { margin-bottom: 0.3em; font-size: 1.05em; }
.usum b { color: var(--text); }
.usum.all-in b { color: var(--green); }
.usum .sum-reserve { color: #a9c3e0; }
.usum .sum-oos { color: var(--red); font-weight: 700; }
.usum .sum-limited { color: var(--amber); font-weight: 700; }

/* Minimal: solid status colour tiles that read across a room. */
.mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6em, 1fr)); grid-gap: 0.3em; }
.mtile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 0.3em 0.25em; border-radius: 0.25em; border: 0.12em solid var(--line); background: var(--panel-2);
  line-height: 1.1; position: relative;
}
.mname { font-size: 1.15em; font-weight: 800; }  /* no mid-word breaks: a long name makes fit() shrink the text */
.mstat { font-size: 0.7em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15em; }
.mwhere { font-size: 0.6em; font-weight: 600; opacity: 0.85; margin-top: 0.1em; }
.mtile.st-in_service { background: #0d3a20; border-color: var(--green); }
.mtile.st-in_service .mstat { color: var(--green); }
.mtile.st-oos { background: var(--red); border-color: var(--red); color: #fff; }
.mtile.st-limited { background: var(--amber); border-color: var(--amber); color: #111; }
.mtile.st-reserve { background: var(--slate); border-color: var(--slate); color: #fff; }
.k-unit.style-tile .pbody { padding: 0; }
.mtile.solo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0; border-radius: 0; }
.mtile.solo .mname { font-size: 1.6em; }
.mtile.solo .mstat { font-size: 0.85em; }
.panel.k-unit.style-tile.st-in_service, .panel.k-unit.style-tile.st-oos { box-shadow: none; }

/* ---------- calendars ---------- */
.chead { color: var(--dim); font-weight: 600; font-size: 0.85em; }
.cagenda { list-style: none; margin: 0; padding: 0; }
.cev { display: flex; align-items: baseline; flex-wrap: wrap; padding: 0.16em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.cev:last-child { border-bottom: 0; }
.cbar { flex: none; width: 0.35em; height: 0.9em; border-radius: 0.1em; margin-right: 0.45em; align-self: center; }
.cev .evtime { flex: none; min-width: 5.6em; margin-right: 0.5em; color: var(--dim); font-weight: 700; white-space: nowrap; }
.cev .ctitle { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; }
.cev .cloc { flex-basis: 100%; padding-left: 0.8em; color: var(--dim); font-size: 0.85em; }
.cev.over { opacity: 0.45; }
.cev.now { background: rgba(92, 179, 255, 0.16); box-shadow: inset 0.25em 0 0 var(--blue); padding-left: 0.3em; border-radius: 0.2em; }
.cev.now .evtime { color: var(--blue); }
.cdayh { font-weight: 800; color: var(--dim); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.35em 0 0.1em; }
.cdayh:first-child { padding-top: 0; }
.cdayh.today { color: var(--text); }

.cgrid { position: absolute; top: 0.3em; right: 0.4em; bottom: 0.3em; left: 0.4em; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-gap: 0.15em; }
.cwd { color: var(--dim); font-size: 0.8em; font-weight: 700; text-align: center; text-transform: uppercase; }
.ccell { min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--panel-2); border-radius: 0.2em; padding: 0.1em 0.2em; border: 1px solid transparent; }
.ccell.other { opacity: 0.4; }
.ccell.lastweek { opacity: 0.5; }
.ccell.today { border-color: var(--blue); background: #16304a; }
.cnum { flex: none; font-size: 0.85em; font-weight: 700; color: var(--dim); }
.ccell.today .cnum { color: var(--text); }
.cchip {
  flex: none; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 0.25em solid var(--blue); padding: 0 0.25em; margin-top: 0.1em; border-radius: 0.15em;
}
.cchip .evtime { color: var(--dim); font-weight: 700; margin-right: 0.3em; }
.cchip.over { opacity: 0.45; }
.cchip.now { background: rgba(92, 179, 255, 0.2); }
.cmore { flex: none; font-size: 0.75em; color: var(--dim); margin-top: 0.1em; }
.cweek .cnum { font-size: 0.9em; margin-bottom: 0.1em; }
.cweek .cchip { white-space: normal; font-size: 0.9em; margin-top: 0.25em; padding: 0.1em 0.3em; background: rgba(255, 255, 255, 0.04); }
.cweek .cchip .evtime { display: block; margin: 0; }
.cweek .cchip .cloc { display: block; color: var(--dim); font-size: 0.85em; }
.cnone { position: absolute; top: 40%; left: 0; right: 0; text-align: center; }

/* ---------- next event ---------- */
.nev { border-left: 0.3em solid var(--blue); padding-left: 0.5em; }
.nev-title { font-size: 1.5em; font-weight: 800; line-height: 1.1; }
.nev-when { margin-top: 0.2em; }
.nev-rel { margin-top: 0.1em; font-weight: 800; color: var(--amber); }
.nev.now .nev-rel { color: var(--green); }
.nev-loc { margin-top: 0.1em; color: var(--dim); font-size: 0.85em; }

/* ---------- touch editing ---------- */
html.touch, html.touch body { cursor: default; }
.touchable { cursor: pointer; }
.thint { flex: none; font-size: 0.8em; font-weight: 400; color: var(--dim); opacity: 0.7; letter-spacing: 0; }
.thint.corner { position: absolute; top: 0.3em; right: 0.4em; font-size: 0.6em; }
.panel.touchable:active, .item.touchable:active { filter: brightness(1.3); }

.tov {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;
  background: var(--bg); display: flex; flex-direction: column;
  font-size: 2.6vmin; cursor: default;
}
.tov-head { flex: none; display: flex; align-items: center; padding: 1em 1.2em; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.tov-title { flex: 1; font-size: 1.5em; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tov-err { flex: none; background: var(--red); color: #fff; font-weight: 700; padding: 0.6em 1.2em; }
.tov-err:empty { display: none; }
.tov-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.6em 1.2em 2em; }
.tsec { max-width: 60em; margin: 0 auto 1.2em; }
.tsec h3 { font-size: 1em; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; margin: 0.8em 0 0.4em; }
.tbtn {
  font: inherit; font-weight: 700; color: var(--text); background: var(--panel-2);
  border: 0.1em solid var(--line); border-radius: 0.35em; min-height: 2.6em; padding: 0.4em 1em;
  cursor: pointer; touch-action: manipulation;
}
.tbtn:active { filter: brightness(1.4); }
.tbtn:disabled { opacity: 0.5; }
.tclose { margin-left: 1em; min-width: 6em; }
.tprimary { background: var(--blue); border-color: var(--blue); color: #08131f; }
.tdanger { background: var(--red); border-color: var(--red); color: #fff; }
.tstatus { display: flex; flex-wrap: wrap; margin: 0 -0.25em 0.4em; }
.tstatus .tbtn { flex: 1 1 8em; margin: 0.25em; min-height: 3.2em; font-size: 1.1em; }
.tloc.on { background: var(--blue); border-color: var(--blue); color: #08131f; }
.tst.on, .tps.on { box-shadow: 0 0 0 0.15em var(--text); }
.tst.st-in_service.on { background: var(--green); border-color: var(--green); color: #08190f; }
.tst.st-limited.on { background: var(--amber); border-color: var(--amber); color: #111; }
.tst.st-oos.on { background: var(--red); border-color: var(--red); color: #fff; }
.tst.st-reserve.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.tps.available.on { background: var(--green); border-color: var(--green); color: #08190f; }
.tps.unavailable.on { background: var(--red); border-color: var(--red); color: #fff; }
.tps.off_duty.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.trow { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0 -0.25em; }
.trow > * { margin: 0.25em; }
.tinput {
  flex: 1 1 12em; min-width: 0; font: inherit; color: var(--text); background: #0d1117;
  border: 0.1em solid var(--line); border-radius: 0.35em; padding: 0.5em 0.7em; min-height: 2.6em;
}
.tinput:focus { outline: none; border-color: var(--blue); }
.ttoggle.on { background: var(--red); border-color: var(--red); color: #fff; }
.tnotes, .tstaff { list-style: none; margin: 0 0 0.4em; padding: 0; }
.tnote { display: flex; align-items: center; flex-wrap: wrap; padding: 0.4em 0; border-bottom: 1px solid var(--line); }
.tnote .tag { margin-right: 0.5em; }
.tnote .ntext { flex: 1 1 10em; margin-right: 0.5em; }
.tnote.is-oos .ntext { color: #ffd2d2; }
.tdel { color: #ffb3b3; }
.task { display: flex; align-items: center; flex-wrap: wrap; }
.task > * { margin-left: 0.5em; }
.tperson { padding: 0.6em 0; border-bottom: 1px solid var(--line); }
.tpname { font-size: 1.15em; margin-bottom: 0.2em; }

/* ---------- tasks ---------- */
.tasks { list-style: none; margin: 0; padding: 0; }
.tk {
  display: flex; align-items: flex-start;
  padding: 0.2em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.tk:last-child { border-bottom: 0; }
.tk-box {
  flex: none; width: 1.05em; height: 1.05em; margin-right: 0.5em; border: 0.12em solid var(--blue);
  border-radius: 0.2em; text-align: center; line-height: 0.85em; font-size: 1.05em; font-weight: 800;
}
.tk.done .tk-box { background: rgba(61, 220, 122, 0.18); border-color: var(--green) !important; color: var(--green); }
.tk.done .tk-box:after { content: '\2713'; }
.tk-main { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; }
.tk-box { margin-top: 0.06em; }
.tk.done .tk-text { text-decoration: line-through; color: var(--dim); }
.tk.done { opacity: 0.6; }
.tk-late {
  display: inline-block; margin-left: 0.5em; font-size: 0.75em; font-weight: 800; white-space: nowrap; vertical-align: 0.1em;
  color: #fff; background: var(--red); padding: 0.05em 0.4em; border-radius: 0.25em;
}
.tk.late .tk-box { border-color: var(--red) !important; }
.tk-list {
  display: flex; align-items: center; font-weight: 800; font-size: 0.9em; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.4em 0 0.1em;
}
.tk-list:first-child { padding-top: 0; }
.tk-sw { flex: none; width: 0.8em; height: 0.8em; border-radius: 0.15em; margin-right: 0.45em; background: var(--blue); }
.tasks.multi .tk-day { padding-left: 1.3em; }
.tk-add { font-size: 1.1em; font-weight: 800; opacity: 1; color: var(--blue); }
.ttask.done .ntext { text-decoration: line-through; color: var(--dim); }
.tk-meta { color: var(--dim); font-size: 0.85em; }
.tstatus .tlist { flex: 0 1 auto; }
.tlist.on { background: var(--blue); border-color: var(--blue); color: #08131f; box-shadow: 0 0 0 0.15em var(--text); }

/* A message near the bottom of the screen, e.g. when a check-off could not be saved. */
.wtoast {
  position: fixed; left: 10%; right: 10%; bottom: 5%; z-index: 20; text-align: center;
  background: var(--red); color: #fff; font-weight: 700; font-size: 2.4vmin;
  padding: 0.7em 1em; border-radius: 0.4em; box-shadow: 0 0.3em 1.5em rgba(0, 0, 0, 0.6);
}

/* ---------- spreadsheets ---------- */
.sh-msg { color: var(--dim); }
.k-sheet.sh-cell .pbody, .k-sheet.sh-count .pbody { padding: 0.5vmin 1vmin; display: flex; align-items: center; justify-content: center; }
.sh-big { text-align: center; max-width: 100%; }
.sh-val { font-weight: 800; line-height: 1.05; }
.sh-val.blank { color: var(--dim); }
.sh-table { width: 100%; border-collapse: collapse; }
.sh-table th {
  text-align: left; color: var(--dim); font-size: 0.78em; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0 0.5em 0.15em 0; border-bottom: 1px solid var(--line); vertical-align: bottom;
}
.sh-table td { padding: 0.14em 0.5em 0.14em 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: top; }
.sh-table td:first-child, .sh-table th:first-child { padding-left: 0.4em; }
.sh-table tr:last-child td { border-bottom: 0; }
.sh-table td.num { text-align: right; }
.sh-table tr.sc-red td { background: rgba(255, 75, 75, 0.14); }
.sh-table tr.sc-red td:first-child { box-shadow: inset 0.25em 0 0 var(--red); }
.sh-table tr.sc-amber td { background: rgba(255, 182, 39, 0.12); }
.sh-table tr.sc-amber td:first-child { box-shadow: inset 0.25em 0 0 var(--amber); }
.sh-table tr.sc-green td:first-child { box-shadow: inset 0.25em 0 0 var(--green); }
.sh-table tr.sc-blue td:first-child { box-shadow: inset 0.25em 0 0 var(--blue); }
.sh-table tr.sc-gray td { color: var(--dim); }
.sh-table tr.sc-gray td:first-child { box-shadow: inset 0.25em 0 0 var(--slate); }
.sh-tight .sh-table th, .sh-tight .sh-table td { word-break: break-word; }
.sh-foot { color: var(--dim); font-size: 0.8em; margin-top: 0.25em; }

/* Cell and count panels take the rule's colour: the board's status palette. */
.panel.sc-red { border-color: var(--red); }
.panel.sc-red .phead, .panel.sc-red .pbody { background: var(--red-bg); }
.panel.sc-red .sh-val { color: #ff8a8a; }
.panel.sc-amber { border-color: var(--amber); }
.panel.sc-amber .phead, .panel.sc-amber .pbody { background: var(--amber-bg); }
.panel.sc-amber .sh-val { color: var(--amber); }
.panel.sc-green { border-color: var(--green); }
.panel.sc-green .phead, .panel.sc-green .pbody { background: #0d3a20; }
.panel.sc-green .sh-val { color: var(--green); }
.panel.sc-blue { border-color: var(--blue); }
.panel.sc-blue .phead, .panel.sc-blue .pbody { background: #16304a; }
.panel.sc-blue .sh-val { color: var(--blue); }
.panel.sc-gray { border-color: var(--slate); }
.panel.sc-gray .phead, .panel.sc-gray .pbody { background: var(--slate-bg); }
.panel.sc-gray .sh-val { color: #b8c4d2; }

/* Touch gestures: swipe a note left to delete it; swipe flyers to turn them. The board never scrolls, so the page takes every gesture. */
#wall { touch-action: none; }
.tnote { touch-action: pan-y; }
[data-note] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.note, .tnote { transition: transform 0.15s; }
.note.swiping, .tnote.swiping { transition: none; background: var(--red-bg); }
.tbig { font-size: 1.3em; font-weight: 700; margin: 0.2em 0 0.6em; }

/* PIN pad, the "changes are recorded as" bar, and rearranging the layout on the screen. */
#wall { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pinov { z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); }
.pinov .pbox { width: 22em; max-width: 92%; background: var(--panel); border: 0.1em solid var(--line); border-radius: 0.5em; padding: 1em; text-align: center; }
.ptitle2 { font-size: 1.3em; font-weight: 800; margin-bottom: 0.3em; }
.pmsg { color: var(--dim); min-height: 2.6em; margin-bottom: 0.4em; }
.pdots { font-size: 1.6em; letter-spacing: 0.15em; min-height: 1.4em; margin-bottom: 0.5em; }
.ppad { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.4em; }
.pkey { min-height: 3em; font-size: 1.4em; font-weight: 700; }
.pcancel { font-size: 1em; }
.pok { grid-column: 1 / span 3; min-height: 2.8em; font-size: 1.2em; }
.actingbar { position: fixed; left: 50%; bottom: 3.5vmin; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 0.8em;
  background: var(--blue); color: #08131f; padding: 0.4em 0.5em 0.4em 1em; border-radius: 2em; font-size: 2vmin; box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.5); }
.actingbar .tbtn { min-height: 2.2em; }
.lyed { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; background: rgba(0, 0, 0, 0.35); }
.lyed-stage { position: absolute; touch-action: none; }
.lyed-box { position: absolute; box-sizing: border-box; border: 0.2em solid #8fb3da; border-radius: 0.3em; background: rgba(40, 70, 105, 0.72);
  color: #fff; padding: 0.3em 0.5em; font-size: 1.8vmin; overflow: hidden; display: flex; flex-direction: column; }
.lyed-box b { font-size: 1.3em; }
.lyed-box.sel { border-color: #fff; background: rgba(60, 110, 160, 0.85); z-index: 2; box-shadow: 0 0 0 0.25em var(--blue); }
.lrh { position: absolute; width: 2.4vmin; height: 2.4vmin; min-width: 18px; min-height: 18px; border-radius: 50%; background: #fff; border: 0.25em solid var(--blue); }
.lrh.nw { left: 0.2em; top: 0.2em; } .lrh.ne { right: 0.2em; top: 0.2em; } .lrh.sw { left: 0.2em; bottom: 0.2em; } .lrh.se { right: 0.2em; bottom: 0.2em; }
.lgrip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 5vmin; height: 5vmin; line-height: 5vmin; text-align: center; font-style: normal;
  font-size: 3vmin; border-radius: 50%; background: #fff; color: #163050; }
.lyed-ghost { position: absolute; box-sizing: border-box; border: 0.25em dashed #fff; background: rgba(255, 255, 255, 0.2); z-index: 3; pointer-events: none; }
.lyed-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 1em; padding: 0.6em 1em; background: var(--panel); border-top: 0.1em solid var(--line); font-size: 2vmin; z-index: 4; }
.lyed-info { flex: 1; color: var(--dim); }
html.lyed-open .actingbar { display: none; }