/* ═══════════════════════════════════════════════════════════════════════
   Turagh Technologies — account.css
   Auth shell (register / login / OTP / password reset), the lead-intake
   form, and the customer profile. Links after brand.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════ Auth shell ═══════════════ */
.auth{
  position:relative; min-height:100svh; display:grid;
  grid-template-columns:1.05fr .95fr; isolation:isolate;
}
@media (max-width:1000px){ .auth{ grid-template-columns:1fr; min-height:auto; } }

/* left: the form column */
.auth-main{
  display:flex; align-items:center; justify-content:center;
  padding:140px 40px 80px;
}
@media (max-width:640px){ .auth-main{ padding:120px 22px 64px; } }
.auth-card{ width:100%; max-width:440px; display:grid; gap:30px; }
.auth-head{ display:grid; gap:14px; }
.auth-head h1{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.9rem, 4vw, 2.6rem); letter-spacing:-.02em; line-height:1.08;
}
.auth-head h1 b{ font-weight:600; color:var(--accent-2); }
.auth-head p{ color:var(--text-dim); font-size:.98rem; }
.auth-form{ display:grid; gap:var(--field-gap); }
.auth-form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--field-gap); }
@media (max-width:520px){ .auth-form .grid-2{ grid-template-columns:1fr; gap:var(--field-gap); } }
.auth-alt{
  padding-top:26px; margin-top:6px; border-top:1px solid var(--hair);
  font-size:.9rem; color:var(--text-dim); text-align:center;
}
.auth-alt a{ color:var(--accent-2); text-decoration:none; }
.auth-alt a:hover{ text-decoration:underline; }
.auth-between{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:14px; flex-wrap:wrap; }

/* right: the atmospheric proof column */
.auth-aside{
  position:relative; overflow:hidden;
  border-left:1px solid var(--hair);
  display:flex; align-items:center;
  padding:140px 56px 80px;
}
.auth-aside::before{
  content:""; position:absolute; inset:-20%; z-index:-2;
  background:
    radial-gradient(42% 46% at 70% 22%, var(--glow-a), transparent 62%),
    radial-gradient(48% 54% at 24% 76%, var(--glow-b), transparent 64%);
}
.auth-aside canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.7; }
.auth-aside .inner{ display:grid; gap:30px; max-width:440px; }
.auth-aside blockquote{
  margin:0; font-family:var(--font-display); font-weight:200;
  font-size:1.75rem; line-height:1.32; letter-spacing:-.015em;
}
.auth-aside .attrib{
  font-family:var(--font-display); font-weight:500; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
  display:flex; align-items:center; gap:12px;
}
.auth-aside .attrib::before{ content:""; width:22px; height:1px; background:var(--accent); flex:none; }
.aside-points{ display:grid; gap:16px; padding-top:28px; border-top:1px solid var(--hair); }
.aside-points div{ display:grid; grid-template-columns:20px 1fr; gap:14px; align-items:start; font-size:.92rem; color:var(--text-dim); }
.aside-points svg{ width:17px; height:17px; color:var(--accent-2); margin-top:3px; }
@media (max-width:1000px){ .auth-aside{ display:none; } }

/* password strength */
.pw-meter{ display:grid; gap:8px; margin-top:12px; }
.pw-bars{ display:flex; gap:5px; }
.pw-bars i{ height:3px; flex:1; background:var(--border); border-radius:2px; transition:background .35s var(--ease); }
.pw-meter.s1 .pw-bars i:nth-child(1){ background:var(--accent); }
.pw-meter.s2 .pw-bars i:nth-child(-n+2){ background:var(--accent); }
.pw-meter.s3 .pw-bars i:nth-child(-n+3){ background:var(--accent-2); }
.pw-meter.s4 .pw-bars i{ background:var(--accent-2); }
.pw-meter span{ font-family:var(--font-display); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); }

/* OTP entry */
.otp{ display:flex; gap:10px; justify-content:space-between; margin:6px 0 4px; }
.otp input{
  width:100%; aspect-ratio:1/1.15; text-align:center;
  font-family:var(--font-display); font-weight:500;
  font-size:1.55rem; color:var(--text);
  background:var(--veil); border:1px solid var(--border); border-radius:3px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  font-variant-numeric:tabular-nums;
}
.otp input:focus{ outline:none; border-color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 7%, transparent); }
.otp input.filled{ border-color:var(--accent-2); }
.resend{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:.88rem; color:var(--text-dim); margin-top:6px; flex-wrap:wrap;
}
.resend button{ color:var(--accent-2); font-size:.88rem; }
.resend button:disabled{ color:var(--text-dim); cursor:not-allowed; }
.sent-to{
  font-family:var(--font-display); font-size:.74rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-dim);
  border:1px solid var(--border); border-radius:100px; padding:6px 14px;
  display:inline-flex; align-items:center; gap:9px; align-self:start;
}
.sent-to::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-2); }

/* ═══════════════ Lead intake (brief) ═══════════════ */
.intake{ display:grid; grid-template-columns:300px 1fr; gap:56px; align-items:start; }
@media (max-width:980px){ .intake{ grid-template-columns:1fr; gap:36px; } }

/* left rail: progress + reassurance */
.intake-rail{ position:sticky; top:110px; display:grid; gap:28px; }
@media (max-width:980px){ .intake-rail{ position:static; } }
.steps{ display:grid; gap:0; }
.steps .s{
  position:relative; display:grid; grid-template-columns:26px 1fr; gap:16px;
  padding:0 0 26px; align-items:start;
}
.steps .s:last-child{ padding-bottom:0; }
.steps .s::before{
  content:""; position:absolute; left:12px; top:24px; bottom:2px; width:1px; background:var(--border);
}
.steps .s:last-child::before{ display:none; }
.steps .s .b{
  width:25px; height:25px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:.7rem; color:var(--text-dim);
  font-variant-numeric:tabular-nums; z-index:1;
  transition:border-color .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.steps .s.active .b{ border-color:var(--accent-2); background:var(--accent-2); color:var(--accent-contrast); }
.steps .s.done .b{ border-color:var(--accent-2); color:var(--accent-2); }
.steps .s h4{ font-family:var(--font-display); font-weight:500; font-size:.94rem; margin-bottom:3px; }
.steps .s p{ font-size:.83rem; color:var(--text-dim); }

/* right: the form itself */
.intake-form{ display:grid; gap:0; }
/* border:0 first, then the one edge we want. A <fieldset> ships with a 2px
   groove border from the browser, so setting only border-bottom leaves the
   other three sides drawn in a style nothing else on the page uses. */
.fset{ padding:0 0 40px; margin-bottom:40px; border:0; border-bottom:1px solid var(--hair); }
.fset:last-of-type{ border-bottom:none; margin-bottom:0; }
.fset > legend, .fset > .lg{
  font-family:var(--font-display); font-weight:500; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2);
  margin-bottom:6px; padding:0; display:flex; align-items:center; gap:12px;
}
.fset > .lg em{ font-style:normal; color:var(--text-dim); }
.fset .fs-note{ font-size:.88rem; color:var(--text-dim); margin-bottom:22px; max-width:56ch; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--field-gap); }
.fgrid.one{ grid-template-columns:1fr; }
@media (max-width:640px){ .fgrid{ grid-template-columns:1fr; gap:var(--field-gap); } }

/* grouped service checkboxes — 002's catalog shape */
.svc-groups{ display:grid; gap:26px; }
.svc-group > h4{
  font-family:var(--font-display); font-weight:500; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--hair);
  display:flex; align-items:center; justify-content:space-between;
}
.svc-group > h4 em{ font-style:normal; color:var(--accent); font-size:.68rem; }
.svc-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:640px){ .svc-list{ grid-template-columns:1fr; } }
.svc{
  display:grid; grid-template-columns:18px 1fr; gap:12px; align-items:center;
  padding:11px 14px; border:1px solid var(--border); border-radius:2px;
  font-size:.92rem; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.svc:hover{ border-color:var(--accent-2); }
.svc input{
  appearance:none; -webkit-appearance:none; width:16px; height:16px; margin:0;
  border:1px solid var(--border); border-radius:2px; position:relative; cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.svc input:checked{ background:var(--accent-2); border-color:var(--accent-2); }
.svc input:checked::after{
  content:""; position:absolute; left:4.5px; top:1px; width:4px; height:9px;
  border:solid var(--accent-contrast); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.svc:has(input:checked){ border-color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 7%, transparent); }

/* file drop */
.drop{
  border:1px dashed var(--border); border-radius:3px;
  padding:28px 22px; text-align:center; display:grid; gap:10px; justify-items:center;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  cursor:pointer;
}
.drop:hover, .drop.over{ border-color:var(--accent-2); background:color-mix(in srgb, var(--accent-2) 5%, transparent); }
.drop svg{ width:26px; height:26px; color:var(--accent-2); }
.drop b{ font-family:var(--font-display); font-weight:500; font-size:.94rem; }
.drop span{ font-size:.82rem; color:var(--text-dim); }
.drop input[type="file"]{ display:none; }
.drop-file{
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border:1px solid var(--accent-2); border-radius:2px; margin-top:12px;
  background:color-mix(in srgb, var(--accent-2) 7%, transparent); font-size:.9rem;
}
.drop-file.show{ display:flex; }
.drop-file button{ color:var(--text-dim); font-size:.8rem; }
.drop-file button:hover{ color:var(--accent); }

.submit-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:34px; margin-top:8px; border-top:1px solid var(--hair); flex-wrap:wrap;
}
.submit-row p{ font-size:.85rem; color:var(--text-dim); max-width:40ch; }
/* The button holds the right edge on its own, rather than relying on
   space-between having something to push against. It usually does — a note, or
   the bot-check widget — but the widget is invisible on nearly every visit, and
   a row left with one item would justify it to the LEFT. Belt and braces, and
   the same result in both cases. */
.submit-row > .btn{ margin-left:auto; }

/* No rule and no caption: used where the fields above already close the
   section and the row holds nothing but the button. The brief form keeps the
   standard .submit-row, where the note beside the button earns its place. */
.submit-row.bare{
  border-top:none; padding-top:0;
  /* Without the rule there is nothing between the last field and the button,
     so the separation has to come from space instead. */
  margin-top:26px; justify-content:flex-end;
}

/* ═══════════════ Profile / account ═══════════════ */
.acct{ display:grid; grid-template-columns:260px 1fr; gap:52px; align-items:start; }
@media (max-width:920px){ .acct{ grid-template-columns:1fr; gap:32px; } }

.acct-nav{ position:sticky; top:110px; display:grid; gap:4px; }
@media (max-width:920px){
  .acct-nav{ position:static; grid-auto-flow:column; grid-auto-columns:max-content; overflow-x:auto; gap:4px; padding-bottom:8px; }
}
.acct-nav a{
  display:flex; align-items:center; gap:13px;
  padding:12px 15px; border-radius:2px; text-decoration:none;
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim); white-space:nowrap;
  border-left:2px solid transparent;
  transition:color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.acct-nav a svg{ width:16px; height:16px; flex:none; }
.acct-nav a:hover{ color:var(--text); background:var(--veil); }
.acct-nav a.current{ color:var(--accent-2); border-left-color:var(--accent-2); background:var(--veil); }
.acct-nav .sep{ height:1px; background:var(--hair); margin:14px 0; }

/* Sign-out is a POST, so it is a button — styled to sit in the rail alongside
   the anchors rather than looking like a stray control. */
.acct-nav-btn{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:12px 15px; border-radius:2px; text-align:left;
  font-family:var(--font-display); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim); white-space:nowrap;
  border-left:2px solid transparent; cursor:pointer;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.acct-nav-btn svg{ width:16px; height:16px; flex:none; }
.acct-nav-btn:hover{ color:var(--accent); background:var(--veil); }

.acct-body{ display:grid; gap:22px; }
.card-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:20px; margin-bottom:26px; border-bottom:1px solid var(--hair); flex-wrap:wrap;
}
.card-head h2{ font-family:var(--font-display); font-weight:400; font-size:1.35rem; letter-spacing:-.01em; }
.card-head .meta{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); }

.ident{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.ident .av{
  width:66px; height:66px; border-radius:50%; flex:none;
  border:1px solid var(--accent-2);
  background:color-mix(in srgb, var(--accent-2) 12%, transparent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--accent-2);
}
.ident .who{ display:grid; gap:3px; }
.ident .who b{ font-family:var(--font-display); font-weight:500; font-size:1.2rem; }
.ident .who span{ font-size:.9rem; color:var(--text-dim); }
.badge{
  font-family:var(--font-display); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 11px; border-radius:100px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.badge::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.badge-ok{ color:var(--accent-2); border:1px solid color-mix(in srgb, var(--accent-2) 45%, transparent); background:color-mix(in srgb, var(--accent-2) 8%, transparent); }
.badge-warn{ color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
.badge-mute{ color:var(--text-dim); border:1px solid var(--border); }

.kv{ display:grid; gap:0; }
.kv .r{
  display:grid; grid-template-columns:190px 1fr auto; gap:20px; align-items:baseline;
  padding:15px 0; border-bottom:1px solid var(--hair);
}
.kv .r:last-child{ border-bottom:none; }
@media (max-width:640px){ .kv .r{ grid-template-columns:1fr; gap:5px; } }
.kv .k{
  font-family:var(--font-display); font-weight:500; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
}
.kv .v{ font-size:.96rem; }
.kv .edit{ font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-2); text-decoration:none; }
.kv .edit:hover{ text-decoration:underline; }

/* submission history table */
.subs{ display:grid; }
/* The track list is a variable rather than a literal because three other lists
   (the two staff inboxes and the account table) reuse these row rules with a
   different number of columns. Before it was one, a five-column row in a
   four-column grid put its last cell on an implicit second row.
   minmax(0,1fr) rather than 1fr: a grid track floors at min-content, so one
   long unbroken name would otherwise push the row wider than the panel. */
.subs{ --subs-cols:110px minmax(0,1fr) 150px 110px; }
.subs .h, .subs .r{
  display:grid; grid-template-columns:var(--subs-cols); gap:18px;
  align-items:center; padding:15px 0; border-bottom:1px solid var(--hair);
}
.subs .h > *, .subs .r > *{ min-width:0; }
.subs .h{
  font-family:var(--font-display); font-weight:500; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
}
.subs .r{ font-size:.93rem; transition:background .3s var(--ease); }
/* The panel's own edge closes the list; a rule directly above it reads as a row
   that lost its content. Same reasoning as .kv .r:last-child. */
.subs .r:last-child{ border-bottom:none; }
.subs .r:hover{ background:var(--veil); }
.subs .ref{ font-family:var(--font-display); font-weight:500; color:var(--accent-2); font-variant-numeric:tabular-nums; }
.subs .chips{ display:flex; flex-wrap:wrap; gap:6px; }
.subs .chips span{
  font-family:var(--font-display); font-size:.64rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-dim);
  border:1px solid var(--border); border-radius:100px; padding:3px 10px;
}
/* nowrap: "2026-08-22 17:46" is one fact, and a column narrow enough to break
   it in half reads as two. */
.subs .when{ color:var(--text-dim); font-size:.86rem; white-space:nowrap; }

/* A name or subject followed by however many badges the row earned. Its own
   flex context so the badges wrap under the text instead of stretching the
   row's height when several land at once. */
.subs .who{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.subs .nm{ font-family:var(--font-display); font-weight:500; }
/* The status word. Set as a label rather than prose — it is one of a closed
   set, and reading as lowercase body copy made it look like stray text. */
.subs .state{
  font-family:var(--font-display); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim);
}
/* Trailing per-row action, pinned to the right edge of its track. */
.subs .act{ justify-self:end; }
@media (max-width:820px){
  .subs .h{ display:none; }
  .subs .r{ grid-template-columns:1fr; gap:9px; padding:18px 0; }
}

.empty{
  text-align:center; padding:52px 24px; display:grid; gap:16px; justify-items:center;
  border:1px dashed var(--border); border-radius:3px;
}
.empty svg{ width:32px; height:32px; color:var(--text-dim); }
.empty h3{ font-family:var(--font-display); font-weight:400; font-size:1.15rem; }
.empty p{ color:var(--text-dim); font-size:.92rem; max-width:44ch; }

/* Small destructive-ish row action: revoking a session, disabling a colleague.
   Not scoped to .sessions — the staff table uses the same button, and while it
   was scoped that button rendered as unstyled browser chrome. */
.revoke{
  font-family:var(--font-display); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim);
  border:1px solid var(--border); border-radius:2px; padding:7px 13px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.revoke:hover{ border-color:var(--accent); color:var(--accent); }

.danger{ border-color:color-mix(in srgb, var(--accent) 35%, var(--hair)); }
.danger .card-head h2{ color:var(--accent); }


/* ── Signed-in devices ────────────────────────────────────────────────────
   Redesigned from a flat list of raw user-agent strings. Each row now opens
   with an icon for the device kind and names the browser and platform, because
   the only question this list answers is "do I recognise this session".
   ───────────────────────────────────────────────────────────────────────── */
/* A titled block inside a card — used to separate "password" from the device
   list, which are one card but two different kinds of thing. */
.sec-block{
  padding-bottom:26px; margin-bottom:26px; border-bottom:1px solid var(--hair);
}

/* Explanation and its action on one line, so the button sits beside the reason
   for it rather than under a paragraph the eye has to finish first. */
.sec-row{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.sec-row p{ font-size:.86rem; color:var(--text-dim); max-width:52ch; }

.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:14px;
}
.sec-head h3{
  font-family:var(--font-display); font-weight:500; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
}
.sec-head span{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em;
  color:var(--text-dim); font-variant-numeric:tabular-nums;
}

.sessions .r{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:14px; border:1px solid var(--hair); border-radius:2px;
  transition:border-color .25s var(--ease);
}
.sessions .r + .r{ margin-top:10px; }
/* The current session is the one row that must never be mistaken for another
   device, so it carries the accent rather than relying on the badge alone. */
.sessions .r.is-current{ border-color:color-mix(in srgb, var(--accent) 40%, var(--hair)); }

.sessions .dev-icon{
  width:38px; height:38px; display:grid; place-items:center; flex:none;
  border-radius:50%; background:var(--surface-2); color:var(--text-dim);
}
.sessions .r.is-current .dev-icon{ color:var(--accent); }
.sessions .dev-icon svg{ width:19px; height:19px; }

.sessions .d{ display:grid; gap:4px; min-width:0; }
.sessions .d b{
  font-family:var(--font-display); font-weight:500; font-size:.95rem; color:var(--text);
}
/* The platform is context, not the identifier — dimmed so the browser name
   carries the row. */
.sessions .d b em{ font-style:normal; font-weight:400; color:var(--text-dim); }
.sessions .d span{
  font-size:.8rem; color:var(--text-dim); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media (max-width:560px){
  .sessions .r{ grid-template-columns:auto 1fr; row-gap:12px; }
  .sessions .r > form, .sessions .r > span:last-child{ grid-column:2; justify-self:start; }
}

/* ── OTP dialog ───────────────────────────────────────────────────────────
   A native <dialog>, so the modal semantics, focus trap and Escape come from
   the browser rather than from JavaScript that has to be kept correct.
   ───────────────────────────────────────────────────────────────────────── */
.otp-dialog{
  max-width:440px; width:calc(100% - 40px); padding:34px;
  border:1px solid var(--hair); border-radius:3px;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
}
.otp-dialog::backdrop{ background:color-mix(in srgb, #06152d 62%, transparent); }
.otp-dialog h2{ font-family:var(--font-display); font-weight:400; font-size:1.3rem; }
.otp-dialog p{ font-size:.92rem; color:var(--text-dim); margin:12px 0 22px; }
.otp-dialog .otp{ margin-bottom:8px; }
.otp-dialog-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

/* Centred by the browser once showModal() runs. The margin:auto matters for the
   no-JS case, where the dialog renders inline in the page instead. */
.otp-dialog{ margin:auto; }

/* A class with display: beats [hidden]{display:none}, so the save row would
   render permanently without this. */
.submit-row[hidden]{ display:none; }

/* A second heading inside one card, where the card covers two subjects. Needs
   noticeably more space above it than the field rhythm (30px), or it reads as
   another field rather than the start of something new. */
.card-head.second{ margin-top:52px; }

/* The points list as the whole of a panel rather than a footnote under other
   content — so it drops the rule and the space that separated it. */
.aside-points.flush{ padding-top:0; border-top:none; gap:13px; }

.page-head.tall{ padding-bottom:56px; }
.sec-pad{ padding-top:48px; }
.sec-pad-lg{ padding-top:64px; }
.pb-90{ padding-bottom:90px; }

/* Staff sign-in: narrower than a customer auth card and pushed down the
   viewport, because it is one field on an otherwise empty page. */
.admin-auth{ max-width:520px; padding-top:120px; padding-bottom:100px; }
.auth-head.left{ text-align:left; }

/* A shared secret shown once. Monospaced so characters that look alike stay
   distinguishable, and broken anywhere so it cannot overflow the panel. */
.secret{
  font-family:ui-monospace,monospace; font-size:1.05rem;
  letter-spacing:.14em; word-break:break-all;
}

.error-list{ display:grid; gap:6px; margin-top:8px; }
/* Live count of selected services. Set in the display face so a changing
   number does not reflow the line it sits on. */
.svc-count{ font-family:var(--font-display); letter-spacing:.06em; }

/* Submissions page title row: the heading and the primary action share a line,
   and the action drops beneath it rather than shrinking when the width runs
   out. */
.subs-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}

/* Change password: three steps, so it borrows the intake shell — a progress
   rail beside the card rather than one narrow panel on an empty page. */
.pw-flow{
  display:grid; grid-template-columns:250px minmax(0,1fr);
  gap:56px; align-items:start; max-width:900px; margin:0 auto;
}
.pw-rail{ display:grid; gap:26px; position:sticky; top:110px; }
.pw-rail .fine{ margin-top:0; padding-top:22px; border-top:1px solid var(--hair); }
@media (max-width:860px){
  .pw-flow{ grid-template-columns:1fr; gap:34px; max-width:560px; }
  .pw-rail{ position:static; }
}

/* Revealed by the "Other" service. [hidden] loses to the .field display rule,
   so it needs saying explicitly. */
.svc-other[hidden]{ display:none; }
.svc-other textarea{ min-height:84px; }

/* Attachment rows. minmax(0,1fr) rather than 1fr: a grid track is min-content
   by default, so the name would push the row wide instead of ellipsing. */
.files{ display:grid; gap:0; }
.files .f{
  display:grid; grid-template-columns:20px minmax(0,1fr) auto auto; gap:16px;
  align-items:center; padding:14px 0; border-bottom:1px solid var(--hair);
}
.files .f:last-child{ border-bottom:none; }
.files .f svg{ width:17px; height:17px; color:var(--text-dim); }
.files .fn{ font-size:.94rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.files .fs{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em;
  color:var(--text-dim); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.files .dl{
  font-family:var(--font-display); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-2); text-decoration:none; white-space:nowrap;
}
.files .dl:hover{ text-decoration:underline; }
@media (max-width:520px){
  .files .f{ grid-template-columns:20px minmax(0,1fr) auto; row-gap:6px; }
  .files .dl{ grid-column:2 / -1; justify-self:start; }
}

/* ── Staff area ───────────────────────────────────────────────────────────
   The admin screens borrow this stylesheet wholesale; only what is genuinely
   theirs lives here.
   ───────────────────────────────────────────────────────────────────────── */

/* Sticky footer. Scoped to the staff body rather than applied to every page:
   the marketing pages are all taller than the viewport, while an inbox holding
   two rows is not, and there the footer used to float mid-screen with dead
   background beneath it. */
body.staff{ min-height:100vh; display:flex; flex-direction:column; }
body.staff > footer.site{ margin-top:auto; }
/* Flex items with `margin:0 auto` do not stretch — auto cross-axis margins turn
   stretch off, and the item falls back to shrink-to-fit. Every .wrap on these
   pages centres itself that way, so making the body a flex column silently
   changed each one from "fill, capped at max-width" to "as wide as its widest
   line". A width to resolve the margins against restores the first, and
   max-width still does the capping.

   It hid for a while because most staff pages carry something wide — a table, a
   long paragraph — so shrink-to-fit landed on the cap anyway. The sign-in screen
   is the one that does not, and it collapsed to 261px the moment a sentence was
   removed from it. */
body.staff > *{ width:100%; }

/* Column tracks per staff list. The row rules come from .subs above; these say
   only how wide each list's columns are. The date track is sized to hold
   "2026-08-22 17:46" on one line, which is what it failed to do.
   
   Every track is either a fixed length or an fr, and never content-sized: each
   row is its own grid container, so an auto track resolves against that row's
   own content and the columns stop lining up down the list. fr distributes the
   same free space in every row, which is what makes them agree. */
.subs-inbox{  --subs-cols:118px minmax(0,1fr) 96px 150px; }
.subs-briefs{ --subs-cols:118px minmax(0,1.1fr) minmax(0,1fr) 96px 150px; }
.subs-staff{  --subs-cols:minmax(0,1fr) minmax(0,1.2fr) 220px 150px 92px; }

/* ── Data browser ─────────────────────────────────────────────────────────
   The generic screens over every table. Their one real constraint is that the
   column count is not known when this stylesheet is written, which is why the
   row list here is a <table> and not the .subs grid every other list uses.
   ───────────────────────────────────────────────────────────────────────── */

/* The index: one card per table. auto-fill rather than a fixed count so the
   cards reflow instead of squeezing. */
.tbl-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
}
.tbl-card{
  display:grid; gap:5px; padding:16px 18px; text-decoration:none;
  border:1px solid var(--hair); border-radius:3px; background:var(--veil);
  transition:border-color .3s var(--ease), transform .4s var(--ease-out);
}
.tbl-card:hover{ border-color:var(--accent-2); transform:translateY(-2px); }
.tbl-card .tn{ font-family:var(--font-display); font-weight:500; font-size:1rem; color:var(--text); }
.tbl-card .tm{
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-2);
}
.tbl-card .tc{ font-size:.84rem; color:var(--text-dim); font-variant-numeric:tabular-nums; }

/* A table of arbitrary width scrolls inside its own box. Without this the page
   itself scrolls sideways, which moves the navigation off screen to read a
   column. */
.data-scroll{ overflow-x:auto; }
.dtable{ width:100%; border-collapse:collapse; font-size:.9rem; }
.dtable th, .dtable td{
  text-align:left; padding:12px 16px 12px 0; border-bottom:1px solid var(--hair);
  vertical-align:top; white-space:nowrap;
}
.dtable th{
  font-family:var(--font-display); font-weight:500; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
}
.dtable th a{ color:inherit; text-decoration:none; }
.dtable th a:hover{ color:var(--accent-2); }
.dtable tbody tr:last-child td{ border-bottom:none; }
.dtable tbody tr:hover{ background:var(--veil); }
/* Long free text is clipped rather than allowed to set the table's width. The
   full value is on the row's own page. */
.dtable .clip{ display:inline-block; max-width:38ch; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; }
.dtable .num{ font-variant-numeric:tabular-nums; }
/* An absent value said plainly, so it cannot be mistaken for an empty string —
   the two mean different things in every one of these tables. */
.nullv{ color:var(--text-dim); opacity:.6; font-style:italic; }
/* A value withheld from the page: a password hash, a session payload. */
.secretv{
  font-family:var(--font-display); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim);
}

/* Search box sitting in a card heading beside the filters. */
.search-row{ display:flex; gap:8px; align-items:center; }
.search-row input{
  font:inherit; font-size:.85rem; color:var(--text);
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  padding:8px 12px; min-width:200px;
}
.search-row input:focus{ outline:none; border-color:var(--accent-2); }

/* Read-only tables say so where the add button would otherwise be. */
.ro-note{
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-dim);
}

/* Customer list. Same row component as the staff inboxes, its own tracks. */
.subs-customers{ --subs-cols:minmax(0,1.1fr) minmax(0,1.2fr) 150px 120px 150px; }

/* The record header on a customer: who they are, and the actions that change
   their state, on one line until there is no room for one line. */
.rec-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}