/* ============================================================================
   ACCOUNT SURFACE — the neutral, scheme-aware design system for the
   platform-owned customer pages: /account/*, /auth/*, /manage/*.

   WHY THIS FILE EXISTS
   --------------------
   These three surfaces are CROSS-TENANT. One sign-in spans every studio, and
   /account/bookings aggregates reservations from photographers who have never
   heard of each other. Dressing that in one studio's seasonal palette was
   always slightly wrong; dressing it in a studio's fixed background photo made
   it unreadable. So the surface is neutral and the studio keeps the chrome.

   WHAT IS NEUTRAL AND WHAT IS NOT
   -------------------------------
   Neutral: page canvas, card surfaces, text, borders, inputs, tables.
   Studio:  primary buttons, active nav, focus rings, icon accents, links.
   Fixed:   status colours (green/amber/red). Those carry universal meaning and
            must never pick up a studio accent — a "cancelled" pill rendered in
            a studio's festive green reads as "confirmed".

   ONE EXCEPTION: on dark, /manage/* (`.acct--studio`) takes the studio's
   theme dark colours instead of the neutral charcoal. A manage page is one
   studio's booking, not a cross-tenant view. See the block after the tokens.

   ⚠⚠ THE DARK SCHEME IS THE POINT, AND IT DID NOT EXIST BEFORE THIS FILE.
   booking.css and manage/_chrome carried ~40 `.mode-dark` rules and
   ThemeRuntime emitted <body data-preferred-theme>, but NOTHING in this app
   has ever added the `mode-dark` class — not a controller, not a Blade file,
   not one line of JS. Every one of those rules was dead. Do not wire this
   file's dark scheme through `.mode-dark`; it is driven by the media query
   below and it works with no JavaScript at all.

   THE THREE-STATE SCHEME DRIVER
   -----------------------------
       :root-ish light tokens on .acct                → the default
       @media (prefers-color-scheme: dark)
           body:not([data-preferred-theme="light"])   → browser preference wins
       body[data-preferred-theme="dark"]              → studio forces dark

   A studio that has explicitly chosen light or dark in
   `preferred_theme_mode` still overrides the browser; 'auto' (the default for
   every account today) follows the visitor. There is no flash-of-wrong-theme
   because nothing here is decided at runtime.

   ⚠ NEVER give a colour its ONLY definition inside the dark block. Every
   token is declared light-first on `.acct` and only REDEFINED in dark. A token
   that exists in one branch only renders as `unset` in the other, which is
   transparent — an invisible card, not an obviously broken one.

   LOAD ORDER
   ----------
   Pushed via partials/_account_chrome.blade.php into @stack('head'), which the
   layout renders AFTER booking.css. That ordering is load-bearing: these rules
   beat booking.css's .location-card / .btn-book / .auth-card on load order
   alone, so no paint declaration here needs !important — and none may have one,
   because an !important colour would beat the DARK branch too and freeze itself
   at its light value on a dark card.

   The one thing load order cannot beat is another !important: booking.css:89-119
   sets `font-size: … !important` on h1..h6, so the five heading sizes here must
   match it in kind. Those, plus the prefers-reduced-motion block where the
   keyword is the idiom, are the only !important declarations in this file.
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================ */

.acct {
    /* ---- Neutral surface scale (light) ---- */
    --ac-bg:            #f5f6f8;  /* page canvas behind everything */
    --ac-surface:       #ffffff;  /* cards */
    --ac-surface-2:     #f3f5f7;  /* insets: rows, inputs, table stripes */
    --ac-surface-3:     #e9ecf0;  /* hover on an inset */
    --ac-border:        #e2e6eb;  /* hairline */
    --ac-border-strong: #cbd2da;  /* input borders, dividers that must read */

    /* ---- Text ---- */
    --ac-heading:       #0e1116;
    --ac-text:          #1b1f26;
    --ac-text-2:        #545c66;  /* secondary — meets AA on --ac-surface */
    --ac-text-3:        #767f8a;  /* muted — labels, timestamps, AA at 14px+ */

    /* ---- Studio accent ----
       --ac-accent is the studio's raw accent, used ONLY as a solid fill under
       white text. Never as text or a hairline: theme-bw ships
       rgba(8,6,4,1) (invisible on dark) and theme-navy ships a pale gold
       (invisible on light). --ac-accent-text is the corrected one — see the
       note on it below. */
    --ac-accent:          var(--accent-orange, #4f46e5);
    --ac-accent-on:       #ffffff;
    /* Secondary text on a solid accent fill — --ac-accent-on, a touch softer.
       Not redefined in the dark branches: the fill is the studio's accent in
       both, so what reads on it does not change. Held at .9 so it still clears
       AA on the platform's own indigo, the lightest accent it ships. */
    --ac-accent-on-2:     rgba(255, 255, 255, .9);
    /* A dark disc behind a white control laid over a studio's artwork or accent
       — fixed in both modes for the same reason. */
    --ac-accent-scrim:        rgba(0, 0, 0, .28);
    --ac-accent-scrim-strong: rgba(0, 0, 0, .42);

    /* ⚠ --ac-accent-text and the three tints below are DEFINED TWICE on
       purpose: a plain value here, and a color-mix() correction in the
       @supports block after the dark branches (§1b). The plain one is the raw
       accent / a neutral rgba, which is what a browser without color-mix()
       keeps. The correction moves the accent AWAY from the current surface —
       darkening it on light, lightening it on dark — so a pale gold stays
       readable on white and a near-black stays readable on charcoal.

       ⚠⚠ THE CORRECTION MUST STAY INSIDE @supports. Until 2026-10-07 both
       lines sat here back to back, on the belief that an old browser drops the
       second. It does not — a CUSTOM PROPERTY is stored unparsed, so the
       color-mix() line won everywhere and every `var(--ac-accent-…)` read it
       as invalid, i.e. `unset` (transparent tints, links in body colour, a
       focus ring in currentColor). The back-to-back fallback only works for a
       REAL property. */
    --ac-accent-text:     var(--ac-accent);

    /* Accent tints — plain here, corrected in §1b. */
    --ac-accent-soft:     rgba(0, 0, 0, .04);
    --ac-accent-softer:   rgba(0, 0, 0, .02);
    --ac-accent-line:     rgba(0, 0, 0, .12);

    /* ---- Semantic status. FIXED — never studio-tinted. ---- */
    --ac-ok:            #15803d;  --ac-ok-bg:     rgba(34, 197, 94, .11);  --ac-ok-line:     rgba(34, 197, 94, .34);  --ac-ok-led:     #22c55e;
    --ac-warn:          #a16207;  --ac-warn-bg:   rgba(245, 158, 11, .12); --ac-warn-line:   rgba(245, 158, 11, .36); --ac-warn-led:   #f59e0b;
    --ac-danger:        #b91c1c;  --ac-danger-bg: rgba(239, 68, 68, .10);  --ac-danger-line: rgba(239, 68, 68, .32);  --ac-danger-led: #ef4444;
    --ac-info:          #1d4ed8;  --ac-info-bg:   rgba(59, 130, 246, .10); --ac-info-line:   rgba(59, 130, 246, .32); --ac-info-led:   #3b82f6;

    /* ---- Elevation + geometry ---- */
    --ac-shadow:        0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .14);
    --ac-shadow-lg:     0 2px 4px rgba(16, 24, 40, .05), 0 20px 44px -20px rgba(16, 24, 40, .22);
    --ac-radius:        14px;
    --ac-radius-sm:     10px;
    --ac-radius-lg:     20px;
    --ac-radius-pill:   999px;

    /* ---- Focus ring. Studio-tinted but always visible: the ring is drawn
       against the page canvas, not against the accent, so a near-black accent
       reads on light and the lightened variant reads on dark. ---- */
    --ac-focus:         var(--ac-accent-text);

    /* Tell the browser which native widget palette to use — checkboxes,
       radios, scrollbars, date pickers, autofill. Without this, dark mode
       renders a white checkbox on a charcoal card. */
    color-scheme: light;

    color: var(--ac-text);
    font-family: var(--body-font, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* ---- Dark: browser preference, unless the studio has pinned light ---- */
@media (prefers-color-scheme: dark) {
    body:not([data-preferred-theme="light"]) .acct {
        --ac-bg:            #0e1014;
        --ac-surface:       #16191f;
        --ac-surface-2:     #1d212a;
        --ac-surface-3:     #262b35;
        --ac-border:        #282d37;
        --ac-border-strong: #39404b;

        --ac-heading:       #f3f5f8;
        --ac-text:          #e4e8ed;
        --ac-text-2:        #a5adb8;
        --ac-text-3:        #848d99;

        /* Plain here; the color-mix() corrections are in §1b. */
        --ac-accent-text:   var(--ac-accent);
        --ac-accent-soft:   rgba(255, 255, 255, .06);
        --ac-accent-softer: rgba(255, 255, 255, .03);
        --ac-accent-line:   rgba(255, 255, 255, .16);

        --ac-ok:            #4ade80;  --ac-ok-bg:     rgba(34, 197, 94, .15);
        --ac-warn:          #fbbf24;  --ac-warn-bg:   rgba(245, 158, 11, .15);
        --ac-danger:        #fb7185;  --ac-danger-bg: rgba(239, 68, 68, .15);
        --ac-info:          #93b4fd;  --ac-info-bg:   rgba(59, 130, 246, .16);
        /* Bootstrap's .text-danger (intake errors, required asterisks) is
           !important, so it is re-pointed through its own token: #dc3545 is
           ~3.4:1 on this surface, --ac-danger clears AA. */
        --bs-danger-rgb:    251, 113, 133;

        --ac-shadow:        0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7);
        --ac-shadow-lg:     0 2px 4px rgba(0, 0, 0, .5), 0 20px 44px -20px rgba(0, 0, 0, .8);

        color-scheme: dark;
    }
}

/* ---- Dark: the studio has explicitly chosen it. Duplicated rather than
   combined with the media query because a selector list is invalid the moment
   one selector in it is unsupported, and because these must apply with the
   browser preference set to light. ---- */
body[data-preferred-theme="dark"] .acct {
    --ac-bg:            #0e1014;
    --ac-surface:       #16191f;
    --ac-surface-2:     #1d212a;
    --ac-surface-3:     #262b35;
    --ac-border:        #282d37;
    --ac-border-strong: #39404b;

    --ac-heading:       #f3f5f8;
    --ac-text:          #e4e8ed;
    --ac-text-2:        #a5adb8;
    --ac-text-3:        #848d99;

    /* Plain here; the color-mix() corrections are in §1b. */
    --ac-accent-text:   var(--ac-accent);
    --ac-accent-soft:   rgba(255, 255, 255, .06);
    --ac-accent-softer: rgba(255, 255, 255, .03);
    --ac-accent-line:   rgba(255, 255, 255, .16);

    --ac-ok:            #4ade80;  --ac-ok-bg:     rgba(34, 197, 94, .15);
    --ac-warn:          #fbbf24;  --ac-warn-bg:   rgba(245, 158, 11, .15);
    --ac-danger:        #fb7185;  --ac-danger-bg: rgba(239, 68, 68, .15);
    --ac-info:          #93b4fd;  --ac-info-bg:   rgba(59, 130, 246, .16);
    --bs-danger-rgb:    251, 113, 133;   /* see the media-query branch */

    --ac-shadow:        0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7);
    --ac-shadow-lg:     0 2px 4px rgba(0, 0, 0, .5), 0 20px 44px -20px rgba(0, 0, 0, .8);

    color-scheme: dark;
}

/* ---- 1b. Everything that needs color-mix() (Chrome 111, iOS 16.2 and later),
   in ONE @supports block. Without color-mix() the whole block is skipped and the
   plain values above stand.

   First the accent corrections: the same three branches as §1, in the same
   order and at the same specificity, so each overrides only its own plain
   values — light on .acct, then the two dark branches. Then the manage pages'
   studio palette, whose .acct--studio rules out-rank all three. ---- */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .acct {
        --ac-accent-text:   color-mix(in srgb, var(--ac-accent) 84%, #000);
        --ac-accent-soft:   color-mix(in srgb, var(--ac-accent) 10%, transparent);
        --ac-accent-softer: color-mix(in srgb, var(--ac-accent) 6%, transparent);
        --ac-accent-line:   color-mix(in srgb, var(--ac-accent) 30%, transparent);
    }
    @media (prefers-color-scheme: dark) {
        body:not([data-preferred-theme="light"]) .acct {
            --ac-accent-text:   color-mix(in srgb, var(--ac-accent) 62%, #fff);
            --ac-accent-soft:   color-mix(in srgb, var(--ac-accent) 20%, transparent);
            --ac-accent-softer: color-mix(in srgb, var(--ac-accent) 12%, transparent);
            --ac-accent-line:   color-mix(in srgb, var(--ac-accent) 42%, transparent);
        }
    }
    body[data-preferred-theme="dark"] .acct {
        --ac-accent-text:   color-mix(in srgb, var(--ac-accent) 62%, #fff);
        --ac-accent-soft:   color-mix(in srgb, var(--ac-accent) 20%, transparent);
        --ac-accent-softer: color-mix(in srgb, var(--ac-accent) 12%, transparent);
        --ac-accent-line:   color-mix(in srgb, var(--ac-accent) 42%, transparent);
    }

/* ---- Dark, in the studio's colours: the manage-booking pages ----
   /manage/* belongs to ONE studio's booking, unlike /account (cross-tenant),
   so on dark it takes that studio's theme instead of the neutral charcoal.
   Opt in with `acct--studio` on the wrapper; /account, /auth and /support stay
   neutral.

   The page is the theme's --bg-dark-color taken 20% toward black, and the
   cards and insets lift from that. The darkening is not taste: sepia, kringle
   and default ship dark backgrounds pale enough that the muted text and the
   error red fall under 4.5:1 on them, and 20% is where every one of the 24
   themes clears it. Text is a step lighter than the neutral scale for the
   same reason. ManageStudioDarkTest reads these numbers back out of this file
   and checks every theme against them, so change them there, not by eye.

   Inside @supports because a custom property holding color-mix() is still a
   VALID custom property where color-mix() is unsupported; it only fails where
   it is used, and a failed background is transparent, which would put the
   studio's background photo under the text. Without support, the neutral
   dark above stays. Both branches carry the same values, as above. ---- */
    @media (prefers-color-scheme: dark) {
        body:not([data-preferred-theme="light"]) .acct.acct--studio {
            --ac-bg:            color-mix(in srgb, var(--bg-dark-color, #0e1014) 80%, #000);
            --ac-surface:       color-mix(in srgb, var(--ac-bg) 96%, #fff);
            --ac-surface-2:     color-mix(in srgb, var(--ac-bg) 92%, #fff);
            --ac-surface-3:     color-mix(in srgb, var(--ac-bg) 86%, #fff);
            --ac-border:        color-mix(in srgb, var(--ac-bg) 82%, #fff);
            --ac-border-strong: color-mix(in srgb, var(--ac-bg) 70%, #fff);

            --ac-heading:       #f5f7fa;
            --ac-text:          #eef1f5;
            --ac-text-2:        #c4cbd4;
            --ac-text-3:        #a8b0bb;

            --ac-accent-text:   color-mix(in srgb, var(--ac-accent) 44%, #fff);
            --ac-accent-soft:   color-mix(in srgb, var(--ac-accent) 26%, transparent);
            --ac-accent-softer: color-mix(in srgb, var(--ac-accent) 18%, transparent);
            --ac-accent-line:   color-mix(in srgb, var(--ac-accent) 48%, transparent);
            --ac-danger:        #fda4af;
            --bs-danger-rgb:    253, 164, 175;
        }
    }

    body[data-preferred-theme="dark"] .acct.acct--studio {
        --ac-bg:            color-mix(in srgb, var(--bg-dark-color, #0e1014) 80%, #000);
        --ac-surface:       color-mix(in srgb, var(--ac-bg) 96%, #fff);
        --ac-surface-2:     color-mix(in srgb, var(--ac-bg) 92%, #fff);
        --ac-surface-3:     color-mix(in srgb, var(--ac-bg) 86%, #fff);
        --ac-border:        color-mix(in srgb, var(--ac-bg) 82%, #fff);
        --ac-border-strong: color-mix(in srgb, var(--ac-bg) 70%, #fff);

        --ac-heading:       #f5f7fa;
        --ac-text:          #eef1f5;
        --ac-text-2:        #c4cbd4;
        --ac-text-3:        #a8b0bb;

        --ac-accent-text:   color-mix(in srgb, var(--ac-accent) 44%, #fff);
        --ac-accent-soft:   color-mix(in srgb, var(--ac-accent) 26%, transparent);
        --ac-accent-softer: color-mix(in srgb, var(--ac-accent) 18%, transparent);
        --ac-accent-line:   color-mix(in srgb, var(--ac-accent) 48%, transparent);
        --ac-danger:        #fda4af;
        --bs-danger-rgb:    253, 164, 175;
    }
}


/* ============================================================================
   2. PAGE CANVAS

   ⚠ The scrim is a FIXED, FULL-VIEWPORT layer at z-index:-1. That is what
   covers a studio's `background-attachment: fixed` photo, which the layout
   paints onto <body> and which no amount of card styling can make an account
   dashboard readable on top of.

   Negative z-index paints ABOVE the root background but BELOW every in-flow
   block descendant, so the navbar and footer — which are in normal flow —
   still render over it and the studio keeps its chrome. Do not "fix" this to
   z-index:0; that buries the nav.
   ============================================================================ */

.acct { position: relative; }

.acct::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--ac-bg);
}

/* Content spacing. Bootstrap's container still owns the max-width and gutters
   (G12 — framework base first); this only sets the vertical rhythm. */
.acct-page { padding: 28px 0 64px; }
@media (max-width: 767.98px) { .acct-page { padding: 18px 0 48px; } }

/* Headings inside the surface take the neutral heading colour, overriding
   booking.css's global `h1..h6 { color: var(--heading-color) }` — a studio
   heading colour (often a deep navy) is unreadable on the dark canvas. */
.acct h1, .acct h2, .acct h3, .acct h4, .acct h5, .acct h6 { color: var(--ac-heading); }

/* One focus treatment for everything interactive on the surface. */
.acct :focus-visible {
    outline: 2px solid var(--ac-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .acct *, .acct *::before, .acct *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ============================================================================
   3. PAGE HEADER
   ============================================================================ */

.acct-head { margin-bottom: 22px; }

.acct-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
    font-size: .69rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
    color: var(--ac-accent-text);
}
.acct-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac-accent); }

.acct-title {
    margin: 0;
    font-size: clamp(1.5rem, 1.34rem + .7vw, 1.95rem) !important;
    font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
    color: var(--ac-heading);
    font-family: var(--heading-font, inherit);
}

.acct-lede {
    margin: 8px 0 0;
    max-width: 62ch;
    /* Fluid, like the title it sits under. This lede is the successor to the
       manage flow's .mng-hero .mng-sub, which was clamp()'d; the move into
       account.css flattened it to a fixed size. Floor holds the phone value. */
    font-size: clamp(.93rem, .89rem + .18vw, 1.04rem); line-height: 1.6;
    color: var(--ac-text-2);
}

/* Title row that carries an action on the right. */
.acct-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }


/* ============================================================================
   4. SIDEBAR NAV

   Desktop: a sticky rail. Mobile: a horizontally-scrollable pill strip, which
   keeps every destination one tap away instead of pushing the page content
   below a nine-item stack.
   ============================================================================ */

.acct-side { position: sticky; top: 18px; }

.acct-nav {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
}

.acct-nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    border-radius: var(--ac-radius-sm);
    font-size: .9rem; font-weight: 500; text-decoration: none;
    color: var(--ac-text-2);
    transition: background-color .15s ease, color .15s ease;
}
.acct-nav-item .ic {
    flex: 0 0 18px; text-align: center;
    font-size: .95rem; color: var(--ac-text-3);
    transition: color .15s ease;
}
.acct-nav-item:hover { background: var(--ac-surface-2); color: var(--ac-text); }
.acct-nav-item:hover .ic { color: var(--ac-text-2); }

.acct-nav-item.is-active {
    background: var(--ac-accent-soft);
    color: var(--ac-accent-text);
    font-weight: 700;
}
.acct-nav-item.is-active .ic { color: var(--ac-accent-text); }

.acct-nav-item--danger { color: var(--ac-text-2); }
.acct-nav-item--danger:hover { background: var(--ac-danger-bg); color: var(--ac-danger); }
.acct-nav-item--danger:hover .ic { color: var(--ac-danger); }

.acct-nav-sep { height: 1px; margin: 7px 12px; background: var(--ac-border); }

@media (max-width: 767.98px) {
    .acct-side { position: static; margin-bottom: 18px; }
    .acct-nav {
        flex-direction: row; flex-wrap: nowrap;
        gap: 6px; padding: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .acct-nav::-webkit-scrollbar { display: none; }
    .acct-nav-item { flex: 0 0 auto; white-space: nowrap; border-radius: var(--ac-radius-pill); padding: 8px 14px; }
    .acct-nav-sep { display: none; }
}


/* ============================================================================
   5. IDENTITY BLOCK (dashboard header)
   ============================================================================ */

.acct-ident { display: flex; align-items: center; gap: 14px; }

.acct-avatar {
    flex: 0 0 52px; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--ac-accent-soft);
    border: 1px solid var(--ac-accent-line);
    color: var(--ac-accent-text);
    font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
    text-transform: uppercase;
}
.acct-ident .who { min-width: 0; }
.acct-ident .who .nm { font-size: 1.12rem; font-weight: 700; color: var(--ac-heading); line-height: 1.25; }
.acct-ident .who .em { font-size: .86rem; color: var(--ac-text-3); overflow-wrap: anywhere; }


/* ============================================================================
   6. CARD
   ============================================================================ */

.ac-card {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
    color: var(--ac-text);
}
.ac-card + .ac-card { margin-top: 16px; }

.ac-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ac-border);
}
.ac-card-title {
    display: flex; align-items: center; gap: 9px;
    margin: 0;
    font-size: 1rem !important; font-weight: 700; letter-spacing: -.01em;
    color: var(--ac-heading);
}
.ac-card-title .ic { color: var(--ac-accent-text); font-size: .95rem; }
.ac-card-sub { margin: 4px 0 0; font-size: .85rem; color: var(--ac-text-3); line-height: 1.5; }

.ac-card-body { padding: 20px; }
.ac-card-body > :last-child { margin-bottom: 0; }
.ac-card-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--ac-border);
    background: var(--ac-surface-2);
    border-radius: 0 0 var(--ac-radius) var(--ac-radius);
}

/* Accent-tinted card, for a single call to action per page. */
.ac-card--accent { background: var(--ac-accent-softer); border-color: var(--ac-accent-line); }

@media (max-width: 575.98px) {
    .ac-card-head, .ac-card-body { padding: 15px 16px; }
    .ac-card-foot { padding: 12px 16px; }
}


/* ============================================================================
   7. STAT TILES
   ============================================================================ */

.ac-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }

.ac-stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 18px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
}
.ac-stat .ic {
    width: 32px; height: 32px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--ac-accent-soft);
    color: var(--ac-accent-text);
    font-size: .88rem;
}
.ac-stat .n {
    font-size: 1.7rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
    color: var(--ac-heading);
    font-variant-numeric: tabular-nums;
}
.ac-stat .k { font-size: .78rem; font-weight: 500; color: var(--ac-text-3); }


/* ============================================================================
   8. ROWS + LISTS
   ============================================================================ */

.ac-row {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 15px 18px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
    transition: border-color .15s ease, transform .15s ease;
}
.ac-row + .ac-row { margin-top: 10px; }
.ac-row:hover { border-color: var(--ac-border-strong); }

.ac-row-main { flex: 1 1 260px; min-width: 0; }
.ac-row-side { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ac-row-title { font-size: .99rem; font-weight: 700; color: var(--ac-heading); line-height: 1.3; }

/* One metadata line: icon + text, dot-separated segments. */
.ac-meta {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-top: 4px;
    font-size: .855rem; color: var(--ac-text-2); line-height: 1.5;
}
.ac-meta .ic { color: var(--ac-text-3); font-size: .8rem; }
.ac-meta .sep { color: var(--ac-border-strong); }
.ac-meta--quiet { color: var(--ac-text-3); font-size: .8rem; }

/* Simple bulleted list, accent markers. */
.ac-list { margin: 0; padding-left: 20px; color: var(--ac-text-2); line-height: 1.75; font-size: .92rem; }
.ac-list li::marker { color: var(--ac-accent-text); }

/* Bordered stack of plain rows inside a card (sessions, activity, factors). */
.ac-stack { display: flex; flex-direction: column; }
.ac-stack > * { padding: 13px 0; border-bottom: 1px solid var(--ac-border); }
.ac-stack > *:first-child { padding-top: 0; }
.ac-stack > *:last-child { padding-bottom: 0; border-bottom: 0; }

/* An inset panel — a row-within-a-card that needs its own boundary. */
.ac-inset {
    padding: 13px 15px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
}
.ac-inset + .ac-inset { margin-top: 9px; }


/* ============================================================================
   9. STATUS PILLS — fixed semantic colour, never studio-tinted.

   ⚠ Colour is never the only signal. Every pill carries its own word
   ("Confirmed", "Cancelled"), so the state survives with no colour perception.
   ============================================================================ */

.ac-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px;
    border: 1px solid transparent; border-radius: var(--ac-radius-pill);
    font-size: .755rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.ac-pill .led { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }

.ac-pill--ok      { background: var(--ac-ok-bg);     border-color: var(--ac-ok-line);     color: var(--ac-ok); }
.ac-pill--ok .led      { background: var(--ac-ok-led); }
.ac-pill--warn    { background: var(--ac-warn-bg);   border-color: var(--ac-warn-line);   color: var(--ac-warn); }
.ac-pill--warn .led    { background: var(--ac-warn-led); }
.ac-pill--danger  { background: var(--ac-danger-bg); border-color: var(--ac-danger-line); color: var(--ac-danger); }
.ac-pill--danger .led  { background: var(--ac-danger-led); }
.ac-pill--info    { background: var(--ac-info-bg);   border-color: var(--ac-info-line);   color: var(--ac-info); }
.ac-pill--info .led    { background: var(--ac-info-led); }
.ac-pill--neutral { background: var(--ac-surface-2); border-color: var(--ac-border);      color: var(--ac-text-2); }
.ac-pill--neutral .led { background: var(--ac-text-3); }
.ac-pill--accent  { background: var(--ac-accent-soft); border-color: var(--ac-accent-line); color: var(--ac-accent-text); }
.ac-pill--accent .led  { background: var(--ac-accent); }


/* ============================================================================
   10. CODE CHIP — confirmation / photo codes
   ============================================================================ */

.ac-code {
    display: inline-block;
    padding: 3px 9px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .875rem; font-weight: 700; letter-spacing: .07em;
    color: var(--ac-heading);
    max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
.ac-code--lg {
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: clamp(1.75rem, 1.45rem + 1.25vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: .14em;
}

.ac-code-label {
    font-size: .66rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
    color: var(--ac-text-3);
    margin-bottom: 3px;
}


/* ============================================================================
   11. BUTTONS

   These override booking.css's .btn-book/.btn-outline-book on this surface by
   load order, but the views use .ac-btn directly so the two never interleave.
   ============================================================================ */

.ac-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px;
    border: 1px solid transparent; border-radius: var(--ac-radius-sm);
    font-size: .9rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.ac-btn:active { transform: translateY(1px); }
.ac-btn:disabled, .ac-btn.is-disabled { opacity: .55; pointer-events: none; }

.ac-btn--primary { background: var(--ac-accent); border-color: var(--ac-accent); color: var(--ac-accent-on); }
.ac-btn--primary:hover { filter: brightness(1.08); color: var(--ac-accent-on); }

.ac-btn--ghost { background: var(--ac-surface); border-color: var(--ac-border-strong); color: var(--ac-text); }
.ac-btn--ghost:hover { background: var(--ac-surface-2); border-color: var(--ac-text-3); color: var(--ac-text); }

.ac-btn--quiet { background: transparent; border-color: transparent; color: var(--ac-text-2); }
.ac-btn--quiet:hover { background: var(--ac-surface-2); color: var(--ac-text); }

.ac-btn--danger { background: transparent; border-color: var(--ac-danger-line); color: var(--ac-danger); }
.ac-btn--danger:hover { background: var(--ac-danger-bg); border-color: var(--ac-danger); color: var(--ac-danger); }

.ac-btn--danger-solid { background: #dc2626; border-color: #dc2626; color: #fff; }
.ac-btn--danger-solid:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

.ac-btn--sm { padding: 6px 13px; font-size: .82rem; border-radius: 8px; }
.ac-btn--lg { padding: 12px 22px; font-size: 1rem; }
.ac-btn--block { display: flex; width: 100%; }

/* Text link that reads as a link without a full button's weight. */
.ac-link { color: var(--ac-accent-text); text-decoration: none; font-weight: 600; }
.ac-link:hover { color: var(--ac-accent-text); text-decoration: underline; }
.ac-link--quiet { color: var(--ac-text-2); font-weight: 500; text-decoration: none; }
.ac-link--quiet:hover { color: var(--ac-text); text-decoration: underline; }
/* A control that ACTS (submits a form, opens a disclosure) but reads as a link.
   ⚠ It must be a real <button>, not an <a href="#"> — an anchor with no
   destination is announced as a link, is followed by the browser on Enter, and
   leaves a stray # in the address bar. This strips the button chrome instead. */
.ac-link--btn {
    padding: 0; background: none; border: 0; font: inherit; line-height: inherit;
    vertical-align: baseline; cursor: pointer;
}


/* ============================================================================
   12. FORMS
   ============================================================================ */

.ac-field { margin-bottom: 15px; }
.ac-field:last-child { margin-bottom: 0; }

.ac-label {
    display: block; margin-bottom: 6px;
    font-size: .8rem; font-weight: 600; letter-spacing: .005em;
    color: var(--ac-text);
}
.ac-label .opt { font-weight: 400; color: var(--ac-text-3); }

.ac-input {
    display: block; width: 100%;
    padding: 10px 13px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border-strong);
    border-radius: var(--ac-radius-sm);
    font-size: .94rem; line-height: 1.5;
    color: var(--ac-text);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ac-input::placeholder { color: var(--ac-text-3); opacity: 1; }
.ac-input:hover:not(:disabled) { border-color: var(--ac-text-3); }
.ac-input:focus {
    outline: none;
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 3px var(--ac-accent-soft);
}
.ac-input:disabled { background: var(--ac-surface-2); color: var(--ac-text-3); cursor: not-allowed; }
.ac-input[aria-invalid="true"] { border-color: var(--ac-danger); }
textarea.ac-input { min-height: 96px; resize: vertical; }
select.ac-input { cursor: pointer; }

/* Leading-icon wrapper. The icon is decorative — the <label> names the field. */
.ac-input-wrap { position: relative; }
.ac-input-wrap .ic {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--ac-text-3); font-size: .88rem; pointer-events: none;
}
.ac-input-wrap .ac-input { padding-left: 38px; }

/* Stripe Elements mounts an iframe inside the field, so :focus and
   [aria-invalid] never land on the element we styled. Stripe puts these two
   classes on the mount node instead — without them a card field is the one
   input in the flow with no visible focus ring (WCAG 2.4.7). */
.ac-input.StripeElement--focus {
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 3px var(--ac-accent-soft);
}
.ac-input.StripeElement--invalid { border-color: var(--ac-danger); }

.ac-hint { margin-top: 5px; font-size: .79rem; color: var(--ac-text-3); line-height: 1.5; }
.ac-error { margin-top: 5px; font-size: .79rem; color: var(--ac-danger); font-weight: 600; }

/* Toggle row: a switch plus its own explanatory copy. */
.ac-toggle {
    display: flex; align-items: flex-start; gap: 13px;
    padding: 14px 15px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease;
}
.ac-toggle + .ac-toggle { margin-top: 10px; }
.ac-toggle:hover { border-color: var(--ac-border-strong); }
/* The ON card. The checked switch's sibling paints it, over the label's own border and
   background — not .ac-toggle:has(input:checked), which a browser before Chrome 105 /
   iOS 15.4 ignores, and not a class a script keeps in step, which would need a script.
   isolation gives the label its own stacking context, so z-index:-1 lands above the
   label's background and below its content; inset:-1px reaches over the 1px border.
   The tint sits on the CARD's surface, as it did when the rule replaced the label's
   inset background outright. */
.ac-toggle { position: relative; isolation: isolate; }
.ac-toggle input:checked + .tg-body::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
    border: 1px solid var(--ac-accent-line); border-radius: var(--ac-radius-sm);
    background: var(--ac-surface) linear-gradient(var(--ac-accent-softer), var(--ac-accent-softer));
}
.ac-toggle input { flex: 0 0 auto; margin-top: 2px; width: 2.4em; height: 1.2em; accent-color: var(--ac-accent); cursor: pointer; }
.ac-toggle .tg-body { min-width: 0; }
.ac-toggle .tg-title { font-size: .92rem; font-weight: 650; color: var(--ac-heading); }
.ac-toggle .tg-desc { margin-top: 2px; font-size: .82rem; color: var(--ac-text-2); line-height: 1.5; }

/* Plain checkbox row (remember me, consent). */
.ac-check { display: flex; align-items: flex-start; gap: 9px; font-size: .87rem; color: var(--ac-text-2); cursor: pointer; }
.ac-check input { flex: 0 0 auto; margin-top: .18em; accent-color: var(--ac-accent); cursor: pointer; }

/* The intake questions on /manage/answers. They render through
   book/_intake-fields, which the booking step shares, so they are Bootstrap
   controls (.form-control, .card, .btn-outline-*), not .ac-input. Without
   these, the dark scheme put white boxes and dark-grey help text on a
   charcoal card. Scoped to .acct, so the booking step keeps the studio theme. */
.acct .form-label { color: var(--ac-text); }
.acct .form-text  { color: var(--ac-text-3); }
.acct .form-control,
.acct .form-select {
    background-color: var(--ac-surface);
    border-color: var(--ac-border-strong);
    color: var(--ac-text);
}
.acct .form-control::placeholder { color: var(--ac-text-3); opacity: 1; }
.acct .form-control:focus,
.acct .form-select:focus {
    background-color: var(--ac-surface);
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 3px var(--ac-accent-soft);
    color: var(--ac-text);
}
.acct .form-control:disabled,
.acct .form-select:disabled { background-color: var(--ac-surface-2); color: var(--ac-text-3); }
.acct .form-control.is-invalid,
.acct .form-select.is-invalid { border-color: var(--ac-danger); }
.acct .invalid-feedback { color: var(--ac-danger); }
.acct .intake-child-card {
    background: var(--ac-surface-2);
    border-color: var(--ac-border);
    color: var(--ac-text);
}
/* The raw accent is only safe as a fill — as text and hairline it takes the
   corrected one, like every other accent text on this surface. */
.acct .btn-outline-book,
.acct .intake-child-card .btn-outline-danger {
    background: transparent;
    border-color: var(--ac-accent-text);
    color: var(--ac-accent-text);
}
.acct .btn-outline-book:hover,
.acct .intake-child-card .btn-outline-danger:hover {
    background: var(--ac-accent);
    border-color: var(--ac-accent);
    color: var(--ac-accent-on);
}


/* ============================================================================
   13. ALERTS
   ============================================================================ */

.ac-alert {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 16px;
    margin-bottom: 16px;
    border: 1px solid transparent; border-radius: var(--ac-radius-sm);
    font-size: .89rem; line-height: 1.55;
}
.ac-alert .ic { flex: 0 0 auto; margin-top: .12em; font-size: .95rem; }
.ac-alert .body { min-width: 0; flex: 1 1 auto; }
.ac-alert .body > :last-child { margin-bottom: 0; }

.ac-alert--ok     { background: var(--ac-ok-bg);     border-color: var(--ac-ok-line);     color: var(--ac-ok); }
.ac-alert--warn   { background: var(--ac-warn-bg);   border-color: var(--ac-warn-line);   color: var(--ac-warn); }
.ac-alert--danger { background: var(--ac-danger-bg); border-color: var(--ac-danger-line); color: var(--ac-danger); }
.ac-alert--info   { background: var(--ac-info-bg);   border-color: var(--ac-info-line);   color: var(--ac-info); }

/* An alert that carries an action on its right edge. */
.ac-alert .act { flex: 0 0 auto; margin-left: auto; align-self: center; }

@media (max-width: 575.98px) {
    .ac-alert { flex-wrap: wrap; }
    .ac-alert .act { width: 100%; margin-left: 0; }
}


/* ============================================================================
   14. EMPTY STATE
   ============================================================================ */

.ac-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 40px 24px;
    background: var(--ac-surface);
    border: 1px dashed var(--ac-border-strong);
    border-radius: var(--ac-radius);
}
.ac-empty .ic {
    width: 46px; height: 46px; margin-bottom: 13px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px;
    background: var(--ac-surface-2);
    color: var(--ac-text-3);
    font-size: 1.15rem;
}
.ac-empty .ttl { font-size: .99rem; font-weight: 650; color: var(--ac-heading); }
.ac-empty .ds { margin-top: 5px; max-width: 42ch; font-size: .87rem; color: var(--ac-text-3); line-height: 1.55; }
.ac-empty .act { margin-top: 16px; }


/* ============================================================================
   15. TABS
   ============================================================================ */

.ac-tabs {
    display: flex; gap: 4px; flex-wrap: nowrap;
    margin-bottom: 16px; padding: 5px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    overflow-x: auto; scrollbar-width: none;
}
.ac-tabs::-webkit-scrollbar { display: none; }

.ac-tab {
    flex: 1 1 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 15px;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent;
    font-size: .875rem; font-weight: 600; white-space: nowrap;
    color: var(--ac-text-2); cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ac-tab:hover { color: var(--ac-text); }
.ac-tab[aria-selected="true"], .ac-tab.active {
    background: var(--ac-surface);
    border-color: var(--ac-border);
    color: var(--ac-heading);
    box-shadow: var(--ac-shadow);
}
.ac-tab .cnt {
    padding: 1px 7px; border-radius: var(--ac-radius-pill);
    background: var(--ac-surface-3);
    font-size: .74rem; font-weight: 700;
    color: var(--ac-text-2);
    font-variant-numeric: tabular-nums;
}
.ac-tab[aria-selected="true"] .cnt, .ac-tab.active .cnt { background: var(--ac-accent-soft); color: var(--ac-accent-text); }


/* ============================================================================
   16. FACTS GRID — label/value pairs (manage detail)
   ============================================================================ */

.ac-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 28px; }

.ac-fact .k {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 4px;
    font-size: .67rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ac-text-3);
}
.ac-fact .k .ic { color: var(--ac-accent-text); }
/* A fact's value carries the page's meaning (a date, a price, a location), so
   it rides the fluid scale — .mng-fact .v was clamp()'d before the move here. */
.ac-fact .v { font-size: clamp(1rem, .96rem + .18vw, 1.11rem); font-weight: 600; color: var(--ac-text); line-height: 1.4; }
.ac-fact .v .unit { font-size: .8rem; font-weight: 500; color: var(--ac-text-3); }


/* ============================================================================
   17. TICKET — the confirmation-code centrepiece on manage/detail
   ============================================================================ */

.ac-ticket {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
    padding: 18px 22px;
    background: var(--ac-accent-softer);
    border: 1px solid var(--ac-accent-line);
    border-radius: var(--ac-radius);
}
.ac-ticket .tk-main { flex: 1 1 220px; min-width: 0; }
.ac-ticket .tk-label { font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ac-accent-text); margin-bottom: 5px; }
.ac-ticket .tk-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: clamp(1.55rem, 1.4rem + .6vw, 1.95rem); font-weight: 800; letter-spacing: .12em; line-height: 1;
    color: var(--ac-heading);
    max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
.ac-ticket .tk-note { margin-top: 7px; font-size: .82rem; color: var(--ac-text-2); }
.ac-ticket .tk-stub { display: flex; align-items: center; padding-left: 20px; border-left: 2px dashed var(--ac-accent-line); }

@media (max-width: 519.98px) {
    .ac-ticket .tk-stub { width: 100%; padding: 13px 0 0; border-left: 0; border-top: 2px dashed var(--ac-accent-line); }
}

/* ============================================================================
   18. ACTION TILES — the big touch targets on manage/detail
   ============================================================================ */

.ac-tile {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 15px 17px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    text-decoration: none; cursor: pointer;
    color: var(--ac-text);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ac-tile:hover { transform: translateY(-2px); border-color: var(--ac-accent-line); box-shadow: var(--ac-shadow-lg); color: var(--ac-text); }
.ac-tile.is-disabled { opacity: .5; cursor: not-allowed; }
.ac-tile.is-disabled:hover { transform: none; box-shadow: none; border-color: var(--ac-border); }
.ac-tile .ic {
    flex: 0 0 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--ac-accent-soft);
    border: 1px solid var(--ac-accent-line);
    color: var(--ac-accent-text);
    font-size: 1.05rem;
}
.ac-tile--danger .ic { background: var(--ac-danger-bg); border-color: var(--ac-danger-line); color: var(--ac-danger); }
.ac-tile .tl { font-size: .95rem; font-weight: 700; color: var(--ac-heading); line-height: 1.25; }
.ac-tile .ds { margin-top: 2px; font-size: .82rem; color: var(--ac-text-3); line-height: 1.45; }


/* ============================================================================
   19. CHIPS
   ============================================================================ */

.ac-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-pill);
    font-size: .84rem; color: var(--ac-text-2);
}
.ac-chip .ic { color: var(--ac-accent-text); font-size: .8rem; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 8px; }


/* ============================================================================
   20. TIMELINE — reservation history
   ============================================================================ */

.ac-timeline { margin: 0; padding: 0; list-style: none; }
.ac-timeline li { position: relative; padding: 0 0 17px 25px; }
.ac-timeline li::before {
    content: ""; position: absolute; left: 6px; top: 5px; bottom: -3px;
    width: 2px; background: var(--ac-border);
}
.ac-timeline li:last-child { padding-bottom: 0; }
.ac-timeline li:last-child::before { display: none; }
.ac-timeline .node {
    position: absolute; left: 0; top: 3px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--ac-accent);
    box-shadow: 0 0 0 4px var(--ac-accent-soft);
}
.ac-timeline .ttl { font-size: .92rem; font-weight: 650; color: var(--ac-heading); }
.ac-timeline .meta { font-size: .78rem; color: var(--ac-text-3); }
.ac-timeline .reason { margin-top: 2px; font-size: .85rem; color: var(--ac-text-2); }


/* ============================================================================
   21. TABLE — refund breakdown, price deltas
   ============================================================================ */

.ac-table { width: 100%; margin: 0; border-collapse: collapse; }
.ac-table th {
    padding: 0 0 9px;
    font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ac-text-3); text-align: left;
}
.ac-table td { padding: 8px 0; font-size: .92rem; color: var(--ac-text-2); }
.ac-table th.amt, .ac-table td.amt { text-align: right; font-variant-numeric: tabular-nums; }
.ac-table td.amt { color: var(--ac-text); }
.ac-table tr.total td {
    padding-top: 12px;
    border-top: 1px solid var(--ac-border-strong);
    font-size: 1.02rem; font-weight: 700; color: var(--ac-heading);
}
.ac-table tr.total td.amt { color: var(--ac-ok); }


/* ============================================================================
   22. AUTH — the centred single-card surface
   ============================================================================ */

.ac-auth { max-width: 460px; margin: 0 auto; }
.ac-auth--wide { max-width: 660px; }

.ac-auth-head { text-align: center; margin-bottom: 22px; }
.ac-auth-icon {
    width: 58px; height: 58px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: var(--ac-accent-soft);
    border: 1px solid var(--ac-accent-line);
    color: var(--ac-accent-text);
    font-size: 1.4rem;
}
.ac-auth-icon--ok { background: var(--ac-ok-bg); border-color: var(--ac-ok-line); color: var(--ac-ok); }

/* A studio's offer artwork on Manage Booking's "add to your booking" card, in
   place of the card's icon. Fixed height, natural width: a square product shot
   and a wide banner both fit whole, never cropped. min-width holds the square
   while the image loads so the copy beside it does not jump. */
.ac-offer-art {
    display: block; flex: 0 0 auto;
    height: 120px; width: auto; min-width: 120px; max-width: 100%;
    object-fit: contain;
    border-radius: 16px;
    background: var(--ac-accent-soft);
    border: 1px solid var(--ac-accent-line);
}

/* The studio's offer card — Manage Booking and the account home
   (manage/_upsell). The one card on the page in the studio's SOLID accent, so it
   reads as an offer rather than one more panel: the 6% tint it wore before
   vanished into the page on a navy-accented studio (owner, 2026-10-17).
   White on the raw accent is the pairing .ac-btn--primary already makes, so a
   studio whose primary button reads, reads here. The button is reversed —
   white, accent text — the package upgrade card's own "reversed" choice.
   Artwork left, words right; the two stack on a phone, artwork first. */
.ac-offer {
    position: relative;
    background: var(--ac-accent);
    border-color: var(--ac-accent);
    color: var(--ac-accent-on);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ac-offer:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}
.ac-offer-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 26px; }
.ac-offer-banner {
    position: relative;
    display: block; flex: 0 1 46%; min-width: 0;
    cursor: zoom-in;
}
/* Fills its column, never taller than 240px: a wide banner fits its width, a
   square product shot its height — whole either way, never cropped. */
.ac-offer-banner .ac-offer-art {
    width: 100%; height: auto; min-width: 0; max-height: 240px;
    background: transparent; border: 0;
    border-radius: var(--ac-radius-sm);
}
/* Clear of the close button, which sits over the top-right corner. */
.ac-offer-copy { flex: 1 1 260px; min-width: 0; padding-right: 28px; }
.ac-offer .ac-card-title { font-size: 1.2rem !important; color: var(--ac-accent-on); }
.ac-offer .ac-card-title .ic,
.ac-offer .ac-meta,
.ac-offer .ac-meta .ic { color: var(--ac-accent-on-2); }
.ac-offer-text { margin: 6px 0 16px; color: var(--ac-accent-on-2); line-height: 1.55; }
.ac-offer-hint { font-size: .82rem; color: var(--ac-accent-on-2); }
.ac-offer-btn { background: var(--ac-accent-on); border-color: var(--ac-accent-on); color: var(--ac-accent); }
.ac-offer-btn:hover { background: var(--ac-accent-on); color: var(--ac-accent); filter: brightness(.94); }
.ac-offer-browse-btn {
    background: transparent;
    border-color: color-mix(in srgb, var(--ac-accent-on) 72%, transparent);
    color: var(--ac-accent-on);
}
.ac-offer-browse-btn:hover {
    background: var(--ac-accent-scrim);
    border-color: var(--ac-accent-on);
    color: var(--ac-accent-on);
}
/* The close button floats over the artwork on a phone, so it carries its own
   dark disc rather than relying on the accent behind it. A plain button, not
   Bootstrap's .btn-close-white: that one inverts the whole element with a
   filter, which would turn this disc light under a white cross. */
.ac-offer-close {
    position: absolute; top: 12px; right: 12px;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--ac-accent-scrim);
    color: var(--ac-accent-on);
    font-size: 1rem; line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease;
}
.ac-offer-close:hover { background: var(--ac-accent-scrim-strong); }
/* The surface's focus ring is the accent — invisible on an accent fill. */
.ac-offer :focus-visible { outline-color: var(--ac-accent-on); }

@media (max-width: 767.98px) {
    .ac-offer-banner { flex-basis: 100%; }
    .ac-offer-copy { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ac-offer { transition: none; }
    .ac-offer:hover { transform: none; }
}
.ac-auth-title {
    margin: 0;
    /* Successor to booking.css's .auth-heading, which was fluid. !important is
       what beats booking.css's own h1 — the clamp has to carry it too. */
    font-size: clamp(1.42rem, 1.33rem + .4vw, 1.67rem) !important; font-weight: 700; letter-spacing: -.02em;
    color: var(--ac-heading);
    font-family: var(--heading-font, inherit);
}
.ac-auth-sub { margin: 7px 0 0; font-size: .89rem; color: var(--ac-text-2); line-height: 1.55; }

.ac-auth-foot {
    display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 18px;
    border-top: 1px solid var(--ac-border);
    font-size: .865rem;
}
.ac-auth-foot .sep { color: var(--ac-border-strong); }

/* One-time secrets: recovery codes, TOTP manual-entry key.

   ⚠ The auto-fit grid is right for a LIST of short codes. A single long secret
   in it gets one narrow column and wraps mid-key, which is the one string a
   customer has to retype by hand — --one gives it the full width instead. */
.ac-secret {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 9px;
    padding: 16px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
}
.ac-secret code {
    padding: 7px 10px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: 7px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-align: center;
    color: var(--ac-heading);
}
.ac-secret--one { grid-template-columns: 1fr; }
.ac-secret--one code { word-break: break-all; letter-spacing: .1em; }

/* A single centred code entry (MFA challenge). */
.ac-otp {
    width: 100%; max-width: 260px; margin: 0 auto;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.55rem; font-weight: 700; letter-spacing: .34em; text-indent: .34em;
    padding: 12px 14px;
}

/* QR panel on MFA setup. The image is a light-background QR, so it keeps a
   white plate in both schemes — inverting it stops phone cameras reading it. */
.ac-qr {
    display: inline-flex; padding: 12px;
    background: #fff;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
}
.ac-qr img { display: block; width: 176px; height: 176px; }
/* ⚠ The setup QR is INLINE SVG, not an <img> — bacon/bacon-qr-code renders the
   matrix server-side so the TOTP secret never leaves the box. Sizing it needs
   its own rule; an img-only rule leaves the SVG at whatever intrinsic size the
   encoder chose, which grows with the length of the provisioning URI. */
.ac-qr svg { display: block; width: 176px; height: 176px; }


/* ============================================================================
   23. CALENDAR + SLOT PICKER — /manage/reschedule
   ============================================================================ */

.ac-cal-dow {
    padding: 5px 0; text-align: center;
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ac-text-3);
}
.ac-day {
    aspect-ratio: 1 / 1; width: 100%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: var(--ac-radius-sm);
    background: var(--ac-surface-2);
    font-size: .9rem; font-weight: 600;
    color: var(--ac-text-3);
    cursor: default;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.ac-day.is-open {
    background: var(--ac-accent-soft);
    border-color: var(--ac-accent-line);
    color: var(--ac-accent-text);
    cursor: pointer;
}
.ac-day.is-open:hover { transform: translateY(-1px); border-color: var(--ac-accent); }
.ac-day.is-selected { background: var(--ac-accent); border-color: var(--ac-accent); color: var(--ac-accent-on); }
.ac-day.is-empty { background: transparent; border-color: transparent; }

.ac-slot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 10px 14px;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    font-size: .9rem; font-weight: 600; text-align: left;
    color: var(--ac-text);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.ac-slot:hover { border-color: var(--ac-accent-line); }
.ac-slot.is-selected { background: var(--ac-accent); border-color: var(--ac-accent); color: var(--ac-accent-on); }
.ac-slot .rem { font-size: .8rem; font-weight: 500; color: var(--ac-text-3); }
.ac-slot.is-selected .rem { color: var(--ac-accent-on); opacity: .85; }


/* ============================================================================
   24. SELECTABLE LOCATION ROW — /manage/rebook
   ============================================================================ */

.ac-loc {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 16px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
    text-decoration: none;
    color: var(--ac-text);
    transition: border-color .15s ease, transform .15s ease;
}
.ac-loc + .ac-loc { margin-top: 9px; }
.ac-loc:hover { transform: translateY(-1px); border-color: var(--ac-accent-line); color: var(--ac-text); }
.ac-loc.is-active { background: var(--ac-accent-softer); border-color: var(--ac-accent); }
.ac-loc .nm { font-size: .93rem; font-weight: 650; color: var(--ac-heading); }
.ac-loc .mt { font-size: .82rem; color: var(--ac-text-3); }


/* ============================================================================
   25. UTILITIES — a deliberately small set. Reach for Bootstrap first.
   ============================================================================ */

.ac-muted    { color: var(--ac-text-3); }
.ac-quiet    { color: var(--ac-text-2); }
.ac-strong   { color: var(--ac-heading); font-weight: 650; }

/* Single-tone text — for the lone icon or figure that has to carry meaning on
   its own (a refunded amount, a "cancelled" line). The manage views used to
   write #16a34a and #dc2626 inline, which held their light-mode value on a dark
   card; these resolve per scheme like everything else.

   ⚠ Colour alone is never the signal (G10) — every use sits beside wording that
   says the same thing. */
.ac-t-ok     { color: var(--ac-ok); }
.ac-t-warn   { color: var(--ac-warn); }
.ac-t-danger { color: var(--ac-danger); }
.ac-t-accent { color: var(--ac-accent-text); }
.ac-hr       { height: 1px; margin: 18px 0; border: 0; background: var(--ac-border); opacity: 1; }
.ac-sec-title {
    display: flex; align-items: center; gap: 8px;
    margin: 26px 0 12px;
    font-size: .72rem !important; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
    color: var(--ac-text-3);
}

/* Per-studio grouping on /account/bookings. One account aggregates bookings
   across every studio it has booked with, so each tab is sectioned by studio
   rather than run together as one list. The rule under the heading does the
   separating; the rows themselves are unchanged. */
.ac-studio-group + .ac-studio-group { margin-top: 26px; }
.ac-studio-head {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 0 0 12px; padding-bottom: 9px;
    border-bottom: 1px solid var(--ac-border);
    font-size: .95rem !important; font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--ac-heading);
}
.ac-studio-head .nm { min-width: 0; }
.ac-studio-head .cnt {
    padding: 1px 7px; border-radius: var(--ac-radius-pill);
    background: var(--ac-surface-3);
    font-size: .74rem; font-weight: 700;
    color: var(--ac-text-2);
    font-variant-numeric: tabular-nums;
}
.ac-studio-here {
    padding: 1px 8px; border-radius: var(--ac-radius-pill);
    background: var(--ac-accent-soft);
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ac-accent-text);
}

.ac-stack-sm > * + * { margin-top: 10px; }
.ac-stack-md > * + * { margin-top: 16px; }

/* Bootstrap 5.3 has no min-width utility, and a flex child defaults to
   min-width:auto — so a long user-agent string or email address refuses to
   shrink and pushes the button beside it off the card. */
.acct .min-w-0 { min-width: 0; }

.ac-timeline .meta .sep { color: var(--ac-border-strong); }


/* ============================================================================
   26. PASSWORD STRENGTH METER

   The meter's markup and JS live in resources/views/auth/_password-meter.blade.php
   and public/assets/js/password-meter.js, and booking.css already styles it for
   the booking flow. Those base rules hang off --font-color / --border, which are
   the STUDIO's tokens — on the neutral surface they resolve to the studio's body
   colour over our slate card, which is exactly the mismatch this file exists to
   fix, and in dark mode it is unreadable.

   So: re-point the colour-bearing declarations at the account tokens, and touch
   nothing else. The class names, data attributes and the DOM shape are the
   contract the meter's JS reads — do not restyle by renaming.

   The .mode-dark rules in booking.css never apply here: nothing on this surface
   carries that class, and the dark branch comes from the tokens above instead.
   ============================================================================ */

.acct .pw-meter-seg                       { background: var(--ac-surface-3); }
.acct .pw-meter-seg[data-pw-on="1"]       { background: var(--ac-accent); }
.acct .pw-meter-bar[data-pw-level="1"] .pw-meter-seg[data-pw-on="1"] { background: var(--ac-danger-led); }
.acct .pw-meter-bar[data-pw-level="2"] .pw-meter-seg[data-pw-on="1"] { background: var(--ac-warn-led); }
.acct .pw-meter-bar[data-pw-level="3"] .pw-meter-seg[data-pw-on="1"],
.acct .pw-meter-bar[data-pw-level="4"] .pw-meter-seg[data-pw-on="1"] { background: var(--ac-ok-led); }

/* booking.css dims these with opacity, which on a card reads as washed-out
   rather than quiet. Full opacity + a real token is both calmer and higher
   contrast — .78rem grey at 50% opacity does not clear AA. */
.acct .pw-meter-verdict       { color: var(--ac-text-2); opacity: 1; }
.acct .pw-meter-verdict-label { color: var(--ac-text-3); opacity: 1; }
.acct .pw-req                 { color: var(--ac-text-2); opacity: 1; }
.acct .pw-req[data-pw-state="met"]  { color: var(--ac-ok); opacity: 1; }
.acct .pw-req[data-pw-state="fail"] { color: var(--ac-danger); opacity: 1; }
.acct .pw-meter-note          { color: var(--ac-text-3); opacity: 1; }


/* ============================================================================
   27. RESCHEDULE — "Where?" and the centre list (/manage/reschedule, /manage/rebook)

   The "Where?" step's default — keeping the centre — is a tile marked by its
   tint and its place first in the list, never by colour alone: its label says
   "Keep …". Each centre row says what the booking becomes there before it is
   picked; a change carries an exclamation icon and a same-package line a tick,
   so the icon SHAPE carries the meaning as well as its tone (G10).
   ============================================================================ */

.ac-tile--primary { background: var(--ac-accent-softer); border-color: var(--ac-accent-line); }

.ac-move-search { margin-bottom: 8px; }
.ac-move-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ac-move {
    padding: 15px 17px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-sm);
}
.ac-move[hidden] { display: none; }
.ac-move.is-active { background: var(--ac-accent-softer); border-color: var(--ac-accent); }
.ac-move-head { display: flex; align-items: baseline; gap: 8px 10px; flex-wrap: wrap; }
.ac-move-name {
    flex: 1 1 auto; min-width: 0; margin: 0;
    font-size: 1rem !important; font-weight: 700; line-height: 1.3;
    color: var(--ac-heading);
}
.ac-move-dist { font-size: .82rem; color: var(--ac-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-move-plan {
    list-style: none; margin: 10px 0 14px; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
    font-size: .88rem; line-height: 1.5; color: var(--ac-text-2);
}
.ac-move-plan li { display: flex; align-items: flex-start; gap: 8px; }
.ac-move-plan .ic { flex: 0 0 auto; margin-top: 4px; font-size: .8rem; color: var(--ac-text-3); }
.ac-move-plan .is-same .ic { color: var(--ac-ok); }
.ac-move-plan .is-change .ic { color: var(--ac-warn); }
.ac-move-plan .is-money { font-weight: 650; color: var(--ac-heading); }
.ac-move-plan .is-money .ic { color: var(--ac-accent-text); }


/* ============================================================================
   28. DIALOG — Bootstrap's modal in the surface's tokens ("Before you go" on
   /manage/cancel, build change-location-entry)

   Bootstrap owns the structure, the focus trap, Esc and the backdrop (G12 —
   framework base first); this only repaints it. The dialog must sit INSIDE
   .acct, where these tokens are declared — outside it each var(--ac-*) below
   resolves to nothing and the card turns transparent.
   ============================================================================ */

.modal.ac-modal {
    --bs-modal-bg: var(--ac-surface);
    --bs-modal-color: var(--ac-text);
    --bs-modal-border-color: var(--ac-border);
    --bs-modal-border-radius: var(--ac-radius-lg);
    --bs-modal-inner-border-radius: var(--ac-radius-lg);
    --bs-modal-box-shadow: var(--ac-shadow-lg);
    --bs-modal-padding: 28px;
    --bs-modal-width: 460px;
}
.ac-modal .modal-content { box-shadow: var(--ac-shadow-lg); }
.ac-modal-title {
    margin: 12px 0 8px;
    font-size: 1.3rem !important; font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
    color: var(--ac-heading);
    font-family: var(--heading-font, inherit);
}
.ac-modal-text { margin: 0 0 22px; font-size: .95rem; line-height: 1.6; color: var(--ac-text-2); }
@media (max-width: 575.98px) {
    .modal.ac-modal { --bs-modal-padding: 22px; }
}