/* ==========================================================================
   Mobile Mechanic - modern dark theme
   Layered on top of a single design-token system. No inline styles anywhere
   (enforced by the Content-Security-Policy in config/config.php).
   ========================================================================== */

/* 1. Tokens
   ---------------------------------------------------------------------- */

:root {
    /* White / blue / navy. The accent is the same blue as the logo artwork,
       so the mark and the interface read as one identity. Every text-on-
       surface pair below was checked against WCAG AA (4.5:1). */
    --bg: #FFFFFF;
    --bg-soft: #F4F7FB;
    --bg-elev: #FFFFFF;
    --bg-glass: rgba(11, 37, 69, 0.03);
    --bg-glass-strong: rgba(11, 37, 69, 0.06);

    --border: rgba(11, 37, 69, 0.12);
    --border-strong: rgba(11, 37, 69, 0.22);

    --text: #12263F;
    --text-soft: #3C5573;
    --muted: #5E7288;

    --accent: #1D6FB8;
    --accent-soft: #6BA3D8;
    --accent-ink: #FFFFFF;
    --accent-2: #1D6FB8;

    /* Navy carries the header, footer and other inverted surfaces. */
    --navy: #0B2545;
    --navy-soft: #13315C;
    --on-navy: #FFFFFF;
    --on-navy-soft: #C6D6E8;

    --success: #0F7A52;
    --danger: #C5303F;
    --warning: #A16207;

    --gradient: linear-gradient(135deg, #1D6FB8 0%, #3B83C4 100%);
    --gradient-cool: linear-gradient(135deg, #1D6FB8 0%, #0B2545 100%);
    --gradient-fade: linear-gradient(180deg, rgba(29, 111, 184, 0.12), rgba(29, 111, 184, 0));

    --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.08);
    --shadow-md: 0 12px 32px -12px rgba(11, 37, 69, 0.18);
    --shadow-lg: 0 32px 64px -24px rgba(11, 37, 69, 0.22);
    --glow: 0 0 0 1px rgba(29, 111, 184, 0.24), 0 12px 40px -12px rgba(29, 111, 184, 0.28);

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

    --container: 1180px;
    --gutter: 24px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Two rows on desktop: the logo is centred on its own line, with the nav
       beneath it. The nav is too wide to share a line with a centred logo
       without overlapping, so it gets the full width to itself. */
    --header-h: 112px;
}

/* 2. Reset and base
   ---------------------------------------------------------------------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(900px 480px at 12% -8%, rgba(29, 111, 184, 0.16), transparent 60%),
        radial-gradient(760px 420px at 92% 4%, rgba(29, 111, 184, 0.1), transparent 62%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--accent-soft);
    text-decoration: none;
    transition: color 0.2s var(--ease);
}

a:hover,
a:focus-visible {
    color: var(--accent);
}

h1,
h2,
h3,
h4 {
    line-height: 1.12;
    letter-spacing: -0.02em;
    font-weight: 700;
}

p {
    color: var(--text-soft);
}

::selection {
    background: var(--accent);
    color: var(--accent-ink);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* 3. Layout helpers
   ---------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

main {
    min-height: 60vh;
    padding-bottom: 40px;
}

.section {
    padding-block: clamp(56px, 8vw, 104px);
}

.section--tight {
    padding-block: clamp(40px, 5vw, 64px);
}

.section-head {
    max-width: 640px;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.section-head h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    margin-bottom: 12px;
}

.section-head p {
    font-size: 1.05rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-soft);
    background: rgba(29, 111, 184, 0.1);
    border: 1px solid rgba(29, 111, 184, 0.25);
    border-radius: var(--radius-pill);
}

.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(29, 111, 184, 0.2);
}

.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.page-title {
    font-size: clamp(2rem, 4vw, 2.9rem);
    margin-bottom: 12px;
}

.lead {
    font-size: 1.1rem;
    color: var(--muted);
    max-width: 62ch;
    margin-bottom: 36px;
}

.divider {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* 4. Buttons
   ---------------------------------------------------------------------- */

.btn-primary,
.btn-secondary,
.btn-login,
.btn-danger,
.btn-small,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
        border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}

.btn-primary {
    background: var(--gradient);
    color: var(--accent-ink);
    box-shadow: var(--glow);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    color: var(--accent-ink);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(29, 111, 184, 0.4), 0 18px 44px -14px rgba(29, 111, 184, 0.6);
}

.btn-secondary,
.btn-small {
    background: var(--bg-glass);
    color: var(--text);
    border-color: var(--border);
    backdrop-filter: blur(8px);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-small:hover,
.btn-small:focus-visible {
    color: var(--text);
    background: var(--bg-glass-strong);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    color: var(--text);
    background: var(--bg-glass);
    border-color: var(--border-strong);
}

.btn-danger {
    background: rgba(197, 48, 63, 0.1);
    color: var(--danger);
    border-color: rgba(197, 48, 63, 0.3);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    color: #9F1239;
    background: rgba(197, 48, 63, 0.16);
    border-color: rgba(197, 48, 63, 0.5);
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.85rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.btn-row--center {
    justify-content: center;
}

/* 5. Header and navigation
   ---------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.site-header.is-stuck {
    background: rgba(255, 255, 255, 0.96);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "brand brand brand"
        "nav   nav   nav";
    align-items: center;
    justify-items: center;
    column-gap: 20px;
    row-gap: 8px;
    min-height: var(--header-h);
    padding-block: 14px;
}

/* The logo holds the middle column, so it stays centred however wide the nav
   gets. The two 1fr columns absorb the nav, which changes with the session
   (signed in adds My requests, Admin, Logout and the username). */
.brand {
    grid-area: brand;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand:hover,
.brand:focus-visible {
    color: var(--text);
}

/* The logo artwork is blue on an opaque near-black field, so it sits on a dark
   background as-is. Square corners, with a hairline to keep that field from
   reading as a seam where the translucent header overlaps page content. */
.brand-logo {
    display: block;
    height: 40px;
    width: auto;
}

.footer-brand .brand-logo {
    height: 48px;
}

@media (max-width: 560px) {
    .brand-logo {
        height: 34px;
    }
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    grid-area: nav;
    justify-self: center;
}

.site-nav a {
    padding: 9px 14px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--text-soft);
    border-radius: var(--radius-pill);
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--text);
    background: var(--bg-glass);
}

.site-nav a[aria-current="page"] {
    color: var(--text);
    background: var(--bg-glass-strong);
}

.site-nav .btn-login {
    margin-left: 8px;
    padding: 9px 20px;
    font-size: 0.9rem;
}

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    padding-left: 14px;
    font-size: 0.85rem;
    color: var(--muted);
    border-left: 1px solid var(--border);
}

.nav-user::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(15, 122, 82, 0.2);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    grid-area: toggle;
    justify-self: end;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 3px auto;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}

.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* 6. Hero
   ---------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(64px, 10vw, 132px) clamp(52px, 7vw, 92px);
    border-bottom: 1px solid var(--border);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(11, 37, 69, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 37, 69, 0.045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
    pointer-events: none;
}

.hero > .container {
    position: relative;
    z-index: 1;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.hero h1 {
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    margin-bottom: 20px;
}

.hero-sub {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--text-soft);
    max-width: 54ch;
    margin-bottom: 32px;
}

.hero-points {
    display: grid;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-soft);
    font-size: 0.95rem;
}

.hero-points li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hero-points svg {
    flex-shrink: 0;
    color: var(--success);
}

/* Hero visual: stacked glass card */
.hero-visual {
    position: relative;
    display: grid;
    gap: 16px;
}

.hero-card {
    padding: 22px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg);
}

.hero-card--float {
    margin-left: 44px;
    background: linear-gradient(150deg, rgba(29, 111, 184, 0.16), rgba(29, 111, 184, 0.04));
    border-color: rgba(29, 111, 184, 0.3);
}

.hero-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.hero-card-title {
    font-size: 0.95rem;
    font-weight: 600;
}

.hero-amount {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.hero-amount span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
}

.hero-rows {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: 0.9rem;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.hero-row span:first-child {
    color: var(--muted);
}

.pulse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success);
}

.pulse::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 rgba(15, 122, 82, 0.5);
    animation: pulse 2.4s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(15, 122, 82, 0.45); }
    70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* 7. Trust strip
   ---------------------------------------------------------------------- */

.trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 1px;
    margin-top: clamp(40px, 6vw, 72px);
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.trust-item {
    padding: 20px;
    background: var(--bg-soft);
    text-align: center;
}

.trust-item strong {
    display: block;
    font-size: 1.45rem;
    letter-spacing: -0.03em;
}

.trust-item span {
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* 8. Cards and grids
   ---------------------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    list-style: none;
}

.card-grid--three {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
        background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(11, 37, 69, 0.28), transparent);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.card:hover {
    transform: translateY(-4px);
    background: var(--bg-glass-strong);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.card:hover::before {
    opacity: 1;
}

.card h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.card p {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 18px;
}

.card-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    background: rgba(29, 111, 184, 0.12);
    border: 1px solid rgba(29, 111, 184, 0.24);
    border-radius: 13px;
    color: var(--accent-soft);
}

.card-icon svg {
    width: 22px;
    height: 22px;
}

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
}

.service-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.8rem;
    color: var(--muted);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 4px 10px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.card-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 600;
}

.card-link svg {
    width: 15px;
    height: 15px;
    transition: transform 0.2s var(--ease);
}

.card-link:hover svg {
    transform: translateX(3px);
}

.card-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 4px;
    padding: 10px 12px;
    font-size: 0.83rem;
    color: var(--accent-soft);
    background: rgba(29, 111, 184, 0.08);
    border: 1px solid rgba(29, 111, 184, 0.2);
    border-radius: var(--radius-sm);
}

.card-note svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.check-list {
    display: grid;
    gap: 9px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 0.93rem;
    color: var(--text-soft);
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.check-list svg {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--success);
}

/* 9. Process steps
   ---------------------------------------------------------------------- */

.step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 20px;
    counter-reset: step;
    list-style: none;
}

.step {
    position: relative;
    padding: 28px 24px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    counter-increment: step;
}

.step::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: 14px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.step h3 {
    font-size: 1.08rem;
    margin-bottom: 8px;
}

.step p {
    color: var(--muted);
    font-size: 0.94rem;
}

/* 10. Stats band
   ---------------------------------------------------------------------- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 16px;
}

.stat {
    padding: 24px 18px;
    text-align: center;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stat .stat-value {
    display: block;
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.1;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat .stat-label {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* 11. Testimonials
   ---------------------------------------------------------------------- */

.quote-card {
    padding: 26px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.quote-mark {
    font-size: 2.4rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.5;
    margin-bottom: 10px;
}

.quote-text {
    color: var(--text-soft);
    font-size: 0.98rem;
    margin-bottom: 20px;
}

.stars {
    display: inline-flex;
    gap: 3px;
    margin-bottom: 14px;
    color: var(--warning);
}

.stars svg {
    width: 15px;
    height: 15px;
}

.quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent-ink);
    background: var(--gradient);
    border-radius: 50%;
    flex-shrink: 0;
}

.quote-author strong {
    display: block;
    font-size: 0.95rem;
}

.quote-author span {
    font-size: 0.82rem;
    color: var(--muted);
}

/* 12. FAQ accordion
   ---------------------------------------------------------------------- */

.faq {
    display: grid;
    gap: 12px;
    max-width: 820px;
    margin-inline: auto;
}

.faq-item {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.faq-item[open] {
    background: var(--bg-glass-strong);
    border-color: var(--border-strong);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s var(--ease);
    flex-shrink: 0;
}

.faq-item[open] summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.faq-answer {
    padding: 0 22px 20px;
    color: var(--muted);
    font-size: 0.95rem;
}

/* 13. CTA band
   ---------------------------------------------------------------------- */

.cta-band {
    position: relative;
    overflow: hidden;
    padding: clamp(36px, 6vw, 60px);
    text-align: center;
    background:
        linear-gradient(135deg, rgba(29, 111, 184, 0.16), rgba(11, 37, 69, 0.1)),
        var(--bg-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
}

.cta-band::before {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    width: 70%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(29, 111, 184, 0.3), transparent 65%);
    pointer-events: none;
}

.cta-band > * {
    position: relative;
}

.cta-band h2 {
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    margin-bottom: 12px;
}

.cta-band p {
    max-width: 56ch;
    margin: 0 auto 28px;
}

/* 14. Admin tabs, search, and form actions
   ---------------------------------------------------------------------- */

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
    padding: 6px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    width: fit-content;
    max-width: 100%;
}

.admin-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 11px rather than 9px so the pill clears 44px tall. */
    padding: 11px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    border-radius: var(--radius-pill);
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.admin-tab svg {
    opacity: 0.8;
}

.admin-tab:hover,
.admin-tab:focus-visible {
    color: var(--text);
    background: var(--bg-glass);
}

.admin-tab.is-active {
    color: var(--accent-ink);
    background: var(--gradient);
}

.admin-tab.is-active svg {
    opacity: 1;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--border);
}

.search-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    padding: 12px 14px;
    color: var(--muted);
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.search-bar input[type="search"] {
    flex: 1 1 220px;
    padding: 11px 14px;
    font: inherit;
    color: var(--text);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.search-bar input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(29, 111, 184, 0.16);
}

.result-count {
    margin-bottom: 12px;
    font-size: 0.88rem;
    color: var(--muted);
}

.muted-text {
    color: var(--muted);
}

.row-link {
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

.row-link:hover {
    color: var(--accent);
}

.section-actions {
    margin-top: 24px;
}

.section-actions .btn-secondary svg {
    transform: rotate(180deg);
}

/* 15. Progress log and status controls
   ---------------------------------------------------------------------- */

.status-form {
    margin-top: 8px;
}

.status-form select {
    padding: 7px 28px 7px 10px;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-soft);
    background-color: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B98AB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 13px;
    cursor: pointer;
}

.status-form select:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 0 0 22px 0;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background: var(--border);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--muted);
    box-shadow: 0 0 0 4px var(--bg-elev);
}

.timeline-dot-new {
    background: var(--accent);
}

.timeline-dot-in_progress {
    background: var(--warning);
}

.timeline-dot-done {
    background: var(--success);
}

.timeline-body {
    flex: 1;
    min-width: 0;
}

.timeline-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 4px;
}

.timeline-time,
.timeline-author {
    font-size: 0.8rem;
    color: var(--muted);
}

.timeline-note {
    margin: 4px 0;
    color: var(--text-soft);
    font-size: 0.94rem;
}

.request-list {
    display: grid;
    gap: 18px;
    list-style: none;
    margin-bottom: 10px;
}

.request-card {
    padding: 24px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.request-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.request-head h3 {
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.request-meta {
    font-size: 0.85rem;
    color: var(--muted);
}

.request-issue {
    margin-bottom: 14px;
    color: var(--text-soft);
    font-size: 0.95rem;
}

.request-progress {
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.request-progress summary {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    list-style: none;
}

.request-progress summary::-webkit-details-marker {
    display: none;
}

.request-progress summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease);
    margin-left: auto;
}

.request-progress[open] summary::after {
    transform: rotate(-135deg);
}

.request-progress .timeline {
    margin-top: 18px;
}

.request-progress-empty {
    padding-top: 14px;
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

.section-top-gap {
    margin-top: 22px;
}

/* 16. Forms
   ---------------------------------------------------------------------- */

.form-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 28px;
    align-items: start;
}

.form-card {
    padding: clamp(24px, 4vw, 38px);
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-md);
}

.form-card--narrow {
    max-width: 480px;
    margin-inline: auto;
}

.form-card--wide {
    max-width: 100%;
}

.form-card > h2 {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.form-intro {
    color: var(--muted);
    font-size: 0.93rem;
    margin-bottom: 26px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 16px;
}

.form-grid--vehicle {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 520px) {
    .form-grid--vehicle {
        grid-template-columns: 1fr;
    }
}

.field {
    margin-bottom: 16px;
}

.form-grid .field {
    margin-bottom: 0;
}

.field label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    /* 16px, not 0.95rem. iOS zooms the whole page in when a field's text is
       smaller than 16px and leaves it zoomed after blur, which on a form means
       the user lands halfway down the page with the keyboard up. The extra
       0.8px on a desktop form is invisible; the zoom is not. */
    font-size: 1rem;
    color: var(--text);
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

.field textarea {
    min-height: 140px;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(29, 111, 184, 0.16);
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B98AB' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.field-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--muted);
}

.form-footer {
    margin-top: 22px;
    padding-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

/* Honeypot: hidden from humans, reachable by bots. */
.field-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.info-card {
    padding: 26px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.info-card + .info-card {
    margin-top: 16px;
}

.info-card h3 {
    font-size: 1rem;
    margin-bottom: 14px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.93rem;
    color: var(--text-soft);
    border-bottom: 1px solid var(--border);
}

.info-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.info-row svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--accent-soft);
}

.info-row strong {
    display: block;
    color: var(--text);
    font-size: 0.85rem;
}

/* 15. Alerts
   ---------------------------------------------------------------------- */

.alert {
    display: flex;
    gap: 10px;
    padding: 13px 16px;
    margin-bottom: 18px;
    font-size: 0.92rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    animation: alert-in 0.35s var(--ease);
}

@keyframes alert-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.alert ul {
    list-style: none;
}

.alert-error {
    color: var(--danger);
    background: rgba(197, 48, 63, 0.08);
    border-color: rgba(197, 48, 63, 0.28);
}

.alert-success {
    color: var(--success);
    background: rgba(15, 122, 82, 0.08);
    border-color: rgba(15, 122, 82, 0.28);
}

.alert-info {
    color: var(--accent);
    background: rgba(29, 111, 184, 0.08);
    border-color: rgba(29, 111, 184, 0.28);
}

/* 16. Tables, badges, admin
   ---------------------------------------------------------------------- */

.table-wrap {
    overflow-x: auto;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

th,
td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

thead th {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--bg-soft);
    white-space: nowrap;
}

tbody tr {
    transition: background-color 0.2s var(--ease);
}

tbody tr:hover {
    background: var(--bg-glass);
}

tbody tr:last-child td {
    border-bottom: none;
}

.badge {
    display: inline-block;
    padding: 4px 11px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--bg-glass-strong);
    color: var(--text-soft);
    white-space: nowrap;
}

.badge-new {
    color: #1A5F9E;
    background: rgba(29, 111, 184, 0.14);
    border-color: rgba(29, 111, 184, 0.32);
}

.badge-in_progress {
    color: #92400E;
    background: rgba(161, 98, 7, 0.12);
    border-color: rgba(161, 98, 7, 0.3);
}

.badge-done {
    color: #0F7A52;
    background: rgba(15, 122, 82, 0.1);
    border-color: rgba(15, 122, 82, 0.28);
}

/* Appointments. A time is only a booking once the office has confirmed it,
   so the block keeps the requested and confirmed states visually apart. */
.appointment-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.appointment-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--muted);
}

.appointment-summary strong {
    color: var(--text);
}

/* The appointment is a disclosure, matching .request-progress below, so a card
   does not open with three controls the customer usually never needs. The
   summary still reads the appointment so it is visible before opening. */
.appointment-details summary {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
}

.appointment-details summary::-webkit-details-marker {
    display: none;
}

.appointment-details summary::after {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transition: transform 0.25s var(--ease);
    margin-left: auto;
}

.appointment-details[open] summary::after {
    transform: rotate(-135deg);
}

.appointment-details[open] .appointment-summary {
    margin-bottom: 14px;
}

.appointment-form {
    margin-top: 14px;
    padding: 16px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.appointment-form .form-actions {
    margin-top: 14px;
}

/* The one-time signing link. Broken anywhere so a long token wraps instead of
   forcing the whole card wide. */
.sign-link-box {
    margin: 8px 0 0;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.empty-state {
    padding: 44px 24px;
    text-align: center;
    color: var(--muted);
    background: var(--bg-glass);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.toolbar .btn-small {
    color: var(--muted);
}

.toolbar .btn-secondary {
    color: var(--text);
    background: rgba(29, 111, 184, 0.12);
    border-color: rgba(29, 111, 184, 0.3);
}

.page-header {
    padding-top: clamp(36px, 5vw, 60px);
    padding-bottom: 8px;
}

/* 17. Footer
   ---------------------------------------------------------------------- */

.site-footer {
    margin-top: 40px;
    padding-block: clamp(40px, 6vw, 64px) 28px;
    background: var(--bg-soft);
    border-top: 1px solid var(--border);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 36px;
    margin-bottom: 36px;
}

.footer-brand p {
    max-width: 34ch;
    margin: 14px 0 18px;
    font-size: 0.92rem;
    color: var(--muted);
}

.footer-col h4 {
    margin-bottom: 14px;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.footer-col ul {
    display: grid;
    gap: 9px;
    list-style: none;
}

.footer-col a {
    font-size: 0.92rem;
    color: var(--text-soft);
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--accent);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    font-size: 0.85rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

.site-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--muted);
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.social-links a:hover,
.social-links a:focus-visible {
    color: var(--text);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.social-links svg {
    width: 17px;
    height: 17px;
}

/* 18. Utilities and motion
   ---------------------------------------------------------------------- */

.services-cta {
    justify-content: center;
    margin-top: 34px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.no-js .reveal {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* 19. Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 980px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-card--float {
        margin-left: 0;
    }

    .form-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    :root {
        --gutter: 20px;
        /* Back to a single-row bar: the logo centres, the toggle sits right,
           and the nav drops into a panel. No second row is needed here. */
        --header-h: 72px;
    }

    .header-inner {
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "spacer brand toggle";
        row-gap: 0;
        padding-block: 0;
    }

    .nav-toggle {
        display: block;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: var(--gutter);
        right: var(--gutter);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 14px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .nav-open .site-nav {
        display: flex;
        animation: alert-in 0.25s var(--ease);
    }

    .site-nav a {
        padding: 12px 14px;
        font-size: 1rem;
    }

    .site-nav .btn-login {
        margin: 6px 0 0;
        text-align: center;
    }

    .nav-user {
        margin: 8px 0 0;
        padding: 12px 14px 0;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .header-inner {
        position: relative;
    }
}

@media (max-width: 560px) {
    .trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .btn-row .btn-primary,
    .btn-row .btn-secondary {
        width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------------- *
 * Utilities
 * ---------------------------------------------------------------------- */

/* Layout rules written as author styles (display: flex, grid, block) outrank
 * the user agent's [hidden] { display: none }, so a hidden element would stay
 * on screen. Anything toggled with el.hidden needs this. */
[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------- *
 * Invoicing
 * ---------------------------------------------------------------------- */

.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.chip.is-active {
    border-color: var(--accent);
    background: rgba(29, 111, 184, 0.14);
    color: var(--text);
}

table .num,
th.num {
    text-align: right;
    white-space: nowrap;
}

td small {
    display: block;
}

.actions-cell {
    text-align: right;
    white-space: nowrap;
}

.badge-draft,
.badge-sent,
.badge-signed,
.badge-declined,
.badge-paid,
.badge-void {
    white-space: nowrap;
}

.badge-signed,
.badge-paid {
    background: rgba(15, 122, 82, 0.1);
    color: var(--success);
}

.badge-sent {
    background: rgba(29, 111, 184, 0.1);
    color: var(--accent-2);
}

.badge-declined,
.badge-void {
    background: rgba(197, 48, 63, 0.1);
    color: var(--danger);
}

.badge-draft {
    background: var(--bg-glass-strong);
    color: var(--text-soft);
}

.status-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
}

.alert-list {
    margin: 0;
    padding-left: 1.1rem;
}

.fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
}

.fieldset legend {
    padding: 0;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.fieldset[disabled] {
    opacity: 0.65;
}

.invoice-layout {
    display: grid;
    /* The summary is a fixed 300px column, which is wider than a small phone's
       content box, so below the breakpoint it stacks instead. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 3rem;
}

.invoice-items {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.invoice-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 130px;
    gap: 0.6rem;
    align-items: end;
}

@media (max-width: 560px) {
    /* One column, because a summary column plus a 220px pair of money columns
       leaves the description about 60px wide. Stacked, each gets the full
       width and the amounts stay legible. */
    .invoice-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-item-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.invoice-item-row .field {
    margin: 0;
}

.invoice-item-line {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: right;
}

.invoice-preview {
    position: sticky;
    top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invoice-paper {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    padding: 1.1rem;
}

.invoice-preview-label {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.invoice-summary {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.invoice-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.invoice-summary dt {
    color: var(--muted);
    font-size: 0.88rem;
}

.invoice-summary dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.invoice-summary-total {
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.invoice-summary-total dt {
    color: var(--text);
    font-weight: 700;
}

.invoice-summary-total dd {
    font-size: 1.15rem;
    font-weight: 700;
}

.invoice-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    padding: 1.1rem;
}

.invoice-signature-image {
    display: block;
    max-width: 100%;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 0.4rem;
}

/* The printable document ---------------------------------------------- */

.invoice-document {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-soft);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 3rem;
}

.invoice-document-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.invoice-from {
    margin: 0 0 0.2rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.invoice-billto {
    text-align: right;
}

.invoice-billto p {
    margin: 0 0 0.15rem;
}

.invoice-table {
    margin-bottom: 1.25rem;
}

.invoice-totals {
    margin: 0 0 1.5rem auto;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.invoice-totals > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.invoice-totals dt {
    color: var(--muted);
    font-size: 0.9rem;
}

.invoice-totals dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.invoice-totals-grand {
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
}

.invoice-totals-grand dt {
    color: var(--text);
    font-weight: 700;
}

.invoice-totals-grand dd {
    font-size: 1.25rem;
    font-weight: 700;
}

.invoice-section {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.invoice-section h2 {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.invoice-section p {
    margin: 0 0 0.5rem;
}

.invoice-signature-typed {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.6rem;
    font-style: italic;
    color: var(--text);
}

.invoice-declined h2 {
    color: var(--danger);
}

.invoice-paid h2,
.invoice-signed h2 {
    color: var(--success);
}

/* Signature pad -------------------------------------------------------- */

.signature-field {
    margin-bottom: 1.25rem;
}

.field-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.signature-canvas-wrap {
    position: relative;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    overflow: hidden;
}

.signature-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 160px;
    touch-action: none;
    cursor: crosshair;
}

.signature-placeholder {
    position: absolute;
    left: 1rem;
    bottom: 0.75rem;
    margin: 0;
    color: var(--muted);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    font-style: italic;
    pointer-events: none;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    cursor: pointer;
}

.checkbox input {
    width: auto;
    margin-top: 0.2rem;
}

.invoice-decline {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.invoice-decline summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.9rem;
}

.invoice-decline[open] summary {
    margin-bottom: 0.9rem;
}

/* Portal invoice list -------------------------------------------------- */

.invoice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.invoice-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-glass);
    text-decoration: none;
    color: inherit;
}

.invoice-list-item:hover {
    background: var(--bg-glass-strong);
}

.invoice-list-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .invoice-layout {
        grid-template-columns: 1fr;
    }

    .invoice-preview {
        position: static;
    }
}

@media (max-width: 560px) {
    .invoice-item-row {
        grid-template-columns: 1fr 1fr;
    }

    .invoice-item-desc {
        grid-column: 1 / -1;
    }

    .invoice-billto {
        text-align: left;
    }
}

.invoice-list-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.invoice-list-row .invoice-list-item {
    flex: 1;
    min-width: 0;
}

/* ---------------------------------------------------------------------- *
 * Admin data tables
 *
 * Dense, scannable rows in the style of a professional back office: a header
 * that stays put, single-line cells that truncate rather than stretch, and
 * tabular figures so columns of numbers line up.
 * ---------------------------------------------------------------------- */

.admin-table-wrap {
    overflow: auto;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Caps the list so the header can stick, instead of running down the page. */
    max-height: min(70vh, 720px);
    overscroll-behavior: contain;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    background: #F4F7FB;
    /* The sticky header sits over scrolling rows, so it needs its own edge. */
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 1px 0 var(--border);
}

.admin-table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

/* A roster row for someone who has left the shop: still readable, clearly not
   someone to hand new work to. */
.admin-table tr.muted-row td {
    opacity: 0.62;
}

/* A hairline between rows reads more calmly than a heavy grid. */
.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr {
    transition: background-color 0.15s var(--ease);
}

.admin-table tbody tr:hover {
    background: var(--bg-glass);
}

/* A left rail marks the selected or urgent row without shouting. */
.admin-table .cell-clip {
    min-width: 190px;
}

.admin-table .cell-nowrap {
    white-space: nowrap;
}

.admin-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-table .cell-actions {
    text-align: right;
    white-space: nowrap;
}

/* Long free text is clamped to two lines; the full message stays on the
   request page, so nothing is lost. */
.cell-clip-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 34ch;
    color: var(--text-soft);
    line-height: 1.5;
}

.cell-primary {
    display: block;
    color: var(--text);
    font-weight: 600;
}

.cell-meta {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
}

.cell-meta a {
    color: var(--text-soft);
}

.cell-meta a:hover {
    color: var(--accent);
}

/* Status: a coloured pill for scanning, with the control beside it. */
.status-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 132px;
}

.status-form {
    margin-top: 0;
}

.status-form select {
    width: 100%;
    padding: 5px 26px 5px 9px;
    font-size: 0.78rem;
}

.actions-group {
    display: inline-flex;
    gap: 6px;
    justify-content: flex-end;
}

@media (max-width: 820px) {
    /* An inner vertical scroller fights a phone's own scrolling, so on small
       screens the table just grows and the header does not stick. */
    .admin-table-wrap {
        max-height: none;
    }

    .admin-table thead th {
        position: static;
    }

    .cell-clip-text {
        max-width: 22ch;
    }
}

/* ---------------------------------------------------------------------- *
 * Admin summary tiles
 * ---------------------------------------------------------------------- */

.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(148px, 100%), 1fr));
    gap: 12px;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 15px 17px;
    text-align: left;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* The two tiles that represent work waiting on someone get an accent rail. */
.stat--attention {
    border-color: rgba(29, 111, 184, 0.32);
    background: linear-gradient(180deg, rgba(29, 111, 184, 0.09), rgba(29, 111, 184, 0.02));
}

.stat--attention .stat-value {
    color: var(--accent-soft);
}

.stat--quiet .stat-value {
    color: var(--text-soft);
}

/* Segmented filter control, so the active filter is unambiguous. */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    width: fit-content;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.toolbar .btn-small {
    color: var(--muted);
    border-color: transparent;
    background: transparent;
}

.toolbar .btn-small:hover {
    color: var(--text);
    background: var(--bg-glass-strong);
}

.toolbar .btn-secondary {
    color: var(--text);
    background: rgba(29, 111, 184, 0.14);
    border-color: rgba(29, 111, 184, 0.34);
}

.table-footnote {
    margin: 10px 2px 0;
}

.cell-strong {
    font-weight: 600;
    color: var(--text);
}

/* ---------------------------------------------------------------------- *
 * Light theme: navy surfaces
 *
 * The header and footer are the inverted surfaces in a white/blue/navy
 * palette. They are opted out of the global --text/--muted colours, which are
 * tuned for a white page, and use the on-navy pair instead.
 * ---------------------------------------------------------------------- */

.site-header {
    background: rgba(255, 255, 255, 0.88);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.site-header .site-nav a {
    color: var(--text-soft);
}

.site-header .site-nav a:hover,
.site-header .site-nav a:focus-visible {
    color: var(--accent);
    background: var(--bg-glass-strong);
}

.site-header .site-nav a[aria-current="page"] {
    color: var(--accent);
    background: var(--bg-glass-strong);
}

.site-header .nav-user {
    color: var(--muted);
    border-left-color: var(--border);
}

.site-header .nav-toggle {
    background: var(--bg-glass);
    border-color: var(--border);
}

.site-header .nav-toggle span {
    background: var(--text);
}

.site-footer {
    background: var(--navy);
    border-top: 0;
    color: var(--on-navy-soft);
}

.site-footer a {
    color: var(--on-navy-soft);
    /* Footer links sit in a list, so sizing the box grows the target without
       changing where the text sits. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.site-footer a:hover {
    color: #FFFFFF;
}

.site-footer h2,
.site-footer h3,
.site-footer .footer-brand strong {
    color: #FFFFFF;
}

.site-footer .muted-text,
.site-footer .field-hint {
    color: var(--on-navy-soft);
}

/* ---------------------------------------------------------------------- *
 * Client profile: personal details and saved vehicles
 * ---------------------------------------------------------------------- */

/* Fieldsets are used purely for grouping, so the browser's frame is removed
   and the legend is restyled as a section heading. */
.form-section {
    border: 0;
    padding: 0;
    margin: 0 0 8px;
}

.form-section + .form-section {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.form-legend {
    display: block;
    padding: 0;
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.form-hint {
    margin: 0 0 18px;
    font-size: 0.88rem;
    color: var(--muted);
}

/* Side-by-side fields that wrap to a single column on narrow screens.
   flex-wrap plus min-width keeps a long value from forcing the row wider
   than its container. */
.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
}

.field-row > .field {
    flex: 1 1 180px;
    min-width: 0;
}

.field-row > .field--narrow {
    flex: 0 1 130px;
}

.stack > *:last-child {
    margin-bottom: 0;
}

/* Profile: details and vehicles sit side by side on wide screens. */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 22px;
    align-items: start;
}

.card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--accent);
}

.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.card-subtitle {
    margin: 2px 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}

/* VIN is a fixed-width identifier, so it reads better monospaced. */
.vin-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vehicle-list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vehicle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* The row currently open in the editor form, so it is obvious what is being
   changed. */
.vehicle-row.is-editing {
    border-color: var(--accent);
    background: rgba(29, 111, 184, 0.07);
}

.vehicle-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vehicle-main strong {
    color: var(--text);
}

.vehicle-main small {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}

.vehicle-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vehicle-form {
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Removal is destructive, so it gets its own panel with the consequence
   spelled out before the confirming button. */
.confirm-panel {
    margin-bottom: 22px;
    padding: 16px 18px;
    background: rgba(197, 48, 63, 0.06);
    border: 1px solid rgba(197, 48, 63, 0.3);
    border-radius: var(--radius);
}

.confirm-title {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    color: #9F1239;
}

.confirm-panel p {
    margin: 0 0 14px;
}

@media (max-width: 720px) {
    .field-row > .field,
    .field-row > .field--narrow {
        flex: 1 1 100%;
    }

    .vehicle-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Read-only key/value summary, used on the admin client detail. */
.detail-list {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.detail-row:last-child {
    border-bottom: 0;
}

.detail-row dt {
    flex: 0 0 96px;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.detail-row dd {
    flex: 1 1 180px;
    min-width: 0;
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

.field-hint--inline {
    display: block;
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   Schedule
   Range switch on the left, the window being viewed in the middle, so the
   whole control reads as one line on a wide screen and wraps cleanly on a
   narrow one.
   --------------------------------------------------------------------------- */

.range-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 8px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.range-switch {
    display: flex;
    gap: 4px;
}

.range-tab {
    padding: 7px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    border-radius: var(--radius-pill);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.range-tab:hover,
.range-tab:focus-visible {
    color: var(--text);
    background: var(--bg-glass);
}

.range-tab.is-active {
    color: var(--accent-ink);
    background: var(--accent);
}

.range-step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-right: 4px;
}

.range-label {
    min-width: 12ch;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

/* The arrow glyph points right, so the previous control mirrors it to read
   "back". Done with a transform rather than a second icon so the set stays
   the single source of truth for the artwork. */
.range-step-flip {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
   The diary: one block per day, times down the left in a tabular column so
   the eye can find a slot without reading the text.
   --------------------------------------------------------------------------- */

.day-group + .day-group {
    margin-top: 22px;
}

.day-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.day-group-head.is-today {
    color: var(--accent);
}

.day-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-glass);
}

.day-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
}

.day-item:last-child {
    border-bottom: none;
}

.day-item:hover {
    background: var(--bg-soft);
}

.day-time {
    flex: 0 0 8ch;
    font-size: 0.9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.day-what {
    flex: 1 1 auto;
    min-width: 0;
}

.day-link {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.day-link:hover {
    color: var(--accent);
}

.day-meta {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
}

.day-state {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .day-item {
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .day-state {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------------------
   Message notifications
   A card in the corner when something new arrives. Positioned bottom-right
   because that is the corner the eye returns to, and kept clear of the modal's
   own z-index so a card can never cover a conversation being read.
   --------------------------------------------------------------------------- */

.chat-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(320px, calc(100vw - 40px));
    pointer-events: none;
}

.chat-toast {
    position: relative;
    background: var(--bg-elev);
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 13px 15px;
    pointer-events: auto;
    animation: chat-toast-in 0.25s var(--ease);
}

.chat-toast.is-leaving {
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

@keyframes chat-toast-in {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

.chat-toast-who {
    margin: 0 26px 3px 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

.chat-toast-text {
    margin: 0 0 10px;
    font-size: 0.9rem;
    color: var(--text);
    /* Two lines is enough to judge whether it is urgent without the card
       growing tall enough to cover the page. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.chat-toast-open {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
}

.chat-toast-open:hover,
.chat-toast-open:focus-visible {
    text-decoration: underline;
}

.chat-toast-close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.chat-toast-close:hover,
.chat-toast-close:focus-visible {
    background: var(--bg-glass-strong);
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    .chat-toast {
        animation: none;
    }

    .chat-toast.is-leaving {
        transition: none;
    }
}

@media (max-width: 720px) {
    /* Full width at the bottom on a phone: a corner card is too small to read
       a message in, and the thumb reaches the bottom of the screen. */
    .chat-toasts {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
    }
}

/* ==========================================================================
   Messaging section
   Mobile first. Every rule here is written for a phone and then widened at a
   breakpoint, because a phone is where most of this is read and where a
   two-pane inbox does not fit. The order is deliberately inverted from the rest
   of this file: the small case is the base, not an afterthought.
   ========================================================================== */

.messages {
    display: flex;
    flex-direction: column;
    /* The section owns the space between the site header and the footer so the
       log can scroll on its own and the composer can stay put. */
    min-height: 60vh;
}

/* --- the bar ------------------------------------------------------------ */

.messages-bar {
    background: var(--accent);
    color: var(--accent-ink);
    padding: 14px 0;
}

.messages-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.messages-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.2;
    color: inherit;
}

.messages-sub {
    margin: 2px 0 0;
    font-size: 0.8rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.messages-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7BE0B0;
    flex: 0 0 auto;
}

.messages-chip {
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

/* --- the two panes ------------------------------------------------------ */

.chat-inbox {
    display: block;
    flex: 1;
    min-height: 0;
    background: var(--bg-soft);
}

.chat-thread-list {
    background: var(--bg-elev);
}

.chat-thread-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* A row is a full-width target with a 44px avatar and at least 44px of row. A
   12px-tap target that scrolls away under a thumb is not a target. */
.chat-thread {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
    min-height: 72px;
}

.chat-thread:hover {
    background: var(--bg-glass);
}

.chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
    flex: 0 0 auto;
}

.chat-thread-main {
    flex: 1;
    min-width: 0;
    display: block;
}

.chat-thread-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.chat-thread-top strong {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-thread.is-unread .chat-thread-top strong {
    font-weight: 700;
}

.chat-thread-top time {
    font-size: 0.72rem;
    color: var(--muted);
    flex: 0 0 auto;
}

.chat-thread-preview {
    display: block;
    margin-top: 3px;
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-thread-mine {
    color: var(--text-soft);
}

.chat-thread-meta {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-glass-strong);
    color: var(--text-soft);
}

.pill-new {
    background: var(--accent);
    color: #fff;
}

/* --- the conversation ---------------------------------------------------- */

.chat-pane {
    background: var(--bg-soft);
    display: none;
}

.chat-pane-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--muted);
}

.chat-pane-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.chat-pane-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}

.chat-back {
    /* 44px square: the only way off the conversation on a phone. */
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    background: var(--bg-glass-strong);
    color: var(--text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.chat-pane-who {
    flex: 1;
    min-width: 0;
}

.chat-pane-who h2 {
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-pane-who p {
    margin: 1px 0 0;
    font-size: 0.75rem;
}

.chat-pane-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* --- the log ------------------------------------------------------------ */

.chat-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-msg {
    max-width: 78%;
    display: flex;
    flex-direction: column;
}

.chat-msg.chat-msg--mine {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-msg.chat-msg--them {
    align-self: flex-start;
    align-items: flex-start;
}

.chat-msg-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 4px 4px;
}

.chat-msg-body {
    margin: 0;
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.chat-msg.chat-msg--them .chat-msg-body {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-bottom-left-radius: 5px;
}

.chat-msg.chat-msg--mine .chat-msg-body {
    background: var(--accent);
    color: var(--accent-ink);
    border-bottom-right-radius: 5px;
}

.chat-msg-meta {
    font-size: 0.68rem;
    color: var(--muted);
    margin: 4px 4px 0;
}

.messages-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

.messages-empty p {
    margin: 0 0 6px;
}

.messages-empty strong {
    color: var(--text);
    font-size: 1rem;
}

/* --- the composer -------------------------------------------------------
   The part that has to be right on a phone. It is pinned to the bottom, grows
   with what is typed, and clears the home indicator so the send button is never
   sitting under it. The 16px font is deliberate: anything smaller and iOS
   zooms the whole page when the field takes focus. */

.chat-form {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}

.chat-fields {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.chat-field {
    flex: 0 0 auto;
    width: 45%;
    margin: 0;
}

.chat-field-grow {
    flex: 1 1 auto;
    width: auto;
}

.chat-form textarea,
.chat-form input[type="text"],
.chat-form input[type="email"] {
    width: 100%;
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    padding: 11px 14px;
    font: inherit;
    font-size: 16px;
    line-height: 1.35;
    background: var(--bg-soft);
    color: var(--text);
    resize: none;
    max-height: 120px;
    overflow-y: auto;
}

.chat-form textarea:focus,
.chat-form input:focus {
    outline: 2px solid var(--accent-soft);
    outline-offset: -1px;
    background: var(--bg-elev);
}

.chat-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-send {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 1.05rem;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.chat-send:disabled {
    background: var(--border-strong);
    cursor: default;
}

.chat-hint-inline {
    display: none;
}

.chat-error {
    margin: 0;
    padding: 10px 14px;
    background: rgba(197, 48, 63, 0.08);
    color: var(--danger);
    font-size: 0.85rem;
    border-top: 1px solid rgba(197, 48, 63, 0.2);
}

.chat-status-line {
    margin: 0;
    padding: 10px 14px;
    background: var(--bg-glass-strong);
    color: var(--text-soft);
    font-size: 0.82rem;
}

/* --- the customer's panel, which is the page ---------------------------- */

.chat-widget {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* --- wide screens: two panes, side by side ------------------------------ */

@media (min-width: 860px) {
    .messages {
        min-height: 66vh;
    }

    .chat-inbox {
        display: grid;
        grid-template-columns: minmax(260px, 340px) 1fr;
        background: transparent;
    }

    .chat-thread-list {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        align-self: start;
    }

    /* Both panes are on screen at this width, so the class the phone uses to
       swap them has nothing to swap and is ignored. */
    .chat-pane {
        display: block;
        background: transparent;
    }

    .chat-pane-body {
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
        min-height: 60vh;
    }

    .chat-back {
        display: none;
    }

    .chat-field {
        width: 170px;
    }
}

/* --- the phone: one pane at a time --------------------------------------- */

@media (max-width: 859px) {
    /* is-conversation is set by admin-chat.js when a thread is opened, and is
       already on the wrapper when the server rendered ?thread=ID. It is the
       whole navigation model at this width: the list is not navigated away
       from, it is covered, so going back costs one tap and nothing reloads. */
    .chat-inbox.is-conversation .chat-thread-list {
        display: none;
    }

    .chat-inbox.is-conversation .chat-pane {
        display: block;
        min-height: calc(100vh - 200px);
    }

    .chat-pane-body {
        min-height: calc(100vh - 200px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-pane,
    .chat-thread-list {
        transition: none;
    }
}