/* ══════════════════════════════════════════════════════════════════════════
   SchoolTrack — Claymorphism layer
   ──────────────────────────────────────────────────────────────────────────
   Soft, inflated surfaces on a warm ivory ground: every element reads as a
   rounded physical object rather than a flat rectangle with a border.

   Three things make clay read as clay, and all three are needed:
     1. a warm off-white ground — never pure white, never neutral grey;
     2. a generous radius: 28px on cards, 16px on the small icon tiles;
     3. a compound shadow — an outer drop for lift, an inset dark bevel at the
        bottom, an inset white highlight at the top. Drop any one and the
        surface goes flat.

   On colour: the accents are deepened and slightly desaturated rather than
   taken at full chroma. Pure #FFC107 / #007BFF primaries are what make an
   interface look cheap — they vibrate against a warm ground and leave no room
   for a brighter state. These sit one step back, so a highlight still has
   somewhere to go. Every shadow is tinted with the ink hue, never pure black,
   which is what keeps the warmth consistent across the whole surface.

   Loaded after app.css. It restyles existing markup and adds no class hooks
   the JS depends on.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Ground and surfaces — warm ivory, not grey */
  --clay-bg:        #F3EEE7;
  --clay-bg-2:      #EDE6DD;
  --clay-surface:   #FFFCF9;
  --clay-sunk:      #EDE6DE;

  /* Ink — indigo-leaning navy, richer than a neutral charcoal */
  --clay-ink:       #1F2547;
  --clay-ink-soft:  #545C7E;
  --clay-ink-mute:  #8D95AE;

  /* Accents: deepened, slightly desaturated. Each has a tinted ground for
     soft tiles and a solid for filled ones. */
  --clay-amber:     #EDA92B;
  --clay-amber-dp:  #C7860F;
  --clay-amber-bg:  #FBEED2;

  --clay-blue:      #3D7EDB;
  --clay-blue-dp:   #2A5FAC;
  --clay-blue-bg:   #DEE9FA;

  --clay-green:     #2FA35C;
  --clay-green-dp:  #1F7D44;
  --clay-green-bg:  #DCF0E2;

  --clay-coral:     #DE5A55;
  --clay-coral-dp:  #B23C38;
  --clay-coral-bg:  #FADFDE;

  /* The signature stack: lift, bottom bevel, top highlight.
     Shadow colour is the ink hue at low alpha — black would go muddy. */
  --clay-shadow:
    0 14px 30px rgba(31, 37, 71, .085),
    0  4px 10px rgba(31, 37, 71, .045),
    inset 0 -5px 10px rgba(31, 37, 71, .045),
    inset 0  5px 10px rgba(255, 255, 255, .92);

  --clay-shadow-sm:
    0 6px 16px rgba(31, 37, 71, .075),
    inset 0 -3px 7px rgba(31, 37, 71, .04),
    inset 0  3px 7px rgba(255, 255, 255, .92);

  /* Pressed: the lift collapses and the bevel inverts */
  --clay-shadow-in:
    inset 0  4px 10px rgba(31, 37, 71, .10),
    inset 0 -3px  7px rgba(255, 255, 255, .70);

  --clay-r:    28px;
  --clay-r-sm: 20px;
  --clay-r-xs: 16px;
}

/* Dark: same geometry on warm charcoal. Highlights drop to a few percent so
   the bevel still reads without glowing, and the tinted grounds go deep
   rather than merely dark, keeping each accent identifiable. */
[data-theme="dark"] {
  --clay-bg:        #1A1B22;
  --clay-bg-2:      #141419;
  --clay-surface:   #24252F;
  --clay-sunk:      #1D1E26;

  --clay-ink:       #ECEEF5;
  --clay-ink-soft:  #AFB6CA;
  --clay-ink-mute:  #7E869E;

  --clay-amber-bg:  #3A2E14;
  --clay-blue-bg:   #17263C;
  --clay-green-bg:  #14301E;
  --clay-coral-bg:  #33191B;

  --clay-shadow:
    0 14px 30px rgba(0, 0, 0, .45),
    inset 0 -5px 10px rgba(0, 0, 0, .35),
    inset 0  5px 10px rgba(255, 255, 255, .05);
  --clay-shadow-sm:
    0 6px 16px rgba(0, 0, 0, .40),
    inset 0 -3px 7px rgba(0, 0, 0, .30),
    inset 0  3px 7px rgba(255, 255, 255, .05);
  --clay-shadow-in:
    inset 0 4px 10px rgba(0, 0, 0, .50),
    inset 0 -3px 7px rgba(255, 255, 255, .04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --clay-bg:        #1A1B22;
    --clay-bg-2:      #141419;
    --clay-surface:   #24252F;
    --clay-sunk:      #1D1E26;

    --clay-ink:       #ECEEF5;
    --clay-ink-soft:  #AFB6CA;
    --clay-ink-mute:  #7E869E;

    --clay-amber-bg:  #3A2E14;
    --clay-blue-bg:   #17263C;
    --clay-green-bg:  #14301E;
    --clay-coral-bg:  #33191B;

    --clay-shadow:
      0 14px 30px rgba(0, 0, 0, .45),
      inset 0 -5px 10px rgba(0, 0, 0, .35),
      inset 0  5px 10px rgba(255, 255, 255, .05);
    --clay-shadow-sm:
      0 6px 16px rgba(0, 0, 0, .40),
      inset 0 -3px 7px rgba(0, 0, 0, .30),
      inset 0  3px 7px rgba(255, 255, 255, .05);
    --clay-shadow-in:
      inset 0 4px 10px rgba(0, 0, 0, .50),
      inset 0 -3px 7px rgba(255, 255, 255, .04);
  }
}

/* ── Ground ─────────────────────────────────────────────────────────────── */
body.clay {
  background: var(--clay-bg);
  color: var(--clay-ink);
}

/* ── Surfaces ───────────────────────────────────────────────────────────── */
.clay-card {
  background: var(--clay-surface);
  border-radius: var(--clay-r);
  box-shadow: var(--clay-shadow);
  border: none;
  padding: 15px;
  color: var(--clay-ink);
}
.clay-card-sm {
  border-radius: var(--clay-r-sm);
  box-shadow: var(--clay-shadow-sm);
  padding: 12px;
}

/* A recessed well — map frames, progress tracks */
.clay-sunk {
  background: var(--clay-sunk);
  border-radius: var(--clay-r-sm);
  box-shadow: var(--clay-shadow-in);
}

/* ── Icon tiles ─────────────────────────────────────────────────────────── */
.clay-tile {
  width: 52px;
  height: 52px;
  border-radius: var(--clay-r-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  box-shadow:
    0 6px 14px rgba(31, 37, 71, .16),
    inset 0 -3px 6px rgba(0, 0, 0, .12),
    inset 0  3px 6px rgba(255, 255, 255, .40);
}
.clay-tile-sm { width: 42px; height: 42px; border-radius: 13px; font-size: 1.15rem; }
.clay-tile-lg { width: 60px; height: 60px; border-radius: 19px; font-size: 1.7rem; }

/* Filled */
.clay-tile-amber { background: var(--clay-amber); color: #3D2A00; }
.clay-tile-blue  { background: var(--clay-blue);  color: #fff; }
.clay-tile-green { background: var(--clay-green); color: #fff; }
.clay-tile-coral { background: var(--clay-coral); color: #fff; }

/* Soft — tinted ground, deepened glyph. Lighter shadow so they sit calmer. */
.clay-tile-soft-amber,
.clay-tile-soft-blue,
.clay-tile-soft-green,
.clay-tile-soft-coral {
  box-shadow:
    0 4px 10px rgba(31, 37, 71, .08),
    inset 0 -2px 5px rgba(31, 37, 71, .05),
    inset 0  2px 5px rgba(255, 255, 255, .55);
}
.clay-tile-soft-amber { background: var(--clay-amber-bg); color: var(--clay-amber-dp); }
.clay-tile-soft-blue  { background: var(--clay-blue-bg);  color: var(--clay-blue-dp); }
.clay-tile-soft-green { background: var(--clay-green-bg); color: var(--clay-green-dp); }
.clay-tile-soft-coral { background: var(--clay-coral-bg); color: var(--clay-coral-dp); }

/* ── Status pills ───────────────────────────────────────────────────────── */
.clay-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  background: var(--clay-surface);
  box-shadow: var(--clay-shadow-sm);
  color: var(--clay-ink);
  white-space: nowrap;
}
.clay-pill::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.clay-pill-green  { background: var(--clay-green-bg); color: var(--clay-green-dp); }
.clay-pill-amber  { background: var(--clay-amber-bg); color: var(--clay-amber-dp); }
.clay-pill-coral  { background: var(--clay-coral-bg); color: var(--clay-coral-dp); }
.clay-pill-blue   { background: var(--clay-blue-bg);  color: var(--clay-blue-dp); }
.clay-pill-grey   { background: var(--clay-sunk);     color: var(--clay-ink-mute); }
/* Pills that carry their own icon do not also need the dot */
.clay-pill-plain::before { display: none; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.clay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 11px 18px;
  border: none;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  background: var(--clay-green);
  box-shadow:
    0 10px 20px rgba(47, 163, 92, .30),
    inset 0 -4px 8px rgba(0, 0, 0, .16),
    inset 0  4px 8px rgba(255, 255, 255, .26);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.clay-btn:active   { transform: translateY(2px); box-shadow: var(--clay-shadow-in); }
.clay-btn:disabled { opacity: .55; }
.clay-btn i        { font-size: 1.05rem; }

.clay-btn-coral { background: var(--clay-coral); box-shadow: 0 10px 20px rgba(222,90,85,.28), inset 0 -4px 8px rgba(0,0,0,.16), inset 0 4px 8px rgba(255,255,255,.24); }
.clay-btn-amber { background: var(--clay-amber); color: #3D2A00; box-shadow: 0 10px 20px rgba(237,169,43,.32), inset 0 -4px 8px rgba(0,0,0,.12), inset 0 4px 8px rgba(255,255,255,.45); }
.clay-btn-blue  { background: var(--clay-blue);  box-shadow: 0 10px 20px rgba(61,126,219,.28), inset 0 -4px 8px rgba(0,0,0,.16), inset 0 4px 8px rgba(255,255,255,.24); }

/* Neutral action card — icon tile beside a label, as in the design */
.clay-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: none;
  border-radius: var(--clay-r-sm);
  background: var(--clay-surface);
  box-shadow: var(--clay-shadow-sm);
  color: var(--clay-ink);
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
  transition: transform .12s ease, box-shadow .12s ease;
}
.clay-action:active { transform: translateY(2px); box-shadow: var(--clay-shadow-in); color: var(--clay-ink); }
.clay-action:disabled { opacity: .55; }

/* ── Typography ─────────────────────────────────────────────────────────── */
.clay-h1  { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;  color: var(--clay-ink); line-height: 1.18; }
.clay-h2  { font-size: 1.28rem; font-weight: 800; letter-spacing: -.015em; color: var(--clay-ink); }
.clay-num { font-size: 1.6rem;    font-weight: 800; letter-spacing: -.02em;  color: var(--clay-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.clay-num small { font-size: .5em; font-weight: 700; color: var(--clay-ink-mute); }
.clay-label { font-size: .82rem; font-weight: 600; color: var(--clay-ink-mute); }
.clay-sub   { font-size: .94rem; font-weight: 600; color: var(--clay-ink-soft); }

/* ── Avatars ────────────────────────────────────────────────────────────── */
.clay-avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--clay-surface);
  box-shadow:
    0 6px 14px rgba(31, 37, 71, .16),
    inset 0 2px 4px rgba(255, 255, 255, .6);
  border: 3px solid var(--clay-surface);
}

/* ── Progress ───────────────────────────────────────────────────────────── */
.clay-progress {
  height: 12px;
  border-radius: 999px;
  background: var(--clay-sunk);
  box-shadow: var(--clay-shadow-in);
  overflow: hidden;
}
.clay-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--clay-blue-dp), var(--clay-blue));
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), inset 0 2px 4px rgba(255,255,255,.30);
  transition: width .5s ease;
}
.clay-progress-green > span { background: linear-gradient(90deg, var(--clay-green-dp), var(--clay-green)); }

/* ── Bottom nav ─────────────────────────────────────────────────────────── */
.clay .pwa-bottom-nav {
  background: var(--clay-surface);
  border: none;
  border-radius: var(--clay-r) var(--clay-r) 0 0;
  box-shadow: 0 -10px 26px rgba(31, 37, 71, .10), inset 0 3px 8px rgba(255,255,255,.85);
  height: 62px;
}
.clay .pwa-bottom-nav .nav-item      { color: var(--clay-ink-mute); gap: 4px; }
.clay .pwa-bottom-nav .nav-item i    { font-size: 1.18rem; padding: 0 !important; background: none !important; color: var(--clay-ink-mute); box-shadow: none !important; transition: color .18s ease, transform .18s ease; }
.clay .pwa-bottom-nav .nav-item span { font-size: .64rem; font-weight: 700; color: var(--clay-ink-mute); }
.clay .pwa-bottom-nav .nav-item.active i,
.clay .pwa-bottom-nav .nav-item.active span { color: var(--clay-amber-dp) !important; }
.clay .pwa-bottom-nav .nav-item.active i    { transform: translateY(-2px); }
/* Underline marker under the active tab, as in the design */
.clay .pwa-bottom-nav .nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 8px;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--clay-amber);
}

/* ── Headers — the chrome dissolves into the ground ─────────────────────── */
.clay .driver-header,
.clay .parent-header {
  background: transparent;
  box-shadow: none;
  color: var(--clay-ink);
  padding: 18px 16px 8px;
  padding-top: calc(18px + env(safe-area-inset-top));
  position: static;
}
.clay .driver-header .fw-600,
.clay .parent-header .fw-600,
.clay .driver-header .fw-700,
.clay .parent-header .fw-700 { color: var(--clay-ink); }
.clay .driver-header a,
.clay .parent-header a { color: var(--clay-ink); }

/* Header icon buttons become small clay squares */
.clay .driver-header .btn,
.clay .parent-header .btn {
  width: 46px;
  height: 46px;
  border-radius: 15px !important;
  background: var(--clay-surface);
  border: none;
  box-shadow: var(--clay-shadow-sm);
  color: var(--clay-ink) !important;
}
.clay .driver-header .btn:active,
.clay .parent-header .btn:active { box-shadow: var(--clay-shadow-in); transform: none; }

/* ── Existing Bootstrap surfaces, restyled in place ─────────────────────── */
.clay .card-pwa,
.clay .trip-item,
.clay .empty-state,
.clay .bg-white {
  background: var(--clay-surface) !important;
  border-radius: var(--clay-r-sm);
  box-shadow: var(--clay-shadow-sm) !important;
  border: none !important;
  color: var(--clay-ink);
}
.clay .alert       { border: none; border-radius: var(--clay-r-sm); box-shadow: var(--clay-shadow-sm); }
.clay .text-muted  { color: var(--clay-ink-mute) !important; }
.clay .rounded-4,
.clay .rounded-3   { border-radius: var(--clay-r-sm) !important; }
.clay .shadow-sm   { box-shadow: var(--clay-shadow-sm) !important; }
.clay .border,
.clay .border-top,
.clay .border-bottom { border-color: rgba(31,37,71,.07) !important; }

@media (prefers-reduced-motion: reduce) {
  .clay-btn,
  .clay-action,
  .clay .pwa-bottom-nav .nav-item i,
  .clay-progress > span { transition: none; }
}

/* ── Driver action row inside a clay card ───────────────────────────────── */
.clay .act-row { gap: 10px; }
.clay .act {
  flex-direction: column;
  gap: 7px;
  min-height: 74px;
  background: var(--clay-surface);
  color: var(--clay-ink);
  border-radius: var(--clay-r-sm);
  box-shadow: var(--clay-shadow-sm);
  font-size: .8rem;
  font-weight: 700;
  padding: 12px 6px;
}
.clay .act:active   { transform: translateY(2px); box-shadow: var(--clay-shadow-in); }
.clay .act i        { font-size: 1.15rem; }
.clay .act-go,
.clay .act-wait,
.clay .act-stop     { background: var(--clay-surface); color: var(--clay-ink); flex: 1; }
.clay .act-go       { flex: 1.25; }
.clay .act-badge {
  top: 8px; right: 10px;
  background: var(--clay-green);
  box-shadow: 0 3px 8px rgba(47,163,92,.35);
}

/* The idle "Start" button sits in the card, full width */
.clay .clay-btn { margin-top: 2px; }

/* Next-stop card header strip picks up the soft green ground */
.clay #next-stop-card > div > div:first-child {
  background: var(--clay-green-bg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PARENT — bus card
   The card was a navy gradient with a ghost-emoji watermark. In clay it
   becomes a raised ivory surface like everything else, so the coloured tiles
   and the child's status are what carry meaning rather than the card itself.
   ══════════════════════════════════════════════════════════════════════════ */
.clay .bus-card {
  background: var(--clay-surface);
  color: var(--clay-ink);
  border-radius: var(--clay-r);
  box-shadow: var(--clay-shadow);
  padding: 15px;
}
.clay .bus-card::after { content: none; }          /* drop the emoji watermark */
.clay .bus-card .fw-700,
.clay .bus-card .fw-600 { color: var(--clay-ink); }
.clay .bus-card [style*="opacity"] { opacity: 1 !important; color: var(--clay-ink-mute) !important; }

/* ETA badge becomes a proper clay pill */
.clay .eta-badge {
  background: var(--clay-blue-bg);
  border: none;
  color: var(--clay-blue-dp);
  box-shadow: var(--clay-shadow-sm);
  padding: 8px 16px;
  font-weight: 700;
}

/* The two "facts" tiles read on ivory rather than on navy */
.clay .pcard-facts { gap: 12px; margin-top: 14px; }
.clay .pfact {
  background: var(--clay-sunk);
  box-shadow: var(--clay-shadow-in);
  border-radius: var(--clay-r-sm);
  padding: 14px 10px;
  gap: 6px;
}
.clay .pfact-icon        { width: 40px; height: 40px; box-shadow: 0 4px 10px rgba(31,37,71,.14), inset 0 2px 5px rgba(255,255,255,.4); }
.clay .pfact-icon.is-yes  { background: var(--clay-green); color: #fff; }
.clay .pfact-icon.is-wait { background: var(--clay-amber-bg); color: var(--clay-amber-dp); }
.clay .pfact-icon.is-eta  { background: var(--clay-blue-bg);  color: var(--clay-blue-dp); }
.clay .pfact-icon.is-late { background: var(--clay-amber); color: #3D2A00; }
.clay .pfact-val { color: var(--clay-ink); font-size: 1.02rem; }
.clay .pfact-key { color: var(--clay-ink-mute); opacity: 1; }

/* Driver row inside the bus card */
.clay .bus-card img.rounded-circle { border-color: var(--clay-surface) !important; box-shadow: 0 4px 10px rgba(31,37,71,.16); }
.clay .bus-card .btn {
  background: var(--clay-green);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(47,163,92,.28), inset 0 -2px 5px rgba(0,0,0,.14), inset 0 2px 5px rgba(255,255,255,.24);
}
.clay .bus-card .btn-light {
  background: var(--clay-surface);
  color: var(--clay-ink) !important;
  box-shadow: var(--clay-shadow-sm);
}

/* Map well inside the card */
.clay #parent-bus-map,
.clay #parent-map { border-radius: var(--clay-r-sm) !important; box-shadow: var(--clay-shadow-in); }

/* Child selector chips */
.clay .student-chip {
  background: var(--clay-surface);
  border: none;
  box-shadow: var(--clay-shadow-sm);
  color: var(--clay-ink);
  padding: 7px 16px 7px 7px;
  min-height: 50px;
  font-weight: 700;
}
.clay .student-chip.active {
  background: var(--clay-amber-bg);
  color: var(--clay-amber-dp);
  box-shadow: var(--clay-shadow-sm), 0 0 0 2px var(--clay-amber) inset;
}
.clay .student-chip img { box-shadow: 0 3px 8px rgba(31,37,71,.18); }

/* Status pills defined in app.css pick up the clay palette here */
.clay .st-pill-wait { background: var(--clay-amber-bg); color: var(--clay-amber-dp); }
.clay .st-pill-go   { background: var(--clay-green-bg); color: var(--clay-green-dp); }
.clay .st-pill-stop { background: var(--clay-coral-bg); color: var(--clay-coral-dp); }
.clay .st-pill-live { background: var(--clay-blue-bg);  color: var(--clay-blue-dp); }
.clay .st-pill-idle { background: var(--clay-sunk);     color: var(--clay-ink-mute); }

/* Driver trip cards + history figures on the clay ground */
.clay .trip-item-icon.is-pickup { background: var(--clay-amber-bg); color: var(--clay-amber-dp); box-shadow: 0 4px 10px rgba(31,37,71,.10); }
.clay .trip-item-icon.is-drop   { background: var(--clay-blue-bg);  color: var(--clay-blue-dp);  box-shadow: 0 4px 10px rgba(31,37,71,.10); }
.clay .trip-item-btn.is-start   { background: var(--clay-green); box-shadow: 0 8px 16px rgba(47,163,92,.28), inset 0 -3px 6px rgba(0,0,0,.16), inset 0 3px 6px rgba(255,255,255,.24); }
.clay .trip-item-btn.is-end     { background: var(--clay-coral); box-shadow: 0 8px 16px rgba(222,90,85,.26), inset 0 -3px 6px rgba(0,0,0,.16), inset 0 3px 6px rgba(255,255,255,.22); }
.clay .hist-num                 { color: var(--clay-ink); }
.clay .hist-fig.is-late .hist-num { color: var(--clay-amber-dp); }
.clay .hist-figs                { border-top-color: rgba(31,37,71,.07); }

/* Stat tiles: tile above, figure, label. flex-1 needs declaring since these
   left the Bootstrap grid. */
.clay .clay-card-sm.flex-1 { flex: 1; min-width: 0; }
.clay .clay-card-sm .clay-tile { display: inline-flex; }

/* "Today" summary + GPS strip pick up the clay surface treatment */
.clay .live-dot { color: var(--clay-green-dp); }

/* Call-driver pill inside the parent bus card */
.clay-call {
  background: var(--clay-green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  box-shadow:
    0 6px 14px rgba(47, 163, 92, .28),
    inset 0 -2px 5px rgba(0, 0, 0, .14),
    inset 0  2px 5px rgba(255, 255, 255, .24);
}
.clay-call:hover, .clay-call:focus { background: var(--clay-green-dp); color: #fff; }
.clay-call:active { transform: translateY(1px); box-shadow: var(--clay-shadow-in); color: #fff; }

/* ── Driver location-permission banner ──────────────────────────────────── */
.loc-banner            { border: none; }
.loc-banner.is-denied  { background: var(--clay-coral-bg); color: var(--clay-coral-dp); }
.loc-banner.is-waiting { background: var(--clay-blue-bg);  color: var(--clay-blue-dp); }
.loc-banner.is-ask     { background: var(--clay-amber-bg); color: var(--clay-amber-dp); }
.loc-banner .fw-700,
.loc-banner .small,
.loc-banner i          { color: inherit; }
.loc-banner .btn {
  border: none;
  border-radius: 999px;
  font-weight: 700;
  padding: 11px 18px;
  color: #fff;
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.16), inset 0 2px 5px rgba(255,255,255,.22);
}
.loc-banner.is-denied .btn { background: var(--clay-coral); }
.loc-banner.is-ask    .btn { background: var(--clay-amber); color: #3D2A00; }

/* Next-stop card header — the soft green ground, from tokens */
.clay .next-stop-head { background: var(--clay-green-bg); }
.clay #next-stop-card .btn-success {
  background: var(--clay-green); border: none; border-radius: 999px; font-weight: 700;
  box-shadow: 0 6px 14px rgba(47,163,92,.28), inset 0 -2px 5px rgba(0,0,0,.14), inset 0 2px 5px rgba(255,255,255,.24);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOOTSTRAP → CLAY
   ──────────────────────────────────────────────────────────────────────────
   Everything below re-skins the Bootstrap components the parent and driver
   views already use, so every page picks up clay without its markup being
   rewritten. Scoped to .clay, so the admin panel is untouched.

   The rule throughout: surfaces are raised ivory, inputs are recessed wells,
   and colour is reserved for state. A filled button is the only place a
   saturated accent covers a large area.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ────────────────────────────────────────────────────────────── */
.clay .btn {
  border: none;
  border-radius: 999px;
  font-weight: 700;
  padding: 11px 20px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.clay .btn:active { transform: translateY(1px); }
.clay .btn:focus-visible { outline: 2px solid var(--clay-amber); outline-offset: 2px; }

.clay .btn-primary,
.clay .btn-primary-st { background: var(--clay-blue);   color: #fff;     box-shadow: 0 8px 16px rgba(61,126,219,.26), inset 0 -3px 6px rgba(0,0,0,.16), inset 0 3px 6px rgba(255,255,255,.24); }
.clay .btn-success    { background: var(--clay-green);  color: #fff;     box-shadow: 0 8px 16px rgba(47,163,92,.26),  inset 0 -3px 6px rgba(0,0,0,.16), inset 0 3px 6px rgba(255,255,255,.24); }
.clay .btn-danger     { background: var(--clay-coral);  color: #fff;     box-shadow: 0 8px 16px rgba(222,90,85,.26),  inset 0 -3px 6px rgba(0,0,0,.16), inset 0 3px 6px rgba(255,255,255,.22); }
.clay .btn-warning    { background: var(--clay-amber);  color: #3D2A00;  box-shadow: 0 8px 16px rgba(237,169,43,.30), inset 0 -3px 6px rgba(0,0,0,.12), inset 0 3px 6px rgba(255,255,255,.42); }
.clay .btn-info       { background: var(--clay-blue);   color: #fff;     box-shadow: 0 8px 16px rgba(61,126,219,.26), inset 0 -3px 6px rgba(0,0,0,.16), inset 0 3px 6px rgba(255,255,255,.24); }
.clay .btn-secondary  { background: var(--clay-sunk);   color: var(--clay-ink); box-shadow: var(--clay-shadow-sm); }
.clay .btn-light      { background: var(--clay-surface);color: var(--clay-ink); box-shadow: var(--clay-shadow-sm); }
.clay .btn-dark       { background: var(--clay-ink);    color: #fff; }

/* Outline buttons become quiet raised surfaces with a coloured label. A
   hairline ring reads as a hole cut in clay rather than an object sitting
   on it, so the border goes and the shadow does the separating. */
.clay .btn-outline-primary,
.clay .btn-outline-secondary,
.clay .btn-outline-success,
.clay .btn-outline-danger,
.clay .btn-outline-warning,
.clay .btn-outline-info,
.clay .btn-outline-light,
.clay .btn-outline-dark {
  background: var(--clay-surface);
  border: none;
  box-shadow: var(--clay-shadow-sm);
}
.clay .btn-outline-primary { color: var(--clay-blue-dp); }
.clay .btn-outline-success { color: var(--clay-green-dp); }
.clay .btn-outline-danger  { color: var(--clay-coral-dp); }
.clay .btn-outline-warning { color: var(--clay-amber-dp); }
.clay .btn-outline-info    { color: var(--clay-blue-dp); }
.clay .btn-outline-secondary,
.clay .btn-outline-dark    { color: var(--clay-ink-soft); }
.clay .btn-outline-light   { color: var(--clay-ink); }

.clay .btn-outline-primary:hover,
.clay .btn-outline-success:hover,
.clay .btn-outline-danger:hover,
.clay .btn-outline-warning:hover,
.clay .btn-outline-info:hover,
.clay .btn-outline-secondary:hover,
.clay .btn-outline-light:hover { background: var(--clay-sunk); }

.clay .btn-sm { padding: 8px 15px; font-size: .86rem; }
.clay .btn-lg { padding: 15px 26px; font-size: 1.06rem; }
.clay .btn-close { filter: none; opacity: .5; }
[data-theme="dark"] .clay .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ── Badges ─────────────────────────────────────────────────────────────── */
.clay .badge {
  border-radius: 999px;
  font-weight: 700;
  padding: 6px 12px;
  box-shadow: none;
}
.clay .badge.bg-primary,
.clay .badge.text-bg-primary   { background: var(--clay-blue-bg)  !important; color: var(--clay-blue-dp)  !important; }
.clay .badge.bg-success,
.clay .badge.text-bg-success   { background: var(--clay-green-bg) !important; color: var(--clay-green-dp) !important; }
.clay .badge.bg-danger,
.clay .badge.text-bg-danger    { background: var(--clay-coral-bg) !important; color: var(--clay-coral-dp) !important; }
.clay .badge.bg-warning,
.clay .badge.text-bg-warning   { background: var(--clay-amber-bg) !important; color: var(--clay-amber-dp) !important; }
.clay .badge.bg-info,
.clay .badge.text-bg-info      { background: var(--clay-blue-bg)  !important; color: var(--clay-blue-dp)  !important; }
.clay .badge.bg-secondary,
.clay .badge.text-bg-secondary { background: var(--clay-sunk)     !important; color: var(--clay-ink-mute) !important; }
.clay .badge.bg-light          { background: var(--clay-sunk)     !important; color: var(--clay-ink-soft) !important; }
.clay .badge.bg-dark           { background: var(--clay-ink)      !important; color: #fff !important; }

/* A count pinned to an icon stays solid — it has to read at 10px */
.clay .badge.position-absolute {
  background: var(--clay-coral) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(222,90,85,.45);
}

/* ── Form controls — recessed wells ─────────────────────────────────────── */
.clay .form-control,
.clay .form-select,
.clay .input-group-text {
  background: var(--clay-sunk);
  border: none;
  border-radius: var(--clay-r-xs);
  box-shadow: var(--clay-shadow-in);
  color: var(--clay-ink);
  padding: 13px 16px;
  font-weight: 600;
}
.clay .form-control::placeholder { color: var(--clay-ink-mute); font-weight: 500; }
.clay .form-control:focus,
.clay .form-select:focus {
  background: var(--clay-sunk);
  color: var(--clay-ink);
  box-shadow: var(--clay-shadow-in), 0 0 0 3px rgba(237,169,43,.35);
  outline: none;
}
.clay .form-label { font-weight: 700; color: var(--clay-ink); font-size: .9rem; }
.clay .form-text  { color: var(--clay-ink-mute); }
.clay textarea.form-control { min-height: 96px; }

.clay .form-check-input {
  background-color: var(--clay-sunk);
  border: none;
  box-shadow: var(--clay-shadow-in);
  width: 1.3em;
  height: 1.3em;
}
.clay .form-check-input:checked {
  background-color: var(--clay-green);
  box-shadow: 0 3px 8px rgba(47,163,92,.35), inset 0 -1px 3px rgba(0,0,0,.18);
}
.clay .form-check-input:focus { box-shadow: var(--clay-shadow-in), 0 0 0 3px rgba(237,169,43,.35); }
.clay .form-switch .form-check-input { width: 2.6em; border-radius: 999px; }

/* ── Cards, list groups, tables ─────────────────────────────────────────── */
.clay .card {
  background: var(--clay-surface);
  border: none;
  border-radius: var(--clay-r-sm);
  box-shadow: var(--clay-shadow-sm);
  color: var(--clay-ink);
}
.clay .card-header,
.clay .card-footer {
  background: transparent;
  border-color: rgba(31,37,71,.07);
  font-weight: 700;
  color: var(--clay-ink);
}

.clay .list-group      { border-radius: var(--clay-r-sm); overflow: hidden; }
.clay .list-group-item { background: var(--clay-surface); border-color: rgba(31,37,71,.07); color: var(--clay-ink); padding: 14px 16px; }

.clay .table { color: var(--clay-ink); --bs-table-bg: transparent; }
.clay .table > :not(caption) > * > * { border-color: rgba(31,37,71,.07); background: transparent; }
.clay .table-light > :not(caption) > * > * { background: var(--clay-sunk); color: var(--clay-ink-soft); font-weight: 700; }

/* ── Modals, dropdowns ──────────────────────────────────────────────────── */
.clay .modal-content {
  background: var(--clay-bg);
  border: none;
  border-radius: var(--clay-r);
  box-shadow: 0 24px 60px rgba(31,37,71,.28);
  color: var(--clay-ink);
}
.clay .modal-header,
.clay .modal-footer { border-color: rgba(31,37,71,.07); }
.clay .modal-title  { font-weight: 800; color: var(--clay-ink); }

.clay .dropdown-menu {
  background: var(--clay-surface);
  border: none;
  border-radius: var(--clay-r-sm);
  box-shadow: 0 14px 34px rgba(31,37,71,.18);
  padding: 8px;
}
.clay .dropdown-item { border-radius: 12px; color: var(--clay-ink); font-weight: 600; padding: 10px 14px; }
.clay .dropdown-item:hover,
.clay .dropdown-item:focus { background: var(--clay-sunk); color: var(--clay-ink); }
.clay .dropdown-divider { border-color: rgba(31,37,71,.08); }

/* ── Tabs and pills ─────────────────────────────────────────────────────── */
.clay .nav-pills .nav-link {
  border-radius: 999px;
  font-weight: 700;
  color: var(--clay-ink-soft);
  background: var(--clay-surface);
  box-shadow: var(--clay-shadow-sm);
  padding: 11px 20px;
}
.clay .nav-pills .nav-link.active {
  background: var(--clay-amber);
  color: #3D2A00;
  box-shadow: 0 8px 16px rgba(237,169,43,.32), inset 0 -3px 6px rgba(0,0,0,.12), inset 0 3px 6px rgba(255,255,255,.42);
}

/* ── Progress ───────────────────────────────────────────────────────────── */
.clay .progress {
  background: var(--clay-sunk);
  box-shadow: var(--clay-shadow-in);
  border-radius: 999px;
  height: 12px;
}
.clay .progress-bar { background: var(--clay-blue); border-radius: 999px; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.clay .alert-success   { background: var(--clay-green-bg); color: var(--clay-green-dp); }
.clay .alert-danger    { background: var(--clay-coral-bg); color: var(--clay-coral-dp); }
.clay .alert-warning   { background: var(--clay-amber-bg); color: var(--clay-amber-dp); }
.clay .alert-info      { background: var(--clay-blue-bg);  color: var(--clay-blue-dp); }
.clay .alert-secondary,
.clay .alert-light     { background: var(--clay-sunk);     color: var(--clay-ink-soft); }
.clay .alert-link      { color: inherit; font-weight: 800; text-decoration: underline; }

/* ── Text and background utilities remapped to the clay palette ─────────── */
.clay .text-primary,
.clay .text-primary-st { color: var(--clay-blue-dp)  !important; }
.clay .text-success    { color: var(--clay-green-dp) !important; }
.clay .text-danger     { color: var(--clay-coral-dp) !important; }
.clay .text-warning    { color: var(--clay-amber-dp) !important; }
.clay .text-info       { color: var(--clay-blue-dp)  !important; }
.clay .text-dark       { color: var(--clay-ink)      !important; }
.clay .text-secondary  { color: var(--clay-ink-soft) !important; }
.clay .bg-light        { background: var(--clay-sunk) !important; }
.clay hr               { border-color: rgba(31,37,71,.10); opacity: 1; }

/* ── Media frames ───────────────────────────────────────────────────────── */
.clay .cam-card,
.clay .scan-area,
.clay .map-wrap,
.clay #qr-reader {
  background: var(--clay-surface);
  border: none;
  border-radius: var(--clay-r-sm);
  box-shadow: var(--clay-shadow-sm);
  overflow: hidden;
}
.clay .cam-card-body   { background: var(--clay-ink); }
.clay .cam-card-header { border-color: rgba(31,37,71,.07); }

/* ── Student rows and avatars across both portals ───────────────────────── */
.clay .student-row               { border-color: rgba(31,37,71,.07) !important; }
.clay .student-row:active        { background: var(--clay-sunk); }
.clay .student-row [x-html] img,
.clay .student-row [x-html] > div { box-shadow: 0 4px 10px rgba(31,37,71,.16); }

/* ══════════════════════════════════════════════════════════════════════════
   OVERRIDES for app.css rules that carry !important
   ──────────────────────────────────────────────────────────────────────────
   app.css declares .btn-primary / .btn-primary-st with `!important`, which
   beats a higher-specificity rule that lacks it. Matching !important here is
   the correct fix: the intent is genuinely "the clay layer wins", and these
   stay narrow rather than blanketing the file.
   ══════════════════════════════════════════════════════════════════════════ */

.clay .btn-primary,
.clay .btn-primary-st {
  background: var(--clay-blue) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.clay .btn-primary:hover,
.clay .btn-primary-st:hover,
.clay .btn-primary:focus,
.clay .btn-primary-st:focus {
  background: var(--clay-blue-dp) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Skip link picks up the clay amber rather than the old brand yellow */
.clay .skip-to-content {
  background: var(--clay-amber);
  color: #3D2A00;
  border-radius: 0 0 16px 0;
  font-weight: 800;
}

/* Bootstrap tint utilities → clay tints. bg-opacity-10 on a saturated brand
   colour reads as a wash of the wrong hue on an ivory ground. */
.clay .bg-primary.bg-opacity-10,
.clay .bg-primary.bg-opacity-25 { background-color: var(--clay-blue-bg)  !important; }
.clay .bg-success.bg-opacity-10,
.clay .bg-success.bg-opacity-25 { background-color: var(--clay-green-bg) !important; }
.clay .bg-danger.bg-opacity-10,
.clay .bg-danger.bg-opacity-25  { background-color: var(--clay-coral-bg) !important; }
.clay .bg-warning.bg-opacity-10,
.clay .bg-warning.bg-opacity-25 { background-color: var(--clay-amber-bg) !important; }
.clay .bg-info.bg-opacity-10    { background-color: var(--clay-blue-bg)  !important; }
.clay .bg-secondary.bg-opacity-10 { background-color: var(--clay-sunk)   !important; }

/* Checkable buttons (the scan screen's board/alight toggle) */
.clay .btn-check:checked + .btn-outline-success,
.clay .btn-check:active  + .btn-outline-success { background: var(--clay-green) !important; color: #fff !important; border: none; }
.clay .btn-check:checked + .btn-outline-primary { background: var(--clay-blue)  !important; color: #fff !important; border: none; }
.clay .btn-check:checked + .btn-outline-danger  { background: var(--clay-coral) !important; color: #fff !important; border: none; }
.clay .btn-check:checked + .btn-outline-warning { background: var(--clay-amber) !important; color: #3D2A00 !important; border: none; }

/* The parent live-view tab pills */
.clay .tab-pill {
  border-radius: 999px;
  font-weight: 700;
  background: var(--clay-surface);
  color: var(--clay-ink-soft);
  box-shadow: var(--clay-shadow-sm);
  border: none;
}
.clay .tab-pill.active {
  background: var(--clay-amber) !important;
  color: #3D2A00 !important;
  box-shadow: 0 8px 16px rgba(237,169,43,.32), inset 0 -3px 6px rgba(0,0,0,.12), inset 0 3px 6px rgba(255,255,255,.42);
}
.clay .tab-pill .badge { background: rgba(255,255,255,.55) !important; color: #3D2A00 !important; }

/* Today's-status tiles on the parent dashboard */
.clay .today-tile         { border-radius: var(--clay-r-sm); padding: 16px 12px; background: var(--clay-sunk); box-shadow: var(--clay-shadow-in); }
.clay .today-tile.is-done { background: var(--clay-green-bg); box-shadow: none; }
.clay .today-tile.is-done i { color: var(--clay-green-dp) !important; }

/* SOS: the one place a large saturated red is correct */
.clay .sos-btn {
  background: var(--clay-coral);
  color: #fff;
  border: none;
  box-shadow: 0 14px 28px rgba(222,90,85,.36), inset 0 -5px 10px rgba(0,0,0,.18), inset 0 5px 10px rgba(255,255,255,.22);
}

/* Dark-mode border tint — the light-mode value is invisible on charcoal */
[data-theme="dark"] .clay .card-header,
[data-theme="dark"] .clay .card-footer,
[data-theme="dark"] .clay .list-group-item,
[data-theme="dark"] .clay .modal-header,
[data-theme="dark"] .clay .modal-footer,
[data-theme="dark"] .clay .table > :not(caption) > * > *,
[data-theme="dark"] .clay .border,
[data-theme="dark"] .clay .border-top,
[data-theme="dark"] .clay .border-bottom,
[data-theme="dark"] .clay .hist-figs,
[data-theme="dark"] .clay .trip-item-times,
[data-theme="dark"] .clay .student-row { border-color: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .clay hr { border-color: rgba(255,255,255,.12); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clay .card-header,
  :root:not([data-theme="light"]) .clay .card-footer,
  :root:not([data-theme="light"]) .clay .list-group-item,
  :root:not([data-theme="light"]) .clay .modal-header,
  :root:not([data-theme="light"]) .clay .modal-footer,
  :root:not([data-theme="light"]) .clay .table > :not(caption) > * > *,
  :root:not([data-theme="light"]) .clay .border,
  :root:not([data-theme="light"]) .clay .border-top,
  :root:not([data-theme="light"]) .clay .border-bottom,
  :root:not([data-theme="light"]) .clay .hist-figs,
  :root:not([data-theme="light"]) .clay .trip-item-times,
  :root:not([data-theme="light"]) .clay .student-row { border-color: rgba(255,255,255,.09) !important; }
  :root:not([data-theme="light"]) .clay hr { border-color: rgba(255,255,255,.12); }
}

/* app.css darkens these one step past .clay (:root:not([data-theme=light])),
   so the clay tints need the same reach. Both forms are needed: the stamped
   selector for an explicit dark choice, the guarded one for "follow system". */
[data-theme="dark"] .clay .st-pill-wait { background: var(--clay-amber-bg); color: #F0C264; }
[data-theme="dark"] .clay .st-pill-go   { background: var(--clay-green-bg); color: #74C98F; }
[data-theme="dark"] .clay .st-pill-stop { background: var(--clay-coral-bg); color: #EC8A87; }
[data-theme="dark"] .clay .st-pill-live { background: var(--clay-blue-bg);  color: #82AEE8; }
[data-theme="dark"] .clay .st-pill-idle { background: var(--clay-sunk);     color: var(--clay-ink-mute); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clay .st-pill-wait { background: var(--clay-amber-bg); color: #F0C264; }
  :root:not([data-theme="light"]) .clay .st-pill-go   { background: var(--clay-green-bg); color: #74C98F; }
  :root:not([data-theme="light"]) .clay .st-pill-stop { background: var(--clay-coral-bg); color: #EC8A87; }
  :root:not([data-theme="light"]) .clay .st-pill-live { background: var(--clay-blue-bg);  color: #82AEE8; }
  :root:not([data-theme="light"]) .clay .st-pill-idle { background: var(--clay-sunk);     color: var(--clay-ink-mute); }
}

/* ══════════════════════════════════════════════════════════════════════════
   AUTH SHELL
   ──────────────────────────────────────────────────────────────────────────
   The sign-in pages are the first screen of both portals — and, because the
   Android wrapper opens straight onto them, the driver app's own front door.
   They used to carry their own orange and blue gradients, so the app went
   saturated-orange → ivory on every launch. These give them the clay ground.
   ══════════════════════════════════════════════════════════════════════════ */

.clay-auth {
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--clay-bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay-ink);
}

/* A soft amber bloom behind the card, so the ivory ground has somewhere to
   look. Fixed and non-interactive: it must never sit over the form. */
.clay-auth::before {
  content: '';
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 62vh;
  background: radial-gradient(60% 70% at 50% 0%, rgba(237,169,43,.20), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.clay-auth > * { position: relative; z-index: 1; }

.clay-auth .auth-card {
  background: var(--clay-surface);
  border-radius: var(--clay-r);
  box-shadow: var(--clay-shadow);
  padding: 1.5rem 1.5rem;
  width: 100%;
  max-width: 430px;
  border: none;
}

.clay-auth .auth-logo {
  width: 54px; height: 54px;
  background: var(--clay-amber);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem;
  box-shadow: 0 12px 24px rgba(237,169,43,.34),
              inset 0 -4px 8px rgba(0,0,0,.14),
              inset 0 4px 8px rgba(255,255,255,.42);
}

.clay-auth .auth-brand { color: var(--clay-ink); font-weight: 800; letter-spacing: -.01em; }
.clay-auth .auth-sub   { color: var(--clay-ink-mute); }

/* Inputs read as pressed into the card rather than drawn on top of it. */
.clay-auth .form-control,
.clay-auth .form-select {
  background: var(--clay-sunk);
  border: 1px solid transparent;
  border-radius: var(--clay-r-xs);
  box-shadow: var(--clay-shadow-in);
  color: var(--clay-ink);
  padding: 10px 14px;
  min-height: 44px;
}
.clay-auth .form-control:focus,
.clay-auth .form-select:focus {
  background: var(--clay-surface);
  border-color: var(--clay-amber);
  box-shadow: 0 0 0 4px rgba(237,169,43,.20);
  color: var(--clay-ink);
}
.clay-auth .form-control::placeholder { color: var(--clay-ink-mute); }

.clay-auth .input-icon { position: relative; }
/* Aligned to the input's own 50px band, not to 50% of the wrapper: the
   wrapper also holds the validation message, so a centred icon slid to the
   bottom of the box the moment an error appeared. */
.clay-auth .input-icon > i {
  position: absolute; left: 15px; top: 0; height: 50px;
  display: flex; align-items: center;
  color: var(--clay-ink-mute); z-index: 2; pointer-events: none;
}
.clay-auth .input-icon .form-control { padding-left: 44px; }

/* The primary action: one raised amber slab, sized for a thumb. */
.clay-auth .btn-auth,
.clay-auth .btn-auth.btn-primary {
  background: var(--clay-amber) !important;
  color: #3D2A00 !important;
  border: none !important;
  border-radius: var(--clay-r-sm);
  min-height: 46px;
  font-weight: 800;
  font-size: .95rem;
  box-shadow: 0 12px 24px rgba(237,169,43,.32),
              inset 0 -4px 8px rgba(0,0,0,.13),
              inset 0 4px 8px rgba(255,255,255,.40);
  transition: transform .12s ease, box-shadow .12s ease;
}
.clay-auth .btn-auth:hover,
.clay-auth .btn-auth.btn-primary:hover { background: var(--clay-amber) !important; color: #3D2A00 !important; transform: translateY(-1px); }
.clay-auth .btn-auth:active { transform: translateY(1px); box-shadow: var(--clay-shadow-in); }

/* Secondary action stays quiet — one bold thing per screen. */
.clay-auth .btn-outline-secondary,
.clay-auth .btn-outline-primary {
  background: var(--clay-surface);
  border: none;
  border-radius: var(--clay-r-sm);
  min-height: 52px;
  font-weight: 700;
  color: var(--clay-ink-soft);
  box-shadow: var(--clay-shadow-sm);
}
.clay-auth .btn-outline-secondary:hover,
.clay-auth .btn-outline-primary:hover { background: var(--clay-sunk); color: var(--clay-ink); }

.clay-auth .btn-outline-secondary {
  min-height: 44px;
  font-size: .9rem;
}

.clay-auth .divider { display: flex; align-items: center; gap: 12px; color: var(--clay-ink-mute); font-size: .85rem; }
.clay-auth .divider::before,
.clay-auth .divider::after { content: ''; flex: 1; height: 1px; background: var(--clay-sunk); }

/* Demo-credential rows — sunk tiles, one tinted badge each. */
.clay-auth .demo-box {
  background: var(--clay-amber-bg);
  border: none;
  border-radius: var(--clay-r-sm);
  box-shadow: var(--clay-shadow-in);
}
.clay-auth .demo-box-title { color: var(--clay-amber-dp); }
.clay-auth .demo-cred-btn {
  background: var(--clay-surface) !important;
  border: none !important;
  border-radius: var(--clay-r-xs) !important;
  box-shadow: var(--clay-shadow-sm);
  color: var(--clay-ink-soft);
  min-height: 44px;
}
.clay-auth .demo-cred-btn:hover { background: var(--clay-sunk) !important; }
.clay-auth .demo-cred-btn .badge { border-radius: 999px; font-weight: 700; padding: .32em .7em; }
.clay-auth .demo-badge-school { background: var(--clay-blue)  !important; color: #fff !important; }
.clay-auth .demo-badge-parent { background: var(--clay-green) !important; color: #fff !important; }
.clay-auth .demo-badge-driver { background: var(--clay-coral) !important; color: #fff !important; }

.clay-auth .form-check-input { border-radius: 7px; border: none; background-color: var(--clay-sunk); box-shadow: var(--clay-shadow-in); width: 1.2em; height: 1.2em; }
.clay-auth .form-check-input:checked { background-color: var(--clay-amber); box-shadow: none; }

.clay-auth .alert { border: none; border-radius: var(--clay-r-sm); box-shadow: var(--clay-shadow-in); }
.clay-auth .alert-danger  { background: var(--clay-coral-bg); color: var(--clay-coral-dp); }
.clay-auth .alert-success { background: var(--clay-green-bg); color: var(--clay-green-dp); }
.clay-auth .text-muted    { color: var(--clay-ink-mute) !important; }
.clay-auth a              { color: var(--clay-blue-dp); }

/* Language switcher reads as a row of chips, not a wall of link text. */
.clay-auth .lang-btn {
  background: var(--clay-surface) !important;
  border: none;
  border-radius: 999px;
  box-shadow: var(--clay-shadow-sm);
  color: var(--clay-ink-soft) !important;
  padding: .35rem .75rem !important;
  font-weight: 700;
  text-decoration: none !important;
}

/* app.css darkens the alert variants at :root:not([data-theme=light]) — one
   step past .clay — so the clay tints need the same reach to win. */
/* Same two-form treatment for the alert variants. */
[data-theme="dark"] .clay .alert-success { background: var(--clay-green-bg); border-color: transparent; color: #74C98F; }
[data-theme="dark"] .clay .alert-danger  { background: var(--clay-coral-bg); border-color: transparent; color: #EC8A87; }
[data-theme="dark"] .clay .alert-warning { background: var(--clay-amber-bg); border-color: transparent; color: #F0C264; }
[data-theme="dark"] .clay .alert-info    { background: var(--clay-blue-bg);  border-color: transparent; color: #82AEE8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clay .alert-success { background: var(--clay-green-bg); border-color: transparent; color: #74C98F; }
  :root:not([data-theme="light"]) .clay .alert-danger  { background: var(--clay-coral-bg); border-color: transparent; color: #EC8A87; }
  :root:not([data-theme="light"]) .clay .alert-warning { background: var(--clay-amber-bg); border-color: transparent; color: #F0C264; }
  :root:not([data-theme="light"]) .clay .alert-info    { background: var(--clay-blue-bg);  border-color: transparent; color: #82AEE8; }
}

/* Invalid state — Bootstrap's own red is off-palette, and its inline warning
   icon collides with the field icon on the left. */
.clay-auth .form-control.is-invalid,
.clay-auth .form-select.is-invalid {
  border-color: var(--clay-coral);
  box-shadow: 0 0 0 4px rgba(222,90,85,.18);
  background-image: none;
  padding-right: 14px;
}
.clay-auth .invalid-feedback { color: var(--clay-coral-dp); font-weight: 600; }
/* The deep coral is right on ivory but drops to ~3:1 on the dark card, so
   dark gets the lighter tone the dark alerts already use. */
/* The deep coral reads on ivory but drops to ~3:1 on the dark card. */
[data-theme="dark"] .clay-auth .invalid-feedback { color: #EC8A87; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .clay-auth .invalid-feedback { color: #EC8A87; }
}

/* ── File inputs ──────────────────────────────────────────────────────────
   The browser draws its own "Choose File" button inside a file input, and it
   arrives as grey system chrome sitting in the middle of a clay form. Styling
   ::file-selector-button is the only way to reach it; it inherits nothing from
   .form-control, which is why the rest of the field matched and this did not. */
.clay input[type="file"].form-control {
  padding: 7px 12px;
  display: flex;
  align-items: center;
}
.clay input[type="file"]::file-selector-button {
  margin: -7px 12px -7px -12px;
  padding: 9px 15px;
  border: 0;
  border-radius: var(--clay-r-xs) 0 0 var(--clay-r-xs);
  background: var(--clay-amber-bg);
  color: var(--clay-ink);
  font-family: inherit;
  font-weight: 700;
  font-size: .82rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.clay input[type="file"]::file-selector-button:hover {
  background: var(--clay-amber);
  color: #3D2A00;
}

/* ── Sign-in page: home link and secondary links ──────────────────────────
   The page had four stacked full-width buttons under the form and read as a
   menu. Only one alternative sign-in route keeps a button; the rest are links
   in a sentence, which is what they are. */
.clay-auth .auth-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 12px;
  padding: 6px 14px 6px 11px;
  max-width: 430px;
  border-radius: 999px;
  background: var(--clay-surface);
  box-shadow: var(--clay-shadow-sm);
  color: var(--clay-ink-soft);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.clay-auth .auth-home:hover { color: var(--clay-ink); transform: translateY(-1px); }
.clay-auth .auth-home i { font-size: .9rem; }

.clay-auth .auth-links {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--clay-sunk);
  text-align: center;
  font-size: .84rem;
  color: var(--clay-ink-mute);
}
.clay-auth .auth-links a {
  color: var(--clay-amber-dp);
  font-weight: 700;
  text-decoration: none;
}
.clay-auth .auth-links a:hover { text-decoration: underline; }

/* The icon beside a choice's radio. Sized to the label rather than the card so
   it reads as part of the line, not as decoration sitting next to it. */
.clay .pick-icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--clay-amber-dp);
  flex-shrink: 0;
}
.clay .pick-option.is-chosen .pick-icon { color: var(--clay-green-dp); }