@import url('tokens.css');

/* ============================================================================
   Account (Template A) and Users (Template B) pages — identity chip, station/user
   rows, badges, the sign-in pending progress bar, the access gate, the reach strip,
   the Users column and its detail panels, the role-editor permission grid. The
   acct-* classes are shared by the Account page (cloud), the Users page (station
   access, ADR 0029) and their editor dialog components, so they live here (the cn-*
   pattern), not in per-component isolation. Every value resolves through var(--…).
   ============================================================================ */

/* Identity chip (signed-in card) + user-row avatar. */
.acct-identity { display: flex; align-items: flex-start; gap: var(--space-4); }

.acct-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.acct-avatar-sm { width: 34px; height: 34px; }
.acct-avatar-glyph { color: var(--color-on-accent); }
.acct-name { font-size: var(--font-size-card-title); }
.acct-email { margin-top: var(--space-1); }

/* Connection plate (signed-in card) — the page's focal card. The leading-edge state bar is an inset
   box-shadow layered on the card shadow, so it never disturbs the card radius the way a real border
   would: green when the station is bonded and online, amber when it is running offline on the saved
   sign-in. Connection HEALTH reads before the identity does. */
.acct-plate.is-online  { box-shadow: var(--shadow-card), inset 3px 0 0 var(--color-success); }
.acct-plate.is-offline { box-shadow: var(--shadow-card), inset 3px 0 0 var(--color-caution); }

/* On the plate the identity row centres so the trailing Sign out (Settings/Users trailing-action
   idiom) sits against the avatar+name block; the text column grows and the action holds its width. */
.acct-plate .acct-identity { align-items: center; }
.acct-identity-text { flex: 1 1 auto; min-width: 0; }
.acct-identity-action { flex: 0 0 auto; }

/* Two trailing verbs (switch user / sign out) keep the same trailing-action column, spaced so
   neither is mis-clicked for the other. */
.acct-identity-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Connection-details error expander. */
.acct-error-details {
    margin: 0 0 var(--space-4) var(--space-1);
    font-size: var(--font-size-description);
    color: var(--color-text-secondary);
}

.acct-error-details > summary { cursor: pointer; padding: var(--space-2) 0; }
.acct-error { color: var(--color-critical); }

/* Browser-flow-pending indeterminate progress bar. */
.acct-progress {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-neutral-bg);
    overflow: hidden;
}

.acct-progress-bar {
    display: block;
    height: 100%;
    width: 35%;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    animation: acct-indeterminate 1.3s ease-in-out infinite;
}

@keyframes acct-indeterminate {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
}

/* Subscription lines + stations list. */
.acct-sub-line { margin: var(--space-2) 0 0; }
.acct-stations-head { font-size: var(--font-size-small); }

/* ---- License-seat gauge — the subscription card's focal datum (the page's one aesthetic risk).
   Capacity is NOT operational state, so it is drawn in the brand ACCENT, never the reserved
   green/amber/red that signal health (docs/brand/brand.md): used seats fill accent, free seats stay a
   recessed neutral well. The readout carries the exact count at the readout scale, in tabular figures
   so the digits don't jitter as seats come and go. ---- */
.acct-seats { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); }
.acct-seats-main { flex: 1 1 auto; min-width: 0; }
.acct-seats-label { margin-bottom: var(--space-3); }

.acct-seat-track { display: flex; gap: 5px; height: 12px; }

/* Continuous variant (larger plans): one recessed well with a proportional accent fill. */
.acct-seat-track:not(.is-discrete) {
    background: var(--color-surface-alt);
    box-shadow: inset 0 0 0 1px var(--color-stroke);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.acct-seat-fill { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-sm); }

/* Discrete variant: one cell per purchased seat, filled accent up to the used count. */
.acct-seat {
    flex: 1 1 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    box-shadow: inset 0 0 0 1px var(--color-stroke);
}
.acct-seat.used { background: var(--color-accent); box-shadow: none; }

.acct-seats-readout { flex: 0 0 auto; text-align: right; }
.acct-seats-number {
    font-size: var(--font-size-readout);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1;
}
.acct-seats-total { margin-left: var(--space-2); color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
.acct-seats-readout .field-description { margin-top: var(--space-1); }
/* Over-limit caption: a warning STATE (excess stations run unlicensed), so caution is correct here —
   the capacity bar itself stays accent. Scoped selector wins the colour over .field-description. */
.acct-seats-readout .acct-seats-over { color: var(--color-caution); }

/* ---- Stations roster — the signed-in stations, listed. A plain Fluent list row; this station's row is
   marked the Fluent way — a subtle NEUTRAL fill (the recessed well surface), not a colour wash — and
   keeps its badge. ---- */
.acct-stations { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }

.acct-station-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
}
.acct-station-row.is-self { background: var(--color-surface-alt); }

.acct-station-glyph { color: var(--color-text-secondary); }
.acct-station-name { font-size: var(--font-size-small); color: var(--color-text); }
.acct-station-seen { margin-left: auto; }
.acct-as-of { margin-top: var(--space-4); font-style: italic; }

/* Badges (This station / You / Primary administrator). */
.acct-badge {
    font-size: var(--font-size-eyebrow);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    line-height: 1.4;
    white-space: nowrap;
}

.acct-badge-accent {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.acct-badge-outline {
    border: 1px solid var(--color-stroke);
    color: var(--color-text-secondary);
}

/* ---- Integrator public profile (ADR 0016) — the compact read-only line under the Integrator ID
   field: the integrator's current public contact, fetched from the site and cached locally. A quiet
   inset row (the recessed well surface), never a focal card — the free-text contact above stays the
   primary support datum; this only enriches it when an id resolves. ---- */
.acct-integrator { margin-top: var(--space-3); }

.acct-integrator-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.acct-integrator-name {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.acct-integrator-contact {
    font-size: var(--font-size-description);
    color: var(--color-text-secondary);
}

/* Website opener — a quiet accent text link (a real button, for keyboard/AT), the external-link
   glyph carrying the "opens in the browser" cue like the page's other site links. */
.acct-integrator-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-accent);
    font-size: var(--font-size-description);
    cursor: pointer;
}

.acct-integrator-link:hover { text-decoration: underline; }

/* Local-users cards: eyebrow + header row. */
.acct-card-eyebrow { margin-bottom: var(--space-3); }
.acct-card-head { gap: var(--space-4); }

/* User / role list rows (clickable). */
.acct-list { display: flex; flex-direction: column; gap: var(--space-1); }

.acct-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    text-align: left;
    padding: var(--space-3);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
}

/* The wash layers over the row's own fill, so a row that carries one (.acct-row-fixed) keeps it. */
.acct-row:hover {
    background-image: linear-gradient(var(--color-overlay-hover), var(--color-overlay-hover));
}
.acct-row-main { flex: 1 1 auto; min-width: 0; }
/* Name + its badges. They wrap rather than push each other out of a narrow detail column: a badge
   is the row's mark, and a mark cut in half is worse than a mark on the next line. */
.acct-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.acct-row-trail { flex: 0 0 auto; }

/* The two fixed rows pinned above the editable roles ("Not signed in", then Admin) — marked the
   Fluent way with a subtle neutral fill (the recessed well), not a colour wash. Reuses the
   .acct-station-row .is-self idiom. Each one's glyph reads before the name. */
.acct-row-fixed { background: var(--color-surface-alt); }
.acct-row-glyph { flex: 0 0 auto; color: var(--color-text-secondary); }

/* A row that only reads (a role's holders): the list row's shape without the command affordance. */
.acct-row-plain { cursor: default; }
.acct-row-plain:hover { background-image: none; }

/* Non-admin notice card. */
.acct-notice { flex-wrap: nowrap; align-items: center; }
.acct-notice-glyph { color: var(--color-text-secondary); }
.acct-notice-text { max-width: 560px; }

/* ---- Users column (Template B) — the three roots and their rows. The column IS the page's
   navigation, so a root reads as a heading; a leaf's quiet trail is capped so a long role name
   never pushes the name it belongs to out of the pane. ---- */
.acct-tree-root { font-weight: var(--font-weight-semibold); }

.acct-tree-trail {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A row that trails its reach strip keeps the strip whole — the name beside it is what gives way,
   because a half-drawn silhouette would read as a different role. */
.ui-tree-rowline .acct-reach { flex: 0 0 auto; }

/* ---- Users detail panels — the measure between a card's lead-in and the body it introduces.
   The cards themselves are the shared surface; only these gaps are the page's own. ---- */

/* The detail column as one column: the selection's panels, then the reach ruler settled at its foot.
   The stack claims the whole visible height and the panels absorb the slack, which puts the ruler on
   the floor of a short selection and keeps its measure above a tall one — and never shrinks the
   panels, so a long roster scrolls the column instead of being squeezed into it. */
.acct-detail-stack {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.acct-detail-panels { flex: 1 0 auto; min-width: 0; }

.acct-bootstrap-text { margin-top: var(--space-2); }
.acct-bootstrap-action { margin-top: var(--space-4); }
.acct-detail-list { margin-top: var(--space-3); }
.acct-detail-note { margin-top: var(--space-4); }
.acct-detail-reach { margin-top: var(--space-5); }

/* A field the panel edits, set off from the reading above it and from the field before it — the one
   measure these panels need now that they are where a user and a role are changed. */
.acct-detail-field { margin-top: var(--space-4); }

/* Held read-only, the reason is a band above the panel and the surface under it lays its children
   out as if it were not there, so the card that follows the surface has no card before it to take
   its measure from. Both gaps are named here: the shared surface has no opinion about the page it
   is used on. */
.acct-detail-panels .engineering-readonly-reason { margin-bottom: var(--space-4); }
.acct-detail-panels .engineering-readonly-surface + .ui-card { margin-top: var(--space-4); }

/* A credential is a command, not a field that saves itself: the box and the word that applies it sit
   on one line, and the line wraps rather than squeezing the button in a narrow column. */
.acct-pin-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.acct-pin-input { max-width: 180px; }

/* Each area is a delimited section: a rule + breathing room set it off (the first one from the card's
   lead-in, the rest from each other), its switch rows indent under the header, and within a section
   spacing (not per-row hairlines) separates them — so the grid reads as a few grouped areas, not one
   long uniform list. */
.acct-perm-group {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-stroke-subtle);
    margin-bottom: 0;
}
.acct-perm-group .ui-setting-row { padding-left: var(--space-7); }
.acct-perm-group .ui-setting-row + .ui-setting-row { border-top: none; }

/* ---- The live reach readout — the Roles-list signature, carried into the detail panel as the last
   thing the identity card says: the number the mask adds up to, over the strip it draws. It reads
   the switch state below and re-forms as those switches are flipped; it never edits, because System
   mixes independent bits and a pip cannot map back to one switch. ---- */
.acct-role-mast-read { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.acct-role-mast-num {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Area header for each permission group: the area's glyph + name, with a quiet on/total count. */
.acct-perm-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.acct-perm-glyph { flex: 0 0 auto; color: var(--color-accent); }
.acct-perm-name { flex: 0 0 auto; font-size: var(--font-size-card-title); }
.acct-perm-count { margin-left: auto; }

/* "Required" — a locked-on prerequisite (a deeper capability needs it), so the switch is fixed on
   rather than a dead toggle with no reason. */
.acct-perm-req { font-size: var(--font-size-eyebrow); color: var(--color-text-secondary); white-space: nowrap; }

/* ---- Reach strip (ReachStrip) — the Users-page signature. A rank of signal-strength pips, one per
   station area: an empty well = no access, then view / operate / manage climb the pip. Capacity, so
   the fill is the brand ACCENT — never the reserved green/amber/red that signal state
   (docs/brand/brand.md). A role's silhouette reads as its power at a glance. The pip metrics are a
   bespoke gauge glyph (raw px, like the seat gauge), not themed literals. ---- */
.acct-reach { display: flex; align-items: flex-end; gap: 3px; height: 16px; }

.acct-reach-pip {
    width: 5px;
    height: 16px;
    border-radius: 1.5px;
    background: var(--color-surface-alt);
    box-shadow: inset 0 0 0 1px var(--color-stroke);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.acct-reach-pip > i { display: block; width: 100%; background: var(--color-accent); border-radius: 1.5px; }

/* The four rungs: none / view / operate / manage. */
.acct-reach-l0 > i { height: 0; }
.acct-reach-l1 > i { height: 31%; }
.acct-reach-l2 > i { height: 63%; }
.acct-reach-l3 > i { height: 100%; }

/* Labeled form (a detail panel's reading): each pip names its area beneath it — the strip carries its
   own axis where there is room, so the compact row strips read wordlessly. */
.acct-reach-labeled { height: auto; align-items: flex-start; gap: var(--space-5); }
.acct-reach-area { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.acct-reach-name { font-size: var(--font-size-eyebrow); color: var(--color-text-secondary); white-space: nowrap; }

/* ---- The reach ruler (ReachRulerLegend) — the four heights a pip stands at, named once for the
   whole page. Everywhere else the strip is read wordlessly, which only works if it is taught
   somewhere, and the strip appears on more than one detail — so the legend is a band at the FOOT of
   the detail column, in force whichever node is open. A band and not a card: it sits on the column's
   own well surface, under a hairline, so it explains the page from outside instead of competing with
   the panels laid on it. ---- */
.acct-ruler {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-stroke-subtle);
}

/* The band's own measure: its name, then the four samples, then the sentence — which is the piece
   that gives way first, wrapping to its own line in a narrow column. */
.acct-ruler-title { flex: 0 0 auto; }
.acct-ruler-rungs {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
}
.acct-ruler-rung { display: flex; align-items: center; gap: var(--space-2); }
.acct-ruler-note { flex: 1 1 260px; min-width: 0; }

/* ---- Signed in now (SignedInPanel) — the live identity the page leads with. The signed-in
   case reuses the identity row wholesale; only the signed-out invite needs measure of its own. ---- */
.acct-signin-head { align-items: center; }
.acct-signin-text { margin-top: var(--space-3); max-width: 640px; }