/* ── account.css ────────────────────────────────────────────────────────────
   Login + dashboard makeover (REDESIGN-V3 direction). Three looks, switched by
   html[data-acct="a|b|c"]. The attribute is in the HTML (default "a"); on
   localhost only, ?look=a|b|c overrides it (login.js / dashboard.js) and a
   small Look switch shows bottom-left. Nothing here is needed to read the
   page: with this file blocked you get the plain pages.
     a  Tray       rounded bordered trays, pill controls, accent full stop
     b  Chassis    hardware plate: LED, recessed fields, mono spec labels
     c  Editorial  asymmetric split, huge serif title, underline fields, rows
   Radii and the warm light ground are page-local vars (same as html[data-draft]);
   tokens.css needs Jude's sign-off before they move there. No motion beyond
   what the pages already have.
   ───────────────────────────────────────────────────────────────────────── */

html[data-acct] { --r-sm: var(--r-ctl); }
/* light ground/surface now come from tokens.css (ivory) */

/* ── shared: rounded + bordered controls (all looks) ──────────────────── */
html[data-acct] #login .field-input,
html[data-acct] #dashboard .field-input { border-radius: var(--r-ctl); padding-inline: var(--s4); }
html[data-acct] #login .form-submit,
html[data-acct] #dashboard .form-submit { border-radius: var(--r-ctl); }
html[data-acct] #login .page-notice,
html[data-acct] #dashboard .page-notice { border-radius: var(--r-card); }
html[data-acct] .login-hint { min-height: 1.6em; }

html[data-acct] .dash-badge { border-radius: var(--r-ctl); }
html[data-acct] .dash-banner,
html[data-acct] .dash-key-banner,
html[data-acct] .dash-guide { border-radius: var(--r-card); border-top-width: 1px; }
html[data-acct] .dash-banner { margin-top: var(--s5); background: var(--surface); }
html[data-acct] .dash-key-banner { background: var(--surface); }
html[data-acct] .dash-key { border-radius: var(--r-ctl); padding-inline: var(--s4); }
html[data-acct] .dash-key-btn,
html[data-acct] .dash-download-btn,
html[data-acct] .dash-guide-done { border-radius: var(--r-ctl); }
html[data-acct] .dash-guide { overflow: hidden; }
html[data-acct] .dash-wonder { border-radius: var(--r-ctl); padding-inline: var(--s4) var(--s5); }
html[data-acct] .dash-guide-tag { border-radius: var(--r-ctl); }
html[data-acct] .dash-guide-changed > div { border-radius: var(--r-card); }

/* the grid: separate rounded cards instead of a 1px lattice */
html[data-acct] .dash-grid { background: none; border: 0; gap: var(--s4); }
html[data-acct] .dash-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card);
  padding: var(--s5);
}
html[data-acct] .dash-card-shot-wrap { height: 26rem; }
@media (min-width: 48em) { html[data-acct] .dash-card-shot-wrap { height: 28rem; } }
html[data-acct] .dash-card-shot { border-radius: var(--r-sm); }
html[data-acct] .dash-empty { border-top: 0; padding: var(--s6); border: 1px solid var(--rule); border-radius: var(--r-tray); background: var(--surface); }

/* ══ A · Tray ═══════════════════════════════════════════════════════════
   Login: the form sits in one rounded, bordered tray. Titles take an accent
   full stop (accent as punctuation). */
html[data-acct="a"] #login .page-intro-title::after,
html[data-acct="a"] .dash-title::after { content: "."; color: var(--accent); }
html[data-acct="a"] #login .page-intro { border-bottom: 0; padding-bottom: 0; }
html[data-acct="a"] #login .page-well { padding-top: var(--s5); }
html[data-acct="a"] #login .page-well-inner {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-tray); padding: var(--s6) var(--s5);
}
@media (min-width: 48em) { html[data-acct="a"] #login .page-well-inner { padding: var(--s7); } }
html[data-acct="a"] .dash-header { border-bottom: 0; padding-bottom: var(--s3); }

/* ══ B · Chassis ════════════════════════════════════════════════════════
   A hardware plate: hairline border, inset top highlight + tight bottom
   shadow, soft-glow LED by every title, recessed fields, smaller radii. */
html[data-acct="b"] #login .page-intro-title::before,
html[data-acct="b"] .dash-card-name::before {
  content: ""; display: inline-block; vertical-align: .12em; margin-right: .5em;
  width: .5rem; height: .5rem; border-radius: 50%;
  width: .9rem; height: .9rem;
  background: var(--accent);
}
html[data-acct="b"] .dash-card-name::before { width: .7rem; height: .7rem; vertical-align: .22em; }
html[data-acct="b"] #login .page-intro { border-bottom: 0; padding-bottom: 0; }
html[data-acct="b"] #login .page-intro-title { font-size: var(--fs-h1); }
html[data-acct="b"] #login .page-kicker { letter-spacing: .24em; text-transform: uppercase; }
html[data-acct="b"] #login .page-well { padding-top: var(--s5); }
html[data-acct="b"] #login .page-well-inner,
html[data-acct="b"] .dash-card,
html[data-acct="b"] .dash-banner,
html[data-acct="b"] .dash-key-banner {
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r-card);
}
html[data-acct="b"] #login .page-well-inner { padding: var(--s6) var(--s5); position: relative; }
html[data-acct="b"] #login .page-well-inner::before {
  content: "Access panel \00b7 magic link"; display: block;
  font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data);
  text-transform: uppercase; color: var(--fg-faint);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule);
}
html[data-acct="b"] .field-input,
html[data-acct="b"] .dash-key {
  border-radius: var(--r-sm); background: var(--ground);
}
html[data-acct="b"] #login .form-submit,
html[data-acct="b"] #dashboard .form-submit,
html[data-acct="b"] .dash-download-btn,
html[data-acct="b"] .dash-key-btn,
html[data-acct="b"] .dash-guide-done { border-radius: var(--r-sm); }
html[data-acct="b"] .dash-card > .dash-download-label { padding-top: var(--s3); border-top: 1px solid var(--rule); }
html[data-acct="b"] .dash-header { border-bottom-style: dashed; }
html[data-acct="b"] .dash-wonder, html[data-acct="b"] .dash-badge { border-radius: var(--r-sm); }

/* ══ C · Editorial ══════════════════════════════════════════════════════
   Uneven bands. Login: huge italic serif title left, bare underline fields
   right (60/40 on desktop). Dashboard: plugins as hairline rows, the UI
   shot in a rounded surface on the right. */
html[data-acct="c"] #login .page-intro { text-align: left; border-bottom: 0; margin-inline: 0; max-width: none; }
html[data-acct="c"] #login .page-intro-title { font-size: clamp(6.4rem, 26vw, 11rem); line-height: .9; font-style: italic; letter-spacing: -.02em; }
html[data-acct="c"] #login .page-intro-title::after { content: "."; color: var(--accent); }
html[data-acct="c"] #login .page-kicker { display: none; }
html[data-acct="c"] #login .page-intro-title { padding-bottom: .12em; margin-bottom: var(--s3); }
html[data-acct="c"] #login .page-intro-sub { max-width: 34ch; }
html[data-acct="c"] #login .field-input { border-bottom-color: transparent; }
html[data-acct="c"] #login .page-well { padding-top: 0; }
html[data-acct="c"] #login .page-well-inner { margin-inline: 0; max-width: 52rem; }
html[data-acct="c"] #login .field-input,
html[data-acct="c"] #dashboard .field-input { border: 0; border-bottom: 1px solid var(--rule-strong); border-radius: 0; background: transparent; padding-inline: 0; }
html[data-acct="c"] #login .field-input:focus-visible { outline: 0; border-bottom-color: var(--accent); }
@media (min-width: 64em) {
  html[data-acct="c"] #login { display: grid; grid-template-columns: 3fr 2fr; align-items: end; border-top: 1px solid var(--rule); margin-top: var(--s5); }
  html[data-acct="c"] #login .page-intro { padding-block: var(--s8); }
  html[data-acct="c"] #login .page-intro-title { font-size: clamp(11rem, 15vw, 20rem); }
  html[data-acct="c"] #login .page-well { padding-block: var(--s8); border-left: 0; }
  html[data-acct="c"] #login > .load-fallback { grid-column: 1 / -1; }
}
html[data-acct="c"] .dash-title { font-size: clamp(6.4rem, 20vw, 14rem); line-height: .9; font-style: italic; letter-spacing: -.02em; }
html[data-acct="c"] .dash-title::after { content: "."; color: var(--accent); }
html[data-acct="c"] .dash-grid { gap: 0; border-top: 1px solid var(--rule-strong); }
html[data-acct="c"] .dash-card { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: var(--s6) 0; }
html[data-acct="c"] .dash-card-name { font-size: clamp(4.2rem, 9vw, 7.2rem); font-style: normal; line-height: .95; }
html[data-acct="c"] .dash-card-shot-wrap { background: none; border-radius: 0; padding: 0; height: 24rem; }
html[data-acct="c"] .dash-card-shot { filter: none; box-shadow: none; border-radius: var(--r-sm); }
@media (min-width: 48em) {
  html[data-acct="c"] .dash-grid { grid-template-columns: 1fr; }
  html[data-acct="c"] .dash-card { grid-template-columns: 5fr 7fr; column-gap: var(--s7); align-items: start; align-content: center; }
  html[data-acct="c"] .dash-card > * { grid-column: 1; }
  html[data-acct="c"] .dash-card > .dash-card-shot-wrap { grid-column: 2; grid-row: 1 / span 6; height: 30rem; }
  html[data-acct="c"] .dash-card-new { right: auto; left: 0; top: var(--s3); }
  html[data-acct="c"] .dash-card-link { margin-top: var(--s2); }
}

/* ── localhost-only look switch ───────────────────────────────────────── */
.acct-look { position: fixed; left: var(--s3); bottom: var(--s3); z-index: 90; display: flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2) var(--s1) var(--s3); border: 1px solid var(--rule-strong); border-radius: var(--r-sm); background: var(--ground); font-family: var(--font-data); font-size: var(--fs-data); letter-spacing: var(--track-data); text-transform: uppercase; color: var(--fg-faint); }
.acct-look a { padding: var(--s1) var(--s3); border-radius: var(--r-sm); color: var(--fg); text-decoration: none; }
.acct-look a[aria-current="true"] { background: var(--fg); color: var(--ground); }

/* type hierarchy: page title > card name > body, in proportion */
html[data-acct] .dash-title { font-size: var(--fs-h2); }
html[data-acct] .dash-card-name { font-size: var(--fs-h3); }
html[data-acct="c"] .dash-title { font-size: clamp(4.8rem, 12vw, 9.6rem); }
html[data-acct="c"] .dash-card-name { font-size: clamp(3.2rem, 5vw, 4.8rem); }

/* login: air between the form and the footer */
html[data-acct="c"] #login { padding-bottom: var(--s8); margin-bottom: var(--s7); }

/* ═══ Dashboard calm pass (2026-10-16): fewer boxes, smaller text, one rhythm ═══
   Subscription banner and licence key become flat rows (hairlines, no fills); the install guide and the
   computers list are tightened; fine print drops to one small size. Nothing is removed from the page. */
html[data-acct] #dashboard .dash-banner { margin: var(--s4) 0; padding: var(--s3) var(--s4); background: none; }
html[data-acct] #dashboard .dash-banner-info strong { font-size: var(--fs-text); }
html[data-acct] #dashboard .dash-banner-btn { padding-block: var(--s2); }
html[data-acct] #dashboard .dash-key-banner { background: none; border: 0; border-radius: 0; padding: 0; margin: var(--s4) 0 var(--s5); gap: var(--s2); }
html[data-acct] #dashboard .dash-key--lg { font-size: var(--fs-text); padding: var(--s2) var(--s3); }
html[data-acct] #dashboard .dash-key-banner-note { font-size: 1.3rem; max-width: none; }
html[data-acct] #dashboard .dash-wonder { margin-bottom: var(--s3); padding-block: var(--s2); font-size: 1.3rem; }
html[data-acct] #dashboard .dash-guide { margin-bottom: var(--s5); }
html[data-acct] #dashboard .dash-guide summary { padding: var(--s3) var(--s4); }
html[data-acct] #dashboard .dash-guide summary strong { font-size: var(--fs-text); }
html[data-acct] #dashboard .dash-guide-body { padding: var(--s3) var(--s4) var(--s4); gap: var(--s3); }
html[data-acct] #dashboard :is(.dash-guide-lead, .dash-guide-steps, .dash-guide-paths, .dash-guide-foot) { font-size: 1.3rem; line-height: 1.55; }
html[data-acct] #dashboard .dash-guide-steps { gap: var(--s2); }
html[data-acct] #dashboard .dash-section-title { margin-bottom: var(--s3); }
html[data-acct] #dashboard .dash-card-note, html[data-acct] #dashboard .p-buy-legal { font-size: 1.2rem; }
html[data-acct] #dashboard :is(.dc-help) { font-size: 1.3rem; }