/*
 * Account area — the member's own screens.
 *
 * Every colour, space and step here is a token from tokens.css. a11y_test checks
 * the contrast of every text token pair, so a raw hex value in this file can
 * fail the suite; there are no new colours below, only existing ones used.
 *
 * Mobile-first, like the rest of the site: no max-width media queries.
 * design_system_test asserts there are none.
 */

.account__inner {
  padding-block: var(--space-xl);
}

/* ---- Sub-navigation ------------------------------------------------------ */

/* GONE 2026-09-09, WITH THE PARTIAL THAT RENDERED IT. The seven account screens
   moved into the site header as a submenu under «Ο λογαριασμός μου», so
   .account__nav, .account__nav-list and .account__nav-link matched nothing here
   any more. Deleted rather than left: a rule that styles nothing is the same
   dead weight as landing AV's `filter: invert(1)`, and the next reader would
   have to open the partial to find out it no longer exists. The replacement is
   .site-nav__sub in components.css. */

/* ---- Tiles --------------------------------------------------------------- */

/*
 * Figure THEN label, matching the admin KPI convention so the two do not drift.
 * The order is the markup's; this only styles it.
 */
.account__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-s);
  margin: 0 0 var(--space-l);
  padding: 0;
  list-style: none;
}

.account__tile {
  padding: var(--space-s);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.account__tile--warn {
  border-color: var(--ember);
}

.account__tile-figure {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--lh-tight);
}

/*
 * A WORD WHERE A NUMBER USUALLY STANDS — «Απεριόριστες» for a member whose
 * packages count nothing (landing BL). At --step-3 it is 177px wide in a figure
 * with 132px of room on a 375px phone, and it ran out of the tile. --step-1 was
 * measured to fit at 360, 375, 390 and 430px; at 320px the grid is a single
 * column and there is room to spare. Only the word shrinks: a digit keeps the
 * tile's full size, which is why this is a modifier and not a change above.
 */
.account__tile--word .account__tile-figure {
  font-size: var(--step-1);
}

.account__tile-label {
  display: block;
  color: var(--muted);
  font-size: var(--step--1);
}

/* ---- Lists and notices --------------------------------------------------- */

.account__list {
  margin: 0 0 var(--space-l);
  padding: 0;
  list-style: none;
}

.account__list-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-s);
  align-items: center;
  padding-block: var(--space-s);
  border-block-end: var(--border-thin) solid var(--border);
}

.account__badge {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-m);
  background: var(--base);
  color: var(--muted);
  font-size: var(--step--1);
}

/*
 * WHITE ON --ember-text, exactly like the primary button and the offer bar.
 *
 * This read `background: var(--ember); color: var(--ember-text)` from Task 14
 * until a browser pass on the money screen showed the label as an orange smudge:
 * #C24A18 on #E4622E is 1.42:1, against AA's 4.5. --ember is a DECORATIVE fill —
 * even white on it is 3.45:1, which is the whole reason --ember-text exists and
 * why a11y_test already pins that failure — so text on --ember cannot be made to
 * work by choosing a different foreground. It was invisible to the suite because
 * a11y_test's pair list is hand-written and this pair was not in it; it is now.
 *
 * Every warn badge in the account area wore this: waitlisted, no-show, a class
 * the gym cancelled, and an unpaid instalment.
 */
.account__badge--warn {
  background: var(--ember-text);
  color: var(--surface);
}

.account__notice {
  padding: var(--space-s);
  border-radius: var(--radius-m);
  background: var(--base);
}

.account__notice--warn,
.account__notice--error {
  border-inline-start: 3px solid var(--ember);
}

/* INFORMATIONAL, AND --sand FOR .account__needsub's REASON, one rule below:
   a member between two packages has done nothing wrong. The flash this styles
   says a standing booking was saved and explains why it booked nothing yet —
   ember would tell her off for a rule that is sitting there working correctly,
   and `success` green would claim classes she has not got.

   Border only, no colour pair: the text inherits --ink from the page, which is
   what keeps it under a contrast pair a11y_test already resolves. Declaring a
   colour here would be checked against nothing — the same trap the note beside
   .account__needsub records. */
.account__notice--info {
  border-inline-start: 3px solid var(--sand);
}

/* ---- "You need a membership" -------------------------------------------
   Shown on the booking page and on the membership page, from one partial.

   INFORMATIONAL, NOT AN ERROR. It uses --sand rather than the --ember rule
   .account__notice--error carries: a member between two packages has done
   nothing wrong, and the screen's job here is to hand her a phone number, not
   to tell her off. That was the reasoning already written beside the empty
   state this replaced, and it still holds.

   No colour pair is declared on one rule here on purpose — the text inherits
   --ink from the page. a11y_test's sweep only resolves rules setting BOTH
   colour and background, so a colour set here would be checked against nothing;
   inheriting keeps it under the pair the page already passes. */
.account__needsub {
  padding: var(--space-s);
  border-radius: var(--radius-m);
  border-inline-start: 3px solid var(--sand);
  background: var(--base);
}
.account__needsub-lead {
  margin: 0;
  font-weight: 700;
}
.account__needsub-talk {
  margin: var(--space-3xs) 0 0;
}
.account__needsub-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  margin: var(--space-2xs) 0 0;
}
.account__needsub-contact a {
  font-weight: 700;
  /* Long addresses must not push the card wider than the phone it is read on. */
  overflow-wrap: anywhere;
}
.account__needsub-ask {
  margin: var(--space-s) 0 0;
}
/* The "we have your request" line, where the button was. Deliberately the
   same top margin as the form it replaces, so the card does not resize when
   she presses it and the answer appears exactly where she was looking. */
.account__needsub-asked {
  margin: var(--space-s) 0 0;
  font-weight: 700;
}

/* ---- Forms --------------------------------------------------------------- */

.account__form {
  max-width: 28rem;
  /* Separates a form from whatever follows it. The privacy screen stacks two,
     and without this the second heading sits on the first button. */
  margin-block-end: var(--space-l);
}

.account__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-block-end: var(--space-s);
}

.account__field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-xs);
}

.account__hint {
  color: var(--muted);
  font-size: var(--step--1);
}

/*
 * Errors carry TEXT, never colour alone — WCAG 1.4.1. Each one sits beside the
 * field it belongs to and names what is wrong.
 */
.account__error {
  color: var(--ember-text);
  font-size: var(--step--1);
}

.account__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  color: var(--muted);
}

/* ---- Money --------------------------------------------------------------- */

.account__balance {
  margin-block-end: var(--space-s);
  font-size: var(--step-2);
}

/*
 * Colour is the SECOND signal, never the only one — WCAG 1.4.1. What she owes
 * is spelled out in the sentence itself and the overdue notice repeats it in
 * words, so this only emphasises text that already says everything.
 */
.account__balance--warn {
  color: var(--ember-text);
}

/* The plan a run of instalments belongs to, printed once above its rows. */
.account__list-head {
  padding-block: var(--space-s) var(--space-3xs);
  color: var(--muted);
  font-size: var(--step--1);
}

.account__amount {
  font-variant-numeric: tabular-nums;
}

.account__amount--credit {
  color: var(--muted);
}

/* A payment that never counted — refunded, pending or failed. The badge beside
   it carries the same fact in words. */
.account__amount--void {
  color: var(--muted);
  text-decoration: line-through;
}

/*
 * The running balance sits at the end of the row and pushes to the far edge
 * where there is room for it. Muted because it repeats a total she can read at
 * the top of the page — it is there for following the arithmetic, not for
 * competing with the movement itself.
 */
.account__running {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

/* ---- Recurring bookings --------------------------------------------------- */

/*
 * Phase 4d. NO display:none and no media gate — constraint 31 records three
 * screens shipped invisible on every phone in one phase, each caught by
 * reading CSS rather than by any assertion. This list is flex-wrap at every
 * width, so it degrades to stacked rows instead of vanishing.
 *
 * Written against this file's tokens, not the brief's: --color-warn,
 * --color-surface-2 and --space-3 do not exist in tokens.css. --ember is
 * this codebase's actual warning-accent colour (.account__tile--warn,
 * .account__notice--warn use it the same way), --sand paired with --ink is
 * the notice background already proven against a11y_test by
 * .checkout__notice--warn in public.css, and --space-s is what
 * .account__notice and .checkout__notice both use for this same padding.
 * border-inline-start rather than border-left to match every other
 * directional rule in this file.
 */
.account__warn {
  padding: var(--space-s);
  border-inline-start: 3px solid var(--ember);
  background: var(--sand);
  color: var(--ink);
}

.account__inline-form { display: inline; }

/* ---- One membership on the subscription screen ----
   Plural on purpose: a member who renews early holds two overlapping active
   subscriptions (see SubscriptionRepository::membershipFor), and with no
   separator the second package's dates read as more rows of the first.

   The border goes on the ADJACENT sibling rather than on every panel, so a
   member with one package — which is almost all of them — gets no stray rule
   under a single block. Spacing and a hairline only: no colour pair here, so
   nothing for a11y_test's contrast sweep to resolve. */
.account__panel {
  margin-block-end: var(--space-l);
}

.account__panel + .account__panel {
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--border);
}