/* Hallmark · shape: app screen · genre: modern-minimal · theme: Coral (deal 1/3, seed 3895837c)
 * nav: top bar with four destinations · signature: authentication review queue · states: full, empty, error, submitting
 * finish-review: in-thread, mobile records and footer resolved
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: render checked · v2.0.0 */
/* Hallmark · pre-emit critique: restrained controls and full-width records; weakest: Korean readability, use a local system sans stack. */
@import url("./tokens.css");
@import url("./base.css");

body { min-height: 100dvh; }
h1, h2, h3 { line-height: 1.3; letter-spacing: -0.025em; }
h1 { max-width: none; }
a, button, input, textarea, select, summary { -webkit-tap-highlight-color: var(--color-clear); }
.muted, .note { color: var(--color-muted); }
.note { font-size: var(--text-sm); line-height: 1.65; }
.identifier, .date, dd { font-variant-numeric: tabular-nums; }
.identifier { overflow-wrap: anywhere; }
.skip-link { position: fixed; inset: 8px auto auto 8px; z-index: var(--z-toast); padding: var(--space-sm) var(--space-control); background: var(--color-board); color: var(--color-board-type); transform: translateY(-180%); }
.skip-link:focus-visible { transform: none; }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; flex-shrink: 0; font-weight: 600; font-size: var(--text-lg); line-height: 1.35; }
.brand-sub { display: block; color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; margin-top: var(--space-3xs); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-sm) var(--space-control); border: 1px solid var(--color-rule-2); border-radius: var(--radius-stock); font-size: var(--text-sm); font-weight: 600; line-height: 1.5; text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn-primary { background: var(--color-board); color: var(--color-board-type); border-color: var(--color-board); box-shadow: var(--cast-stock); }
.btn-secondary { background: var(--color-clear); color: var(--color-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.full { width: 100%; }
.quiet-link, .row-link, .back-link { color: var(--color-ink-2); text-underline-offset: 5px; font-size: var(--text-sm); font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
.text-button { min-height: 44px; padding: 0 var(--space-xs); border: 0; background: var(--color-clear); color: var(--color-ink); cursor: pointer; font-size: var(--text-sm); white-space: nowrap; }
.stack-form { display: flex; flex-direction: column; gap: var(--space-control); align-items: flex-start; }
.stack-form > .field, .stack-form > .notice, .stack-form > .form-feedback { width: 100%; }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field label, legend { font-size: var(--text-sm); font-weight: 600; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { width: 100%; min-height: 44px; padding: var(--space-sm) var(--space-sm); border: 1px solid var(--color-muted); border-radius: var(--radius-input); color: var(--color-ink); background: var(--color-cotton); outline: 2px solid var(--color-clear); outline-offset: -3px; font-size: var(--text-sm); }
input::placeholder { color: var(--color-muted); }
textarea { resize: vertical; min-height: 140px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--color-focus) !important; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--color-error) !important; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.field small { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-ink); width: 18px; height: 18px; flex-shrink: 0; margin: var(--space-2xs) 0 0; }
.check-row { display: flex; align-items: flex-start; gap: var(--space-sm); min-height: 44px; cursor: pointer; font-size: var(--text-sm); }
.check-row strong { font-weight: 600; display: block; }
.check-row small { display: block; margin-top: var(--space-xs); line-height: 1.65; color: var(--color-muted); font-size: var(--text-sm); }
.form-feedback { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.form-feedback.is-error { color: var(--color-error); }
.notice { padding: var(--space-md) var(--space-control); border: 1px solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper-2); font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--space-control); }
.notice-error { border-color: var(--color-error); }
.notice-success { border-color: var(--color-success); }
.status { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--color-rule-2); border-radius: 5px; font-size: var(--text-xs); line-height: 1.55; white-space: nowrap; color: var(--color-ink-2); }
.status--review, .status--running, .status--reauthorize { color: var(--color-warning); border-color: var(--color-warning-rule); background: var(--color-warning-paper); }
.status--verified, .status--joined, .status--completed { color: var(--color-paid); border-color: var(--color-paid-rule); }
.status--failed, .status--rejected { color: var(--color-error); border-color: var(--color-error-rule); }
summary { cursor: pointer; min-height: 44px; }
.policy-copy { white-space: pre-wrap; line-height: 1.8; overflow-wrap: anywhere; }
.preview-banner { text-align: center; background: var(--color-warning-paper); color: var(--color-warning); padding: var(--space-sm) var(--space-control); font-size: var(--text-sm); }
@media (hover: hover) {
    .btn-primary:hover { background: var(--color-ink-2); }
    .btn-secondary:hover, input:hover, textarea:hover, select:hover { background: var(--color-paper-2); }
    .quiet-link:hover, .row-link:hover, .back-link:hover, .text-button:hover { color: var(--color-accent-2); }
}
@media (max-width: 60rem) {
    .btn, input:not([type="hidden"]), select, textarea, .quiet-link, .row-link, .back-link { font-size: var(--text-md); }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }