/* ============================================================
   FREENY FLEET — account pages
   Uses the existing tokens only. No new colours: --ok / --warn / --bad
   already exist for status, and the Guide Sign yellow stays reserved for
   "available".
   ============================================================ */

/* ---------- centred auth card ---------- */

.acc-wrap {
  min-height: calc(100dvh - 120px);
  display: grid;
  place-items: center;
  padding: var(--s5) var(--s4);
}

.acc-card {
  width: min(100%, 440px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s6) var(--s5) var(--s5);
  box-shadow: var(--shadow-2);
}

.acc-mark { display: block; width: 132px; margin: 0 auto var(--s5); }
.acc-mark img { width: 100%; height: auto; display: block; }

.acc-h {
  font-size: 24px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 var(--s2); text-align: center;
}

.acc-sub {
  margin: 0 0 var(--s5); text-align: center;
  color: var(--text-muted); font-size: 14.5px; line-height: 1.55;
}

.acc-foot {
  margin: var(--s5) 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--line);
  text-align: center; font-size: 14px; color: var(--text-muted);
}
.acc-foot a { color: var(--accent); font-weight: 600; }

/* ---------- form furniture ---------- */

.acc-hint {
  margin: 6px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--text-muted);
}

.acc-fine {
  margin: var(--s3) 0 0; font-size: 12.5px; line-height: 1.55;
  color: var(--text-muted);
}
.acc-fine a { color: var(--accent); }

.acc-sub-h {
  margin: var(--s5) 0 var(--s3); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-2);
}

/* Alerts are announced via role="alert" in the markup; this is only the look.

   NOTE ON SUCCESS COLOUR — the whole file depends on this:
   --ok-soft is NOT a generic success tint. In the Guide Sign theme it is
   #FFD335 in BOTH light and dark, because it exists for one thing: the fill
   of the "available" chip. Using it as a success background turned every
   uploaded-document card into a slab of the reserved yellow. Success surfaces
   here are mixed from --accent instead, which is the brand green in both
   modes and carries no other meaning. */
.acc-alert {
  margin: 0 0 var(--s4); padding: 12px 14px;
  border-radius: var(--r-sm); font-size: 14px; line-height: 1.5;
  border: 1px solid var(--bad); background: var(--bad-soft); color: var(--bad);
}
.acc-alert-ok {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.acc-pw { position: relative; display: flex; }
.acc-pw input { flex: 1; padding-inline-end: 68px; }
.acc-eye {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  height: 36px; min-width: 56px; padding: 0 10px;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--accent);
  border-radius: 8px;
}
.acc-eye:hover { background: var(--accent-soft); }
.acc-eye:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }

/* Checkboxes get a real 44px target, not a 13px native box. */
.acc-check {
  display: flex; gap: 12px; align-items: flex-start;
  margin: var(--s4) 0 0; cursor: pointer;
  font-size: 14px; line-height: 1.5; color: var(--text-2);
  min-height: var(--tap); padding: 4px 0;
}
.acc-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.acc-check-inline { margin: 0; min-height: 40px; }
.acc-plats { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s2); }

.row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s3); }
@media (max-width: 620px) { .row3 { grid-template-columns: 1fr; } }

/* ---------- account page ---------- */

.acc-page { max-width: 1040px; }

.acc-head {
  display: flex; flex-wrap: wrap; gap: var(--s4);
  align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--s5);
}
.acc-head h2 { margin: 4px 0; }
.acc-head-r { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.acc-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 700; line-height: 1;
  border: 1px solid currentColor;
}
.acc-chip b { font-size: 12px; }
.acc-ok    { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.acc-warn  { color: var(--warn); background: var(--warn-soft); }
.acc-bad   { color: var(--bad);  background: var(--bad-soft); }
.acc-muted { color: var(--text-muted); background: var(--surface-2); }

.acc-status {
  border: 1px solid var(--line); border-inline-start-width: 4px;
  border-radius: var(--r); padding: var(--s4) var(--s5);
  margin-bottom: var(--s5); background: var(--surface);
}
.acc-status p { margin: 0; font-size: 15px; line-height: 1.6; }
.acc-status .btn { margin-top: var(--s4); }
.acc-status-ok    { border-inline-start-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.acc-status-warn  { border-inline-start-color: var(--warn); background: var(--warn-soft); }
.acc-status-bad   { border-inline-start-color: var(--bad);  background: var(--bad-soft); }
.acc-status-muted { border-inline-start-color: var(--line-2); }
.acc-reason { margin-top: 10px !important; font-weight: 600; }

.acc-prog { margin-bottom: var(--s5); }
.acc-prog-bar {
  height: 8px; border-radius: var(--r-pill);
  background: var(--surface-2); overflow: hidden; margin-bottom: 8px;
}
.acc-prog-bar span {
  display: block; height: 100%; background: var(--accent);
  border-radius: var(--r-pill);
  transition: width .35s cubic-bezier(.22,.61,.36,1);
}
.acc-prog p { margin: 0; font-size: 13.5px; }

.acc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .acc-cols { grid-template-columns: 1fr; } }

/* ---------- document cards ---------- */

.docs { display: grid; gap: var(--s3); margin-top: var(--s4); }

.doc {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s4); background: var(--surface);
  transition: border-color .2s ease, background .2s ease;
}
.doc-have { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.doc-top { display: flex; gap: var(--s3); justify-content: space-between; align-items: flex-start; }
.doc h4 { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.doc-opt {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); margin-inline-start: 6px;
}
.doc-meta { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }
.doc-meta a { color: var(--accent); font-weight: 600; }

.doc-actions { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
/* The file input is hidden inside the label, so the label IS the button. */
.doc-btn { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.doc-btn:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

.doc-state { font-size: 13px; color: var(--text-muted); }
.doc-ok  { color: var(--accent); font-weight: 600; }
.doc-bad { color: var(--bad); font-weight: 600; }

.acc-submit { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.acc-submit .btn[disabled] { opacity: .45; cursor: not-allowed; }

.btn.is-busy { opacity: .7; cursor: progress; }

/* ---------- dark ---------- */

[data-mode="dark"] .acc-card,
[data-mode="dark"] .doc { background: var(--surface); border-color: var(--line); }
[data-mode="dark"] .acc-status { background: var(--surface); }

/* Success surfaces already mix from --accent above and need no dark variant.
   Warn and bad still do: their light-mode tints are near-white pastels that
   would glow against a black page. */
[data-mode="dark"] .acc-warn,
[data-mode="dark"] .acc-status-warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); }
[data-mode="dark"] .acc-bad,
[data-mode="dark"] .acc-status-bad,
[data-mode="dark"] .acc-alert { background: color-mix(in srgb, var(--bad) 16%, var(--surface)); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .acc-prog-bar span { transition: none; }
}

/* ---------- header entry ---------- */
/* Sits with the language and theme controls, styled as chrome rather than a
   second call to action — the Reserve button stays the one primary action. */
.hdr-acct {
  display: inline-flex; align-items: center;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 700; color: var(--text);
  white-space: nowrap;
}
.hdr-acct:hover { border-color: var(--accent); color: var(--accent); }
.hdr-acct:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 820px) { .hdr-acct { display: none; } }

/* ---------- staff applicant review (rendered by the gated ops.js) ---------- */

.ops-note {
  margin: 0 0 var(--s4); padding: 10px 14px;
  border: 1px solid var(--warn); border-radius: var(--r-sm);
  background: var(--warn-soft); color: var(--warn);
  font-size: 14px; font-weight: 600;
}
.ops-empty {
  border: 1px dashed var(--line-2); border-radius: var(--r);
  padding: var(--s6) var(--s5); text-align: center;
}
.ops-empty p { margin: 0 0 6px; }

.ops-apps { display: grid; gap: 10px; }
.ops-app { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.ops-app.is-open { border-color: var(--accent); }

.ops-app-row {
  width: 100%; display: flex; align-items: center; gap: var(--s4);
  padding: 14px var(--s4); min-height: 56px;
  background: none; border: 0; cursor: pointer; text-align: start;
  font: inherit; color: var(--text);
}
.ops-app-row:hover { background: var(--surface-2); }
.ops-app-row:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.ops-app-row .n { flex: 1; font-weight: 700; display: flex; flex-direction: column; }
.ops-app-row .n i { font-style: normal; font-weight: 400; font-size: 13px; color: var(--text-muted); }
.ops-app-row .d { font-size: 13px; color: var(--text-muted); }

.ops-app-body { padding: var(--s4); border-top: 1px solid var(--line); background: var(--inset); }
.ops-app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 760px) { .ops-app-grid { grid-template-columns: 1fr; } }
.ops-app-body h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-2); }

.ops-docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ops-docs li { display: flex; justify-content: space-between; gap: var(--s3); font-size: 14px; }
.ops-docs a { color: var(--accent); font-weight: 600; }
.ops-docs i { font-style: normal; color: var(--text-muted); font-size: 13px; }

.ops-decide { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.ops-decide label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }
.ops-decide input {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font: inherit; font-size: 15px; background: var(--surface); color: var(--text);
}
.ops-decide input:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ops-decide-btns { display: flex; gap: var(--s3); margin-top: var(--s3); flex-wrap: wrap; }
.ops-reject { color: var(--bad); border-color: var(--bad); }
.ops-reject:hover { background: var(--bad-soft); }
.ops-msg { margin: 10px 0 0; font-size: 13.5px; min-height: 18px; }

/* ---------- the next-step card ---------- */
/* The loudest thing on the account page. Whatever else is on screen, there is
   one obvious move. */
.acc-next {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s4) var(--s5); margin-bottom: var(--s5);
  border: 1px solid var(--accent); border-radius: var(--r);
  background: var(--accent-soft);
}
.acc-next-n {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-weight: 800; font-size: 17px;
}
.acc-next-t { flex: 1 1 260px; }
.acc-next-t h3 { margin: 0 0 3px; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.acc-next-t p  { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.acc-next .btn { flex: 0 0 auto; }

[data-mode="dark"] .acc-next {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
}

/* ---------- one-time codes ---------- */

.acc-code {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 26px !important;
  letter-spacing: .34em;
  text-indent: .34em;          /* centres despite the trailing letter-space */
  font-weight: 700;
  padding-inline: 8px !important;
}

/* A button that reads as a link. Still a <button>, because it performs an
   action rather than going anywhere — a screen reader should not be told
   "link" for something that sends an email. */
.acc-link {
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font: inherit; font-size: inherit; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.acc-link:hover { color: var(--accent-hi); }
.acc-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.acc-link[disabled] { opacity: .5; cursor: progress; text-decoration: none; }
.acc-sep { color: var(--line-2); margin: 0 6px; }

/* ---------- confirm-your-email banner ---------- */

.acc-verify {
  border: 1px solid var(--warn); border-inline-start-width: 4px;
  border-radius: var(--r); padding: var(--s4) var(--s5);
  margin-bottom: var(--s5); background: var(--warn-soft);
}
[data-mode="dark"] .acc-verify { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); }
.acc-verify-t h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.acc-verify-t p  { margin: 0 0 var(--s4); font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.acc-verify-f { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.acc-verify-f .acc-code { width: 190px; flex: 0 0 auto; }
.acc-verify .acc-hint { margin-top: 10px; }

/* ---------- security settings ---------- */

.acc-security { margin-top: var(--s5); }
.acc-set {
  display: flex; gap: var(--s4); align-items: flex-start; justify-content: space-between;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.acc-set:last-of-type { border-bottom: 0; }
.acc-set-t { flex: 1 1 auto; min-width: 0; }
.acc-set-t h4 { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.acc-set-t p  { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); word-break: break-word; }

/* A switch that is a real checkbox underneath, so it is keyboard-operable and
   announces its own state without any aria bookkeeping. */
.acc-switch {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  flex: 0 0 auto; min-height: var(--tap);
}
.acc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.acc-switch-t {
  width: 48px; height: 28px; border-radius: var(--r-pill);
  background: var(--line-2); position: relative;
  transition: background .2s ease;
}
.acc-switch-t::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.acc-switch input:checked + .acc-switch-t { background: var(--accent); }
.acc-switch input:checked + .acc-switch-t::after { transform: translateX(20px); }
.acc-switch input:focus-visible + .acc-switch-t { outline: 3px solid var(--accent); outline-offset: 2px; }
.acc-switch input:disabled + .acc-switch-t { opacity: .4; }
.acc-switch input:disabled ~ .acc-switch-l { opacity: .5; }
.acc-switch-l { font-size: 13.5px; font-weight: 700; color: var(--text-2); min-width: 26px; }

.acc-msg { margin: var(--s3) 0 0; font-size: 13.5px; min-height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .acc-switch-t, .acc-switch-t::after { transition: none; }
}

/* RTL: the switch knob travels the other way */
[dir="rtl"] .acc-switch input:checked + .acc-switch-t::after { transform: translateX(-20px); }