@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/BarlowCondensed-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/BarlowCondensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/BarlowCondensed-700.woff2") format("woff2"); }

/* Dock board: a wall-screen schedule in the language of a loading dock.
   Each job type has a signal colour (blue goes out, orange comes back, green is collected by the client) shown as a bar on the plate
   and as its icon. A solid plate is confirmed; a dashed outline is not confirmed yet. Today wears safety yellow; Sat and Sun are shaded.
   The top strip holds only what you can press, the bottom strip only information. Dark on purpose: it hangs on a wall all day. */
:root {
  color-scheme: dark;
  --ground: #15191b; --weekend: #101315; --plate: #222a2e; --plate-hi: #2f393e; --rule: #2c3539; --ink: #eef1ef; --muted: #a3adb0; --faint: #6e787c; --dash: #7f898d;
  --out: #5b9df0; --back: #f0883a; --self: #5cc07a; --today: #f5c518; --alert: #ff8a7a;
  --sans: "Barlow", "Segoe UI", system-ui, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: clamp(12px, 0.8vw, 26px); height: 100%; }
body { height: 100%; margin: 0; overflow: hidden; background: var(--ground); color: var(--ink); font-family: var(--sans); line-height: 1.3; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.app { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0.6rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px), 1.2rem); padding-right: max(16px, env(safe-area-inset-right, 0px), 1.2rem); padding-block: 0.65rem 0.5rem; }

/* top strip: only things you can press */
.bar { display: flex; align-items: center; gap: 0.6rem 1.4rem; flex-wrap: wrap; min-width: 0; }
.bar h1 { margin: 0 0.6rem 0 0; font-family: var(--cond); font-size: 1.85rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.seg { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.sb { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--rule); background: transparent; color: var(--muted);
  border-radius: 0.35rem; padding: 0.28rem 0.8rem; font-size: 0.98rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.sb b { font-family: var(--cond); font-size: 1.12rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.sb:hover { border-color: var(--dash); }
.sb[aria-pressed="true"] { background: var(--plate-hi); border-color: var(--ink); color: var(--ink); font-weight: 600; }
.right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.nb { width: 2.4rem; height: 2.4rem; border: 1px solid var(--rule); background: transparent; color: var(--muted); border-radius: 0.35rem; cursor: pointer;
  font-size: 1.45rem; line-height: 1; display: grid; place-items: center; }
.nb:hover, .fs:hover { border-color: var(--dash); color: var(--ink); }
.fs { margin-left: 0.5rem; border: 1px solid var(--rule); background: transparent; color: var(--muted); border-radius: 0.35rem; padding: 0.4rem 0.8rem; font-size: 0.92rem; cursor: pointer; }
.bar .sel { outline: 3px solid var(--ink); outline-offset: 2px; color: var(--ink); }

/* bottom strip: information only */
.info { display: flex; align-items: center; gap: 0.4rem 2rem; flex-wrap: wrap; min-width: 0; color: var(--muted); font-size: 0.98rem; }
.info > span { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.key { display: inline-flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.key > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.key b { color: var(--ink); font-family: var(--cond); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash { width: 1.4rem; height: 0.95rem; border: 1.5px dashed var(--dash); border-left: 0.25rem solid var(--muted); border-radius: 2px; }
.upd.stale { color: var(--alert); }
.clock { margin-left: auto; font-family: var(--cond); font-size: 1.75rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* job-type icons and colours */
.ty-del { --c: var(--out); } .ty-col { --c: var(--back); } .ty-sp { --c: var(--self); }
.ic { display: inline-block; width: var(--s, 1.15em); height: var(--s, 1.15em); flex-shrink: 0; color: var(--c); }
.ic svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* calendar: hairline grid, the plates are the only objects */
.view { min-height: 0; }
.cal { height: 100%; display: grid; min-height: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cal.two { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.cal.week { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
.cal.rest { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.cell { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem 0.5rem 0.5rem;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.cell.wkend { background: var(--weekend); }
.cell.is-today::before { content: ""; position: absolute; left: -1px; right: 0; top: -1px; height: 0.3rem; background: var(--today); }
.dh { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.dn { font-family: var(--cond); font-size: 2.05rem; font-weight: 700; line-height: 0.85; font-variant-numeric: tabular-nums; }
.dw { font-weight: 600; font-size: 1rem; }
.dm { color: var(--muted); font-size: 1rem; }
.tag { font-weight: 700; font-size: 1rem; color: var(--today); }
.is-today .dn { color: var(--today); }
.cnt { margin-left: auto; color: var(--faint); font-size: 0.92rem; white-space: nowrap; }
/* a day that runs out of room sets --k below 1 to shrink its plates; nothing is ever hidden */
.list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.35em; overflow: hidden; font-size: calc(var(--k, 1) * 1rem); }
.list.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.none { color: var(--faint); font-size: 0.92em; }

/* job plates: colour bar on the left; solid = confirmed, dashed outline = not confirmed yet; faded = already done today.
   Sizes from big to small: xl (today panel), lg (one week), regular (two weeks), sm (venue on one line), xs (one line, start time only). */
.card { display: flex; flex-direction: column; gap: 0.08em; width: 100%; min-width: 0; flex-shrink: 0; text-align: left; cursor: pointer;
  background: var(--plate); border: 1.5px solid transparent; border-left: 0.32rem solid var(--c); border-radius: 0.3rem; padding: 0.32em 0.5em 0.38em 0.55em; }
.card.tent { background: transparent; border-color: var(--dash); border-style: dashed; border-left: 0.32rem solid var(--c); }
.card.past { opacity: 0.42; }
.card:hover { background: var(--plate-hi); }
.card.sel { outline: none; box-shadow: inset 0 0 0 3px var(--ink); background: var(--plate-hi); opacity: 1; }
.l1 { display: flex; align-items: center; gap: 0.4em; min-width: 0; }
.t { font-family: var(--cond); font-weight: 600; font-size: 1.22em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ty { font-size: 0.88em; font-weight: 600; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.logo { display: block; height: 1.35rem; width: auto; max-width: 3.4rem; object-fit: contain; background: #ffffff; border-radius: 2px; padding: 1px 2px; flex-shrink: 0; }
.card .logo { height: 1.35em; max-width: 3.4em; }
.l1 .logo { margin-left: auto; }
.v { font-weight: 600; font-size: 1.04em; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.l3 { display: flex; gap: 0.7em; min-width: 0; color: var(--muted); font-size: 0.92em; white-space: nowrap; overflow: hidden; }
.l3 span { overflow: hidden; text-overflow: ellipsis; }
.l3 .co { flex-shrink: 0; color: var(--ink); opacity: 0.85; }
.st { font-size: 0.88em; color: var(--muted); }
.card.lg { padding: 0.5em 0.7em 0.55em 0.75em; gap: 0.18em; }
.card.lg .t { font-size: 1.5em; }
.card.lg .ic { --s: 1.4em; }
.card.lg .v { font-size: 1.28em; }
.card.lg .logo { height: 1.6em; max-width: 4em; }
.card.sm { padding: 0.2em 0.45em 0.24em 0.5em; gap: 0; }
.card.sm .v { -webkit-line-clamp: 1; }
.card.xs { padding: 0.16em 0.45em 0.18em 0.5em; }
.card.xs .t { font-size: 1.1em; }
.card.xs .v { flex: 1; min-width: 0; display: block; white-space: nowrap; overflow-wrap: normal; text-overflow: ellipsis; }
.card.xs .logo { height: 1.15em; }

/* today first */
.split { height: 100%; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 1.2rem; min-height: 0; }
.todayp { min-height: 0; display: flex; flex-direction: column; gap: 0.7rem; border-top: 0.3rem solid var(--today); padding-top: 0.7rem; }
.todayp h2 { margin: 0; display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--cond); font-size: 2.8rem; font-weight: 700; line-height: 0.95; color: var(--today); }
.todayp h2 .dm { font-family: var(--sans); font-size: 1.2rem; font-weight: 500; }
.todayp h2 .cnt { font-family: var(--sans); font-size: 1.05rem; font-weight: 400; }
.todayp .list { gap: 0.55em; }
.card.xl { padding: 0.75em 1em 0.85em 1em; gap: 0.25em; border-left-width: 0.45rem; }
.card.xl .t { font-size: 2em; }
.card.xl .ic { --s: 1.75em; }
.card.xl .ty { font-size: 1.05em; }
.card.xl .v { font-size: 1.6em; }
.card.xl .l3 { font-size: 1.08em; }
.card.xl .logo { height: 2em; max-width: 5em; }

/* job sheet: the top edge carries the job's colour */
dialog { --c: var(--rule); border: 0; border-top: 0.45rem solid var(--c); border-radius: 0.5rem; background: var(--plate); color: var(--ink); padding: 0;
  width: min(54rem, calc(100vw - 32px)); max-height: min(88vh, 64rem); box-shadow: 0 24px 80px rgb(0 0 0 / 0.6); }
dialog::backdrop { background: rgb(5 8 10 / 0.72); }
.sh { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem 1.7rem 1.6rem; overflow: auto; max-height: min(88vh, 64rem); }
.sh-nav { display: flex; align-items: center; gap: 0.6rem; }
.pos { color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.x { margin-left: auto; border: 1px solid var(--rule); background: transparent; border-radius: 0.35rem; padding: 0.4rem 1.1rem; cursor: pointer; font-size: 1rem; }
.when { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.when .ic { --s: 1.9rem; }
.when .t { font-size: 2.3rem; }
.when .ty { font-size: 1.2rem; }
.when .d { color: var(--muted); font-size: 1.2rem; }
.sh h2 { margin: 0; font-family: var(--cond); font-size: 3rem; font-weight: 700; line-height: 1; text-wrap: balance; overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0; font-size: 1.12rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.ref { color: var(--ink); text-decoration: underline; text-decoration-color: var(--dash); text-underline-offset: 0.2em; }
.sh h3 { margin: 0.4rem 0 0; display: flex; align-items: baseline; gap: 0.7rem; font-family: var(--cond); font-size: 1.5rem; font-weight: 600; }
.sh h3 span { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--muted); }
.items { list-style: none; margin: 0; padding: 0; columns: 2 18rem; column-gap: 2.4rem; font-size: 1.08rem; }
.items li { display: grid; grid-template-columns: 3.6em 1fr; gap: 0.8rem; padding: 0.32rem 0; break-inside: avoid; border-bottom: 1px solid var(--rule); }
.items .q { font-family: var(--cond); font-weight: 600; font-size: 1.2rem; line-height: 1.15; text-align: right; font-variant-numeric: tabular-nums; }
.items .n { min-width: 0; overflow-wrap: anywhere; }
.hint { color: var(--faint); font-size: 0.98rem; }

@media (prefers-reduced-motion: no-preference) { .card, .sb { transition: background-color 0.15s, border-color 0.15s; } }
@media (max-width: 900px) {
  html { font-size: 15px; }
  body { overflow: auto; height: auto; }
  .app { height: auto; padding-bottom: 2rem; }
  .cal, .split { display: flex; flex-direction: column; height: auto; grid-template-rows: none !important; }
  .split { gap: 1.2rem; }
  .list { overflow: visible; }
  .right { margin-left: 0; }
  .clock { margin-left: 0; }
}

/* Authentication and explicit loading/failure states use the dock-board palette. */
.gate { min-height: 100%; display: grid; place-items: center; padding: 2rem; }
.sign-panel { width: min(36rem, 100%); border-top: 0.3rem solid var(--today); background: var(--plate); padding: 2.4rem; border-radius: 0.3rem; }
.sign-panel h1 { font: 700 3rem/1.05 var(--cond); margin: 0 0 1.5rem; }
.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; }
#sign-in { display: grid; gap: 0.7rem; }
#sign-in input { width: 100%; background: var(--ground); border: 1px solid var(--dash); border-radius: 0.3rem; padding: 0.8rem; color: var(--ink); font: inherit; }
#sign-in label { margin-top: 0.5rem; }
.submit { justify-content: center; background: var(--plate-hi); color: var(--ink); padding: 0.7rem; margin-top: 1rem; }
button:disabled { opacity: 0.6; cursor: wait; }
.gate-message { min-height: 1.4em; }
.alert, .notice, .capacity-error { color: var(--alert); }
.gate.tv-signed-out .gate-message { font: 700 2.5rem/1.1 var(--cond); color: var(--alert); }
.notice:empty { display: none; }
.view { position: relative; }
.board-state { height: 100%; display: grid; place-content: center; text-align: center; gap: 0.8rem; color: var(--muted); }
.board-state h2 { font: 600 2.4rem/1.1 var(--cond); margin: 0; color: var(--ink); }
.capacity-error { position: absolute; inset: 0; z-index: 1; background: var(--ground); display: grid; place-content: center; text-align: center; padding: 2rem; font-size: 1.5rem; }
.capacity-error strong { display: block; font: 700 3rem/1.1 var(--cond); }
.logo-name { font-size: 0.85em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.l1 .logo-name { margin-left: auto; max-width: 5em; }
/* Dynamic row weights and size-ladder scales are set through this sheet's CSSOM,
   never through inline style attributes (CSP style-src 'self'). */