/* Reset, typography and form controls. Tokens come from tokens.css. */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Any display value beats the hidden attribute, so state it once and loudly.
   Several components below set display:grid or flex and would otherwise ignore
   `hidden` entirely. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
}

:root {
    font-feature-settings: "tnum" 1, "calt" 1, "cv05" 1, "ss03" 1;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--fg);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* A 10px track with a 2px transparent border presents a 6px thumb. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--grey-300) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background: var(--grey-300);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: var(--radius-pill);
}

/* Every number in the product lines up. */
table,
input,
select,
.num,
.tabular,
time,
code,
kbd {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--fg);
}

h1 { font-size: var(--text-xl); letter-spacing: var(--tracking-xl); }
h2 { font-size: var(--text-md); letter-spacing: var(--tracking-base); }
h3 { font-size: var(--text-base); }

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

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover { text-decoration: underline; }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-6) 0;
}

code, kbd, pre, .mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* Focus is always visible, never removed (CLAUDE.md §9 accessibility). */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: 0 0 var(--radius-control) 0;
}

.skip-link:focus {
    left: 0;
}

/* -------------------------------------------------------------- utilities */

.muted { color: var(--fg-muted); }
.subtle { color: var(--fg-subtle); }
.faint { color: var(--fg-faint); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.stack > * + * { margin-top: var(--space-3); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grow { flex: 1 1 auto; min-width: 0; }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--btn-shade);
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

/* Paint on the pointer frame, fade on the way out. */
.btn:hover {
    background: var(--grey-50);
    border-color: var(--border-strong);
    text-decoration: none;
    transition-duration: var(--t-instant);
}

.btn:active {
    background: var(--grey-100);
    transform: translateY(0.5px);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, 0.08);
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
    /* The only gradient in the product: a light top edge, a dark bottom edge
       and a 1px contact shadow. That is what separates a button from a filled
       rectangle. */
    background-image: var(--btn-primary-sheen);
    border-color: var(--btn-primary-border);
    box-shadow: var(--inset-highlight), var(--inset-shade), var(--contact-shadow);
}

.btn--primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--btn-primary-border);
}

.btn--primary:active {
    transform: translateY(0.5px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.btn--danger {
    color: var(--red);
    border-color: var(--red-border);
    background: var(--bg);
}

.btn--danger:hover { background: var(--red-bg); }

.btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--fg-muted);
    box-shadow: none;
}

.btn--ghost:hover { background: var(--grey-100); color: var(--fg); transition-duration: var(--t-instant); }
.btn--ghost:active { background: var(--grey-200); }

.btn--sm {
    height: 26px;
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
}

.btn--icon {
    width: var(--control-height);
    padding: 0;
}

.btn--block { width: 100%; }

/* ------------------------------------------------------------------ forms */

label { display: block; }

.field { margin-bottom: var(--space-4); }
.field:last-child { margin-bottom: 0; }

.field__label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--fg);
}

.field__required {
    margin-left: 2px;
    color: var(--red);
    font-weight: 600;
}

.form-legend {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--fg-subtle);
}

.field__help {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--fg-subtle);
}

/*
 * A value the form states rather than asks for. Matched to an input's height
 * so it sits on the same baseline as the fields beside it, but without a box:
 * a box round something you cannot edit is a promise the form does not keep.
 */
.field__static {
    display: flex;
    align-items: center;
    min-height: 34px;
    margin: 0;
    font-weight: 500;
    color: var(--fg);
}

/* The error message replaces the help line so nothing shifts. */
.field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--red);
}

.field__error::before {
    content: "!";
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="tel"],
input[type="url"],
select,
textarea {
    width: 100%;
    height: var(--control-height);
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: var(--text-base);
}

textarea {
    height: auto;
    min-height: 72px;
    line-height: var(--leading-normal);
    resize: vertical;
}

select {
    padding-right: 28px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236f787e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

input:focus,
select:focus,
textarea:focus {
    outline: 0;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

input::placeholder,
textarea::placeholder { color: var(--fg-faint); }

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--red);
    background: var(--red-bg);
}

input[disabled],
select[disabled],
textarea[disabled] {
    background: var(--grey-50);
    color: var(--fg-subtle);
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-base);
    cursor: pointer;
}

.check input { margin-top: 2px; flex: none; }
.check__text { color: var(--fg); }
.check__help { display: block; font-size: var(--text-sm); color: var(--fg-subtle); }

kbd {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border: 1px solid var(--border);
    border-radius: var(--radius-micro);
    background: var(--bg);
    box-shadow: 0 1px 0 var(--border);
    color: var(--fg-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}