/*
 * Driven's look, on top of Pico's classless styles. Pico does the element basics; this file sets the
 * Driven tokens (purple accent, black and greys, Barlow Condensed headings over Inter) and the parts
 * Pico doesn't have: the app chrome, badges, cards, stars and favorites. Light only: every page sets
 * data-theme="light" on <html>.
 */

/*
 * Barlow Condensed for headings, Inter for everything else, served by Driven itself so no page calls Google.
 * Latin subsets. System fonts until they load. Under /css/ because that path is public: the login page needs them.
 */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-400.woff2") format("woff2"); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-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"); }

:root[data-theme=light] {
  --d-accent: #6D28D9;
  --d-accent-hover: #4C1D95;
  --d-tint: #F1EBFF;
  --d-tint-hover: #E4D8FF;
  --d-black: #000000;
  --d-white: #FFFFFF;
  --d-grey-100: #F3F3F3;
  --d-grey-200: #E2E2E2;
  --d-line: #EAEAEA;
  --d-grey-600: #626262;
  --d-star-off: #8A8A8A;
  --d-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --d-radius-card: 12px;
  --d-radius-notice: 8px;

  --pico-font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-border-radius: 6px;
  --pico-background-color: var(--d-white);
  --pico-color: var(--d-black);
  --pico-muted-color: var(--d-grey-600);
  --pico-muted-border-color: var(--d-line);
  --pico-h1-color: var(--d-black);
  --pico-h2-color: var(--d-black);
  --pico-h3-color: var(--d-black);
  --pico-h4-color: var(--d-black);
  --pico-h5-color: var(--d-black);
  --pico-h6-color: var(--d-grey-600);
  --pico-text-selection-color: rgba(109, 40, 217, 0.2);

  --pico-primary: var(--d-accent);
  --pico-primary-background: var(--d-accent);
  --pico-primary-border: var(--d-accent);
  --pico-primary-underline: rgba(109, 40, 217, 0.45);
  --pico-primary-hover: var(--d-accent-hover);
  --pico-primary-hover-background: #5B21B6;
  --pico-primary-hover-border: #5B21B6;
  --pico-primary-hover-underline: var(--d-accent-hover);
  --pico-primary-focus: rgba(0, 0, 0, 0.35);
  --pico-primary-inverse: var(--d-white);

  --pico-secondary: var(--d-accent);
  --pico-secondary-background: var(--d-tint);
  --pico-secondary-border: var(--d-tint);
  --pico-secondary-underline: rgba(109, 40, 217, 0.45);
  --pico-secondary-hover: var(--d-accent-hover);
  --pico-secondary-hover-background: var(--d-tint-hover);
  --pico-secondary-hover-border: var(--d-tint-hover);
  --pico-secondary-focus: rgba(0, 0, 0, 0.35);
  --pico-secondary-inverse: var(--d-accent);

  --pico-card-background-color: var(--d-grey-100);
  --pico-card-border-color: transparent;
  --pico-card-box-shadow: none;
  --pico-card-sectioning-background-color: var(--d-grey-100);

  --pico-form-element-background-color: var(--d-white);
  --pico-form-element-active-background-color: var(--d-white);
  --pico-form-element-border-color: var(--d-grey-600);
  --pico-form-element-active-border-color: var(--d-black);
  --pico-form-element-focus-color: rgba(109, 40, 217, 0.35);
  --pico-form-element-color: var(--d-black);
  --pico-form-element-placeholder-color: var(--d-grey-600);
  --pico-form-element-selected-background-color: var(--d-tint);
  --pico-form-element-invalid-border-color: var(--d-black);
  --pico-form-element-invalid-active-border-color: var(--d-black);
  --pico-form-element-invalid-focus-color: rgba(0, 0, 0, 0.3);
  --pico-form-label-font-weight: 600;

  --pico-table-border-color: var(--d-line);
  --pico-del-color: var(--d-black);
  --pico-ins-color: var(--d-black);
  --pico-code-background-color: var(--d-grey-100);
  --pico-code-color: var(--d-black);
  --pico-mark-background-color: var(--d-tint);
  --pico-mark-color: var(--d-black);
  --pico-accordion-active-summary-color: var(--d-accent);
  --pico-accordion-open-summary-color: var(--d-black);
  --pico-switch-checked-background-color: var(--d-accent);
}

/* ---- Type ---- */
h1, h2, h3, h4 { font-family: var(--d-font-display); font-weight: 700; letter-spacing: 0; }
h1 { font-size: 2.25rem; line-height: 1.1; }
h2 { font-size: 1.75rem; line-height: 1.15; margin-top: 2rem; }
h3 { font-size: 1.375rem; line-height: 1.2; }
hgroup { margin-bottom: 1.5rem; }
hgroup > h1 { margin-bottom: 0.75rem; }
hgroup > p { color: var(--d-grey-600); }
small { color: var(--d-grey-600); }
body > main { padding-bottom: 4rem; }
/* A back link above the title: Pico's heading margin would leave a gap under it. */
body > main > p:first-child + h1 { margin-top: 0; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--d-black); outline-offset: 3px; }

/* ---- Buttons: 48 px, radius 6. Primary purple, secondary tint, neutral black. ---- */
button, [type=submit], [type=button], [role=button] {
  min-height: 48px; padding: 0.7rem 1.5rem; font-weight: 600; font-size: 0.9375rem; line-height: 1.25rem;
  box-shadow: none;
}
button:focus-visible, [role=button]:focus-visible { box-shadow: none; outline: 3px solid var(--d-black); outline-offset: 3px; }
.secondary, button.secondary, [role=button].secondary, details summary[role=button].secondary {
  background: var(--d-tint); border-color: var(--d-tint); color: var(--d-accent);
}
.secondary:hover, button.secondary:hover, [role=button].secondary:hover {
  background: var(--d-tint-hover); border-color: var(--d-tint-hover); color: var(--d-accent-hover);
}
button.neutral, [role=button].neutral { background: var(--d-black); border-color: var(--d-black); color: var(--d-white); }
button:disabled { background: var(--d-grey-200); border-color: var(--d-grey-200); color: var(--d-grey-600); opacity: 1; }
form.inline { display: inline; margin: 0; }
details > summary[role=button] { width: auto; display: inline-flex; align-items: center; justify-content: center; }
details > summary[role=button]::after { display: none; }
button.link {
  min-height: 0; background: none; border: none; padding: 0; margin: 0; width: auto;
  color: var(--d-accent); font-weight: 600; text-decoration: underline;
}

/* ---- Fields ---- */
input:not([type=checkbox], [type=radio], [type=range], [type=file]), select, textarea { font-size: 1rem; }
input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=submit], [type=button]), select { min-height: 48px; }
label > small, fieldset > small { display: block; font-weight: 400; }
fieldset > small, form > small { margin-bottom: var(--pico-spacing); }
[aria-invalid=true] { border-width: 2px; }

/* ---- Status badges: always as text. Solid purple = you act, tint = good to go,
        outline = waiting on someone else, black = needs attention, grey = neutral or done. ---- */
.badge {
  display: inline-block; vertical-align: middle; padding: 2px 10px; border-radius: 999px;
  font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap;
  background: var(--d-grey-200); color: var(--d-black);
}
.badge.ok { background: var(--d-tint); color: var(--d-accent); }
.badge.wait { background: var(--d-white); color: var(--d-black); box-shadow: inset 0 0 0 1px var(--d-grey-600); }
.badge.bad { background: var(--d-black); color: var(--d-white); }
.badge.act { background: var(--d-accent); color: var(--d-white); }

/* ---- Notices ---- */
.notice, .warning, .error {
  padding: 0.75rem 1rem; border: 0; border-radius: var(--d-radius-notice);
  font-size: 0.875rem; line-height: 1.25rem;
}
.notice { background: var(--d-tint); color: var(--d-black); }
.warning, .error { background: var(--d-black); color: var(--d-white); }
.warning a, .error a { color: var(--d-white); font-weight: 600; }
/* A warning box holding paragraphs and a form, like the block on the admin driver page: Pico colours <p> itself. */
div.warning p, div.warning small, div.warning label { color: var(--d-white); }
article.notice { padding: 1rem; }
article.notice ul { margin-bottom: 0.5rem; }
small.warning { display: block; margin-top: 0.25rem; padding: 0.25rem 0.5rem; }
.error-text { color: var(--d-black); font-weight: 600; }

/* ---- Cards ---- */
article {
  border-radius: var(--d-radius-card); padding: 1rem; box-shadow: none;
  background: var(--d-grey-100); margin-bottom: 1rem;
}
article > :last-child, article > div:last-child > :last-child { margin-bottom: 0; }
article > header, article > footer {
  margin: 0 0 0.5rem; padding: 0; background: none; border: 0; border-radius: 0;
}

/* ---- Tables ---- */
.table-scroll { overflow-x: auto; }
table { font-size: 0.9375rem; line-height: 1.25rem; }
th, td { padding: 1rem 0.75rem; background: none; }
thead th, thead td {
  padding-top: 0.75rem; padding-bottom: 0.75rem;
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; color: var(--d-grey-600); border-bottom: 1px solid var(--d-black);
}
td small { display: block; color: var(--d-grey-600); font-size: 0.8125rem; }
td code { margin-right: 0.5rem; }
.nowrap { white-space: nowrap; }
table.checks th { width: 11rem; font-weight: 400; color: var(--d-grey-600); text-transform: none; letter-spacing: 0; font-size: inherit; }

/* ---- The app chrome ---- */
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; height: 24px; width: auto; }
.account { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; }
.account-name { color: var(--d-grey-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
.header-notices > p { margin: 0.75rem 0 0; }

/* Top bar: signed out, and drivers. */
body > header.topbar { padding-top: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--d-line); margin-bottom: 0; }
body > header.topbar .topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
@media (max-width: 575px) {
  body > header.topbar { padding-left: 1.25rem; padding-right: 1.25rem; }
  body > header.topbar .account-name { display: none; }
}

/* Drivers: a tab bar fixed to the bottom on phones, a row of tabs in the top bar from tablets up. */
.tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch; }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0;
  color: var(--d-grey-600); font-size: 0.75rem; line-height: 1rem; text-decoration: none;
}
.tabbar a[aria-current=page] { color: var(--d-accent); font-weight: 600; }
.tabbar svg { width: 24px; height: 24px; }
@media (max-width: 767px) {
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--d-white);
    border-top: 1px solid var(--d-line); padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  }
  body:has(.tabbar) { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) {
  .tabbar { display: flex; justify-content: flex-start; gap: 0.25rem; margin-top: 0.75rem; }
  .tabbar a { flex-direction: row; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.9375rem; color: var(--d-black); }
  .tabbar a[aria-current=page] { background: var(--d-tint); }
  .tabbar svg { width: 20px; height: 20px; }
}

/* Restaurants and admin: a sidebar from laptops up, a bar with scrolling links below that. */
body > header.sidebar { background: var(--d-grey-100); max-width: none; margin: 0; padding: 1rem 1.25rem; }
body > header.sidebar.admin { background: var(--d-black); color: var(--d-white); }
body > header.sidebar.admin .brand { background: var(--d-white); border-radius: 8px; padding: 8px 12px; }
body > header.sidebar.admin .brand img { height: 20px; }
.side-nav { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; }
.side-nav .nav-label {
  font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--d-grey-600); padding: 0 12px 8px;
}
.admin .side-nav .nav-label { color: #BDBDBD; }
.side-nav a {
  min-height: 44px; padding: 0 12px; border-radius: 6px; display: flex; align-items: center;
  color: var(--d-black); text-decoration: none; white-space: nowrap;
}
.side-nav a:hover { background: rgba(0, 0, 0, 0.05); }
.side-nav a[aria-current=page] { background: var(--d-tint); color: var(--d-accent); font-weight: 600; }
.admin .side-nav a { color: var(--d-white); }
.admin .side-nav a:hover { background: rgba(255, 255, 255, 0.12); }
.admin .side-nav a[aria-current=page] { background: var(--d-accent); color: var(--d-white); }
.admin .account-name { color: #BDBDBD; }
.admin button.link { color: var(--d-white); }
.sidebar .header-notices { display: none; }

@media (max-width: 1023px) {
  body > header.sidebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
  body > header.sidebar .side-nav { flex-direction: row; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; order: 3; }
  body > header.sidebar .side-nav .nav-label { display: none; }
  body > header.sidebar .account { margin-left: auto; }
}
@media (min-width: 1024px) {
  body:has(> header.sidebar) {
    display: grid; grid-template-columns: 16rem minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh;
  }
  /* The dev bar sits above main, so the sidebar keeps the full height. */
  body:has(> header.sidebar) > .devbar { grid-column: 2; grid-row: 1; }
  body > header.sidebar {
    grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
    padding: 2rem 1.25rem; display: flex; flex-direction: column; gap: 2rem;
  }
  body > header.sidebar .brand img { height: 28px; }
  body > header.sidebar .account { margin-top: auto; flex-wrap: wrap; }
  body:has(> header.sidebar) > main {
    grid-column: 2; grid-row: 2; max-width: 1200px; width: 100%; margin: 0;
    padding: 2.5rem clamp(1.25rem, 4vw, 3rem);
  }
  body:has(> header.sidebar) > main h1 { font-size: 4rem; line-height: 1.03; }
  body:has(> header.sidebar) > main h2 { font-size: 2.5rem; line-height: 1.1; }
  /* The drawer keeps the driver's drawer sizes. */
  body:has(> header.sidebar) > main dialog.drawer h1 { font-size: 2rem; line-height: 1.1; }
  body:has(> header.sidebar) > main dialog.drawer h2 { font-size: 1.75rem; line-height: 1.15; }
}

/* A page title with its main action beside it. */
.page-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.page-header hgroup { margin: 0; }
.page-header [role=button] { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }

/* Shortcuts with a count, as tinted pills. */
.quick-links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; margin-bottom: 1.5rem; }
.quick-links a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 1rem; border-radius: 999px;
  background: var(--d-tint); color: var(--d-accent); font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.quick-links a:hover { background: var(--d-tint-hover); }

/* ---- Numbers ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.tile { background: var(--d-grey-100); border-radius: var(--d-radius-card); padding: 1rem 1.25rem; }
.tile > span { font-size: 0.875rem; color: var(--d-grey-600); }
.tile > strong { display: block; font-family: var(--d-font-display); font-size: 2.5rem; line-height: 1.1; }
.tile.act { background: var(--d-accent); color: var(--d-white); }
.tile.act > span { color: var(--d-white); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.stats article { padding: 1.25rem; margin: 0; }
.stats h3 { font-size: 1.75rem; margin-bottom: 0.75rem; }
.stats h3 a { color: var(--d-black); text-decoration: none; }
.stats ul { margin: 0; padding: 0; }
.stats li { list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.stat { font-family: var(--d-font-display); font-size: 2.5rem; line-height: 1.1; font-weight: 700; margin: 0; }

/* ---- Pills ---- */
/* Rows that scroll sideways: no scrollbar, the right edge fades to show there's more. */
.filter-bar, body > header.sidebar .side-nav { padding-right: 2rem; mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
@media (min-width: 1024px) { body > header.sidebar .side-nav { padding-right: 0; mask-image: none; } }
.filters > a {
  flex: none; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
  border-radius: 999px; background: var(--d-grey-100); color: var(--d-black);
  font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.filters > a[aria-current=page], .filters > a.current { background: var(--d-black); color: var(--d-white); }
.filters { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; margin-bottom: 1rem; align-items: center; }
a.current { font-weight: 600; text-decoration: none; }

/* ---- Shift cards ---- */
.shift-card > header strong:first-child { font-family: var(--d-font-display); font-size: 1.375rem; line-height: 1.6rem; margin-right: 0.25rem; }
.shift-card > header .badge { margin-left: 0.25rem; }
.shift-card > header .score { font-weight: 600; color: var(--d-black); margin-left: 0.25rem; }
.shift-card p { margin-bottom: 0.5rem; }
.pay { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.pay .amount { font-size: 1.5rem; line-height: 2rem; font-weight: 600; color: var(--d-accent); }
.pay > span:not(.amount) { font-size: 0.875rem; color: var(--d-grey-600); }
.shift-card details.apply { margin-top: 0.5rem; }
.shift-card form.inline button { width: auto; }
.shift-card details.cancel summary[role=button] { background: none; border: 0; color: var(--d-black); text-decoration: underline; padding-left: 0; padding-right: 0; }

/* ---- Drivers: applicant and favorite cards ---- */
.driver-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.driver-card { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0; }
.driver-card > div { flex: 1; min-width: 0; }
.driver-card .name { font-family: var(--d-font-display); font-size: 1.375rem; line-height: 1.6rem; }
.driver-card p { margin: 0.5rem 0 0; }
.driver-card .note { font-style: italic; }
.driver-card a { white-space: nowrap; }
.driver-card form { margin: 0.5rem 0 0; }
.driver-card button { width: auto; }
.driver-card.favorite { background: var(--d-white); box-shadow: inset 0 0 0 2px var(--d-accent); }
.driver-card.inactive { background: var(--d-white); box-shadow: inset 0 0 0 1px var(--d-grey-600); color: var(--d-grey-600); }
.driver-card.inactive .name { color: var(--d-grey-600); }
.driver-card.inactive .avatar.initials { background: var(--d-grey-100); color: var(--d-grey-600); }
.avatar { width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; }
.avatar.small { width: 3rem; height: 3rem; flex: none; }
.avatar.initials {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--d-tint); color: var(--d-accent); font-weight: 600; font-size: 0.875rem;
}
.driver-card:not(.favorite):not(.inactive) .avatar.initials { background: var(--d-white); }
.profile { display: flex; gap: 1rem; align-items: center; }
.aside-note { background: var(--d-grey-100); border-radius: var(--d-radius-notice); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.25rem; max-width: 45rem; }

/* ---- Ratings: five radios shown as stars, highest first in the markup so `~` reaches the lower ones. ---- */
fieldset.stars { margin: 0 0 0.5rem; padding: 0; border: 0; }
.star-inputs { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.star-inputs input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.star-inputs label {
  margin: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 2rem; line-height: 1; color: var(--d-star-off); cursor: pointer; border-radius: 6px;
}
/* Pico spaces radio labels with margin-inline-end: the gap does that here. */
.star-inputs [type=radio] ~ label { margin: 0; }
.star-inputs input:checked ~ label,
.star-inputs label:hover, .star-inputs label:hover ~ label { color: var(--d-accent); }
.star-inputs input:focus-visible + label { outline: 3px solid var(--d-black); outline-offset: -2px; }
fieldset.stars[aria-invalid="true"] .star-inputs label { color: var(--d-black); }
fieldset.stars small { display: block; color: var(--d-black); font-weight: 600; }
.stars-shown { color: var(--d-accent); letter-spacing: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rating details { margin: 0.25rem 0 0; }
.rating form button { width: auto; }

/* Favorite drivers: the restaurant's star toggle. */
.star { flex: none; }
.star button.star-toggle {
  width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 50%;
  border: 1px solid var(--d-grey-600); background: var(--d-white); color: var(--d-black);
  font-size: 1.375rem; line-height: 1;
}
.star button.star-toggle[aria-pressed="true"] { background: var(--d-tint); border-color: var(--d-tint); color: var(--d-accent); }
.driver-card.inactive .star button.star-toggle { background: var(--d-white); border-color: var(--d-grey-600); color: var(--d-grey-600); }
.star .error-text { display: block; }
/* On the shift page the star comes first in the card's text: keep it on the right. */
.driver-card > div > .star:first-child { float: right; margin-left: 0.5rem; }

/* ---- Hours ---- */
form.hours { margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--d-line); }
form.hours .estimate { display: block; margin-bottom: 0.5rem; }
form.hours button { width: auto; }
ol.thread { margin: 0.5rem 0; padding: 0.75rem; background: var(--d-white); border-radius: var(--d-radius-notice); }
.drawer-content ol.thread { background: var(--d-grey-100); }
.driver-card ol.thread { background: var(--d-white); }
ol.thread li { list-style: none; margin-bottom: 0.25rem; font-size: 0.875rem; }
ol.thread li:last-child { margin-bottom: 0; }
ol.thread li small { display: block; }
.hours-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; }
.hours-actions > small { flex: 1 1 100%; }
.hours-actions > form.inline button, .hours-actions summary[role=button] { width: auto; margin: 0; }
.hours-actions details { margin: 0; }
.hours-actions details[open] { flex: 1 1 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* The driver's history, per week */
.history-week h3 { margin: 1rem 0 0.5rem; }
.history-week h3 small { font-family: var(--pico-font-family); font-size: 0.875rem; font-weight: 400; }
article.history p { margin-bottom: 0.25rem; }
article.history .earned strong { font-weight: 600; }

/* ---- Sign-in ---- */
body > main.narrow { max-width: 28rem; }
/* A form page in the app: the page lines up with the header, its content keeps a reading width. */
body > main.column > * { max-width: 36rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.5rem; }
dt { font-weight: 600; }
dd { margin: 0; }
.auth .mark { display: block; width: 72px; height: auto; margin: 1rem 0 2.5rem; }
.auth .kicker {
  margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--d-accent);
}
.auth h1.headline { font-size: 2.75rem; line-height: 1; text-transform: uppercase; margin-bottom: 0.75rem; }
.auth .signup { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--d-line); }
.auth .signup .actions > * { flex: 1; text-align: center; }

/* ---- Odds and ends, kept from before ---- */
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; }
.user-grid button { width: 100%; text-align: left; }
.user-grid button small { color: inherit; opacity: 0.85; }

.devbar {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center;
  padding: 0.5rem 1rem; font-size: 0.85rem; background: #fff3cd; color: #5c4400;
}
.devbar button, .devbar form { width: auto; min-height: 0; margin: 0; padding: 0.2rem 0.6rem; font-size: 0.85rem; }
.devbar form { display: inline; padding: 0; }
.devbar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.address-checks { list-style: none; padding: 0; }
.address-checks li { list-style: none; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.actions form { margin: 0; }
.actions button { width: auto; margin: 0; }
.actions small { display: block; max-width: 20rem; color: var(--d-grey-600); }
.actions form.deactivate { display: flex; gap: 0.5rem; }
.actions form.deactivate input { margin: 0; min-width: 16rem; }
/* The admin's list of a driver's strikes: excused and used-up ones greyed. */
.strikes li.used-up, .strikes li.used-up a { color: var(--d-grey-600); }
.strikes details.excuse { display: inline-block; margin: 0 0 0 0.5rem; }
.strikes details.excuse form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.strikes details.excuse input, .strikes details.excuse button { width: auto; margin: 0; }
form.unblock { display: flex; gap: 0.5rem; margin: 0; }
form.unblock input { margin: 0; min-width: 16rem; }
form.unblock button { width: auto; margin: 0; }

.party-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 1.5rem; }
.grid-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 1rem; align-items: end; }
.grid-filters label.checkbox { margin-bottom: var(--pico-spacing); }
.filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1.5rem; }
.filter-form > .grid-filters { flex: 1 1 100%; }
.filter-form > button { width: auto; margin: 0; }
.admin-assignment .ledger-lines { font-size: 0.9em; }
.timeline { padding-left: 1.25rem; }
.timeline li { margin-bottom: 0.25rem; }
.email-preview { width: 100%; height: 36rem; border: 1px solid var(--d-line); border-radius: 6px; background: #f4f1ec; }

/* ---- Shift form ---- */
.checks { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-bottom: var(--pico-spacing); }
label.checkbox { display: flex; align-items: center; gap: 0.5rem; align-self: end; min-height: 48px; margin-bottom: var(--pico-spacing); }

/* ---- The restaurant's planner ---- */
:root[data-theme=light] {
  --d-teal: #0F766E;
  --d-mint: #E3F5EE;
  --d-green: #15803D;
  --d-green-tint: #DCFCE7;
  --d-green-ink: #14532D;
}
@media (min-width: 1024px) {
  body:has(> header.sidebar) > main.wide, body:has(> header.topbar) > main.wide { max-width: none; }
  /* Pico's main has no side padding from 576 px: a wide page and its top bar share this gutter. */
  body:has(> header.topbar) > main.wide, body:has(> main.wide) > header.topbar { max-width: none; padding-left: 2.5rem; padding-right: 2.5rem; }
  .planner-header h1 { font-size: 2.75rem; }
}
.planner-header { align-items: center; }
.planner-nav { display: flex; gap: 0.5rem; margin-left: auto; }
.planner-nav [role=button] { padding-left: 1rem; padding-right: 1rem; }
.planner-nav [role=button].square { padding: 0; width: 48px; justify-content: center; }
.planner-nav [aria-current] { background: var(--d-black); border-color: var(--d-black); color: var(--d-white); }
.planner-jump { margin: 0; }
.planner-jump input[type=date] { width: auto; height: 48px; margin: 0; }
.page-header [role=button] .icon, .planner-add .icon { width: 18px; height: 18px; }

.todo { background: var(--d-grey-100); border-radius: var(--d-radius-card); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.todo h2 { font-size: 1.375rem; margin: 0 0 0.5rem; }
body:has(> header.sidebar) > main .todo h2 { font-size: 1.375rem; }
.todo ul { margin: 0; padding: 0; }
.todo li { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.25rem; }
/* The driver's to-dos: a tinted box of rows that open the shift. */
.driver-todo { background: var(--d-tint); padding: 0.875rem 1rem; }
.driver-todo li { display: block; margin: 0; }
.driver-todo li + li { border-top: 1px solid var(--d-tint-hover); }
.driver-todo li > a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 48px; padding: 0.375rem 0; color: var(--d-black); text-decoration: none; }
.driver-todo li > a > span { display: flex; flex-direction: column; }
.driver-todo li > a strong { font-size: 0.875rem; }
.driver-todo li > a small { font-size: 0.8125rem; }
.driver-todo li > a .icon { flex: none; width: 18px; height: 18px; color: var(--d-accent); }
.driver-todo h2 { font-family: var(--pico-font-family); font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-accent-hover); }

/* Filters: menus of checkboxes, with the week's count beside each; a dropdown from tablets up. */
.planner-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; align-items: flex-start; }
.planner-filters details.filter { position: relative; margin: 0; }
.planner-filters details.filter > summary {
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 999px;
  background: var(--d-grey-100); font-size: 0.875rem; font-weight: 600; cursor: pointer; list-style: none;
}
.planner-filters details.filter > summary::-webkit-details-marker { display: none; }
.planner-filters details.filter > summary::after { content: "▾"; float: none; width: auto; height: auto; margin: 0; background: none; transform: none; }
.planner-filters details.filter[open] > summary { background: var(--d-black); color: var(--d-white); }
.filter-menu {
  display: flex; flex-direction: column; min-width: 14rem; margin-top: 0.25rem; padding: 0.5rem 0;
  background: var(--d-white); border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) { .filter-menu { position: absolute; top: 100%; left: 0; z-index: 5; } }
.filter-menu label {
  display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.375rem 0.75rem;
  font-weight: 400; font-size: 0.9375rem; white-space: nowrap; min-height: 40px;
}
.filter-menu input[type=checkbox] { margin: 0; }
.filter-menu label small { margin-left: auto; padding-left: 0.75rem; }
.filter-menu > input:not([type=checkbox]) { width: auto; margin: 0 0.75rem 0.25rem; }
/* A filter that's on or off: a chip with its checkbox inside, black when ticked. */
.filter-toggle {
  min-height: 40px; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 14px; border-radius: 999px;
  background: var(--d-grey-100); font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.filter-toggle input[type=checkbox] { margin: 0; }
.filter-toggle:has(input:checked) { background: var(--d-black); color: var(--d-white); }

/* Open shifts: a bar of filter chips and a sheet with every filter, from the bottom on phones. */
.filter-bar { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.filter-bar { margin-bottom: 0.875rem; }
.filter-bar .icon { width: 16px; height: 16px; }
.filter-bar button, .filter-bar a { margin: 0; }
.filters-button, .filter-chip {
  flex: none; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; width: auto;
  border-radius: 999px; border: 1px solid var(--d-grey-200); background: var(--d-white); color: var(--d-black);
  font-size: 0.875rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.filters-button { background: var(--d-black); border-color: var(--d-black); color: var(--d-white); }
.filters-button .count {
  min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; margin-right: -6px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--d-accent); font-size: 0.75rem;
}
.filter-chip:hover { border-color: var(--d-black); color: var(--d-black); }
/* A set chip: black, its value opens the sheet and the × removes it. */
.filter-chip.on { background: var(--d-black); border-color: var(--d-black); color: var(--d-white); padding-right: 6px; cursor: default; }
.filter-chip.on > button { padding: 0; border: 0; background: none; color: inherit; font: inherit; min-height: 38px; }
.filter-chip.on > a {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: var(--d-white);
}
.filter-chip.on > a:hover { background: rgba(255, 255, 255, 0.32); }

/* The date filter in the sheet: All and the next seven days, as radio tiles with their counts. */
.date-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.date-tiles label {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0;
  min-height: 76px; padding: 0.5rem 0.25rem; border-radius: var(--d-radius-card); border: 1px solid var(--d-grey-200); cursor: pointer; text-align: center;
}
.date-tiles input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.date-tiles span { font-size: 0.75rem; font-weight: 600; }
.date-tiles strong { font-family: var(--d-font-display); font-size: 1.5rem; line-height: 1; }
.date-tiles small { font-size: 0.6875rem; color: inherit; }
.date-tiles label.none { border-style: dashed; color: var(--d-grey-600); }
.date-tiles label:hover { border-color: var(--d-black); }
.date-tiles label:has(input:checked) { background: var(--d-black); border-color: var(--d-black); color: var(--d-white); }
.date-tiles label:has(input:focus-visible) { outline: 3px solid var(--d-black); outline-offset: 2px; }
.result-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0.5rem 0 0.25rem; }
.result-bar a { font-size: 0.875rem; font-weight: 600; }

dialog.filter-sheet {
  position: fixed; inset: auto 0 0 0; width: 100vw; max-width: 32rem; min-width: 0; height: auto; max-height: calc(100dvh - 3.5rem); min-height: 0;
  margin: 0 auto; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--d-white); color: var(--d-black); backdrop-filter: none;
}
dialog.filter-sheet[open] { display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 768px) { dialog.filter-sheet { inset: 0; margin: auto; border-radius: 20px; max-height: min(44rem, calc(100dvh - 4rem)); } }
html:has(dialog.filter-sheet[open]) { overflow: hidden; }
dialog.filter-sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
/* A column, so the form shrinks to the sheet's max-height and only the body scrolls between a fixed header and footer. */
dialog.filter-sheet > form { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; min-height: 0; margin: 0; }
.filter-sheet header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0.5rem 0.25rem 1.25rem; }
.filter-sheet header h2 { margin: 0; font-size: 1.75rem; }
.filter-sheet header .close {
  width: 44px; height: 44px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: none; color: var(--d-black);
}
.filter-sheet header .close:hover { background: var(--d-grey-100); }
.filter-sheet header .close .icon { width: 22px; height: 22px; }
.filter-sheet .sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 1.25rem 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
.filter-sheet fieldset { margin: 0; padding: 0; border: 0; scroll-margin-top: 0.5rem; }
.filter-sheet legend { padding: 0; margin-bottom: 0.75rem; font-weight: 700; font-size: 1rem; }
.time-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.time-tiles label {
  position: relative; display: flex; flex-direction: column; gap: 2px; width: auto; margin: 0; padding: 0.75rem 2.75rem 0.75rem 0.875rem;
  border: 2px solid var(--d-grey-200); border-radius: var(--d-radius-card); cursor: pointer;
}
.time-tiles input { position: absolute; top: 0.75rem; right: 0.75rem; margin: 0; }
.time-tiles small { color: var(--d-grey-600); }
.time-tiles label:has(input:checked) { border-color: var(--d-accent); background: var(--d-tint); }
.time-tiles label:has(input:focus-visible) { outline: 2px solid var(--d-black); outline-offset: 2px; }
#filter-rate { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
#filter-rate legend { float: left; margin: 0; }
#min-rate-value { grid-column: 2; font-family: var(--d-font-display); font-size: 1.375rem; font-weight: 700; color: var(--d-accent); }
#min-rate {
  grid-column: 1 / -1; margin: 0.75rem 0 0.25rem;
  --pico-range-thumb-color: var(--d-accent); --pico-range-thumb-active-color: var(--d-accent-hover); --pico-range-border-color: var(--d-grey-200);
}
.range-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; margin: 0; }
/* Pico sizes a label with a checkbox to its content; these rows and tiles take the full width. */
label.check-row { display: flex; align-items: center; gap: 0.75rem; width: auto; min-height: 48px; margin: 0; border-bottom: 1px solid var(--d-line); font-weight: 400; }
.check-row input { margin: 0; }
label.switch-row { display: flex; align-items: center; gap: 1rem; width: auto; margin: 0; cursor: pointer; }
.switch-row > span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.switch-row small { color: var(--d-grey-600); font-weight: 400; }
.switch-row input[role=switch] { flex: none; margin: 0; }
.filter-sheet footer { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--d-line); }
.filter-sheet footer a { color: var(--d-black); font-weight: 600; padding: 0.75rem 0.25rem; }
.filter-sheet footer button { flex: 1; margin: 0; min-height: 52px; border-radius: 999px; }
.filter-sheet .sheet-body.htmx-request ~ footer button { opacity: 0.7; }

.planner .empty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.planner .empty p { margin: 0; }
.planner .empty [role=button] { margin: 0; }

/* The grid: a sticky row of days and a sticky column of location × role; it scrolls inside its box. */
.planner-scroll { overflow: auto; border: 1px solid var(--d-line); border-radius: var(--d-radius-card); }
.planner-grid { display: grid; grid-template-columns: 12rem repeat(7, minmax(9rem, 1fr)); min-width: calc(12rem + 7 * 9rem); }
.planner-row { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.planner-head { position: sticky; top: 0; z-index: 3; background: var(--d-white); }
.planner-corner, .planner-day {
  padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--d-black);
  font-size: 0.75rem; line-height: 1rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--d-grey-600);
}
.planner-corner { position: sticky; left: 0; z-index: 4; background: var(--d-white); }
.planner-day { display: flex; align-items: center; gap: 0.5rem; }
.planner-date {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-family: var(--d-font-display); font-size: 1.25rem; letter-spacing: 0; color: var(--d-black);
}
.planner-day.today { background: var(--d-tint); color: var(--d-accent); }
.planner-day.today .planner-date { background: var(--d-accent); color: var(--d-white); }
.planner-day.picked .planner-date { box-shadow: inset 0 0 0 2px var(--d-accent); color: var(--d-accent); }
.planner-label {
  position: sticky; left: 0; z-index: 2; background: var(--d-grey-100); padding: 0.75rem;
  display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; line-height: 1.25rem; border-bottom: 1px solid var(--d-line);
}
.planner-label strong { font-family: var(--d-font-display); font-size: 1.25rem; line-height: 1.5rem; }
.planner-label small { font-size: 0.8125rem; }
.planner-cell {
  position: relative; min-height: 7rem; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem;
  border-bottom: 1px solid var(--d-line); border-left: 1px solid var(--d-line);
}
.planner-cell.today { background: rgba(109, 40, 217, 0.04); }
.planner-add {
  position: absolute; inset: 0.5rem; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--d-accent); opacity: 0; text-decoration: none;
}
.planner-add:hover, .planner-add:focus-visible { opacity: 1; background: var(--d-tint); }

/* Cards, styled by PlannerStatus.style. */
.plan-card {
  margin: 0; padding: 0.625rem 0.75rem; border-radius: 8px; font-size: 0.8125rem; line-height: 1.125rem;
  background: var(--d-grey-100); display: flex; flex-direction: column; gap: 0.375rem;
}
.plan-card > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin: 0; }
.plan-card p { margin: 0; }
.plan-times { white-space: nowrap; font-weight: 600; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.plan-staff { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; white-space: nowrap; }
.plan-staff .icon { width: 14px; height: 14px; }
.plan-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.plan-badges .badge { font-size: 0.75rem; line-height: 1.125rem; padding: 1px 8px; white-space: normal; border-radius: 6px; }
.plan-status { display: inline-flex; align-items: center; gap: 4px; }
.plan-status .icon { width: 13px; height: 13px; }
.badge.new { background: var(--d-green-tint); color: var(--d-green-ink); }
.plan-meta { color: var(--d-grey-600); }
.plan-action { font-weight: 600; color: var(--d-accent); }
.plan-card span.plan-action { color: var(--d-grey-600); font-weight: 400; }

.plan-card.draft { background: var(--d-white); box-shadow: inset 0 0 0 1px var(--d-grey-600); outline: 1px dashed var(--d-grey-600); outline-offset: -1px; box-shadow: none; }
.plan-card.draft .plan-status { background: var(--d-grey-200); color: var(--d-black); }
.plan-card.open .plan-status { background: var(--d-accent); color: var(--d-white); }
.plan-card.booked { background: var(--d-teal); color: var(--d-white); }
.plan-card.booked .plan-meta, .plan-card.booked .plan-action, .plan-card.booked span.plan-action { color: var(--d-white); }
.plan-card.booked .plan-status { background: var(--d-white); color: var(--d-teal); }
.plan-card.live { background: var(--d-white); box-shadow: inset 0 0 0 2px var(--d-teal); }
.plan-card.live .plan-status { background: var(--d-white); color: var(--d-teal); box-shadow: inset 0 0 0 1px var(--d-teal); }
.plan-card.hours { background: var(--d-mint); }
.plan-card.hours .plan-status { background: var(--d-white); color: var(--d-teal); }
.plan-card.done { background: var(--d-white); box-shadow: inset 0 0 0 1px var(--d-line); }
.plan-card.done .plan-status { background: var(--d-green-tint); color: var(--d-green-ink); }
.plan-card.done .plan-status .icon { color: var(--d-green); }
.plan-card.cancelled { background: var(--d-grey-200); }
.plan-card.cancelled .plan-times { text-decoration: line-through; }
.plan-card.cancelled .plan-status { background: var(--d-white); color: var(--d-grey-600); }
.plan-card.archived { background: var(--d-grey-200); color: var(--d-grey-600); opacity: 0.6; }
.plan-card.archived .plan-status { background: var(--d-white); color: var(--d-grey-600); }
/* The driver's My shifts, styled by DriverPlannerStatus.style: an application waits in a dashed purple border. */
.plan-card.applied { background: var(--d-white); outline: 1px dashed var(--d-accent); outline-offset: -1px; }
.plan-card.applied .plan-status { background: var(--d-tint); color: var(--d-accent); }
.drawer-header .plan-status { display: inline-flex; align-items: center; gap: 4px; }
.drawer-header .plan-status .icon { width: 13px; height: 13px; }

/* Loading a week: the cards turn into grey blocks until it arrives. */
.planner.htmx-request .plan-card { background: var(--d-grey-200); box-shadow: none; outline: 0; opacity: 1; animation: planner-pulse 1.2s ease-in-out infinite; }
.planner.htmx-request .plan-card > * { visibility: hidden; }
.planner.htmx-request .planner-label > *, .planner.htmx-request .planner-header p { opacity: 0.4; }
@keyframes planner-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .planner.htmx-request .plan-card { animation: none; } }

/* Phones: an agenda of one day under a strip of the week's days. */
.agenda { display: none; }
.date-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 1rem; }
.date-strip a {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 8px; border-radius: 8px;
  color: var(--d-grey-600); font-size: 0.75rem; line-height: 1rem; text-decoration: none; min-height: 56px;
}
.date-strip strong { font-family: var(--d-font-display); font-size: 1.25rem; line-height: 1.5rem; color: var(--d-black); }
.date-strip a.today strong { color: var(--d-accent); }
.date-strip a[aria-current] { background: var(--d-black); color: var(--d-white); }
.date-strip a[aria-current] strong { color: var(--d-white); }
.date-strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--d-accent); }
.date-strip a[aria-current] .dot { background: var(--d-white); }
.agenda-day { font-size: 1.5rem; margin: 0 0 0.75rem; }
.agenda-group { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.agenda-group h3 { font-size: 1.25rem; margin: 0; }
.agenda-group h3 small { display: block; font-family: var(--pico-font-family); font-size: 0.8125rem; font-weight: 400; }
.agenda .plan-card { font-size: 0.875rem; padding: 0.75rem 1rem; }
@media (max-width: 767px) {
  .planner-scroll { display: none; }
  .agenda { display: block; }
  .planner-header h1 { font-size: 1.75rem; }
  .planner-nav { margin-left: 0; flex-wrap: wrap; }
  .planner-jump { flex-basis: 100%; }
  .planner-jump input[type=date] { width: 100%; }
}

/* A short confirmation after saving, gone after a few seconds. */
.toast {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; max-width: 24rem; margin: 0;
  padding: 0.75rem 1rem; border-radius: var(--d-radius-notice); background: var(--d-black); color: var(--d-white);
  font-size: 0.875rem; line-height: 1.25rem; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  animation: toast-out 0.4s ease-in 6s forwards;
}
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 767px) { .toast { left: 1.25rem; right: 1.25rem; bottom: 1rem; } }

/* The planner's drawer: a sheet from the right, full screen on phones. Without JavaScript it's a page. */
.planner-actions { display: flex; gap: 0.5rem; }
.planner-actions [role=button] { margin: 0; }
/* Pico's dialog is a centred full-screen overlay: undo its size and colour, the ::backdrop dims instead. */
dialog.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(36rem, 100vw); min-width: 0; max-width: none; height: 100dvh; min-height: 0; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--d-white); backdrop-filter: none; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
}
dialog.drawer[open] { display: block; }
html:has(dialog.drawer[open]) { overflow: hidden; }
dialog.drawer::backdrop { background: rgba(0, 0, 0, 0.35); }
dialog.drawer > #drawer-body { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem 1.5rem 2rem; }
dialog.drawer > #drawer-body.htmx-request { opacity: 0.6; }
@media (max-width: 767px) { dialog.drawer { width: 100vw; box-shadow: none; } dialog.drawer > #drawer-body { padding: 1rem; } }
.drawer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.drawer-header h1 { margin: 0; font-size: 2rem; }
.drawer-close { display: inline-flex; padding: 0.5rem; border-radius: 6px; color: var(--d-black); }
.drawer-close:hover { background: var(--d-grey-100); }
.drawer-secondary { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--d-line); }
.add-spots { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.add-spots label { margin: 0; }
.add-spots input[type=number] { width: 6rem; margin: 0; }
.add-spots button { width: auto; margin: 0; }
.day-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.day-picker label {
  display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; padding: 6px 2px;
  border: 1px solid var(--d-line); border-radius: 8px; font-size: 0.75rem; line-height: 1rem; text-align: center;
}
.day-picker label.source { border-color: var(--d-accent); background: var(--d-tint); }
.day-picker input { margin: 0; }
.day-picker label:has(input:disabled) { color: var(--d-grey-600); background: var(--d-grey-100); }
.copy-list { padding-left: 1.25rem; font-size: 0.875rem; }
.copy-list small { display: block; color: var(--d-grey-600); }
.shift-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.shift-actions [role=button], .shift-actions button { margin: 0; }

/* Shift templates: the row's actions on the Templates page, and the picker above Create shift. */
table.templates td.row-actions { text-align: right; }
table.templates td.row-actions [role=button], table.templates td.row-actions button { margin: 0.125rem 0 0.125rem 0.25rem; width: auto; padding: 0.25rem 0.625rem; font-size: 0.875rem; white-space: nowrap; }
.template-pick { margin-bottom: 1rem; }
.template-pick label { margin-bottom: 0; }
/* In the drawer the driver cards stack, and their take-off and turn-down forms open under them. */
#drawer-body .driver-cards { grid-template-columns: minmax(0, 1fr); }
.driver-card details.remove, .driver-card details.reject { margin: 0.5rem 0 0; }
.driver-card details > summary[role=button] { margin: 0; }
.card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; }
.card-actions > form, .card-actions button { margin: 0; }
.driver-card .card-actions details { margin: 0; }
.card-actions details[open] { flex: 1 1 100%; }
.driver-card details form { margin-top: 0.5rem; }
ol.history { padding-left: 0; list-style: none; font-size: 0.875rem; }
ol.history li { display: flex; gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid var(--d-line); }
ol.history time { flex: 0 0 8.5rem; color: var(--d-grey-600); }

/* ---- Open shifts, after YoungOnes: a list to scan, grouped by day, and a page per shift ---- */
.day-group { display: flex; flex-direction: column; gap: 0.625rem; padding-top: 1.25rem; }
.day-group h2 {
  display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-family: var(--pico-font-family);
  font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.day-group h2 small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.day-group + p { margin-top: 1.25rem; }
/* The restaurant's initials in a tinted square: drivers see no photos or logos. */
.initials-tile {
  flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--d-tint); color: var(--d-accent);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--d-font-display); font-size: 1.25rem; font-weight: 700;
}
.initials-tile.large { width: 60px; height: 60px; border-radius: 14px; font-size: 1.625rem; }
/* One shift in the list: the whole card is the link. */
article.shift-row { padding: 0; margin: 0; }
.shift-row > a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.625rem 0.75rem; align-items: start;
  padding: 0.875rem; border-radius: var(--d-radius-card); color: var(--d-black); text-decoration: none;
}
.shift-row > a:hover { background: var(--d-grey-200); }
.shift-row-main, .shift-row-pay { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shift-row-name { font-family: var(--d-font-display); font-size: 1.3125rem; line-height: 1.1; }
.shift-row-main small, .shift-row-pay small { font-size: 0.8125rem; line-height: 1.125rem; }
.shift-row-pay { text-align: right; }
.shift-row-pay strong { font-size: 1.125rem; line-height: 1.375rem; color: var(--d-accent); white-space: nowrap; }
.shift-row-meta, .shift-row-badges { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; font-size: 0.8125rem; line-height: 1.25rem; }
.shift-row-meta > span:last-child { color: var(--d-grey-600); }
.shift-row-time { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.shift-row-time .icon { width: 14px; height: 14px; }
.shift-row-badges .badge { font-size: 0.75rem; line-height: 1.125rem; }

/* A shift's own page: the facts in sections, the bar with its action fixed at the bottom. */
.back-link { margin-bottom: 0.75rem; }
.back-link a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-weight: 600; color: var(--d-black); text-decoration: none; }
.back-link .icon { width: 20px; height: 20px; }
main.shift-page { max-width: 40rem; }
.shift-head { display: flex; gap: 0.875rem; align-items: center; margin-bottom: 0.875rem; }
.shift-head h1 { margin: 0 0 0.25rem; font-size: 2rem; line-height: 1; }
.shift-head p { margin: 0; font-size: 0.875rem; line-height: 1.25rem; }
.shift-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.status-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: var(--d-radius-notice); background: var(--d-grey-100); }
.status-banner.ok { background: var(--d-tint); }
.status-banner .plan-status { display: inline-flex; align-items: center; gap: 4px; }
.status-banner .plan-status .icon { width: 13px; height: 13px; }
.key-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 1.25rem 0 0.5rem; }
.key-facts > div, .fact-tiles > div { display: flex; flex-direction: column; gap: 2px; padding: 0.75rem; border-radius: var(--d-radius-card); background: var(--d-grey-100); }
.key-facts span, .key-facts small { font-size: 0.75rem; line-height: 1rem; color: var(--d-grey-600); }
.key-facts strong { font-size: 1rem; line-height: 1.375rem; }
.rate { color: var(--d-accent); }
.fact-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; text-align: center; }
.fact-tiles strong { font-family: var(--d-font-display); font-size: 1.5rem; line-height: 1.2; }
.fact-tiles small { font-size: 0.75rem; line-height: 1rem; }
.shift-section { margin-top: 1.5rem; }
.shift-section h2 { margin: 0 0 0.5rem; font-size: 1.375rem; }
.shift-section > :last-child { margin-bottom: 0; }
.shift-section.boxed { padding: 0.875rem 1rem; border: 1px solid var(--d-line); border-radius: var(--d-radius-card); }
.shift-section.boxed p { margin-bottom: 0.5rem; }
.check-list { margin: 0; padding: 0; }
.check-list li { list-style: none; display: flex; gap: 0.625rem; align-items: flex-start; margin-bottom: 0.5rem; }
.check-list .icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--d-accent); }
.action-bar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  margin: 1.5rem calc(-1 * var(--pico-spacing)) 0; padding: 0.75rem var(--pico-spacing) calc(0.75rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--d-line); background: var(--d-white);
}
.action-bar > p { flex: 1 1 10rem; display: flex; flex-direction: column; margin: 0; }
.action-bar > p strong { font-size: 1.125rem; line-height: 1.375rem; }
.action-bar > p small { font-size: 0.75rem; line-height: 1rem; }
.action-bar form { margin: 0; }
.action-bar [role=button], .action-bar button { width: auto; margin: 0; padding-left: 1.75rem; padding-right: 1.75rem; }
.action-bar .actions-note { flex: 1 1 100%; margin: 0; font-size: 0.8125rem; color: var(--d-grey-600); }
/* On phones a shift's page is a screen of its own: its bar takes the tab bar's place. */
@media (max-width: 767px) {
  body:has(.action-bar) .tabbar { display: none; }
  body:has(.action-bar) { padding-bottom: 0; }
  body:has(.action-bar) > main { padding-bottom: 0; }
}
.apply-sheet header hgroup { margin: 0; }
.apply-sheet header > h2, .apply-sheet header hgroup { flex: 1; text-align: left; }
.apply-sheet header hgroup p { margin: 0; font-size: 0.8125rem; }
.apply-sheet .sheet-body { gap: 1rem; }
.apply-sheet .sheet-body label { margin: 0; }
.apply-sheet fieldset.acceptance { margin: 0; padding: 0.75rem; border: 0; border-radius: var(--d-radius-card); background: var(--d-grey-100); }
.apply-sheet fieldset.acceptance label { font-weight: 400; }
.apply-sheet footer button { border-radius: var(--pico-border-radius); }

/* ---- My shifts by status ---- */
main.my-shifts { max-width: 40rem; }
.my-shifts-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.my-shifts-header h1 { margin: 0; }
.icon-button {
  flex: none; width: 44px; height: 44px; border-radius: 999px; background: var(--d-grey-100); color: var(--d-black);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-button:hover { background: var(--d-grey-200); }
/* Tabs as a segmented control: links, the current one black. */
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--d-grey-100); }
.segmented a {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px;
  color: var(--d-black); font-size: 0.875rem; font-weight: 600; text-decoration: none;
}
.segmented a:hover { background: var(--d-grey-200); }
.segmented a[aria-current=page] { background: var(--d-black); color: var(--d-white); }
.segmented .count {
  min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--d-accent); color: var(--d-white); font-size: 0.75rem;
}
.next-shift {
  display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; padding: 1rem; border-radius: var(--d-radius-card);
  background: var(--d-black); color: var(--d-white); text-decoration: none;
}
.next-shift:hover { color: var(--d-white); background: #1A1A1A; }
.next-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--d-tint-hover); }
.next-main { display: flex; gap: 0.75rem; align-items: center; }
.next-main > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.next-main strong:first-child { font-family: var(--d-font-display); font-size: 1.5rem; line-height: 1; }
.next-shift small { color: var(--d-grey-200); font-size: 0.8125rem; }
.next-shift .initials-tile { background: var(--d-accent); color: var(--d-white); }
.next-pay { font-size: 1rem; }
.shift-row-pay.mine strong { color: var(--d-black); font-size: 1rem; }
.shift-row-badges small { font-size: 0.8125rem; }
.empty-tab { margin-top: 1.25rem; }
.more-link { margin-top: 1.25rem; font-size: 0.875rem; font-weight: 600; }
.action-bar .cancellation-notice { flex: 1 1 100%; margin: 0; order: 9; }
.action-bar .cancellation-notice small { font-size: 0.75rem; }
/* The status banner's badge, by DriverPlannerStatus.style, in the badge colours above. */
.status-banner .badge.booked, .status-banner .badge.done { background: var(--d-white); color: var(--d-accent); }
.status-banner .badge.applied { background: var(--d-white); color: var(--d-black); box-shadow: inset 0 0 0 1px var(--d-grey-600); }
.status-banner .badge.hours { background: var(--d-accent); color: var(--d-white); }
.status-banner .badge.cancelled { background: var(--d-black); color: var(--d-white); }