/* ============================================================================
   account.css — /account.

   ⚠ THE SAME GROUND AND THE SAME COLUMN AS THE LEGAL PAGES, and reusing that
   decision rather than re-picking one. css/legal.css settled on the forecast
   pages' #E9EDF1 / #091322 for SEPARATION — cards are white, and that ground
   gives a 1.177 ground-to-card ratio where a near-white gives 1.087, so a card
   lifts instead of floating on a surface almost its own value. This page is
   the same shape of thing: a short stack of cards on a plain ground.

   The value is duplicated for the same reason legal.css duplicates it — these
   pages do not load forecast.css, and pulling in a page shell for one colour
   is the worse trade. The REASONING is not duplicated; this is the pointer.
   ========================================================================== */

:root { --acct-ground: #E9EDF1; }
:root[data-theme='dark'] { --acct-ground: #091322; }

/* ⚠ NO --nav-h OFFSET. The nav is `position: sticky; top: 0` — it is IN FLOW
   and takes its own height. Padding the body by nav-h pushes the NAV down
   instead of clearing it; that mistake cost 92px of ground above the bar on
   the legal pages. The ground is the body's, the inset is the card's. */
body {
  min-height: 100dvh;
  background: var(--acct-ground);
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

.acct {
  width: min(var(--maxw-text), calc(100% - 2 * var(--sp-4)));
  margin: var(--sp-8) auto var(--sp-12);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.acct__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.acct__state { display: contents; }   /* the cards are the flex children */

.acct__card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.acct__h2 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.acct__copy {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text-secondary);
}

.acct__note { font-size: var(--fs-sm); }

/* ── rows ─────────────────────────────────────────────────────────────── */
.acct__rows { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.acct__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  width: 100%;
}
.acct__row dt { color: var(--text-secondary); font-size: var(--fs-sm); }
.acct__row dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
  /* An address can be long and must not push the label off the card. */
  overflow-wrap: anywhere;
  text-align: right;
}

/* ── subscription ─────────────────────────────────────────────────────── */
/* ⚠ STATE IS CARRIED BY MORE THAN COLOUR. The three states differ in WORDING
   first ("Fetch+ active until…", "Fetch+ ended…", "Fetch Free"); the accent
   is a reinforcement, not the signal. WCAG 1.4.1, and the same rule that
   caught the legal pages' colour-alone links. */
.acct__status {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text);
}
.acct__status[data-state='active'] { color: var(--accent-text); }
/* Cancelled-but-running: the fact reads plainly, not as an alarm. */
.acct__status[data-state='cancelled'] { color: var(--text); }
/* granted (complimentary) access reads as active; the plan · store line sits
   under the status in the card's secondary text, empty lines take no room */
.acct__status[data-state='granted'] { color: var(--accent-text); }
.acct__sub-meta { margin-top: calc(-1 * var(--sp-2)); font-weight: 600; }
.acct__sub-meta:empty { display: none; }

.acct__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── consent switch ───────────────────────────────────────────────────── */
.acct__switch {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
  width: 100%;
}
.acct__switch input { margin-top: 0.2em; width: 1.1rem; height: 1.1rem; flex: none; }
.acct__switch input:disabled { cursor: not-allowed; }
.acct__switch-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text);
  font-size: var(--fs-body);
}
.acct__switch-label small { color: var(--text-secondary); font-size: var(--fs-sm); }

@media (max-width: 560px) {
  .acct {
    width: min(var(--maxw-text), calc(100% - 2 * var(--sp-3)));
    margin-block: var(--sp-5) var(--sp-8);
  }
  .acct__card { padding: var(--sp-4); border-radius: var(--r-md); }
  /* Long labels beside a right-aligned value get cramped; stack them. */
  .acct__row { flex-direction: column; gap: 2px; }
  .acct__row dd { text-align: left; }
}

/* ── About ────────────────────────────────────────────────────────────────
   Shown in BOTH states, so it is styled outside the state blocks. */
.acct__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  width: 100%;
}
.acct__links a,
.acct__linkbtn {
  color: var(--accent-text);
  font-size: var(--fs-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
/* ⚠ UNDERLINED, NOT COLOUR-ALONE. WCAG 1.4.1 — the same rule that caught the
   legal pages' links before the restyle. */
.acct__links a:hover,
.acct__linkbtn:hover { text-decoration-thickness: 2px; }

#acct-sources-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.acct__source { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.acct__source small { color: var(--text-secondary); font-size: var(--fs-sm); }

/* ── Units ────────────────────────────────────────────────────────────────
   A label and a segmented value picker per row. Six rows, so the layout has
   to survive both a 2-option row (ft/m) and a 4-option one (mph/kph/kts/m/s)
   without either looking like a different control. */
.acct__units {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.acct__unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.acct__unit-label { color: var(--text); font-size: var(--fs-body); }

.acct__unit-opts {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  /* The 4-option wind row is the widest; it must not force the card wider. */
  max-width: 100%;
}
.acct__unit-opt {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  min-width: 44px;              /* pointer target, not a type measurement */
}
.acct__unit-opt:first-child { border-left: 0; }
/* ⚠ SELECTION IS NOT COLOUR-ALONE — the chosen option also carries weight and
   a filled ground. WCAG 1.4.1, the same rule that governs the subscription
   states above. */
.acct__unit-opt[aria-checked='true'] {
  background: var(--accent-text);
  color: var(--bg);
  font-weight: 700;
}
.acct__unit-opt:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: -2px;
}

@media (max-width: 460px) {
  /* Stack rather than let a 4-option group crush its own label. */
  .acct__unit { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ── Name ─────────────────────────────────────────────────────────────── */
.acct__names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  width: 100%;
}
.acct__field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.acct__label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.acct__input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm, 8px);
  padding: 10px 12px;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--surface-raised, var(--bg));
}
.acct__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.acct__input[aria-invalid="true"] { border-color: var(--danger-text); }
.acct__input:disabled { opacity: 0.6; }
.acct__names-foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.acct__names-msg:empty { display: none; }
.acct__names-msg[data-kind="error"] { color: var(--danger-text); }
.acct__names-msg[data-kind="ok"] { color: var(--accent-text, var(--accent)); font-weight: 600; }
@media (max-width: 480px) {
  .acct__names { grid-template-columns: 1fr; }
}

/* ── Profile picture ─────────────────────────────────────────────────── */
.acct__avatar-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.acct__avatar {
  width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  display: grid; place-items: center; background: var(--brand-teal, #0E7A66); color: #fff;
  font: 700 26px/1 var(--font-sans, "Inter", system-ui, sans-serif); letter-spacing: 0.02em;
}
.acct__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct__progress { width: 100%; height: 6px; accent-color: var(--accent); }
.acct__progress[hidden] { display: none; }
#acct-avatar-msg:empty { display: none; }
#acct-avatar-msg[data-kind="error"] { color: var(--danger-text); }
#acct-avatar-msg[data-kind="ok"] { color: var(--accent-text, var(--accent)); font-weight: 600; }

/* ── The crop dialog (js/avatar-crop.js) ─────────────────────────────── */
.avcrop { padding: 0; border: 0; background: transparent; color: var(--text); max-width: calc(100vw - 32px); }
.avcrop::backdrop { background: var(--scrim, rgba(0, 0, 0, 0.45)); }
.avcrop__card {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5); background: var(--surface-elevated, var(--bg));
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.avcrop__title { margin: 0; font-size: var(--fs-h3); font-weight: 800; }
.avcrop__view {
  position: relative; width: 280px; height: 280px; max-width: calc(100vw - 72px); max-height: calc(100vw - 72px);
  overflow: hidden; border-radius: var(--r-md); background: #000; cursor: grab;
  touch-action: none; user-select: none;
}
.avcrop__view:active { cursor: grabbing; }
.avcrop__view:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avcrop__canvas { display: block; }
.avcrop__ring {
  position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45); outline: 2px solid rgba(255, 255, 255, 0.85);
}
.avcrop__zoom { display: flex; align-items: center; gap: var(--sp-3); width: 100%; font-size: var(--fs-sm); color: var(--text-secondary); }
.avcrop__zoom input { flex: 1; accent-color: var(--accent); }
.avcrop__actions { display: flex; gap: var(--sp-2); justify-content: flex-end; width: 100%; }

/* ── Username ────────────────────────────────────────────────────────── */
.acct__username-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.acct__username-row[hidden] { display: none; }
.acct__username { font-size: var(--fs-body-lg, 1.0625rem); font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.acct__username-form { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.acct__username-form[hidden] { display: none; }
.acct__username-edit { display: flex; align-items: center; gap: 6px; }
.acct__username-at { font-weight: 700; color: var(--text-secondary); }
.acct__username-edit .acct__input { flex: 1; max-width: 280px; }
#acct-username-none a { color: var(--accent-text, var(--accent)); font-weight: 600; }
#acct-username-msg[data-kind="error"] { color: var(--danger-text); }
#acct-username-msg[data-kind="ok"] { color: var(--accent-text, var(--accent)); font-weight: 600; }
#acct-username-msg:empty { display: none; }