/* Hallmark · macrostructure: Workbench · genre: modern-minimal · theme: Cobalt · tone: technical
 * pre-emit critique: P5 H4 E4 S5 R5 V4 · contrast: pass (40–41) · slop: pass (42–49) · mobile: pass (34, 49–57)
 * audience: general testers · use: register and open member dashboard · enrichment: none · nav: N9 · footer: Ft2
 */
@import url("/assets/tokens.css");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;600&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap");
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body { min-height: 100dvh; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); line-height: 1.6; }
a { color: inherit; }
button, input { font: inherit; }
.shell { width: min(100%, 90rem); min-height: 100dvh; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 4rem); }
.nav-edge { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-block-end: var(--rule-thin) solid var(--color-rule); }
.wordmark { font-family: var(--font-mono); font-weight: 600; text-decoration: none; white-space: nowrap; }
.wordmark span { color: var(--color-accent); }
main { min-height: calc(100dvh - 10rem); }
.hero-split, .auth-layout, .dashboard { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); padding-block: var(--space-3xl) var(--space-4xl); }
h1, h2 { margin: 0; font-family: var(--font-display); font-style: normal; line-height: 1.02; letter-spacing: -0.045em; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-2xl); }
p { max-width: 62ch; }
.signal { margin-block: 0 var(--space-lg); color: var(--color-accent); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; }
.hero-copy > p:not(.signal), .auth-copy > p:not(.signal), .dashboard > div > p:not(.signal) { color: var(--color-muted); font-size: var(--text-lg); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-block-start: var(--space-xl); }
.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border: var(--rule-thin) solid var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); background: transparent; color: var(--color-ink); cursor: pointer; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.button--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.button[data-state="loading"] { opacity: .72; cursor: wait; }
.button[data-state="error"] { background: var(--color-error); color: var(--color-paper); }
.button[data-state="success"] { background: var(--color-success); color: var(--color-paper); }
.text-link { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 600; line-height: 1; text-underline-offset: .25em; white-space: nowrap; }
.text-link:active { transform: translateY(1px); }
.text-link[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.workbench { align-self: center; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-paper); overflow: clip; box-shadow: 1rem 1rem 0 var(--color-paper-3); }
.workbench__top, .workbench dl, .workbench dl div { display: flex; justify-content: space-between; gap: var(--space-md); }
.workbench__top { padding: var(--space-md); border-block-end: var(--rule-thin) solid var(--color-ink-2); font-size: var(--text-xs); }
.status-dot { color: var(--color-success); }
.workbench__body { min-height: 14rem; display: grid; align-content: center; gap: var(--space-sm); padding: var(--space-xl); }
.workbench__body > div { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-block-end: var(--rule-thin) solid var(--color-ink-2); }
.workbench__body span { color: var(--color-paper-3); }
.workbench dl { margin: 0; padding: var(--space-md); border-block-start: var(--rule-thin) solid var(--color-ink-2); font-size: var(--text-xs); }
.workbench dl div { display: block; }
.workbench dt { color: var(--color-paper-3); }
.workbench dd { margin: 0; }
.tour { padding-block: var(--space-3xl); border-block-start: var(--rule-thin) solid var(--color-rule); }
.spec-sheet { margin-block-start: var(--space-2xl); }
.spec-sheet > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); padding-block: var(--space-lg); border-block-end: var(--rule-thin) solid var(--color-rule); }
.spec-sheet dt { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; }
.spec-sheet dd { margin: 0; color: var(--color-muted); }
.auth-copy h1, .dashboard h1 { font-size: clamp(2.75rem, 8vw, 5.5rem); }
.auth-card { align-self: start; display: grid; padding: var(--space-xl); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.auth-card label { margin-block-start: var(--space-md); font-weight: 600; }
.auth-card input { width: 100%; min-height: 2.75rem; margin-block-start: var(--space-sm); border: var(--rule-thin) solid var(--color-rule); outline: 2px solid transparent; outline-offset: 1px; border-radius: var(--radius-sm); padding: var(--space-sm) 2.5rem var(--space-sm) .75rem; background: var(--color-paper); color: var(--color-ink); }
.auth-card input:hover { background: var(--color-paper-2); }
.auth-card input:active { background: var(--color-paper-2); }
.auth-card input:disabled { opacity: .55; cursor: not-allowed; }
.auth-card input[aria-invalid="true"] { border-color: var(--color-error); }
.auth-card input[data-state="loading"] { cursor: wait; }
.auth-card input[data-state="success"] { border-color: var(--color-success); }
.helper { min-height: 1lh; margin-block-start: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.auth-card .button { width: 100%; margin-block-start: var(--space-xl); }
.form-switch { margin-block: var(--space-lg) 0; text-align: center; font-size: var(--text-sm); }
.notice { padding: var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-sm); }
.notice--error { border-color: var(--color-error); color: var(--color-error); }
.empty { padding-block: var(--space-3xl); }
.foot-line { min-height: 5rem; display: flex; flex-direction: column; justify-content: center; gap: var(--space-xs); border-block-start: var(--rule-thin) solid var(--color-rule); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-xs); }
@media (hover: hover) and (pointer: fine) { .button:hover { transform: translateY(-1px); } .text-link:hover { color: var(--color-accent); } }
@media (min-width: 40rem) { .spec-sheet > div { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } .foot-line { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (min-width: 60rem) { .hero-split, .auth-layout, .dashboard { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; min-height: calc(100dvh - 10rem); } }
@media (pointer: coarse) { .button, .text-link, .auth-card input { min-height: 3rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } }