/* ==========================================================================
   The Daily Star — SSO / account platform
   Design tokens extracted from Figma:
   TheDailyStar-Website-Design-(B) — Login + Password Reset sections
   ========================================================================== */

:root {
  /* Brand + neutrals (exact values from Figma) */
  --tds-navy:        #040D33;
  --tds-ink:         #131313;
  --tds-muted:       #475467;
  --tds-placeholder: #8B939F;
  --tds-border:      #D3D6DB;
  --tds-hairline:    #EDEEF0;
  --tds-white:       #FFFFFF;
  --tds-icon:        #323C49;

  /* Feedback */
  --tds-danger:      #B42318;
  --tds-danger-bg:   #FEF3F2;
  --tds-danger-line: #FDA29B;
  --tds-success:     #027A48;
  --tds-success-bg:  #ECFDF3;
  --tds-success-line:#6CE9A6;

  /* Type stacks.
     IBM Plex Serif and Inter are the exact Figma fonts (both on Google Fonts).
     The display face in Figma is "Denton Condensed Test" — a licensed trial
     font that cannot be redistributed. Playfair Display is the substitute:
     the same high-contrast, condensed-ish didone character. Swap the stack
     here if the Denton licence is ever purchased. */
  --tds-font-display: "Playfair Display", "Denton Condensed", Georgia, "Times New Roman", serif;
  --tds-font-body:    "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --tds-font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm — Figma uses an 8px scale with 40px between major blocks */
  --tds-gap-xs: 8px;
  --tds-gap-sm: 16px;
  --tds-gap-md: 24px;
  --tds-gap-lg: 40px;

  /* Subscription + checkout, sampled from the Figma frames */
  --tds-accent:      #017FBE;  /* selected plan border, SAVE badge */
  --tds-accent-bg:   #E6F2F9;  /* selected plan, checkout summary panel */
  --tds-accent-line: #C2E0EF;  /* hairline inside the tinted panel */
  --tds-page-tint:   #F9FAFC;  /* page background on these two screens */

  --tds-radius-input: 4px;
  --tds-radius-pill:  999px;

  --tds-col: 600px;          /* centred content column */
  --tds-shell-pad: 200px;    /* header/footer inset at 1920px */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--tds-white);
  color: var(--tds-ink);
  font-family: var(--tds-font-body);
  font-size: 17px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* ==========================================================================
   Shell — header / main / footer
   ========================================================================== */

.tds-header {
  background: var(--tds-white);
  padding-top: var(--tds-gap-md);
  border-bottom: 1px solid var(--tds-hairline);
  flex: none;
}

.tds-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tds-gap-md);
  height: 48px;
  padding: 0 var(--tds-shell-pad);
  margin-bottom: var(--tds-gap-md);
}

/* Back control and the right-hand spacer are the same width so the
   masthead stays optically centred. */
.tds-header__side {
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tds-header__back {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}

.tds-header__back:hover { opacity: .65; }

.tds-header__back:focus-visible {
  outline: 2px solid var(--tds-navy);
  outline-offset: 2px;
}

.tds-header__logo { flex: none; }

.tds-header__logo img {
  height: 48px;
  width: auto;
}

.tds-main {
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  padding: 72px var(--tds-gap-md) 96px;
}

.tds-footer {
  flex: none;
  border-top: 1px solid var(--tds-hairline);
  background: var(--tds-white);
  padding: var(--tds-gap-md) var(--tds-shell-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tds-gap-xs);
  font-family: var(--tds-font-display);
  font-weight: 300;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: .04em;
  color: var(--tds-muted);
}

/* ==========================================================================
   Auth card — the 600px column every screen shares
   ========================================================================== */

.tds-auth {
  width: 100%;
  max-width: var(--tds-col);
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-lg);
}

.tds-auth__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tds-gap-sm);
  text-align: center;
}

.tds-auth__title {
  margin: 0;
  font-family: var(--tds-font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 44px;
  color: var(--tds-ink);
}

.tds-auth__subtitle {
  margin: 0;
  font-family: var(--tds-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  color: var(--tds-muted);
}

.tds-auth__body {
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-md);
}

.tds-auth__fields {
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-sm);
}

/* ==========================================================================
   Fields
   ========================================================================== */

.tds-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tds-gap-xs);
  min-height: 56px;
  padding: 10px 20px;
  background: var(--tds-white);
  border: 1px solid var(--tds-border);
  border-radius: var(--tds-radius-input);
  transition: border-color .15s ease;
}

.tds-field:focus-within { border-color: var(--tds-ink); }

.tds-field--filled { border-color: var(--tds-border); }

.tds-field--error { border-color: var(--tds-danger); }

.tds-field__wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

/* Floating label: hidden until the field has content or focus. Figma shows
   the placeholder-only state before typing, and the label+value state after.
   Browsers without :has() simply keep the label visible — still usable. */
.tds-field__wrap:has(.tds-field__input:placeholder-shown) .tds-field__label {
  display: none;
}

.tds-field__label {
  font-family: var(--tds-font-ui);
  font-weight: 500;
  font-size: 10px;
  line-height: 10px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--tds-placeholder);
}

.tds-field__input {
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  font-family: var(--tds-font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 16px;
  color: var(--tds-ink);
}

.tds-field__input::placeholder { color: var(--tds-placeholder); }
.tds-field__input:focus { outline: none; }

/* Chrome's yellow autofill wash fights the design; repaint it. */
.tds-field__input:-webkit-autofill,
.tds-field__input:-webkit-autofill:hover,
.tds-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tds-ink);
  -webkit-box-shadow: 0 0 0 40px var(--tds-white) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.tds-field__icon {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tds-icon);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.tds-field__icon:focus-visible {
  outline: 2px solid var(--tds-navy);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Verification code — wide tracking so the digits read as a code. Applied
   only once something is typed; the placeholder stays normally spaced. */
.tds-field__input--code:not(:placeholder-shown) {
  font-family: var(--tds-font-ui);
  font-size: 18px;
  line-height: 22px;
  letter-spacing: .38em;
}

.tds-field__error {
  margin: 6px 0 0;
  font-family: var(--tds-font-body);
  font-size: 14px;
  line-height: 18px;
  color: var(--tds-danger);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.tds-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 16px 32px;
  border-radius: var(--tds-radius-pill);
  border: 1px solid transparent;
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

.tds-btn:focus-visible {
  outline: 2px solid var(--tds-navy);
  outline-offset: 2px;
}

.tds-btn--primary {
  background: var(--tds-navy);
  color: var(--tds-white);
}

.tds-btn--primary:hover { background: #0A1748; }

.tds-btn--social {
  background: var(--tds-white);
  color: var(--tds-navy);
  border-color: var(--tds-navy);
}

.tds-btn--social:hover { background: #F7F8FA; }

.tds-btn[aria-disabled="true"],
.tds-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.tds-btn__icon {
  flex: none;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tds-social {
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-xs);
}

/* ==========================================================================
   Rules, legal text, helper links
   ========================================================================== */

.tds-divider {
  display: flex;
  align-items: center;
  gap: var(--tds-gap-xs);
}

.tds-divider::before,
.tds-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--tds-hairline);
}

.tds-divider__label {
  font-family: var(--tds-font-body);
  font-size: 17px;
  line-height: 26px;
  color: var(--tds-ink);
}

.tds-legal,
.tds-helper {
  margin: 0;
  text-align: center;
  font-family: var(--tds-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 26px;
  color: var(--tds-muted);
}

.tds-helper--sm { font-size: 14px; line-height: 18px; }

.tds-legal a,
.tds-helper a,
.tds-link {
  color: var(--tds-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tds-legal a:hover,
.tds-helper a:hover,
.tds-link:hover { color: var(--tds-navy); }

.tds-helper__btn {
  font: inherit;
  color: var(--tds-ink);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.tds-stack-sm { display: flex; flex-direction: column; gap: var(--tds-gap-sm); }

/* ==========================================================================
   Alerts
   ========================================================================== */

.tds-alert {
  padding: 12px 16px;
  border-radius: var(--tds-radius-input);
  border: 1px solid;
  font-family: var(--tds-font-body);
  font-size: 15px;
  line-height: 22px;
}

.tds-alert--error {
  background: var(--tds-danger-bg);
  border-color: var(--tds-danger-line);
  color: var(--tds-danger);
}

.tds-alert--success {
  background: var(--tds-success-bg);
  border-color: var(--tds-success-line);
  color: var(--tds-success);
}

/* Development-only notice. Deliberately loud so nobody mistakes a bypassed
   environment for a real one. */
.tds-alert--dev {
  background: #FFFAEB;
  border-color: #FEC84B;
  color: #93370D;
  font-size: 14px;
  line-height: 20px;
}

.tds-alert--dev code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: #FEF0C7;
  padding: 1px 5px;
  border-radius: 3px;
}

.tds-alert ul { margin: 0; padding-left: 18px; }

/* Screen-reader-only, for labels the design shows only as placeholders */
.tds-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Responsive — Figma mobile frame is 360px wide
   ========================================================================== */

@media (max-width: 1280px) {
  :root { --tds-shell-pad: 40px; }
}

@media (max-width: 767px) {
  :root { --tds-shell-pad: 16px; }

  .tds-main { padding: 40px 16px 64px; }

  .tds-header__bar { height: 40px; margin-bottom: 16px; }
  .tds-header__logo img { height: 36px; }

  .tds-auth { gap: 32px; }
  .tds-auth__title { font-size: 32px; line-height: 34px; }
  .tds-auth__subtitle { font-size: 16px; line-height: 24px; }

  .tds-footer {
    flex-direction: column;
    text-align: center;
    gap: 6px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Subscription + checkout
   Figma: Subscription / 'subscription' (1972:10157), 'Checkout' (2151:6016)
   ========================================================================== */

/* These two screens sit on a tinted page rather than flat white. */
.tds-body--tint { background: var(--tds-page-tint); }
.tds-body--tint .tds-header,
.tds-body--tint .tds-footer { background: var(--tds-page-tint); }

.tds-panel {
  background: var(--tds-white);
  padding: 40px;
}

@media (max-width: 767px) {
  .tds-panel { padding: 24px 20px; }
}

/* ---------- plan chooser ---------- */

.tds-plans {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tds-plan { position: relative; display: block; cursor: pointer; }

/* Visually hidden but still focusable and reachable by keyboard — zero
   width/height would drop it out of the tab order in some browsers. */
.tds-plan__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The markup uses spans so the whole card can sit inside the <label>;
   they need to lay out as blocks. */
.tds-plan__body {
  display: block;
  border: 1px solid var(--tds-border);
  border-radius: var(--tds-radius-input);
  background: var(--tds-white);
  padding: 20px 24px;
  transition: border-color .15s ease, background-color .15s ease;
}

.tds-plan:hover .tds-plan__body { border-color: var(--tds-accent); }

.tds-plan__input:checked + .tds-plan__body {
  background: var(--tds-accent-bg);
  border-color: var(--tds-accent);
}

.tds-plan__input:focus-visible + .tds-plan__body {
  outline: 2px solid var(--tds-navy);
  outline-offset: 2px;
}

.tds-plan__price {
  display: block;
  font-family: var(--tds-font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--tds-ink);
}

.tds-plan__note {
  display: block;
  margin-top: 4px;
  font-family: var(--tds-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--tds-muted);
}

.tds-plan__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--tds-accent);
  color: var(--tds-white);
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 10px;
  line-height: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 0 var(--tds-radius-input) 0 var(--tds-radius-input);
}

/* ---------- benefits ---------- */

.tds-included__label {
  display: block;
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tds-ink);
}

.tds-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tds-benefit {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 12px;
  row-gap: 2px;
}

.tds-benefit__check {
  grid-row: 1 / span 2;
  color: var(--tds-navy);
  padding-top: 2px;
}

.tds-benefit__title {
  display: block;
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  color: var(--tds-navy);
}

.tds-benefit__text {
  display: block;
  font-family: var(--tds-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--tds-muted);
}

.tds-fineprint {
  margin: 0;
  text-align: center;
  font-family: var(--tds-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 22px;
  color: var(--tds-ink);
}

/* ---------- checkout ---------- */

.tds-summary {
  background: var(--tds-accent-bg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-sm);
}

.tds-summary__label {
  display: block;
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tds-ink);
}

.tds-summary__plan {
  display: block;
  font-family: var(--tds-font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;
  color: var(--tds-ink);
}

.tds-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tds-gap-sm);
  font-family: var(--tds-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--tds-ink);
}

.tds-summary__row--muted { color: var(--tds-muted); }

.tds-summary__rule {
  height: 1px;
  background: var(--tds-accent-line);
  border: 0;
  margin: 4px 0;
}

.tds-summary__total {
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}

.tds-summary__total .tds-summary__amount { font-size: 24px; }

.tds-coupon {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.tds-coupon .tds-field { flex: 1 1 auto; min-height: 48px; }

.tds-coupon__apply {
  flex: none;
  min-width: 106px;
  background: var(--tds-white);
  color: var(--tds-navy);
  border: 1px solid transparent;
  border-radius: var(--tds-radius-input);
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.tds-coupon__apply:hover { background: #F2F7FA; }

.tds-coupon__apply:focus-visible {
  outline: 2px solid var(--tds-navy);
  outline-offset: 2px;
}

.tds-pay__methods {
  border: 1px solid var(--tds-border);
  border-radius: var(--tds-radius-input);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 28px;
}

.tds-pay__methods img { height: 24px; width: auto; }

.tds-pay__method {
  font-family: var(--tds-font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--tds-muted);
}

.tds-terms {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--tds-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--tds-ink);
}

.tds-terms input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--tds-navy);
}

/* ==========================================================================
   Personalization
   Figma: 'Personalize' (2084:9888), 'Sucess text' (2108:4440)
   ========================================================================== */

/* This screen is a wide grid, not the 600px auth column. */
.tds-main--wide { padding-bottom: 140px; }

.tds-main--wide .tds-auth {
  max-width: 1520px;
  gap: var(--tds-gap-lg);
}

.tds-personalize {
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-lg);
}

.tds-personalize__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: var(--tds-gap-md);
  border-bottom: 1px solid var(--tds-hairline);
}

.tds-personalize__title {
  margin: 0;
  font-family: var(--tds-font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 46px;
  color: var(--tds-ink);
}

.tds-personalize__subtitle {
  margin: 0;
  font-family: var(--tds-font-body);
  font-size: 17px;
  line-height: 26px;
  color: var(--tds-muted);
}

.tds-topics {
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-md);
}

.tds-topics__label {
  margin: 0;
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  color: var(--tds-navy);
}

.tds-topics__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 28px;
}

/* ---------- topic card ---------- */

.tds-topic { display: block; cursor: pointer; }

.tds-topic__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tds-topic__body {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  align-items: stretch;
  gap: 18px;
  min-height: 100px;
  background: var(--tds-white);
  border: 1px solid var(--tds-hairline);
  padding-right: 16px;
  transition: border-color .15s ease, background-color .15s ease;
}

.tds-topic:hover .tds-topic__body { border-color: var(--tds-border); }

.tds-topic__input:checked + .tds-topic__body {
  background: var(--tds-page-tint);
  border-color: var(--tds-navy);
}

.tds-topic__input:focus-visible + .tds-topic__body {
  outline: 2px solid var(--tds-navy);
  outline-offset: 2px;
}

.tds-topic__thumb {
  width: 104px;
  height: 100%;
  min-height: 100px;
  object-fit: cover;
  display: block;
}

.tds-topic__thumb--empty {
  background: linear-gradient(135deg, #E6F2F9 0%, #D3D6DB 100%);
}

.tds-topic__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 16px 0;
  min-width: 0;
}

.tds-topic__name {
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--tds-ink);
}

.tds-topic__desc {
  font-family: var(--tds-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--tds-muted);
}

.tds-topic__star {
  display: flex;
  align-items: flex-start;
  padding-top: 16px;
  color: var(--tds-border);
}

.tds-topic__star-filled { display: none; }

.tds-topic__input:checked + .tds-topic__body .tds-topic__star { color: var(--tds-navy); }
.tds-topic__input:checked + .tds-topic__body .tds-topic__star-outline { display: none; }
.tds-topic__input:checked + .tds-topic__body .tds-topic__star-filled { display: block; }

/* ---------- sticky action bar ---------- */

.tds-personalize__actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tds-gap-md);
  padding: 20px var(--tds-shell-pad);
  background: var(--tds-page-tint);
  border-top: 1px solid var(--tds-hairline);
}

.tds-personalize__skip {
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tds-ink);
  text-decoration: none;
}

.tds-personalize__skip:hover { color: var(--tds-navy); text-decoration: underline; }

/* The pill is full-width in the auth column but content-width here. */
.tds-btn--auto {
  width: auto;
  min-width: 180px;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.tds-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tds-gap-md);
  background: rgba(19, 19, 19, .55);
}

.tds-modal[hidden] { display: none; }

.tds-modal__box {
  background: var(--tds-white);
  width: 100%;
  max-width: 400px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tds-gap-md);
  text-align: center;
}

.tds-modal__art { color: var(--tds-ink); }

.tds-modal__eyebrow {
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tds-ink);
}

.tds-modal__title {
  margin: 0;
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  color: var(--tds-ink);
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .tds-topics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .tds-topics__grid { grid-template-columns: 1fr; gap: 12px; }

  .tds-personalize__title { font-size: 30px; line-height: 36px; }
  .tds-topics__label { font-size: 19px; line-height: 25px; }

  .tds-personalize__actions {
    justify-content: space-between;
    padding: 14px 16px;
  }

  .tds-btn--auto { min-width: 140px; }

  .tds-modal__box { padding: 28px 20px; }
  .tds-modal__title { font-size: 24px; line-height: 30px; }
}

/* ==========================================================================
   Account area — tabbed shell
   Figma: 'My Devices' (1928:4866), 'Personalisation' (1931:5466),
          'Account Settings' (1959:2809), 'Help Centre' (1969:3336)
   ========================================================================== */

.tds-account {
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-md);
  width: 100%;
}

.tds-account__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tds-account__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-family: var(--tds-font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--tds-muted);
  text-decoration: none;
}

.tds-account__back:hover { color: var(--tds-navy); }

.tds-account__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--tds-font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  color: var(--tds-ink);
}

.tds-account__badge {
  font-family: var(--tds-font-body);
  font-size: 15px;
  line-height: 20px;
  color: var(--tds-ink);
  background: #EDEEF0;
  border-radius: var(--tds-radius-pill);
  padding: 6px 16px;
}

.tds-account__lede {
  margin: 0;
  font-family: var(--tds-font-body);
  font-size: 17px;
  line-height: 26px;
  color: var(--tds-muted);
}

/* ---------- tab strip ---------- */

.tds-tabs { border-bottom: 1px solid var(--tds-border); }

.tds-tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Pipe separators between tabs, as in the design. */
.tds-tabs__item + .tds-tabs__item {
  border-left: 1px solid var(--tds-border);
}

.tds-tabs__link {
  display: block;
  padding: 10px 20px 14px;
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tds-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tds-tabs__item:first-child .tds-tabs__link { padding-left: 0; }

.tds-tabs__link:hover { color: var(--tds-ink); }

.tds-tabs__link.is-active {
  color: var(--tds-ink);
  border-bottom-color: var(--tds-navy);
}

.tds-tabs__link:focus-visible {
  outline: 2px solid var(--tds-navy);
  outline-offset: -2px;
}

.tds-account__body {
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-lg);
  padding-top: var(--tds-gap-md);
}

.tds-account__submit { display: flex; justify-content: flex-end; }

.tds-account__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-family: var(--tds-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--tds-muted);
}

/* ---------- dashboard cards ---------- */

.tds-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.tds-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--tds-white);
  border: 1px solid var(--tds-hairline);
  padding: 28px;
}

.tds-card--accent {
  background: var(--tds-accent-bg);
  border-color: var(--tds-accent);
}

.tds-card__label {
  font-family: var(--tds-font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tds-muted);
}

.tds-card__value {
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 34px;
  color: var(--tds-ink);
}

.tds-card__note {
  margin: 0;
  font-family: var(--tds-font-body);
  font-size: 15px;
  line-height: 22px;
  color: var(--tds-muted);
}

.tds-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.tds-card__actions form { margin: 0; }

/* ---------- table ---------- */

.tds-table__scroll { overflow-x: auto; }

.tds-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--tds-white);
  border: 1px solid var(--tds-hairline);
  font-family: var(--tds-font-body);
}

.tds-table th {
  text-align: left;
  padding: 22px 24px;
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  color: var(--tds-ink);
  border-bottom: 1px solid var(--tds-hairline);
  white-space: nowrap;
}

.tds-table td {
  padding: 22px 24px;
  font-size: 16px;
  line-height: 24px;
  color: var(--tds-ink);
  border-bottom: 1px solid var(--tds-hairline);
  white-space: nowrap;
}

.tds-table tbody tr:nth-child(odd) { background: var(--tds-page-tint); }
.tds-table tbody tr:last-child td { border-bottom: 0; }

.tds-table__action { width: 1%; text-align: right; }
.tds-table__empty { color: var(--tds-muted); text-align: center; }

.tds-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #12B76A;
  margin-left: 6px;
}

.tds-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--tds-icon);
  cursor: pointer;
  border-radius: 4px;
}

.tds-iconbtn:hover { color: var(--tds-danger); background: #F7F8FA; }

.tds-iconbtn:focus-visible {
  outline: 2px solid var(--tds-navy);
  outline-offset: 1px;
}

/* ---------- label + panel split (settings, help) ---------- */

.tds-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 40px;
  align-items: start;
}

.tds-split__label {
  margin: 0;
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: var(--tds-navy);
}

.tds-split__panel {
  background: var(--tds-page-tint);
  border: 1px solid var(--tds-hairline);
  padding: 28px;
}

.tds-split__stack { display: flex; flex-direction: column; gap: var(--tds-gap-md); }

.tds-form {
  display: flex;
  flex-direction: column;
  gap: var(--tds-gap-sm);
}

/* ---------- avatar ---------- */

.tds-avatar {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--tds-white);
  border: 1px solid var(--tds-hairline);
  border-radius: var(--tds-radius-input);
  padding: 20px;
}

.tds-avatar__img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.tds-avatar__side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.tds-avatar__btn { cursor: pointer; }

.tds-avatar__hint {
  font-family: var(--tds-font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--tds-muted);
}

/* ---------- selects, textareas, radios ---------- */

.tds-field__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.tds-field--area { align-items: stretch; }

.tds-field__textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 22px;
}

.tds-radios { border: 0; margin: 0; padding: 4px 0 0; }

.tds-radios__legend {
  padding: 0 0 8px;
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  color: var(--tds-ink);
}

.tds-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 24px;
  font-family: var(--tds-font-body);
  font-size: 16px;
  color: var(--tds-ink);
  cursor: pointer;
}

.tds-radio input { accent-color: var(--tds-navy); width: 16px; height: 16px; }

/* ---------- contact list ---------- */

.tds-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tds-contact__label {
  margin: 0;
  font-family: var(--tds-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  color: var(--tds-navy);
}

.tds-contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--tds-white);
  border: 1px solid var(--tds-hairline);
}

.tds-contact__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--tds-hairline);
}

.tds-contact__row:last-child { border-bottom: 0; }

.tds-contact__name {
  font-family: var(--tds-font-body);
  font-size: 15px;
  color: var(--tds-muted);
}

.tds-contact__value {
  font-family: var(--tds-font-body);
  font-size: 15px;
  color: var(--tds-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.tds-contact__value:hover { text-decoration: underline; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .tds-split { grid-template-columns: 1fr; gap: 16px; }
  .tds-cards { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .tds-account__title { font-size: 30px; line-height: 38px; }

  .tds-tabs__list { flex-wrap: nowrap; overflow-x: auto; }
  .tds-tabs__item + .tds-tabs__item { border-left: 0; }
  .tds-tabs__link { padding: 10px 14px 12px; white-space: nowrap; }
  .tds-tabs__item:first-child .tds-tabs__link { padding-left: 0; }

  .tds-split__panel { padding: 20px 16px; }
  .tds-card { padding: 20px; }
  .tds-card__value { font-size: 22px; line-height: 30px; }

  .tds-contact__row { grid-template-columns: 1fr auto; }
  .tds-contact__name { grid-column: 1 / -1; }

  .tds-avatar { flex-direction: column; align-items: flex-start; }
}

.tds-iconbtn.is-copied { color: var(--tds-success); background: var(--tds-success-bg); }