/* Logged-out sign-in card and the logged-in Today page. Colours are the shared tokens. */
.logged-out-container {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow);
}
.today-in .logo-container, .today-in .logged-out-container { display: none; }
/* Signed in, the board is the page. This also covers the live-sections frame, which has no sidebar of its own,
   so the shell rule that pulls the Tools bar into the column does not run there and the bar sat on the greeting. */
body.today-in { align-items: stretch; justify-content: flex-start; }
/* One token gutter on every side. Beats the shell's left-only pad so the cards never sit on the screen edge. */
body.today-in.home-page { box-sizing: border-box; padding: var(--space-5); }
@media (max-width: 639.98px) {
  body.today-in.home-page { padding: var(--space-3); }
}
body.today-in > .tools-header-container {
  position: relative; top: auto; left: auto; right: auto; width: 100%; max-width: none;
  margin: 0 0 var(--space-3); transform: none; opacity: 1;
}
.today { width: min(1100px, 100%); margin: var(--space-8) auto; text-align: left; font-family: var(--font-ui); }
body.today-in .today { width: 100%; max-width: none; margin: 0; }
@media (max-width: 479.98px), (max-height: 500px) {
  /* The logged-out page pads for an absolute bar. Signed in, that bar is in the column, so the extra pad is a gap. */
  body.today-in.home-page { padding-top: var(--space-4); }
}
.today-hello { margin: 0 0 var(--space-1); font-family: var(--font-display, Montserrat, sans-serif); font-weight: 700; font-size: 28px; line-height: 32px; color: var(--text); }
.today-date, .today-note { font: var(--fs-body); color: var(--text-2); }
.today-ask {
  display: flex; align-items: center; min-height: 48px; padding: 0 16px;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  text-decoration: none; font-weight: 600;
}
.today-ask:hover { border-color: var(--accent); color: var(--text); }
.today-foot { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.today-foot:empty { display: none; }
.today-ask .fas { margin-right: var(--space-2); color: var(--accent-text); }
.today-notes { padding: 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.today-h2 { margin: 0 0 8px; font-size: 16px; color: var(--text); }
.today-notes ul { margin: 0 0 8px; padding-left: 18px; }
.today-notes a { color: var(--accent-text); font-weight: 700; }

/* Desktop (1200px and wider): the signed-in board fills the viewport, no page scroll. Lists scroll inside their cards. */
@media (min-width: 1200px) {
  body.today-in.home-page { display: flex; flex-direction: column; height: 100dvh; max-height: 100dvh; overflow: hidden; box-sizing: border-box; }
  body.today-in .today { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .today-head, .today-stats { flex: 0 0 auto; }
  .today-board { flex: 1 1 auto; min-height: 0; }
  .today-panel { min-height: 0; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
  .today-list, .today-quick-grid { flex: 1 1 auto; min-height: 0; overflow: auto; }
  .today-quick-grid { align-content: start; }
  /* The assistant link and What's new: one strip under the board on desktop, so they never push the board off the screen. */
  .today-foot { flex: 0 0 auto; flex-direction: row; align-items: stretch; }
  .today-foot .today-ask { flex: 0 0 auto; min-height: 44px; }
  .today-notes { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); min-width: 0; }
  .today-notes .today-h2 { margin: 0; font: var(--fs-small); font-weight: 700; white-space: nowrap; }
  .today-notes ul { display: flex; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; overflow: hidden; white-space: nowrap; font: var(--fs-small); }
  .today-notes li { overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
  .today-notes li + li::before { content: " · "; }
  .today-notes > a { white-space: nowrap; font: var(--fs-small); font-weight: 700; }
  /* Retro (season-retro.css): the board sits over the scene instead of keeping 230px clear for it (Kris 01/11/2026). The cards
     keep their solid --surface, so the text never sits on the grid floor; the scene shows round and between them. */
  html.season-retro body.today-in.home-page.season-pad { padding-bottom: var(--space-4, 1rem) !important; }
}

/* Today dashboard (today-dashboard.js): shared tokens and components only (.kw-panel, .stat-card, .kw-plate, .kw-chip, .kw-btn). */
.today-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.today-head-text { min-width: 0; }
.today-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.today .kw-btn { font-family: var(--font-ui); text-decoration: none; }
.today-stamp { font: var(--fs-small); color: var(--text-3); }
.today-toolbar { display: flex; order: 3; flex: 1 1 100%; min-width: 0; }
@media (min-width: 1400px) {
  /* Wide screens: greeting, find box and buttons on one line, so the board gets the height */
  .today-head { flex-wrap: nowrap; }
  .today-toolbar { order: 0; flex: 1 1 auto; max-width: 40rem; margin-left: auto; }
  .today-actions { flex: 0 0 auto; }
}
.today-find { flex: 1 1 auto; width: 100%; max-width: none; min-width: 0; min-height: 44px; padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-family: var(--font-ui); }
.today-find:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 16%, transparent); }
.today-stats { width: 100%; }
/* The shared row hides itself while every tile is hidden. On Today that left a blank gap when the summary
   switches are off, so the row stays and says why the counts are not here. A visible tile hides the note. */
.kw-stat-row.today-stats:not(:has(.stat-card:not([hidden]))) { display: block; }
.today-stats-note { display: none; margin: 0; }
.kw-stat-row.today-stats:not(:has(.stat-card:not([hidden]))) .today-stats-note { display: block; }
.today-stats .stat-card { position: relative; flex: 1 1 0; min-width: 0; padding: var(--space-3); }
.today-stats .stat-card .stat-value, .today-stats .stat-card .stat-label { padding-right: var(--space-6); }
.today-stats .stat-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Ready stays the good colour in every theme, selected or not. Night's accent (gold) must not paint this tile. */
.today-stats .stat-card[data-today-stat="status:Ready To Collect"] { border-color: color-mix(in srgb, var(--ok) 55%, var(--border)); }
.today-stats .stat-card[data-today-stat="status:Ready To Collect"] .stat-value,
.today-stats .stat-card[data-today-stat="status:Ready To Collect"] .today-stat-ico,
.today-stats .stat-card[data-today-stat="status:Ready To Collect"] .today-stat-ico-ok { color: var(--ok); }
.today-stats .stat-card[data-today-stat="status:Ready To Collect"].is-on { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 35%, transparent); }
.today-stat-sub { display: flex; flex-wrap: wrap; column-gap: var(--space-1); row-gap: 0; }
.today-stat-bit { white-space: nowrap; }
.today-stat-ico { position: absolute; top: var(--space-3); right: var(--space-3); color: var(--accent-text); }
.today-stat-sub { font: var(--fs-small); color: var(--text-3); margin-top: var(--space-1); }
.today-stat-sub:empty { display: none; }
.today-stats .stat-value { font: var(--fs-section); }
.today-stats .stat-label { font: var(--fs-small); margin-top: var(--space-1); }
/* One twelve-column grid for both rows: bookings 5, Needs attention 4, Courtesy fleet 3 on top; Parts 5, My jobs 4, Quick
   actions 3 below, so every column line is shared by both rows. Without the fleet (Technician, Workshop) Needs attention
   takes its place; without bookings (Workshop) Needs attention is wide and Quick actions runs down both rows. */
.today-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.today-board > * { min-width: 0; }
.today-bookings { grid-column: 1 / 6; grid-row: 1; }
.today-attn { grid-column: 6 / 10; grid-row: 1; }
.today-fleet { grid-column: 10 / 13; grid-row: 1; }
.today-board:not(:has(.today-fleet)) .today-attn, .today-board:has(.today-fleet[hidden]) .today-attn { grid-column: 6 / 13; }
.today-parts { grid-column: 1 / 6; grid-row: 2; }
.today-mine-panel { grid-column: 6 / 10; grid-row: 2; }
.today-quick { grid-column: 10 / 13; grid-row: 2; }
.today-board:not(:has(.today-bookings)) .today-attn { grid-column: 1 / 10; }
.today-board:not(:has(.today-bookings)) .today-quick { grid-row: 1 / 3; }
.today-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.today-count { font: var(--fs-small); color: var(--text-2); }
.today-count:empty { display: none; }
.today-panel .today-note { margin: 0 0 var(--space-3); }
.today-panel { padding: var(--space-4); }
.today-panel[hidden] { display: none; }
.today-panel .kw-section-title { font: var(--fs-card); }
.today-panel .today-wait, .today-panel .today-off { display: none; }
.today-panel[data-state="wait"] .today-wait { display: block; }
.today-panel[data-state="off"] .today-off { display: block; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.today-panel[data-state="off"] .today-list { display: none; }
.today-list > .kw-panel-text { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-2); }
.today-panel a { color: var(--accent-text); }
.today-panel a.today-row, .today-panel a.kw-btn-secondary { color: var(--text); }
.today-quick-btn .fas { color: var(--accent-text); }
.today-list { display: flex; flex-direction: column; gap: var(--space-1); }
.today-list:empty { display: none; }
.today-row {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2);
  border-radius: var(--radius-md); color: var(--text); text-decoration: none; border: 1px solid transparent;
}
a.today-row:hover, a.today-row:focus-visible { background: var(--hover); border-color: var(--border); }
/* Courtesy fleet rows are buttons (they open the car's details over Home): the row look, no button chrome. */
button.today-row { width: 100%; background: transparent; font: inherit; text-align: left; cursor: pointer; }
button.today-row:hover, button.today-row:focus-visible { background: var(--hover); border-color: var(--border); outline: none; }
/* One courtesy car over Home (home-jobcard.js showCar): read only, shared tokens so every theme follows. */
.today-cc-back { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--overlay); }
.today-cc-card { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); box-shadow: var(--shadow); }
.today-cc-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.today-cc-model { margin: 0; font: var(--fs-body); font-weight: 700; color: var(--text); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.today-cc-state { margin: 0; font: var(--fs-small); font-weight: 700; color: var(--ok); }
.today-cc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.today-cc-actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
/* One booking over Home (today-dashboard.js showBooking): the same card, read only; a short label: value list. */
.today-bk-lines { display: flex; flex-direction: column; gap: var(--space-1); }
.today-bk-line { margin: 0; overflow-wrap: anywhere; }
.today-bk-key { font-weight: 700; color: var(--text-2); }
.today-row .kw-plate { flex: 0 0 auto; }
/* Narrow cards: the text column narrows (the model line ends in "...", the sub line wraps), so a row stays one row. */
.today-row-text { display: flex; flex-direction: column; min-width: 5.5em; flex: 1 1 0; }
.today-list > * { flex: 0 0 auto; }   /* rows keep their height; the list scrolls instead of squashing them on top of each other */
.today-row-main { font: var(--fs-body); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-row-sub { font: var(--fs-small); color: var(--text-2); overflow-wrap: break-word; }
.today-time { flex: 0 0 auto; font: var(--fs-small); font-weight: 700; color: var(--text-2); min-width: 5.5em; }
.today-row .kw-chip { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* the text keeps its minimum first, then the chip shortens rather than running off the card */
.today-chip-bad { --chip: var(--bad); }
button.today-more { display: inline-block; margin-top: var(--space-2); padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--accent-text); font: var(--fs-small); font-weight: 700; text-decoration: none; }
button.today-more:hover, button.today-more:focus-visible { text-decoration: underline; outline: none; }
.today-manage { margin-left: var(--space-3); font: var(--fs-small); font-weight: 700; }
.today-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: var(--space-2); }
.today-quick-btn { justify-content: flex-start; gap: var(--space-2); width: 100%; min-width: 0; white-space: normal; text-align: left; height: auto; min-height: 44px; line-height: 1.2; }

.today-h-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.today-ico { text-align: center; color: var(--accent-text); flex: 0 0 auto; }
.today-who { display: inline; }
.today-who + .today-who::before { content: " · "; }
/* The job card itself is styled by job-card.css + cars-theme.css, as on Cars on Site (the legal banner rule is there too).
   The page header (Tools, bell, gear) sits above z-50 and would cover the job card's close button, so it steps aside while a card is open. */
body:has(#car-modal:not(.hidden)) .tools-header-container { visibility: hidden; }
/* All / Mine carry the shared .kw-btn class; inside the segmented switch they keep the .kw-seg size (no .kw-btn minimum height). */
.today-mine .kw-btn { display: block; min-height: 0; line-height: inherit; }
/* The job card keeps the Cars on Site page font and text colour (cars-redesign.css body), which Home's body does not set. */
.home-jobcard #car-modal { font-family: var(--font-ui, Inter, sans-serif); color: var(--text); }
/* Tablet and small laptops (under the desktop width): two columns of cards and the page scrolls, as six cards cannot share the
   height and stay readable. Each card is capped and scrolls its own list. */
@media (min-width: 641px) and (max-width: 1199.98px) {
  .today-board { grid-template-rows: none; }
  .today-board > *, .today-board:not(:has(.today-fleet)) .today-attn, .today-board:has(.today-fleet[hidden]) .today-attn,
  .today-board:not(:has(.today-bookings)) .today-attn, .today-board:not(:has(.today-bookings)) .today-quick { grid-column: span 6; grid-row: auto; }
  .today-panel { display: flex; flex-direction: column; max-height: 24rem; overflow: hidden; }
  .today-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
}
@media (max-width: 640px) {
  .today { margin: var(--space-4) auto; }
  body.today-in .today { margin: 0; }
  .today-head { align-items: stretch; }
  .today-actions { justify-content: stretch; }
  .today-actions .kw-btn { flex: 1 1 auto; }
  .today-stats .stat-card { flex: 1 1 calc(50% - var(--space-3)); max-width: calc(50% - var(--space-3)); }
  .today-board { grid-template-columns: 1fr; grid-template-rows: none; }
  .today-board > *, .today-board:not(:has(.today-fleet)) .today-attn, .today-board:has(.today-fleet[hidden]) .today-attn,
  .today-board:not(:has(.today-bookings)) .today-attn, .today-board:not(:has(.today-bookings)) .today-quick { grid-column: 1 / -1; grid-row: auto; }
  a.today-row:has(.today-time) { flex-wrap: wrap; row-gap: var(--space-1); }
  .today-time { min-width: 0; flex-basis: 100%; }
}

/* Phones and tablets (Kris 01/11/2026: "fix the home for mobile"). Desktop (from 900 wide) is unchanged.
   Below that the content column (with the sidebar pinned beside it on tablets) is too narrow for two cards side by side,
   so the cards stack in one column like a phone and each list scrolls in its card. */
@media (max-width: 899.98px) {
  .today-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .today-board > *, .today-board:not(:has(.today-fleet)) .today-attn, .today-board:has(.today-fleet[hidden]) .today-attn,
  .today-board:not(:has(.today-bookings)) .today-attn, .today-board:not(:has(.today-bookings)) .today-quick { grid-column: 1 / -1; grid-row: auto; }
  .today-stats .stat-card { flex: 1 1 calc((100% - 2 * var(--space-3)) / 3); max-width: calc((100% - 2 * var(--space-3)) / 3); }
  .today-head-text { flex: 1 1 100%; }
  /* Tap targets: the Today / Tomorrow and All / Mine switches, Show all and Manage get the full touch-target height. */
  .today-mine .kw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  button.today-more, .today-manage { display: inline-flex; align-items: center; min-height: 44px; }
  /* The read-only booking and courtesy car pop-ups never run past the screen: the card scrolls inside. */
  .today-cc-back { padding: var(--space-3); }
  .today-cc-card { max-height: calc(100dvh - 2 * var(--space-3)); overflow-y: auto; overscroll-behavior: contain; }
  .today-cc-actions .kw-btn { min-height: 44px; }
}
@media (max-width: 640px) {
  /* Two tiles a row, the same width each, edge to edge (the old max-width left a gap on the right). */
  .today-stats .stat-card { flex: 1 1 calc((100% - var(--space-3)) / 2); max-width: calc((100% - var(--space-3)) / 2); }
  .today-h-row .today-mine { flex: 1 1 auto; }
  .today-h-row .today-mine .kw-btn { flex: 1 1 0; }
  .today-cc-actions .kw-btn { flex: 1 1 auto; justify-content: center; }
}
/* Tablets narrower than the sidebar breakpoint (the sidebar is off-canvas, shell.css): the theme / Tools / bell / gear buttons share the menu button's row
   instead of taking a second row of their own, and line up with the right edge of the cards. Phones: phone-top.css. */
@media (min-width: 640px) and (max-width: 760px) {
  body.today-in.home-page:has(#kw-sidebar) > .tools-header-container {
    margin: calc(-1 * (var(--shell-open-size) + var(--space-2))) 0 var(--space-3);
    padding: 0 0 0 calc(var(--shell-open-size) + var(--space-2));
    min-height: var(--shell-open-size);
  }
  body.today-in.home-page:has(#kw-sidebar) > .tools-header-container .right-tools { margin-right: 0; }
  body.today-in.home-page:has(#kw-sidebar) > .tools-header-container .right-tools > .page-menu-wrap { margin-right: 0; }
}
/* Phones (Kris 01/11/2026: "the banners fix them for each section"): the greeting is one short line, the date line and the
   moon go (Day / Night / Pink is in the gear's Display), and Refresh (an icon), Add car and Add booking share one row. */
@media (max-width: 639.98px) {
  .today-head { gap: var(--space-2); margin-bottom: var(--space-3); }
  .today-hello { margin: 0; font-size: 1.25rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .today-date, .today-stamp { display: none; }
  .today-actions { flex: 1 1 100%; flex-wrap: nowrap; }
  .today-actions .kw-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-left: var(--space-2); padding-right: var(--space-2); white-space: nowrap; }
  .today-actions [data-today-refresh] { flex: 0 0 auto; width: calc(var(--space-10) + var(--space-1)); padding: 0; justify-content: center; font-size: 0; }
  .today-actions [data-today-refresh] i { font-size: 1rem; }
}