.account-shell { width: min(100% - (var(--gutter) * 2), 960px); margin-inline: auto; }

.account-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; }
.account-nav__wordmark { color: var(--ink); font-family: var(--serif); font-size: var(--step-1); font-weight: 600; text-decoration: none; }
.account-nav__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.65rem; min-width: 0; }
.email-chip { overflow: hidden; max-width: 16rem; padding: 0.34rem 0.75rem; border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-3); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }

/* Mixed from --paper rather than pinned to its light-theme value, like the same
   pill on the wizard: rgba(253, 251, 247, 0.72) is a sheet of cream, and after
   dark it was a lit blob floating over a near-black page. */
.langbar__pill { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.25rem; border: 1px solid var(--hairline); border-radius: 999px; background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.langbar__opt { position: relative; display: inline-flex; align-items: center; padding: 0.34rem 0.85rem; border-radius: 999px; color: var(--ink-3); font-size: var(--step--1); font-weight: 600; text-decoration: none; }
/* --paper, not #fff. The chip behind this label is --ink, which is a near-white
   after dark, and white on near-white is 1.05:1 — the active language simply
   vanished. DESIGN.md names this one by hand because it has now been fixed five
   times; the wizard's copy of this rule got it right and this one did not. */
.langbar__opt[aria-current="true"] { color: var(--paper); }
.langbar__txt { position: relative; z-index: 1; }
.langbar__ind { position: absolute; inset: 0; border-radius: 999px; background: var(--ink); view-transition-name: lang-indicator; }

.signed-out { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 6rem); place-items: center; padding-block: 3rem 7rem; }
.auth-card { width: 100%; max-width: 34rem; min-width: 0; }
.auth-card .core { min-width: 0; }
.auth-card h1 { font-size: var(--step-3); font-weight: 500; }
.auth-card p { margin-top: 0.7rem; color: var(--ink-3); }
.signin-form { display: grid; gap: 0.75rem; margin-top: 1.8rem; }
.signin-form label { font-size: var(--step--1); font-weight: 600; }
.signin-form input { width: 100%; min-height: 3rem; padding: 0.65rem 0.85rem; border: 1px solid var(--hairline-2); border-radius: var(--r-ctl); background: var(--card); color: var(--ink); font: inherit; }
.signin-form .btn { justify-self: start; margin-top: 0.4rem; padding-right: 1.35rem; }

.account-main { display: grid; gap: 1.1rem; padding-block: clamp(4rem, 7vw, 7rem); }
.dashboard-nav { display: flex; gap: .35rem; overflow-x: auto; margin-top: 1.5rem; padding-bottom: .4rem; }
.dashboard-nav a { flex: 0 0 auto; padding: .55rem .75rem; border-radius: var(--r-ctl); color: var(--ink-3); font-size: var(--step--1); font-weight: 600; text-decoration: none; }
.dashboard-nav a:hover, .dashboard-nav a:focus-visible { background: var(--paper-sunk); color: var(--ink); }
.library-grid { display: grid; gap: 0; }
.library-row, .programme-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; border-top: 1px solid var(--hairline); }
.programme-row > div { max-width: 65ch; }
.account-heading { padding: 0 0.5rem clamp(1rem, 3vw, 2rem); }
.account-heading h1 { max-width: 12ch; margin-top: 0.5rem; font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); font-weight: 500; }
.account-card h2 { margin-top: 0.35rem; font-size: var(--step-2); font-weight: 500; }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; }
.usage-copy { margin-top: 1.6rem; color: var(--ink-2); font-weight: 600; }
.usage-copy span, .renewal { color: var(--ink-3); font-size: var(--step--1); font-weight: 400; }
.renewal { margin-top: 0.65rem; }
.account-plans { padding-inline: 0.5rem; }
.meter { appearance: none; display: block; overflow: hidden; width: 100%; height: 0.5rem; margin-top: 0.65rem; border: 0; border-radius: 999px; background: var(--paper-sunk); }
.meter::-webkit-progress-bar { border-radius: 999px; background: var(--paper-sunk); }
.meter::-webkit-progress-value { border-radius: 999px; background: var(--sage); }
.meter::-moz-progress-bar { border-radius: 999px; background: var(--sage); }

.teaser { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; color: var(--ink-2); }
.empty-state { margin-top: 1.25rem; max-width: 52ch; color: var(--ink-3); }
.trend-scroll { max-width: 100%; overflow-x: auto; margin-top: 1.4rem; overscroll-behavior-inline: contain; }
.trend { width: 100%; min-width: max-content; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.trend th, .trend td { min-width: 7.25rem; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--hairline); text-align: center; }
.trend thead th { color: var(--ink-3); font-size: var(--step--1); font-weight: 500; }
.trend th:first-child { position: sticky; left: 0; z-index: 1; min-width: 11rem; background: var(--card); text-align: left; }
.trend tbody th { font-family: var(--serif); font-weight: 500; }
.score-chip { display: inline-grid; min-width: 2.7rem; min-height: 2rem; padding: 0.25rem 0.55rem; place-items: center; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--paper-sunk); color: var(--ink-2); }
/* Direction is a fact and gets an arrow; green-good / red-bad is a verdict on a
   body measurement, which is the presentation the score's bands were removed for. */
.delta { display: inline-block; margin-left: 0.35rem; font-size: 0.65rem; color: var(--ink-3); }

.assessment-list { margin-top: 1.2rem; }
.assessment-row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) auto minmax(6rem, auto); align-items: center; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--hairline); }
.assessment-row time, .state-label { color: var(--ink-3); font-size: var(--step--1); }
.assessment-row a { justify-self: end; font-size: var(--step--1); font-weight: 600; }
.data-copy { display: grid; gap: 0.8rem; margin-top: 1.2rem; max-width: 68ch; color: var(--ink-2); }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (hover: hover) and (pointer: fine) { .langbar__opt:not([aria-current="true"]):hover { color: var(--ink); } }
@media (max-width: 700px) {
  .account-nav { align-items: flex-start; }
  .account-nav__actions { flex-wrap: wrap; }
  .email-chip { order: 3; max-width: 100%; }
  .card-heading, .teaser { align-items: flex-start; flex-direction: column; }
  .card-actions { justify-content: flex-start; }
  .assessment-row { grid-template-columns: 1fr auto; gap: 0.35rem 1rem; }
  .assessment-row .score-chip { justify-self: start; }
  .assessment-row a { justify-self: end; }
}
@media (max-width: 600px) {
  .account-nav { flex-direction: column; }
  .account-nav__actions { justify-content: flex-start; width: 100%; }
  .account-nav__actions .email-chip { width: 100%; }
}