/*
   Sign-up, sign-in and error pages (resources/views/components/auth-layout.blade.php, errors/*).

   A plain stylesheet on purpose: the 500 page has to look right even when the app is down, so it cannot
   wait for the Vite build, the session or the database. It loads nothing from other sites. The fonts come
   from /fonts/fonts.css (Archivo and JetBrains Mono, served from our own server).

   Every colour is a CSS variable on :root. By day it is the portal's parchment and ink with stamp red; at
   night (system setting) it is the "night sign", a dark panel where the neon glows. A per-customer
   light / night / system setting comes later: it only has to put data-theme="light" or "dark" on <html>,
   and the rules below already honour it.
*/
:root {
    --bg: #ddd7c7; --paper: #ede8da; --card: #ffffff; --ink: #1e1b16; --muted: #5f5748; --line: #b9b09a; --soft: #f6f3ea;
    --stamp: #b23a1e; --stamp-hover: #9a2f16; --on-stamp: #ffffff; --ochre: #c08a17; --ok: #2c6e49; --ok-bg: #e3ebe0;
    --warn-bg: #f7ecd2; --bad: #b3261e; --bad-bg: #fbeceb;
    --green: #2eaa3a; --red: #e02020; --blue: #3a67ad;
    --focus: #8a5f00;
    --link: #b23a1e; --link-hover: #8c2c14; --field-line: #857d6a;
    /* brand panel (left side): parchment by day, night sign in dark mode */
    --brand-bg: #ede8da; --brand-fg: #1e1b16; --brand-muted: #5f5748; --brand-accent: #b23a1e; --brand-rule: #b9b09a;
    --brand-num-bg: #1e1b16; --brand-num-fg: #ede8da; --shot-line: #1e1b16;
    --glow-g: .18; --glow-r: .14; --glow-b: .2;
    --logo-fx: drop-shadow(0 6px 14px rgba(58, 103, 173, .28));
    --night: #16130f; --night-ink: #f3efe3; --night-muted: #b5ab95;
    --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14110d; --paper: #1c1812; --card: #241f17; --ink: #efe9da; --muted: #b0a690; --line: #4a4233; --soft: #2a241b;
        --stamp: #e0583a; --stamp-hover: #ee6d50; --on-stamp: #1a0e09; --ochre: #d9a53a; --ok: #7cae86; --ok-bg: #1c261d;
        --warn-bg: #2e2510; --bad: #f09088; --bad-bg: #3a1f1d; --focus: #f0c45a;
        --link: #f27c5f; --link-hover: #f8a58f; --field-line: #857b67;
        --brand-bg: #16130f; --brand-fg: #f3efe3; --brand-muted: #b5ab95; --brand-accent: #ff8a6b; --brand-rule: #4a4233;
        --brand-num-bg: #f3efe3; --brand-num-fg: #16130f; --shot-line: #5a5141;
        --glow-g: .38; --glow-r: .34; --glow-b: .42;
        --logo-fx: drop-shadow(0 0 22px rgba(255, 255, 255, .18)) drop-shadow(0 0 40px rgba(58, 103, 173, .45));
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg: #14110d; --paper: #1c1812; --card: #241f17; --ink: #efe9da; --muted: #b0a690; --line: #4a4233; --soft: #2a241b;
    --stamp: #e0583a; --stamp-hover: #ee6d50; --on-stamp: #1a0e09; --ochre: #d9a53a; --ok: #7cae86; --ok-bg: #1c261d;
    --warn-bg: #2e2510; --bad: #f09088; --bad-bg: #3a1f1d; --focus: #f0c45a;
    --link: #f27c5f; --link-hover: #f8a58f; --field-line: #857b67;
    --brand-bg: #16130f; --brand-fg: #f3efe3; --brand-muted: #b5ab95; --brand-accent: #ff8a6b; --brand-rule: #4a4233;
    --brand-num-bg: #f3efe3; --brand-num-fg: #16130f; --shot-line: #5a5141;
    --glow-g: .38; --glow-r: .34; --glow-b: .42;
    --logo-fx: drop-shadow(0 0 22px rgba(255, 255, 255, .18)) drop-shadow(0 0 40px rgba(58, 103, 173, .45));
    color-scheme: dark;
}

.ax, .ax *, .ax *::before, .ax *::after { box-sizing: border-box; }
body.ax { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--display); line-height: 1.5; font-size: 16px; -webkit-text-size-adjust: 100%; }
.ax button, .ax input, .ax select { font: inherit; color: inherit; }
.ax a { color: var(--link); text-underline-offset: 2px; }
.ax a:hover { color: var(--link-hover); }
.ax :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ax-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ax-skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--ink); color: var(--card); padding: 10px 14px; text-decoration: none; font-weight: 700; }
.ax-skip:focus { top: 8px; color: var(--card); }
.ax [hidden] { display: none !important; }

/* ---------- two-column page (customers) ---------- */
.ax-auth { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 100vh; }

.ax-brand { position: relative; padding: 44px 48px 34px; display: flex; flex-direction: column; gap: 20px; background: var(--brand-bg); color: var(--brand-fg); isolation: isolate; }
.ax-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(520px 260px at 16% 8%, rgba(46, 170, 58, var(--glow-g)), transparent 70%),
    radial-gradient(520px 260px at 60% 2%, rgba(224, 32, 32, var(--glow-r)), transparent 70%),
    radial-gradient(520px 260px at 98% 10%, rgba(58, 103, 173, var(--glow-b)), transparent 70%); }
.ax-logo { display: block; width: 100%; max-width: 520px; height: auto; filter: var(--logo-fx); }
.ax-logo-link { display: block; max-width: 520px; border-radius: 2px; }
.ax-headline { font-size: clamp(28px, 3.5vw, 41px); line-height: 1.1; font-weight: 800; letter-spacing: -.015em; margin: 2px 0 0; text-wrap: balance; max-width: 20ch; }
.ax-headline em { font-style: normal; color: var(--brand-accent); }
.ax-lede { font-size: 17px; color: var(--brand-muted); margin: 0; max-width: 46ch; }
.ax-benefits { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.ax-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 600; }
.ax-benefits .ax-n { font: 600 12px var(--mono); background: var(--brand-num-bg); color: var(--brand-num-fg); padding: 3px 6px; flex: none; margin-top: 2px; }
.ax-benefits small { display: block; font-weight: 400; color: var(--brand-muted); font-size: 13.5px; }

.ax-show-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ax-show-tabs button { border: 1px solid var(--brand-rule); background: transparent; color: var(--brand-fg); padding: 0 12px; min-height: 44px; font: 600 14px var(--display); cursor: pointer; }
.ax-show-tabs button[aria-selected="true"] { background: var(--brand-fg); color: var(--brand-bg); border-color: var(--brand-fg); }
.ax-shot { border: 2px solid var(--shot-line); background: #fff; box-shadow: 5px 5px 0 rgba(0, 0, 0, .25); max-width: 560px; margin: 0; }
.ax-shot-bar { display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: #1e1b16; }
.ax-shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: #8a7f6d; display: block; }
.ax-shot-bar span { margin-left: 8px; font: 400 11px var(--mono); color: #d8d0bd; }
.ax-shot img { display: block; width: 100%; height: auto; max-height: 310px; object-fit: cover; object-position: top; }
.ax-shot-cap { font-size: 14px; color: var(--brand-muted); margin: 10px 0 0; max-width: 56ch; }
.ax-shot-cap b { color: var(--brand-fg); }
.ax-trust { margin: auto 0 0; padding: 10px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 600 11.5px var(--mono); letter-spacing: .04em; color: var(--brand-muted); border-top: 1px solid var(--brand-rule); }
.ax-trust li::before { content: "\2713\00a0"; color: var(--ok); }
.ax-trust a { color: inherit; }

/* ---------- form side ---------- */
.ax-formside { padding: 34px 40px 30px; display: flex; flex-direction: column; justify-content: center; background: var(--bg); min-width: 0; }
.ax-card { background: var(--card); color: var(--ink); border: 2px solid var(--ink); max-width: 520px; width: 100%; margin: 0 auto; position: relative; padding: 26px 28px 22px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .16); }
.ax-card::before { content: ""; position: absolute; left: -2px; right: -2px; top: -8px; height: 6px; background: linear-gradient(90deg, var(--green) 0 33.3%, var(--red) 33.3% 66.6%, var(--blue) 66.6%); }
.ax-card h1 { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; }
.ax-card h2 { font-size: 20px; margin: 0 0 4px; }
.ax-sub { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
.ax-kick { font: 600 11.5px var(--mono); letter-spacing: .06em; color: var(--muted); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.ax-kick::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ax-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ax-f { margin-bottom: 12px; position: relative; min-width: 0; }
.ax-f label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.ax-f label small { font-weight: 400; color: var(--muted); }
.ax .ax-in { display: block; width: 100%; border: 1.5px solid var(--field-line); background: var(--soft); color: var(--ink); padding: 10px 12px; border-radius: 2px; min-height: 44px; font-size: 16px; }
.ax select.ax-in { appearance: auto; }
.ax .ax-in:focus { border-color: var(--ink); background: var(--card); outline: 3px solid var(--focus); outline-offset: 0; box-shadow: none; }
.ax .ax-in.ax-ok { border-color: var(--ok); }
.ax .ax-in[aria-invalid="true"] { border-color: var(--bad); border-width: 2px; }
.ax .ax-in[readonly] { opacity: .85; cursor: default; }
.ax-hint { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; }
.ax-hint.ax-good { color: var(--ok); font-weight: 600; }
.ax-err { font-size: 14px; color: var(--bad); font-weight: 600; margin: 4px 0 0; }
.ax-err::before { content: "\26A0\00a0"; }
.ax-pw { position: relative; }
.ax .ax-pw .ax-in { padding-right: 76px; }
.ax-pw button { position: absolute; right: 2px; top: 0; bottom: 0; min-width: 64px; min-height: 44px; background: transparent; border: 0; padding: 0 10px; font: 600 13px var(--mono); cursor: pointer; color: var(--muted); }
.ax-pw button:hover { color: var(--ink); }
.ax-meter { display: flex; gap: 4px; margin-top: 8px; }
.ax-meter i { flex: 1; height: 4px; background: var(--line); display: block; }
.ax-meter[data-level="1"] i:nth-child(-n+1) { background: var(--bad); }
.ax-meter[data-level="2"] i:nth-child(-n+2) { background: var(--ochre); }
.ax-meter[data-level="3"] i:nth-child(-n+3), .ax-meter[data-level="4"] i { background: var(--ok); }
.ax-chk { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; margin: 0; min-height: 44px; padding: 8px 0; cursor: pointer; }
.ax-chk input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--stamp); cursor: pointer; }
.ax-chk span { padding-top: 1px; }
.ax-callout { background: var(--warn-bg); border-left: 4px solid var(--ochre); padding: 10px 12px; font-size: 14px; margin: 2px 0 8px 30px; color: var(--ink); }
.ax-callout.ax-flush { margin: 0 0 14px; }
.ax-callout.ax-bad { background: var(--bad-bg); border-left-color: var(--bad); }
.ax-callout.ax-good { background: var(--ok-bg); border-left-color: var(--ok); }
.ax-callout p { margin: 0; }
.ax-callout p + p { margin-top: 4px; }
.ax .ax-btn { display: block; width: 100%; text-align: center; text-decoration: none; border: 2px solid var(--stamp); background: var(--stamp); color: var(--on-stamp); font: 700 16px/1.25 var(--display); padding: 12px 18px; cursor: pointer; min-height: 48px; }
.ax a.ax-btn { color: var(--on-stamp); }
.ax .ax-btn:hover, .ax a.ax-btn:hover { background: var(--stamp-hover); border-color: var(--stamp-hover); color: var(--on-stamp); }
.ax .ax-btn.ax-ghost, .ax a.ax-btn.ax-ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.ax .ax-btn.ax-ghost:hover, .ax a.ax-btn.ax-ghost:hover { background: var(--soft); color: var(--ink); border-color: var(--ink); }
.ax .ax-btn.ax-inline { display: inline-block; width: auto; }
.ax .ax-btn:disabled, .ax .ax-btn.ax-disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
.ax-alt { text-align: center; font-size: 15px; margin: 14px 0 0; color: var(--muted); }
.ax .ax-linkbtn { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font: inherit; min-height: 44px; }
.ax-perks { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; padding: 0; list-style: none; }
.ax-perks li { font: 600 11.5px var(--mono); letter-spacing: .03em; padding: 4px 8px; background: var(--soft); border: 1px solid var(--line); }
.ax-mt { margin-top: 12px; }
.ax-legal { font-size: 13px; color: var(--muted); text-align: center; margin: 16px auto 0; max-width: 520px; }
.ax-legal a { color: var(--muted); display: inline-block; padding: 13px 4px; }
.ax-split { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.ax-split a { font-size: 14.5px; display: inline-block; padding: 12px 0; }

.ax-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.ax-center .ax-callout { width: 100%; text-align: left; }
.ax-mailicon { width: 84px; height: 84px; color: var(--ink); }
.ax-steps { text-align: left; margin: 10px 0 4px; padding: 0; list-style: none; display: grid; gap: 10px; width: 100%; }
.ax-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.ax-steps .ax-n { font: 700 12px var(--mono); background: var(--ink); color: var(--card); width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
.ax-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--card); font: 600 11.5px var(--mono); letter-spacing: .06em; padding: 5px 10px; margin-bottom: 10px; }
.ax-badge::before { content: ""; width: 8px; height: 8px; background: var(--ochre); display: block; }
.ax-badge.ax-okbadge { background: var(--ok); color: #fff; }
.ax-badge.ax-okbadge::before { content: "\2713"; background: none; width: auto; height: auto; }
.ax-code { width: 100%; text-align: center; font: 700 28px var(--mono); letter-spacing: .4em; padding-left: .4em; min-height: 58px; }
.ax-qrbox { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; margin: 10px 0; }
.ax-qr { width: 164px; height: 164px; border: 2px solid var(--ink); padding: 6px; background: #fff; }
.ax-qr svg { display: block; width: 100%; height: 100%; }
.ax-key { font: 600 14px var(--mono); background: var(--soft); border: 1px dashed var(--line); padding: 8px 10px; word-break: break-all; user-select: all; }
.ax-codes { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 12px 0; font: 600 15px var(--mono); }
.ax-codes li { background: var(--soft); border: 1px solid var(--line); padding: 8px 10px; text-align: center; user-select: all; }
details.ax-more { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
details.ax-more summary { cursor: pointer; color: var(--link); min-height: 44px; display: flex; align-items: center; font-size: 15px; text-decoration: underline; }

/* ---------- night sign: staff pages and error pages ---------- */
.ax-night { background: var(--night); min-height: 100vh; display: grid; place-items: center; padding: 40px 16px; position: relative; isolation: isolate; color: var(--night-ink); }
.ax-night::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(520px 240px at 18% 0%, rgba(46, 170, 58, .3), transparent 70%),
    radial-gradient(520px 240px at 60% 0%, rgba(224, 32, 32, .24), transparent 70%),
    radial-gradient(520px 240px at 100% 0%, rgba(58, 103, 173, .32), transparent 70%); }
.ax-night .ax-logo { max-width: 300px; margin: 0 auto 18px; filter: drop-shadow(0 0 22px rgba(255, 255, 255, .16)) drop-shadow(0 0 34px rgba(58, 103, 173, .4)); }
.ax-night .ax-logo-link { max-width: 300px; margin: 0 auto; }
.ax-narrow { width: 100%; max-width: 480px; }
.ax-narrow.ax-wide { max-width: 560px; }
.ax-narrow.ax-wider { max-width: 640px; }
.ax-night .ax-legal, .ax-night .ax-legal a { color: var(--night-muted); }
.ax-night .ax-card { margin-top: 12px; }

/* ---------- error pages ---------- */
.ax-errbox { text-align: center; padding: 28px 0 6px; }
.ax-errbox .ax-big { font: 800 clamp(64px, 12vw, 120px)/1 var(--display); letter-spacing: -.04em; background: linear-gradient(90deg, var(--green), var(--red) 55%, var(--blue)); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0; }
.ax-errbox h1 { font-size: 26px; margin: 8px 0 6px; }
.ax-errbox p { color: var(--muted); margin: 0 auto 18px; max-width: 44ch; }
.ax-errbox p.ax-hint { margin: 16px auto 0; }
.ax-errbox .ax-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 18px 0 0; }
.ax-errbox form { max-width: 360px; margin: 0 auto 6px; text-align: left; }

@media (max-width: 900px) {
    .ax-auth { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .ax-brand { padding: 26px 20px 22px; }
    .ax-benefits { grid-template-columns: 1fr; }
    .ax-formside { padding: 26px 14px 24px; }
    .ax-card { padding: 22px 18px 18px; }
    .ax-qrbox { grid-template-columns: 1fr; justify-items: start; }
    .ax-logo, .ax-logo-link { max-width: 340px; }
}
@media (max-width: 520px) {
    .ax-row { grid-template-columns: 1fr; gap: 0; }
    .ax-callout { margin-left: 0; }
    .ax-codes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
    .ax-btn, .ax .ax-in { transition: background .15s, border-color .15s; }
}
@media (prefers-reduced-motion: reduce) {
    .ax *, .ax *::before, .ax *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .ax-card::before { forced-color-adjust: none; }
    .ax-btn { border: 2px solid ButtonText; }
}

/* small helpers so the views carry no inline styles */
.ax-card-after { max-width: 520px; margin: 0 auto; }
.ax .ax-card-after .ax-linkbtn { color: var(--ink); }
.ax-full { width: 100%; }
.ax-left { text-align: left; }
.ax-tight { margin: 0; }
.ax-top { margin-top: 4px; }
.ax-center-text { text-align: center; margin-top: 10px; }
.ax-night .ax-night-alt { color: var(--night-muted); }
.ax-night .ax-night-alt .ax-linkbtn { color: var(--night-ink); }
/* the phone flag picker (resources/js/phone-input.js) wraps the input in .iti; let it fill the column */
.ax .ebb-phone .iti { display: block; width: 100%; }

/* ---------- two-step verification pages (customer set-up, status, turn-off, recovery codes) ---------- */
.ax-stepper { list-style: none; margin: 8px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 600 11.5px var(--mono); letter-spacing: .03em; }
.ax-stepper li { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border: 1px solid var(--line); background: var(--soft); color: var(--muted); }
.ax-stepper .ax-n { font: 700 11.5px var(--mono); background: var(--muted); color: var(--card); width: 22px; height: 22px; display: grid; place-items: center; flex: none; }
.ax-stepper li[aria-current="step"] { background: var(--ink); border-color: var(--ink); color: var(--card); }
.ax-stepper li[aria-current="step"] .ax-n { background: var(--stamp); color: var(--on-stamp); }
.ax-stepper li.ax-done { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.ax-stepper li.ax-done .ax-n { background: var(--ok); color: #fff; }
.ax-apps { display: grid; gap: 12px; margin: 10px 0 8px; }
.ax-app { border: 1.5px solid var(--line); background: var(--soft); padding: 12px 14px 14px; }
.ax-app h3 { font-size: 16px; line-height: 1.25; margin: 0; }
.ax-app .ax-hint { margin: 0 0 10px; }
.ax-app-qrs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; font-size: 13.5px; }
.ax-app-qr { width: 112px; height: 112px; margin: 0 auto 6px; border: 2px solid var(--ink); padding: 4px; background: #fff; }
.ax-app-qr svg { display: block; width: 100%; height: 100%; }
.ax-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ax-actions .ax-btn { flex: 1 1 170px; width: auto; }
.ax .ax-btn.ax-danger, .ax a.ax-btn.ax-danger { color: var(--bad); border-color: var(--bad); }
.ax .ax-btn.ax-danger:hover { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }
.ax-codes { font-size: 13.5px; }
.ax-qrbox { grid-template-columns: 164px 1fr; }
@media (max-width: 900px) { .ax-qrbox { grid-template-columns: 1fr; } }
.ax-list { margin: 0 0 14px; padding-left: 1.25rem; font-size: 14px; }
.ax-list li { margin: 4px 0; }