/**
 * AXO3 theme layer for the member area.
 *
 * WHAT THIS IS
 * The module stylesheet (module-member/res/scss/member.scss → member.css) is
 * written token-driven and neutral: every value reads `var(--token, fallback)`,
 * the fallback being the module's own grey. This file supplies the tokens — and
 * only what the neutral module cannot carry without becoming AXO3-coloured for
 * every future project on the same module.
 *
 * WHERE IT IS LOADED
 * override/z77/module/member/src/Ui/Config/layoutConfig.inc.php — a whole-file
 * override of the module's layoutConfig, listing this sheet AFTER 'member'. It
 * therefore loads on every member page (login, profile, B10), which the B10-only
 * verwaltung.css does not.
 *
 * ORDER MATTERS for the plain declarations at the bottom (equal specificity,
 * source order decides), not for the tokens — custom properties resolve at
 * computed-value time regardless of file order.
 *
 * SOURCE OF TRUTH
 * Design: Z:\labor\axo3-design — spec 03-development/specs/member-oberflaeche.md,
 * decision 02-decisions/member-farben-und-zustaende.md, template
 * showcase/member/. Do not re-derive colours here; every value below is a
 * measured result (WCAG: body text 4.5:1, control borders and hint text 3:1).
 * Changing one means recalculating its pairings.
 *
 * NOTE public/assets/ is gitignored and seeded from vendor packages only — this
 * file and the fonts below are copied to public/assets/member/ by hand, locally
 * and on the server (ADR-024).
 */

/* ── Fonts ───────────────────────────────────────────────────────────────
   Inter carries the surface, GT Walsheim only the wordmark — that one is
   brand, not tool (schriftwahl.md). The wordmark arrived with the brand mark
   in the member skeleton (2026-08-11); before that --font-brand was defined
   and unused.

   ⚠️ GT Walsheim is licensed and NOT in the repo. It lives only in
   public/assets/member/fonts/gt-walsheim/ (gitignored), source
   Z:\labor\axo3-design\assets\fonts\gt-walsheim\. Missing font = the wordmark
   falls back to system-ui; the page stands, the mark reads wrong. Only Bold is
   shipped — the wordmark is the only thing that uses it. */
@font-face {
    font-family: "GT Walsheim";
    src: url("../fonts/gt-walsheim/GT-Walsheim-Bold.woff2") format("woff2");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════
   TOKEN — taken unchanged from showcase/member/member.css
   ══════════════════════════════════════════════════════════════════════

   --line and --control are separate on purpose. The old stylesheet drew both
   with #d9d9d9; that reaches 1.4:1 on white and misses WCAG 1.4.11 for inputs
   and switches. Separators may be quiet, control borders may not. */
:root {
    color-scheme: light;

    --bg: #e9edee;            /* page */
    --surface: #ffffff;       /* card — lighter than the page */
    --surface-2: #f4f7f7;     /* inset: snippet field, code area */

    --text: #1b2325;
    --text-2: #556365;        /* labels, secondary */
    --text-3: #7d8d8f;        /* hint, disabled */

    --line: #dbe3e4;          /* separator, decorative */
    --control: #78888a;       /* border of controls — 3:1, not quieter */

    --accent: #14646e;
    --accent-hover: #10545d;
    --accent-active: #0c434a;
    --on-accent: #ffffff;
    --accent-tint: #dceaec;   /* surface for active states */

    --ok: #16653c;      --ok-tint: #e2f0e8;
    --err: #a92218;     --err-tint: #fae7e5;
    --warn: #8a4a17;    --warn-tint: #f7ecdf;
    --info: #10545d;    --info-tint: #dceaec;

    --radius: 0;
    --rule: 1px;

    --s1: .25rem;  --s2: .5rem;   --s3: .75rem;
    --s4: 1rem;    --s6: 1.5rem;  --s8: 2rem;   --s12: 3rem;

    --font: "Inter", system-ui, sans-serif;
    --font-brand: "GT Walsheim", system-ui, sans-serif;
}

/* The explicit switch: data-theme on <html>, written by the server from the
   account's setting and flipped live by the shell header's switch (the seam
   this block was left as, filled 2026-08-12). Absent = nobody decided, and the
   media query below answers instead. */
[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0f1618;
    --surface: #182123;
    --surface-2: #121a1c;

    --text: #e6ecec;
    --text-2: #a2b1b3;
    --text-3: #849799;

    --line: #334244;
    --control: #5d7275;

    /* Petrol #14646e does not reach 4.5:1 on a dark ground. #4fb3c0 is the 400
       step of the same ramp public already carries. */
    --accent: #4fb3c0;
    --accent-hover: #6cc3ce;
    --accent-active: #86d0d9;
    --on-accent: #06222a;
    --accent-tint: #10262a;

    --ok: #6cc48f;      --ok-tint: #14291d;
    --err: #ff8f80;     --err-tint: #2e1613;
    --warn: #dda05a;    --warn-tint: #2a1d0e;
    --info: #7fc9d3;    --info-tint: #10262a;
}

/* Without a decision the mode comes from the system — which is every guest on
   the login card, and every account that never touched the switch. An explicit
   data-theme="light" still wins.
   ⚠️ Same values as the block above; the two are kept in sync by hand. Plain
   CSS has no way to share a declaration block across a media query. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #0f1618;
        --surface: #182123;
        --surface-2: #121a1c;

        --text: #e6ecec;
        --text-2: #a2b1b3;
        --text-3: #849799;

        --line: #334244;
        --control: #5d7275;

        --accent: #4fb3c0;
        --accent-hover: #6cc3ce;
        --accent-active: #86d0d9;
        --on-accent: #06222a;
        --accent-tint: #10262a;

        --ok: #6cc48f;      --ok-tint: #14291d;
        --err: #ff8f80;     --err-tint: #2e1613;
        --warn: #dda05a;    --warn-tint: #2a1d0e;
        --info: #7fc9d3;    --info-tint: #10262a;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   What the neutral module cannot carry — AXO3 only
   ══════════════════════════════════════════════════════════════════════ */

.me-body {
    -webkit-font-smoothing: antialiased;
}

/* Scoped to the member body on purpose — the module stays free of resets, they
   would reach every project on it. */
.me-body *,
.me-body *::before,
.me-body *::after {
    box-sizing: border-box;
}

/* `:not([class])` is load-bearing, not tidiness. A bare link in running text
   wants the accent; a link that carries a class is a component — a button, a
   navigation item, the brand mark — and brings its own colour. Without the
   guard this rule outranks every one of them (0,1,1 beats 0,1,0), which is
   what painted «2FA einrichten» petrol on petrol: an <a class="fe-form__submit">
   whose label vanished into its own background. */
.me-body a:not([class]) {
    color: var(--accent);
    text-underline-offset: 3px;
}

.me-body :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* — The brand mark above the card —
     Markup from the shared partials/brandMark (override/z77/shared), styling
     here: the framework module draws it as plain text, AXO3 gives it the
     wordmark's font and the signet. */

.me-brand {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -.02em;
    color: var(--text);
}

/* The signet — the same cube as on public, set quieter (26px against 36px).
   Six faces out of one accent, so it follows hell/dunkel without a second
   asset. The two literals below are face SHADING, not palette: they darken the
   accent against itself, which is why they are not tokens. */
.me-brand .signet {
    display: block;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.me-brand .cube {
    display: block;
    --edge: 15px;
    width: var(--edge);
    height: var(--edge);
    margin: 5px 0 0 5px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-35.264deg) rotateY(45deg);
}

/* Turning is decoration; an explicit system preference outranks it. */
@media (prefers-reduced-motion: no-preference) {
    .me-brand .cube { animation: axo3-cube-turn 16s linear infinite; }
}

@keyframes axo3-cube-turn {
    from { transform: rotateX(-35.264deg) rotateY(45deg); }
    to   { transform: rotateX(-35.264deg) rotateY(405deg); }
}

.me-brand .cube i { position: absolute; inset: 0; }

/* --bg, not --surface: in member the mark stands on the page ground, not on a
   card. The design source mixed against the surface because its demo bar was
   one — the difference is a hair in light, a shade in dark. */
.me-brand .f-top    { transform: rotateX(90deg)  translateZ(calc(var(--edge) / 2)); background: color-mix(in oklab, var(--accent) 30%, var(--bg)); }
.me-brand .f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--edge) / 2)); background: color-mix(in oklab, var(--accent) 75%, #000); }
.me-brand .f-front  { transform: translateZ(calc(var(--edge) / 2));                 background: var(--accent); }
.me-brand .f-back   { transform: rotateY(180deg) translateZ(calc(var(--edge) / 2)); background: var(--accent); }
.me-brand .f-left   { transform: rotateY(-90deg) translateZ(calc(var(--edge) / 2)); background: color-mix(in oklab, var(--accent) 62%, #10181a); }
.me-brand .f-right  { transform: rotateY(90deg)  translateZ(calc(var(--edge) / 2)); background: color-mix(in oklab, var(--accent) 62%, #10181a); }

/* — The shell: the signed-in surface —
     Markup and structure come from the module (html-shell-skeleton +
     partials/shell/*), which already draws it from tokens. What AXO3 adds is
     what a neutral module cannot know: how loud the header stands against the
     page, and how quiet the footer. */

.me-shell__header {
    /* The page ground, not the card surface — the header is part of the room,
       not a thing lying in it. The rule below carries the separation. */
    background: var(--bg);
    border-bottom-color: var(--control);
}

.me-shell__footer {
    color: var(--text-3);
}

.me-shell__logout {
    font-weight: 500;
}

/* The mark in the shell header sits left and needs no extra gap — the bar's
   own gap does it. In the card header (login, register) it stays centred. */
.me-shell__bar .me-brand {
    flex: 0 0 auto;
}

/* — Type: the tool reads denser and firmer than the neutral default — */

.me-card__title {
    font-weight: 600;
    letter-spacing: -.01em;
}

.me-card__subtitle {
    font-weight: 600;
}

.me-devices th {
    font-weight: 500;
}

/* — The primary action: petrol, and a border so hover and active states move
     the whole shape, not just its fill — */

.fe-form__submit {
    border: var(--rule) solid var(--accent);
    font-weight: 500;
}

.fe-form__submit:hover {
    border-color: var(--accent-hover);
}

.fe-form__submit:active {
    background: var(--accent-active);
    border-color: var(--accent-active);
}

.fe-form__submit--quiet {
    border-color: var(--control);
}

.fe-form__submit--quiet:hover {
    border-color: var(--text);
}

/* — Inputs answer the pointer before they answer the keyboard — */

.fe-form__row input:hover,
.fe-form__row textarea:hover {
    border-color: var(--text-2);
}

/* — Messages: the band closes with a line in its own colour — */

.flash-messages {
    z-index: 4;
}

.flash-msg {
    border-bottom: var(--rule) solid currentColor;
}