/* Hallmark · macrostructure: Workbench (app frame) · genre: atmospheric · theme: Lumen (Orange Foundry) * nav: N3 side-rail (desktop) + bottom dock (mobile) · footer: none (app scope) * enrichment: hand-built CSS apparatus — loaded barbell, leader callouts with real values * tone: technical · accent: molten orange H42 · display: Instrument Serif lowercase, verb landmark * previous builds: app-in-place tab shell ×2 (blueberry locked) — differs on paper hue + accent hue + nav * data: all numerals computed from authenticated tenant workout data — nothing invented * pre-emit critique: P5 H4 E4 S5 R4 V4 */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { overflow-x: clip; } .hidden { display: none !important; } /* ── Auth first paint ────────────────────────────────────── * data-auth on drives which of three states is shown: "checking" (the * default markup state — /api/session is in flight, or the inline hint-cookie * check in index.html optimistically already flipped this to "in"), "out" (no * valid session — show the gate) or "in" (show the app). A signed-in visitor * must never see the gate, not even for one frame — see * plans/admin-and-accounts/03-session-first-paint.md. */ html:not([data-auth="in"]) #app, html:not([data-auth="out"]) #gate { display: none; } /* admin/index.html reuses this same data-auth attribute and adds a fourth * state, "forbidden": signed in, but not an admin. It must say so rather than * falling back to the login form the visitor has already satisfied — see * plans/admin-and-accounts/03-session-first-paint.md §6 open question 2. * #forbidden and #admin do not exist in new-design/index.html's markup, so * these two rules are no-ops there. */ html:not([data-auth="in"]) #admin, html:not([data-auth="forbidden"]) #forbidden { display: none; } .auth-shell { display: none; min-height: 100vh; place-items: center; background: var(--color-paper); } [data-auth="checking"] .auth-shell { display: grid; } .auth-shell__wordmark { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink-2); opacity: 0.55; } body { background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; font-variant-numeric: tabular-nums; text-transform: lowercase; /* two-register foundation: prose is lowercase */ -webkit-font-smoothing: antialiased; } input, textarea { text-transform: none; } /* user-typed content is not page prose */ /* Numeric values use the drawn +/- controls; do not surface browser chrome. */ input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* mono labels — the only uppercase surface */ .eyebrow, .callout span, .meter__label, .stat__label, .chart__caption, .rail__readout, .step__eyebrow, .row__tag, .barbell__stencil { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-micro); text-transform: uppercase; color: var(--color-muted); line-height: 1.5; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; transition: none; } button { font: inherit; text-transform: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ── Buttons — eight states ─────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-lg); border-radius: var(--radius-sm); font-weight: 500; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out); } .btn--primary { background: var(--color-accent); color: var(--color-accent-ink); } @media (hover: hover) { .btn--primary:hover { transform: translateY(-1.5px); background: var(--color-accent-hover); } .btn--ghost:hover { background: var(--color-paper-2); } } .btn:active { transform: translateY(1px); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn[data-state="loading"] { pointer-events: none; color: transparent; position: relative; } .btn[data-state="loading"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-accent-ink); border-top-color: transparent; animation: spin 700ms linear infinite; } .btn--primary[data-state="error"] { background: transparent; border: 1px solid var(--color-error); color: var(--color-error-text); } .btn--primary[data-state="success"] { background: var(--color-paper-3); color: var(--color-ink); } @keyframes spin { to { transform: rotate(360deg); } } .btn--ghost { border: 1px solid var(--color-rule-2); color: var(--color-ink-2); background: transparent; } .icon-btn { min-width: 44px; min-height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--color-muted); transition: background-color var(--dur-micro) var(--ease-out); } @media (hover: hover) { .icon-btn:hover { background: var(--color-paper-2); color: var(--color-ink); } } /* ── Fields ─────────────────────────────────────────── */ .field label { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-2xs); } .field input { width: 100%; min-height: 44px; padding: 0 var(--space-sm); border: 1px solid var(--color-rule-2); /* 1px in every state — no shift */ outline: 2px solid transparent; outline-offset: 1px; border-radius: var(--radius-sm); background: var(--color-paper-2); color: var(--color-ink); font: inherit; transition: background-color var(--dur-micro) var(--ease-out); } .field input::placeholder { color: var(--color-muted); opacity: 0.75; } @media (hover: hover) { .field input:hover { background: var(--color-paper-3); } } .field input:focus-visible { outline: 2px solid var(--color-focus); } .field input[aria-invalid="true"] { border-color: var(--color-error); } /* Same treatment as .field input — no .field use had a