/*
  The platform stylesheet. Idea Forge design language, S138. Tokens only, no literals: not a
  colour, not a dimension, not a duration. FSE.md section 9: each module ships exactly one
  stylesheet, loaded after the design system files. This is the platform's, and it replaces the
  S087 sheet outright rather than sitting beside it.

  What the handoff states, this sheet composes: Public Sans for the interface at 14px on 1.55,
  Spectral for headings, IBM Plex Mono for labels, metadata and eyebrows at 13px/500 with .04em
  tracking, sentence case and never all-caps; cards on the panel surface with an 8px radius that
  lift 2px on a deeper shadow at 180ms; buttons with a 6px radius that lift 1px and press 1px at
  120ms; the classification bar on its own tokens in 10px mono; a 236px sidebar with a 2px active
  edge and the accent tint behind the current entry. The faces are named first in each stack and
  the system stack stands behind them: see FSE_STATE.md S138 for what was vendored and what was not.
*/

/* ---------------------------------------------------------------------------
   Ground, type, links
   --------------------------------------------------------------------------- */

html {
    background: var(--axm-bg);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--axm-bg);
    color: var(--axm-ink);
    font-family: var(--axm-font-ui);
    font-size: var(--axm-fs-body);
    line-height: var(--axm-lh-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--axm-space-3);
    font-family: var(--axm-font-display);
    font-weight: var(--axm-fw-regular);
    line-height: var(--axm-lh-heading);
    letter-spacing: var(--axm-ls-heading);
    color: var(--axm-ink);
}

h1 { font-size: var(--axm-fs-heading); }
h2 { font-size: var(--axm-fs-title); font-weight: var(--axm-fw-semibold); }
h3 { font-size: var(--axm-fs-body-lg); font-weight: var(--axm-fw-semibold); font-family: var(--axm-font-ui); letter-spacing: 0; }
h4 { font-size: var(--axm-fs-body); font-weight: var(--axm-fw-semibold); font-family: var(--axm-font-ui); letter-spacing: 0; }

p { margin: 0 0 var(--axm-space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--axm-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: var(--axm-edge-w) solid var(--axm-link);
    outline-offset: var(--axm-edge-w);
}

/* ---------------------------------------------------------------------------
   Text roles
   --------------------------------------------------------------------------- */

/* Muted at 13px on --axm-mut, the darkest muted tone, because the handoff's --axm-mut2 and
   --axm-mut3 fall under 4.5:1 at and below 13px. */
.axos-muted { color: var(--axm-mut); font-size: var(--axm-fs-small); }

/* Metadata and values: IBM Plex Mono at the eyebrow size and weight. */
.axos-mono {
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    font-weight: var(--axm-fw-medium);
    letter-spacing: var(--axm-ls-eyebrow);
}

/* An eyebrow: a label above a thing. Sentence case by requirement; nothing here transforms case. */
.axos-eyebrow {
    display: block;
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    font-weight: var(--axm-fw-medium);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-mut);
}

/* Verbatim text with the newlines its source carries: a transcribed standard's discussion. S082. */
.axos-prewrap { white-space: pre-wrap; line-height: var(--axm-lh-body-lg); }

.axos-held { font-weight: var(--axm-fw-semibold); }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.axos-card {
    background: var(--axm-panel);
    border: var(--axm-line-w) solid var(--axm-line);
    border-radius: var(--axm-radius-card);
    padding: var(--axm-card-pad) var(--axm-card-pad-lg);
    margin-bottom: var(--axm-gap);
    box-shadow: var(--axm-sh1);
    transition: transform var(--axm-card-motion) var(--axm-ease), box-shadow var(--axm-card-motion) var(--axm-ease);
}

.axos-card:hover {
    transform: translateY(var(--axm-card-lift));
    box-shadow: var(--axm-sh2);
}

.axos-card > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.axos-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--axm-space-3);
}

.axos-table th,
.axos-table td {
    text-align: left;
    vertical-align: top;
    padding: var(--axm-space-2) var(--axm-space-3);
    border-bottom: var(--axm-line-w) solid var(--axm-line2);
}

.axos-table th {
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    font-weight: var(--axm-fw-medium);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-mut);
}

.axos-table tbody tr:hover,
.axos-table tr:hover { background: var(--axm-hover); }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

label {
    display: block;
    margin-bottom: var(--axm-space-1);
    font-size: var(--axm-fs-small);
    font-weight: var(--axm-fw-medium);
    color: var(--axm-ink2);
}

.axos-input,
select,
textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--axm-column-w);
    margin-bottom: var(--axm-space-3);
    padding: var(--axm-space-2) var(--axm-space-3);
    border: var(--axm-line-w) solid var(--axm-line);
    border-radius: var(--axm-radius-control);
    background: var(--axm-panel);
    color: var(--axm-ink);
    font: inherit;
    line-height: var(--axm-lh-body);
}

.axos-input:focus,
select:focus,
textarea:focus {
    outline: var(--axm-edge-w) solid var(--axm-link);
    outline-offset: var(--axm-line-w);
    border-color: var(--axm-a2);
}

textarea { min-height: calc(var(--axm-fs-body) * var(--axm-lh-body) * 4); resize: vertical; }

.axos-submit,
.axos-signout {
    display: inline-block;
    padding: var(--axm-space-2) var(--axm-space-4);
    border: 0;
    border-radius: var(--axm-radius-control);
    background: var(--axm-brand);
    color: var(--axm-onA);
    font: inherit;
    font-weight: var(--axm-fw-medium);
    line-height: var(--axm-lh-body);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--axm-button-motion) var(--axm-ease), background var(--axm-button-motion) var(--axm-ease);
}

.axos-submit:hover,
.axos-signout:hover { background: var(--axm-a1); text-decoration: none; transform: translateY(var(--axm-button-lift)); }
.axos-submit:active,
.axos-signout:active { transform: translateY(var(--axm-button-press)); }

/*
   A form in a card, S145: a two-column grid, each label beside its control, one row per field,
   so a four-field form is four short rows rather than a page. Measured before the change at
   1600 wide: the grants page's four-field form 472 tall in a 546 card, the campaigns page's
   five-field form 477, the audit page's seven-field form 601. The pages write fields in two
   shapes and both are one shape here: a field wrapped in a paragraph renders its contents as
   grid items and its line break disappears; a bare label followed by its control is already two
   items. Anything else a form holds, the validation summary, a note, the button, a link, spans
   both columns. A form inside a table cell is not a form in a card and keeps its own shape.
*/

.axos-card > form {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--axm-space-4);
    row-gap: var(--axm-space-2);
    align-items: center;
}

.axos-card > form > p:has(> .axos-input),
.axos-card > form > p:has(> select),
.axos-card > form > p:has(> textarea),
.axos-card > form > p:has(> input:not([type="hidden"])) { display: contents; }

.axos-card > form > p > br { display: none; }

.axos-card > form > div,
.axos-card > form > p,
.axos-card > form > fieldset,
.axos-card > form > button,
.axos-card > form > a { grid-column: 1 / -1; }

.axos-card > form > .axos-submit { justify-self: start; }

.axos-card > form label { margin-bottom: 0; }

.axos-card > form .axos-input,
.axos-card > form select,
.axos-card > form textarea { margin-bottom: 0; }

.axos-card > form label:has(+ textarea) { align-self: start; padding-top: var(--axm-space-2); }

/* ---------------------------------------------------------------------------
   The entry page, on the bare layout. The handoff's sign-in: a centred column on the dark
   radial ground, the Axiom Space mark above the card, the card on the panel surface with its
   right-weighted shadow, the Axos wordmark and the ways in inside it.
   --------------------------------------------------------------------------- */

body.axos-bare {
    display: grid;
    place-items: center;
    padding: var(--axm-space-6) var(--axm-page-pad-x);
    box-sizing: border-box;
    background: radial-gradient(circle at top, var(--axm-signin-g1), var(--axm-signin-g2), var(--axm-signin-g3));
    color: var(--axm-signin-ink);
}

.axos-entry {
    width: min(var(--axm-column-w), 100%);
    text-align: center;
}

.axos-entry__parent-mark {
    display: block;
    height: var(--axm-signin-logo-h);
    width: auto;
    margin: 0 auto var(--axm-signin-logo-gap);
}

.axos-entry__card {
    background: linear-gradient(90deg, var(--axm-signin-card), var(--axm-signin-card-edge));
    border-radius: var(--axm-radius-card);
    padding: var(--axm-signin-pad-y) var(--axm-signin-pad-x);
    box-shadow: var(--axm-sh-signin);
    color: var(--axm-signin-ink);
}

/* The wordmark scales with the column and stops growing before it dominates. */
.axos-entry__mark {
    display: block;
    width: min(var(--axm-column-w), 60%);
    margin: 0 auto var(--axm-space-5);
    color: var(--axm-signin-ink);
}

.axos-entry__title {
    margin-bottom: var(--axm-space-2);
    font-size: var(--axm-fs-display);
    font-weight: var(--axm-fw-regular);
}

.axos-entry__sub {
    margin-bottom: var(--axm-space-6);
    color: var(--axm-signin-mut);
    font-size: var(--axm-fs-small);
}

.axos-entry__ways {
    display: flex;
    flex-direction: column;
    gap: var(--axm-space-3);
}

/* The sign-in button as the handoff sets it: full width, 46px, uppercase mono at .18em on the
   mark colour. The one uppercase treatment in the design, and it is the handoff's own. */
.axos-entry__way {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--axm-signin-button-h);
    box-sizing: border-box;
    padding: 0 var(--axm-space-4);
    border: var(--axm-line-w) solid var(--axm-signin-button);
    border-radius: var(--axm-radius-control);
    background: var(--axm-signin-button);
    color: var(--axm-signin-button-ink);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-meta);
    letter-spacing: var(--axm-ls-button);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--axm-button-motion) var(--axm-ease), background var(--axm-button-motion) var(--axm-ease);
}

.axos-entry__way:hover { background: var(--axm-signin-button-hover); border-color: var(--axm-signin-button-hover); text-decoration: none; transform: translateY(var(--axm-button-lift)); }
.axos-entry__way:active { transform: translateY(var(--axm-button-press)); }

.axos-entry__way--secondary {
    background: transparent;
    color: var(--axm-signin-ink);
    border-color: var(--axm-signin-tile-line);
    border-style: dashed;
}

.axos-entry__way--secondary:hover { background: var(--axm-signin-card-edge); color: var(--axm-signin-ink); border-color: var(--axm-signin-button-hover); }

.axos-entry__note {
    margin: var(--axm-space-2) 0 0;
    font-size: var(--axm-fs-small);
    color: var(--axm-signin-mut);
    text-align: left;
}

/* The role picker on the entry page. Debug-only surface; see DevEntry. */
.axos-entry__label {
    display: block;
    margin: var(--axm-space-3) 0 var(--axm-space-1);
    text-align: left;
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    font-weight: var(--axm-fw-medium);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-signin-mut);
}

.axos-entry__select {
    display: block;
    width: 100%;
    max-width: none;
    background: var(--axm-signin-card);
    color: var(--axm-signin-ink);
    border-color: var(--axm-signin-tile-line);
}

.axos-entry__foot {
    margin-top: var(--axm-space-5);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-micro);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-signin-foot);
}

/* ---------------------------------------------------------------------------
   The platform shell. S088, restyled S138. Classification bar, sidebar, header strip, content
   column, sidebar footer. Every colour is a token and every size is a token.
   --------------------------------------------------------------------------- */

.axos-bar {
    display: flex;
    align-items: center;
    gap: var(--axm-space-2);
    padding: var(--axm-space-1) var(--axm-page-pad-x);
    background: var(--axm-classBg);
    color: var(--axm-classInk);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-micro);
    letter-spacing: var(--axm-ls-eyebrow);
}

.axos-bar-marking { font-weight: var(--axm-fw-medium); }
.axos-bar-marking--controlled { border-bottom: var(--axm-edge-w) solid var(--axm-verdict-red); }

.axos-frame {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.axos-rail {
    box-sizing: border-box;
    width: var(--axm-sidebar-w);
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--axm-space-4) var(--axm-space-3);
    background: var(--axm-panel);
    border-right: var(--axm-line-w) solid var(--axm-line);
}

.axos-rail-brand {
    display: flex;
    align-items: center;
    gap: var(--axm-space-2);
    padding: var(--axm-space-2);
    margin-bottom: var(--axm-space-4);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-wordmark);
    font-weight: var(--axm-fw-semibold);
    color: var(--axm-ink);
    text-decoration: none;
}

.axos-rail-brand:hover { text-decoration: none; }

/* The mark on its gradient tile, the handoff's sidebar tile. */
.axos-rail-brand img {
    box-sizing: border-box;
    width: calc(var(--axm-mark-size) + var(--axm-space-2));
    height: calc(var(--axm-mark-size) + var(--axm-space-2));
    padding: var(--axm-space-1);
    border-radius: var(--axm-radius-control);
    background: linear-gradient(140deg, var(--axm-mark), var(--axm-a1));
}

.axos-rail-back {
    display: block;
    padding: var(--axm-space-1) var(--axm-space-2);
    font-size: var(--axm-fs-small);
    color: var(--axm-mut);
}

.axos-rail-module {
    padding: var(--axm-space-1) var(--axm-space-2);
    margin-bottom: var(--axm-space-2);
    font-family: var(--axm-font-display);
    font-size: var(--axm-fs-title);
    font-weight: var(--axm-fw-semibold);
    line-height: var(--axm-lh-heading);
    color: var(--axm-ink);
}

/* Group headings are eyebrows: mono, 13px, sentence case. */
.axos-rail-heading {
    padding: var(--axm-space-4) var(--axm-space-2) var(--axm-space-1);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    font-weight: var(--axm-fw-medium);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-mut);
}

.axos-rail-list { list-style: none; margin: 0; padding: 0; }

.axos-rail-entry {
    display: flex;
    align-items: baseline;
    gap: var(--axm-space-2);
    padding: var(--axm-space-2) var(--axm-space-3);
    border-left: var(--axm-edge-w) solid transparent;
    border-radius: 0 var(--axm-radius-control) var(--axm-radius-control) 0;
    font-size: var(--axm-fs-body);
    color: var(--axm-ink2);
    text-decoration: none;
}

.axos-rail-entry:hover { background: var(--axm-hover); color: var(--axm-ink); text-decoration: none; }

.axos-rail-entry--current,
.axos-rail-entry--current:hover {
    border-left-color: var(--axm-brand);
    background: var(--axm-aTint);
    color: var(--axm-brand);
    font-weight: var(--axm-fw-medium);
}

.axos-rail-number {
    min-width: calc(var(--axm-space-4) + var(--axm-space-1));
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-meta);
    color: var(--axm-mut);
}

.axos-rail-footer {
    margin-top: auto;
    padding: var(--axm-space-4) var(--axm-space-2) 0;
    border-top: var(--axm-line-w) solid var(--axm-line);
    font-size: var(--axm-fs-small);
}

.axos-rail-actor { color: var(--axm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axos-rail-capacity { color: var(--axm-mut); margin-bottom: var(--axm-space-2); }

.axos-rail-signout {
    padding: var(--axm-space-1) var(--axm-space-3);
    border: var(--axm-line-w) solid var(--axm-line);
    border-radius: var(--axm-radius-control);
    background: transparent;
    color: var(--axm-ink2);
    font: inherit;
    font-size: var(--axm-fs-small);
    cursor: pointer;
    transition: transform var(--axm-button-motion) var(--axm-ease), border-color var(--axm-button-motion) var(--axm-ease);
}

.axos-rail-signout:hover { border-color: var(--axm-brand); color: var(--axm-brand); transform: translateY(var(--axm-button-lift)); }
.axos-rail-signout:active { transform: translateY(var(--axm-button-press)); }

.axos-column { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.axos-strip {
    display: flex;
    align-items: center;
    padding: var(--axm-space-3) var(--axm-page-pad-x);
    background: var(--axm-panel);
    border-bottom: var(--axm-line-w) solid var(--axm-line);
}

.axos-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--axm-space-2);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    font-weight: var(--axm-fw-medium);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-mut);
}

.axos-crumbs a { color: var(--axm-link); }
.axos-crumb-current { color: var(--axm-ink); }

.axos-main {
    flex: 1 1 auto;
    padding: var(--axm-page-pad-top) var(--axm-page-pad-x) var(--axm-page-pad-bottom);
}

/* ---------------------------------------------------------------------------
   The theme toggle, in the strip, S139. A secondary control: mono eyebrow on the panel with the
   line as its edge, the tint on hover, the same lift and press as every button. It offers the
   other theme by name and posts it; the cookie it sets is what both layouts read.
   --------------------------------------------------------------------------- */

.axos-theme { margin-left: auto; }

.axos-theme-toggle {
    display: inline-block;
    padding: var(--axm-space-1) var(--axm-space-3);
    border: var(--axm-line-w) solid var(--axm-line);
    border-radius: var(--axm-radius-control);
    background: var(--axm-panel);
    color: var(--axm-ink2);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    font-weight: var(--axm-fw-medium);
    letter-spacing: var(--axm-ls-eyebrow);
    line-height: var(--axm-lh-body);
    cursor: pointer;
    transition: transform var(--axm-button-motion) var(--axm-ease), background var(--axm-button-motion) var(--axm-ease);
}

.axos-theme-toggle:hover { background: var(--axm-aTint); color: var(--axm-brand); transform: translateY(var(--axm-button-lift)); }
.axos-theme-toggle:active { transform: translateY(var(--axm-button-press)); }

/* ---------------------------------------------------------------------------
   The sign-in backdrop, S140. The handoff draws a grid overlay masked to a radial falloff and
   five concentric rings carrying spheres that sweep around them. CSS alone: the rings rotate by
   keyframes and the sphere sits at the top of each ring, so the rotation carries it. Every value
   is a token. A person who asks for reduced motion gets the rings still.
   --------------------------------------------------------------------------- */

.axos-entry__backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.axos-entry__backdrop::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--axm-grid-line), transparent var(--axm-line-w)),
        linear-gradient(90deg, var(--axm-grid-line), transparent var(--axm-line-w));
    background-size: var(--axm-grid-step) var(--axm-grid-step);
    mask-image: var(--axm-grid-mask);
    -webkit-mask-image: var(--axm-grid-mask);
}

.axos-ring {
    position: absolute;
    left: 50%;
    border-style: solid;
    border-width: var(--axm-line-w);
    border-radius: 50%;
    animation-name: axos-sweep;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.axos-ring::before {
    content: "";
    position: absolute;
    left: 50%;
    border-radius: 50%;
    background: var(--axm-sphere-fill);
    box-shadow: var(--axm-sphere-glow);
}

.axos-ring--1 { width: var(--axm-ring-1); height: var(--axm-ring-1); top: calc(var(--axm-ring-centre-y) - var(--axm-ring-1) / 2); margin-left: calc(var(--axm-ring-1) / -2); border-color: var(--axm-ring-line-1); animation-duration: var(--axm-sweep-1); animation-direction: reverse; }
.axos-ring--2 { width: var(--axm-ring-2); height: var(--axm-ring-2); top: calc(var(--axm-ring-centre-y) - var(--axm-ring-2) / 2); margin-left: calc(var(--axm-ring-2) / -2); border-color: var(--axm-ring-line-2); animation-duration: var(--axm-sweep-2); }
.axos-ring--3 { width: var(--axm-ring-3); height: var(--axm-ring-3); top: calc(var(--axm-ring-centre-y) - var(--axm-ring-3) / 2); margin-left: calc(var(--axm-ring-3) / -2); border-color: var(--axm-ring-line-3); animation-duration: var(--axm-sweep-3); animation-direction: reverse; }
.axos-ring--4 { width: var(--axm-ring-4); height: var(--axm-ring-4); top: calc(var(--axm-ring-centre-y) - var(--axm-ring-4) / 2); margin-left: calc(var(--axm-ring-4) / -2); border-color: var(--axm-ring-line-4); animation-duration: var(--axm-sweep-4); }
.axos-ring--5 { width: var(--axm-ring-5); height: var(--axm-ring-5); top: calc(var(--axm-ring-centre-y) - var(--axm-ring-5) / 2); margin-left: calc(var(--axm-ring-5) / -2); border-color: var(--axm-ring-line-5); animation-duration: var(--axm-sweep-5); animation-direction: reverse; }

.axos-ring--1::before { width: var(--axm-sphere-1); height: var(--axm-sphere-1); top: calc(var(--axm-sphere-1) / -2); margin-left: calc(var(--axm-sphere-1) / -2); }
.axos-ring--2::before { width: var(--axm-sphere-2); height: var(--axm-sphere-2); top: calc(var(--axm-sphere-2) / -2); margin-left: calc(var(--axm-sphere-2) / -2); }
.axos-ring--3::before { width: var(--axm-sphere-3); height: var(--axm-sphere-3); top: calc(var(--axm-sphere-3) / -2); margin-left: calc(var(--axm-sphere-3) / -2); }
.axos-ring--4::before { width: var(--axm-sphere-4); height: var(--axm-sphere-4); top: calc(var(--axm-sphere-4) / -2); margin-left: calc(var(--axm-sphere-4) / -2); }
.axos-ring--5::before { width: var(--axm-sphere-5); height: var(--axm-sphere-5); top: calc(var(--axm-sphere-5) / -2); margin-left: calc(var(--axm-sphere-5) / -2); }

@keyframes axos-sweep {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
    .axos-ring { animation: none; }
}

/* The column sits above the backdrop. */
.axos-entry { position: relative; }

/* ---------------------------------------------------------------------------
   The rail wordmark with its context line, and the user block, S140: the avatar on the mark
   gradient, the identity, a status row with a dot that is green while a capacity is in force,
   and the sign-out beside it.
   --------------------------------------------------------------------------- */

.axos-rail-brand-text { display: flex; flex-direction: column; line-height: var(--axm-lh-heading); }

.axos-rail-subtitle {
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-micro);
    font-weight: var(--axm-fw-regular);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-mut);
}

.axos-rail-user {
    display: flex;
    align-items: center;
    gap: var(--axm-space-2);
    margin-bottom: var(--axm-space-2);
    min-width: 0;
}

.axos-rail-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--axm-avatar-size);
    height: var(--axm-avatar-size);
    border-radius: 50%;
    background: linear-gradient(140deg, var(--axm-mark), var(--axm-a1));
    color: var(--axm-onA);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-meta);
    font-weight: var(--axm-fw-medium);
    letter-spacing: var(--axm-ls-eyebrow);
}

.axos-rail-status {
    display: flex;
    align-items: center;
    gap: var(--axm-space-2);
    margin-bottom: var(--axm-space-2);
}

.axos-dot {
    display: inline-block;
    width: var(--axm-dot-size);
    height: var(--axm-dot-size);
    border-radius: 50%;
    background: var(--axm-mut3);
}

.axos-dot--ok { background: var(--axm-status-ok); }

/* ---------------------------------------------------------------------------
   The header icon button, S140: the theme toggle as the moon or the sun, its words kept for
   assistive technology and for the test that reads them.
   --------------------------------------------------------------------------- */

.axos-icon { width: var(--axm-icon-size); height: var(--axm-icon-size); display: block; }

.axos-theme-toggle { display: inline-flex; align-items: center; justify-content: center; }

.axos-visually-hidden {
    position: absolute;
    width: var(--axm-line-w);
    height: var(--axm-line-w);
    margin: calc(var(--axm-line-w) * -1);
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   The overview, S140: a hero panel with an accent rail on the heroA to heroB ground, metric
   tiles with accent rails and the card lift, and module cards. Every figure on them is a fact
   the page already resolves for the person reading it.
   --------------------------------------------------------------------------- */

.axos-hero {
    padding: var(--axm-card-pad-lg);
    margin-bottom: var(--axm-gap);
    border: var(--axm-line-w) solid var(--axm-line);
    border-top: var(--axm-accent-rail) solid var(--axm-a1);
    border-radius: var(--axm-radius-card);
    background: linear-gradient(120deg, var(--axm-heroA), var(--axm-heroB));
    box-shadow: var(--axm-sh1);
}

.axos-hero__title {
    margin: var(--axm-space-2) 0 var(--axm-space-2);
    font-family: var(--axm-font-display);
    font-size: var(--axm-fs-heading);
    font-weight: var(--axm-fw-regular);
    line-height: var(--axm-lh-heading);
    letter-spacing: var(--axm-ls-heading);
    color: var(--axm-ink);
}

.axos-hero__line { margin: 0; color: var(--axm-ink2); font-size: var(--axm-fs-body-lg); }

.axos-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--axm-tile-min)), 1fr));
    gap: var(--axm-gap);
    margin-bottom: var(--axm-gap);
}

.axos-tile {
    padding: var(--axm-card-pad);
    border: var(--axm-line-w) solid var(--axm-line);
    border-top: var(--axm-accent-rail) solid var(--axm-a2);
    border-radius: var(--axm-radius-card);
    background: var(--axm-panel);
    box-shadow: var(--axm-sh1);
    transition: transform var(--axm-card-motion) var(--axm-ease), box-shadow var(--axm-card-motion) var(--axm-ease);
}

.axos-tile:hover { transform: translateY(var(--axm-card-lift)); box-shadow: var(--axm-sh2); }

.axos-tile__value {
    display: block;
    margin: var(--axm-space-1) 0;
    font-family: var(--axm-font-display);
    font-size: var(--axm-fs-heading);
    line-height: var(--axm-lh-heading);
    color: var(--axm-ink);
}

.axos-tile__sub {
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-mut);
}

.axos-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--axm-module-min)), 1fr));
    gap: var(--axm-gap);
    margin-bottom: var(--axm-gap);
}

.axos-module-card {
    display: block;
    padding: var(--axm-card-pad) var(--axm-card-pad-lg);
    border: var(--axm-line-w) solid var(--axm-line);
    border-left: var(--axm-accent-rail) solid var(--axm-brand);
    border-radius: var(--axm-radius-card);
    background: var(--axm-panel);
    box-shadow: var(--axm-sh1);
    color: var(--axm-ink);
    transition: transform var(--axm-card-motion) var(--axm-ease), box-shadow var(--axm-card-motion) var(--axm-ease);
}

.axos-module-card:hover { text-decoration: none; transform: translateY(var(--axm-card-lift)); box-shadow: var(--axm-sh2); }

.axos-module-card__name {
    display: block;
    font-family: var(--axm-font-display);
    font-size: var(--axm-fs-title);
    font-weight: var(--axm-fw-semibold);
    line-height: var(--axm-lh-heading);
    color: var(--axm-ink);
}

.axos-module-card__meta {
    display: block;
    margin-top: var(--axm-space-1);
    font-family: var(--axm-font-mono);
    font-size: var(--axm-fs-small);
    letter-spacing: var(--axm-ls-eyebrow);
    color: var(--axm-mut);
}

/* The name over the identity in the rail, S141: the name in the ink, the identity beneath it in mono at the micro size. */
.axos-rail-person { min-width: 0; }
.axos-rail-name { color: var(--axm-ink); font-weight: var(--axm-fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.axos-rail-actor--under { font-family: var(--axm-font-mono); font-size: var(--axm-fs-micro); color: var(--axm-mut); }