/* Live Twice — Staff Time Off portal.
   Phone first. Somebody books a holiday standing in a kitchen; James approves
   between meetings on a phone. One column, big tap targets, no hover-only
   affordances.

   Monochrome with a single functional accent (LT red, #e90053), per
   Branding/BRAND_SPEC.md: "clean, light, monochrome, bold big type — type does
   the work; colour does not." The accent is used ONLY for the primary action and
   for an OVERDRAWN balance. Never a second accent, never a gradient.

   Deliberately NOT a three-stat accent row: BRAND_SPEC names that as one of the
   two rejected directions. The balance figures are sized, not coloured — the
   number that matters is the biggest one, and the rest are quiet.

   Tokens and the shell are shared verbatim with edit_tracker/site/assets/app.css
   so the two internal tools read as one system. */

:root {
  --bg: #ffffff;
  --surface: #fafafa;
  --surface-2: #f4f4f5;
  --border: #e5e5e8;
  --border-soft: #f0f0f2;
  --text: #17171a;
  --text-2: #5c5c66;
  --text-3: #86868f;

  --accent: #e90053;
  --accent-hover: #c70047;
  --accent-tint: rgba(233, 0, 83, 0.07);

  --ok: #15803d;
  --ok-bg: #f0fdf4;
  --ok-bd: #d3f0dd;

  --warn: #b45309;
  --warn-bg: #fff7ed;
  --warn-bd: #f5dcc0;

  --r-card: 12px;
  --r-ctl: 9px;
  --tap: 44px;            /* iOS minimum comfortable tap target */
  --wrap: 760px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* [hidden] MUST WIN. Any class that sets `display` beats the browser's own
   `[hidden] { display: none }`, so `.banner { display: flex }` would leave a
   banner permanently on screen even with the attribute correctly set. Global,
   so the next element with a display rule does not repeat the bug. */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;               /* 16px min or iOS Safari zooms on focus */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 56px;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The two admin screens carry tables that genuinely need more width. A 760px
   reading column is right for the staff pages — it keeps prose at a comfortable
   measure — but it put the People table's Deactivate button 431px past the right
   edge of its scroll container at 1440px, i.e. a control that existed and could
   not be seen. Measured, not guessed: 1157px of table in a 726px container.
   Mobile still scrolls the table inside .tablewrap, which is the correct
   behaviour there. */
body.wide { --wrap: 1160px; }

/* ---------- shell ------------------------------------------------------ */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar-in {
  max-width: var(--wrap); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; min-height: 56px;
}
/* nowrap + a shrinking spacer: at 390px the brand, the name and the button do
   not all fit, and letting the brand wrap drives it into the sign-out button.
   The suffix and the name are the two things worth losing first. */
.brand { font-weight: 700; letter-spacing: -0.02em; font-size: 17px; white-space: nowrap; }
.brand span { color: var(--text-3); font-weight: 500; }
.spacer { flex: 1; min-width: 0; }
.who { font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 520px) { .brand span { display: none; } }
@media (max-width: 400px) { .who { display: none; } }

/* Nav is a scrolling pill row on a phone, like edit_tracker's creator tabs. */
.nav {
  display: flex; gap: 8px; overflow-x: auto; padding: 14px 0 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  font-weight: 600; font-size: 14px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.nav a[aria-current="page"] { background: var(--text); border-color: var(--text); color: #fff; }
.nav a .n {
  font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--accent-tint); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.nav a[aria-current="page"] .n { background: rgba(255,255,255,0.18); color: #fff; }
.nav a .n.zero { background: var(--surface-2); color: var(--text-3); }

/* ---------- buttons ----------------------------------------------------- */

.btn {
  min-height: var(--tap); padding: 0 18px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--bg); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { border-color: var(--text-3); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 7px; }
.btn-link { border: 0; background: none; padding: 0; min-height: 0; text-decoration: underline; font-weight: 500; }
.btn:disabled, .btn.busy { opacity: 0.45; cursor: not-allowed; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: #126c34; border-color: #126c34; }

/* ---------- the balance ------------------------------------------------- */

/* FIVE FIGURES, ALWAYS. Entitlement / adjustment / taken / pending /
   remaining, plus "available to book". The old bot showed two of them and
   clamped one at zero, which is how somebody could over-book and not know. */
.balance {
  margin: 16px 0; padding: 18px; border: 1px solid var(--border);
  border-radius: var(--r-card); background: var(--surface);
}
.balance-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.balance-head h2 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
}
/* The headline figure. Big type does the work — no colour unless overdrawn. */
.big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.big .v {
  font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.big .l { font-size: 15px; color: var(--text-2); font-weight: 500; }
/* The ONE place the accent appears outside a primary action: an overdrawn
   balance. Not clamped to zero — the contract lets Trendiing deduct over-taken
   holiday from salary, so hiding a negative hides a payroll consequence. */
.big.over .v { color: var(--accent); }

.figs {
  display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.fig { min-width: 84px; }
.fig .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fig .l { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
.fig.muted .v { color: var(--text-3); }

/* "We cannot tell you your balance" is a real state and must look like a
   sentence, never like a number. An unset entitlement rendering as 25 is the
   exact bug this portal replaces. */
.unknown {
  padding: 14px; border: 1px dashed var(--border); border-radius: var(--r-ctl);
  color: var(--text-2); font-size: 14px; background: var(--bg);
}

.caveat {
  margin-top: 12px; padding: 11px 13px; border-radius: var(--r-ctl);
  border: 1px solid var(--warn-bd); background: var(--warn-bg);
  color: var(--warn); font-size: 13.5px;
}
.reconciled { margin-top: 12px; font-size: 13px; color: var(--text-3); }

/* ---------- forms ------------------------------------------------------- */

.box {
  margin: 16px 0 22px; padding: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card);
}
.box h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 4px; }
.box > .hint { margin-bottom: 12px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg);
}
.field textarea { min-height: 72px; resize: vertical; }
.field select { padding-right: 34px; }
.two { display: flex; gap: 10px; flex-wrap: wrap; }
.two > * { flex: 1; min-width: 140px; }
.hint { font-size: 13px; color: var(--text-3); }

/* The live cost of what has been typed, before anything is submitted. This is
   where a bank holiday gets EXPLAINED rather than looking like bad arithmetic. */
.quote {
  margin: 4px 0 12px; padding: 12px 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--bg); font-size: 14px;
}
.quote .n { font-weight: 700; font-size: 17px; }
.quote ul { margin: 8px 0 0 18px; }
.quote li { margin-bottom: 2px; }
.quote.bad { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--warn); }

/* ---------- lists and cards -------------------------------------------- */

.sec-head { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 10px; }
.sec-head h2 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
}

.card {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg); padding: 14px; margin-bottom: 10px;
}
.card.mine { border-left: 3px solid var(--text); }
.card-top { display: flex; gap: 12px; align-items: flex-start; }
.card-body { flex: 1; min-width: 0; }
.dates { font-weight: 600; font-size: 16px; line-height: 1.3; }
.card-note { color: var(--text-2); font-size: 14px; margin-top: 4px; word-break: break-word; }
.card-meta {
  font-size: 13px; color: var(--text-3); margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.ref {
  display: inline-block; padding: 3px 9px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2);
  font: 700 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.06em; color: var(--text);
}
.days-chip {
  flex: 0 0 auto; text-align: center; min-width: 58px; padding: 8px 6px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--surface);
}
.days-chip .v { font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.days-chip .l { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }

.pill {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; background: var(--surface-2); color: var(--text-2);
}
.pill-pending   { background: var(--warn-bg); color: var(--warn); }
.pill-approved  { background: var(--ok-bg); color: var(--ok); }
.pill-rejected  { background: var(--surface-2); color: var(--text-3); }
.pill-cancelled { background: var(--surface-2); color: var(--text-3); }
.pill-who { background: var(--text); color: #fff; }

/* A warning banner ON a card: the over-book arithmetic on James's approval
   screen, spelled out. He is authorising an overdraw, so it has to read as one
   rather than as a coloured badge. */
.warn-row {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-ctl);
  border: 1px solid var(--warn-bd); background: var(--warn-bg);
  color: var(--warn); font-size: 13.5px;
}
.warn-row.hard { border-color: rgba(233,0,83,0.25); background: var(--accent-tint); color: var(--accent); }
.warn-row .arith {
  display: block; margin-top: 4px; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
}
.clash-list { margin: 8px 0 0 0; list-style: none; font-size: 13.5px; color: var(--text-2); }
.clash-list li { padding: 3px 0; }

.empty {
  text-align: center; padding: 40px 20px; color: var(--text-3);
  border: 1px dashed var(--border); border-radius: var(--r-card);
}

.flash {
  margin: 12px 0; padding: 12px 14px; border-radius: var(--r-ctl);
  border: 1px solid var(--border); background: var(--surface); font-size: 14px;
}
.flash.err { border-color: #f5c6d3; background: #fff1f5; color: #a30040; }
.flash.ok { border-color: var(--ok-bd); background: var(--ok-bg); color: var(--ok); }

/* ---------- auth pages -------------------------------------------------- */

.auth { max-width: 400px; margin: 10vh auto 0; padding: 0 20px; }
.auth h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 6px; }
.auth p.sub { color: var(--text-2); margin-bottom: 22px; font-size: 15px; }
.auth label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.auth input {
  width: 100%; min-height: var(--tap); padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); background: var(--bg);
}
/* The code field. Wide tracking so six digits are readable at a glance and a
   transposed pair is obvious before it is submitted. */
.auth input.code {
  font: 700 26px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.28em; text-align: center; min-height: 56px; padding: 0 0 0 0.28em;
}
.auth .btn { width: 100%; margin-top: 20px; }
.auth .alt { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--text-3); }

/* ---------- tables (admin, team, changelog) ---------------------------- */

/* Wide content scrolls inside its own container so the PAGE never scrolls
   sideways. tabindex="0" is required on the wrapper or the scroll region is
   unreachable by keyboard (axe: scrollable-region-focusable). */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
td.over { color: var(--accent); font-weight: 700; }
td.wrap-cell { white-space: normal; min-width: 260px; }
tr.unknown-row td { background: var(--surface); color: var(--text-2); font-style: italic; }

/* ---------- changelog --------------------------------------------------- */

.log-item {
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-ctl);
  margin-bottom: 8px; background: var(--bg); font-size: 14px;
}
/* Days coming back, or somebody acting on another person's row. These are the
   two things worth a second look, which is the whole point of the screen. */
.log-item.notable { border-color: rgba(233,0,83,0.25); background: var(--accent-tint); }
.log-item .when { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.log-item .what { margin-top: 3px; }
.log-item .delta {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 5px;
  font: 700 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2); color: var(--text-2);
}
.log-item .delta.back { background: var(--accent); color: #fff; }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.filters button {
  min-height: 36px; padding: 0 13px; border-radius: 999px; font-size: 14px;
  border: 1px solid var(--border); background: var(--bg); font-weight: 600;
}
.filters button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }

/* ---------- calendar ---------------------------------------------------- */

.month { margin-bottom: 26px; }
.month h3 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 10px;
}
.cal-row {
  display: flex; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-ctl); margin-bottom: 6px;
}
.cal-row.mine { border-left: 3px solid var(--text); background: var(--surface); }
.cal-row .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-row .dt { color: var(--text-2); font-size: 14px; margin-left: auto; white-space: nowrap; }

/* ---------- month calendar --------------------------------------------- */
/* Added 2026-09-02: James asked for a calendar showing who is off. Monday-first,
   because a Sunday-first grid splits the weekend across both ends of the row and
   makes it unreadable as a block. */

.monthbar {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; flex-wrap: wrap;
}
.monthbar h2 {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  min-width: 8.5em;              /* stops the arrows jumping as the name changes */
}

table.cal { border-collapse: separate; border-spacing: 4px; width: 100%; table-layout: fixed; }
table.cal th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3); font-weight: 700; padding: 0 0 2px; text-align: left;
  border: 0; white-space: nowrap;
}
table.cal th.we { color: var(--border); }

/* A fixed min-height keeps the grid a grid: rows that grow to fit their busiest
   cell make the whole month jump about as you page through it. */
.cell {
  vertical-align: top; padding: 5px 6px 6px; min-height: 74px; height: 74px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
  overflow: hidden;
}
.cell.we   { background: var(--surface); border-color: var(--border-soft); }
.cell.out  { opacity: 0.38; }
.cell.today { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
/* The three days the business shuts. Shaded like a weekend on purpose: they are
   the same KIND of day — nobody works, nobody is charged — and treating them as
   a third category invited the "so what about Good Friday" question that James
   asked to be taken off the calendar. The other five bank holidays get no
   treatment at all, because they are ordinary working days. */
.cell.closed { background: var(--surface-2); border-color: var(--border); }

.dnum { font-size: 12px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cell.today .dnum { color: var(--text); }
.holname {
  font-size: 9.5px; line-height: 1.15; color: var(--text-3); font-weight: 600;
  margin: 1px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.chip {
  display: inline-block; margin: 2px 2px 0 0; padding: 1px 5px; border-radius: 4px;
  font: 700 10px/1.5 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0.02em;
  background: var(--surface-2); color: var(--text-2); cursor: default;
}
.chip.appr { background: #e6f4ea; color: #14663a; }
.chip.pend { background: #fdecd7; color: #92400e; }
/* Your own days are the one thing that should survive a glance. */
.chip.you  { background: var(--text); color: #fff; }

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px;
  font-size: 12.5px; color: var(--text-3);
}
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--border); flex: 0 0 auto; }
.sw-you  { background: var(--text); border-color: var(--text); }
.sw-appr { background: #e6f4ea; border-color: #bfe3cc; }
.sw-pend { background: #fdecd7; border-color: #f0d3a8; }
.sw-free { background: var(--surface-2); border-color: var(--border); }

/* Phone. Seven columns at 390px is ~48px each, which holds the date and two
   initial chips and nothing else — so the holiday NAME is dropped here and the
   list underneath carries the full names. The grid answers "is that week busy";
   the list answers "who and when". */
@media (max-width: 700px) {
  table.cal { border-spacing: 3px; }
  .cell { min-height: 60px; height: 60px; padding: 3px 3px 4px; border-radius: 7px; }
  .holname { display: none; }
  .chip { padding: 1px 3px; font-size: 9px; margin: 1px 1px 0 0; }
  .dnum { font-size: 11px; }
  .monthbar h2 { font-size: 17px; min-width: 0; }
}

/* At 390px the list row is name + days pill + a long date ("Tue 22 Sep to Thu 24
   Sep 2026"), and the date squeezed the name to "Leo ..." while wrapping the
   pill onto two lines. Letting the row wrap puts the date on its own line and
   gives the name the full width, which is the half people actually read. */
@media (max-width: 700px) {
  .cal-row { flex-wrap: wrap; row-gap: 4px; }
  .cal-row .nm { white-space: normal; overflow: visible; flex: 1 1 auto; }
  .cal-row .dt { margin-left: 0; flex: 1 0 100%; font-size: 13px; }
}