/** IO Patina Account — the site layer over the IO Patina common theme.
 *
 *  The brand is the common theme, ~/Projects/iopatina.com/theme 1.0.0, pinned as
 *  verbatim copies in ./theme/ (patina-theme.css, patina-accents.css) and loaded
 *  into the `patina` cascade layer below. This file is the Account's own layer and
 *  wins by layer order, never by specificity. It adds the Account's arrangement
 *  (header, rail navigation, screens, footer), the controls the shared scripts
 *  emit (buttons, fields, dialog, preference controls, status lines) drawn in the
 *  theme's parts, and a dark reading of the same tokens.
 *
 *  The operator console's design.css is not loaded here any more: its spacing and
 *  colour tokens collide with the theme's, and nothing on this page needs it.
 *
 *  Rules held throughout (theme/README.md "Checking your work"):
 *    - Paper is the only light ground; no white cards, no radius, no shadow.
 *    - Every section heading carries the bar; one spoke rule per page.
 *    - Section headings Archivo; the serif only for the page title (Latin
 *      locales and Korean, which has Noto Serif KR), never below 26px; every
 *      digit Martian Mono.
 *    - Colours are the theme's tokens only. The one derived value is the error
 *      colour on a dark ground, which the theme does not define (measured 7.12:1
 *      on Deep Ink).
 *    - Logical properties, so a right-to-left page mirrors without a second copy.
 */

@layer patina, account;

@import url("/account-ui/theme/patina-theme.css") layer(patina);
@import url("/account-ui/theme/patina-accents.css") layer(patina);

/* ── Faces ─────────────────────────────────────────────────────────────────
   Self-hosted, from this origin only (the page's CSP allows nothing else). The
   theme declares none of its own: patina-fonts.css is deliberately not copied
   (its paths and its comment are for other hosts). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/platform-ui/fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/platform-ui/fonts/source-serif-4-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/platform-ui/fonts/martian-mono-latin.woff2") format("woff2");
}
/* The same file, restricted to figures and the marks that sit between them. A
   language Martian Mono cannot set takes its digits from here and everything
   else, spaces included, from its own face. */
@font-face {
  font-family: "Martian Mono Figures";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/platform-ui/fonts/martian-mono-latin.woff2") format("woff2");
  unicode-range: U+0025, U+002B-002F, U+0030-003A;
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/platform-ui/fonts/noto-sans-kr.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3;
}
/* Korean titles pair Source Serif 4 with Noto Serif KR, as the brand site and the
   identity design (Auth's sign-in pages) do. */
@font-face {
  font-family: "Noto Serif KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/platform-ui/fonts/noto-serif-kr.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3;
}

@layer account {
  /* ── Reading tokens ───────────────────────────────────────────────────────
     The theme's palette, named by the job each value does on this page, so the
     dark reading is one block of reassignments rather than a second stylesheet. */
  :root {
    --a-ground: var(--paper);
    --a-title: var(--ink);
    --a-body: var(--graphite);
    --a-muted: var(--ash);
    --a-rule: var(--hairline);
    --a-control: var(--hairline-strong);
    --a-accent: var(--accent);
    --a-accent-strong: var(--accent-deep);
    --a-error: var(--error);
    --a-solid-bg: var(--ink);
    --a-solid-fg: var(--paper);
    --a-solid-hover: var(--accent);
    --a-footer-bg: var(--ink);
    --a-footer-fg: var(--dark-body);
    --a-footer-rule: var(--dark-rule);
    color-scheme: light;
  }
  /* Dark: the theme's own on-dark values. Deep Ink is the ground, Paper the
     titles, Portal Gold the accent (the only place it may appear). */
  :root[data-theme="dark"] {
    --a-ground: var(--ink);
    --a-title: var(--paper);
    --a-body: var(--dark-body);
    --a-muted: var(--dark-label);
    --a-rule: var(--dark-rule);
    --a-control: var(--dark-border-strong);
    --a-accent: var(--accent-light);
    --a-accent-strong: var(--paper);
    --a-error: #d98b76;
    --a-solid-bg: var(--paper);
    --a-solid-fg: var(--ink);
    --a-solid-hover: var(--accent-light);
    --a-footer-bg: var(--deep);
    --a-footer-fg: var(--dark-body);
    --a-footer-rule: var(--dark-rule);
    color-scheme: dark;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --a-ground: var(--ink);
      --a-title: var(--paper);
      --a-body: var(--dark-body);
      --a-muted: var(--dark-label);
      --a-rule: var(--dark-rule);
      --a-control: var(--dark-border-strong);
      --a-accent: var(--accent-light);
      --a-accent-strong: var(--paper);
      --a-error: #d98b76;
      --a-solid-bg: var(--paper);
      --a-solid-fg: var(--ink);
      --a-solid-hover: var(--accent-light);
      --a-footer-bg: var(--deep);
      --a-footer-fg: var(--dark-body);
      --a-footer-rule: var(--dark-rule);
      color-scheme: dark;
    }
  }

  /* ── Faces per language ────────────────────────────────────────────────────
     The three brand faces are Latin subsets. A language they cannot set whole is
     set whole in a face that can, rather than switching fonts mid-word; the serif
     page title gives way to the interface face at the same weight, except in
     Korean, which has a serif of its own. */
  :root:lang(ko) { --font-ui: Archivo, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
  :root:lang(ja) { --font-ui: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; }
  :root:lang(zh-Hans) { --font-ui: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
  :root:lang(yue-Hant-HK), :root:lang(zh-Hant) { --font-ui: "PingFang HK", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
  :root:lang(ar) { --font-ui: "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif; }
  :root:lang(th) { --font-ui: "Noto Sans Thai", Thonburi, Tahoma, sans-serif; }
  :root:lang(ru), :root:lang(uk), :root:lang(pl), :root:lang(cs), :root:lang(tr), :root:lang(vi) {
    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  :root:is(:lang(ja), :lang(zh-Hans), :lang(zh-Hant), :lang(yue-Hant-HK), :lang(ar), :lang(th), :lang(ru), :lang(uk), :lang(pl), :lang(cs), :lang(tr), :lang(vi)) {
    --font-display: var(--font-ui);
  }
  /* Korean has a serif of its own in this release (Noto Serif KR, Hangul only). */
  :root:lang(ko) { --font-display: "Source Serif 4", "Noto Serif KR", "AppleMyungjo", serif; }
  :root:is(:lang(ko), :lang(ja), :lang(zh-Hans), :lang(zh-Hant), :lang(yue-Hant-HK)) body { line-height: 1.75; }
  /* Korean breaks between words, never inside one (as on the sign-in pages); a word
     longer than the line may still wrap anywhere rather than overflow it. */
  :root:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
  /* Labels are set in mono. Martian Mono draws only Latin, so in another script
     a label is set in that language's own face, never a system mono, and its
     figures still come from Martian Mono. */
  :root:lang(ko) { --font-mono: "Martian Mono Figures", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
  :root:lang(ja) { --font-mono: "Martian Mono Figures", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; }
  :root:lang(zh-Hans) { --font-mono: "Martian Mono Figures", "PingFang SC", "Microsoft YaHei", sans-serif; }
  :root:is(:lang(yue-Hant-HK), :lang(zh-Hant)) { --font-mono: "Martian Mono Figures", "PingFang HK", "PingFang TC", "Microsoft JhengHei", sans-serif; }
  :root:lang(ar) { --font-mono: "Martian Mono Figures", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif; }
  :root:lang(th) { --font-mono: "Martian Mono Figures", "Noto Sans Thai", Thonburi, Tahoma, sans-serif; }
  /* Tracking and capitals are Latin devices. Letter-spacing breaks Arabic joining
     and Thai clusters, and CJK has no case; those scripts are set at their
     natural spacing. */
  :root:is(:lang(ar), :lang(th), :lang(ko), :lang(ja), :lang(zh-Hans), :lang(zh-Hant), :lang(yue-Hant-HK)) *,
  :root:is(:lang(ar), :lang(th), :lang(ko), :lang(ja), :lang(zh-Hans), :lang(zh-Hant), :lang(yue-Hant-HK)) *::before {
    letter-spacing: 0;
  }
  :root:is(:lang(ar), :lang(th)) :is(.eyebrow, .account-facts dt, .field-label, .account-form label, .account-conflict-field, .account-product, .status, .account-observed, .account-item-meta) {
    font-size: 13px;
  }

  /* ── Page ───────────────────────────────────────────────────────────────── */
  /* `hidden` means hidden, whatever display a class gives the element (the
     navigation, the conflict panel, a list's "more" button). */
  [hidden] { display: none !important; }
  html { background: var(--a-ground); }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--a-ground);
    color: var(--a-body);
    font-size: 16px;
  }
  a { color: var(--a-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--a-accent-strong); }
  :focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; }
  ::selection { background: #ecdfcb; color: var(--ink); }

  .skip-link {
    left: auto;
    inset-inline-start: -9999px;
    top: 8px;
  }
  .skip-link:focus { inset-inline-start: 12px; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* One container for header, page and footer: the theme's measure and gutter. */
  .account-container {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* ── Header · the theme's site header ─────────────────────────────────────
     66px, hairline base, the brand lockup at the start and the person at the
     end. The lockup is the iopatina.com header's own (the Quiet cut, the rule and
     the outlined wordmark) and nothing is appended to it: the product is named
     beside it as a label, not drawn into it. */
  .account-bar { border-block-end: 1px solid var(--a-rule); background: var(--a-ground); }
  .account-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 66px;
  }
  .account-brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .brand-lockup { display: inline-flex; align-items: center; color: var(--a-title); text-decoration: none; flex: none; }
  .brand-lockup:hover { color: var(--a-title); }
  .brand-lockup-svg { display: block; height: 20px; width: auto; direction: ltr; }
  /* The Account's own icon (Unify) leads the IO Patina wordmark in place of the mark; a separate drawing,
     never the published mark redrawn. Deep Ink tile in both themes. */
  .brand-lockup .product-icon { display: block; flex: none; width: 24px; height: 24px; margin-inline-end: 12px; }
  .account-product {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--a-muted);
    white-space: nowrap;
  }
  .account-bar-end { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .account-identity {
    font-size: 14px;
    color: var(--a-body);
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── Page body · rail beside body ─────────────────────────────────────────
     The theme's house two-column pattern: a 240px rail (here the navigation)
     beside the body, the gap the theme sets. Signed out there is no rail, and
     the body takes the whole measure. */
  .account-stage {
    flex: 1 0 auto;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    column-gap: clamp(28px, 5vw, 80px);
    align-items: start;
    padding-block: var(--space-5) var(--space-6);
  }
  .account-stage:has(> .account-nav[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .account-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: sticky;
    top: var(--space-4);
  }
  .account-nav a {
    display: block;
    padding-block: var(--space-1);
    color: var(--a-body);
    font-size: 15px;
    text-decoration: none;
  }
  .account-nav a:hover { color: var(--a-title); }
  /* The current page: the theme's 2px accent underline and nothing else. */
  .account-nav a[aria-current="page"] {
    color: var(--a-title);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--a-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
  }
  .account-nav-group { display: flex; flex-direction: column; gap: 2px; }
  .account-nav-group-label { display: block; padding-block: var(--space-2) 2px; }

  .account-main { min-width: 0; }
  .account-screen { display: flex; flex-direction: column; gap: var(--space-4); }

  /* ── Screen header: title, intro, the page's one spoke rule ─────────────── */
  .account-screen > h1, .account-split-rail > h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--a-title);
    max-width: 24ch;
  }
  :root:is(:lang(ko), :lang(ja), :lang(zh-Hans), :lang(zh-Hant), :lang(yue-Hant-HK), :lang(ar), :lang(th), :lang(ru), :lang(uk), :lang(pl), :lang(cs), :lang(tr), :lang(vi)) :is(.account-screen > h1, .account-split-rail > h1) {
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 36px);
    letter-spacing: 0;
    line-height: 1.2;
  }
  :root:lang(ko) :is(.account-screen > h1, .account-split-rail > h1) { font-weight: 400; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.25; }
  .account-intro { font-size: 17px; line-height: 1.62; color: var(--a-body); max-width: var(--measure-text); }
  .account-rule { color: var(--a-accent); }
  [dir="rtl"] .rule-spoke { transform: scaleX(-1); }

  /* ── Sections · the rail heading, no box ──────────────────────────────────
     A section is content under a heading that carries the bar. Sections are
     separated by a hairline, never framed. */
  /* The spoke rule is the page's divider; the first section under it needs no
     second line of its own. */
  .account-rule ~ .account-section:not(.account-section ~ .account-section) {
    border-block-start: 0;
    padding-block-start: 0;
  }
  .account-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--a-rule);
  }
  .account-section > h2 {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px var(--space-2);
    padding-inline-start: calc(var(--rail-bar) + var(--rail-gap));
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.25;
    color: var(--a-title);
  }
  .account-section > h2::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: var(--rail-bar);
    background: var(--a-accent);
  }
  /* The only section of a screen: the page title above already names it, so the
     heading line carries the bar and the state alone. */
  .account-section > h2.account-section-state {
    font-size: 15px;
    min-height: 24px;
  }
  .account-section h3, .account-subsection > h3 {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 17px;
    color: var(--a-title);
    margin-block-start: var(--space-2);
  }
  .account-subsection { display: flex; flex-direction: column; gap: var(--space-1); }
  .account-section-note, .form-help, .pref-note {
    font-size: 15px;
    line-height: 1.55;
    color: var(--a-body);
    max-width: var(--measure-text);
  }
  .account-section-note[data-state="warn"] { color: var(--a-title); font-weight: 500; }

  /* The observation line: the theme's status line (mono, plain, stated once). */
  .account-observed {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--a-muted);
    unicode-bidi: isolate;
  }

  /* A section's state beside its heading: plain words in mono, coloured where a
     colour carries meaning, never a badge. */
  .status {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--a-muted);
    border: 0;
    background: none;
    padding: 0;
  }
  .status::before { content: none; }
  .status[data-state="ok"], .status[data-state="active"] { color: var(--a-body); }
  .status[data-state="warn"], .status[data-state="stale"], .status[data-state="expired"], .status[data-state="cancelled"] { color: var(--a-title); }
  .status[data-state="error"], .status[data-state="critical"], .status[data-state="denied"], .status[data-state="revoked"] { color: var(--a-error); }

  /* An empty, loading, failed or notice state inside a section: a sentence. */
  .section-state {
    font-size: 15px;
    line-height: 1.55;
    color: var(--a-body);
    max-width: var(--measure-text);
  }
  .section-state strong { display: block; font-weight: 600; color: var(--a-title); }
  .section-state[data-state="error"] { color: var(--a-error); }
  .section-state[data-state="error"] strong { color: var(--a-error); }
  .section-state[data-state="notice"] { color: var(--a-title); }
  .section-state[data-state="loading"] { font-family: var(--font-mono); font-size: 12px; color: var(--a-muted); }
  /* Without scripts the page says so once, and does not also claim to be loading. */
  @media (scripting: none) { .account-screen > .section-state[data-state="loading"] { display: none; } }

  /* ── Facts · the theme's record ─────────────────────────────────────────── */
  .account-facts {
    display: grid;
    grid-template-columns: minmax(120px, 240px) minmax(0, 1fr);
    border-block-start: 1px solid var(--a-title);
  }
  .account-facts dt, .account-facts dd {
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--a-rule);
  }
  .account-facts dt {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--a-muted);
    padding-block-start: calc(var(--space-2) + 3px);
  }
  .account-facts dd { font-size: 15px; color: var(--a-title); overflow-wrap: anywhere; }

  /* Figures, dates, IDs and versions: mono, left-to-right, isolated. */
  .account-mono { font-family: var(--font-mono); font-size: 0.9em; font-variant-numeric: tabular-nums; unicode-bidi: isolate; direction: ltr; }

  /* ── Lists · hairline rows ─────────────────────────────────────────────── */
  .account-list { display: flex; flex-direction: column; border-block-start: 1px solid var(--a-rule); }
  .account-list > li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    padding-block: var(--space-2);
    border-block-end: 1px solid var(--a-rule);
  }
  .account-list > li > :first-child { flex: 1 1 18ch; min-width: 0; }
  .account-item-title { font-size: 15px; font-weight: 500; color: var(--a-title); }
  .account-item-meta { font-family: var(--font-mono); font-size: 12px; color: var(--a-muted); }
  .account-item-note { font-size: 14px; line-height: 1.5; color: var(--a-body); max-width: 48ch; }
  .account-row-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .account-row-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }

  .account-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  /* The way back to the product the person came from. */
  .account-return { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

  /* ── Buttons · the theme's four kinds ────────────────────────────────────
     The shared scripts emit btn-primary / btn-secondary / btn-ghost / btn-danger;
     each is drawn as the theme part it stands for. Heights are a floor, not a
     cap, so a long translated label wraps inside a 320px screen. */
  .btn {
    background: transparent;
    color: var(--a-title);
    border: 1px solid var(--a-control);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    height: auto;
    padding: 12px 22px;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
  }
  .btn-primary { background: var(--a-solid-bg); color: var(--a-solid-fg); border: 1px solid var(--a-solid-bg); }
  .btn-primary:hover { background: var(--a-solid-hover); border-color: var(--a-solid-hover); color: var(--a-solid-fg); }
  .btn-secondary { background: transparent; color: var(--a-title); border: 1px solid var(--a-control); }
  .btn-secondary:hover { border-color: var(--a-title); color: var(--a-title); }
  .btn-ghost {
    min-height: 44px;
    padding-inline: 0;
    background: none;
    border: 0;
    color: var(--a-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
  .btn-ghost:hover { color: var(--a-accent-strong); }
  .btn-danger { background: transparent; color: var(--a-error); border: 1px solid var(--a-error); }
  .btn-danger:hover { background: var(--a-error); color: var(--a-ground); }
  .btn-sm { min-height: 44px; padding: 10px 16px; }
  .btn:disabled, .btn[aria-disabled="true"] {
    cursor: not-allowed;
    background: transparent;
    border-color: var(--a-rule);
    color: var(--a-muted);
  }

  /* ── Fields ────────────────────────────────────────────────────────────── */
  .field-label, .account-form label:not(.account-avatar-option) {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--a-body);
  }
  .input, .account-input, .account-form input[type="text"], .account-form input[type="email"],
  .account-form select, .account-form textarea {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--a-control);
    border-radius: 0;
    background: var(--a-ground);
    color: var(--a-title);
    font-family: var(--font-ui);
    font-size: 16px;
  }
  .account-form textarea { min-height: 8em; line-height: 1.55; resize: vertical; }
  .input:focus-visible, .account-input:focus-visible, .account-form select:focus-visible, .account-form textarea:focus-visible {
    outline: 2px solid var(--a-accent);
    outline-offset: 2px;
    border-color: var(--a-accent);
  }
  .account-input[aria-invalid="true"] { border-color: var(--a-error); }
  .account-field-error { display: flex; gap: 6px; font-size: 14px; color: var(--a-error); }

  .account-form { display: flex; flex-direction: column; gap: 0; }
  .account-field-row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: start;
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--a-rule);
  }
  .account-field-row:last-child { border-block-end: 0; }
  .account-field-row > .field-label { padding-block-start: 16px; }
  .account-field-control { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .account-field-action { display: flex; align-items: flex-start; justify-content: flex-end; padding-block-start: 2px; }
  .account-handle { display: flex; align-items: center; gap: 8px; }
  .account-handle-at { font-family: var(--font-mono); color: var(--a-muted); flex: none; }
  .account-handle input { flex: 1 1 auto; }
  .account-email-value { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }

  .account-avatar-field { border: 0; margin: 0; padding: var(--space-3) 0; border-block-end: 1px solid var(--a-rule); }
  .account-avatar-field > legend { padding: 0; }
  .account-avatar-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .account-avatar-option { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px; cursor: pointer; }
  .account-avatar-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .account-avatar-glyph {
    width: 44px; height: 44px; display: grid; place-items: center;
    border: 1px solid var(--a-control);
    font-family: var(--font-mono); font-size: 15px; color: var(--a-title);
  }
  .account-avatar-option:has(input:checked) .account-avatar-glyph { border: 2px solid var(--a-accent); }
  .account-avatar-option:has(input:focus-visible) .account-avatar-glyph { outline: 2px solid var(--a-accent); outline-offset: 2px; }
  .account-avatar-name { font-family: var(--font-mono); font-size: 11px; color: var(--a-muted); }

  /* A save that crossed another device's change: the two values side by side,
     as record cells. */
  .account-conflict { display: flex; flex-direction: column; gap: var(--space-2); border-block: 1px solid var(--a-error); padding-block: var(--space-2); }
  .account-conflict-row { display: flex; flex-direction: column; gap: 6px; }
  .account-conflict-field { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-body); }
  .account-conflict-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .account-conflict-stored, .account-conflict-yours { display: flex; flex-direction: column; gap: 3px; padding-block: 6px; border-block-start: 1px solid var(--a-rule); }
  .account-conflict-yours { border-block-start-color: var(--a-accent); }
  .account-conflict-tag { font-family: var(--font-mono); font-size: 11px; color: var(--a-muted); }

  .account-profile-skeleton { display: flex; flex-direction: column; }
  .account-skeleton-row { min-height: 72px; border-block-end: 1px solid var(--a-rule); }

  /* ── Feedback · a sentence with a rule, never a filled box ────────────── */
  .feedback, .form-feedback { font-size: 15px; line-height: 1.5; color: var(--a-body); max-width: var(--measure-text); }
  .feedback:empty, .form-feedback:empty { display: none; }
  .feedback[data-kind="error"], .form-feedback[data-kind="error"] {
    color: var(--a-error);
    font-weight: 500;
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--a-error);
  }
  .feedback[data-kind="success"], .form-feedback[data-kind="success"] {
    color: var(--a-title);
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--a-accent);
  }

  /* ── Support ────────────────────────────────────────────────────────────── */
  .account-support-detail:empty { display: none; }
  .account-support-thread { display: flex; flex-direction: column; border-block-start: 1px solid var(--a-rule); }
  .account-support-thread > li { display: flex; flex-direction: column; gap: 4px; padding-block: 12px; border-block-end: 1px solid var(--a-rule); }
  .account-support-message { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--a-title); line-height: 1.6; }

  /* ── Signed out: the identity frame, as on Auth's sign-in pages ─────────── */
  /* The IO Patina Account identity design's first screen: context on the left (a
     mono eyebrow, the serif title, the lead, one trust line) beside one action panel
     (1.35 : 1, 80 apart) -- the same columns as Auth's pages (login theme
     platform.css), so going from here to Auth does not move the page. Narrow screens
     stack them and the panel drops its surface. */
  .account-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(32px, 6vw, 80px);
    row-gap: var(--space-4);
    align-items: start;
  }
  .account-split-context { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
  .account-split-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-inline-start: calc(var(--rail-bar) + var(--rail-gap));
  }
  .account-split-rail::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: var(--rail-bar);
    height: 100%;
    min-height: 58px;
    background: var(--a-accent);
  }
  .account-split-rail > .account-intro { font-size: 17px; line-height: 1.7; max-width: 500px; }
  .account-eyebrow {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--a-accent);
  }
  :root:is(:lang(ko), :lang(ja), :lang(zh-Hans), :lang(zh-Hant), :lang(yue-Hant-HK), :lang(ar), :lang(th)) .account-eyebrow { font-size: 12px; letter-spacing: 0; text-transform: none; }
  .account-trust {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0;
    padding-inline-start: calc(var(--rail-bar) + var(--rail-gap));
    max-width: 520px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--a-muted);
  }
  .account-trust .account-icon { flex: none; margin-top: 2px; }
  .account-split-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
  /* The action panel: one surface, a faint edge, the ways in stacked. */
  .account-split-body > .account-entry {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px;
    border: 1px solid var(--a-rule);
    background: color-mix(in oklab, var(--a-ground), var(--a-title) 3%);
  }
  .account-entry-methods { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  /* The way on: 52 high, the label flush left, the icon before it, the arrow pinned
     to the end. */
  .btn.account-entry-way { justify-content: flex-start; gap: 12px; min-height: 52px; padding: 12px 18px; text-align: start; font-size: 15px; letter-spacing: 0; }
  .btn-primary.account-entry-way { font-weight: 600; }
  .account-entry-way .account-arrow { margin-inline-start: auto; flex: none; }
  .btn-secondary.account-entry-way .account-arrow { opacity: 0.45; }
  [dir="rtl"] .account-arrow { transform: scaleX(-1); }
  .account-mark { display: inline-flex; justify-content: center; width: 24px; flex: none; }
  /* A section label and a hairline, never centred. Body colour, not the label tone:
     Stone on the panel's tint measures 4.3:1 on Paper. */
  .account-divider { display: flex; align-items: center; gap: 12px; margin: 0; }
  .account-divider span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a-body); white-space: nowrap; }
  :root:is(:lang(ko), :lang(ja), :lang(zh-Hans), :lang(zh-Hant), :lang(yue-Hant-HK), :lang(ar), :lang(th)) .account-divider span { font-size: 12px; letter-spacing: 0; text-transform: none; }
  .account-divider::after { content: ""; flex: 1; height: 1px; background: var(--a-rule); }
  .account-entry > .account-entry-signup { margin: 0; padding-block-start: 20px; border-block-start: 1px solid var(--a-rule); font-size: 14px; }
  .account-entry-signup a { font-weight: 600; }
  @media (max-width: 959px) {
    .account-split { grid-template-columns: minmax(0, 1fr); }
    .account-split-body { max-width: 480px; }
  }
  @media (max-width: 639px) {
    .account-split-body > .account-entry { padding: 0; border: 0; background: none; }
    .account-trust { padding-inline-start: 0; }
  }

  /* ── Dialog · Paper, a control-weight edge, no shadow ─────────────────── */
  .platform-dialog {
    border: 1px solid var(--a-control);
    background: var(--a-ground);
    color: var(--a-title);
    padding: var(--space-4);
    max-width: 480px;
    width: calc(100vw - 32px);
    box-shadow: none;
    border-radius: 0;
  }
  .platform-dialog::backdrop { background: rgb(15 17 20 / 55%); }
  .platform-dialog h2 { font-size: 20px; color: var(--a-title); margin-block-end: var(--space-2); }
  .platform-dialog p { color: var(--a-body); font-size: 15px; }
  .dialog-buttons { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; margin-block-start: var(--space-4); }

  /* ── Footer · the theme's dark footer ──────────────────────────────────────
     Deep Ink (the page's one dark band), the brand mark reversed, a mono line
     and a plain row of routes. The preference controls are drawn for the dark
     ground they sit on. */
  .account-footer { background: var(--a-footer-bg); color: var(--a-footer-fg); border-block-start: 1px solid var(--a-footer-rule); }
  .account-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }
  .account-footer-brand { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .account-footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
  .account-footer-mark { color: var(--paper); display: inline-flex; }
  .account-footer-lockup { display: block; height: 20px; width: auto; direction: ltr; }
  .account-footer .pref-note { color: var(--dark-label); }
  .account-footer-company { font-family: var(--font-mono); font-size: 12px; color: var(--dark-label); }
  .account-footer-links a { color: var(--dark-body); font-size: 14px; text-decoration-color: rgb(198 196 191 / 45%); }
  .account-footer-links a:hover { color: var(--paper); }
  .account-footer :focus-visible { outline-color: var(--accent-light); }
  .pref-controls { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .account-footer .theme-toggle { display: inline-flex; border: 1px solid var(--dark-border-strong); }
  .account-footer .seg-opt {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 8px 12px;
    border: 0; border-inline-start: 1px solid var(--dark-border-strong);
    background: transparent; color: var(--dark-body);
    font-family: var(--font-ui); font-size: 13px; cursor: pointer;
  }
  .account-footer .seg-opt:first-child { border-inline-start: 0; }
  .account-footer .seg-opt[aria-pressed="true"] { color: var(--paper); text-decoration: underline; text-decoration-color: var(--accent-light); text-decoration-thickness: 2px; text-underline-offset: 6px; box-shadow: none; }
  .account-footer .theme-dot { display: none; }
  .account-footer .pref-select {
    min-height: 44px; padding: 8px 10px;
    border: 1px solid var(--dark-border-strong); border-radius: 0;
    background: var(--a-footer-bg); color: var(--paper);
    font-family: var(--font-ui); font-size: 13px;
  }
  /* The same controls on the page's own ground (Profile › Preferences). */
  .account-main .theme-toggle { display: inline-flex; border: 1px solid var(--a-control); }
  .account-main .seg-opt {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px;
    border: 0; border-inline-start: 1px solid var(--a-control);
    background: transparent; color: var(--a-body); font-family: var(--font-ui); font-size: 14px; cursor: pointer;
  }
  .account-main .seg-opt:first-child { border-inline-start: 0; }
  .account-main .seg-opt[aria-pressed="true"] { color: var(--a-title); text-decoration: underline; text-decoration-color: var(--a-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; box-shadow: none; }
  .account-main .theme-dot { display: none; }
  .account-main .pref-select {
    min-height: 44px; padding: 8px 10px; border: 1px solid var(--a-control); border-radius: 0;
    background: var(--a-ground); color: var(--a-title); font-family: var(--font-ui); font-size: 15px;
  }

  .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a-muted); }

  /* ── Narrow screens ──────────────────────────────────────────────────────
     Below the width where the rail and a readable body fit side by side, the
     navigation becomes one scrolling row under the header; nothing wraps into a
     stack of links above the title. */
  @media (max-width: 960px) {
    .account-stage { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-3) var(--space-5); row-gap: var(--space-3); }
    .account-nav {
      position: static;
      flex-direction: row;
      align-items: center;
      gap: var(--space-3);
      overflow-x: auto;
      scrollbar-width: none;
      white-space: nowrap;
      padding-block-end: 6px;
      border-block-end: 1px solid var(--a-rule);
    }
    .account-nav::-webkit-scrollbar { display: none; }
    /* The group keeps its label on a phone (D-01): a mono word at the head of the
       three links it names, in the same scrolling row. */
    .account-nav-group { flex-direction: row; align-items: center; gap: var(--space-3);
      padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--a-rule); }
    .account-nav-group-label { display: inline-block; padding-block: 0; }
    .account-nav a[aria-current="page"] { text-underline-offset: 9px; }
    .account-field-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .account-field-row > .field-label { padding-block-start: 0; }
    .account-field-action { justify-content: flex-start; }
  }
  /* A phone (D-01, design v2.0 §4.3): no hidden scrolling row. The bar names the
     current screen and links to the overview, whose list reaches every screen. */
  .account-nav a.account-nav-menu-link, .account-overview-menu { display: none; }
  @media (max-width: 640px) {
    .account-nav { overflow-x: visible; flex-wrap: wrap; }
    .account-nav a:not([aria-current="page"]):not(.account-nav-menu-link),
    .account-nav-group-label { display: none; }
    .account-nav-group { border-inline-start: 0; padding-inline-start: 0; }
    .account-nav a.account-nav-menu-link { display: inline-block; }
    .account-overview-menu { display: block; margin-block: var(--space-3); }
    .account-overview-menu a { display: block; padding-block: var(--space-2); min-height: 44px; }
  }
  @media (max-width: 520px) {
    .account-identity { display: none; }
    .account-product { display: none; }
    .account-facts { grid-template-columns: minmax(0, 1fr); }
    .account-facts dt { border-block-end: 0; padding-block-end: 0; }
    .account-conflict-values { grid-template-columns: minmax(0, 1fr); }
    .account-footer-inner { align-items: flex-start; flex-direction: column; }
    .account-footer-mark, .account-footer-mark .account-footer-lockup { max-width: 100%; }
  }
}