/*! frb-account.css — the codefolio treatment for the two account workbenches.
 *
 * profile.html and dev_profile.html are built from the same vocabulary —
 * .app-grid, .app-card, .tile-wide, .section-divider, .card-title — so the
 * treatment is written once here rather than pasted into two <style> blocks.
 * Same reasoning as frb-auth.css across its six pages and frb-legal.css across
 * its two, and the same reason this pass exists at all.
 *
 * SCOPED UNDER body.frb-account, WHICH IS NOT OPTIONAL. Those class names are
 * not these two pages' property: .app-card and .app-grid are the shared tile
 * vocabulary that 28 pages use, including portals and every section hub. An
 * unscoped `.app-card { border-radius: 0 }` here would square every tile in the
 * product from a sheet named after the account pages. The marker class on
 * <body> is what keeps this treatment to the two files it was written for.
 *
 * These two are WORKBENCHES, not documents. Everything on them is a control
 * somebody came to operate: fields to edit, swatches to pick, a ledger to read
 * down. So this takes the type and the geometry and leaves the affordances
 * alone — inputs stay inputs, the tiles keep their own internal spacing, and
 * nothing here changes what a control does or how big it is to hit.
 */

/* ── the page's own voice ─────────────────────────────────────────────────── */
/* `.module-header > div > h1` because neither page's title carries a class:
   both are a bare <h1 class="fw-bold mb-1 display-5"> inside .module-header,
   which is also one of the five blocks frb-compat.css reaches its own bare-h1
   rule into. Matching the structure is what makes this land on the element
   that is actually there, rather than on a .page-title neither file has. */
body.frb-account .module-header h1,
body.frb-account .page-title,
body.frb-account .header-title {
    font-family: var(--frb-ed-display, 'Syne', 'Outfit', sans-serif);
    /* These two rendered at 40px and weight 700 — Bootstrap's .display-5 and
       the compat app-title rule between them — against 48 and 800 everywhere
       else. The tier decides now. */
    font-size: var(--frb-ed-title);
    font-weight: var(--frb-ed-title-weight);
    letter-spacing: var(--frb-ed-title-tracking);
    line-height: var(--frb-ed-title-leading);
}
/* The accent word, the same construction every page title in the product now
   uses: the name in the heading's own text and one word after it in the serif
   italic. The crumb for these two comes from the ACCOUNT table in
   frb-app-shell.js, not from this heading, so splitting it costs nothing. */
body.frb-account .module-header h1 em,
body.frb-account .page-title em,
body.frb-account .header-title em {
    font-family: var(--frb-ed-serif, Georgia, 'Times New Roman', serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--frb-ed-accent-size);
    /* letter-spacing: normal — the accent must NOT inherit the display face's
   tracking. --frb-ed-title-tracking is -.04em, which is right for Syne at 50px
   and wrong for a serif italic: at that size it pulls two glyphs together by
   2px each, and Instrument Serif's swash ampersand is the worst case — "&
   updates." and "& settings." closed up into "&updates." and "&settings."
   while "policy." and "system." merely looked cramped. A display face is
   tracked tight because its counters are open; a serif italic is drawn to fit
   at its natural metrics. */
    letter-spacing: normal;
    color: var(--accent-text, var(--accent-primary));
}

body.frb-account .module-header h1 + div,
body.frb-account .page-sub,
body.frb-account .header-subtitle {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 12.5px;
    line-height: 1.75;
}

/* ── the section dividers ─────────────────────────────────────────────────── */
/* These ARE a sequence — a reader works down the page through Identity, then
   Appearance, then Data, then Danger — so unlike the analytics dashboard and
   the notification stream, numbering them says something true. The counter
   does it, so the numerals cannot drift out of step with the order above them. */
/* THE SHAPE IS home.html's .ed-sec-head, built out of the markup that is
   already here. That markup is a flex row of [text][count][line], reordered
   once before so the label leads; the editorial head puts the NUMERAL at the
   margin, runs the rule out from it, and lands the title at the right edge —
   so the order becomes [01] ———— [Title] [chip] and nothing in the HTML has to
   move. The rule is the connector rather than a trailing decoration.

   The numeral is a counter, so it cannot drift out of step with the order of
   the sections above it, and the pages generate these dividers in three
   places where a hand-written number would have to be threaded through. */
body.frb-account { counter-reset: frbacct; }
body.frb-account .section-divider {
    gap: 18px;
    align-items: baseline;
}
body.frb-account .section-divider::before {
    counter-increment: frbacct;
    content: counter(frbacct, decimal-leading-zero);
    order: 0;
    flex: none;
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: .15em;
    color: var(--text-secondary);
}
body.frb-account .section-divider-line { order: 1; align-self: center; }
body.frb-account .section-divider-text {
    order: 2;
    font-family: var(--frb-ed-display, 'Syne', 'Outfit', sans-serif);
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: none;
    color: var(--text-primary);
    /* nowrap at 25px with 5px of tracking is what used to push this page 90px
       past a 390px viewport; the head wraps now and the rule takes up the slack. */
    white-space: normal;
}
body.frb-account .section-divider-count {
    order: 3;
    flex: none;
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-text, var(--accent-primary));
    border: 1px solid var(--glass-border-color, rgba(127,127,127,.18));
    border-radius: 0;
    padding: 5px 10px;
    background: none;
}
@media (max-width: 620px) {
    /* The rule has nothing useful to do once the head is two lines on a phone. */
    body.frb-account .section-divider { flex-wrap: wrap; gap: 10px; }
    body.frb-account .section-divider-line { display: none; }
    body.frb-account .section-divider-text { font-size: 1.3rem; }
}

/* ── the tiles ────────────────────────────────────────────────────────────── */
/* Square, and titled in the display face. NOT welded into one object with a
   shared 1px edge, which is what the analytics KPI strip and the notification
   counters got: those are readings of one thing and belong together, while
   these are independent panels a reader moves between — "Header framing" has
   nothing to do with "Operator Identity" and a shared edge would claim it did. */
body.frb-account .app-card {
    border-radius: 0;
}
body.frb-account .card-title {
    font-family: var(--frb-ed-display, 'Syne', 'Outfit', sans-serif);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.02em;
}
/* The label/value rows, the hints and the notes — the reading matter between
   the controls. */
body.frb-account .app-card .text-secondary,
body.frb-account .app-card .info-label,
body.frb-account .app-card .field-label,
body.frb-account .app-card label,
body.frb-account .app-card small,
body.frb-account .app-card p {
    font-family: var(--frb-ed-mono, 'JetBrains Mono', ui-monospace, monospace);
    line-height: 1.7;
}
/* A label that names a field takes the eyebrow treatment; the value beside it
   stays in the product face so the two do not read as the same kind of thing. */
body.frb-account .app-card .info-label,
body.frb-account .app-card .field-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--text-secondary);
}

/* ── the controls ─────────────────────────────────────────────────────────── */
/* Through the published tokens rather than by selector: frb-compat.css owns
   field and button shape across 614 fields and loads after this sheet, so a
   rule here would lose to it anyway. Setting the custom properties on <body>
   is enough — they inherit — and it leaves both escape hatches working. */
body.frb-account {
    --frb-field-radius: 0px;
    --frb-label-tracking: .18em;
}
/* Not the avatar, and not the icon chips. A mark is round because it is a mark;
   a blanket rule would flatten those along with everything else. */
body.frb-account .app-icon,
body.frb-account .profile-avatar,
body.frb-account .avatar,
body.frb-account [class*="avatar"] {
    border-radius: var(--frb-radius-circle, 50%);
}