/* ============================================================
   BORG SITES, Customer dashboard styles
   Light system. tokens.css is the single source of truth for
   colour, type, spacing, radius, shadow and motion; this file
   only composes those tokens into the dashboard layout. This is
   an app page: it does NOT load the public chrome, so the base
   element + button + input styles it needs live here (mirrors
   admin.css). Self-hosted fonts + same-origin assets only.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--ink);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0; }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; border-radius: 6px; }

/* Skip link. Same rule the public pages get from base.css, which this app page
   does not load, so the keyboard shortcut past the chrome looks and behaves
   here exactly as it does everywhere else. */
.skip-link {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(-130%);
  top: 10px; z-index: var(--z-toast);
  background: var(--ink-1); color: var(--text);
  padding: .7rem 1.2rem; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-sm);
  transition: transform var(--dur-2) var(--ease);
}
.skip-link:focus { transform: translateX(-50%) translateY(0); }

.hidden { display: none !important; }
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports not ((-webkit-background-clip:text) or (background-clip:text)) { .grad-text { color: var(--brand-2); } }
.muted { color: var(--text-faint); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  padding: .72rem 1.2rem; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2), background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
  white-space: nowrap; background: var(--ink-1); color: var(--text);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn--primary { background: var(--grad-brand-deep); color: var(--text-on-brand); box-shadow: var(--glow-brand); }
.btn--ghost { background: var(--ink-1); color: var(--text); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--hairline-strong); box-shadow: var(--shadow-sm); }
.btn--sm { padding: .5rem .85rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---- inputs ---- */
.input {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text);
  background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-xs);
  padding: .68rem .85rem; transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.input:focus { outline: none; border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(46,125,246,.16); }
.input::placeholder { color: var(--text-faint); }
label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); color: var(--text-dim); }

.form-status { font-size: var(--fs-sm); margin-top: .9rem; min-height: 1.2em; }
.form-status.is-error { color: #c0392b; }
.form-status.is-ok { color: #0F7a34; }

/* segmented control (login / signup) */
.seg { display: inline-flex; background: var(--ink-2); border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); padding: .5rem 1rem; border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-1), color var(--dur-1); }
.seg button[aria-selected="true"] { background: var(--ink-1); color: var(--text); box-shadow: var(--shadow-sm); }

/* ============================================================
   AUTH (logged out) + NOT-CONFIGURED
   ============================================================ */
.auth {
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center; padding: var(--gutter);
  background:
    radial-gradient(60vw 40vw at 15% -5%, rgba(46,125,246,.12), transparent 60%),
    radial-gradient(50vw 40vw at 100% 0%, rgba(224,53,158,.10), transparent 62%),
    var(--ink);
}
.auth-card {
  width: min(440px, 100%); background: var(--ink-1); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.7rem, 4vw, 2.6rem);
}
.auth-brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: .5rem; color: var(--text); }
.auth-brand:hover { text-decoration: none; }
.auth-brand .mark { width: 32px; height: 32px; border-radius: 50%; background: url("/assets/img/borg360-mark.png") center/contain no-repeat; flex: none; filter: drop-shadow(0 4px 10px rgba(123,63,228,.3)); }
.auth-heading { font-size: var(--fs-lg); margin: .8rem 0 .35rem; }
.auth-value { color: var(--text-dim); font-size: var(--fs-sm); margin: 0 0 1.4rem; }
.auth-value a { color: var(--brand-2); font-weight: 600; }

.auth-toggle { width: 100%; margin-bottom: 1.4rem; }
.auth-toggle button { flex: 1; }

.field { display: grid; gap: .4rem; margin-bottom: 1.05rem; }
.field-error { font-size: var(--fs-xs); color: #c0392b; margin: 0; min-height: 0; }
.field-error:empty { display: none; }
.field-hint { font-size: var(--fs-xs); color: var(--text-faint); margin: 0; }

.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap .input { padding-right: 4rem; }
.pw-toggle {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--text-dim); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs);
  padding: .35rem .55rem; border-radius: var(--radius-xs);
}
.pw-toggle:hover { color: var(--brand-2); }

/* Sits directly under the password field, so it is where a person looks when
   the one they typed did not work. Pulled up into the field's own bottom
   margin so it reads as part of that field, not as a third control. */
.auth-forgot { margin: -.5rem 0 1.15rem; text-align: right; }
.auth-forgot .linkbtn { font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); }
.auth-forgot .linkbtn:hover { color: var(--brand-2); }

.auth-alt { margin-top: 1.3rem; font-size: var(--fs-sm); color: var(--text-dim); text-align: center; }
.linkbtn { border: 0; background: transparent; color: var(--brand-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; }

.nc-ico { width: 44px; height: 44px; margin: 1rem auto .4rem; color: var(--brand-2); }
#notConfigured .auth-value { margin-bottom: 1.4rem; }

/* ============================================================
   APP SHELL (logged in)
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--glass-bg); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hairline-soft);
}
.topbar-in { display: flex; align-items: center; gap: 1rem; height: 64px; }
.topbar .brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; color: var(--text); }
.topbar .brand:hover { text-decoration: none; }
.topbar .brand .mark { width: 28px; height: 28px; border-radius: 50%; background: url("/assets/img/borg360-mark.png") center/contain no-repeat; flex: none; filter: drop-shadow(0 4px 10px rgba(123,63,228,.3)); }
.topbar .spacer { margin-left: auto; }
.topbar .who { font-size: var(--fs-xs); color: var(--text-faint); margin-right: .2rem; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main.app { padding: clamp(1.6rem, 3vw, 2.6rem) 0 5rem; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.app-head h1 { font-size: var(--fs-xl); }
.app-head p { color: var(--text-dim); font-size: var(--fs-sm); margin: .35rem 0 0; }

/* ---- "how did you find us" strip (one tap, shown once, above the grid) ---- */
.foundus {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
  padding: .6rem .7rem .6rem 1.05rem; margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--grad-soft), var(--ink-1);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.foundus.is-gone { opacity: 0; transform: translateY(-6px); }
.foundus__q { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.foundus__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.foundus__chip { padding: .38rem .8rem; background: var(--ink-1); }
.foundus__x {
  margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid transparent; background: transparent; color: var(--text-faint);
  cursor: pointer; display: grid; place-items: center;
}
.foundus__x:hover { background: var(--ink-1); border-color: var(--hairline); color: var(--text); }

/* ---- "confirm your email" banner (slim strip above "My sites", shown only
   while the account's address is unconfirmed). The found-us strip's recipe,
   copied on purpose: the same ground, border, radius, spacing and type, so the
   two strips read as one family. The sentence wraps anywhere, so a long
   address can never push the strip wider than a phone. ---- */
.confirm-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
  padding: .6rem .7rem .6rem 1.05rem; margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
  background: var(--grad-soft), var(--ink-1);
  border: 1px solid var(--hairline); border-radius: var(--radius);
}
.confirm-banner__text { margin: 0; flex: 1 1 18rem; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text); overflow-wrap: anywhere; }
.confirm-banner__btn { margin-left: auto; flex: none; padding: .38rem .8rem; background: var(--ink-1); }

/* ---- sites grid ---- */
.sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(1.1rem, 2vw, 1.6rem); }
.site-card { background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2); }
.site-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.site-thumb { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; }
.site-thumb__label { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.35); padding: 0 1rem; text-align: center; }
.site-card__body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.site-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.site-card__top h3 { font-size: var(--fs-md); }
.site-card__cat { font-size: var(--fs-xs); color: var(--text-faint); white-space: nowrap; }
.site-card__slug { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--brand-2); margin: .15rem 0 0; word-break: break-all; }
.site-card__edited { font-size: var(--fs-xs); color: var(--text-faint); margin: .1rem 0 .9rem; }
.site-card__actions { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: auto; }
/* "Have us customize it": a quiet text button beneath the actions, not a .btn,
   so it never competes with Edit. --text-dim on the white (--ink-1) card is
   7.6:1; the global :focus-visible gives it the same focus ring as the buttons. */
.site-card__customize { align-self: flex-start; margin-top: .5rem; padding: 0; background: none; border: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); color: var(--text-dim); text-decoration: none; cursor: pointer; }
.site-card__customize:hover { color: var(--text); text-decoration: underline; }
/* The two quiet text actions share one row under the buttons, and wrap onto
   their own lines when the delete button is armed and carrying a sentence. */
.site-card__foot { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .5rem; }
.site-card__foot .site-card__customize { margin-top: 0; }
/* "Delete", the same quiet text treatment as its neighbour so it never competes
   with Edit, and the same --text-dim on the white (--ink-1) card, 7.6:1. It
   asks before it does anything: the first press swaps this label for the
   question, which is when it earns the emphasis. */
.site-card__delete { margin-left: auto; padding: 0; background: none; border: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); color: var(--text-dim); text-align: left; cursor: pointer; }
.site-card__delete:hover { color: var(--text); text-decoration: underline; }
.site-card__delete.is-confirming { margin-left: 0; color: var(--text); text-decoration: underline; }
.site-card__delete[disabled] { color: var(--text-faint); cursor: default; text-decoration: none; }

/* ---- empty state ---- */
.sites-empty { text-align: center; padding: clamp(2.4rem, 6vw, 4rem) 1.5rem; background: var(--ink-1); border: 1px dashed var(--hairline-strong); border-radius: var(--radius-lg); }
.sites-empty img { opacity: .8; margin: 0 auto .9rem; display: block; }
.sites-empty h2 { font-size: var(--fs-lg); margin-bottom: .4rem; }
.sites-empty p { color: var(--text-dim); font-size: var(--fs-sm); max-width: 44ch; margin: 0 auto 1.4rem; }

/* ---- your plan panel (signed-in only): what this account pays for, and the
   one way out of it. Same surface as the panels around it, shown once
   GET /api/plan-cancel has answered ---- */
.plan-panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.2rem, 2.4vw, 1.7rem); background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.plan-panel__head h2 { font-size: var(--fs-lg); }
.plan-panel .form-status { margin-top: .9rem; }

/* one row per subscription, a hairline between rows (the forwarding list shape) */
.plan-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.plan-item { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .9rem; padding: .8rem 0; }
.plan-item + .plan-item { border-top: 1px solid var(--hairline); }
.plan-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.plan-price { font-size: var(--fs-sm); color: var(--text-dim); }
.plan-when { font-size: var(--fs-xs); color: var(--text-dim); flex: 1 1 auto; min-width: 0; }
/* "Cancel plan", the same quiet text treatment as the card's Delete and the
   forwarding list's Remove, so ending a plan never looks like the thing to do,
   and the same --text-dim on the white (--ink-1) panel, 7.6:1. It asks before
   it does anything: the first press swaps this label for the question, which is
   when it earns the emphasis and a line of its own. */
.plan-cancel { margin-left: auto; flex: none; padding: 0; background: none; border: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); color: var(--text-dim); text-align: left; cursor: pointer; }
.plan-cancel:hover { color: var(--text); text-decoration: underline; }
.plan-cancel.is-confirming { margin-left: 0; flex: 1 1 100%; color: var(--text); text-decoration: underline; }
.plan-cancel[disabled] { color: var(--text-faint); cursor: default; text-decoration: none; }
/* and the line for an account with nothing to cancel */
.plan-free { color: var(--text-dim); font-size: var(--fs-sm); margin: 1rem 0 0; }

/* ---- domain & portability panel (static, signed-in only) ---- */
.domain-panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.2rem, 2.4vw, 1.7rem); background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.domain-panel__head h2 { font-size: var(--fs-lg); }
.domain-panel__head p { color: var(--text-dim); font-size: var(--fs-sm); margin: .35rem 0 0; }
.lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.9rem, 1.8vw, 1.2rem); margin-top: 1.2rem; }
.lane { display: flex; flex-direction: column; gap: .5rem; padding: 1.05rem 1.15rem 1.2rem; background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius); }
.lane h3 { font-size: var(--fs-md); }
.lane p { color: var(--text-dim); font-size: var(--fs-sm); margin: 0 0 .3rem; }
.lane .btn { align-self: flex-start; margin-top: auto; }
.lane--primary { background: var(--grad-soft), var(--ink-1); border-color: rgba(46,125,246,.28); }
/* the plan's own included edit time, read from the pricing engine */
.lane__note { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); color: var(--brand-2); margin: 0 0 .3rem; }

/* ---- mail forwarding panel (signed-in only): same surface as the domain panel
   it sits under, shown once GET /api/forwarding answers ---- */
.forwarding-panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.2rem, 2.4vw, 1.7rem); background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.forwarding-panel__head h2 { font-size: var(--fs-lg); }
/* the lead carries .lane__note; give it the same head spacing the sibling panels' notes have */
.forwarding-panel__head .lane__note { margin: .35rem 0 0; }

/* routing off: the line before the "turn it on" button */
.forwarding-off__line { color: var(--text-dim); font-size: var(--fs-sm); margin: .9rem 0 1rem; }

/* the forwards, a hairline between rows (not boxed like the ticket list) */
.forwarding-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.forwarding-item { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .55rem; padding: .8rem 0; }
.forwarding-item + .forwarding-item { border-top: 1px solid var(--hairline); }
.forwarding-to { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text); word-break: break-all; }
.forwarding-sep { font-size: var(--fs-xs); color: var(--text-faint); }
.forwarding-dests { font-size: var(--fs-sm); color: var(--text-dim); word-break: break-all; flex: 1 1 auto; min-width: 0; }
/* a quiet text button, like the card's "customize" link, pushed to the row end */
.forwarding-remove { margin-left: auto; flex: none; padding: 0; background: none; border: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xs); color: var(--text-dim); cursor: pointer; }
.forwarding-remove:hover { color: var(--text); text-decoration: underline; }
.forwarding-remove[disabled] { opacity: .55; cursor: not-allowed; }
.forwarding-empty { color: var(--text-faint); font-size: var(--fs-sm); margin: 1rem 0 0; }

/* the waiting-for-confirmation line, in the note style, set off below the list */
.forwarding-pending { margin: .9rem 0 0; }

/* the add form: two fields side by side, collapsing to one column on a phone */
.forwarding-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
/* the address input and its "@host" suffix beside it (the suffix is shown,
   never part of the value): dim and never wrapping */
.forwarding-local { display: flex; align-items: center; gap: .5rem; }
.forwarding-local .input { flex: 1 1 auto; min-width: 0; }
.forwarding-suffix { flex: none; font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; }

/* ---- support panel (signed-in only): three lanes, one form, your requests ---- */
.support-panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.2rem, 2.4vw, 1.7rem); background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.support-panel__head h2 { font-size: var(--fs-lg); }
.support-panel__head p { color: var(--text-dim); font-size: var(--fs-sm); margin: .35rem 0 0; }
.support-panel .lanes { margin-bottom: clamp(1.2rem, 2.4vw, 1.7rem); }

.ticket-form { border-top: 1px solid var(--hairline); padding-top: clamp(1.1rem, 2vw, 1.4rem); }
.ticket-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2348527A' stroke-width='2.4'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .8rem center; }
.ticket-body { resize: vertical; min-height: 8.5rem; line-height: var(--lh-body); }
.ticket-form__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.ticket-form__foot .form-status { margin-top: 0; }

.ticket-done { margin-top: 1.1rem; padding: 1rem 1.15rem; background: var(--grad-soft), var(--ink-1); border: 1px solid rgba(46,125,246,.28); border-radius: var(--radius); font-size: var(--fs-sm); color: var(--text); }
.ticket-done p { margin: 0; }
.ticket-done .ref { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--brand-2); word-break: break-all; }

.ticket-mine { margin-top: clamp(1.4rem, 2.6vw, 1.9rem); border-top: 1px solid var(--hairline); padding-top: clamp(1.1rem, 2vw, 1.4rem); }
.ticket-mine h3 { font-size: var(--fs-md); }
.ticket-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ticket-list:empty { display: none; }
.ticket-list li { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; padding: .65rem .85rem; background: var(--ink-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-xs); }
.ticket-list .t-subject { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text); flex: 1 1 14rem; min-width: 0; }
.ticket-list .t-meta { font-size: var(--fs-xs); color: var(--text-faint); }
.ticket-empty { color: var(--text-faint); font-size: var(--fs-sm); margin: .9rem 0 0; }
.ticket-chip { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); padding: .22rem .62rem; border-radius: var(--radius-pill); white-space: nowrap; }
/* Open reads like "we have it", in progress like "being worked on", waiting
   like "paused", closed like "done". Same accents the admin console uses. */
.ticket-chip.open { background: rgba(46,125,246,.12); color: #1f5fd0; }
.ticket-chip.in_progress { background: rgba(232,150,58,.14); color: #b7701a; }
.ticket-chip.waiting { background: rgba(11,16,49,.07); color: #6b7291; }
.ticket-chip.closed { background: #E6F7EC; color: #0F7a34; }

/* ---- account panel (signed-in only): change your password ---- */
.account-panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.2rem, 2.4vw, 1.7rem); background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.account-panel__head h2 { font-size: var(--fs-lg); }
.account-panel__head p { color: var(--text-dim); font-size: var(--fs-sm); margin: .35rem 0 0; }
/* A password field is short and is read one line at a time: full width across
   a desktop container would be a worse target, not a better one. */
.account-form { max-width: 26rem; margin-top: clamp(1.1rem, 2vw, 1.4rem); border-top: 1px solid var(--hairline); padding-top: clamp(1.1rem, 2vw, 1.4rem); }
.account-form h3 { font-size: var(--fs-md); margin-bottom: 1rem; }
.account-form .form-status { margin-top: .9rem; }

/* ---- version history panel (signed-in only): opens for one site ---- */
.version-panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding: clamp(1.2rem, 2.4vw, 1.7rem); background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.version-panel__head { display: flex; align-items: flex-start; gap: 1rem; }
.version-panel__head > div { min-width: 0; }
.version-panel__head h2 { font-size: var(--fs-lg); }
.version-panel__head .btn { margin-left: auto; flex: none; }
.version-panel__site { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text); margin: .4rem 0 0; word-break: break-word; }
.version-panel__window { color: var(--text-dim); font-size: var(--fs-sm); margin: .25rem 0 0; }
.version-panel .form-status { margin-top: .9rem; }

.version-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.version-list:empty { display: none; }
.version-item { display: flex; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .7rem .9rem; background: var(--ink-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-xs); }
.version-item.is-current { border-color: rgba(46,125,246,.3); background: var(--grad-soft), var(--ink-1); }
.version-item__main { display: flex; align-items: baseline; gap: .3rem .8rem; flex-wrap: wrap; flex: 1 1 15rem; min-width: 0; }
.version-item__side { margin-left: auto; flex: none; }
.version-when { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.version-source { font-size: var(--fs-xs); color: var(--text-dim); }
.version-change { font-size: var(--fs-xs); color: var(--text-faint); }
.version-current { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs); color: #1f5fd0; background: rgba(46,125,246,.12); padding: .24rem .64rem; border-radius: var(--radius-pill); white-space: nowrap; }
.version-empty { color: var(--text-faint); font-size: var(--fs-sm); margin: 1rem 0 0; }

/* ============================================================
   CREATE-SITE PICKER (modal)
   ============================================================ */
.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(11,16,49,.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; z-index: var(--z-modal); left: 50%; top: 50%; transform: translate(-50%, -46%);
  width: min(760px, calc(100% - 2rem)); max-height: min(86vh, 820px);
  background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-3) var(--ease-out);
}
.modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.modal-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--hairline); }
.modal-head h2 { font-size: var(--fs-lg); }
.modal-head p { color: var(--text-dim); font-size: var(--fs-sm); margin: .3rem 0 0; }
.modal-close { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--ink-1); color: var(--text-dim); cursor: pointer; display: grid; place-items: center; }
.modal-close:hover { background: var(--ink-2); color: var(--text); }
.modal-body { padding: 1.2rem 1.35rem; overflow-y: auto; flex: 1; }
.modal-foot { padding: 1rem 1.35rem; border-top: 1px solid var(--hairline); display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--ink-1); }
.modal-foot .spacer { margin-left: auto; }
.modal-foot .form-status { margin-top: 0; }

.tpl-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .9rem; }
.tpl-opt {
  text-align: left; display: flex; flex-direction: column; gap: 0; padding: 0; cursor: pointer;
  background: var(--ink-1); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden;
  position: relative; transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-2) var(--ease);
}
.tpl-opt:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--hairline-strong); }
.tpl-opt.is-selected { border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(46,125,246,.16); }
.tpl-opt__thumb { display: block; aspect-ratio: 16 / 10; width: 100%; }
.tpl-opt__meta { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .85rem .8rem; }
.tpl-opt__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); color: var(--text); }
.tpl-opt__cat { font-size: var(--fs-xs); color: var(--text-faint); }
.tpl-opt__check { position: absolute; top: .55rem; right: .55rem; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-brand); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); box-shadow: var(--shadow-sm); }
.tpl-opt__check::after { content: ""; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.tpl-opt.is-selected .tpl-opt__check { opacity: 1; transform: scale(1); }

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: var(--z-toast); background: var(--dark); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); padding: .7rem 1.15rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); max-width: calc(100% - 2rem); text-align: center; overflow-wrap: anywhere; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: #8f2c1f; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .lanes { grid-template-columns: 1fr; }
}

/* the add-forward fields stack rather than squeezing to half a phone each */
@media (max-width: 640px) {
  .forwarding-row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .app-head { align-items: flex-start; }
  .app-head .btn--primary { width: 100%; }
  .site-card__actions { grid-template-columns: 1fr 1fr; }
  /* the two pickers stack rather than squeezing to half a phone each */
  .ticket-form__row { grid-template-columns: 1fr; }
  .ticket-form__foot .btn { width: 100%; }
  .account-form .btn { width: 100%; }
  /* the question keeps its own line, the X stays on it, chips wrap under */
  .foundus { padding-left: .85rem; }
  .confirm-banner { padding-left: .85rem; }
  .foundus__q { order: 1; flex: 1 1 auto; }
  .foundus__x { order: 2; }
  .foundus__chips { order: 3; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .site-card, .modal, .modal-backdrop, .toast, .tpl-opt, .tpl-opt__check, .foundus { transition: none !important; }
  .btn:hover, .site-card:hover, .tpl-opt:hover { transform: none; }
}