/*
 * Customer account, platform v3 "Champagne" (design_handoff_platform_v3/Account -
 * Champagne). Loaded by layouts/account and layouts/account-auth only, behind
 * enable_public_v3 (SiteVersion::v3). Its own reset, like site.css: not
 * business-os.css, not Tailwind. Classes are ac-*.
 *
 * Tokens follow the console (console.css) and the provider app (provider.css),
 * with a dark set for phones and laptops that ask for one.
 */

:root {
    color-scheme: light dark;
    --ac-page: #f3ede2;
    --ac-card: #fffdf8;
    --ac-panel: #fbf8f2;
    --ac-soft: #ebe2d3;
    --ac-sunk: #efe7d9;
    --ac-line: #e6dccb;
    --ac-line-2: #ece3d4;
    --ac-line-3: #f3ece0;
    --ac-input: #e0d4c0;
    --ac-ink: #2b231a;
    --ac-muted: #5e5040;
    --ac-subtle: #6f604c;
    --ac-placeholder: #8a7b66;
    --ac-gold: #b8914a;
    --ac-gold-2: #c9a45c;
    --ac-gold-text: #86642a;
    --ac-gold-hover: #5a4214;
    --ac-gold-tint: #fbf4e4;
    --ac-gold-line: #e3cf9f;
    --ac-ring: rgba(201, 164, 92, 0.22);
    --ac-track: #e9e1d3;
    --ac-btn: #2b231a;
    --ac-btn-hover: #40352a;
    --ac-btn-text: #fbf6ec;
    --ac-btn-off: #e6dccb;
    --ac-danger: #a3361e;
    --ac-warn-bg: #f5e3c1;
    --ac-warn: #77500f;
    --ac-good-bg: #e1ecd8;
    --ac-good: #386427;
    --ac-info-bg: #e4e8f1;
    --ac-info: #3a4d76;
    --ac-done-bg: #ebe4d8;
    --ac-done: #5b4e3e;
    --ac-bad-bg: #f6dcd4;
    --ac-bad: #8f2f18;
    --ac-switch-on: #7c9a5c;
    --ac-switch-off: #d8ccb8;
    --ac-hover: #faf5ec;
    --ac-header: rgba(243, 237, 226, 0.94);
    --ac-dock: rgba(251, 248, 242, 0.97);
    --ac-shadow-menu: 0 18px 40px rgba(70, 48, 14, 0.16);
    --ac-mono: 'Spline Sans Mono', ui-monospace, monospace;
    --ac-font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ac-page: #15110d;
        --ac-card: #1e1913;
        --ac-panel: #1a1611;
        --ac-soft: #2a231b;
        --ac-sunk: #251f18;
        --ac-line: #3a3127;
        --ac-line-2: #332b22;
        --ac-line-3: #2c251d;
        --ac-input: #4a3f33;
        --ac-ink: #f3ede2;
        --ac-muted: #cbbfae;
        --ac-subtle: #b3a690;
        --ac-placeholder: #8f826f;
        --ac-gold: #c9a45c;
        --ac-gold-2: #d7b571;
        --ac-gold-text: #e3c68a;
        --ac-gold-hover: #f0d9a8;
        --ac-gold-tint: #2a2216;
        --ac-gold-line: #6b5426;
        --ac-ring: rgba(201, 164, 92, 0.32);
        --ac-track: #2c251d;
        --ac-btn: #f3ede2;
        --ac-btn-hover: #ffffff;
        --ac-btn-text: #1b1610;
        --ac-btn-off: #3a3127;
        --ac-danger: #f0a08c;
        --ac-warn-bg: #3d2e14;
        --ac-warn: #ecba75;
        --ac-good-bg: #20301a;
        --ac-good: #a9d48f;
        --ac-info-bg: #232b3d;
        --ac-info: #aebfe6;
        --ac-done-bg: #2d261e;
        --ac-done: #cbbfae;
        --ac-bad-bg: #3b1d15;
        --ac-bad: #f0a08c;
        --ac-switch-on: #7c9a5c;
        --ac-switch-off: #4a3f33;
        --ac-hover: #241e17;
        --ac-header: rgba(21, 17, 13, 0.94);
        --ac-dock: rgba(26, 22, 17, 0.97);
        --ac-shadow-menu: 0 18px 40px rgba(0, 0, 0, 0.5);
    }
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ac { margin: 0; min-height: 100vh; background: var(--ac-page); color: var(--ac-ink); font-family: var(--ac-font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.ac h1, .ac h2, .ac h3, .ac p, .ac dl, .ac dd, .ac ul, .ac ol, .ac figure { margin: 0; }
.ac ul, .ac ol { padding: 0; list-style: none; }
.ac img { max-width: 100%; display: block; }
.ac a { color: var(--ac-gold-text); text-decoration: none; }
.ac a:hover { color: var(--ac-gold-hover); }
.ac button, .ac input, .ac select, .ac textarea { font: inherit; color: inherit; }
.ac ::selection { background: rgba(201, 164, 92, 0.3); }
.ac :focus-visible { outline: 2px solid var(--ac-gold); outline-offset: 2px; border-radius: 6px; }
.ac-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ac-mono { font-family: var(--ac-mono); }
.ac-muted { color: var(--ac-muted); }
.ac-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ac-btn); color: var(--ac-btn-text) !important; font-weight: 600; }
.ac-skip:focus { top: 12px; }
html:not(.js) .ac-js-only { display: none !important; }
html.js .ac-no-js { display: none !important; }

/* The house mark: a gold ring around an "A" (site/parts/mark in Champagne). */
.ac-mark { --ac-mark: 34px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--ac-mark); height: var(--ac-mark); border-radius: 999px; background: radial-gradient(120% 120% at 30% 20%, rgba(201, 164, 92, 0.2), rgba(201, 164, 92, 0.02) 70%), #000; color: #e8cc94; font-size: calc(var(--ac-mark) * 0.44); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.ac-mark::before { content: ""; position: absolute; inset: 3px; border: 1.5px solid #c9a45c; border-radius: inherit; opacity: 0.85; }
.ac-mark > span { position: relative; }
.ac-mark--38 { --ac-mark: 38px; }
.ac-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; color: var(--ac-ink) !important; }
.ac-brand__word { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.ac-brand__word small { font-size: inherit; font-weight: 500; color: var(--ac-muted); }

/* Shell: header, tabs, menu, dock ------------------------------------------ */
.ac-top { position: sticky; top: 0; z-index: 60; background: var(--ac-header); border-bottom: 1px solid var(--ac-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.ac-top__in { display: flex; align-items: center; gap: 14px; max-width: 1120px; margin: 0 auto; padding: 8px 24px; }
.ac-tabs { display: none; gap: 2px; margin-left: 8px; }
.ac-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border-radius: 10px; color: var(--ac-muted) !important; font-size: 14px; font-weight: 600; }
.ac-tabs a:hover { background: var(--ac-hover); color: var(--ac-ink) !important; }
.ac-tabs a.is-on { background: var(--ac-card); color: var(--ac-ink) !important; box-shadow: 0 1px 2px rgba(70, 48, 14, 0.08); }
.ac-top__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ac-top .ac-brand__word { display: none; }

.ac-me { position: relative; }
.ac-me > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 99px; }
.ac-me > summary::-webkit-details-marker { display: none; }
.ac-me__ava { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; background: var(--ac-gold-2); color: #2b231a; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.ac-me[open] .ac-me__ava { box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-me__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(280px, calc(100vw - 32px)); display: grid; padding: 6px; border: 1px solid var(--ac-line); border-radius: 16px; background: var(--ac-card); box-shadow: var(--ac-shadow-menu); }
.ac-me__who { display: grid; gap: 1px; padding: 10px 12px 12px; border-bottom: 1px solid var(--ac-line-3); margin-bottom: 4px !important; font-weight: 600; overflow-wrap: anywhere; }
.ac-me__who small { font-size: 12.5px; font-weight: 400; color: var(--ac-muted); }
.ac-me__menu a, .ac-me__menu button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ac-ink) !important; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.ac-me__menu a:hover, .ac-me__menu button:hover { background: var(--ac-hover); }
.ac-me__menu form { margin: 0; }
.ac-me__menu .ac-me__out { color: var(--ac-danger) !important; }

.ac-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ac-line); background: var(--ac-dock); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ac-dock a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; border-radius: 12px; color: var(--ac-subtle) !important; font-size: 11px; font-weight: 600; }
.ac-dock a svg { width: 21px; height: 21px; }
.ac-dock a.is-on { color: var(--ac-ink) !important; }
.ac-dock a.is-on svg { color: var(--ac-gold-text); }

.ac-main { width: 100%; max-width: 1120px; margin: 0 auto; padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); display: grid; gap: 18px; align-content: start; }

@media (min-width: 640px) {
    .ac-main { padding: 28px 24px calc(100px + env(safe-area-inset-bottom)); }
    .ac-top .ac-brand__word { display: inline; }
}
@media (min-width: 900px) {
    .ac-tabs { display: flex; }
    .ac-dock { display: none; }
    .ac-main { padding-bottom: 48px; }
    .ac-top .ac-brand__word small { display: none; }
}
@media (max-width: 639.98px) {
    .ac-top__in { padding: 8px 16px; }
}

.ac-flash { max-width: 1120px; margin: 14px auto 0; padding: 0 16px; }
@media (min-width: 640px) { .ac-flash { padding: 0 24px; } }
.ac-flash > div { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px 16px; border: 1px solid var(--ac-line); border-radius: 14px; background: var(--ac-card); font-size: 14px; }
.ac-flash > div.is-good { border-color: transparent; background: var(--ac-good-bg); color: var(--ac-good); }
.ac-flash form { margin: 0 0 0 auto; }

/* Type ------------------------------------------------------------------ */
.ac-head { display: grid; gap: 4px; }
.ac-head__date { font-size: 13.5px; color: var(--ac-muted); }
.ac-h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; }
.ac-h1--sm { font-size: 26px; }
.ac-h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.ac-h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.ac-lede { font-size: 15px; line-height: 1.6; color: var(--ac-muted); }
.ac-kicker { font-size: 13px; font-weight: 600; color: var(--ac-gold-text); }
.ac-small { font-size: 13px; line-height: 1.5; color: var(--ac-muted); }
/* A link inside a line of small print is still a 44px target. */
.ac-small a, .ac-tiny a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; }
.ac-card__row > a.ac-mono { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
.ac-tiny { font-size: 12.5px; line-height: 1.5; color: var(--ac-muted); }
.ac-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; width: fit-content; font-size: 14px; font-weight: 600; }
.ac-back svg { width: 16px; height: 16px; }
.ac-narrow { display: grid; gap: 14px; width: 100%; max-width: 760px; }

/* Cards, chips, buttons -------------------------------------------------- */
.ac-card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--ac-line); border-radius: 20px; background: var(--ac-card); color: var(--ac-ink); }
a.ac-card { color: var(--ac-ink) !important; transition: background-color 0.2s ease, border-color 0.2s ease; }
a.ac-card:hover { background: var(--ac-hover); border-color: var(--ac-gold-line); }
.ac-card--flat { gap: 10px; }
.ac-card--panel { background: var(--ac-panel); }
.ac-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ac-card__foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--ac-line-3); font-size: 14px; }

.ac-chip { display: inline-flex; align-items: center; width: fit-content; height: 22px; padding: 0 8px; border-radius: 7px; background: var(--ac-done-bg); color: var(--ac-done); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ac-chip--warn { background: var(--ac-warn-bg); color: var(--ac-warn); }
.ac-chip--good { background: var(--ac-good-bg); color: var(--ac-good); }
.ac-chip--info { background: var(--ac-info-bg); color: var(--ac-info); }
.ac-chip--done { background: var(--ac-done-bg); color: var(--ac-done); }
.ac-chip--bad { background: var(--ac-bad-bg); color: var(--ac-bad); }

.ac-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px; background: var(--ac-btn); color: var(--ac-btn-text) !important; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; transition: background-color 0.2s ease; }
.ac-btn:hover { background: var(--ac-btn-hover); }
.ac-btn:disabled, .ac-btn[aria-disabled="true"] { background: var(--ac-btn-off); color: var(--ac-subtle) !important; cursor: not-allowed; }
.ac-btn--lg { min-height: 52px; border-radius: 13px; font-size: 15px; }
.ac-btn--sm { min-height: 44px; padding: 0 16px; border-radius: 11px; font-size: 14px; }
.ac-btn--block { display: flex; width: 100%; }
.ac-btn--ghost { background: transparent; border-color: var(--ac-input); color: var(--ac-ink) !important; }
.ac-btn--ghost:hover { background: var(--ac-hover); }
.ac-btn--card { background: var(--ac-card); border-color: var(--ac-input); color: var(--ac-ink) !important; }
.ac-btn--card:hover { background: var(--ac-hover); }
.ac-btn--danger { background: transparent; border-color: var(--ac-input); color: var(--ac-danger) !important; }
.ac-btn--danger:hover { background: var(--ac-bad-bg); }
.ac-btn--gold { background: var(--ac-gold-2); color: #2b231a !important; }
.ac-btn--gold:hover { background: #d7b571; }
.ac-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ac-btns--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-btns form { margin: 0; display: contents; }

/* Alerts and notes ------------------------------------------------------ */
.ac-alert { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border: 1px solid var(--ac-line); border-radius: 16px; background: var(--ac-card); }
.ac-alert--gold { border-color: var(--ac-gold-line); background: var(--ac-gold-tint); }
.ac-alert__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--ac-warn-bg); color: var(--ac-warn); }
.ac-alert--gold .ac-alert__icon { background: var(--ac-gold-2); color: #2b231a; }
.ac-alert__icon svg { width: 18px; height: 18px; }
.ac-alert__text { display: grid; flex: 1; gap: 1px; min-width: min(200px, 100%); }
.ac-alert__text b { font-weight: 600; }
.ac-alert__text span { font-size: 13.5px; color: var(--ac-muted); }
.ac-note { display: flex; gap: 10px; padding: 12px; border-radius: 12px; background: var(--ac-soft); color: var(--ac-muted); font-size: 13.5px; line-height: 1.5; }
.ac-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.ac-note--warn { background: var(--ac-warn-bg); color: var(--ac-warn); }
.ac-note--good { background: var(--ac-good-bg); color: var(--ac-good); }
.ac-note--bad { background: var(--ac-bad-bg); color: var(--ac-bad); }
.ac-note > div { display: grid; gap: 8px; }
.ac-note ul { display: grid; gap: 2px; }

/* Overview -------------------------------------------------------------- */
.ac-home { display: grid; gap: 14px; align-items: start; }
.ac-home__side { display: grid; gap: 14px; }
@media (min-width: 900px) { .ac-home { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.ac-next__title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.ac-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--ac-line-3); }
.ac-money > div { display: grid; gap: 2px; }
.ac-money dt { font-size: 12px; color: var(--ac-subtle); }
.ac-money dd { font-family: var(--ac-mono); font-size: 14px; overflow-wrap: anywhere; }
.ac-progress { display: block; height: 6px; border-radius: 99px; background: var(--ac-line-2); overflow: hidden; }
.ac-progress--lg { height: 8px; }
.ac-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--ac-gold); }
.ac-empty { display: grid; gap: 12px; justify-items: start; padding: 22px 18px; border: 1px dashed var(--ac-input); border-radius: 20px; color: var(--ac-muted); }

/* Bookings: list and the sticky panel ------------------------------------ */
.ac-split { display: grid; gap: 16px; align-items: start; }
.ac-split__list { display: grid; gap: 12px; min-width: 0; }
.ac-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--ac-track); }
.ac-seg a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--ac-muted) !important; font-size: 13.5px; font-weight: 600; }
.ac-seg a.is-on { background: var(--ac-card); color: var(--ac-ink) !important; box-shadow: 0 1px 2px rgba(70, 48, 14, 0.1); }
.ac-seg a small { font-family: var(--ac-mono); font-size: 12px; font-weight: 400; color: var(--ac-subtle); }
.ac-seg--2 { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.ac-seg--2 a { min-height: 44px; font-size: 14px; }

.ac-bk { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 72px; padding: 14px 16px; border: 1px solid var(--ac-line); border-radius: 18px; background: var(--ac-card); color: var(--ac-ink) !important; transition: background-color 0.2s ease, border-color 0.2s ease; }
.ac-bk:hover { background: var(--ac-hover); }
.ac-bk.is-on { border-color: var(--ac-gold); box-shadow: 0 0 0 3px var(--ac-ring); }
.ac-bk__date { display: grid; justify-items: center; line-height: 1.1; }
.ac-bk__date small { font-size: 11.5px; color: var(--ac-subtle); }
.ac-bk__date b { font-size: 22px; font-weight: 600; }
.ac-bk__date--none b { font-size: 15px; color: var(--ac-subtle); }
.ac-bk__body { display: grid; gap: 3px; min-width: 0; }
.ac-bk__body > b { font-weight: 600; overflow-wrap: anywhere; }
.ac-bk__body > span { font-size: 13px; color: var(--ac-muted); }
.ac-bk__total { font-family: var(--ac-mono); font-size: 13.5px; white-space: nowrap; }
@media (max-width: 420px) {
    .ac-bk { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
    .ac-bk__total { grid-column: 2; }
}

.ac-detail { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--ac-line); border-radius: 20px; background: var(--ac-panel); scroll-margin-top: 76px; }
.ac-detail__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-ref { font-family: var(--ac-mono); font-size: 11.5px; color: var(--ac-muted); overflow-wrap: anywhere; }
.ac-detail__title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.ac-detail__close { display: none; }
.ac-policy { font-size: 12.5px; line-height: 1.5; color: var(--ac-muted); }

@media (min-width: 900px) {
    .ac-split { grid-template-columns: minmax(0, 1fr) 380px; }
    .ac-detail { position: sticky; top: 80px; }
}
@media (max-width: 899.98px) {
    .ac-split:not(.has-sel) .ac-detail { display: none; }
    .ac-split.has-sel .ac-detail { order: -1; }
    .ac-split:not(.has-sel) .ac-bk.is-on { border-color: var(--ac-line); box-shadow: none; }
    .ac-detail__close { display: inline-flex; }
}

.ac-facts { display: grid; padding: 2px 12px; border: 1px solid var(--ac-line-2); border-radius: 14px; background: var(--ac-card); }
.ac-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ac-line-3); font-size: 14px; }
.ac-facts > div:last-child { border-bottom: 0; }
.ac-facts dt { color: var(--ac-subtle); }
.ac-facts dd { overflow-wrap: anywhere; }
.ac-facts .is-money { font-family: var(--ac-mono); font-size: 13.5px; }
.ac-facts--wide > div { grid-template-columns: 130px minmax(0, 1fr); }

/* The full booking page ------------------------------------------------- */
.ac-record { display: grid; gap: 14px; width: 100%; max-width: 760px; }
.ac-record__head { display: grid; gap: 8px; }
.ac-section { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--ac-line); border-radius: 20px; background: var(--ac-card); scroll-margin-top: 80px; }
.ac-section--todo { border-color: var(--ac-gold-line); background: var(--ac-gold-tint); }
.ac-section > p { color: var(--ac-muted); font-size: 14px; line-height: 1.55; }
.ac-lines { display: grid; }
.ac-lines > li, .ac-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ac-line-3); font-size: 14px; }
.ac-lines > :last-child { border-bottom: 0; }
.ac-lines span { color: var(--ac-muted); font-size: 13px; }
.ac-lines .ac-mono { color: var(--ac-ink); font-size: 13.5px; white-space: nowrap; }
/* Receipts: "Download receipt" beside a payment (account/v3/partials/receipt-link, receipts). */
.ac-pay-end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; }
.ac-lines a.ac-receipt, a.ac-receipt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ac-gold-text); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ac-receipt svg { width: 16px; height: 16px; flex: none; }
.ac-receipt:hover { color: var(--ac-gold-hover); }
.ac-receipts { display: grid; gap: 2px; }
.ac-receipts__title { font-size: 12.5px; font-weight: 600; color: var(--ac-subtle); }
.ac-receipts .ac-lines > li { padding: 0; }
.ac-steps { display: grid; gap: 0; }
.ac-steps li { position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; color: var(--ac-subtle); font-size: 14px; }
.ac-steps li i { width: 10px; height: 10px; flex: none; border-radius: 99px; border: 2px solid var(--ac-input); }
.ac-steps li.is-done { color: var(--ac-ink); }
.ac-steps li.is-done i { border-color: var(--ac-gold); background: var(--ac-gold); }
.ac-steps li.is-now { font-weight: 600; }
.ac-steps li.is-now i { box-shadow: 0 0 0 4px var(--ac-ring); }
.ac-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ac-photos figure { display: grid; gap: 8px; }
.ac-photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: var(--ac-sunk); }

/* Forms ----------------------------------------------------------------- */
.ac-form { display: grid; gap: 14px; margin: 0; }
.ac-fields { display: grid; gap: 12px; }
@media (min-width: 640px) { .ac-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ac-fields--2 > .is-wide { grid-column: 1 / -1; } }
.ac-field { display: grid; gap: 6px; align-content: start; margin: 0; }
.ac-field > span { font-size: 13px; font-weight: 500; color: var(--ac-muted); }
.ac-field em { font-style: normal; font-weight: 400; color: var(--ac-subtle); }
.ac-field small { font-size: 12.5px; color: var(--ac-subtle); }
.ac input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .ac select, .ac textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--ac-input); border-radius: 12px; background: var(--ac-card); color: var(--ac-ink); font-size: 16px; }
.ac textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.ac input::placeholder, .ac textarea::placeholder { color: var(--ac-placeholder); }
.ac input:focus, .ac select:focus, .ac textarea:focus { outline: 2px solid var(--ac-ring); outline-offset: 0; border-color: var(--ac-gold); }
.ac input[readonly] { background: var(--ac-panel); color: var(--ac-muted); }
.ac input[type="checkbox"]:not([role="switch"]) { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--ac-gold); }
.ac input[type="file"] { width: 100%; min-height: 50px; padding: 12px; border: 1px dashed var(--ac-input); border-radius: 12px; background: var(--ac-panel); font-size: 14px; }
@media (min-width: 900px) { .ac input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .ac select, .ac textarea { font-size: 15px; } }

/* Switches: a real checkbox under a Champagne track. */
.ac-prefs { display: grid; padding: 4px 18px; border: 1px solid var(--ac-line); border-radius: 20px; background: var(--ac-card); }
.ac-pref { display: grid; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ac-line-3); }
.ac-pref:last-child { border-bottom: 0; }
.ac-pref__row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.ac-pref__text { display: grid; flex: 1; gap: 1px; }
.ac-pref__text b { font-weight: 500; }
.ac-pref__text small { font-size: 12.5px; color: var(--ac-subtle); }
.ac-pref form { margin: 0; display: contents; }
.ac-prefs > a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--ac-line-3); color: var(--ac-ink) !important; font-weight: 500; }
.ac-prefs > a::after { content: "\203A"; font-size: 20px; color: var(--ac-gold-text); }
.ac-prefs > a:last-child { border-bottom: 0; }
.ac-switch { position: relative; width: 48px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer; }
.ac-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ac-switch input:disabled { cursor: not-allowed; }
.ac-switch i { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--ac-switch-off); transition: background-color 0.2s ease; }
.ac-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #fffdf8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; }
.ac-switch input:checked + i { background: var(--ac-switch-on); }
.ac-switch input:checked + i::after { transform: translateX(18px); }
.ac-switch input:disabled + i { opacity: 0.55; }
.ac-switch input:focus-visible + i { outline: 2px solid var(--ac-gold); outline-offset: 2px; }

/* Orders and plans ------------------------------------------------------ */
.ac-item { display: flex; align-items: center; gap: 12px; }
.ac-item__thumb { width: 48px; height: 48px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--ac-sunk); color: var(--ac-gold-text); font-weight: 600; }
.ac-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ac-item__text { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ac-item__text b { font-weight: 500; overflow-wrap: anywhere; }
.ac-item__text small { font-size: 12.5px; color: var(--ac-subtle); }
.ac-item > .ac-mono { font-size: 13px; white-space: nowrap; }
.ac-totals { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--ac-line-3); font-size: 14px; }
.ac-totals > div { display: flex; justify-content: space-between; gap: 12px; }
.ac-totals dt { color: var(--ac-muted); }
.ac-totals dd { font-family: var(--ac-mono); font-size: 13.5px; }
.ac-totals .is-total { font-weight: 600; }
.ac-totals .is-total dt { color: var(--ac-ink); }

/* Pager ----------------------------------------------------------------- */
.ac-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ac-pager__at { font-size: 13px; color: var(--ac-muted); }

/* Sign in and create account -------------------------------------------- */
.ac-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); }
.ac-auth__col { display: grid; align-content: center; gap: 20px; width: 100%; max-width: 480px; margin: 0 auto; padding: 32px 16px 40px; }
.ac-auth__head { display: grid; gap: 8px; }
.ac-auth__head h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ac-auth__or { display: flex; align-items: center; gap: 12px; color: var(--ac-subtle); font-size: 13px; }
.ac-auth__or::before, .ac-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ac-line); }
.ac-auth__center { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.ac-auth__note { padding: 14px; border-radius: 14px; background: var(--ac-soft); font-size: 13.5px; line-height: 1.55; color: var(--ac-muted); }
.ac-auth__photo { display: none; }
@media (min-width: 640px) { .ac-auth__col { padding: 40px 24px; } }
@media (min-width: 900px) {
    .ac-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ac-auth__photo { position: relative; display: block; overflow: hidden; background: var(--ac-dark, #2a221a); }
    .ac-auth__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
    .ac-auth__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(42, 34, 26, 0.72)); }
    .ac-auth__photo p { position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 1; font-size: 20px; font-weight: 600; line-height: 1.35; color: #fbf6ec; }
}

/* Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ac *, .ac *::before, .ac *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Annel's own gold logo in the mark (22 Oct): it brings its own ring. */
.ac-mark { background: #0e0c0a; overflow: hidden; }
.ac-mark::before { display: none; }
.ac-mark > img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ac-mark { --ac-mark: 44px; }
.ac-mark--38 { --ac-mark: 52px; }