/* ALC Customer Portal — tokens from "ALC Customer Portal — Design Spec v1" (Marketing). */
@font-face{font-family:Montserrat;font-weight:400;font-display:swap;src:url(fonts/montserrat-400.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:600;font-display:swap;src:url(fonts/montserrat-600.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-weight:700;font-display:swap;src:url(fonts/montserrat-700.woff2) format("woff2")}
:root{
  --bg:#F5F5EB;--surface:#FFFFFF;--ink:#333333;--muted:#5C5C5C;--line:#E6E6DF;
  --accent:#0723F9;--on-accent:#FFFFFF;--success:#1E7A3E;--warning:#8A5A00;--danger:#B42318;--skeleton:#ECECE4;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --font:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-push:cubic-bezier(.2,.8,.2,1);
  color-scheme:light dark;
}
/* Gabe 2026-11-02: dark mode has NO light-blue accent. Text, links and icons are white (--accent = ink);
   ALC blue #0723F9 is a FILL only (buttons, selected states, badges, progress) with white text on top. */
:root{--badge:#0723F9;--accent-fill:#0723F9;--progress:#0723F9;--logo:#0723F9}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#111111;--surface:#1C1C1E;--ink:#FFFFFF;--muted:#A1A1A6;--line:#2C2C2E;
  --accent:#FFFFFF;--accent-fill:#0723F9;--progress:#FFFFFF;--logo:#FFFFFF;--on-accent:#FFFFFF;--success:#4CC26A;--warning:#F0B44C;--danger:#FF8A80;--badge:#FFFFFF;--success-ink:#FFFFFF;--warning-ink:#FFFFFF;--danger-ink:#FFFFFF;--skeleton:#2A2A2C;--shadow:none}}
:root[data-theme=dark]{--bg:#111111;--surface:#1C1C1E;--ink:#FFFFFF;--muted:#A1A1A6;--line:#2C2C2E;
  --accent:#FFFFFF;--accent-fill:#0723F9;--progress:#FFFFFF;--logo:#FFFFFF;--on-accent:#FFFFFF;--success:#4CC26A;--warning:#F0B44C;--danger:#FF8A80;--badge:#FFFFFF;--success-ink:#FFFFFF;--warning-ink:#FFFFFF;--danger-ink:#FFFFFF;--skeleton:#2A2A2C;--shadow:none}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:26px;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
main{max-width:600px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 52px) 16px calc(env(safe-area-inset-bottom) + 112px);animation:fade 160ms ease-out}
main.full{padding-bottom:calc(env(safe-area-inset-bottom) + 96px)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes push{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
main.push{animation:push 280ms var(--ease-push)}
h1{font-size:28px;line-height:34px;font-weight:700;margin:0 0 4px}
h2{font-size:20px;line-height:26px;font-weight:700;margin:0}
.large{font-size:34px;line-height:40px;font-weight:700;margin:8px 0}
.headline{font-size:22px;line-height:28px;font-weight:700}
.sub{font-size:15px;line-height:22px;color:var(--muted);margin:0;text-wrap:balance}
.foot{font-size:13px;line-height:18px;color:var(--muted)}
.wordmark{font-weight:700;font-size:15px;letter-spacing:1px}
.section-title{font-weight:600;font-size:15px;margin:24px 0 8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:12px}
.card.list{padding:0 16px}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;border-bottom:1px solid var(--line);font-size:15px;line-height:22px;color:var(--ink);text-decoration:none;background:none;border-left:0;border-right:0;border-top:0;width:100%;font-family:inherit;text-align:left;padding:0;cursor:pointer}
.row:last-child{border-bottom:0}
.row .val{color:var(--muted);white-space:nowrap}
.row.two{min-height:56px}
.row .chev{color:var(--muted);font-size:20px}
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border:0;border-radius:14px;background:var(--accent-fill);color:var(--on-accent);font:600 17px var(--font);margin-top:12px;cursor:pointer;text-decoration:none}
.btn:active{opacity:.92}
.btn:disabled{background:var(--line);color:var(--muted);cursor:default}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.ghost:disabled{background:transparent;color:var(--muted)}
.link{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font:600 17px var(--font);background:none;border:0;padding:0;cursor:pointer;text-decoration:none}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:600;border:1px solid var(--pill-c,currentColor);border-radius:999px;padding:2px 10px;white-space:nowrap}
/* Status is carried by a dot + border in the status colour (>=3:1 on its surface), never by text colour alone. */
.pill::before{content:'';flex:none;width:8px;height:8px;border-radius:4px;background:var(--pill-c,currentColor)}
.pill.ok{--pill-c:var(--success)}.pill.warn{--pill-c:var(--warning)}.pill.err{--pill-c:var(--danger)}
.ok{color:var(--success-ink,var(--success))}.warn{color:var(--warning-ink,var(--warning))}.err{color:var(--danger-ink,var(--danger))}.acc{color:var(--accent)}.mut{color:var(--muted)}
.track{height:6px;background:var(--line);border-radius:3px;margin:10px 0;overflow:hidden}
.track>i{display:block;height:6px;background:var(--progress);border-radius:3px;transform-origin:left;animation:fill 600ms var(--ease-push)}
@keyframes fill{from{transform:scaleX(0)}to{transform:none}}
label.lbl{display:block;font-size:13px;line-height:18px;color:var(--muted);margin:24px 0 6px}
.input{width:100%;height:50px;border-radius:12px;background:var(--surface);border:1px solid var(--line);padding:0 14px;font:400 17px var(--font);color:var(--ink)}
.input:focus{outline:none;box-shadow:0 0 0 2px var(--accent);border-color:transparent}
.input.bad{border-color:var(--danger)}
.input.sig{height:64px;font-size:26px;font-style:italic}
.fielderr{font-size:13px;line-height:18px;color:var(--danger-ink,var(--danger));margin-top:6px}
.code{display:flex;gap:8px;margin-top:24px}
.code input{width:100%;height:56px;text-align:center;font:700 22px var(--font);border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.code input:focus{outline:none;box-shadow:0 0 0 2px var(--accent)}
.dot{width:10px;height:10px;border-radius:5px;flex:none}
.tl{display:flex;gap:12px;align-items:center;min-height:56px;border-bottom:1px solid var(--line)}
.tl .t{flex:1;font-size:15px;line-height:22px}
.tl .d{font-size:13px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tile{aspect-ratio:1;background:var(--skeleton);border-radius:8px;overflow:hidden;border:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.empty{text-align:center;margin-top:24px}
.empty h2{margin-bottom:4px}
.banner{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;margin:16px 0 12px}
.sk{background:var(--skeleton);border-radius:8px;animation:pulse 1.2s ease-in-out infinite}
.sk.card{border:0;height:120px;border-radius:16px}
.sk.line{height:16px;margin:8px 0}
@keyframes pulse{50%{opacity:.55}}
.bub{max-width:80%;font-size:15px;line-height:22px;padding:10px 14px;margin-top:12px}
.bub.them{background:var(--surface);border:1px solid var(--line);border-radius:18px 18px 18px 6px}
.bub.me{margin-left:auto;background:var(--accent-fill);color:var(--on-accent);border-radius:18px 18px 6px 18px}
.bub.fail{border:1px solid var(--danger)}
.meta{font-size:12px;color:var(--muted);margin:4px 0 0}
.meta.r{text-align:right}
.daysep{text-align:center;font-size:12px;color:var(--muted);margin:20px 0 4px}
.answer{font-size:17px;line-height:26px;margin-top:20px}
.typing{display:flex;gap:4px;margin-top:16px}.typing i{width:6px;height:6px;border-radius:3px;background:var(--muted);animation:pulse 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{border:1px solid var(--line);color:var(--ink);background:none;border-radius:999px;padding:8px 14px;font:400 14px var(--font);min-height:44px;cursor:pointer}
.chip[aria-pressed=true]{border-color:var(--accent-fill);background:var(--accent-fill);color:var(--on-accent)}
.composer{position:fixed;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom) + 92px);max-width:568px;margin:0 auto;display:flex;align-items:center;gap:4px;border:1px solid var(--line);background:var(--surface);border-radius:22px;height:52px;padding:0 4px 0 16px}
.composer[hidden]{display:none}
.full .composer{bottom:calc(env(safe-area-inset-bottom) + 24px)}
.composer input{flex:1;border:0;background:none;font:400 15px var(--font);color:var(--ink);height:42px;outline:none}
.composer button{width:44px;height:44px;border-radius:22px;border:0;background:none;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center}
.back{display:flex;align-items:center;justify-content:space-between;margin-top:-8px}
.back .link{min-width:44px}
.center{text-align:center}
.tabs{position:fixed;left:0;right:0;bottom:0;height:calc(49px + env(safe-area-inset-bottom) + 14px);padding:6px 0 env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--shadow);display:flex;justify-content:space-around}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;line-height:14px;font-weight:600;color:var(--muted);text-decoration:none;min-height:44px;position:relative}
.tabs a[aria-current=page]{color:var(--accent)}
.tabs svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tabs a .badge{position:absolute;top:0;left:calc(50% + 8px);width:8px;height:8px;border-radius:4px;background:var(--badge)}
.viewer{position:fixed;inset:0;background:#000;z-index:10;display:flex;align-items:center;justify-content:center}
.viewer img{max-width:100%;max-height:100%}
.viewer .link{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:16px;color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}main{animation:fade 160ms ease-out!important}.sk{animation:none!important}}

/* ALC mark (iOS LaunchLogo asset) as a mask so it takes --logo: ALC blue in light, white in dark. */
.logo{display:block;background:var(--logo);-webkit-mask:url(logo.png) center/contain no-repeat;mask:url(logo.png) center/contain no-repeat}
.logo.lg{width:160px;aspect-ratio:648/508;margin:8px auto 32px}
.logo.sm{width:56px;aspect-ratio:648/508}
.hdr{display:flex;align-items:center;justify-content:center;height:36px;margin:-36px 0 12px}
.tabs[hidden]{display:none}
.composer svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.row .val{margin-left:auto}

/* review round 1 */
.nw{white-space:nowrap}
.empty p,.empty h2{text-wrap:balance}
/* error text: danger text in light, white in dark; always a danger dot before it (review #14) */
.fielderr:not(:empty){display:flex;gap:6px;align-items:baseline}
.fielderr:not(:empty)::before{content:'';flex:none;width:6px;height:6px;border-radius:3px;background:var(--danger);transform:translateY(-2px)}
/* quiet project switcher: segmented, ink outline for the selected project, no accent fill (review #7) */
.chips.seg .chip{min-height:36px;padding:6px 12px;font-size:13px;color:var(--muted)}
.chips.seg .chip[aria-pressed=true]{background:none;border-color:var(--ink);color:var(--ink);font-weight:600}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:400 15px var(--font);cursor:pointer;text-align:left}
.opt[aria-checked=true]{border:2px solid var(--ink);padding:9px 13px}
.msgmeta{font-size:12px;line-height:16px;color:var(--muted);margin-top:4px}
.msgmeta.me{text-align:right}
.bub .subj{display:block;margin-bottom:2px}
.callrow{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:16px;font-size:13px;line-height:18px;color:var(--ink)}
.callrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.center{text-align:center}

.hid{display:inline-block;font-size:13px;line-height:18px;padding:0 6px;border:1px solid var(--line);border-radius:6px;color:var(--muted);white-space:nowrap;vertical-align:1px}
.bub.me .hid{border-color:currentColor;color:inherit}
.tel{display:inline-block;min-height:44px;line-height:44px;margin:-11px 0}
.confirm-wrap{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:11;display:flex;align-items:center;justify-content:center;padding:24px}
.confirm-wrap .confirm{max-width:360px;width:100%}
.confirm-actions{display:flex;gap:12px;justify-content:flex-end;align-items:center;margin-top:16px}
.confirm-actions .danger{color:#b42318}

/* review round 3 */
/* #22 loading button keeps the accent fill with a white spinner; disabled grey stays a separate style */
.btn.busy,.btn.busy:disabled{background:var(--accent-fill);color:var(--on-accent);cursor:progress}
/* O2: decline is a text link under the primary, never an outlined button */
.link.decline{display:flex;width:100%;justify-content:center;margin-top:4px}
.link.decline:disabled{color:var(--muted);cursor:default}
/* C2-C4: consent block at the full 343pt measure, Callout 15/22, 16 gap between blocks */
.consent{margin-top:16px}
.consent h2{font-size:20px;line-height:26px;font-weight:700;margin:0 0 16px}
.consent>*+*{margin-top:16px}
.consent .sub,.consent label.sub{font-size:15px;line-height:22px;text-wrap:pretty;max-width:none}
.consent .consent-row{margin-top:0!important}
.pinned{position:fixed;left:16px;right:16px;max-width:568px;margin:0 auto;bottom:calc(env(safe-area-inset-bottom) + 75px);z-index:2}
.pinned .btn{margin:0;box-shadow:var(--shadow)}
.pinned[hidden]{display:none}
main:has(.pinned:not([hidden])){padding-bottom:calc(env(safe-area-inset-bottom) + 180px)}
.consent-row{display:flex;gap:12px;align-items:flex-start}
.consent-row .chk{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent-fill)}
.consent-row .link{display:inline;min-height:0;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:12px 0;margin:-12px 0}
#sig-legal{text-wrap:pretty}
/* review round 4: Other tip field with label and $ prefix */
.tipother{margin-top:12px}.tipother[hidden]{display:none}
.prefix{position:relative}
.prefix>span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:17px;pointer-events:none}
.prefix .input{padding-left:30px}
.btn[hidden],.link[hidden]{display:none}