/* ============================================================================
   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); }

.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); }
}