/* CertaRounds — Account (src/screens/account.js). Semantic tokens only.
   Phone: one column of cards. Desktop ≥1024: page header + two columns (who you are · access,
   devices, data). Alerts reuse .auth-alert from login.css; fields come from forms.css. */

.acct { display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.acct--focus { padding-top: var(--sp-4); }
.acct .page-header { margin-bottom: 0; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.acct-col { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.acct-stack { display: flex; flex-direction: column; gap: var(--sp-4); }

/* ============ Card header ============ */
.acct-card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.acct-card__icon {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-soft-fg);
}
.acct-card__titles { flex: 1 1 auto; min-width: 0; }
.acct-card__title { font-size: var(--fs-17); font-weight: var(--fw-bold); letter-spacing: var(--tracking-snug); color: var(--text-strong); line-height: 1.3; }
.acct-card__title:focus { outline: none; }
.acct-card__sub { margin-top: 2px; font-size: var(--fs-13); color: var(--text-2); }

/* ============ Identity ============ */
.acct-id__row { display: flex; align-items: center; gap: var(--sp-4); }
.acct-id__body { flex: 1 1 auto; min-width: 0; }
.acct-id__name { font-size: var(--fs-20); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); color: var(--text-strong); line-height: 1.25; overflow-wrap: break-word; }
.acct-id__user { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-15); color: var(--text-2); }
.acct-id__user .icon { color: var(--text-3); }
.acct-id .badge { flex-shrink: 0; align-self: flex-start; }

/* ============ Value rows ============ */
.acct-row { display: flex; align-items: center; gap: var(--sp-4); }
.acct-row__main { flex: 1 1 auto; min-width: 0; }
.acct-value { font-size: var(--fs-17); font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: break-word; }
.acct-value--mono { font-family: var(--font-mono); letter-spacing: .01em; }
.acct-dots { letter-spacing: .18em; color: var(--text-2); }
.acct-hint { font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.acct-row .acct-hint { margin-top: 2px; }
.acct-row .btn { flex-shrink: 0; }

/* ============ Inline forms ============ */
.acct-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.acct-newpw { display: flex; flex-direction: column; gap: var(--sp-3); }
.acct-form__actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ============ Access ============ */
.acct-access { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); border-radius: 16px; background: var(--surface-2); }
.acct-access__gem { display: inline-flex; flex-shrink: 0; }
.acct-access__body { min-width: 0; }
.acct-access__line { font-size: var(--fs-17); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1.35; font-variant-numeric: tabular-nums; }
.acct-access .acct-hint { margin-top: 2px; }
.acct-access.is-soon { background: var(--warning-bg); }
.acct-access.is-soon .acct-access__line { color: var(--warning); }
.acct-access.is-ended { background: var(--danger-bg); }
.acct-access.is-ended .acct-access__line { color: var(--danger-strong); }
.acct-card .btn--outline[data-key="acct-renew"], .acct-card .btn--primary[data-key="acct-renew"] { align-self: flex-start; }

/* ============ Devices ============ */
.acct-devices { display: flex; flex-direction: column; }
.acct-device {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--divider);
}
.acct-device:first-child { border-top: 0; padding-top: 0; }
.acct-device__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-2);
}
.acct-device.is-current .acct-device__icon { background: var(--accent-soft); color: var(--accent-soft-fg); }
.acct-device__body { flex: 1 1 auto; min-width: 0; }
.acct-device__label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.35; }
.acct-device__meta { font-size: var(--fs-13); color: var(--text-2); margin-top: 2px; }
.acct-device .btn { flex-shrink: 0; }
.acct-devices--loading { gap: var(--sp-3); }
.acct-devices__skel { height: 52px; border-radius: 14px; }
.acct-card .btn[data-key="acct-dev-others"] { align-self: flex-start; }

/* ============ Your data ============ */
.acct-sync { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-15); line-height: 1.5; color: var(--text); }
.acct-sync .icon { flex-shrink: 0; margin-top: 2px; color: var(--success); }
.acct-sync.is-warn .icon { color: var(--warning); }
.acct-links { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.acct-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--link); text-decoration: none; }
.acct-link:hover { color: var(--link-hover); text-decoration: underline; }
.acct-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }
.acct-card .btn[data-key="acct-logout"] { align-self: flex-start; }

@media (max-width: 767px) {
  .acct-card .btn--block { align-self: stretch; }
  .acct-card .btn[data-key="acct-renew"].btn--block,
  .acct-card .btn[data-key="acct-dev-others"].btn--block,
  .acct-card .btn[data-key="acct-logout"].btn--block { align-self: stretch; }
}

@media (min-width: 1024px) {
  .acct { gap: var(--sp-6); }
  .acct-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
  .acct-col { gap: var(--sp-5); }
  .acct--focus { max-width: 1120px; margin: 0 auto; }
}

/* ============ F1 ============ */
.acct { padding-top: var(--sp-4); }                        /* same rhythm under the top bar as between cards */
@media (min-width: 1024px) { .acct { padding-top: 0; } }
/* Identity + username in one card; the status chip sits under the name so long names get the width */
.acct-id__row { align-items: flex-start; }
.acct-id__name { margin: 0; }
.acct-id__chip { margin-top: 6px; }
.acct-id__user-block { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--divider); }
.acct-label { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
/* Access: "193 days left" big, "Until Apr 6, 2027" under it */
.acct-access__line { font-size: var(--fs-20); }
.acct-access__until { font-size: var(--fs-15); font-weight: var(--fw-semibold); color: var(--text-2); margin-top: 2px; }
.acct-access .acct-hint { margin-top: var(--sp-2); }
.acct-device__label { flex-wrap: wrap; }   /* F2: the badge drops under a long name instead of squeezing it */
.acct-device__label .badge { flex-shrink: 0; }

/* ============ F2 ============ */
/* Device meta: "Chrome · Active 10 h ago" — each phrase stays whole; the line breaks only between them */
.acct-nowrap { white-space: nowrap; }
/* Password form: the consequence next to Save */
.acct-form__note { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-13); line-height: 1.5; color: var(--text-2); }
.acct-form__note .icon { flex-shrink: 0; margin-top: 2px; color: var(--accent-soft-fg); }
/* Renew early: a quiet link while plenty of time is left */
.acct-renew-link { align-self: flex-start; gap: 4px; font-size: var(--fs-15); }
/* Breadcrumb above the desktop page title */
.acct-crumbs { display: flex; align-items: center; gap: 4px; margin-bottom: var(--sp-1); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-3); }
.acct-crumbs a { display: inline-flex; align-items: center; min-height: 28px; color: var(--text-2); border-radius: 6px; }
.acct-crumbs a:hover { color: var(--link); text-decoration: underline; }
.acct-crumbs a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.acct-crumbs__sep { display: inline-flex; color: var(--text-3); }

/* ============ F3 ============ */
/* Devices (D16): title + ONE meta line. The meta never wraps; when it is too narrow the browser
   token drops onto a hidden second line instead of breaking or ellipsizing anything. */
.acct-device__label { flex-wrap: nowrap; }
.acct-device__meta {
  display: flex;
  flex-wrap: wrap;
  height: 1.5em;
  line-height: 1.5;
  overflow: hidden;
}
.acct-device__when, .acct-device__browser { white-space: nowrap; }
.acct-device__when.is-this { color: var(--text-accent); font-weight: var(--fw-semibold); }
/* Per-device Sign out: a real (link-coloured) ghost action; below 380px a 44px icon button */
.acct-device__out { flex-shrink: 0; }
@media (max-width: 379px) {
  .acct-device__out { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .acct-device__out .btn__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}
/* Access: the number and date sit on the card surface (no nested well); only the colour carries tone */
.acct-access { padding: 0; background: none; border-radius: 0; }
.acct-access.is-soon, .acct-access.is-ended { background: none; }
.acct-access__line { font-size: var(--fs-20); }
/* Card foot: secondary text links and consequential actions, set apart with a hairline */
.acct-foot { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--divider); }
.acct-card .acct-signout-btn { align-self: flex-start; }
/* Header action slot: the card's own action on the right of its title */
.acct-card__head > .btn { margin-left: auto; flex-shrink: 0; }
/* Desktop: one grid with paired rows (identity ↔ access; password/progress/sign-out ↔ devices) */
@media (min-width: 1024px) {
  .acct-grid--paired {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    grid-template-areas: "id access" "left devices";
    align-items: stretch;
  }
  .acct-area { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
  .acct-area > .acct-card { flex: 0 0 auto; }
  .acct-area--id { grid-area: id; }
  .acct-area--access { grid-area: access; }
  .acct-area--left { grid-area: left; }
  .acct-area--devices { grid-area: devices; }
  .acct-area--id > .acct-card, .acct-area--access > .acct-card { flex: 1 1 auto; }
  .acct-area--devices > .acct-card { flex: 1 1 auto; }
}
/* Consequential actions are neutral outlines (not the violet of navigation) */
.acct-card .acct-signout-btn.btn--outline { color: var(--text); }
.acct-card .acct-signout-btn.btn--outline:hover { color: var(--text-strong); }

/* ============ F4 ============ */
/* Desktop grid: cards keep their own height (no stretched white under short content) */
@media (min-width: 1024px) {
  .acct-grid--paired { align-items: start; }
  .acct-area--id > .acct-card, .acct-area--access > .acct-card, .acct-area--devices > .acct-card { flex: 0 0 auto; }
}
/* Devices: when the card is narrow (phones < 380, the 1024 right column) "Sign out" is a 44px icon
   button (its name stays "Sign out <device>"), so the device name keeps one line */
.acct-devices { container-type: inline-size; container-name: acct-devices; }
@container acct-devices (max-width: 440px) {
  .acct-device__out { width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .acct-device__out .btn__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}