/* =========================================================================
   Cocoa Beach Express - test.codebot.org
   The Light theme (Admin > Settings). dark.css is the Dark theme: a whole
   stylesheet of its own with the same rules, so a change made here is made
   there too. mobile.css is shared by both.

   Bright, coastal, and easy to use on a phone at an airport curb.

   House rules:

     Outfit for headings, Inter for everything you read. Loaded by the
     header template, so this file has no @import.

     Navy is structure. Teal is for links and quiet emphasis. Sun orange is
     the one thing to press on a page: Book, Continue, Save. Red means a
     problem or something that cannot be undone.

     Everything is rounded. Panels are white cards on a pale sand ground.

     The admin pages use the same parts as the public ones: panels, fields,
     buttons, tables.
   ========================================================================= */

@font-face {
    font-family: "Lucide";
    src: url("/fonts/lucide.woff2") format("woff2");
    font-display: block;
}

:root {
    --fs-label: 12px;
    --fs-ui: 14px;
    --fs-body: 16px;
    --fs-lead: 18px;
    --fs-h3: 20px;
    --fs-h2: clamp(24px, 2.6vw, 34px);
    --fs-h1: clamp(32px, 4.4vw, 54px);

    --display: "Outfit", "Inter", system-ui, sans-serif;
    --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ground:   #f6f4ef;
    --card:     #ffffff;
    --mist:     #edf4f6;
    --sand:     #fbf1de;

    --ink:      #16303d;
    --muted:    #56707c;
    --faint:    #8a9ca4;

    --navy:      #0f3b52;
    --navy-deep: #0a2a3b;
    --teal:      #0e9aa7;
    --teal-deep: #0b7883;
    --teal-soft: #d8f0f1;

    --sun:      #f59e1b;
    --sun-deep: #d9820a;
    --sun-soft: #fdecd0;

    --red:      #c8412c;
    --red-soft: #fbe3de;
    --green:    #1f8a55;
    --green-soft: #dcf2e6;

    --line:      rgba(22, 48, 61, .14);
    --line-soft: rgba(22, 48, 61, .07);

    --shadow:      0 18px 40px rgba(15, 59, 82, .12);
    --shadow-soft: 0 4px 16px rgba(15, 59, 82, .08);

    --r-sm:   8px;
    --r:      14px;
    --r-lg:   22px;
    --r-pill: 999px;

    --shell: min(1200px, calc(100% - 48px));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    font-family: var(--display);
    color: var(--navy);
    line-height: 1.15;
    margin: 0 0 .5em;
    font-weight: 700;
    letter-spacing: -.01em;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }

a { color: var(--teal-deep); text-underline-offset: 3px; }
a:hover { color: var(--navy); }

code { font-family: var(--mono); font-size: .9em; background: var(--mist); padding: 1px 6px; border-radius: 6px; }

blockquote { margin: 8px 0; padding: 8px 14px; border-left: 3px solid var(--teal); background: var(--mist); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.shell { width: var(--shell); margin-left: auto; margin-right: auto; }
/* Pages that need every pixel across - the work schedule's day view - take the
   window rather than the 1200px shell, with a gutter and no more. */
.shell.shell-wide { width: calc(100% - 20px); }

.hidden { display: none !important; }
[hidden] { display: none !important; }

/* Local Lucide subset. The font can move to a CDN later without changing markup. */
.icon { display: inline-block; flex: 0 0 auto; font-family: "Lucide" !important; font-size: 1em; font-style: normal; font-weight: normal; line-height: 1; speak: never; -webkit-font-smoothing: antialiased; }
.icon-badge::before { content: "\e474"; }
.icon-bus-front::before { content: "\e4fb"; }
.icon-calendar-clock::before { content: "\e304"; }
.icon-calendar-days::before { content: "\e2b9"; }
.icon-circle-check::before { content: "\e226"; }
.icon-database::before { content: "\e0ad"; }
.icon-file-code-2::before { content: "\e45e"; }
.icon-headphones::before { content: "\e0f1"; }
.icon-layout-dashboard::before { content: "\e1c1"; }
.icon-list-filter::before { content: "\e460"; }
.icon-map-pinned::before { content: "\e53d"; }
.icon-message-square-warning::before { content: "\e576"; }
.icon-paintbrush::before { content: "\e2e7"; }
.icon-search::before { content: "\e151"; }
.icon-settings::before { content: "\e154"; }
.icon-shield-check::before { content: "\e1ff"; }
.icon-users::before { content: "\e1a4"; }
.icon-wrench::before { content: "\e1b1"; }
.icon-arrow-left::before { content: "\e048"; }
.icon-arrow-right::before { content: "\e049"; }
.icon-bookmark::before { content: "\e060"; }
.icon-calendar-check::before { content: "\e2b7"; }
.icon-calendar-plus::before { content: "\e2bc"; }
.icon-chevron-left::before { content: "\e06e"; }
.icon-chevron-right::before { content: "\e06f"; }
.icon-circle-help::before { content: "\e082"; }
.icon-circle-user::before { content: "\e461"; }
.icon-clipboard-check::before { content: "\e219"; }
.icon-clock-arrow-right::before { content: "\e70e"; }
.icon-credit-card::before { content: "\e0aa"; }
.icon-eye::before { content: "\e0ba"; }
.icon-file-plus::before { content: "\e0c9"; }
.icon-house::before { content: "\e0f5"; }
.icon-key-round::before { content: "\e4a3"; }
.icon-list-checks::before { content: "\e1d0"; }
.icon-lock-keyhole::before { content: "\e531"; }
.icon-log-in::before { content: "\e10d"; }
.icon-mail::before { content: "\e10f"; }
.icon-map-pin::before { content: "\e111"; }
.icon-message-square::before { content: "\e117"; }
.icon-phone::before { content: "\e133"; }
.icon-palmtree::before { content: "\e281"; }
.icon-copy::before { content: "\e09e"; }
.icon-check::before { content: "\e06c"; }
.icon-alert-triangle::before { content: "\e193"; }
.icon-alert-circle::before { content: "\e077"; }
.icon-info::before { content: "\e0f9"; }
.icon-play::before { content: "\e13c"; }
.icon-plus::before { content: "\e13d"; }
.icon-rotate-ccw::before { content: "\e148"; }
.icon-route::before { content: "\e53e"; }
.icon-save::before { content: "\e14d"; }
.icon-send::before { content: "\e152"; }
.icon-ticket::before { content: "\e20f"; }
.icon-trash-2::before { content: "\e18e"; }
.icon-undo-2::before { content: "\e2a1"; }
.icon-user-plus::before { content: "\e1a2"; }
.icon-user-minus::before { content: "\e1a1"; }
.icon-user-check::before { content: "\e1a0"; }
.icon-x-circle::before { content: "\e084"; }
.icon-x::before { content: "\e1b2"; }
.icon-inbox::before { content: "\e0f7"; }
.icon-reply::before { content: "\e22a"; }
.icon-square-pen::before { content: "\e172"; }

.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;
}

/* The sign up form's honeypot. People never see it; a form filling bot does. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    background: var(--navy);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--r-sm);
}
.skip-link:focus { top: 12px; color: #fff; }

.kicker {
    font-family: var(--body);
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--teal-deep);
    margin: 0 0 10px;
}
.kicker-light { color: #9fe3e8; }
.eyebrow { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--teal-deep); }

.lead { font-size: var(--fs-lead); color: var(--muted); max-width: 46rem; }
.note { font-size: var(--fs-ui); color: var(--muted); }
.field-note { font-size: var(--fs-ui); color: var(--muted); }
.optional { font-weight: 400; color: var(--faint); }
.text-link { font-weight: 600; }

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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    padding: 12px 22px;
    cursor: pointer;
    background: var(--navy);
    color: #fff;
    transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.button:hover { background: var(--navy-deep); color: #fff; }
.button:active { transform: translateY(1px); }
.button:disabled, .button[disabled] { opacity: .5; cursor: default; transform: none; }

.button-sun, .button-primary { background: var(--sun); color: var(--navy-deep); box-shadow: 0 6px 16px rgba(245, 158, 27, .3); }
.button-sun:hover, .button-primary:hover { background: var(--sun-deep); color: var(--navy-deep); }

.button-outline, .button-secondary { background: transparent; color: var(--navy); border-color: var(--line); }
.button-outline:hover, .button-secondary:hover { background: var(--card); color: var(--navy); border-color: var(--navy); }

.button-glass { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.button-glass:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.button-danger { background: var(--card); color: var(--red); border-color: rgba(200, 65, 44, .4); }
.button-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.button-large { font-size: 17px; padding: 15px 30px; }
.button-small { font-size: var(--fs-ui); padding: 8px 16px; }
.button-block { display: flex; width: 100%; }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: 20px 0 0; }
.button-row-start { justify-content: flex-start; }

/* ------------------------------------------------------------ site header */

.test-banner {
    background: var(--navy-deep);
    color: #cfe7ec;
    text-align: center;
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: .03em;
    padding: 6px 16px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; flex-wrap: wrap; }

.brand { display: flex; align-items: center; flex: none; }
.brand img { width: 190px; height: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    padding: 9px 14px;
    border-radius: var(--r-pill);
}
.site-nav a:hover { background: var(--mist); color: var(--navy); }
.site-nav a.active { background: var(--teal-soft); color: var(--teal-deep); }
.site-nav .nav-account { color: var(--teal-deep); }
.site-nav a.nav-call { margin-left: 8px; padding: 10px 18px; font-size: var(--fs-ui); color: var(--navy-deep); }
.site-nav a.nav-call:hover { background: var(--sun-deep); }

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: var(--r-sm);
    padding: 12px 11px;
    cursor: pointer;
}
.nav-toggle span:not(.sr-only) { display: block; height: 2px; background: var(--navy); border-radius: 2px; margin: 4px 0; }

.breadcrumb-bar { font-size: var(--fs-ui); padding-top: 14px; }
.breadcrumb-bar:empty, #breadcrumb:empty { display: none; }
#breadcrumb a { color: var(--muted); text-decoration: none; }
#breadcrumb a:hover { color: var(--teal-deep); text-decoration: underline; }
#breadcrumb a + a::before { content: "/"; color: var(--faint); margin: 0 8px; display: inline-block; }
#breadcrumb #crumb { color: var(--ink); font-weight: 600; }
/* The home page has the hero instead of a trail. */
.page-home .breadcrumb-bar { display: none; }

main { display: block; min-height: 50vh; }

/* -------------------------------------------------------------- page head */

.page-head { padding: 34px 0 26px; }
.page-head h1 { margin-bottom: .3em; }
.page-head .lead { margin-bottom: 0; }
/* A page whose opening paragraph is long enough to want the whole width rather
   than the 46rem a lead is held to (Admin > Employees > Work schedule). */
.page-head.lead-full .lead { max-width: none; }
.page-head .note { margin-top: 12px; max-width: 46rem; }

.section-intro { max-width: 40rem; margin-bottom: 34px; }
.section-intro-light h2 { color: #fff; }

.band { padding: 72px 0; }

/* ------------------------------------------------------------------- hero */

.hero {
    position: relative;
    color: #fff;
    background:
        linear-gradient(100deg, rgba(10, 42, 59, .94) 0%, rgba(10, 42, 59, .80) 45%, rgba(10, 42, 59, .35) 100%),
        url("/images/hero-van-palms.jpg") center / cover no-repeat;
    padding: 72px 0 84px;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 48px;
    background: var(--ground);
    clip-path: ellipse(75% 100% at 50% 100%);
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(36px, 5vw, 62px); }
.hero-lead { font-size: 19px; color: #d6e8ee; max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 34px; }

.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 0; padding: 0; }
.hero-facts li { display: flex; flex-direction: column; }
.hero-facts strong { font-family: var(--display); font-size: 32px; line-height: 1.1; color: var(--sun); }
.hero-facts span { font-size: var(--fs-ui); color: #bcd6de; }

.hero-card {
    background: var(--card);
    color: var(--ink);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.hero-card h2 { font-size: 24px; margin-bottom: 16px; }

.route-choice {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 2px solid var(--line-soft);
    border-radius: var(--r);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s, background .15s, transform .15s;
}
.route-choice:hover { border-color: var(--teal); background: var(--mist); color: var(--ink); transform: translateX(3px); }
.route-choice img { width: 48px; height: 48px; flex: none; }
.route-choice strong { display: block; font-family: var(--display); font-size: 18px; color: var(--navy); }
.route-choice small { display: block; font-size: var(--fs-ui); color: var(--muted); }
.hero-card-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-weight: 600; font-size: 15px; }
.auth-switch .icon { margin-right: 4px; }

/* ------------------------------------------------------------ home blocks */

.steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; }
.steps li { background: var(--card); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-soft); }
.steps p { color: var(--muted); margin: 0; }
.step-number {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--teal-soft);
    color: var(--teal-deep);
    font-family: var(--display);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 16px;
}

.services { background: var(--navy); color: #fff; padding: 72px 0; }
.service-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.service-grid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-lg);
    padding: 26px 18px 22px;
    text-align: center;
}
.service-grid img { max-height: 96px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.service-grid span { font-family: var(--display); font-weight: 600; font-size: 18px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split-media img { display: block; width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 4 / 3.3; object-fit: cover; }

.feature-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 18px; }
.feature-list li { display: flex; gap: 16px; align-items: flex-start; }
.feature-list svg {
    flex: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 12px;
    background: var(--sun-soft);
    stroke: var(--sun-deep);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.feature-list h3 { font-size: 18px; margin: 2px 0 2px; }
.feature-list p { margin: 0; color: var(--muted); font-size: 15px; }

.partners { text-align: center; padding: 24px 0 64px; }
.partner-logos { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 44px; margin: 18px 0 0; padding: 0; }
.partner-logos img { max-height: 58px; max-width: 150px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.partner-logos img:hover { filter: none; opacity: 1; }

.cta { padding-bottom: 80px; }
.cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 44px 48px;
    border-radius: var(--r-lg);
    color: #fff;
    background: linear-gradient(120deg, var(--navy) 0%, var(--teal-deep) 100%);
    box-shadow: var(--shadow);
}
.cta-inner h2 { color: #fff; margin-bottom: 6px; }
.cta-inner p { margin: 0; color: #d3eaee; }
.cta .button-row { margin: 0; }

/* ----------------------------------------------------------------- panels */

.panel {
    background: var(--card);
    border-radius: var(--r-lg);
    padding: 26px 28px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--line-soft);
    margin: 0 0 20px;
    min-width: 0;
}
.panel > :last-child { margin-bottom: 0; }
.panel h2 { font-size: 22px; }
fieldset.panel { margin: 0 0 20px; }
fieldset.panel legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0 0 16px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 21px;
    color: var(--navy);
}
fieldset.panel legend + * { clear: both; }
.panel-quiet { background: var(--mist); box-shadow: none; border-color: transparent; }
.panel-accent { border: 2px solid var(--teal); box-shadow: 0 0 0 5px var(--teal-soft); }
.panel-success { border: 2px solid var(--green); background: linear-gradient(180deg, var(--green-soft), var(--card) 60%); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }
/* A panel whose buttons sit at its top right, after the heading and whatever
   stands beside it (the employee details screen). */
#employee-details-root .panel-head { align-items: center; }
#employee-details-root .panel-head .count { margin-left: auto; }
.count { font-size: var(--fs-ui); font-weight: 600; color: var(--faint); white-space: nowrap; }

.link-panel { display: block; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.link-panel:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.link-panel p { color: var(--muted); margin: 0; }

.empty-state { background: var(--mist); border-radius: var(--r); padding: 22px 24px; color: var(--muted); }
.empty-state p { margin: 0 0 12px; }
p.empty-state { margin: 0; }

.tag {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--teal-deep);
    background: var(--teal-soft);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.tag-alert { color: var(--red); background: var(--red-soft); }

.stat-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.stat {
    font-size: var(--fs-ui);
    font-weight: 700;
    color: var(--navy);
    background: var(--card);
    border: 1px solid var(--line);
    padding: 5px 14px;
    border-radius: var(--r-pill);
}
.stat-alert { color: #8a4f00; background: var(--sun-soft); border-color: rgba(217, 130, 10, .3); }

.status-pill {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--mist);
    color: var(--muted);
    white-space: nowrap;
}
.status-pill.status-a, .status-pill.status-p { background: var(--teal-soft); color: var(--teal-deep); }
.status-pill.status-c { background: var(--green-soft); color: var(--green); }
.status-pill.status-x, .status-pill.status-e { background: var(--red-soft); color: var(--red); }

/* ----------------------------------------------------------------- fields */

.stack-form { display: grid; gap: 4px; }

.field { margin: 0 0 16px; min-width: 0; border: 0; padding: 0; }
fieldset.field legend { font-weight: 600; font-size: 15px; margin-bottom: 8px; padding: 0; }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--ink); }
.field .note { margin: 6px 0 0; }

input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], input:not([type]), select, textarea {
    width: 100%;
    font-family: var(--body);
    font-size: 16px;
    color: var(--ink);
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    transition: border-color .15s, box-shadow .15s;
}
select {
    appearance: none;
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-soft); }
input[type=search] { border-radius: var(--r-pill); padding-left: 18px; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 16px; }

.field-error { color: var(--red); font-size: var(--fs-ui); font-weight: 600; margin: 6px 0 0; }
.field-error:empty { display: none; }
.has-error input, .has-error select, .has-error textarea, input.has-error, select.has-error, textarea.has-error { border-color: var(--red); }

.check { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; cursor: pointer; margin: 0 0 12px; }
.check input { width: 20px; height: 20px; accent-color: var(--teal); flex: none; margin: 0; }
.check-row { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.check-feature {
    background: var(--sun-soft);
    border-radius: var(--r);
    padding: 14px 18px;
    font-weight: 700;
    color: #7a4700;
    margin-top: 6px;
}
.role-checks { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.role-checks .check { margin-bottom: 6px; }

.form-message { font-size: 15px; font-weight: 600; margin: 10px 0; }
.form-message:empty { display: none; }
.form-message.good { color: var(--green); }
.form-message.bad { color: var(--red); }

/* ---------------------------------------------------------------- booking */

.progress { list-style: none; display: flex; gap: 8px; margin: 0 0 24px; padding: 0; scroll-margin-top: 110px; }
.progress li {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: var(--faint);
    padding: 12px 14px;
    border-bottom: 3px solid var(--line);
}
.progress li span {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--line-soft);
    font-size: var(--fs-ui);
    flex: none;
}
.progress li.current { color: var(--navy); border-color: var(--sun); }
.progress li.current span { background: var(--sun); color: var(--navy-deep); }
.progress li.done { color: var(--teal-deep); border-color: var(--teal); }
.progress li.done span { background: var(--teal); color: #fff; }

.booking { padding-bottom: 64px; }
.booking-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: 28px; align-items: start; }
.booking-side { position: sticky; top: 110px; }

.place-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.place-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 10px 14px;
    border: 2px solid var(--line);
    border-radius: var(--r);
    cursor: pointer;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.place-choice:hover { border-color: var(--teal); }
.place-choice input { position: absolute; opacity: 0; pointer-events: none; }
.place-choice img { width: 44px; height: 44px; }
.place-choice:has(input:checked) { border-color: var(--teal); background: var(--mist); box-shadow: 0 0 0 4px var(--teal-soft); }
.place-choice:has(input:focus-visible) { outline: 3px solid var(--sun); outline-offset: 2px; }
.place-choice:has(input:disabled) { opacity: .4; cursor: default; }

.step-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin: 8px 0 20px; }

.summary-card h2 { font-size: 18px; margin-bottom: 4px; }
.summary-price { font-family: var(--display); font-weight: 800; font-size: 40px; color: var(--navy); line-height: 1.1; margin: 0 0 6px; }
.summary-points { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); font-size: var(--fs-ui); }
.summary-points li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.summary-points li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

.review-list { margin: 0 0 18px; display: grid; gap: 0; }
.review-list > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.review-list dt { color: var(--muted); font-size: var(--fs-ui); font-weight: 600; }
.review-list dd { margin: 0; font-weight: 500; }
#book-review h3 { font-size: 17px; margin: 18px 0 4px; color: var(--teal-deep); }
#book-review h3:first-child { margin-top: 0; }
.review-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; margin: 10px 0 0; }
.review-total strong { font-family: var(--display); font-size: 30px; color: var(--navy); }
.big-code { font-family: var(--mono); font-size: 24px; letter-spacing: .1em; color: var(--navy); background: var(--sun-soft); padding: 2px 10px; border-radius: var(--r-sm); }

/* One trip of a booking. A booking holds several, each its own panel. */
.leg { position: relative; scroll-margin-top: 110px; }
.leg-remove { position: absolute; top: 22px; right: 24px; }
.leg-route { clear: both; margin: -8px 0 16px; font-weight: 600; color: var(--muted); }
.leg-route:empty { display: none; }
.leg-section + .leg-section { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 6px; }
.leg-section h3 { font-size: 17px; margin: 0 0 12px; color: var(--teal-deep); }
.leg-time-note { margin: -6px 0 14px; }
.leg-time-note:empty { display: none; }

/* Stripe's card form on the review step (book.ts, bookPayStart). Stripe draws
   the fields in its own frame; this only gives it room. */
.pay-card { min-height: 64px; margin: 4px 0 12px; }

/* Beside "Your flight": how the flight lookup stands, in plain text, with a
   spinner while it runs (book.ts, legFlightStatus). */
.leg-flight-status { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; font-size: var(--fs-ui); font-weight: 400; color: var(--muted); }
.leg-flight-status:empty { display: none; }
.leg-flight-found:empty { display: none; }
.leg-flight-found { margin: -4px 0 14px; }
.spinner { display: inline-block; width: 14px; height: 14px; flex: none; border: 2px solid var(--line-soft); border-top-color: var(--teal); border-radius: 50%; animation: spinner-turn .8s linear infinite; }
@keyframes spinner-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
}

.leg-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--sun-soft);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    margin: 0 0 20px;
}
.leg-add h2 { font-size: 20px; margin: 0 0 4px; }
.leg-add .note { margin: 0; color: #7a4700; }
.leg-add-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.leg-add-buttons .button { background: var(--card); white-space: normal; text-align: left; }

/* A drop-down list with incremental search (searchselect.ts). The real select stays
   in the page, out of sight, holding the value. */
.search-select { position: relative; }
.search-select input[type=text] { padding-right: 44px; }
.search-select-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.search-select-toggle {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 40px;
    border: 0;
    background: transparent;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    cursor: pointer;
}
.search-select-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -6px 0 0 -4px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
}
.search-select-list {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 18rem;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}
.search-select-option { padding: 8px 12px; border-radius: var(--r-sm); font-size: 15px; cursor: pointer; }
.search-select-option:hover { background: var(--mist); }
.search-select-option.active { background: var(--teal-soft); }
.search-select-option[aria-selected=true] { font-weight: 700; }
.search-select-option mark { background: var(--sun-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-select-empty { padding: 8px 12px; font-size: var(--fs-ui); color: var(--muted); }
.has-error .search-select input[type=text] { border-color: var(--red); }

/* ------------------------------------------------------------------ trips */

.trips { padding-bottom: 64px; }
.trips-intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.trips-intro h2 { margin: 0; }
.trips-intro p { margin: 0; }
.trips-heading { font-size: 22px; margin: 28px 0 14px; }
.trip-cards { display: grid; gap: 20px; }
.trip-cards-past { opacity: .8; }

.trip-find { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.trip-card { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--line-soft); overflow: hidden; }
.trip-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: var(--mist); }
.trip-code-label { display: block; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.trip-code { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: .08em; color: var(--navy); }
.trip-card.status-x .trip-card-head { background: var(--red-soft); }

.trip-legs { list-style: none; margin: 0; padding: 0; }
.trip-leg { padding: 20px 24px; border-bottom: 1px solid var(--line-soft); }
.trip-leg.status-x .trip-when, .trip-leg.status-x .trip-route { opacity: .55; text-decoration: line-through; }
.trip-when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.trip-leg-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal-deep); }
.trip-when time { color: var(--muted); }
.trip-when strong { font-family: var(--display); font-size: 22px; color: var(--navy); margin-right: 4px; }
.trip-route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.route-arrow { color: var(--sun-deep); }
.trip-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; font-size: var(--fs-ui); color: var(--muted); }
.trip-terminal { margin: 12px 0 0; padding: 10px 14px; background: var(--sun-soft); border-radius: var(--r-sm); font-size: 15px; }
.trip-actions { margin-top: 14px; }
.reschedule-form { margin-top: 16px; padding: 18px 20px; border-radius: var(--r); background: var(--mist); }
.reschedule-form .button-row { margin-top: 8px; }

.trip-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; }
.trip-total strong { display: block; font-family: var(--display); font-size: 26px; color: var(--navy); line-height: 1.1; }
.trip-total span { font-size: var(--fs-ui); color: var(--muted); }
.trip-cancel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: flex-end; }
.trip-cancel .note { margin: 0; max-width: 22rem; text-align: right; }
.trip-message { padding: 0 24px; }
.trip-message:not(:empty) { padding-bottom: 16px; }

/* ----------------------------------------------------------------- pickup */

.pickup-list { display: grid; gap: 20px; padding-bottom: 20px; }
.pickup-card { background: var(--card); border-radius: var(--r-lg); padding: 26px 28px; box-shadow: var(--shadow-soft); border: 1px solid var(--line-soft); scroll-margin-top: 110px; }
.pickup-card:target { border: 2px solid var(--sun); box-shadow: 0 0 0 6px var(--sun-soft); }
.pickup-card-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 14px; }
.pickup-card-head h2 { margin: 4px 0 2px; }
.pickup-card-head .note { margin: 0; }
.pickup-badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: var(--navy);
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: 30px;
}
.pickup-card-small h3 { margin-bottom: 2px; }
.pickup-section { padding: 28px 0; }
.pickup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 16px; }
.pickup-instructions { margin-top: 10px; }
.pickup-instructions img { border-radius: var(--r); }

/* ---------------------------------------------------------------- content */

.prose { max-width: 46rem; }
.prose h2 { font-size: 24px; margin-top: 1.4em; }
.prose h3 { margin-top: 1.2em; }
.prose ol, .prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: 6px; }
.prose img { border-radius: var(--r); }
.policy { padding-bottom: 64px; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 20px; padding-bottom: 64px; }
.contact-big { font-family: var(--display); font-size: 24px; font-weight: 700; margin: 0 0 6px; overflow-wrap: anywhere; }
.contact-big a { text-decoration: none; color: var(--navy); }
.contact-big a:hover { color: var(--teal-deep); }

.auth { display: grid; place-items: center; padding: 40px 0 72px; }
.auth-panel { width: 100%; max-width: 30rem; padding: 36px; }
.auth-panel:has(.field-row) { max-width: 38rem; }
.auth-panel h1 { font-size: 36px; }
.auth-switch { text-align: center; font-size: var(--fs-ui); color: var(--muted); margin-top: 20px; }
.test-driver-sign-in { margin-top: 12px; }

.error-page { padding: 48px 0 80px; text-align: center; }
.error-page .lead, .error-page > p { margin-left: auto; margin-right: auto; max-width: 38rem; }
.error-code { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(90px, 16vw, 160px); line-height: 1; color: var(--teal-soft); }
.new-page-list { font-family: var(--mono); font-size: var(--fs-ui); list-style: none; padding: 0; }
.new-page-no { margin-top: 14px; }

/* ------------------------------------------------------------------ staff */

.staff { padding: 24px 0 64px; }
.staff-welcome { padding: 10px 0 14px; }
.staff-welcome h1 { margin-bottom: .2em; }
.staff-section { background: var(--card); border-radius: var(--r-lg); padding: 24px 28px; box-shadow: var(--shadow-soft); border: 1px solid var(--line-soft); margin-bottom: 20px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.section-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 24px; }
.section-head h2 .icon { color: var(--teal-deep); }
.field label .icon { margin-right: 6px; color: var(--teal-deep); }
.coming-list { margin: 0; padding-left: 1.2em; color: var(--muted); }
.coming-list li { margin-bottom: 4px; }

.request-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.request-item { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 16px 18px; border-radius: var(--r); background: var(--sand); }
.request-item p { margin: 4px 0; }
.request-item.handled { background: var(--mist); opacity: .7; }
.request-main { min-width: 0; flex: 1 1 auto; }
.request-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
.request-respond, .trip-change { margin: 10px 0; }
.request-respond summary, .trip-change summary { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 600; color: var(--teal-deep); }
.request-respond-body { display: grid; gap: 16px; margin-top: 12px; padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--card); }
.request-respond-body p { margin: 0; }
.pickup-change .field, .message-quick .field { margin-bottom: 10px; }
.pickup-change .form-message, .message-quick .form-message { margin: 8px 0 0; }
.message-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.history-message { padding: 14px 18px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--ground); }
.history-message-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px; }
.history-message-head time { margin-left: auto; }
.history-message .message-body { margin: 0 0 6px; padding-top: 0; border-top: 0; }
.history-message .note { margin: 0; }

.table-scroll { overflow-x: auto; }
.rating-score { color: var(--navy); white-space: nowrap; }
.rating-actions { white-space: nowrap; }
.rating-actions a + a::before { content: " · "; color: var(--faint); text-decoration: none; }
.rating-note { margin-top: 12px; }
/* Fullscreen center-console map. */
.driver-map-body { margin: 0; overflow: hidden; background: var(--navy); }
.driver-map-body .editor-bar { position: fixed; z-index: 900; left: 50%; bottom: 12px; width: auto; max-width: calc(100vw - 24px); margin: 0; padding: 8px 12px; transform: translateX(-50%); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); }
.driver-map-main { position: relative; width: 100vw; height: 100vh; height: 100dvh; }
.driver-map { position: absolute; inset: 0; z-index: 1; }
.driver-map-left { position: absolute; z-index: 500; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); display: grid; justify-items: start; gap: 10px; max-width: min(28rem, calc(100vw - 28px)); }
.driver-map-panel { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r); background: rgba(15, 59, 82, .94); color: #fff; box-shadow: var(--shadow); }
.driver-gps-sim { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 59, 82, .94); color: #fff; font-size: 22px; box-shadow: var(--shadow); cursor: pointer; }
.driver-gps-sim .icon { margin: 0; }
.driver-gps-sim.is-armed { background: var(--sun); color: var(--navy); }
.driver-gps-sim:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.driver-map-panel strong { font: 800 20px/1.1 var(--display); }
.driver-map-panel .driver-clock-out { justify-self: start; margin-top: 8px; color: #fff; border-color: rgba(255, 255, 255, .5); }
.driver-route-list { display: grid; gap: 10px; margin-top: 18px; }
.driver-popup { position: absolute; inset: 0; z-index: 600; display: grid; place-items: center; padding: 16px; background: rgba(15, 59, 82, .35); }
.driver-popup .driver-vehicle-prompt { margin: 0; }
.driver-customers { position: absolute; z-index: 500; top: 0; right: 0; bottom: 0; width: min(24rem, calc(100vw - 28px)); overflow-y: auto; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) 16px; background: var(--card); box-shadow: var(--shadow); }
.driver-map-main.pickups-hidden .driver-customers { display: none; }
.driver-side-toggle { position: absolute; z-index: 510; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 59, 82, .94); color: #fff; font-size: 18px; box-shadow: var(--shadow); cursor: pointer; }
.driver-side-toggle .icon { margin: 0; transition: transform .2s; }
.driver-map-main.pickups-hidden .driver-side-toggle .icon { transform: rotate(180deg); }
.driver-side-toggle:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.driver-customers > .form-message { margin: 0 0 8px; }
.driver-customers > .form-message:empty { display: none; }
.driver-customers > .form-message, .driver-customers > div.driver-customers-head:first-of-type { margin-right: 44px; }
.driver-customers-head ~ .driver-customers-head { margin-top: 18px; }
.driver-customers-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.driver-customers-head h2 { margin: 0; font-size: 20px; }
.driver-customers-head span { color: var(--muted); font-size: var(--fs-ui); }
.driver-customer-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.driver-customer { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.driver-customer.is-mine { border-color: var(--teal); background: var(--teal-soft); }
.driver-customer:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.driver-customer-act { margin-left: auto; font-weight: 600; color: var(--teal); }
.driver-pickup { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.driver-pickup-check { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--teal); }
.driver-pickup-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.driver-pickup-body small { color: var(--muted); }
.driver-route-choice { display: grid; justify-items: start; gap: 2px; text-align: left; }
.driver-route-hours { font-weight: 400; color: var(--muted); }
.driver-customer-top { display: flex; align-items: baseline; gap: 8px; }
.driver-customer small { color: var(--muted); }
.driver-map-panel span { font-size: var(--fs-ui); }
.driver-map-panel #driver-map-status { color: var(--sun-soft); }
.driver-vehicle-prompt { display: flex; flex-direction: column; width: min(34rem, calc(100% - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: 16px auto; overflow-y: auto; padding: 24px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow); }
.driver-vehicle-prompt > * { flex: none; }
.driver-vehicle-prompt > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.driver-vehicle-prompt > img { display: block; width: 220px; height: auto; margin: 0 auto 18px; }
.driver-vehicle-prompt h1 { font-size: 28px; text-align: center; }
.driver-vehicle-list { display: grid; align-content: start; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 18px 0 0; padding: 4px; border: 0; }
.driver-vehicle-choice { display: block; position: relative; }
.driver-vehicle-choice input { position: absolute; opacity: 0; }
.driver-vehicle-choice span { display: grid; gap: 3px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; }
.driver-vehicle-choice strong { font: 700 20px/1.1 var(--display); color: var(--navy); }
.driver-vehicle-choice small { color: var(--muted); }
.driver-vehicle-choice input:checked + span { border-color: var(--teal); background: var(--teal-soft); }
.driver-vehicle-choice input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.driver-vehicle-actions { flex: none; padding-top: 14px; border-top: 1px solid var(--line); }
.driver-vehicle-actions .form-message { margin: 8px 0 0; }
.driver-vehicle-actions .form-message:empty { display: none; }
.vehicle-tablet-reset { margin-top: 7px; }
/* The driver rating page and printable card, from the QR code in a van. No header or footer. */
.rate-body { background: var(--ground); }
.rate-main { min-height: 100vh; padding: 20px 16px 40px; }
.rate { max-width: 30rem; margin: 0 auto; }
.rate-logo { display: block; width: 180px; height: auto; margin: 0 auto 18px; }
.rate h1 { font-size: 28px; text-align: center; }
.rate-form, .rate-thanks { padding: 22px 20px; border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-soft); }
.rate-thanks { text-align: center; }
.rate-group { margin: 0 0 18px; padding: 0; border: 0; }
.rate-group legend { margin-bottom: 6px; padding: 0; font-weight: 700; }
.stars { display: flex; gap: 2px; }
.stars input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stars label { padding: 2px 4px; font-size: 44px; line-height: 1; color: var(--faint); cursor: pointer; }
.stars label.lit { color: var(--sun); }
.stars input:focus-visible + label { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: var(--r-sm); }
.tip-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tip-choice { position: relative; }
.tip-choice input { position: absolute; opacity: 0; }
.tip-choice span { display: block; padding: 12px 6px; border: 2px solid var(--line); border-radius: var(--r); font-weight: 700; text-align: center; cursor: pointer; }
.tip-choice input:checked + span { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-deep); }
.tip-choice input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
.rate-card { padding: 24px; border: 2px solid var(--navy); border-radius: var(--r-lg); background: #fff; text-align: center; }
.rate-card p { margin: 0 0 10px; }
.rate-qr { width: min(18rem, 100%); margin: 12px auto; }
.rate-qr svg { display: block; width: 100%; height: auto; }
.rate-url { font-family: var(--mono); font-size: var(--fs-ui); overflow-wrap: anywhere; }
.rate-card-tools { margin-top: 18px; }

/* Private messages and the unread badge in the header. */
.unread-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--mist); color: var(--navy); font-size: 20px; text-decoration: none; }
.unread-badge:hover { background: var(--teal-soft); color: var(--navy); }
.unread-badge.is-empty { display: none; }
.unread-count { position: absolute; top: -5px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--red); color: #fff; font: 700 12px/22px var(--body); text-align: center; box-shadow: 0 0 0 2px var(--card); }

.messages { padding-bottom: 64px; }
.messages-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: 28px; align-items: start; }
.messages-head .tabs { margin: 0; }
.messages-head .tab { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.messages-compose { position: sticky; top: 110px; scroll-margin-top: 110px; }
.messages-compose h2 { display: flex; align-items: center; gap: 9px; font-size: 22px; }
.messages-compose h2 .icon { color: var(--teal-deep); }
.message-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.message-item { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--shadow-soft); overflow: hidden; }
.message-item.unread { border-left: 4px solid var(--sun); }
.message-item summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 18px; cursor: pointer; list-style: none; }
.message-item summary::-webkit-details-marker { display: none; }
.message-item summary:hover { background: var(--mist); }
.message-who { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.message-item.unread .message-who { font-weight: 800; color: var(--navy); }
.message-item time { font-size: var(--fs-ui); color: var(--muted); white-space: nowrap; }
.message-snippet { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-ui); color: var(--muted); }
.message-item details[open] .message-snippet { display: none; }
.message-open { padding: 0 18px 16px; }
.message-body { margin: 0 0 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-open .button-row { margin-top: 10px; }

/* Work schedule. */
.schedule-week-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 8px; }
.schedule-week-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.schedule-week-nav h2 { margin: 0 6px; font-size: 22px; }
.schedule-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.schedule-copy label { font-size: var(--fs-ui); font-weight: 600; }
.schedule-copy select { width: auto; }
.schedule-grid { width: 100%; min-width: 60rem; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-ui); }
.schedule-grid th, .schedule-grid td { padding: 4px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.schedule-grid thead th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.schedule-grid thead th:first-child { width: 11rem; }
.schedule-grid thead a { display: block; padding: 6px 8px; border-radius: var(--r-sm); color: inherit; text-decoration: none; }
.schedule-grid thead a:hover { background: var(--mist); }
.schedule-grid thead a.active { background: var(--navy); color: #fff; }
.schedule-grid thead a.active .note { color: #d6e8ee; }
.schedule-grid tbody th { padding: 8px; font-weight: 600; }
.schedule-group th { padding-top: 16px !important; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-deep); }
.schedule-highlight th, .schedule-highlight td { background: var(--sun-soft); }
.schedule-slot { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 3.6rem; padding: 6px 8px; border: 1px dashed var(--line); border-radius: var(--r-sm); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.schedule-slot:hover { border-color: var(--navy); }
.schedule-slot span { font-size: var(--fs-label); color: var(--muted); overflow-wrap: anywhere; }
.is-working .schedule-slot { border-style: solid; border-color: rgba(14, 154, 167, .35); background: var(--teal-soft); }
.is-off .schedule-slot { border-style: solid; border-color: rgba(200, 65, 44, .3); background: var(--red-soft); color: var(--red); }
.schedule-empty { color: var(--faint) !important; }
.shift-editor, #schedule-day { scroll-margin-top: 110px; }
.route-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); gap: 14px; margin-bottom: 12px; }
.route-card { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--ground); }
.route-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
.route-card h3 { margin: 0 6px 0 0; font-size: 18px; }
.route-card .note { margin: 0 0 6px; }
.route-stops { margin: 0 0 6px; padding-left: 1.3em; font-size: var(--fs-ui); }
.route-stops li { margin-bottom: 4px; }
.shift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.shift-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--mist); }
.shift-item.is-off { background: var(--red-soft); color: var(--red); }
.schedule-slot.is-readonly { cursor: default; }
.schedule-slot.is-readonly:hover { border-color: var(--line); }
.is-working .schedule-slot.is-readonly:hover { border-color: rgba(14, 154, 167, .35); }
.schedule-day { display: block; padding: 6px 8px; }

/* Work schedule, day view: a 5 AM to 11 PM timeline with a bar for each shift. */
.schedule-views { display: inline-flex; gap: 4px; margin-right: 8px; }
.schedule-week-nav .is-disabled { opacity: .45; cursor: default; pointer-events: none; }
.day-edit-bar { display: flex; align-items: center; gap: 8px; }
.day-schedule, .day-scale { --name: 10rem; --hour-min: 58px; position: relative; min-width: calc(var(--name) + var(--hours) * var(--hour-min)); font-size: var(--fs-ui); }
.day-row { display: grid; grid-template-columns: var(--name) 1fr; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.day-row.schedule-highlight { background: var(--sun-soft); }
.day-name { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 8px; font-weight: 600; }
.day-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-remove { margin-left: auto; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.day-remove:hover { color: var(--red); }
.day-track { position: relative; min-height: 36px; background-image: repeating-linear-gradient(to right, var(--line-soft) 0 1px, transparent 1px calc(100% / var(--hours))); }
.day-hours-head .day-track { display: grid; grid-template-columns: repeat(var(--hours), 1fr); min-height: 0; background: none; }
.day-hour { padding: 7px 0 7px 5px; font-size: var(--fs-ui); font-weight: 600; color: var(--navy); white-space: nowrap; border-left: 1px solid var(--line-soft); }
.day-group-head { display: flex; align-items: center; gap: 8px; padding: 16px 8px 4px; border-bottom: 1px solid var(--line-soft); }
.day-group-head h3 { margin: 0; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-deep); }
.day-bar { position: absolute; top: 5px; bottom: 5px; display: flex; align-items: center; justify-content: center; min-width: 4px; overflow: hidden; border-radius: var(--r-sm); background: var(--teal); color: #fff; font-size: var(--fs-label); font-weight: 600; white-space: nowrap; user-select: none; }
.day-schedule[data-editable] .day-bar { cursor: grab; touch-action: none; }
.day-schedule[data-editable] .day-bar:active { cursor: grabbing; }
.day-handle { position: absolute; top: 0; bottom: 0; width: 10px; background: rgba(255, 255, 255, .25); cursor: ew-resize; }
.day-handle-start { left: 0; }
.day-handle-end { right: 0; }
.day-schedule[data-editable] .day-row[data-began] .day-bar { cursor: default; }
.day-row[data-began] .day-handle-start { display: none; }
.day-row.is-dirty .day-bar { background: var(--sun); color: var(--navy); }
.day-bar.is-clock { background: var(--navy); }
.day-bar.is-trip { background: var(--sun); color: var(--navy); }
.day-name-text a { color: inherit; }
.schedule-trip { margin-top: 18px; }
.schedule-trip h3 { margin: 0; font-size: 18px; }
.driver-customer.is-done { opacity: .7; }
.driver-pickup-state { color: var(--teal-deep) !important; font-weight: 600; }
.driver-pickup-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 32px; }
.driver-trip-cancel { margin: 0 0 10px; }
.day-now { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--name) + (100% - var(--name)) * var(--now)); width: 2px; background: var(--red); pointer-events: none; }

/* Work schedule, day view: three weeks of days, each its own board. */
.day-view { padding: 16px 12px; }
/* One hour scale for the whole page, with Save and Cancel, held above the days as
   they scroll under it. It sits below the site header, which is sticky at the top
   of the page and paints over this at a higher z-index; how far down that is is
   measured in schedule.ts, because the header wraps taller on a narrow window.
   It must not be a grid or flex item: such an item can only stick inside its own
   grid area, which here is exactly its own height, so it would not stick at all. The scale carries the same --name and
   --hour-min as the boards, and the same padding as a day block, so the hours line
   up with the bars under them; the page scrolls sideways as one when the window is
   too narrow, which keeps them lined up there too. */
.day-top { position: sticky; top: var(--day-top, 80px); z-index: 30; padding: 8px 10px 0; background: var(--card); box-shadow: 0 6px 12px -8px rgba(15, 59, 82, .45); }
.day-top .day-edit-bar { justify-content: flex-end; padding-bottom: 6px; }
.day-scale .day-row { border-bottom: 0; }
.day-scale .day-track { background: none; }
.day-weeks { display: grid; gap: 26px; }
.day-week { display: grid; gap: 14px; }
.day-week-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding-bottom: 4px; border-bottom: 2px solid var(--teal-soft); }
.day-week-head h3 { margin: 0; font-size: var(--fs-h3); color: var(--navy); }
.day-block { scroll-margin-top: calc(var(--day-top, 80px) + 72px); padding: 10px 10px 4px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-soft); }
.day-block.is-today { outline: 2px solid var(--sun); }
.day-block.is-past { opacity: .72; }
.day-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.day-block-head h4 { margin: 0; font-size: var(--fs-body); color: var(--navy); }
.day-today { padding: 1px 9px; border-radius: var(--r-pill); background: var(--sun); color: var(--navy); font-size: var(--fs-label); font-weight: 700; }
.day-nobody .day-track { display: flex; align-items: center; padding-left: 8px; background: none; }

/* The three pickup rows at the top of every day: airport, hotel, and cruise. */
.day-pickups { background: var(--mist); }
.day-pickups .day-name { font-weight: 600; color: var(--navy); }
.day-pickups .day-track { min-height: 30px; }
.day-pickup-count { margin-left: auto; padding: 0 7px; border-radius: var(--r-pill); background: var(--navy); color: #fff; font-size: var(--fs-label); font-weight: 600; }
.day-pickup { position: absolute; top: 4px; bottom: 4px; min-width: 4px; border-radius: 3px; box-shadow: inset -1px 0 0 var(--mist); background: var(--teal); text-decoration: none; }
.day-pickup:hover, .day-pickup:focus-visible { z-index: 2; box-shadow: 0 0 0 2px var(--navy); color: #fff; }
.day-pickup.is-unassigned { background: var(--red); }
.day-pickup.is-assigned { background: var(--teal); }
.day-pickup.is-complete { background: var(--green); }
.day-pickup.is-missed { background: var(--faint); }

/* The site's own tooltip, in place of every title attribute on the site
   (tooltip.ts). A themed panel with a tail pointing down at what it explains; it
   goes below, tail turned over, when there is no room above, and beside its target
   when that target is near the edge of the window. Above everything else it may be
   shown over: the dimmed overlay at 200, the driver screen's panel at 500, and the
   page editor's bar at 900. */
.tooltip { position: absolute; z-index: 1000; max-width: 22rem; padding: 10px 12px; border: 1px solid var(--sun); border-radius: var(--r-sm); background: var(--navy); color: #fff; font-size: var(--fs-ui); line-height: 1.35; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .12s ease; pointer-events: none; }
.tooltip.is-open { opacity: 1; visibility: visible; }
/* The tail is outlined like the panel: the tail itself is the sun colored
   triangle, a pixel larger all round, and ::after lays the navy one over it,
   starting a pixel sooner so it covers the panel's border where the two meet.
   ::after is placed from the tail's own padding box, which for a triangle made
   of borders is the point where its borders meet. */
.tooltip-tail { position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }
.tooltip-tail::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }
/* Above its target: the tail hangs under the panel and points down at it. */
.tooltip-tail { top: 100%; margin-left: -8px; border-width: 9px 8px 0 8px; border-top-color: var(--sun); }
.tooltip-tail::after { left: -7px; top: -9px; border-width: 8px 7px 0 7px; border-top-color: var(--navy); }
/* Below it, when there was no room above: the tail turns over. */
.tooltip.is-below .tooltip-tail { top: auto; bottom: 100%; margin-left: -8px; border-width: 0 8px 9px 8px; border-bottom-color: var(--sun); }
.tooltip.is-below .tooltip-tail::after { left: -7px; top: 1px; border-width: 0 7px 8px 7px; border-color: transparent; border-bottom-color: var(--navy); }
/* Beside it, at the edge of the window: the panel stands to the left of its
   target with the tail on the panel's right, or to the right with the tail on
   its left. The tail's own top is set with the panel, so it stays level with
   the middle of what it explains. */
.tooltip.is-side-left .tooltip-tail { top: auto; bottom: auto; left: 100%; margin: -8px 0 0 0; border-width: 8px 0 8px 9px; border-left-color: var(--sun); }
.tooltip.is-side-left .tooltip-tail::after { left: -9px; top: -7px; border-width: 7px 0 7px 8px; border-color: transparent; border-left-color: var(--navy); }
.tooltip.is-side-right .tooltip-tail { top: auto; bottom: auto; right: 100%; margin: -8px 0 0 0; border-width: 8px 9px 8px 0; border-right-color: var(--sun); }
.tooltip.is-side-right .tooltip-tail::after { left: 1px; top: -7px; border-width: 7px 8px 7px 0; border-color: transparent; border-right-color: var(--navy); }
.tooltip-line { white-space: pre-line; }
.tooltip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.tooltip-head strong { font-size: var(--fs-body); }
.tooltip-state { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--sun); }
.tooltip-body p { margin: 0 0 2px; }
.tooltip-place { font-weight: 600; }
.tooltip-to, .tooltip-driver { color: rgba(255, 255, 255, .78); }
.tooltip-person { color: rgba(255, 255, 255, .92); }
.tooltip-foot { margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .22); font-size: var(--fs-label); letter-spacing: .04em; color: var(--sun-soft); }

/* The plus beside a group's name, and the picker it opens. */
.day-add { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--teal-deep); font-size: var(--fs-label); line-height: 1; cursor: pointer; }
.day-add:hover, .day-add:focus-visible { border-color: var(--teal); background: var(--teal-soft); }
.day-add .icon { margin: 0; }
.day-picker { width: min(26rem, 92vw); max-height: 80vh; overflow-y: auto; padding: 20px 22px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); transform: translateY(8px) scale(.98); transition: transform .25s ease; }
.overlay.open .day-picker { transform: none; }
.day-picker h2 { margin: 0 0 2px; font-size: var(--fs-h3); color: var(--navy); }
.day-picker .note { margin: 0 0 12px; }
.day-picker-all { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--mist); font-weight: 600; cursor: pointer; }
.day-picker-list { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 2px; }
.day-picker-list label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); cursor: pointer; }
.day-picker-list label:hover { background: var(--mist); }
.day-picker-list input, .day-picker-all input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); }
.day-picker-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* The shared overlay (overlay.ts, from www.foldersreach.com): the page dims and
   one thing sits on the stage. Faded with opacity and visibility, since display
   cannot be transitioned, and visibility keeps a closed overlay from taking
   clicks. overlay.ts waits the same .3s before emptying the stage, so the two
   numbers have to agree. */
.overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 4vmin; background: rgba(10, 42, 59, .62); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.overlay.open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.overlay:focus { outline: none; }
/* Toasts (shared/toast.ts, from www.foldersreach.com): short messages at the top
   right. A timed one drains a bar along its foot and pauses while the pointer is
   over it; a busy one runs its bar back and forth until the work is done. */
.toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 250; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: min(22rem, calc(100vw - 2rem)); pointer-events: none; }
.toast { position: relative; width: 100%; overflow: hidden; pointer-events: auto; opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .2s ease, transform .2s ease; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--r-sm); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.toast.is-shown { opacity: 1; transform: none; }
.toast.is-leaving { opacity: 0; transform: translateX(1.5rem); }
.toast-good { border-left-color: var(--green); }
.toast-bad { border-left-color: var(--red); }
.toast-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 38px 13px 14px; }
.toast-title { font-family: var(--display); font-size: var(--fs-body); color: var(--navy); }
.toast-message { font-size: var(--fs-ui); }
.toast-close { position: absolute; top: 6px; right: 7px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; opacity: .7; }
.toast-close:hover { opacity: 1; color: var(--ink); background: var(--mist); }
.toast-timer, .toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--teal); }
.toast-timer { width: 100%; transform-origin: left; animation: toast-drain linear forwards; }
.toast.is-paused .toast-timer { animation-play-state: paused; }
.toast-progress { width: 40%; animation: toast-run 1.1s ease-in-out infinite; }
@keyframes toast-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes toast-run { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .toast, .toast.is-leaving { transition: none; transform: none; }
    .toast-progress { animation: none; width: 100%; opacity: .5; }
}

/* The site's dialog, on the dimmed overlay: a title bar in the colour of what it
   has to say, a big icon beside the message, and OK at the foot. Closing is the
   overlay's: OK, a click outside, or Escape (shared/dialog.ts). */
.dialog { width: min(34rem, 100%); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow); overflow: hidden; text-align: left; }
.dialog-bar { padding: 12px 18px; background: var(--navy); color: #fff; }
.dialog-title { margin: 0; font-size: var(--fs-h3); color: #fff; }
.dialog-error .dialog-bar { background: var(--red); }
.dialog-warn .dialog-bar { background: var(--sun-deep); }
.dialog-body { display: flex; gap: 16px; align-items: flex-start; padding: 20px 18px; max-height: 60vh; overflow-y: auto; }
.dialog-icon { flex: 0 0 auto; font-size: 52px; line-height: 1; color: var(--navy); }
.dialog-error .dialog-icon { color: var(--red); }
.dialog-warn .dialog-icon { color: var(--sun-deep); }
.dialog-text { white-space: pre-line; font-size: var(--fs-body); line-height: 1.5; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 18px 18px; }
/* The time off calendar: four months, this one first, each a month of squares. A day
   marked as time off is hatched like the grid's blocks, one changed since the dialog
   opened is ringed in teal, and today is named in teal. */
.dialog-away { width: min(46rem, 100%); }
/* Choosing the face: the picture as large as the dialog allows, with a frame in the
   shape of the profile picture over it - dragged by its middle, sized by its corner,
   and everything outside it dimmed. */
.dialog-crop { width: min(40rem, 100%); }
/* The picture stands in the middle of the dialog and is held to what fits, so the
   dialog never has to scroll. */
.crop-body { display: block; text-align: center; max-height: none; overflow: visible; }
.crop-note { margin: 0 0 12px; font-size: var(--fs-ui); color: var(--muted); text-align: left; }
.crop-stage { position: relative; display: inline-block; overflow: hidden; max-width: 100%; margin-bottom: 10px; line-height: 0; border-radius: var(--r-sm); }
.crop-picture { display: block; max-width: 100%; max-height: 54vh; user-select: none; -webkit-user-drag: none; }
.crop-frame { position: absolute; box-sizing: border-box; border: 2px solid var(--sun); border-radius: 2px; box-shadow: 0 0 0 9999px rgba(10, 42, 59, .55); cursor: move; touch-action: none; }
/* Inside the frame, so the dimming can be clipped to the picture without the grip
   being clipped away with it. */
.crop-grip { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: var(--r-sm); border: 2px solid var(--sun); background: var(--card); cursor: nwse-resize; }
.away-body { display: block; }
.away-note { margin: 0 0 14px; font-size: var(--fs-ui); color: var(--muted); }
.away-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.away-month h3 { margin: 0 0 6px; font-size: var(--fs-ui); color: var(--navy); }
.away-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.away-weekday { text-align: center; font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.away-day { padding: 5px 0; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font-family: inherit; font-size: var(--fs-ui); line-height: 1.2; cursor: pointer; }
.away-day:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-soft); }
.away-day.has-hours { font-weight: 700; }
.away-day.is-today { color: var(--teal-deep); border-color: var(--teal); }
.away-day.is-off { background-color: var(--mist); background-image: repeating-linear-gradient(45deg, rgba(15, 59, 82, .2) 0 2px, transparent 2px 8px); }
.away-day.is-changed { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.away-day.is-past { opacity: .4; cursor: default; }
@media (max-width: 640px) {
    .away-months { grid-template-columns: minmax(0, 1fr); }
}
.overlay-stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
html.overlay-open, html.overlay-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .overlay, .overlay.open, .day-picker { transition: none; }
    .day-picker { transform: none; }
}

/* A driver's route. */
.route-driver-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; }
.route-driver-form label { font-size: var(--fs-ui); font-weight: 600; }
.route-driver-form select { width: auto; min-width: 14rem; }
.route-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; margin-bottom: 14px; }
.route-fact { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r); background: var(--mist); }
.route-fact strong { font-family: var(--display); font-size: 22px; color: var(--navy); }
.vehicle-pair { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-bottom: 10px; }
.vehicle-pair .field { flex: 1 1 16rem; margin: 0; }
.vehicle-pair .form-message { flex-basis: 100%; margin: 0; }
.route-timeline { list-style: none; margin: 0; padding: 0; }
.route-point { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.route-time { font-family: var(--display); font-weight: 700; color: var(--navy); white-space: nowrap; }
.route-marker { color: var(--muted); }
.route-marker .route-time { color: var(--teal-deep); }
.route-stop.is-done { opacity: .6; }
.route-stop-body p { margin: 0 0 4px; }
.route-stop-body .eyebrow { margin-right: 8px; }
.route-stop-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.route-stop-head strong { margin-right: 4px; font-size: 18px; }
.customer-update { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.customer-update-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px !important; }
.customer-update-panel { margin-top: 10px; padding: 14px 16px; border-radius: var(--r); background: var(--mist); }
.customer-update-panel .field { margin-bottom: 10px; }
.customer-update .form-message { margin: 6px 0 0; }
.option-text { grid-column: 1 / -1; }
.option.option-text > label:not(.check) { white-space: normal; }
.route-stop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px !important; }

.booking-driver { margin: 8px 0 0; }
.driver-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0; }
.driver-assign label { font-size: var(--fs-ui); font-weight: 600; }
.driver-assign select { width: auto; min-width: 12rem; }
.driver-assign .form-message { margin: 0; }

.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th { text-align: left; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 12px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.data-table tbody tr:hover td { background: #fafcfc; }
.data-table-click tbody tr { cursor: pointer; }
.data-table tr.chosen td { background: var(--teal-soft); }
.data-table tr.inactive td { color: var(--faint); }
.data-table tr.filter-hidden, .data-table tr.page-hidden, .sql-grid tr.page-hidden { display: none; }
.table-pagination { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
.table-page-label { min-width: 7rem; text-align: center; color: var(--muted); font-size: var(--fs-ui); font-weight: 600; }
.schedule-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; margin-bottom: 14px; }
.schedule-toolbar .tabs { margin: 0; }
.schedule-search { flex: 1 1 20rem; max-width: 34rem; margin: 0; }
.schedule-search label { font-size: var(--fs-label); }
.schedule-table th button, .sort-table th button { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0 18px 0 0; position: relative; cursor: pointer; }
.schedule-table th[aria-sort] button::after, .sort-table th[aria-sort] button::after { content: "\2191"; position: absolute; right: 2px; }
.schedule-table th[aria-sort="descending"] button::after, .sort-table th[aria-sort="descending"] button::after { content: "\2193"; }
.schedule-row { cursor: pointer; }
.schedule-row:focus-visible td { background: var(--teal-soft); }
.booking-id-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.booking-id-form .field { margin: 0; flex: 1 1 14rem; }
.schedule-booking-find { flex: 1 1 22rem; max-width: 32rem; }
.booking-find-panel { max-width: 42rem; }
.booking-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.booking-detail-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; }
.booking-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 14px 24px; margin: 0; }
.booking-detail-grid div { min-width: 0; }
.booking-detail-grid dt { color: var(--muted); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.booking-detail-grid dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.booking-trip-list { display: grid; gap: 12px; }
.booking-trip-detail { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ground); }
.booking-trip-detail header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.booking-trip-detail h3, .booking-trip-detail p { margin-bottom: 6px; }

/* ------------------------------------------------------------------ admin */

.lead-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 16px; margin-bottom: 20px; }
.lead-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 24px 22px 26px;
    background: var(--card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--line-soft);
    border-left: 5px solid var(--teal);
    text-decoration: none;
    color: var(--ink);
    transition: transform .15s, box-shadow .15s;
}
.lead-card:hover { color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.lead-card strong { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-size: 20px; color: var(--navy); }
.lead-card strong .icon { color: var(--teal-deep); }
.lead-card span { font-size: var(--fs-ui); color: var(--muted); }
.lead-sql, .lead-css, .lead-templates { border-left-color: var(--navy); }
.lead-flowchart { border-left-color: var(--navy); }

.flowchart { padding-bottom: 48px; }
.flowchart-doc h2 { margin-top: 0; }
.flowchart-doc h3 { margin: 1.4em 0 .5em; }
.flowchart-doc ul { padding-left: 1.3em; }
.flowchart-doc li { margin-bottom: 4px; }
.flowchart-chart { overflow-x: auto; margin: 0 0 20px; padding: 16px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--card); }
.flowchart-chart pre.mermaid { margin: 0; text-align: center; background: transparent; font-family: var(--mono); font-size: var(--fs-label); white-space: pre; }
.flowchart-code { overflow-x: auto; padding: 12px 14px; border-radius: var(--r-sm); background: var(--mist); font-size: var(--fs-ui); }

.admin-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 48px; }
#locations-root .admin-split { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); padding-bottom: 0; }
#locations-root { padding-bottom: 48px; }
.admin-side { min-width: 0; }
#users-search, #location-search, #employees-search { margin-bottom: 12px; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tab {
    font-family: var(--body);
    font-size: var(--fs-ui);
    font-weight: 600;
    color: var(--navy);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    cursor: pointer;
}
.tab:hover { border-color: var(--navy); }
.tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.pick-list { list-style: none; margin: 0; padding: 0; max-height: 40rem; overflow-y: auto; }
.pick-list button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-radius: var(--r-sm);
    padding: 9px 12px;
    font-family: var(--body);
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
}
.pick-list button:hover { background: var(--mist); }
.pick-list button.chosen { background: var(--teal-soft); }
.pick-list button.inactive { color: var(--faint); }
.pick-list small { display: block; font-size: var(--fs-label); color: var(--muted); }
.pick-list .note { padding: 8px 12px; }

.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 4px 20px; }
.option { min-width: 0; }
.option > label:not(.check) { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.option .check { display: flex; min-width: 0; margin-top: 30px; white-space: nowrap; }
.option .check span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.code-area { font-family: var(--mono) !important; font-size: var(--fs-ui) !important; line-height: 1.5; }
.instructions-preview { border: 2px dashed var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px; max-width: none; }
.instructions-preview:empty { display: none; }

.editor-panel { margin-bottom: 48px; }

/* ------------------------------------------------------------ page editor */

.editor-bar { padding-top: 14px; }
#editor-list { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; flex-wrap: wrap; }
#editor-list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-ui);
    font-weight: 600;
    text-decoration: none;
    color: var(--navy);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 7px 15px;
}
#editor-list a:hover { border-color: var(--navy); }
#editor-apply a { background: var(--sun); border-color: var(--sun); color: var(--navy-deep); }
.edit-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.confirm { background: var(--sand); border-radius: var(--r); padding: 14px 18px; margin-top: 12px; }
.confirm p { margin: 0 0 10px; font-size: var(--fs-ui); }
.confirm p:last-child { margin-bottom: 0; }
.confirm-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.confirm-buttons .button { padding: 8px 18px; font-size: var(--fs-ui); }

.edit-form { padding: 20px 0 48px; }
.edit-form h1 { font-size: 30px; }
.edit-form h3 { font-size: 16px; margin: 18px 0 8px; }
.edit-form input#wikititle { font-family: var(--display); font-size: 20px; }
.edit-content-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
#wrapToggle { font-size: var(--fs-ui); }

/* The frame is what has the fixed height and the drag handle. The textarea
   fills it and scrolls inside it, and the gutter is clipped to the same
   height. Without a fixed frame the gutter grows to fit every number, the
   frame grows with it, and the page ends up as tall as the text. (The same
   fix as www.foldersreach.com's.) */
.linedwrap {
    display: flex;
    align-items: stretch;
    height: 60vh;
    min-height: 16rem;
    resize: vertical;
    border: 2px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
    font-family: var(--mono);
    font-size: var(--fs-ui);
    overflow: hidden;
}
.linedwrap:focus-within { border-color: var(--teal); }
.linedwrap .lines {
    flex: none;
    width: 56px;
    padding: 12px 8px;
    background: var(--mist);
    color: var(--faint);
    text-align: right;
    overflow: hidden;
    user-select: none;
}
.linedwrap .lineno { line-height: 1.55; }
.linedwrap textarea {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 12px;
    font: inherit;
    line-height: 1.55;
    resize: none;
    background: var(--card);
    color: var(--ink);
    box-shadow: none;
}
.linedwrap textarea:focus { outline: none; box-shadow: none; }

/* The SQL box sits above its results, so it is shorter. */
.linedwrap:has(#sql-text) { height: 32vh; }
.linedwrap textarea.nowrap { white-space: pre; overflow-x: auto; }

/* ------------------------------------------------------------ sql console */

.sql-console { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 48px; }
.sql-schema { font-size: var(--fs-ui); max-height: 48rem; overflow-y: auto; }
.sql-table-name {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--mono);
    font-weight: 700;
    font-size: var(--fs-ui);
    color: var(--navy);
    background: var(--mist);
    border: none;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    margin-top: 8px;
    cursor: pointer;
}
.sql-table-name:hover { background: var(--teal-soft); }
.sql-columns { list-style: none; margin: 6px 0 10px; padding: 0 0 0 14px; color: var(--muted); }
.sql-columns li { font-family: var(--mono); font-size: var(--fs-label); }
.sql-columns .key { color: var(--sun-deep); font-weight: 700; }

#sql-text, #css-text, #tpl-text {
    font-family: var(--mono);
    font-size: var(--fs-ui);
    line-height: 1.55;
    background: #fbfcfc;
}

.sql-result { margin-top: 20px; }
.sql-statement { font-family: var(--mono); font-size: var(--fs-ui); background: var(--mist); border-radius: var(--r-sm); padding: 10px 14px; overflow-x: auto; white-space: pre; }
.sql-note { font-size: var(--fs-ui); color: var(--muted); margin: 8px 0; }
.sql-error { color: var(--red); font-weight: 600; }
.sql-scroll { overflow: auto; max-height: 36rem; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.sql-grid { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: var(--fs-label); }
.sql-grid th, .sql-grid td { padding: 7px 12px; white-space: pre; border-bottom: 1px solid var(--line-soft); text-align: left; }
.sql-grid th { background: var(--mist); position: sticky; top: 0; }

.css-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.css-tools input { flex: 1 1 12rem; width: auto; }
.css-state, .css-found { font-size: var(--fs-ui); font-weight: 600; color: var(--faint); }

/* ------------------------------------------------------- template console */

.tpl-console { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 24px; }
.tpl-files { font-size: var(--fs-ui); max-height: 48rem; overflow-y: auto; }
.tpl-files #tpl-found { margin: 8px 0 0; }
.tpl-files #tpl-found:empty { display: none; }

.tpl-file {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--mono);
    font-weight: 700;
    font-size: var(--fs-ui);
    color: var(--navy);
    background: var(--mist);
    border: none;
    border-radius: var(--r-sm);
    padding: 8px 12px;
    margin-top: 8px;
    cursor: pointer;
}
.tpl-file:hover { background: var(--teal-soft); }
.tpl-file.open { background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal-deep); }
.tpl-file.hit { box-shadow: inset 3px 0 0 var(--sun-deep); }
.tpl-meta { display: block; font-family: var(--body); font-weight: 400; font-size: var(--fs-label); color: var(--muted); }
.tpl-kind { font-weight: 700; }
.tpl-kind.shell { color: var(--red); }
.tpl-kind.static { color: var(--faint); }
.tpl-hits { display: block; font-family: var(--body); font-weight: 600; font-size: var(--fs-label); color: var(--sun-deep); }
.tpl-line {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 3px 8px 3px 22px;
    font-family: var(--mono);
    font-size: var(--fs-label);
    color: var(--muted);
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.tpl-line:hover { background: var(--mist); color: var(--ink); }
.tpl-lineno { display: inline-block; min-width: 2.6rem; color: var(--faint); }
.tpl-kind-note { font-size: var(--fs-ui); color: var(--muted); border-radius: var(--r-sm); margin: 0 0 12px; }
.tpl-kind-note:empty { display: none; }
.tpl-kind-note.shell { background: var(--red-soft); color: #8d2a1a; padding: 10px 14px; }
.tpl-kind-note.fragment, .tpl-kind-note.static { background: var(--mist); padding: 10px 14px; }

/* ------------------------------------------------------------------ footer */

.site-footer { background: var(--navy-deep); color: #b7cfd8; margin-top: 24px; font-size: 15px; }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 36px; padding: 56px 0 40px; }
.footer-brand { display: flex; gap: 16px; align-items: flex-start; }
.footer-brand img { flex: none; width: 64px; height: 64px; border-radius: 16px; background: #fff; padding: 4px; }
.footer-brand strong { display: block; font-family: var(--display); font-size: 20px; color: #fff; margin-bottom: 6px; }
.footer-brand p { margin: 0; font-size: var(--fs-ui); }
.site-footer h2 { font-family: var(--body); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #7fa5b3; margin-bottom: 12px; }
.footer-links { display: flex; flex-direction: column; gap: 6px; }
.site-footer a { color: #e3f0f4; text-decoration: none; }
.site-footer a:hover { color: var(--sun); }
.footer-phone { display: inline-block; font-family: var(--display); font-weight: 700; font-size: 24px; margin-bottom: 6px; }
.footer-contact p { margin: 0; font-size: var(--fs-ui); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 18px 0 26px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-label); color: #7fa5b3; }

/* -------------------------------------------------------------------------
   Page history, in the page editor: History and Visual beside Save and
   Cancel, the slider under them, and the panel that follows the page down
   while either is open.
   ------------------------------------------------------------------------- */

/* Pinned to the top of the window while a version is being read, so the
   buttons and the slider stay in reach however far down the page goes. Its
   width and its distance from the top are set as it is pinned: the width from
   the space it left behind, the top from the site header. Below the header's
   own layer, so it can never cover it. */
.confirm.is-following { position: fixed; z-index: 49; margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: var(--shadow); }
.editor-follow-space { height: 0; }

/* One editor ordinarily; two of equal width while a version from the history
   is on screen, the old one on the left and the page as it is on the right. */
.edit-panes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 20px; }
.edit-form.is-history .edit-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.edit-pane { min-width: 0; }

/* Visual puts the version itself under the slider, so the boxes stand aside. */
.edit-form.is-visual .edit-panes { display: none; }
.edit-visual-page { padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow-x: auto; }

/* A page drawn inside the editor is a page inside a box: its own full-width
   sections have no business breaking out of it. */
.edit-visual-page > * { max-width: 100%; }
.edit-visual-page img, .edit-visual-page video { max-width: 100%; height: auto; }

/* The version on the left is read, not written. It wears the same lined frame
   as the box beside it, so the two can be read line for line, in the quieter
   mist color to say that nothing here is being edited. Its text can still be
   selected and copied. */
.edit-pane-past .linedwrap, .edit-pane-past .linedwrap textarea { background: var(--mist); }
.edit-pane-past .linedwrap:focus-within { border-color: var(--line); }
.edit-pane-past input[readonly] { background: var(--mist); color: var(--ink); }
.edit-pane-now input[readonly], .edit-pane-now textarea[readonly] { background: var(--mist); }

/* The history slider, under the buttons. One pip for each version the page
   has had, oldest at the left, the page as it stands now at the right. */
.history-bar { margin-top: 10px; }
.history-track { position: relative; padding: 0 10px 14px; }
.history-track input[type=range] { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; accent-color: var(--sun); }
.history-track input[type=range]:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.history-pips { position: relative; height: 14px; margin: 0 10px; }

/* Drawn in the muted text color rather than a line or a panel color, which
   would be all but invisible against the bar in the dark theme: a pip has to
   be seen to be aimed at. */
.history-pip { position: absolute; top: 2px; width: 9px; height: 9px; margin-left: -4.5px; border: 1px solid var(--muted); border-radius: 50%; background: var(--muted); transition: transform .1s ease-out; }
.history-pip:hover { background: var(--ink); border-color: var(--ink); transform: scale(1.2); }
.history-pip.is-chosen { background: var(--sun); border-color: var(--sun); transform: scale(1.45); }
@media (prefers-reduced-motion: reduce) {
    .history-pip { transition: none; }
}
.history-when { margin: 2px 0 0; }

/* The date for a pip, drawn over the page rather than in the bar so that a pip
   near the edge is still readable. It hangs below the pips, clear of the
   slider and of the pip itself, and a tail points back up at the one it
   belongs to. --tail is where that tail sits, set as the tip is placed. */
.history-tip { position: fixed; z-index: 1000; padding: 4px 8px; border: 1px solid var(--sun); border-radius: var(--r-sm); background: var(--mist); color: var(--ink); font-size: var(--fs-ui); line-height: 1.3; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-soft); }

/* Two triangles: the lower one in the border color, and the one over it in
   the tip's own color, a pixel down, so the tail is outlined like the box. */
.history-tip::before, .history-tip::after { content: ""; position: absolute; left: var(--tail, 50%); width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-top: 0; }
.history-tip::before { bottom: 100%; border-bottom-color: var(--sun); }
.history-tip::after { bottom: calc(100% - 1px); border-bottom-color: var(--mist); }

/* Side by side needs the width for it. On a phone the old version sits above
   the page as it is. */
@media (max-width: 960px) {
    .edit-form.is-history .edit-panes { grid-template-columns: minmax(0, 1fr); }
    .edit-pane-past .linedwrap, .edit-form.is-history .linedwrap { height: 30vh; }
}

/* -------------------------------------------------------------------------
   Themes: the Appearance section of Admin > Settings, and the bar across the
   top of every page while an administrator previews a theme.
   ------------------------------------------------------------------------- */

.preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; padding: 8px 16px; background: var(--navy-deep); color: #fff; font-size: var(--fs-ui); }
.preview-bar strong { color: var(--sun); }

.theme-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 16px 0 8px; }
.theme-card { display: flex; flex-direction: column; width: min(20rem, 100%); padding: 16px 18px; border: 2px solid var(--line); border-radius: var(--r); background: var(--card); }
.theme-card.selected { border-color: var(--sun); }
.theme-card h3 { margin: 12px 0 4px; }
.theme-card p { margin: 0 0 8px; }
.theme-card > p:first-of-type { flex: 1; }
.theme-card .button-row { margin-top: 4px; }
.theme-swatch { display: flex; height: 52px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); }
.theme-swatch span { flex: 1; }
.theme-card-light .theme-swatch span:nth-child(1) { background: #f6f4ef; }
.theme-card-light .theme-swatch span:nth-child(2) { background: #0f3b52; }
.theme-card-light .theme-swatch span:nth-child(3) { flex: .35; background: #f59e1b; }
.theme-card-dark .theme-swatch span:nth-child(1) { background: #0b1820; }
.theme-card-dark .theme-swatch span:nth-child(2) { background: #1d5670; }
.theme-card-dark .theme-swatch span:nth-child(3) { flex: .35; background: #f59e1b; }
.theme-status { font-size: var(--fs-ui); font-weight: 600; }
.theme-status-selected { color: var(--green); }
.theme-status-preview { color: var(--sun-deep); }
.css-theme { font-weight: 600; }
.lead-settings { border-left-color: var(--sun); }
.lead-employees { border-left-color: var(--sun); }
.lead-audit { border-left-color: var(--navy); }
#employees-root .panel-head .count { margin-left: auto; }

/* Admin > Employees > Work schedule: each employee's name and role, and their
   week, Sunday to Saturday, on a row of its own under it. The only heading is the
   days. */
/* The panel keeps 8px at its sides rather than 28px, giving the days 40px more
   room for hours. */
#employees-root[data-week] .panel { padding-left: 8px; padding-right: 8px; }
/* Each week keeps a gutter at its left, the heading with it, so every week's days
   line up. From the second week down the gutter holds the button that copies the
   week above into it. */
.ew-row { position: relative; padding-left: 26px; }
.ew-copy { position: absolute; left: 0; top: 4px; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--navy); font-size: 11px; line-height: 1; cursor: pointer; opacity: .55; }
.ew-copy:hover { opacity: 1; background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal); }
.ew-copy .icon { margin: 0; }
.employee-week { display: grid; grid-template-columns: repeat(var(--days, 7), minmax(0, 1fr)); gap: 6px; }
/* The spinner, Save and Cancel, and the day names, held under the site header as
   the list scrolls, the way the page editor's History and Visual controls are.
   It reaches over the panel's 8px sides so rows never show beside it, and the day
   names keep the table cells' 12px so they line up with the days under them. How
   far down it stops, --ew-top, is measured in employees.ts. */
.ew-sticky { position: sticky; top: var(--ew-top, 80px); z-index: 30; margin: 0 -8px; padding: 0 8px; background: var(--card); }
.ew-sticky.is-stuck { box-shadow: 0 6px 12px -8px rgba(15, 59, 82, .45); }
.ew-head { padding: 6px 12px 6px 38px; border-bottom: 2px solid var(--line); font-size: var(--fs-ui); font-weight: 600; color: var(--muted); }
.ew-head span { text-align: center; }
.employee-table.is-week tbody tr:not(.row-follows) td { border-bottom: 0; padding-bottom: 4px; }
/* The name carries the role after it, smaller and plain: "Andre Johnson (driver)". */
.ew-role { font-weight: 400; font-size: var(--fs-ui); color: var(--muted); }
/* Beside the name while the schedule is open for changing: the palm tree that opens
   that person's four months of time off. It shows as the row is pointed at. */
.ew-away { display: inline-grid; place-items: center; width: 24px; height: 22px; margin-left: 8px; padding: 0; border: 1.5px solid var(--teal); border-radius: var(--r-sm); background: var(--card); color: var(--navy); font-size: 12px; line-height: 1; vertical-align: middle; cursor: pointer; opacity: 0; transition: opacity .12s; }
.employee-table.is-week tbody tr:hover .ew-away, .ew-away:focus-visible { opacity: 1; }
.ew-away:hover { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal-deep); }
.ew-away .icon { margin: 0; }
.employee-week-row td { padding-top: 0; }
/* The data grid's row hover paints each cell an opaque near-white, which would
   cover today's band across the row it is on; this screen goes without it. */
.employee-table.is-week tbody tr:hover td { background: none; }
/* Two to four weeks stack a row per week under the name, with no line between them. */
.employee-week-row:has(+ .employee-week-row) td { border-bottom: 0; padding-bottom: 4px; }
/* Under the search: the view on the left, and the unsaved note, Save, and Cancel on
   the right. */
.ew-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 0 8px; }
/* The view, the days, the types, and the sort keep together on the left, and only
   the unsaved note with Save and Cancel wrap away when the window is narrow. */
.ew-toolbar-left, .ew-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ew-toolbar-right { margin-left: auto; }
/* The view: an up and down spinner, from 1 day to 4 weeks. */
.ew-spin { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); overflow: hidden; }
.ew-spin:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.ew-spin-value { display: flex; align-items: center; min-width: 5.5rem; padding: 0 12px; font-size: var(--fs-ui); font-weight: 600; color: var(--navy); }
.ew-spin-arrows { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.ew-spin-arrows button { flex: 1 1 0; width: 26px; padding: 0; border: 0; background: transparent; color: var(--navy); font-size: 12px; line-height: 1; cursor: pointer; }
.ew-spin-arrows button + button { border-top: 1px solid var(--line); }
.ew-spin-arrows button:hover:not(:disabled) { background: var(--teal-soft); color: var(--teal-deep); }
.ew-spin-arrows button:disabled { opacity: .35; cursor: default; }
.ew-spin-up .icon { transform: rotate(-90deg); }
.ew-spin-down .icon { transform: rotate(90deg); }
/* Back and on, beside the view: a day at a time for 1 and 3 days, a week otherwise. */
.ew-step, .icon-step { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--navy); font-size: 15px; line-height: 1; cursor: pointer; }
.ew-step:hover:not(:disabled), .icon-step:hover:not(:disabled) { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal); }
/* Back to today is off while the days already start at today, or this week. */
.ew-step:disabled, .icon-step:disabled { opacity: .4; color: var(--faint); border-style: dashed; background: none; cursor: default; }
.ew-step .icon, .icon-step .icon { margin: 0; }
/* The types the list is held to: a button opening a box of ticks, one per kind of
   employee. It sits in the same row, and its box hangs under it. */
.ew-filter { position: relative; }
.ew-filter-button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--navy); font-size: var(--fs-ui); font-weight: 600; cursor: pointer; }
.ew-filter-button:hover { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal); }
.ew-filter-menu { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 12rem; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); box-shadow: var(--shadow-soft); }
.ew-filter-menu label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r-sm); font-size: var(--fs-ui); cursor: pointer; }
.ew-filter-menu label:hover { background: var(--mist); }
/* By name, or by who starts earliest on the first day shown - the week views go by
   name, where one day across everybody says nothing. */
.ew-select { width: auto; flex: 0 0 auto; height: 34px; padding: 0 34px 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background-position: right 14px center, right 9px center; background-size: 5px 5px; color: var(--navy); font-family: inherit; font-size: var(--fs-ui); font-weight: 600; cursor: pointer; }
.ew-select:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-deep); }
.ew-select:disabled { opacity: .4; color: var(--faint); border-style: dashed; cursor: default; }
/* The week's days: a track from 5 AM to 10 PM with a line on each hour, and a bar
   for the hours worked, dragged like the work schedule's day view. No text on the
   bar; its tooltip says the hours. The bar is sun orange, saved or not. A day with
   no hours is grey, and hours on call are a lighter bar. */
.ew-track { position: relative; min-height: 30px; border: 1px solid var(--line-soft); border-radius: var(--r-sm); background-color: var(--mist); background-image: repeating-linear-gradient(to right, var(--line-soft) 0 1px, transparent 1px calc(100% / var(--hours))); }
.ew-track.is-off { background-color: #fbfbfb; border-color: rgba(0, 0, 0, .06); background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, .03) 0 1px, transparent 1px calc(100% / var(--hours))); }
.ew-bar { position: absolute; top: 2px; bottom: 2px; min-width: 6px; border-radius: var(--r-sm); background: var(--sun); cursor: default; touch-action: none; user-select: none; }
#employees-root.is-editing .ew-bar { cursor: grab; }
.ew-bar.is-dragging { cursor: grabbing; }
/* In the week views each day shows its date in its corner, under any bar. */
.ew-date { position: absolute; top: 1px; left: 5px; font-size: 10px; line-height: 1.2; color: var(--faint); pointer-events: none; }
/* Today's column: one band of faint teal down the whole grid, behind the table, so
   the tracks and bars sit on it and it runs on past the gaps between rows. Where it
   is and how wide it is are measured from today's day cell in employees.ts. The
   box isolates itself, so the band, behind everything at z-index -1, is not painted
   over by the panel's own background. Its
   name in the heading is teal as well. */
#employees-root .table-scroll { position: relative; isolation: isolate; }
.ew-today-column { position: absolute; top: 0; bottom: 0; z-index: -1; background: rgba(14, 154, 167, .08); pointer-events: none; }
.ew-head span.is-today { color: var(--teal-deep); }

/* Time off: a rounded block over the whole day, hatched on the diagonal. A day off
   beside another on the same row reaches across the 6px gap to it, square on that
   side, so a run of days off reads as one block; the hatch is laid from the window
   (background-attachment: fixed) so it runs unbroken from one day into the next. */
.ew-time-off { position: absolute; inset: -1px; border: 1px solid rgba(15, 59, 82, .28); border-radius: var(--r-sm); background-color: #f7f8f9; background-image: repeating-linear-gradient(45deg, rgba(15, 59, 82, .2) 0 2px, transparent 2px 8px); background-attachment: fixed; pointer-events: none; }
.ew-time-off.joins-before { left: -8px; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ew-time-off.joins-after { right: -8px; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Unsaved, a run of days off is outlined as one block: its border turns teal,
   and the sides where days join have none. */
.ew-time-off.is-changed { border-color: var(--teal); }
.ew-time-off ~ .ew-date { z-index: 1; }
/* Days that have passed, and anyone switched off, are read only. */
.ew-day.is-locked .ew-track { opacity: .55; }
.ew-day.is-locked .ew-bar { cursor: default; }
.ew-bar .day-handle { width: 6px; }
.ew-bar.is-on-call { background: color-mix(in srgb, var(--sun) 45%, var(--card)); }
/* Hours changed since the last save are outlined in teal until Save. */
.ew-bar.is-changed { outline: 1px solid var(--teal); }
/* The buttons under a day - add, remove, and on call - shown while the day is
   pointed at. Their room is kept, so the rows do not jump. */
.ew-tools { display: flex; justify-content: center; gap: 4px; min-height: 22px; margin-top: 3px; opacity: 0; transition: opacity .12s; }
.ew-day:hover .ew-tools, .ew-day:focus-within .ew-tools { opacity: 1; }
.ew-tool { display: inline-grid; place-items: center; width: 26px; height: 22px; padding: 0; border: 1.5px solid var(--teal); border-radius: var(--r-sm); background: var(--card); color: var(--navy); font-size: 13px; line-height: 1; cursor: pointer; }
.ew-tool .icon { margin: 0; }
.ew-tool:hover:not(:disabled) { color: var(--teal-deep); border-color: var(--teal-deep); background: var(--teal-soft); }
.ew-remove:hover:not(:disabled) { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.ew-tool[aria-pressed="true"] { background: var(--teal-soft); color: var(--teal-deep); border-color: var(--teal); }
.ew-tool:disabled { opacity: .35; cursor: default; }

/* One employee's details, /staff/employee/: the photo beside the record, then the
   tips, the stars and what customers wrote, and the notes, each in a panel that is
   only there when the reader may see it. */
.employee-record { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 24px; align-items: start; }
.employee-photo { width: 200px; height: 300px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--mist); }
.employee-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.employee-photo .icon { font-size: 96px; color: var(--faint); }
.employee-record .review-list { margin: 0; }
/* The picture, and under it the button that chooses another while the record is
   being changed. */
.employee-side { display: grid; gap: 10px; justify-items: start; }
.employee-side .field { margin: 0; }
.employee-side .button { width: 200px; justify-content: center; }
/* Read, a field shows its words where its box would be, so the record reads as the
   form it becomes. */
.employee-fields .field-value { margin: 0; padding: 11px 0; font-weight: 500; color: var(--navy); }
.stars { white-space: nowrap; letter-spacing: 1px; }
.stars .star { color: var(--line); }
.stars .star.is-on { color: var(--sun); }
.employee-rating { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.employee-rating:last-child { border-bottom: 0; }
.employee-rating-head { display: flex; align-items: center; gap: 10px; }
.employee-rating p { margin: 6px 0 0; }
.employee-note { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.employee-note:last-child { border-bottom: 0; }
.employee-note-head { margin: 0 0 4px; }
.employee-note-head strong { color: var(--navy); }
.employee-note p { margin: 0; white-space: pre-line; }
.employee-note-form { margin: 0 0 16px; }
.employee-note-form textarea { width: 100%; }
@media (max-width: 640px) {
    .employee-record { grid-template-columns: minmax(0, 1fr); }
    .employee-photo { margin-bottom: 14px; }
}

/* Admin > Employees > Add employee. The photo stands beside the names; on a
   narrow window it goes above them. */
.employee-form h2 { margin: 26px 0 14px; font-size: var(--fs-h3); }
.employee-form h2:first-child { margin-top: 0; }
.employee-top { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0 24px; align-items: start; }
.employee-photo-frame { display: grid; place-items: center; width: 11rem; height: 11rem; margin-bottom: 12px; overflow: hidden; border: 2px dashed var(--line); border-radius: var(--r); background: var(--mist); color: var(--faint); font-size: 64px; }
.employee-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.employee-photo input[type=file] { width: 100%; font-size: var(--fs-ui); }

/* The Browse button inside a file field, styled as this theme's outline
   button, the way www.foldersreach.com styles its own in each theme. */
input[type=file] { padding: 6px; cursor: pointer; color: var(--muted); }
input[type=file]::file-selector-button { margin-right: 10px; padding: 7px 16px; border: 2px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--navy); font-family: var(--body); font-size: var(--fs-ui); font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .15s, border-color .15s; }
input[type=file]::file-selector-button:hover { border-color: var(--navy); background: var(--card); }
input[type=file]:focus-visible::file-selector-button { border-color: var(--teal); }
.employee-active { align-self: end; }
.employee-active .check { display: flex; margin-bottom: 14px; }
.employee-link { display: block; padding: 10px 12px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .employee-top { grid-template-columns: minmax(0, 1fr); }
}