:root {
    --bg: #ffffff;
    --fg: #1b1f24;
    --muted: #5c6773;
    --line: #d8dee4;
    --accent: #0b6bcb;
    --copper: #c07a3e;
    --courtyard: #8b5cf6;
    --silk: #6b7280;
    --error: #b42318;
    --radius: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14181d;
        --fg: #e6edf3;
        --muted: #9aa7b4;
        --line: #2b3138;
        --accent: #5ba3f5;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }

code, pre, .token { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }

.muted { color: var(--muted); }
.error { color: var(--error); }
.lead { font-size: 1.1rem; color: var(--muted); max-width: 60ch; }

/* Layout ------------------------------------------------------------------ */

.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.topbar__brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--fg); }
.topbar__nav { display: flex; gap: 1rem; }
.topbar__nav a { text-decoration: none; }
.topbar__nav a.active { font-weight: 600; text-decoration: underline; }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.topbar__user { color: var(--muted); }
.topbar form { margin: 0; }

.content { padding: 1.5rem 1.25rem 4rem; max-width: 1100px; }

/* Controls ---------------------------------------------------------------- */

.button {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.button:disabled { opacity: 0.55; cursor: not-allowed; }
.button--quiet { background: transparent; color: var(--accent); }

.units-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

.units-toggle__option {
    padding: 0.25rem 0.7rem;
    border: 0;
    background: transparent;
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}

.units-toggle__option--active { background: var(--accent); color: #fff; }

.field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.9rem; max-width: 22rem; }
.field--inline { flex-direction: row; align-items: center; gap: 0.5rem; max-width: none; }
.field span { color: var(--muted); font-size: 0.9rem; }
.field input, .field select, select, input[type="text"], input[type="number"] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
}

/* Content blocks ---------------------------------------------------------- */

.cards { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; flex: 1 1 18rem; }
.card h2 { margin-top: 0; }

.notice { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.notice--success { border-color: var(--accent); }

.table { border-collapse: collapse; width: 100%; margin-bottom: 1.5rem; }
.table th, .table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.table th { color: var(--muted); font-weight: 600; }

.meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; }

.providers { list-style: none; padding: 0; max-width: 26rem; }
.providers__item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.providers__item form { margin: 0; }

.downloads { padding-left: 1.1rem; }
.token { padding: 0.6rem; background: rgba(127, 127, 127, 0.12); border-radius: var(--radius); overflow-x: auto; }

/* Editor ------------------------------------------------------------------ */

.editor { display: flex; gap: 2rem; align-items: flex-start; flex-wrap: wrap; }
.editor__parameters { flex: 0 0 22rem; }
.editor__previews { flex: 1 1 26rem; display: flex; flex-direction: column; gap: 1.5rem; }
.editor__preview { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.editor__preview h2 { margin-top: 0; font-size: 1rem; }
.editor__preview-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.editor__name { margin: 1rem 0; display: flex; flex-direction: column; }

/* Footprint preview ------------------------------------------------------- */

.footprint2d__canvas { width: 100%; height: auto; max-height: 22rem; background: rgba(127, 127, 127, 0.06); border-radius: var(--radius); }
.footprint2d__legend { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; margin: 0.75rem 0 0; font-size: 0.9rem; }
.footprint2d__legend dt { color: var(--muted); }
.footprint2d__legend dd { margin: 0; }

.layer { fill: none; stroke: var(--silk); }
.layer--copper { fill: var(--copper); stroke: none; }
.layer--courtyard { stroke: var(--courtyard); stroke-dasharray: 0.15 0.15; }
.layer--silk { stroke: var(--silk); }

/* 3D pane ----------------------------------------------------------------- */

.model3d { position: relative; min-height: 12rem; }
.model3d__viewport { min-height: 12rem; display: grid; place-items: center; background: rgba(127, 127, 127, 0.06); border-radius: var(--radius); padding: 1rem; text-align: center; }

/* Out of sync with the current parameters: blurred so a stale shape is never mistaken for the
   live one, with the overlay offering the refresh. */
.model3d--stale .model3d__viewport { filter: blur(4px); pointer-events: none; user-select: none; }

.model3d__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.model3d__placeholder p { margin: 0.25rem 0; }