/* Blacklink design system, ported from 21st.dev "Glowy Waves Hero" (shadcn default dark, monochrome).
   Canvas glowing waves + near-black canvas + Geist. No build step. */
:root {
    /* shadcn default dark tokens, READ BY THE WAVE CANVAS, keep these names */
    --background: #0a0a0a;
    --foreground: #fafafa;
    --primary: #fafafa;
    --primary-foreground: #18181b;
    --secondary: #262626;
    --accent: #262626;
    --muted: #1c1c1f;
    --border: #27272a;

    /* Blacklink tokens (monochrome) */
    --tl-bg: #0a0a0a;
    --tl-text: #fafafa;
    --tl-heading: #fafafa;
    --tl-muted: #a1a1aa;
    --tl-subtle: #8b8b95; /* lifted from #71717a (4.1:1) to clear WCAG AA 4.5:1 on the near-black bg */
    --tl-border: rgba(250, 250, 250, .09);
    --tl-border-strong: rgba(250, 250, 250, .16);
    --tl-surface: rgba(24, 24, 30, .8); /* all cards: one set, 80% opaque / 20% transparent */
    --tl-surface-2: rgba(255, 255, 255, .06);
    --tl-accent: #fafafa;
    --tl-accent-ink: #fafafa;
    --tl-accent-soft: rgba(250, 250, 250, .10);
    --tl-on-accent: #0a0a0a;
    --tl-success: #4ade80;
    --tl-success-soft: rgba(74, 222, 128, .14);
    --tl-danger: #f87171;
    --tl-danger-soft: rgba(248, 113, 113, .14);
    --tl-warn: #fbbf24;
    --tl-warn-soft: rgba(251, 191, 36, .14);
    --tl-orange: #f97316; /* stops (ST pin), distinct from green PU / red DO / amber warn */
    --tl-stripe: #8b85ff; --tl-stripe-soft: rgba(99, 91, 255, .14);
    --tl-radius: 14px;
    --tl-radius-lg: 18px;
    --tl-grad: linear-gradient(120deg, #fafafa, rgba(250, 250, 250, .55) 55%, rgba(250, 250, 250, .82));
    --tl-glass: rgba(18, 18, 24, .40);
    --tl-glass-2: rgba(255, 255, 255, .07);
    --tl-blur: saturate(160%) blur(22px);
    --tl-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 16px 40px -22px rgba(0, 0, 0, .85);
    --tl-shadow-lg: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 70px -28px rgba(0, 0, 0, .92);
    --tl-glow: 0 0 36px -8px rgba(250, 250, 250, .35);
    --tl-ring: 0 0 0 3px rgba(250, 250, 250, .22);
    --tl-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --tl-sidebar-w: 252px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--tl-bg); color: var(--tl-text); line-height: 1.6;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--tl-text); text-decoration: none; }
h1, h2, h3 { font-family: "Geist", "Inter", ui-sans-serif, sans-serif; font-weight: 600; line-height: 1.08; margin: 0 0 .42em; letter-spacing: -.025em; color: var(--tl-heading); }
h1 { font-size: clamp(20px, 2.6vw, 24px); }
h2 { font-size: clamp(17px, 2.1vw, 21px); }
h3 { font-size: 15.5px; }
p { margin: 0 0 1em; }
.muted { color: var(--tl-muted); }
.mono { font-family: var(--tl-mono); font-feature-settings: "tnum" 1; }
.center { text-align: center; }
.up { text-transform: uppercase; letter-spacing: .2em; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--tl-muted); }
.lead { font-size: 18px; color: var(--tl-muted); line-height: 1.6; }

.app, .nav, .hero, .wrap, .footer { position: relative; z-index: 1; }

/* ============ Motion ============ */
@keyframes tlFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tlPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tlPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .5); } 50% { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); } }
@keyframes tlDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.6); } }
@keyframes tlSpin { to { transform: rotate(360deg); } }
@keyframes tlFlash { from { background: rgba(250, 250, 250, .16); color: #fff; } to { background: transparent; } }
.js .reveal { opacity: 0; }
.js .reveal.in { animation: tlFadeUp .7s cubic-bezier(.16, 1, .3, 1) forwards; }
.js .reveal[data-d="1"].in { animation-delay: .1s; }
.js .reveal[data-d="2"].in { animation-delay: .2s; }
.js .reveal[data-d="3"].in { animation-delay: .3s; }
.js .reveal[data-d="4"].in { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1 !important; animation: none !important; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
    .seg-indicator { transition: none !important; } /* E2: the slide isn't an animation, so it needs its own opt-out */
}
/* D4: touch feedback, interactive cards get an :active press, and a resting elevation on touch-only
   devices (no hover) so taps register. Honors prefers-reduced-motion via the block above. */
.tcard:active, a.metric:active { transform: translateY(-1px); }
@media (hover: none) { .tcard { box-shadow: var(--tl-shadow); } }

/* ============ App shell ============ */
.app { display: flex; min-height: 100dvh; }
.sidebar { width: var(--tl-sidebar-w); flex-shrink: 0; background: rgba(10, 10, 10, .6); backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur);
    border-right: 1px solid var(--tl-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; z-index: 40; }
.nav-group-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-subtle); padding: 14px 12px 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--tl-muted); font-weight: 500; font-size: 14px; margin-bottom: 2px; transition: background .14s, color .14s; }
.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; stroke-width: 2; }
.nav-item:hover { background: var(--tl-surface-2); color: var(--tl-text); }
.nav-item.active { background: rgba(250, 250, 250, .10); color: #fff; box-shadow: inset 0 0 0 1px rgba(250, 250, 250, .14); }
.nav-item.active svg { color: #fff; }
.nav-item .nav-badge { margin-left: auto; background: #fafafa; color: #0a0a0a; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: #fafafa; color: #0a0a0a; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; background: rgba(10, 10, 10, .5); backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur);
    border-bottom: 1px solid var(--tl-border); display: flex; align-items: center; gap: 14px; padding: 0 22px; position: sticky; top: 0; z-index: 30; }
.topbar .tb-title { font-weight: 600; font-size: 14px; letter-spacing: .04em; color: var(--tl-text); }
.topbar .tb-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.content { padding: 28px 24px 70px; max-width: 1180px; width: 100%; margin: 0 auto; position: relative; z-index: 1; }
@media (max-width: 900px) {
    .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--tl-shadow-lg); background: rgba(10, 10, 10, .94); }
    .sidebar.open { transform: none; }
}

/* ============ Public nav + hero ============ */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; background: rgba(10, 10, 10, .5);
    backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur); border-bottom: 1px solid var(--tl-border); position: sticky; top: 0; z-index: 50; }
.brand { font-weight: 700; font-size: 20px; letter-spacing: -.03em; color: var(--tl-heading); }
.brand .dot { color: var(--tl-muted); }
.nav .links { display: flex; align-items: center; gap: 18px; }
.nav .links a { color: var(--tl-muted); font-weight: 500; font-size: 14px; transition: color .15s; }
/* Tighten the marketing nav on the smallest phones so brand + Sign in + Join free + toggle never overflow. */
@media (max-width: 420px) { .nav { padding: 12px 14px; } .nav .links { gap: 12px; } }
.nav .links a:hover { color: var(--tl-text); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 32px 20px 72px; }
.narrow { max-width: 460px; }
.hero { position: relative; text-align: center; padding: 116px 20px 120px; }
.hero h1 { font-size: clamp(40px, 7vw, 72px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; max-width: 940px; margin: 0 auto .32em; }
.hero p { color: var(--tl-muted); font-size: clamp(17px, 2.2vw, 22px); line-height: 1.5; max-width: 700px; margin: 0 auto 34px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; }
.pill { border: 1px solid var(--tl-border); background: rgba(10, 10, 10, .55); backdrop-filter: var(--tl-blur); border-radius: 999px; padding: 8px 16px;
    font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tl-muted); }

/* ============ Buttons (shadcn primary = white / outline) ============ */
/* Primary action button, aligned to the x-ui kit: purple fill, rounded-rect (not a pill). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--tl-purple); color: var(--tl-on-accent); border: 0; border-radius: 10px;
    padding: 11px 22px; font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; position: relative;
    box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .5); transition: transform .12s, box-shadow .2s, filter .15s; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 18px -5px rgba(0, 0, 0, .55); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-loading { opacity: .7; cursor: progress; pointer-events: none; }
.btn.is-loading::after { content: ""; width: 14px; height: 14px; border: 2px solid rgba(127, 127, 127, .35); border-top-color: currentColor; border-radius: 50%; animation: tlSpin .7s linear infinite; }
.btn.ghost { background: rgba(250, 250, 250, .05); color: var(--tl-text); border: 1px solid var(--tl-border-strong); box-shadow: none; backdrop-filter: var(--tl-blur); }
.btn.ghost:hover { background: rgba(250, 250, 250, .1); border-color: rgba(250, 250, 250, .4); }
.btn.full { width: 100%; }
.btn.lg { padding: 14px 30px; font-size: 15px; }
.btn.sm { padding: 7px 16px; font-size: 13px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .btn.sm { min-height: 44px; padding: 10px 16px; } }
/* Danger variant, matches the new x-ui.button language (soft fill → solid on hover, real press). */
.btn.danger { background: var(--tl-danger-soft); color: var(--tl-danger); border: 1px solid transparent; box-shadow: none; }
.btn.danger:hover { background: var(--tl-danger); color: #fff; transform: translateY(-1px); }
.btn.danger:active { transform: translateY(0) scale(.985); }

/* ============ Cards (dark glass over the waves) ============ */
.card { background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: 20px; box-shadow: var(--tl-shadow); backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur); }
.card + .card { margin-top: 18px; }
/* K1: card/empty layout modifiers, replace the inline padding/flex/border resets that recurred in the admin. */
.card.flush { padding: 0; overflow: hidden; }
.card.col { display: flex; flex-direction: column; }
.empty.inline { border: 0; margin: 0; background: transparent; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0 0 4px; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
@media (max-width: 980px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .metrics { grid-template-columns: 1fr; } }
.metric { background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: 18px; box-shadow: var(--tl-shadow); backdrop-filter: var(--tl-blur); transition: transform .15s, box-shadow .15s, border-color .15s; }
a.metric { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.metric:hover { border-color: var(--tl-border-strong); transform: translateY(-2px); }
.metric .m-ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--tl-surface-2); color: var(--tl-text); margin-bottom: 12px; border: 1px solid var(--tl-border); }
.metric .m-ico svg { width: 20px; height: 20px; stroke-width: 2; }
.metric .m-ico.green { color: var(--tl-success); } .metric .m-ico.red { color: var(--tl-danger); } .metric .m-ico.amber { color: var(--tl-warn); }
.metric .m-ico.brand { color: var(--tl-purple); background: var(--tl-purple-soft); border-color: var(--tl-purple-soft); }
.metric .m-num { font-family: var(--tl-mono); font-size: 30px; font-weight: 600; color: var(--tl-heading); letter-spacing: -.02em; line-height: 1.1; }
.metric .m-lbl { color: var(--tl-muted); font-size: 13px; font-weight: 500; margin-top: 2px; text-transform: uppercase; letter-spacing: .1em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; background: var(--tl-surface); backdrop-filter: var(--tl-blur); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: 24px 22px; box-shadow: var(--tl-shadow); }
.step .n { font-family: var(--tl-mono); font-size: 13px; font-weight: 700; color: #0a0a0a; background: #fafafa; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 14px; }
.step h3 { font-size: 16px; margin: 0 0 6px; }
.step p { margin: 0; font-size: 14.5px; color: var(--tl-muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 620px) { .stats { grid-template-columns: 1fr; } }
.stat { text-align: center; padding: 8px; }
.stat .num { font-family: var(--tl-mono); font-size: 32px; font-weight: 600; color: var(--tl-heading); letter-spacing: -.02em; }
.stat .lbl { color: var(--tl-muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .18em; margin-top: 4px; }

/* ============ Forms ============ */
label { display: block; font-size: 13px; font-weight: 500; margin: 14px 0 6px; color: var(--tl-text); }
input, select, textarea { width: 100%; max-width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid var(--tl-border-strong); border-radius: 11px; font-size: 15px; font-family: inherit;
    background: rgba(255, 255, 255, .04); color: var(--tl-text); transition: border-color .15s, box-shadow .15s, background .15s; }
input::placeholder, textarea::placeholder { color: var(--tl-subtle); }
/* Post-trip form: deliberately ghosted empty/placeholder states (inputs + empty required selects). */
[data-trip-form] input::placeholder, [data-trip-form] textarea::placeholder { opacity: .45; }
[data-trip-form] select:required:invalid { color: var(--tl-subtle); }
input[type=checkbox], input[type=radio] { width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; accent-color: var(--tl-purple); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tl-purple); box-shadow: var(--tl-ring); background: rgba(255, 255, 255, .06); }
select { color-scheme: dark; }
/* Date + file inputs have intrinsic widths that overflow narrow mobile containers, force them to fit. */
input[type=date] { -webkit-appearance: none; appearance: none; }
input[type=file] { padding: 10px; background: rgba(255, 255, 255, .03); color: var(--tl-muted); overflow: hidden; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > .col { flex: 1 1 200px; min-width: 0; }
/* A pair that stays side-by-side on every width (e.g. Passengers / Bags), never wraps. */
.row.row-pair { flex-wrap: nowrap; gap: 10px; }
.row.row-pair > .col { flex: 1 1 0; }
.section-title { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-subtle); margin: 26px 0 4px; padding-top: 18px; border-top: 1px solid var(--tl-border); }
.hint { font-size: 12.5px; color: var(--tl-subtle); margin-top: 4px; }
.req { color: var(--tl-danger); margin-left: 2px; font-weight: 700; }
.field-err { color: var(--tl-danger); font-size: 12.5px; margin-top: 5px; }
/* Any .ff that rendered an inline error gets its control outlined red, no per-input markup needed. */
.ff:has(.field-err) > input, .ff:has(.field-err) select, .ff:has(.field-err) textarea, .ff:has(.field-err) .ac input, .ff:has(.field-err) .tl-money input { border-color: var(--tl-danger); }

/* ============ Alerts / badges / live ============ */
.errors { background: var(--tl-danger-soft); border: 1px solid rgba(248, 113, 113, .35); color: #fecaca; border-radius: 11px; padding: 13px 15px; margin-bottom: 16px; animation: tlPop .3s ease; }
.status { background: var(--tl-success-soft); border: 1px solid rgba(74, 222, 128, .35); color: #bbf7d0; border-radius: 11px; padding: 13px 15px; margin-bottom: 16px; animation: tlPop .3s ease; }
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.badge.pending { background: var(--tl-warn-soft); color: var(--tl-warn); }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--tl-success); text-transform: uppercase; letter-spacing: .14em; }
.live .ld { width: 9px; height: 9px; border-radius: 50%; background: var(--tl-success); box-shadow: 0 0 8px var(--tl-success); animation: tlDot 1.4s ease-in-out infinite; }
.live .upd { color: var(--tl-subtle); font-weight: 500; font-family: var(--tl-mono); font-size: 11px; letter-spacing: 0; text-transform: none; }
.footer { text-align: center; color: var(--tl-subtle); font-size: 13px; padding: 36px 20px; border-top: 1px solid var(--tl-border); margin-top: 40px; }

/* ============ Trip cards ============ */
.tcard { background: var(--tl-surface); border: 1px solid var(--tl-border); border-left: 3px solid var(--tl-border-strong); border-radius: var(--tl-radius); padding: 18px 20px; margin-top: 16px; box-shadow: var(--tl-shadow); backdrop-filter: var(--tl-blur); transition: transform .16s, box-shadow .16s, border-color .16s; }
.tcard:hover { transform: translateY(-2px); border-color: var(--tl-border-strong); }
.tcard.is-new { animation: tlPop .45s cubic-bezier(.16, 1, .3, 1); }
.tcard.urgent { border-left-color: var(--tl-danger); }
.tcard.urgent .tbadge.urgent { animation: tlPulse 1.8s ease-out infinite; }
.tcard-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* flex-shrink:0 + nowrap: the fare headline ("$220.00 - ~18 mi") is one unit and NEVER compresses
   or wraps internally - a long provider name absorbs the squeeze by wrapping on its own side instead
   (without this, the name squeezed .tprice and the miles stacked vertically inside the price). */
.tprice { font-family: var(--tl-mono); font-size: 22px; font-weight: 700; color: var(--tl-purple); letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
/* Route distance beside the fare: styled AS the fare (owner 2026-08-06) - it inherits the price
   element entirely, so it tracks the fare's size at every breakpoint with no separate rule. */
.tmiles { font: inherit; color: inherit; letter-spacing: inherit; }
.provider-name { font-weight: 600; color: var(--tl-text); font-size: 14px; text-align: right; }
.tservice { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tl-muted); margin: 9px 0 3px; }
.troute { font-weight: 700; font-size: 16px; margin: 2px 0 6px; color: var(--tl-heading); }
.troute .arrow { color: var(--tl-purple); font-weight: 700; margin: 0 3px; }
.tmeta { color: var(--tl-muted); font-size: 13.5px; }
.tclass { color: var(--tl-purple); font-weight: 700; }
.tcountdown { margin-top: 9px; }
.countdown { display: inline-flex; align-items: center; gap: 5px; font-family: var(--tl-mono); font-weight: 600; color: var(--tl-text); background: var(--tl-surface-2); border: 1px solid var(--tl-border); border-radius: 999px; padding: 2px 9px; font-size: 12px; }
.countdown:empty { display: none; }
/* var(--tl-danger) tracks the theme; hardcoded #fecaca (pale pink) was unreadable on light. */
.countdown.soon { color: var(--tl-danger); background: var(--tl-danger-soft); border-color: rgba(248, 113, 113, .35); }
.tbadge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; margin-left: 8px; vertical-align: middle; text-transform: uppercase; }
/* Unified status look everywhere: done = green glow, pending = orange glow, stopped = red glow. */
.tbadge.completed, .tbadge.settled { background: var(--tl-success-soft); color: var(--tl-success); box-shadow: 0 0 9px -1px rgba(74, 222, 128, .55); }
.tbadge.open, .tbadge.claimed, .tbadge.en_route, .tbadge.on_location, .tbadge.passenger_on_board, .tbadge.in_progress,
.tbadge.disputed, .tbadge.cancel_requested, .tbadge.claim_canceled, .tbadge.no_show_flagged, .tbadge.no_show_escalated { background: var(--tl-warn-soft); color: var(--tl-warn); box-shadow: 0 0 9px -1px rgba(251, 191, 36, .5); }
.tbadge.urgent, .tbadge.canceled, .tbadge.no_show, .tbadge.rejected, .tbadge.overdue, .tbadge.failed, .tbadge.refunded { background: var(--tl-danger-soft); color: var(--tl-danger); box-shadow: 0 0 9px -1px rgba(248, 113, 113, .55); }
.tbadge.expired { background: var(--tl-warn-soft); color: var(--tl-warn); box-shadow: 0 0 9px -1px rgba(251, 191, 36, .5); }
.tbadge.stripe { background: var(--tl-stripe-soft); color: var(--tl-stripe); box-shadow: none; }
/* Right-align + tabular numerals for numeric table columns (money, counts, ratings). */
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Screen-reader-only (visually hidden but announced), e.g. an empty action-column header. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============ Empty ============ */
.empty { text-align: center; padding: 46px 24px; border: 1.5px dashed var(--tl-border-strong); border-radius: var(--tl-radius-lg); background: var(--tl-surface); backdrop-filter: var(--tl-blur); margin-top: 18px; }

/* ============ Spotlight + flash (white glow, monochrome) ============ */
.metric, .tcard { position: relative; overflow: hidden; }
.metric::after, .tcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(250, 250, 250, .10), transparent 44%); }
.metric:hover::after, .tcard:hover::after { opacity: 1; }
.metric:hover, .tcard:hover { box-shadow: var(--tl-shadow), 0 0 0 1px rgba(250, 250, 250, .18); }
.m-num.flash { animation: tlFlash .9s ease; border-radius: 8px; padding: 0 4px; margin: 0 -4px; }

/* ============ Theme toggle button ============ */
.theme-toggle { background: transparent; border: 1px solid var(--tl-border); border-radius: 999px; width: 36px; height: 36px;
    display: inline-grid; place-items: center; cursor: pointer; color: var(--tl-muted); padding: 0; transition: color .15s, border-color .15s, background .15s; }
.theme-toggle:hover { color: var(--tl-text); border-color: var(--tl-border-strong); background: var(--tl-surface-2); }
.theme-toggle svg { width: 17px; height: 17px; }

/* ============ LIGHT THEME (toggle), shadcn default light, daylight-friendly ============ */
html.light {
    --background: #ffffff; --foreground: #09090b; --primary: #18181b; --primary-foreground: #fafafa;
    --secondary: #f4f4f5; --accent: #f4f4f5; --muted: #f4f4f5; --border: #e4e4e7;

    --tl-bg: #ffffff; --tl-text: #1c1c20; --tl-heading: #09090b; --tl-muted: #52525b; --tl-subtle: #6b6b73; /* #8a8a93 (3.4:1) → AA 4.5:1 on white */
    --tl-border: rgba(9, 9, 11, .09); --tl-border-strong: rgba(9, 9, 11, .15);
    --tl-surface: rgba(255, 255, 255, .86); --tl-surface-2: rgba(9, 9, 11, .05);
    --tl-accent: #18181b; --tl-accent-ink: #18181b; --tl-accent-soft: rgba(24, 24, 27, .08); --tl-on-accent: #ffffff;
    --tl-success: #16a34a; --tl-success-soft: rgba(22, 163, 74, .12);
    --tl-danger: #dc2626; --tl-danger-soft: rgba(220, 38, 38, .10);
    --tl-warn: #d97706; --tl-warn-soft: rgba(217, 119, 6, .12);
    --tl-orange: #ea580c;
    --tl-stripe: #635bff; --tl-stripe-soft: rgba(99, 91, 255, .12);
    --tl-grad: linear-gradient(120deg, #18181b, rgba(24, 24, 27, .55) 55%, #18181b);
    --tl-glass: rgba(255, 255, 255, .56); --tl-glass-2: rgba(9, 9, 11, .05);
    --tl-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 30px -16px rgba(9, 9, 11, .16);
    --tl-shadow-lg: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -24px rgba(9, 9, 11, .22);
    --tl-glow: 0 0 36px -10px rgba(24, 24, 27, .18); --tl-ring: 0 0 0 3px rgba(24, 24, 27, .16);
}
html.light .nav, html.light .topbar { background: rgba(255, 255, 255, .6); }
html.light .sidebar { background: rgba(255, 255, 255, .72); }
@media (max-width: 900px) { html.light .sidebar { background: rgba(255, 255, 255, .97); } }
html.light .pill { background: rgba(255, 255, 255, .6); }
html.light .btn:hover { background: #000; box-shadow: 0 0 0 1px rgba(9, 9, 11, .2), 0 12px 30px -10px rgba(9, 9, 11, .45); }
html.light .btn.is-loading::after { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
html.light .btn.ghost { background: rgba(9, 9, 11, .04); color: var(--tl-text); border-color: var(--tl-border-strong); }
html.light .btn.ghost:hover { background: rgba(9, 9, 11, .08); border-color: rgba(9, 9, 11, .3); }
html.light input, html.light textarea, html.light select { background: #fff; }
html.light input:focus, html.light textarea:focus, html.light select:focus { background: #fff; border-color: rgba(24, 24, 27, .45); }
html.light select { color-scheme: light; }
html.light input[type=file] { background: #f4f4f5; color: var(--tl-muted); }
html.light .step .n, html.light .avatar, html.light .nav-item .nav-badge { background: #18181b; color: #fff; }
html.light .nav-item.active { background: rgba(24, 24, 27, .08); color: #09090b; box-shadow: inset 0 0 0 1px rgba(24, 24, 27, .12); }
html.light .nav-item.active svg { color: #09090b; }
html.light .metric::after, html.light .tcard::after { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(9, 9, 11, .06), transparent 44%); }
html.light .metric:hover, html.light .tcard:hover { box-shadow: var(--tl-shadow), 0 0 0 1px rgba(9, 9, 11, .12); }
html.light .errors { color: #991b1b; } html.light .status { color: #166534; }

/* ============ Purple accent layer (mist + muted icons, both modes) ============ */
:root {
    --tl-purple: #b6a8f8; --tl-purple-strong: #8b7cf6; --tl-purple-soft: rgba(139, 124, 246, .14); --tl-mist: rgba(139, 124, 246, .28);
    --tl-grad: linear-gradient(120deg, #cabffb, #8b7cf6 58%, #b6a8f8);
}
html.light {
    --tl-purple: #6d5dd3; --tl-purple-strong: #5b4bc4; --tl-purple-soft: rgba(109, 93, 211, .10); --tl-mist: rgba(124, 108, 255, .20);
    --tl-grad: linear-gradient(120deg, #6d5dd3, #5b4bc4 58%, #6d5dd3);
}
a { color: var(--tl-purple); }
.brand .dot { background: var(--tl-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* purple mist glow behind the hero (visible in light + dark) */
.hero { position: relative; }
.hero::before { content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
    width: min(780px, 94vw); height: 540px; border-radius: 50%; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, var(--tl-mist), transparent 72%); }
.hero > * { position: relative; z-index: 1; }

.theme-toggle:hover { color: var(--tl-purple); border-color: var(--tl-purple-soft); }

/* ============ Signup tabs (Driver / Provider) ============ */
.signup-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--tl-glass-2);
    border: 1px solid var(--tl-border); backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur); margin: 4px auto 26px; }
.seg-tab { position: relative; z-index: 1; border: 0; background: transparent; color: var(--tl-muted); font-family: inherit; font-weight: 600;
    font-size: 14px; letter-spacing: .02em; padding: 9px 32px; border-radius: 999px; cursor: pointer; transition: color .25s; }
.seg-tab.active { color: var(--tl-on-accent); }
.seg-indicator { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
    background: var(--tl-accent); box-shadow: var(--tl-glow); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.signup-seg.is-provider .seg-indicator { transform: translateX(100%); }
.signup-panel { animation: tlFadeUp .35s cubic-bezier(.16, 1, .3, 1); }
.signup-panel[hidden] { display: none; }
.signup-panel.show { animation: tlFadeUp .35s cubic-bezier(.16, 1, .3, 1); }

/* ============ Admin (broker control room) ============ */
.seg-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chip { display: inline-flex; align-items: center; padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--tl-muted); background: var(--tl-surface); border: 1px solid var(--tl-border); backdrop-filter: var(--tl-blur);
    transition: color .14s, border-color .14s, background .14s; }
.chip:hover { color: var(--tl-text); border-color: var(--tl-border-strong); }
.chip.active { color: var(--tl-on-accent); background: var(--tl-accent); border-color: transparent; }
.dim { color: var(--tl-muted); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-subtle);
    padding: 13px 18px; border-bottom: 1px solid var(--tl-border); white-space: nowrap; }
.tbl tbody td { padding: 13px 18px; border-bottom: 1px solid var(--tl-border); color: var(--tl-text); vertical-align: middle; white-space: nowrap; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: var(--tl-surface-2); }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--tl-border); font-size: 14px; }
.kv:last-child { border-bottom: 0; }
.kv > span { color: var(--tl-muted); }
.kv > b, .kv > a { font-weight: 600; text-align: right; }

/* ============ Quality polish (global, lifts every page) ============ */
::selection { background: rgba(147, 80, 255, .38); color: #fff; }
html.light ::selection { background: rgba(109, 93, 211, .28); color: #0a0a0a; }

/* refined scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--tl-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--tl-border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--tl-muted); background-clip: padding-box; }

/* accessible, on-brand focus rings */
a:focus-visible, button:focus-visible, .nav-item:focus-visible, .chip:focus-visible, .seg-tab:focus-visible, .theme-toggle:focus-visible, [data-profile-toggle]:focus-visible {
    outline: 2px solid var(--tl-purple, var(--tl-accent)); outline-offset: 2px; border-radius: 8px;
}

/* gentle page-load entrance for app content (portal + admin) */
@keyframes tlPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.js .content { animation: tlPageIn .5s cubic-bezier(.16, 1, .3, 1) both; }

/* card + input refinements */
.card { transition: border-color .18s, box-shadow .18s, transform .18s; }
.card:hover { border-color: var(--tl-border-strong); }
input, select, textarea { transition: border-color .15s, box-shadow .15s, background .15s; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--tl-muted); }
.btn:active { transform: translateY(0) scale(.985); }
.btn.sm svg, .nav-item svg { flex-shrink: 0; }

/* links: clean by default inside the authed portals/admin (.content), color/context carries the
   affordance, no underline. Marketing pages (.wrap) keep the premium hover underline. */
.content a:not(.btn):not(.nav-item):not(.chip):not(.metric):not(.qa):hover { color: var(--tl-purple); }
.wrap a:not(.btn):not(.nav-item):not(.chip):not(.metric):not(.qa):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* tighter mobile padding + readable tables */
@media (max-width: 640px) {
    .content { padding: 22px 16px 60px; }
    .wrap { padding: 24px 16px 56px; }
    .page-head { gap: 10px; }
    .tbl thead th, .tbl tbody td { padding: 12px 14px; }
}

/* ───────── analytics ───────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kpi { background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: 16px 18px; backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur); box-shadow: var(--tl-shadow); transition: border-color .18s, transform .18s; }
.kpi:hover { border-color: var(--tl-border-strong); transform: translateY(-2px); }
.kpi .k-num { font-family: var(--tl-mono); font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--tl-heading); letter-spacing: -.02em; }
.kpi .k-lbl { color: var(--tl-muted); font-size: 11px; font-weight: 600; margin-top: 5px; text-transform: uppercase; letter-spacing: .07em; }
/* Headline KPIs, a 4-up hero row above the denser secondary grid (Analytics hierarchy). */
.kpis-hero { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.kpi-hero { padding: 20px 22px; border-color: var(--tl-border-strong); }
.kpi-hero .k-num { font-size: 32px; }
.kpi-hero .k-lbl { font-size: 12px; color: var(--tl-purple); }
@media (max-width: 720px) { .kpis-hero { grid-template-columns: repeat(2, 1fr); } }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.charts-grid .span-2 { grid-column: span 2; }
.charts-grid .card { padding: 22px; }
.chart-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-subtle); margin-bottom: 16px; }
.chart-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.chart-top .chip { padding: 4px 11px; font-size: 12px; }
.chart-box { position: relative; height: 260px; }
.charts-grid .span-2 .chart-box { height: 300px; }

@media (max-width: 860px) {
    .charts-grid { grid-template-columns: 1fr; }
    .charts-grid .span-2 { grid-column: auto; }
}

/* ───────── dashboard control room ───────── */
.dash-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
/* min-width:0 on the grid's DIRECT children lets them shrink below content width (no phone overflow -
   without it the 1fr track expands to the widest row and the page scrolls sideways). */
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } .dash-grid > * { min-width: 0; } }
.panel { overflow: hidden; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--tl-border); }
.stat-panel .panel-head { border-bottom: 0; padding-bottom: 0; }
.panel-head h2 { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--tl-heading); margin: 0; }
.panel-link { font-size: 12px; font-weight: 600; color: var(--tl-purple); white-space: nowrap; }
.panel-link:hover { color: var(--tl-purple-strong); }
.panel-empty { padding: 28px 22px; color: var(--tl-muted); font-size: 13.5px; text-align: center; }

/* stat panel */
.stat-panel { padding: 20px; }
.big-stat { font-family: var(--tl-mono); font-size: 40px; font-weight: 700; color: var(--tl-heading); letter-spacing: -.02em; line-height: 1.05; margin-top: 12px; }
.big-stat-sub { margin: 6px 0 16px; font-size: 13px; }
.kv-rows { border-top: 1px solid var(--tl-border); padding-top: 6px; }
.kv-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 13.5px; color: var(--tl-text); }
.kv-row + .kv-row { border-top: 1px solid var(--tl-border); }
.kv-row .mono { color: var(--tl-heading); font-weight: 600; }

/* review / attention queues */
.queue { display: flex; flex-direction: column; }
.queue-row { display: flex; align-items: center; gap: 11px; padding: 13px 20px; border-bottom: 1px solid var(--tl-border); transition: background .14s; }
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: var(--tl-surface-2); }
/* Live activity feed: bound the height so 12 rows never push the right-column desk down; scroll inside. */
.queue.activity-feed { max-height: 360px; overflow-y: auto; }
.q-tag { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tl-purple); background: var(--tl-purple-soft); border-radius: 999px; padding: 3px 9px; flex-shrink: 0; }
.q-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: var(--tl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-meta { font-size: 12.5px; white-space: nowrap; flex-shrink: 0; }

/* ---- dashboard ops layer: at-risk callout, today band, inline actions, live status ---- */
.riskcard { border-color: var(--tl-danger-soft); background: linear-gradient(180deg, var(--tl-danger-soft), var(--tl-surface) 64%); padding: 0; overflow: visible; margin-bottom: 24px; }
.risk-head { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--tl-border); flex-wrap: wrap; }
.risk-head strong { color: var(--tl-heading); font-size: 14px; }
.risk-head .muted { font-size: 12px; }
.risk-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tl-danger-soft); color: var(--tl-danger); flex-shrink: 0; }
.risk-rows { display: flex; flex-direction: column; }
.risk-row { display: flex; align-items: center; gap: 11px; padding: 11px 18px; border-bottom: 1px solid var(--tl-border); transition: background .14s; }
.risk-row:last-child { border-bottom: 0; border-radius: 0 0 var(--tl-radius-lg) var(--tl-radius-lg); }
.risk-row:hover { background: var(--tl-surface-2); }
.risk-sev { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; flex-shrink: 0; white-space: nowrap; background: var(--tl-warn-soft); color: var(--tl-warn); }
.risk-row.sev-overdue .risk-sev, .risk-row.sev-soon .risk-sev { background: var(--tl-danger-soft); color: var(--tl-danger); }
.risk-cta { font-size: 12px; font-weight: 600; color: var(--tl-purple); white-space: nowrap; flex-shrink: 0; }
/* inline at-risk assign popover (native <details>) */

.today-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.tstat { background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: 16px 18px; backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur); box-shadow: var(--tl-shadow); transition: border-color .18s, transform .18s; }
.tstat:hover { border-color: var(--tl-border-strong); transform: translateY(-2px); }
.tstat.risk { border-color: var(--tl-danger-soft); }
.t-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; min-height: 22px; }
.t-lbl { color: var(--tl-muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.t-num { font-family: var(--tl-mono); font-size: 25px; font-weight: 700; line-height: 1.05; color: var(--tl-heading); letter-spacing: -.02em; }
.t-delta { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 600; }
.t-delta.up { color: var(--tl-success); }
.t-delta.down { color: var(--tl-danger); }
.t-delta.flat { color: var(--tl-subtle); }
.t-sub { display: block; margin-top: 6px; font-size: 11.5px; color: var(--tl-muted); }
.spark { width: 64px; height: 22px; overflow: visible; flex-shrink: 0; }
.spark polyline { fill: none; stroke: var(--tl-subtle); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.spark.up polyline { stroke: var(--tl-purple); }

.q-act { margin: 0; flex-shrink: 0; display: flex; }
.qbtn { font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--tl-border-strong); background: var(--tl-surface-2); color: var(--tl-text); cursor: pointer; white-space: nowrap; transition: border-color .14s, background .14s, color .14s; }
.qbtn:hover { border-color: var(--tl-purple-soft); color: var(--tl-heading); }
.qbtn.ok:hover { border-color: var(--tl-success); color: var(--tl-success); background: var(--tl-success-soft); }
.age-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; background: var(--tl-surface-2); color: var(--tl-muted); }
.age-pill.sev-aging { background: var(--tl-warn-soft); color: var(--tl-warn); }
.age-pill.sev-stale { background: var(--tl-danger-soft); color: var(--tl-danger); }

.live[data-state="connecting"], .live[data-state="reconnecting"] { color: var(--tl-warn); }
.live[data-state="connecting"] .ld, .live[data-state="reconnecting"] .ld { background: var(--tl-warn); box-shadow: 0 0 8px var(--tl-warn); }
.live[data-state="polling"] { color: var(--tl-subtle); }
.live[data-state="polling"] .ld { background: var(--tl-subtle); box-shadow: none; animation: none; }

@media (max-width: 980px) { .today-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .today-band { grid-template-columns: 1fr; } }

/* ───────── live market, real-time feed: trip body (purple) + driver match (green), mobile-first ─────────
   One vertical card at every width; a CLAIMED card splits into the "exchange" (trip left / driver right) only
   on desktop. No grid seam, no empty driver pane, no backdrop-blur (cards sit on a solid page bg). */
.mkt-list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; }
.mkt-card { display: flex; flex-direction: column; border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    overflow: hidden; background: var(--tl-surface); box-shadow: var(--tl-shadow); }

/* the trip (always present): provider/purple identity via the left accent + a faint wash */
.mkt-body { padding: 14px 16px 14px 18px; min-width: 0; border-left: 3px solid var(--tl-purple);
    background: linear-gradient(180deg, rgba(147, 80, 255, .12), transparent 62%); }
.mkt-card.urgent .mkt-body { border-left-color: var(--tl-danger); background: linear-gradient(180deg, rgba(248, 113, 113, .13), transparent 62%); }
html.light .mkt-body { background: linear-gradient(180deg, rgba(109, 93, 211, .10), transparent 62%); }
html.light .mkt-card.urgent .mkt-body { background: linear-gradient(180deg, rgba(220, 38, 38, .08), transparent 62%); }
.mkt-row1 { display: flex; align-items: center; gap: 8px; }
.mkt-price { font-family: var(--tl-mono); font-weight: 700; font-size: 18px; color: var(--tl-purple); }
.mkt-ago { font-size: 11.5px; color: var(--tl-subtle); font-family: var(--tl-mono); white-space: nowrap; margin-left: auto; }
.mkt-body .tservice { margin: 8px 0 2px; }
.mkt-route { font-size: 15px; font-weight: 700; color: var(--tl-heading); margin-top: 4px; overflow-wrap: anywhere; }
.mkt-route .arrow { color: var(--tl-purple); font-weight: 700; margin: 0 4px; }
.mkt-by { font-size: 12.5px; color: var(--tl-muted); margin-top: 4px; }

/* open: a slim neutral awaiting bar (never a pane, never the green driver accent) */
.mkt-await { display: flex; align-items: center; gap: 8px; padding: 8px 16px 9px 18px; border-top: 1px solid var(--tl-border); font-size: 13px; color: var(--tl-muted); }
.mkt-wd { width: 8px; height: 8px; border-radius: 50%; background: var(--tl-subtle); animation: tlDot 1.2s ease-in-out infinite; flex-shrink: 0; }

/* claimed: the driver match strip (green), the "handoff" from the purple trip */
.mkt-match { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-top: 1px solid var(--tl-border); border-left: 3px solid #4ade80;
    background: linear-gradient(180deg, rgba(74, 222, 128, .12), rgba(74, 222, 128, .03)); }
html.light .mkt-match { background: linear-gradient(180deg, rgba(22, 163, 74, .11), rgba(22, 163, 74, .03)); }
.mkt-match-i { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(74, 222, 128, .16); color: #4ade80; }
.mkt-match-i svg { width: 17px; height: 17px; }
.mkt-match-main { flex: 1; min-width: 0; }
.mkt-match-top { display: flex; align-items: baseline; gap: 8px; }
.mkt-driver { font-size: 14.5px; font-weight: 700; color: var(--tl-heading); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-stars { color: #4ade80; font-weight: 700; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; }
html.light .mkt-stars, html.light .mkt-match-i { color: #16a34a; }
html.light .mkt-match-i { background: rgba(22, 163, 74, .14); }
.mkt-match-sub { font-size: 12px; color: var(--tl-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-match .tbadge { margin: 0 0 0 auto; flex-shrink: 0; }

.mkt-card.open.flash { animation: mktFlashP 1.6s cubic-bezier(.4, 0, .2, 1); }
.mkt-card.claimed.flash { animation: mktFlashG 1.6s cubic-bezier(.4, 0, .2, 1); }
@keyframes mktFlashP { 0% { box-shadow: 0 0 0 2px var(--tl-purple), 0 0 28px -2px rgba(147, 80, 255, .7); } 100% { box-shadow: var(--tl-shadow); } }
@keyframes mktFlashG { 0% { box-shadow: 0 0 0 2px #4ade80, 0 0 28px -2px rgba(74, 222, 128, .7); } 100% { box-shadow: var(--tl-shadow); } }
@media (prefers-reduced-motion: reduce) { .mkt-card.flash { animation: none; } }

/* desktop: a CLAIMED card recreates the marketplace "exchange": trip left, driver match right, the green
   3px divider carrying the handoff meaning the old center connector used to. Open cards stay single-pane. */
@media (min-width: 721px) {
    .mkt-card.claimed { flex-direction: row; align-items: stretch; }
    .mkt-card.claimed .mkt-body { flex: 1 1 58%; }
    .mkt-card.claimed .mkt-match { flex: 0 0 42%; border-top: 0; }
}

/* ───────── animated bar card (ported 1:1 from 21st.dev animated-card-chart, data-driven) ───────── */
.barcard { position: relative; }
.barviz { position: relative; height: 300px; border-radius: 12px; overflow: hidden; }
.barviz .b-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .6;
    background-image: linear-gradient(to right, rgba(128, 128, 128, .14) 1px, transparent 1px), linear-gradient(to bottom, rgba(128, 128, 128, .14) 1px, transparent 1px);
    background-size: 22px 22px; background-position: center;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 58%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 58%, transparent 100%); }
.barviz .b-glow { position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(ellipse 56% 56% at 50% 64%, var(--tl-purple-soft), transparent 70%); }
.barviz .b-reveal { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .5s cubic-bezier(.6, .6, 0, 1);
    background: linear-gradient(to top, var(--tl-purple-soft) 0%, transparent 55%); }
.barcard:hover .barviz .b-reveal { opacity: 1; }
.barviz .bars { position: absolute; inset: 0; z-index: 4; display: flex; align-items: flex-end; gap: 5px; padding: 30px 6px 0;
    transition: transform .5s cubic-bezier(.6, .6, 0, 1); }
.barcard:hover .barviz .bars { transform: scale(1.05); }
.barviz .bar { flex: 1 1 0; min-width: 3px; height: var(--h); border-radius: 3px 3px 0 0; transform-origin: bottom;
    background: linear-gradient(to top, var(--tl-purple-strong), var(--tl-purple));
    animation: barGrow .65s cubic-bezier(.5, 1.35, .4, 1) both; }
.barviz .bar.peak { background: linear-gradient(to top, #f59e0b, #fbbf24); }
@keyframes barGrow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.barviz .b-pills { position: absolute; top: 12px; left: 12px; z-index: 8; display: flex; gap: 6px; transition: opacity .3s ease; pointer-events: none; }
.barcard:hover .barviz .b-pills { opacity: 0; }
.b-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--tl-text);
    background: var(--tl-glass); border: 1px solid var(--tl-border); border-radius: 999px; padding: 3px 9px; backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur); }
.b-pill i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.barviz .b-tip { position: absolute; left: 50%; top: 16px; z-index: 9; transform: translate(-50%, -8px); opacity: 0; white-space: nowrap; pointer-events: none;
    background: var(--tl-glass); border: 1px solid var(--tl-border); border-radius: 10px; padding: 9px 13px; backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur);
    transition: opacity .5s cubic-bezier(.6, .6, 0, 1), transform .5s cubic-bezier(.6, .6, 0, 1); }
.barcard:hover .barviz .b-tip { opacity: 1; transform: translate(-50%, 0); }
/* hide the window summary while inspecting a single bar */
.barviz.bar-active .b-tip { opacity: 0; }
.b-tip-row { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--tl-heading); }
.b-tip-row i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.b-tip-sub { font-size: 11.5px; color: var(--tl-muted); margin-top: 3px; }

/* per-bar tooltip (date + count), follows the hovered bar, clamped inside the card */
.barviz .bar-tip { position: absolute; top: 16px; left: 50%; z-index: 10; transform: translateX(-50%); opacity: 0; pointer-events: none; white-space: nowrap;
    font-size: 12px; font-weight: 600; color: var(--tl-heading);
    background: var(--tl-glass); border: 1px solid var(--tl-border); border-radius: 999px; padding: 5px 12px; backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur);
    transition: opacity .16s ease, left .12s cubic-bezier(.6, .6, 0, 1); }
.barviz.bar-active .bar-tip { opacity: 1; }
.barviz .bar { cursor: default; transition: filter .15s; }
.barviz.bar-active .bar:not(:hover) { filter: saturate(.55) opacity(.6); }
@media (prefers-reduced-motion: reduce) { .barviz .bar { animation: none; } .barcard:hover .barviz .bars { transform: none; } }
/* On small screens shrink the pulse chart + cap the activity feed so the desk cards stay reachable. */
@media (max-width: 640px) { .barviz { height: 210px; } .queue.activity-feed { max-height: 260px; } }

/* ============================================================================
   DRIVER surface, legacy islands still in use: Live Market radar/empty state, claim cards, toast
   ============================================================================ */

/* Live Market */
.lm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Live Market empty state, a "radar" that visibly listens for incoming trips. */
.lm-empty { grid-column: 1 / -1; text-align: center; padding: 46px 20px 30px; display: flex; flex-direction: column; align-items: center; }
.lm-radar { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-bottom: 20px; }
.lm-radar .lm-ring { position: absolute; inset: 0; margin: auto; width: 150px; height: 150px; border-radius: 50%;
    border: 1.5px solid var(--tl-purple); opacity: 0; animation: lmPing 2.8s cubic-bezier(.2, .6, .3, 1) infinite; }
.lm-radar .lm-ring:nth-child(2) { animation-delay: .9s; }
.lm-radar .lm-ring:nth-child(3) { animation-delay: 1.8s; }
@keyframes lmPing { 0% { transform: scale(.3); opacity: .5; } 70% { opacity: .1; } 100% { transform: scale(1); opacity: 0; } }
.lm-radar-core { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
    color: var(--tl-purple); background: var(--tl-purple-soft); border: 1px solid var(--tl-purple-soft);
    box-shadow: 0 0 44px -8px var(--tl-mist); animation: lmCore 2.8s ease-in-out infinite; }
.lm-radar-core svg { width: 28px; height: 28px; }
@keyframes lmCore { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.lm-empty-title { font-size: 18px; font-weight: 700; color: var(--tl-heading); letter-spacing: -.01em; }
.lm-empty-sub { margin: 7px auto 0; max-width: 330px; font-size: 13.5px; color: var(--tl-muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
    .lm-radar .lm-ring { animation: none; opacity: .16; transform: scale(.72); }
    .lm-radar-core { animation: none; }
}

/* claim-first card touches (reuses .tcard) */
.tcard-claim { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.claim-btn { width: 100%; font-weight: 700; letter-spacing: .01em; }
.tcard.is-new { animation: cardIn .45s cubic-bezier(.4, 1.3, .5, 1); }
@keyframes cardIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Won-claim: in-place success overlay on the card */
.tcard-won { position: relative; pointer-events: none; }
.tcard-won-ov { position: absolute; inset: 0; z-index: 5; border-radius: inherit; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 9px; background: var(--tl-success-soft);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    color: var(--tl-success); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; animation: wonIn .25s ease; }
.tcard-won-check { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
    background: var(--tl-success); color: #04120a; box-shadow: 0 0 24px -4px var(--tl-success); animation: wonPop .5s cubic-bezier(.3, 1.5, .5, 1); }
.tcard-won-check svg { width: 24px; height: 24px; }
@keyframes wonIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes wonPop { 0% { transform: scale(0); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* toast */
.tl-toast { position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 16px); z-index: 95;
    max-width: min(420px, calc(100% - 32px)); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; text-align: center;
    background: var(--tl-bg); border: 1px solid var(--tl-border-strong); color: var(--tl-heading); box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
    opacity: 0; transition: opacity .3s ease, transform .3s cubic-bezier(.4, 1.4, .5, 1); pointer-events: none; }
.tl-toast.in { opacity: 1; transform: translate(-50%, 0); }
.tl-toast.ok { border-color: rgba(74, 222, 128, .5); }
.tl-toast.warn { border-color: rgba(251, 191, 36, .5); }

@media (max-width: 560px) {
    .lm-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .tcard.is-new { animation: none !important; transition: opacity .2s ease !important; }
}

/* Ghosted (read-only) fields, name fields the driver can't change, dimmed, no 'locked' chrome */
.is-ghost { opacity: .5; cursor: default; background: rgba(255, 255, 255, .02); box-shadow: none; }
.is-ghost:focus { border-color: var(--tl-border-strong); box-shadow: none; }
html.light .is-ghost { background: rgba(9, 9, 11, .03); }

/* ---- Live Market class filter (top-bar dropdown) ---- */
.clsf { position: relative; }
.clsf-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; cursor: pointer;
    font-size: 12px; font-weight: 700; color: var(--tl-text); background: var(--tl-surface); border: 1px solid var(--tl-border); transition: border-color .15s; }
.clsf-btn:hover { border-color: var(--tl-border-strong); }
.clsf-btn svg { color: var(--tl-purple); }
.clsf-count { color: var(--tl-muted); }
/* Active filter (not "All"), so a filtered board can't be mistaken for a dead market. */
.clsf-btn.is-active { background: var(--tl-purple-soft); border-color: var(--tl-purple); }
.clsf-btn.is-active .clsf-count { color: var(--tl-purple); font-weight: 700; }
/* Reusable manifest button, uses the platform purple accent (was an off-system orange). */
.btn-manifest { background: var(--tl-purple-soft); color: var(--tl-purple); border: 1px solid var(--tl-purple); }
.btn-manifest:hover { background: var(--tl-mist); border-color: var(--tl-purple-strong); }
.clsf-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 244px; padding: 8px;
    background: var(--tl-bg); border: 1px solid var(--tl-border-strong); border-radius: 14px; box-shadow: 0 16px 44px rgba(0, 0, 0, .5);
    backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur); }
.clsf-head { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tl-subtle); padding: 6px 8px; }
.clsf-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; cursor: pointer; }
.clsf-item:hover { background: var(--tl-surface-2); }
.clsf-item input { width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; accent-color: var(--tl-purple); }
.clsf-lbl { flex: 1; font-size: 14px; font-weight: 500; color: var(--tl-text); }

/* Claim button "light off", a trip the driver can see but not claim (dimmed, inert) */
.claim-btn.off { background: var(--tl-surface-2); color: var(--tl-subtle); border: 1px solid var(--tl-border);
    box-shadow: none; opacity: .55; cursor: not-allowed; pointer-events: none; filter: grayscale(1); }
.claim-btn.off:hover { transform: none; box-shadow: none; }

/* Class filter visibility, hide cards whose class is unchecked (state lives on #tl-board, survives re-renders) */
#tl-board.hide-sedan .tcard[data-class="sedan"],
#tl-board.hide-suv .tcard[data-class="suv"],
#tl-board.hide-luxury_sedan .tcard[data-class="luxury_sedan"],
#tl-board.hide-sprinter_van .tcard[data-class="sprinter_van"],
#tl-board.hide-stretch_limo .tcard[data-class="stretch_limo"] { display: none; }

/* ---- Clickable My Trips cards + "Next up" ---- */
.tcard-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.tcard-link:hover { text-decoration: none; }
.mt-nextup { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-success); margin: 18px 0 -6px 2px; }

/* ---- Dynamic trip detail card ---- */
.tdetail { padding: 0; overflow: hidden; }
.tdetail-map { height: 210px; width: 100%; background: var(--tl-surface-2); position: relative; z-index: 0; }
.tdetail-map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; text-align: center; padding: 16px; }
.map-pin { display: block; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 7px rgba(0, 0, 0, .45); }
.map-pin.green { background: var(--tl-success); }
.map-pin.red { background: var(--tl-danger); }

/* Live driver location, a professional pulsing purple dot (provider's "Live location" map). The solid
   dot is the precise position; a same-color ring expands + fades behind it as the "live" heartbeat. */
.map-live-dot { position: relative; z-index: 0; display: block; width: 15px; height: 15px; border-radius: 50%; background: var(--tl-purple-strong); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .45); }
.map-live-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; border-radius: 50%; background: var(--tl-purple-strong); transform: translate(-50%, -50%); z-index: -1; animation: tl-live-pulse 1.8s ease-out infinite; }
@keyframes tl-live-pulse { 0% { opacity: .55; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 0; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); } }
@media (prefers-reduced-motion: reduce) { .map-live-dot::after { animation: none; } }

.tdetail-body { padding: 16px 20px; }
.td-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 5px 0; font-size: 14.5px; }
.td-k { color: var(--tl-muted); flex-shrink: 0; }
.td-v { font-weight: 600; text-align: right; color: var(--tl-heading); }
.td-hidden { color: var(--tl-subtle); font-weight: 500; font-size: 13px; }
.td-line { margin: 12px 0; padding: 11px 0; border-top: 1px solid var(--tl-border); border-bottom: 1px solid var(--tl-border); font-size: 14px; font-weight: 600; color: var(--tl-heading); }
.td-loc { display: flex; gap: 11px; padding: 7px 0; align-items: flex-start; }
.td-pin { flex-shrink: 0; width: 36px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; color: #fff; }
.td-pin.pu { background: var(--tl-success); }
.td-pin.do { background: var(--tl-danger); }
.td-pin.st { background: var(--tl-orange); } /* stops, between pickup + drop-off */
.td-loc-v { font-size: 14px; min-width: 0; }
.td-loc-v a { color: var(--tl-link); font-weight: 600; }
.td-loc-v a:hover { text-decoration: underline; }
.td-flight { font-size: 13px; color: var(--tl-muted); margin-top: 2px; }

/* ---- Progress (live region) ---- */
.tdetail-progress { padding: 16px 20px 20px; border-top: 1px solid var(--tl-border); }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tl-subtle); }
.tp-pill { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .02em;
    background: var(--tl-surface-2); color: var(--tl-text); border: 1px solid transparent; }
/* Colored by the same rules as every status badge: done = green, pending = orange, stopped = red. */
.tp-pill.completed { background: var(--tl-success-soft); color: var(--tl-success); box-shadow: 0 0 14px -2px rgba(74, 222, 128, .6); }
.tp-pill.open, .tp-pill.claimed, .tp-pill.en_route, .tp-pill.on_location, .tp-pill.passenger_on_board, .tp-pill.in_progress {
    background: var(--tl-warn-soft); color: var(--tl-warn); box-shadow: 0 0 14px -2px rgba(251, 191, 36, .55); }
.tp-pill.canceled, .tp-pill.rejected { background: var(--tl-danger-soft); color: var(--tl-danger); box-shadow: 0 0 14px -2px rgba(248, 113, 113, .6); }
.tp-pill.on { animation: tpPulse 2s ease-in-out infinite; } /* gentle "live" pulse while active */
@keyframes tpPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .tp-pill.on { animation: none; } }

.tp-steps { display: flex; gap: 2px; margin-top: 16px; }
.tp-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.tp-step::before { content: ''; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: var(--tl-border); z-index: 0; }
.tp-step:first-child::before { display: none; }
.tp-step.done::before { background: var(--tl-success); }
.tp-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--tl-surface-2); border: 2px solid var(--tl-border); position: relative; z-index: 1; }
.tp-step.done .tp-dot { background: var(--tl-success); border-color: var(--tl-success); }
.tp-step.current .tp-dot { box-shadow: 0 0 0 4px rgba(74, 222, 128, .22); }
.tp-step-lbl { font-size: 10.5px; color: var(--tl-muted); text-align: center; line-height: 1.2; }
.tp-step.done .tp-step-lbl { color: var(--tl-text); }
.tp-gps { margin-top: 14px; font-size: 13px; color: var(--tl-success); font-weight: 600; }
.tp-gps.muted { color: var(--tl-muted); font-weight: 500; }
.btn.is-loading { opacity: .65; pointer-events: none; }

/* ---- Professional icon set (scent color) + clickable links + phone call/text menu ---- */
:root { --tl-link: #6ea8fe; }
html.light { --tl-link: #2563eb; }
.ic { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; color: var(--tl-purple); flex: none; }
.td-link { color: var(--tl-link); font-weight: 600; }
.td-link:hover { color: var(--tl-purple); }
.mt-nextup { color: var(--tl-purple); }
.td-flight { display: inline-flex; align-items: center; gap: 5px; }

/* ---- Driver UX phase 1: notes callout, GPS-off, alerts badge, locked claim ---- */
.td-notes { margin-top: 14px; padding: 11px 13px; background: var(--tl-warn-soft); border: 1px solid rgba(251,191,36,.32); border-radius: 10px; font-size: 14px; line-height: 1.5; }
.td-notes-k { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-warn); font-weight: 700; margin-bottom: 4px; }
.td-notes-k .ic { color: var(--tl-warn); }
[data-gps-msg].gps-off { color: var(--tl-warn); font-weight: 600; }
.tp-gps-enable { margin-left: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: var(--tl-warn-soft); color: var(--tl-warn); border: 1px solid rgba(251,191,36,.4); cursor: pointer; } /* was 4px 12px (~26px), now ≥44px tap target */
.claim-locked { display: inline-flex; align-items: center; justify-content: center; padding: 9px 14px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--tl-muted); background: var(--tl-surface-2); border: 1px dashed var(--tl-border); text-align: center; line-height: 1.3; }

/* ---- Driver UX phase 2: money-owed banner ---- */
.owed { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin: 0 0 16px; border-radius: 14px; background: var(--tl-warn-soft); border: 1px solid rgba(251,191,36,.3); }
.owed-late { background: var(--tl-danger-soft); border-color: rgba(248,113,113,.35); }
.owed-amt { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.owed-lbl { font-size: 13px; font-weight: 600; color: var(--tl-muted); }
.owed-sub { font-size: 13px; color: var(--tl-muted); margin-top: 2px; }
.owed-late .owed-sub strong { color: var(--tl-danger); }

/* ---- Driver UX phase 4: big Call/Text + Navigate buttons (thumb-sized, while-driving safe) ---- */
.td-call { display: flex; gap: 10px; margin: 10px 0 4px; }
.td-call-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 12px; font-size: 15px; font-weight: 700; background: var(--tl-purple-soft); color: var(--tl-purple); border: 1px solid transparent; }
.td-call-btn:hover { border-color: var(--tl-purple-strong); text-decoration: none; }
.td-call-btn .ic { width: 17px; height: 17px; }
.nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 14px; }
.nav-btn .ic { width: 17px; height: 17px; color: currentColor; }

/* ---- Provider/portal polish: capped single-column forms + iOS no-zoom inputs ---- */
.content.narrow { max-width: 720px; }
@media (max-width: 640px) {
    /* 16px is iOS Safari's zoom threshold, keep form controls at/above it so focus doesn't zoom. */
    input, select, textarea { font-size: 16px; }
}

/* ---- Provider settlement: copy-able payout rows ---- */
.payrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--tl-border); font-size: 14px; }
.payrow:first-of-type { border-top: none; }

/* ---- Trip flags (child seat / meet & greet) + hours ---- */
.tflags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tflag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--tl-purple-soft); color: var(--tl-purple); white-space: nowrap; }

/* Payment trust marks (payment trust system). The shield-$ glyph before the price = Payment Protected,
   on EVERY card (it markets the platform guarantee, not the provider) - icon-only, premium, quiet.
   "Fast Payer" stays an earned chip; its row renders only when earned, so ordinary cards stay clean.
   Theme-aware via --tl-* tokens; rendered by driver/board.blade.php + cardHtml() (must stay twins). */
.tshield { display: inline-flex; align-items: center; justify-content: center; width: .95em; height: .95em; color: var(--tl-success); flex: none; }
.tshield svg { width: 100%; height: 100%; display: block; }
.ttrust { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tchip svg { width: 11px; height: 11px; flex: none; }
.tchip.protected { color: var(--tl-success); background: var(--tl-success-soft); }
.tchip.fast { color: var(--tl-warn); background: var(--tl-warn-soft); }

/* Admin live-market: the ref link makes every card actionable (deep-link to the trip page). */
.mkt-open { display: inline-block; margin-top: 6px; font-family: var(--tl-mono); font-size: 12px; color: var(--tl-purple); text-decoration: none; }
.mkt-open:hover { text-decoration: underline; }

/* ================= Smart post-trip form ================= */
/* One spacing system: every field is a .ff; all vertical rhythm comes from here, so showing/hiding
   fields never shifts the layout. Labels inside the form drop their own top margin. */
[data-trip-form] { overflow: visible; }
[data-trip-form] label { margin-top: 0; }
[data-trip-form] .ff + .ff { margin-top: 18px; }
[data-trip-form] .hint + .ff { margin-top: 12px; }
[data-trip-form] .ff[hidden] { display: none; }
[data-trip-form] .ff > label:first-child { margin-bottom: 7px; }

/* Steppers (− / +) */
.stepper { display: inline-flex; align-items: stretch; width: 100%; max-width: 170px; }
.stepper .step-btn { width: 44px; flex: none; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.04); color: var(--tl-text); border: 1px solid var(--tl-border-strong); cursor: pointer; padding: 0; user-select: none; }
.stepper .step-btn:first-child { border-radius: 11px 0 0 11px; }
.stepper .step-btn:last-child { border-radius: 0 11px 11px 0; }
.stepper .step-btn:hover { background: rgba(255,255,255,.09); }
.stepper input { text-align: center; border-radius: 0; border-left: none; border-right: none; padding-left: 4px; padding-right: 4px; min-width: 0; -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Address autocomplete */
.ac { position: relative; }
.ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--tl-surface); border: 1px solid var(--tl-border-strong); border-radius: 12px; box-shadow: 0 14px 36px rgba(0,0,0,.4); max-height: 244px; overflow-y: auto; overflow-x: hidden; }
/* Scoped under .ac-list so the Action Center's unrelated bare .ac-item (a boxed card defined later in
   this sheet) cannot bleed its border/shadow/margins into the address-suggestion rows. */
.ac-list .ac-item { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 13px; font-size: 14px; line-height: 1.35; cursor: pointer; background: none; border: 0; border-bottom: 1px solid var(--tl-border); border-radius: 0; box-shadow: none; }
.ac-list .ac-item:last-child { border-bottom: none; }
.ac-list .ac-item:hover, .ac-list .ac-item.active { background: var(--tl-purple-soft); }
.ac-pin { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--tl-purple); }
.ac-text { display: flex; flex-direction: column; min-width: 0; }
.ac-main { color: var(--tl-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-sub { color: var(--tl-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-loading { color: var(--tl-muted); cursor: default; }
.ac-loading:hover { background: none; }

/* Stops */
.stop-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.stop-row:first-child { margin-top: 0; }
.btn.icon-btn { flex: none; width: 42px; height: 42px; padding: 0; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }

/* Pickup-style pills */
.pillset { display: flex; gap: 8px; flex-wrap: wrap; }
.pillset .pill { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--tl-border-strong); background: none; color: var(--tl-text); cursor: pointer; font-size: 14px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.pillset .pill:hover { border-color: var(--tl-muted); }
.pillset .pill[aria-pressed="true"] { background: var(--tl-purple); border-color: var(--tl-purple); color: var(--tl-on-accent); font-weight: 700; } /* dark ink on light-purple, fixes 3.33:1 white-on-purple */

/* Checkbox rows */
[data-trip-form] label.check { display: flex; align-items: flex-start; gap: 9px; font-weight: 500; cursor: pointer; margin-bottom: 0; }
[data-trip-form] label.check input { width: auto; flex: none; margin-top: 2px; }

/* Route map preview */
.form-map { height: 230px; border-radius: 12px; overflow: hidden; border: 1px solid var(--tl-border); background: rgba(255,255,255,.03); }
.form-map .leaflet-container { height: 100%; }

/* ---- Native date/time inputs: contained + theme-aware picker icon (fixes Safari overflow) ---- */
[data-trip-form] input[type="datetime-local"],
[data-trip-form] input[type="date"],
[data-trip-form] input[type="time"] { min-width: 0; max-width: 100%; }
[data-trip-form] input::-webkit-datetime-edit { overflow: hidden; }
[data-trip-form] input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
html:not(.light) [data-trip-form] input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .5; }

/* ---- Clickable table rows (admin) ---- */
.tbl tr.row-link { cursor: pointer; }
.tbl tr.row-link:hover { background: rgba(255,255,255,.035); }

/* ---- Mobile: notch safe-area + 44px touch targets (all shells, incl. the driver header) ---- */
@media (max-width: 900px) {
    .topbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
    .content { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
    .sidebar { padding-top: env(safe-area-inset-top); }
    .nav-item { padding-top: 12px; padding-bottom: 12px; } /* ≥44px tap target */
    .theme-toggle { width: 44px; height: 44px; }
    .clsf-btn { height: 44px; }             /* driver class filter, was 36px */
}

/* Accessibility: skip-to-content link (visible on focus) */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--tl-heading); color: var(--tl-bg); padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; transition: top .18s ease; }
.skip-link:focus { top: 12px; outline: 2px solid var(--tl-purple); outline-offset: 2px; }

/* ===================== Alerts feed (driver + provider notification centre) ===================== */
.alert-feed { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.alert-item { display: flex; gap: 14px; align-items: flex-start; background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: 15px 17px; box-shadow: var(--tl-shadow); transition: transform .16s, border-color .16s, box-shadow .16s; }
.alert-item.row-link { cursor: pointer; }
.alert-item.row-link:hover { transform: translateY(-2px); border-color: var(--tl-border-strong); box-shadow: var(--tl-shadow), 0 0 0 1px rgba(250,250,250,.12); }
html.light .alert-item.row-link:hover { box-shadow: var(--tl-shadow), 0 0 0 1px rgba(9,9,11,.1); }
.alert-item.is-new { border-left: 3px solid var(--tl-purple); }
.ai-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; border: 1px solid transparent; }
.ai-ico svg { width: 20px; height: 20px; }
.ai-body { flex: 1; min-width: 0; }
.ai-msg { font-size: 14.5px; font-weight: 500; color: var(--tl-heading); line-height: 1.45; }
.ai-sub { font-size: 13.5px; color: var(--tl-muted); margin-top: 4px; line-height: 1.45; }
.ai-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 9px; font-size: 12.5px; color: var(--tl-subtle); }
.ai-meta .mono { font-family: var(--tl-mono); }
.ai-new { background: var(--tl-purple); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.ai-open { margin-left: auto; color: var(--tl-purple); font-weight: 600; }

/* ---- Alerts: swipe-to-clear (drag the card left to reveal a red Clear action) ---- */
.alert-swipe { position: relative; border-radius: var(--tl-radius); overflow: hidden; }
.alert-clear {
    position: absolute; top: 0; right: 0; bottom: 0; width: 96px;
    border: 0; margin: 0; padding: 0; background: var(--tl-danger); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
}
.alert-clear svg { width: 19px; height: 19px; }
.alert-clear:active { filter: brightness(.9); }
/* Keyboard path to Clear/Dismiss: the button is tabbable; on keyboard focus it lifts above the
   opaque card (which normally hides it until a pointer swipe) and shows a visible ring. */
.alert-clear:focus-visible { z-index: 2; outline: 2px solid #fff; outline-offset: -4px; border-radius: var(--tl-radius); }
/* Branded focus ring for tabbable row-link cards (alerts, action center) - was UA default only. */
.alert-item.row-link:focus-visible, .ac-item.row-link:focus-visible, .barcard.row-link:focus-visible {
    outline: 2px solid var(--tl-purple); outline-offset: 2px;
}
/* The card slides over the red Clear. JS controls the transform + its transition inline (1:1 with
   the finger while dragging, eased on release), so no CSS transform-transition here. */
.alert-swipe .alert-item {
    touch-action: pan-y;                 /* vertical scroll stays native; we own horizontal */
    will-change: transform;
    -webkit-user-select: none; user-select: none;
    background-color: #15151b;           /* opaque, the red Clear only shows once the card slides */
}
html.light .alert-swipe .alert-item { background-color: #fff; }
.alert-swipe.is-clearing { transition: height .26s ease, opacity .2s ease, margin .26s ease; overflow: hidden; }

/* ===================== Fare boost (provider, open/unclaimed trips) ===================== */
.boost { margin: 16px 0 6px; }
.boost-btn {
    display: inline-flex; align-items: center; gap: 14px; width: 100%; max-width: 440px; text-align: left;
    background: linear-gradient(120deg, rgba(124,92,252,.16), rgba(124,92,252,.05));
    border: 1px solid rgba(124,92,252,.5); border-radius: 16px; padding: 13px 17px; cursor: pointer;
    color: var(--tl-heading); animation: boostGlow 2.2s ease-in-out infinite;
    transition: transform .15s ease, border-color .15s ease;
}
.boost-btn:hover { transform: translateY(-2px); border-color: rgba(124,92,252,.85); }
.boost-btn:active { transform: translateY(0); }
.boost-spark {
    flex: none; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: #fff;
    background: linear-gradient(135deg, #8b6dff, #6d4bf5); border-radius: 12px; padding: 9px 13px;
    box-shadow: 0 6px 18px -6px rgba(124,92,252,.7);
}
.boost-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.boost-text b { font-size: 15px; }
.boost-text small { font-size: 12.5px; color: var(--tl-muted); }
@keyframes boostGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,252,0), 0 8px 26px -16px rgba(124,92,252,.5); }
    50% { box-shadow: 0 0 22px 1px rgba(124,92,252,.34), 0 8px 26px -14px rgba(124,92,252,.7); }
}
.boost-btn[disabled], .boost-btn.is-cooling {
    animation: none; cursor: not-allowed; opacity: .6;
    background: var(--tl-surface-2); border-color: var(--tl-border);
}
.boost-btn[disabled] .boost-spark, .boost-btn.is-cooling .boost-spark { background: var(--tl-muted); box-shadow: none; }

/* Price count-up pulse, provider view + the live-market board card */
[data-trip-price] { display: inline-block; }
[data-trip-price].is-bumped, .tprice.tprice-bump { display: inline-block; animation: pricePulse .7s ease; }
@keyframes pricePulse {
    0% { color: var(--tl-purple); transform: scale(1); }
    35% { transform: scale(1.14); text-shadow: 0 0 18px rgba(124,92,252,.6); }
    100% { transform: scale(1); }
}

.tcard.is-canceled { border-left-color: var(--tl-danger); }

/* Custom date / time pickers (post-trip form) ------------------------------------------------ */
.tl-pick { position: relative; }
.tl-pick .tl-pick-field { width: 100%; cursor: pointer; padding-right: 40px; }
.tl-pick .tl-pick-ico { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--tl-muted); pointer-events: none; transition: color .15s; }
.tl-pick.is-open .tl-pick-ico { color: var(--tl-purple); }
.tl-pick-invalid .tl-pick-field { border-color: var(--tl-danger); }
/* Forced "$" prefix on the flat-price field (the sign is decorative; input.value stays a bare number) */
.tl-money { position: relative; }
.tl-money-sign { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--tl-muted); font-weight: 600; font-size: 15px; pointer-events: none; }
.tl-money input { padding-left: 28px; }
.tl-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 270px; background: var(--tl-surface); border: 1px solid var(--tl-border-strong); border-radius: 14px; box-shadow: 0 14px 36px rgba(0,0,0,.4); padding: 12px; backdrop-filter: blur(10px); }
.tl-pop-time { left: auto; right: 0; min-width: 262px; max-width: calc(100vw - 24px); }
/* calendar */
.tl-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tl-cal-title { font-size: 14px; font-weight: 600; color: var(--tl-heading, var(--tl-text)); }
.tl-cal-nav { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--tl-border); background: none; color: var(--tl-muted); cursor: pointer; font-size: 17px; line-height: 1; transition: background .15s, color .15s, border-color .15s; }
.tl-cal-nav:hover { background: var(--tl-surface-2); color: var(--tl-text); border-color: var(--tl-border-strong); }
.tl-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tl-cal-dow { text-align: center; font-size: 11px; font-weight: 600; color: var(--tl-subtle); padding: 4px 0; }
.tl-cal-day { aspect-ratio: 1 / 1; display: grid; place-items: center; border: 0; background: none; border-radius: 9px; font-size: 13px; color: var(--tl-text); cursor: pointer; transition: background .12s, color .12s; }
.tl-cal-day:hover:not(.is-disabled):not(.is-selected) { background: var(--tl-purple-soft); color: var(--tl-purple); }
.tl-cal-day.is-other { color: var(--tl-subtle); opacity: .55; }
.tl-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--tl-border-strong); }
.tl-cal-day.is-selected { background: var(--tl-purple); color: var(--tl-on-accent); font-weight: 700; }
.tl-cal-day.is-disabled { opacity: .3; cursor: default; }
/* time picker: tap-to-select grids (hour + minute) + AM/PM, styled like the calendar day cells */
.tl-time-cal { display: flex; flex-direction: column; gap: 12px; }
.tl-time-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-subtle); margin-bottom: 6px; }
.tl-time-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.tl-time-ampm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tl-time-cell { min-height: 34px; display: grid; place-items: center; border: 0; background: none; border-radius: 9px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tl-text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s; }
.tl-time-cell:hover:not(.is-selected) { background: var(--tl-purple-soft); color: var(--tl-purple); }
.tl-time-cell.is-selected { background: var(--tl-purple); color: var(--tl-on-accent); font-weight: 700; }
.tl-time-cell:focus-visible { outline: 2px solid var(--tl-purple); outline-offset: 2px; }
.tl-time-ampm .tl-time-cell { border: 1px solid var(--tl-border); }
.tl-time-ampm .tl-time-cell.is-selected { border-color: var(--tl-purple); }
@media (prefers-reduced-motion: reduce) { .tl-pick-ico, .tl-cal-nav, .tl-cal-day, .tl-time-cell { transition: none; } }

/* ===================== Provider dashboard: live market pulse ===================== */
.lmp {
    display: flex; flex-wrap: wrap; gap: 18px; align-items: stretch;
    background: linear-gradient(120deg, var(--tl-surface), var(--tl-surface-2));
    border: 1px solid var(--tl-border); border-radius: var(--tl-radius-lg); padding: 20px 22px;
    box-shadow: var(--tl-shadow); backdrop-filter: var(--tl-blur); -webkit-backdrop-filter: var(--tl-blur);
    margin-bottom: 16px;
}
.lmp-online { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 280px; }
.lmp-dot {
    width: 12px; height: 12px; border-radius: 50%; background: var(--tl-success); margin-top: 9px; flex: none;
    animation: lmpPulse 2s ease-in-out infinite;
}
@keyframes lmpPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); } 50% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
.lmp-num { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--tl-heading); }
.lmp-lbl { font-size: 14px; color: var(--tl-muted); margin-top: 4px; max-width: 200px; }
.lmp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lmp-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--tl-surface-2); border: 1px solid var(--tl-border); }
.lmp-stats { display: flex; gap: 24px; align-items: center; flex: none; padding-left: 20px; border-left: 1px solid var(--tl-border); }
.lmp-stat { text-align: center; }
.lmp-stat b { display: block; font-size: 26px; font-weight: 800; color: var(--tl-heading); letter-spacing: -.02em; }
.lmp-stat span { font-size: 12px; color: var(--tl-muted); }

@media (max-width: 640px) {
    .lmp { padding: 16px; }
    .lmp-num { font-size: 38px; }
    .lmp-stats { padding-left: 0; border-left: none; border-top: 1px solid var(--tl-border); padding-top: 14px; width: 100%; justify-content: space-around; }
}

/* Provider weekly-spend chart reuses the admin `.barviz` component (defined above), no extra CSS. */

/* Dashboard cards as drill-down links */
a.metric { color: inherit; text-decoration: none; cursor: pointer; }
a.metric:hover { transform: translateY(-2px); border-color: var(--tl-border-strong); }
.lmp-stat-link { color: inherit; text-decoration: none; cursor: pointer; border-radius: 10px; padding: 4px 8px; margin: -4px -8px; transition: background .15s ease; }
.lmp-stat-link:hover { background: var(--tl-surface-2); }
.lmp-stat-link:hover b { color: var(--tl-purple); }
.barcard.row-link:hover { border-color: var(--tl-border-strong); }

/* ===================== Action center (driver + provider to-do hub) ===================== */
.ac-group-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tl-subtle, var(--tl-muted)); margin: 22px 0 10px; }
.ac-group-head:first-of-type { margin-top: 8px; }
.ac-count { font-size: 11px; font-weight: 700; color: var(--tl-muted); background: var(--tl-surface-2); border: 1px solid var(--tl-border); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
.ac-item { display: flex; align-items: center; gap: 14px; background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius); padding: 14px 16px; box-shadow: var(--tl-shadow); margin-bottom: 10px; }
.ac-ico { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; }
.ac-ico svg { width: 20px; height: 20px; }
.ac-ico.tone-red { background: var(--tl-danger-soft); color: var(--tl-danger); }
.ac-ico.tone-amber { background: var(--tl-warn-soft, rgba(251,191,36,.13)); color: var(--tl-warn, #f59e0b); }
.ac-ico.tone-green { background: var(--tl-success-soft, rgba(34,197,94,.13)); color: var(--tl-success, #22c55e); }
.ac-ico.tone-muted { background: var(--tl-surface-2); color: var(--tl-muted); }
.ac-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-body strong { font-size: 14.5px; color: var(--tl-heading); }
.ac-body .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.ac-cta { flex: none; white-space: nowrap; }
.ac-empty { text-align: center; padding: 48px 20px; }
.ac-empty-ico { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--tl-success-soft, rgba(34,197,94,.13)); color: var(--tl-success, #22c55e); }
.ac-empty-ico svg { width: 30px; height: 30px; }
.ac-empty h2 { font-size: 18px; color: var(--tl-heading); margin: 0 0 4px; }
.ac-empty p { margin: 0 auto; max-width: 340px; }
@media (max-width: 560px) {
    .ac-item { flex-wrap: wrap; }
    .ac-cta { width: 100%; margin-top: 4px; text-align: center; }
}

/* Live market: a posted trip in its final minute before pickup flashes smooth red, then (if still
   unclaimed) drops off the board. The inset shadow washes the whole card red without layout shift. */
@keyframes tcardFlashRed {
    0%, 100% { box-shadow: inset 0 0 0 999px rgba(239, 68, 68, .06), 0 0 0 1px rgba(239, 68, 68, .45); }
    50%      { box-shadow: inset 0 0 0 999px rgba(239, 68, 68, .22), 0 0 0 2px rgba(239, 68, 68, .95), 0 0 22px rgba(239, 68, 68, .35); }
}
.tcard.expiring { animation: tcardFlashRed 1.15s ease-in-out infinite; border-color: rgba(239, 68, 68, .85); }
.tcard.expiring .countdown.soon { color: #ef4444; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
    .tcard.expiring { animation: none; box-shadow: inset 0 0 0 999px rgba(239, 68, 68, .14), 0 0 0 2px rgba(239, 68, 68, .9); }
}

/* Red "needs action" nav badge (payment issues + overdue). */
.nav-item .nav-badge.danger { background: #ef4444; color: #fff; }
html.light .nav-item .nav-badge.danger { background: #ef4444; color: #fff; }

/* ===================== Settlement progress tracker (every settlement) ===================== */
.settle-track { margin-top: 14px; }
.st-step { display: flex; gap: 12px; position: relative; padding-bottom: 10px; }
.st-step:last-child { padding-bottom: 0; }
.st-step::before { content: ''; position: absolute; left: 12px; top: 22px; bottom: -2px; width: 2px; background: var(--tl-border); }
.st-step:last-child::before { display: none; }
.st-step.done::before { background: var(--tl-success); }
.st-dot { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
    background: var(--tl-surface-2); color: var(--tl-muted); border: 2px solid var(--tl-border); position: relative; z-index: 1; }
.st-dot svg { width: 14px; height: 14px; }
.st-step.done .st-dot { background: var(--tl-success); color: #fff; border-color: var(--tl-success); }
.st-step.current .st-dot { background: var(--tl-purple); color: #fff; border-color: var(--tl-purple); box-shadow: 0 0 0 4px var(--tl-purple-soft); }
.st-step.issue .st-dot { background: var(--tl-danger); color: #fff; border-color: var(--tl-danger); }
.st-label { font-weight: 600; font-size: 14px; color: var(--tl-text); }
.st-step.todo .st-label { color: var(--tl-muted); }
.st-at { font-size: 12px; color: var(--tl-muted); margin-top: 1px; }

/* Land on the invoice/settlement section (from the Invoices/Payments tabs) with a clear arrival cue. */
#settlement { scroll-margin-top: 84px; }
#settlement:target { animation: settleArrive 2.2s ease-out 1; }
@keyframes settleArrive {
    0%, 12% { box-shadow: 0 0 0 2px var(--tl-purple), 0 0 24px var(--tl-purple-soft); }
    100% { box-shadow: var(--tl-shadow); }
}

/* Action-center: whole card clickable (no action button) + chevron affordance. */
.ac-item.row-link { cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.ac-item.row-link:hover { transform: translateY(-2px); border-color: var(--tl-border-strong); }
.ac-go { flex: none; color: var(--tl-muted); display: grid; place-items: center; }
.ac-go svg { width: 18px; height: 18px; }
/* "Tidy up" nudges (expired / repost) reuse the alerts swipe-to-dismiss. */
.ac-swipe { margin-bottom: 10px; }
.alert-swipe .ac-item { touch-action: pan-y; will-change: transform; -webkit-user-select: none; user-select: none; margin-bottom: 0; position: relative; z-index: 1; background-color: #15151b; }
html.light .alert-swipe .ac-item { background-color: #fff; }

/* Rate deep-link lands on the review section with the same arrival cue. */
#review { scroll-margin-top: 84px; }
#review:target { animation: settleArrive 2.2s ease-out 1; border-radius: var(--tl-radius); }

/* In-page modal, used by the Trip manifest so opening it never navigates away (GPS / live regions
   keep running). Fixed overlay, so it works regardless of where it sits in the DOM. */
.tl-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    padding: 16px; opacity: 0; transition: opacity .18s ease; }
.tl-modal.is-open { opacity: 1; }
.tl-modal[hidden] { display: none; }
.tl-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .64);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.tl-modal-card { position: relative; width: 100%; max-width: 720px; height: 88vh; max-height: 940px;
    display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 24px 72px rgba(0, 0, 0, .55); transform: translateY(10px) scale(.99); transition: transform .18s ease; }
.tl-modal.is-open .tl-modal-card { transform: none; }
.tl-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 14px; background: #15151a; color: #fff; flex-shrink: 0; }
.tl-modal-head strong { font-size: 14px; letter-spacing: .2px; }
.tl-modal-actions { display: flex; align-items: center; gap: 8px; }
/* Download PDF = the document's headline action -> platform purple, FILLED (matches the kit's
   filled-primary button; replaces the stale orange #e8762d this surface never got recolored). */
.tl-modal-pdf { display: inline-flex; align-items: center; gap: 6px; background: #6d5dd3; color: #fff;
    font-weight: 600; font-size: 12.5px; text-decoration: none; padding: 7px 14px; border: 0;
    border-radius: 999px; white-space: nowrap; cursor: pointer; transition: background .15s ease; }
.tl-modal-pdf:hover { background: #5b4bc4; }
/* Print = secondary -> ghost (hairline on the dark head), same pill geometry. */
.tl-modal-print { display: inline-flex; align-items: center; gap: 6px; background: transparent;
    color: #e7e9f2; font: inherit; font-weight: 600; font-size: 12.5px; padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; white-space: nowrap;
    cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.tl-modal-print:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .34); }
.tl-modal-x { background: rgba(255, 255, 255, .1); color: #fff; border: 0; width: 30px; height: 30px;
    border-radius: 999px; font-size: 13px; cursor: pointer; line-height: 1; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease; }
.tl-modal-x:hover { background: rgba(255, 255, 255, .2); }
.tl-modal-pdf:focus-visible, .tl-modal-print:focus-visible, .tl-modal-x:focus-visible {
    outline: 2px solid #6d5dd3; outline-offset: 2px; }
/* Clean neutral gutter behind the embedded doc, so the white waybill floats over one material in
   BOTH app themes (matches the doc's own #ececed border token). Was #f5f5f6. */
.tl-modal-body { flex: 1; min-height: 0; background: #ececed; }
.tl-modal-frame { width: 100%; height: 100%; border: 0; display: block; }
body.tl-modal-open { overflow: hidden; }
/* Phones: the manifest takes the full screen instead of a floating card. */
@media (max-width: 700px) {
    .tl-modal { padding: 0; }
    .tl-modal-card { height: 100%; max-height: none; border-radius: 0; }
}

/* ---- Hourly auto-hours: live meter + frozen breakdown (see docs/HOURLY_AUTO_HOURS_SPEC.md) ---- */
.tl-meter { margin-top: 12px; }
.tl-meter-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tl-muted); }
.tl-meter-label span { color: var(--tl-warn); letter-spacing: .04em; }
.tl-meter-clock { font-size: 34px; font-weight: 800; line-height: 1.05; margin-top: 6px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.tl-meter-bill { font-size: 14px; font-weight: 600; margin-top: 4px; }
.tl-meter-note { font-size: 12px; margin-top: 8px; }

.tl-hours { margin-top: 12px; padding: 12px 0; }
.tl-hours-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 4px 0; }
.tl-hours-row + .tl-hours-row { border-top: 1px solid var(--tl-border); }
.tl-hours-row > span:last-child { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tl-hours-overage, .tl-hours-overage > span:last-child { color: var(--tl-warn); }
.tl-hours.has-overage { border-left: 2px solid var(--tl-warn-soft); padding-left: 12px; }
.tl-hours-flag { margin-top: 8px; font-size: 12.5px; color: var(--tl-warn); background: var(--tl-warn-soft); border-radius: 8px; padding: 7px 10px; }

/* Premium settlement bill, the itemized breakdown as a clean two-column table (label, amount). */
.tl-bill { width: 100%; margin-top: 12px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tl-bill th, .tl-bill td { padding: 9px 14px; text-align: left; font-size: 13.5px; vertical-align: baseline; }
.tl-bill th { font-weight: 500; color: var(--tl-fg); }
.tl-bill td { text-align: right; font-weight: 700; white-space: nowrap; width: 1%; }
.tl-bill tbody tr + tr th, .tl-bill tbody tr + tr td { border-top: 1px solid var(--tl-border); }
.tl-bill tbody tr:first-child th { color: var(--tl-muted); font-weight: 500; }

/* Driver "Add a charge" area on the settlement card, a clean, padded panel for adding + removing the
   provider-priced extras (stop fee, tolls, etc.). */
.td-charges { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--tl-border); }
.td-charges-h { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--tl-fg); margin-bottom: 10px; }
.td-charges-h svg { width: 15px; height: 15px; color: var(--tl-muted); flex: none; }
.td-charge-select { width: 100%; }
.td-charges-note { color: var(--tl-muted); font-size: 12px; margin-top: 9px; line-height: 1.5; }
.td-charges-sub { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tl-muted); margin: 16px 0 8px; }
.td-extras { display: flex; flex-direction: column; gap: 8px; }
.td-extra { padding: 10px 12px; border: 1px solid var(--tl-border); border-radius: 10px; background: var(--tl-surface-2); }
.td-extra-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.td-extra-remove { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; color: var(--tl-fg); display: inline-flex; align-items: center; gap: 7px; transition: color .12s ease; }
.td-extra-remove:hover { color: var(--tl-danger); }
.td-extra-remove .x { color: var(--tl-danger); font-weight: 800; font-size: 14px; line-height: 1; }
.td-extra-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tl-fg); }
.td-extra-detail { color: var(--tl-muted); font-size: 12px; margin-top: 4px; padding-left: 21px; }

/* ════════════════════════════════════════════════════════════════════════════
   PREMIUM MOBILE RIGHT-SIZING (owner pass), phone-only downscale for legacy
   surfaces that shipped without a mobile step. Additive: desktop is untouched.
   Goal: comfortable, app-ready, never oversized. Drivers are the priority.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Live Market + My Trips cards, the driver's main screen */
    .tcard { padding: 15px 16px; }
    .tprice { font-size: 18px; }
    .provider-name { font-size: 13px; }
    .tservice { font-size: 10.5px; margin: 8px 0 3px; }
    .troute { font-size: 15px; }
    .tmeta { font-size: 12.5px; }
    /* Live-trip wait/hourly meter clock */
    .tl-meter-clock { font-size: 27px; }
}
@media (max-width: 520px) {
    /* Dashboard metric tiles, keep 2-up + right-size the numerals (was one giant column) */
    .metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .metric { padding: 14px; }
    .metric .m-num { font-size: 23px; }
    .metric .m-ico { width: 32px; height: 32px; margin-bottom: 8px; }
    .metric .m-lbl { font-size: 11.5px; letter-spacing: .08em; }
    .lmp-stat b { font-size: 22px; }
}
@media (max-width: 640px) {
    /* Admin "needs a driver now" rows, wrap so the ref/route gets its own line
       instead of crushing against the severity pill + Assign action */
    .risk-row { flex-wrap: wrap; row-gap: 7px; padding: 11px 14px; }
    .risk-row .q-name { flex-basis: 100%; order: 3; }
    .risk-row .risk-cta { margin-left: auto; }
}

/* ===== System Monitor command center (docs/SYSTEM_MONITOR_SPEC.md 6.2). Matrix-green agent accent
   layered on the existing tokens; severity colour stays on the kit's danger/warn/success tokens. ===== */
.system-monitor { --mon-agent: #22c55e; --mon-agent-soft: rgba(34, 197, 94, .14); --mon-grid: rgba(34, 197, 94, .06); }
html.light .system-monitor { --mon-agent: #15803d; --mon-agent-soft: rgba(21, 128, 61, .10); }
.mon-agent { color: var(--mon-agent); }
.mon-pulse { animation: mon-pulse 1.6s ease-in-out infinite; }
@keyframes mon-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .mon-pulse { animation: none; } }
/* Live escalation cues on the war-room hero (set by triplink.js on tl:monitor / a sweep). A critical
   gives the hero a breathing danger edge; a sweep gives a brief shimmer. Kit tokens -> theme-aware. */
[data-agent][data-pulse-state="critical"] { box-shadow: inset 0 3px 0 -1px var(--color-danger); animation: mon-edge 1.8s ease-in-out infinite; }
@keyframes mon-edge { 0%, 100% { box-shadow: inset 0 3px 0 -1px var(--color-danger); } 50% { box-shadow: inset 0 3px 0 -1px color-mix(in srgb, var(--color-danger) 35%, transparent); } }
.is-scanning { animation: mon-scan 1s ease-in-out; }
@keyframes mon-scan { 0% { opacity: 1; } 50% { opacity: .78; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-agent][data-pulse-state="critical"], .is-scanning { animation: none; } }
/* War-room source tiles + the per-sweep scan flash, and the live agent-log lines. */
/* LIVE SOURCE COVERAGE: clean, restrained status tiles (--sc = the severity colour, set per tile).
   Healthy tiles are calm; a tile with an open issue gets a faint severity tint and a quiet dot pulse -
   motion only where attention is needed. No glows, beams or rings. Reduced-motion safe. */
.mon-source { background: var(--color-surface-2); border-color: var(--border); border-left: 2px solid var(--border);
    transition: background .18s ease, border-color .18s ease; }
.mon-source:hover { background: color-mix(in srgb, var(--sc) 6%, var(--color-surface-2)); border-color: color-mix(in srgb, var(--sc) 40%, var(--border)); }
/* a source with an open issue: severity rail + a faint tint */
.mon-source:not(.is-clear) { border-left-color: var(--sc); background: color-mix(in srgb, var(--sc) 9%, var(--color-surface-2)); }
.mon-source:not(.is-clear):hover { background: color-mix(in srgb, var(--sc) 14%, var(--color-surface-2)); }

/* =========================================================================================
   WAR-ROOM TERMINAL (.mon-term) - a forced-dark phosphor-green CRT console. Hardcodes its own
   --crt-* palette so html.light cannot lighten it; stays black + green in BOTH themes by design.
   All motion degrades under prefers-reduced-motion (block at the very end). ========================= */
.mon-term {
    --crt-bg: #020705; --crt-green: #38ff8f; --crt-dim: #2f9c63; --crt-amber: #ffcc4d; --crt-red: #ff5a5a;
    position: relative; overflow: hidden; color: var(--crt-green);
    /* Fixed height + an internal flex layout that fills it, so the log CLIPS instead of the whole panel
       resizing as lines stream in / numbers change. */
    display: flex; flex-direction: column;
    height: 70vh; height: 70svh; min-height: 28rem; max-height: 64rem;
    font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    background: radial-gradient(120% 100% at 50% 0%, #07140d 0%, #020705 72%);
    border: 1px solid #0c3322;
    box-shadow: inset 0 0 60px -20px rgba(56, 255, 143, .18), 0 0 40px -10px rgba(56, 255, 143, .20);
    text-shadow: 0 0 2px rgba(56, 255, 143, .28);
    animation: monPowerOn .55s ease-out 1;
}
/* Compact log-only terminal (the current monitor page). Overrides the tall default; mobile trims further. */
.mon-term.mon-term-compact { height: 23rem; min-height: 19rem; max-height: 26rem; }
.mon-term.is-glitch { animation: monGlitch .4s steps(2) 2; }
/* scanlines + vignette flicker overlays */
.mon-term-scanlines { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .45;
    background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .10) 3px 4px); mix-blend-mode: multiply; }
.mon-term-flicker { position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: radial-gradient(140% 120% at 50% 45%, transparent 52%, rgba(0, 0, 0, .55)); animation: monFlicker 6s steps(40) infinite; }
/* header */
.mon-term-head { position: relative; z-index: 5; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-bottom: 1px solid rgba(56, 255, 143, .14); }
.mon-term-dots { display: inline-flex; gap: 5px; }
/* the three head dots light up ONE BY ONE (a running scanner cue) via staggered delays */
.crt-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--crt-green); opacity: .3; box-shadow: 0 0 5px rgba(56, 255, 143, .25); animation: crtDotSeq 1.5s ease-in-out infinite; }
.mon-term-dots i:nth-child(2) { animation-delay: .22s; }
.mon-term-dots i:nth-child(3) { animation-delay: .44s; }
@keyframes crtDotSeq { 0%, 66%, 100% { opacity: .3; box-shadow: 0 0 4px rgba(56, 255, 143, .2); } 16% { opacity: 1; box-shadow: 0 0 10px rgba(56, 255, 143, .75); } }
.mon-term-title { font-size: 11px; font-weight: 700; letter-spacing: .22em; color: var(--crt-green); }
.mon-term-sub { font-size: 10px; letter-spacing: .12em; color: var(--crt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-term-sub [data-reverb-state] { color: var(--crt-green); }
.mon-term-clock { margin-left: auto; font-size: 11px; letter-spacing: .14em; color: var(--crt-green); font-variant-numeric: tabular-nums; }
/* body two-column - fills the remaining height under the header */
/* nowrap on desktop: the body must take the flex-allocated height (not grow to content), so the rail is
   clamped to the panel height and its flex:1 radar section can shrink. Mobile stacks via column instead. */
.mon-term-body { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-wrap: nowrap; }
.mon-term-main { position: relative; flex: 1 1 320px; min-width: 0; min-height: 0; padding: 12px 14px; display: flex; flex-direction: column; }
@media (max-width: 720px) {
    /* Compact log-only terminal on phones: a touch shorter, a single-row header (drop the SECTOR sub so it
       never wraps), and NO min-height on the body so the newest lines + prompt are never clipped. */
    .mon-term.mon-term-compact { height: 19rem; min-height: 0; max-height: 19rem; }
    .mon-term-head { gap: 8px; padding: 8px 12px; }
    .mon-term-sub { display: none; }
    .mon-term-title { letter-spacing: .16em; }
    .mon-term-clock { font-size: 10px; letter-spacing: .06em; }
    .mon-term-main { min-height: 0; padding: 10px 12px; }
    .mon-term-lines { font-size: 12px; }
}
/* the matrix-rain wallpaper (wordless chrome) */
.mon-rain { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; opacity: .13; }
.mon-rain i { position: absolute; top: 0; font-size: 12px; line-height: 1.05; white-space: pre; color: var(--crt-dim);
    writing-mode: vertical-rl; text-orientation: upright; animation: monRain linear infinite; }
/* the streaming log - lines flow top -> bottom (newest at the BOTTOM, just above the prompt, like a real
   terminal). justify-content:flex-end packs lines to the bottom so new ones append at the bottom edge and
   the OLDEST clip off the top. The box height is fixed by flex so it never resizes as lines stream in. */
.mon-term-feed { position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mon-term-lines { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; flex: 1; min-height: 0; overflow: hidden; font-size: 12px; }
.mon-line { line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.mon-line .text-muted { color: var(--crt-dim); opacity: .8; }
.mon-line .tag { display: inline-block; min-width: 1ch; font-weight: 700; letter-spacing: .04em; }
.mon-line .body { color: var(--crt-green); }
.mon-line.ambient { color: var(--crt-dim); opacity: .78; }
.mon-line.ambient .tag { color: var(--crt-dim); }
.mon-line.ambient .body { color: var(--crt-dim); }
.mon-line.real .tag, .mon-line.alert .tag { padding: 0 5px; border-radius: 3px; background: rgba(56, 255, 143, .14); color: var(--crt-green); box-shadow: inset 0 0 0 1px rgba(56, 255, 143, .35); }
.mon-line.alert .tag { background: rgba(255, 90, 90, .16); color: var(--crt-red); box-shadow: inset 0 0 0 1px rgba(255, 90, 90, .45); }
.mon-line.alert .body { color: var(--crt-amber); }
/* per-source sweep results: bold-green CLEAR, bold-red FAIL/count, dim progress + detail */
.mon-line .tag.bad { background: rgba(255, 90, 90, .16); color: var(--crt-red); box-shadow: inset 0 0 0 1px rgba(255, 90, 90, .45); padding: 0 5px; border-radius: 3px; }
.mon-line .scan-ok { color: var(--crt-green); font-weight: 700; letter-spacing: .06em; }
.mon-line .scan-bad { color: var(--crt-red); font-weight: 700; letter-spacing: .04em; }
.mon-line .scan-pct { color: var(--crt-dim); }
.mon-line .aside { color: var(--crt-dim); opacity: .82; }
.mon-line .cur { display: inline-block; width: 7px; height: 12px; margin-left: 1px; background: var(--crt-green); vertical-align: -1px; animation: monBlink 1s steps(1) infinite; }
.mon-term-prompt { margin-top: auto; padding-top: 9px; flex-shrink: 0; font-size: 12px; color: var(--crt-dim); letter-spacing: .03em; display: flex; align-items: center; gap: 6px; }
.mon-term-prompt [data-term-ps1] { white-space: nowrap; }
/* the ghost operator's in-flight command text (typed char by char, then executed + cleared) */
.ghost-cmd { color: var(--crt-green); white-space: nowrap; overflow: hidden; }
.ghost-cmd:empty { display: none; }
.cur-block { display: inline-block; width: 8px; height: 13px; background: var(--crt-green); vertical-align: -2px; box-shadow: 0 0 6px rgba(56, 255, 143, .5); animation: monBlink 1.1s steps(1) infinite; }
/* command output accents + the clickable FAIL/HOT source links */
.mon-line .scan-warn { color: var(--crt-amber); font-weight: 700; letter-spacing: .04em; }
.mon-line .scan-link { color: var(--crt-red); font-weight: 700; text-decoration: underline dotted; text-underline-offset: 2px; }
.mon-line .scan-link:hover { color: var(--crt-amber); }
/* the fullscreen toggle in the header */
.mon-term-max { flex-shrink: 0; width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(56, 255, 143, .28); border-radius: 5px; color: var(--crt-green); cursor: pointer; }
.mon-term-max:hover { background: rgba(56, 255, 143, .12); }
.mon-term-max svg { width: 11px; height: 11px; }
/* FULLSCREEN war-room mode: the terminal owns the viewport (Esc exits) */
.mon-term.mon-term-full { position: fixed; inset: 0; z-index: 120; height: auto; min-height: 0; max-height: none; border-radius: 0; }
.mon-term.mon-term-full .mon-term-lines, .mon-term.mon-term-full .mon-term-prompt { font-size: 14px; }
body.mon-term-lock { overflow: hidden; }
/* ALERT MOOD: driven by REAL severity (a critical source is open). Red dots pulse faster, the title +
   prompt tint, the rain recedes so the red lines dominate. Clears itself when the critical clears. */
.mon-term.is-alert .crt-dot { background: var(--crt-red); box-shadow: 0 0 6px rgba(255, 90, 90, .5); animation-duration: .8s; }
.mon-term.is-alert .mon-term-title { color: var(--crt-red); }
.mon-term.is-alert .mon-term-head { border-bottom-color: rgba(255, 90, 90, .35); }
.mon-term.is-alert .mon-rain { opacity: .06; }
.mon-term.is-alert .mon-term-prompt [data-term-ps1] { color: var(--crt-red); }
@keyframes crtDotAlert { 0%, 66%, 100% { opacity: .3; box-shadow: 0 0 4px rgba(255, 90, 90, .25); } 16% { opacity: 1; box-shadow: 0 0 10px rgba(255, 90, 90, .8); } }
.mon-term.is-alert .crt-dot { animation-name: crtDotAlert; }
/* health LED bar */
.mon-seg { flex: 1; border-radius: 1px; background: rgba(56, 255, 143, .10); transition: background .25s ease, box-shadow .25s ease; }
.mon-seg.on { background: var(--crt-green); box-shadow: 0 0 6px rgba(56, 255, 143, .55); }
.mon-seg.on.warn { background: var(--crt-amber); box-shadow: 0 0 6px rgba(255, 204, 77, .55); }
.mon-seg.on.crit { background: var(--crt-red); box-shadow: 0 0 7px rgba(255, 90, 90, .6); }
/* threat matrix: four severity stat cells */
.mon-stat { flex: 1 1 0; min-width: 0; text-align: center; padding: 7px 2px 5px; border-radius: 5px; border: 1px solid rgba(56, 255, 143, .14); background: rgba(56, 255, 143, .04); }
.mon-stat.crit { border-color: rgba(255, 90, 90, .28); }
.mon-stat.major { border-color: rgba(255, 204, 77, .28); }
.mon-stat.is-hot { animation: monStatHot 1s ease-out; }
/* The wrap is the leftover-space box; the radar is absolutely centred INSIDE it (out of flow) so it never
   inflates the wrap's height - that breaks the feedback loop and lets tlRadarSize read the true available
   space and shrink the circle on short viewports. */
.mon-radar-wrap { flex: 1; min-height: 0; position: relative; }
.mon-radar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 999px; overflow: hidden;
    border: 1px solid rgba(56, 255, 143, .22); background: radial-gradient(circle, rgba(56, 255, 143, .08), transparent 72%); }
.mon-radar i.blip { position: absolute; width: 6px; height: 6px; border-radius: 999px; background: var(--crt-red); box-shadow: 0 0 8px var(--crt-red); transform: translate(-50%, -50%); animation: monBlink 1.5s ease-in-out infinite; }
.mon-led { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--crt-green); box-shadow: 0 0 6px var(--crt-green); vertical-align: 0; animation: monBlink 1.6s ease-in-out infinite; }
.mon-led.down { background: var(--crt-red); box-shadow: 0 0 6px var(--crt-red); }
/* keyframes */
/* Power-on flash uses brightness only - no transform/opacity, so it can never change the panel height or
   hide it (a one-shot animation can freeze at frame 0 on a backgrounded tab; brightness is harmless). */
@keyframes monPowerOn { 0% { filter: brightness(2.6); } 60% { filter: brightness(1.2); } 100% { filter: brightness(1); } }
@keyframes monFlicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .82; } 94% { opacity: 1; } 97% { opacity: .9; } 98% { opacity: 1; } }
@keyframes monRain { from { transform: translateY(-110%); } to { transform: translateY(120%); } }
@keyframes monBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes monGlitch { 0% { transform: translate(0); } 25% { transform: translate(-2px, 1px); filter: hue-rotate(40deg); } 50% { transform: translate(2px, -1px); filter: hue-rotate(-30deg); } 100% { transform: translate(0); } }
@keyframes monStatHot { 0% { background: rgba(255, 90, 90, .35); } 100% { background: rgba(56, 255, 143, .04); } }
@media (prefers-reduced-motion: reduce) {
    .mon-term { animation: none; }
    .mon-term-flicker, .mon-rain { display: none; }
    .mon-led, .cur-block, .mon-line .cur, .mon-radar i.blip, .mon-stat.is-hot { animation: none; }
    .crt-dot { animation: none; opacity: .7; }
    .mon-seg { transition: none; }
}

/* =========================================================================================
   DASHBOARD: System Monitor widget (.sysmon) - a live status card linking to the command center.
   Uses the data-viz island palette (--tl-*), NOT the green CRT terminal on the monitor page. ====== */
.sysmon { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
    padding: 15px 20px; text-decoration: none; color: var(--tl-text); border-left: 3px solid var(--tl-success); }
.sysmon[data-sysmon-state="degraded"] { border-left-color: var(--tl-warn); }
.sysmon[data-sysmon-state="critical"] { border-left-color: var(--tl-danger); }
.sysmon:hover { border-color: var(--tl-border-strong); transform: translateY(-1px); }
.sysmon-id { display: flex; align-items: center; gap: 12px; flex: 1 1 240px; min-width: 0; }
.sysmon-dot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; background: var(--tl-success);
    --sysmon-soft: var(--tl-success-soft); animation: sysmonPulse 2.4s ease-out infinite; }
.sysmon[data-sysmon-state="degraded"] .sysmon-dot { background: var(--tl-warn); --sysmon-soft: var(--tl-warn-soft); }
.sysmon[data-sysmon-state="critical"] .sysmon-dot { background: var(--tl-danger); --sysmon-soft: var(--tl-danger-soft); }
.sysmon-meta { min-width: 0; }
.sysmon-name { font-weight: 650; font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--tl-text); }
.sysmon-pill { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px;
    border-radius: 999px; background: var(--tl-success-soft); color: var(--tl-success); white-space: nowrap; }
.sysmon[data-sysmon-state="degraded"] .sysmon-pill { background: var(--tl-warn-soft); color: var(--tl-warn); }
.sysmon[data-sysmon-state="critical"] .sysmon-pill { background: var(--tl-danger-soft); color: var(--tl-danger); }
.sysmon-sub { font-size: 12px; color: var(--tl-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sysmon-stats { display: flex; gap: 18px; flex: 0 0 auto; }
.sysmon-stat { text-align: center; min-width: 42px; }
.sysmon-stat .n { display: block; font-size: 20px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tl-text); }
.sysmon-stat.crit .n { color: var(--tl-danger); }
.sysmon-stat.major .n { color: var(--tl-warn); }
.sysmon-stat.minor .n { color: var(--tl-muted); }
.sysmon-stat.ok .n { color: var(--tl-success); }
.sysmon-stat .l { display: block; font-size: 10px; letter-spacing: .03em; color: var(--tl-muted); margin-top: 4px; }
.sysmon-cta { font-size: 13px; font-weight: 600; color: var(--tl-purple); flex-shrink: 0; white-space: nowrap; }
@keyframes sysmonPulse { 0% { box-shadow: 0 0 0 0 var(--sysmon-soft); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .sysmon-dot { animation: none; } }
@media (max-width: 680px) {
    .sysmon { gap: 12px; }
    .sysmon-stats { width: 100%; justify-content: space-between; }
    .sysmon-cta { width: 100%; text-align: right; }
}

/* ---- Smart post-form: quick chips, route price memory, collapsible optional section ---- */
.tl-quick { display: flex; gap: 6px; margin-top: 7px; }
.tl-quick-chip {
    appearance: none; border: 1px solid var(--tl-border); background: var(--tl-surface-2, transparent);
    color: var(--tl-muted); font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 4px 11px; border-radius: 999px; cursor: pointer; line-height: 1.35;
    transition: color .15s, border-color .15s, background .15s;
}
.tl-quick-chip:hover { color: var(--tl-text); border-color: var(--tl-purple); }
.tl-price-chip { display: inline-block; margin-top: 8px; color: var(--tl-purple); border-color: rgba(139, 92, 246, .45); }
.tl-price-chip:hover { background: rgba(139, 92, 246, .12); color: var(--tl-purple); }
.tl-price-chip[hidden] { display: none; }
.tl-section-toggle {
    appearance: none; display: block; width: 100%; text-align: left; cursor: pointer;
    background: transparent; border: 1px dashed var(--tl-border); border-radius: 12px;
    color: var(--tl-muted); font: inherit; font-size: 14px; font-weight: 600;
    padding: 12px 14px; margin-top: 18px; transition: color .15s, border-color .15s;
}
.tl-section-toggle:hover { color: var(--tl-text); border-color: var(--tl-purple); }
.tl-section-toggle[hidden] { display: none; }

/* Hourly card: the guaranteed minimum pops (owner 2026-07-06), the estimate stays quiet. */
.tservice .tsvc-min { color: var(--tl-warn); }

/* Extra stops ride the route line in the accent color (owner 2026-07-06), on every card. */
.troute .tstops, .mkt-route .tstops { color: var(--tl-purple); font-size: 13px; white-space: nowrap; }
.map-pin.orange { background: #f97316; } /* stops on every route map (owner 2026-07-06) */

/* Trip-page hint cluster (progress lock, live-location note, manifest lock): one style, centered,
   icon and text on one optical line (owner screenshot 2026-07-06). */
.tp-hint {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 10px; font-size: 13px; color: var(--tl-muted); text-align: center;
}
.tp-hint .ic { width: 15px; height: 15px; flex: none; }
.tp-gps { display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; }
.tp-gps .ic { width: 15px; height: 15px; flex: none; }