/* Design notes
   The site borrows from the workshop: RAL 7016 anthracite, a tape-measure yellow reserved for
   measurements and the main action, and doors drawn as elevations standing on a shared floor line.
   Yellow is only ever a background under dark text, because it fails contrast as text on light. */

@font-face {
    font-family: "Archivo";
    src: url("../fonts/Archivo-variable-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #2B3134;
    --ink-soft: #545D61;
    --plaster: #E9ECE8;
    --paper: #F6F7F4;
    --rule: #BFC5C1;
    --tape: #F5C518;
    --tape-deep: #D9AC07;
    --error: #A3261C;
    --error-bg: #FBEAE7;
    --warn-bg: #FFF5CF;
    --ok: #1E6B45;
    --ok-bg: #E2F1E8;

    --step--1: .875rem;
    --step-0: 1rem;
    --step-1: 1.25rem;
    --step-2: 1.563rem;
    --step-3: clamp(1.7rem, 3.2vw, 2.25rem);
    --step-4: clamp(2.3rem, 5.4vw, 3.9rem);

    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section: clamp(3rem, 7vw, 6rem);
    --ruler: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 10px);
}

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

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

body {
    margin: 0;
    background: var(--plaster);
    color: var(--ink);
    font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--step-0);
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3 { margin: 0 0 .6em; line-height: 1.12; font-weight: 650; text-wrap: balance; }
h1, h2 { font-stretch: 118%; letter-spacing: -.012em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h1:focus, h2:focus { outline: none; box-shadow: none; }

p { margin: 0 0 1em; max-width: 68ch; }
ul, ol { padding: 0; margin: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
address { font-style: normal; margin-bottom: 1em; }

a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--tape);
}

.wrap { width: min(100%, 78rem); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 48rem; }
.form-narrow { max-width: 30rem; }
.lead { font-size: var(--step-1); line-height: 1.45; }
.fine { font-size: var(--step--1); color: var(--ink-soft); }
.preserve-lines { white-space: pre-line; }
.print-only { display: none; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: var(--tape); color: var(--ink); padding: .6rem 1rem; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* Buttons */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 2.75rem; padding: .55rem 1.15rem;
    border: 2px solid var(--ink); background: transparent; color: var(--ink);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.button:hover { background: var(--ink); color: var(--paper); }
.button:disabled { opacity: .55; cursor: not-allowed; }
.button-tape { background: var(--tape); }
.button-tape:hover { background: var(--tape-deep); color: var(--ink); }
.button-large { min-height: 3.25rem; padding-inline: 1.5rem; font-size: 1.0625rem; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.text-button {
    background: none; border: 0; padding: .25rem 0; font: inherit; font-weight: 600; color: inherit;
    text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: 2rem;
}
.text-button-danger { color: var(--error); }
.text-link { font-weight: 600; }

/* Header */
.site-header { background: var(--ink); color: var(--paper); }
.site-header::after { content: ""; display: block; height: 7px; background: var(--ruler), var(--tape); background-blend-mode: normal; }
.site-header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 4.25rem; flex-wrap: wrap; }
.brand { font-weight: 700; font-stretch: 118%; font-size: 1.1875rem; text-decoration: none; margin-right: auto; color: inherit; }
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a { text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--paper); }
.site-nav a.active { border-bottom-color: var(--tape); }
.site-header-cta { border-color: var(--tape); }
.site-header :focus-visible { outline-color: var(--tape); box-shadow: none; }
.site-menu { display: none; }
.site-menu summary { cursor: pointer; padding: .5rem .75rem; border: 2px solid var(--paper); font-weight: 600; list-style: none; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu nav { display: flex; flex-direction: column; flex-basis: 100%; padding-block: .5rem 1rem; }
.site-menu nav a { padding: .7rem 0; text-decoration: none; border-top: 1px solid #515A5E; }
.site-menu[open] { flex-basis: 100%; order: 3; }
.site-menu[open] summary { display: inline-block; }

@media (max-width: 54rem) {
    .site-nav, .site-header-cta { display: none; }
    .site-menu { display: block; }
    .site-header-row { justify-content: space-between; padding-block: .5rem; }
}

/* Footer */
.site-footer { background: var(--ink); color: var(--paper); padding-block: 3rem 1.5rem; }
.site-footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.site-footer-name { font-weight: 700; font-stretch: 118%; font-size: var(--step-1); }
.site-footer nav { display: flex; flex-direction: column; gap: .4rem; }
.site-footer p { margin-bottom: .4rem; }
.site-footer :focus-visible { outline-color: var(--tape); box-shadow: none; }
.sample-note { font-size: var(--step--1); margin-top: 2rem; padding-top: 1rem; max-width: none; color: #D7DBD8; }

.sample-flag { background: var(--warn-bg); padding: .6rem .85rem; border-left: 4px solid var(--tape-deep); font-size: var(--step--1); color: var(--ink); }

/* Hero: the door stands on the floor line that closes the section. */
.hero { border-bottom: 3px solid var(--ink); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.hero-copy { padding-block: clamp(3rem, 8vw, 6.5rem); align-self: center; }
.hero-copy .lead { max-width: 34rem; margin-block: 1.25rem 2rem; }
.hero-drawing { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.hero-drawing .scene { max-height: min(46rem, 78vh); width: 100%; margin-inline: auto; }
.hero-drawing .layer-wall rect { fill: transparent; }
.hero-drawing figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* The single orchestrated moment: on load, the measurements are drawn onto the door. */
.hero-scene .layer-dimensions line {
    stroke-dasharray: 4000;
    stroke-dashoffset: 4000;
    animation: measure 1s .25s cubic-bezier(.3, .7, .2, 1) forwards;
}
.hero-scene .layer-dimensions g { opacity: 0; animation: appear .35s 1.05s forwards; }
@keyframes measure { to { stroke-dashoffset: 0; } }
@keyframes appear { to { opacity: 1; } }

/* Sections */
.section { padding-block: var(--section); }
.section-paper { background: var(--paper); }
.section-links { margin-top: 2rem; }
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--rule); }
.breadcrumb { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: .75rem; }
.band { background: var(--ink); color: var(--paper); padding-block: clamp(2.5rem, 5vw, 4rem); }
.band-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.band h2 { margin: 0; }
.band :focus-visible { outline-color: var(--tape); box-shadow: none; }
.band .button { border-color: var(--tape); }

/* Line-up: drawings at one scale, standing on one continuous floor line. */
.lineup {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: 2.5rem 1.5rem;
}
.lineup-item { display: flex; flex-direction: column; min-width: 0; }
.lineup-item > a { text-decoration: none; display: block; }
.lineup-stage {
    display: flex; align-items: flex-end; justify-content: center;
    height: 17rem; padding-inline: .5rem;
    border-bottom: 3px solid var(--ink);
    margin-bottom: .75rem;
}
.lineup-stage .scene, .lineup-stage .drawing-photo { height: var(--scale, 100%); width: auto; max-width: 100%; object-fit: contain; }
.lineup-stage .scene { transition: transform .25s cubic-bezier(.3, .7, .2, 1); transform-origin: bottom center; }
.lineup-item > a:hover .scene { transform: translateY(-.35rem); }
.lineup-name { display: block; font-weight: 650; line-height: 1.25; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .18em; }
.lineup-item > a:hover .lineup-name { text-decoration-color: currentColor; }
.lineup-meta { font-size: var(--step--1); color: var(--ink-soft); display: block; margin-top: .15rem; }
.catalogue-group + .catalogue-group { margin-top: var(--section); }
.catalogue-group > p { margin-bottom: 1.5rem; }

.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.filter a { padding: .4rem .85rem; border: 1px solid var(--ink); text-decoration: none; min-height: 2.5rem; display: inline-flex; align-items: center; }
.filter a:hover { background: var(--paper); }
.filter a[aria-current="true"] { background: var(--ink); color: var(--paper); }

/* Materials */
.materials { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.material-sample { display: block; width: 100%; height: 5rem; border: 1px solid rgba(43, 49, 52, .35); margin-bottom: 1rem; }

/* Process */
.steps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem 4rem; }
.process { counter-reset: step; display: grid; gap: 1.75rem; }
.process > li { counter-increment: step; display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 1rem; }
.process > li::before {
    content: counter(step); grid-row: 1 / span 3;
    width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
    background: var(--tape); font-weight: 700;
}
.process h3 { margin-bottom: .3rem; }
.process p { margin: 0; }
@media (max-width: 54rem) { .steps-grid { grid-template-columns: 1fr; } }

/* Photos */
.project-grid { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.project > a { text-decoration: none; }
.project-title { display: block; font-weight: 650; font-size: var(--step-1); margin-top: .75rem; line-height: 1.25; }
.project > a:hover .project-title { text-decoration: underline; }
.project p { margin-top: .35rem; }
.photo { position: relative; display: block; background: var(--rule); }
.photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-flag { position: absolute; left: 0; bottom: 0; background: var(--tape); color: var(--ink); font-size: .8125rem; font-weight: 600; padding: .15rem .55rem; }
.photo-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.photo-stack { display: grid; gap: 1.25rem; margin-top: 1.5rem; }

/* Product detail */
.detail-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; align-items: end; }
.detail-drawing { margin: 0; }
.floor-stage { display: flex; justify-content: center; align-items: flex-end; height: 24rem; border-bottom: 3px solid var(--ink); }
.floor-stage .scene, .floor-stage .drawing-photo { height: 100%; width: auto; object-fit: contain; }
.detail-drawing figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: .5rem; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 3rem; }
.spec { margin: 0 0 1rem; }
.spec > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .75rem; padding-block: .55rem; border-top: 1px solid var(--rule); }
.spec dt { color: var(--ink-soft); }
.spec dd { margin: 0; }
@media (max-width: 48rem) { .detail-head { grid-template-columns: 1fr; } .floor-stage { height: 18rem; } }

/* Prose */
.prose h2 { font-size: var(--step-2); margin-top: 2rem; }

/* Forms */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .3rem; align-content: start; min-width: 0; }
.field label, .rule-part legend { font-weight: 600; }
.field-help { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.field-pair { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.field-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }
.field-hidden { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
input[type="text"], input:not([type]), input[type="email"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], select, textarea {
    width: 100%; min-height: 2.75rem; padding: .5rem .7rem;
    background: #fff; color: var(--ink);
    border: 1px solid var(--ink-soft); border-radius: 0;
    font: inherit; font-size: 1rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); }
input[aria-invalid="true"], input.invalid, select.invalid, textarea.invalid { border: 2px solid var(--error); }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--ink); flex: none; margin: .1rem 0 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.check-small { font-size: var(--step--1); }
.validation-message, .field-error { color: var(--error); font-size: var(--step--1); font-weight: 600; margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

/* Status messages */
.status { padding: .85rem 1.1rem; margin-block: 1rem; border-left: 5px solid var(--ink); background: var(--paper); }
.status p:last-child, .status ul:last-child { margin-bottom: 0; }
.status ul { list-style: disc; padding-left: 1.2rem; }
.status li { margin-block: .25rem; }
.status li .text-button { margin-left: .5rem; }
.status h3 { margin-bottom: .3rem; }
.status-error { background: var(--error-bg); border-left-color: var(--error); }
.status-warning { background: var(--warn-bg); border-left-color: var(--tape-deep); }
.status-success { background: var(--ok-bg); border-left-color: var(--ok); }
.status-info { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.status-info p { margin: 0; }
.status:focus { outline: 3px solid var(--ink); }
.empty { padding: 2.5rem 1.5rem; border: 1px dashed var(--ink-soft); }
.loading { color: var(--ink-soft); padding-block: 1.5rem; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; }
.contact-form { scroll-margin-top: 1rem; }
@media (max-width: 48rem) { .contact-grid { grid-template-columns: 1fr; } }

/* Configurator */
.configure-page { padding-block: 2rem 4rem; }
.configure-page h1 { font-size: var(--step-3); margin-bottom: 1.25rem; }
.cfg { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.cfg-side { position: sticky; top: 1rem; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; max-height: calc(100vh - 2rem); }
.step-heading { font-size: var(--step-2); margin-top: 1.75rem; }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.step-nav-error { flex-basis: 100%; }
.design-group-title { margin-top: 1.5rem; }

/* The stepper is a tape measure: yellow, ticked, and read left to right. */
.tape { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 2px solid var(--ink); background: var(--paper); }
.tape li + li { border-left: 1px solid var(--ink); }
.tape button {
    position: relative; display: block; width: 100%; height: 100%; padding: .9rem .25rem .4rem;
    background: none; border: 0; color: var(--ink); font: inherit; font-size: var(--step--1); font-weight: 600; text-align: center; cursor: pointer; line-height: 1.2;
}
.tape button::before { content: ""; position: absolute; inset: 0 0 auto; height: .45rem; background: var(--ruler); opacity: .55; }
.tape button:disabled { color: var(--ink-soft); cursor: not-allowed; }
.tape button:not(:disabled):hover { background: #fff; }
.tape-number { display: block; font-size: 1rem; font-weight: 700; }
.tape .is-done { background: #F9E9A9; }
.tape .is-current { background: var(--tape); }
.tape .is-current button { font-weight: 700; }
.tape button:focus-visible { outline-offset: -3px; }
@media (max-width: 30rem) { .tape-label { font-size: .75rem; letter-spacing: -.01em; } }

/* Choice cards */
.choices { display: grid; gap: .75rem; }
.choices-figures { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.choices-materials { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.choice-swatch-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); }
.choice-diagram-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.choice-plain-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.choice {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--paper); border: 2px solid transparent; outline: 1px solid var(--rule); outline-offset: -1px;
    cursor: pointer; transition: border-color .12s;
}
.choice:hover { outline-color: var(--ink); }
.choice.is-checked { border-color: var(--ink); background: #fff; }
.choice input { position: absolute; top: .55rem; right: .55rem; z-index: 1; }
.choice:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--tape); }
.choice input:focus-visible { outline: none; box-shadow: none; }
.choice-text { display: block; padding: .6rem .7rem .7rem; padding-right: 2.25rem; }
.choice-title { display: block; font-weight: 600; line-height: 1.25; }
.choice-description { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: .2rem; line-height: 1.35; }
.choice-figure .choice-visual { display: flex; justify-content: center; align-items: flex-end; height: 10.5rem; padding: .85rem .5rem 0; border-bottom: 2px solid var(--ink); }
.choice-figure .choice-visual .scene, .choice-figure .choice-visual img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.choice-figure .choice-text { padding-right: .7rem; }
.choice-material .material-sample { margin: 0; border: 0; border-bottom: 1px solid var(--rule); }
.choice-swatch .choice-visual { display: block; }
.swatch { display: block; height: 3.25rem; border-bottom: 1px solid var(--rule); }
.choice-swatch input { background: #fff; }
.choice-diagram .choice-visual { display: block; padding: .5rem .5rem 0; background: var(--plaster); }
.choice-diagram .choice-text { padding-right: .7rem; }
.choice-plain { flex-direction: row; }
.swatch-dot { display: inline-block; width: .85em; height: .85em; border: 1px solid rgba(43, 49, 52, .5); margin-right: .15em; vertical-align: -.05em; }

.option-section { margin-top: 2.25rem; }
.option-section > h3 { font-size: var(--step-2); padding-bottom: .4rem; border-bottom: 2px solid var(--ink); }
.option-group { margin-top: 1.5rem; scroll-margin-top: 1rem; }
.option-group legend { font-weight: 650; font-size: 1.0625rem; margin-bottom: .25rem; }
.option-group .field-help { margin-bottom: .6rem; }
.needs-choice { padding: .85rem; background: var(--warn-bg); border-left: 5px solid var(--tape-deep); }
.inline-notice { font-size: var(--step--1); margin-bottom: .7rem; }
.option-group .field-error { margin-bottom: .6rem; }
.viewing-side { font-size: var(--step--1); padding: .55rem .75rem; background: var(--tape); margin-bottom: .75rem; max-width: none; }
.quantity-field { max-width: 9rem; margin-bottom: 1rem; }

/* Size step */
.measure-note { background: var(--paper); padding: 1rem; margin-bottom: 1.5rem; }
.measure-note p { margin: .75rem 0 0; }
.size-fields input { font-size: var(--step-1); font-weight: 600; }
.confirm-note { margin-top: 1.5rem; padding: .75rem 1rem; border-left: 5px solid var(--tape-deep); background: var(--warn-bg); }

/* Plan-view diagrams */
.opening-diagram { width: 100%; }
.od-wall { fill: var(--ink); }
.od-leaf { stroke: var(--ink); stroke-width: 5; }
.od-leaf-fixed { stroke: var(--ink-soft); stroke-width: 5; }
.od-arc { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 4; }
.od-arrow { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.od-hinge { fill: var(--tape); stroke: var(--ink); stroke-width: 2; }
.od-person { fill: var(--tape); stroke: var(--ink); stroke-width: 2; }
.od-label { font-size: 13px; text-anchor: middle; fill: var(--ink); font-weight: 600; }
.od-label-far { fill: var(--ink-soft); font-weight: 400; }

.measure-diagram { width: 100%; max-width: 30rem; }
.md-wall { fill: var(--rule); }
.md-frame { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.md-label { font-size: 12px; text-anchor: middle; dominant-baseline: central; fill: var(--ink); }
.md-measure { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.md-chip { fill: var(--tape); }
.md-chip-label { font-size: 12px; font-weight: 600; text-anchor: middle; dominant-baseline: central; fill: var(--ink); }

/* Preview */
.preview { margin: 0; background: var(--paper); }
.preview-toolbar { display: flex; justify-content: flex-end; padding: .5rem; }
.view-toggle { display: inline-flex; border: 1px solid var(--ink); }
.view-toggle button { min-height: 2.25rem; padding: .2rem .75rem; background: none; border: 0; font: inherit; font-size: var(--step--1); font-weight: 600; color: var(--ink); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.preview-stage { display: flex; justify-content: center; background: #E3E6E3; }
.preview-stage .scene { height: clamp(14rem, 46vh, 30rem); width: auto; max-width: 100%; }
.preview-stage .scene rect, .preview-stage .scene line, .preview-stage .scene circle { transition: fill .2s, stroke .2s; }
.preview figcaption { font-size: var(--step--1); color: var(--ink-soft); padding: .55rem .75rem; }
.scene text { font-family: inherit; }

.cfg-summary { background: var(--paper); padding: .85rem 1rem; overflow-y: auto; min-height: 0; }
.cfg-summary summary { font-weight: 650; cursor: pointer; min-height: 1.75rem; }
.summary-section { margin-top: 1rem; }
.summary-section h3 { font-size: 1rem; margin-bottom: .3rem; }
.summary-section dl { margin: 0; }
.summary-section dl > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .75rem; padding-block: .3rem; border-top: 1px solid var(--rule); font-size: .9375rem; }
.summary-section dt { color: var(--ink-soft); }
.summary-section dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
.review-summary { background: var(--paper); padding: .5rem 1rem 1rem; margin-bottom: 2rem; }
.form-heading { font-size: var(--step-2); }

/* On small screens the drawing stays in view while the choices scroll beneath it. */
@media (max-width: 60rem) {
    .cfg { display: flex; flex-direction: column; align-items: stretch; }
    .cfg-side { display: contents; }
    .cfg-preview { order: 1; position: sticky; top: 0; z-index: 5; box-shadow: 0 2px 0 var(--ink); margin-inline: calc(var(--gutter) * -1); }
    .cfg-work { order: 2; min-width: 0; }
    .cfg-summary { order: 3; }
    .preview-stage .scene { height: 27vh; min-height: 9.5rem; }
    .preview { display: grid; grid-template-columns: 1fr; position: relative; }
    .preview-toolbar { position: absolute; top: 0; right: 0; z-index: 1; padding: .35rem; }
    .view-toggle { background: var(--paper); }
    .preview figcaption { font-size: .75rem; padding: .2rem .75rem; }
    .preview-extra { display: none; }
    .cfg-summary { overflow: visible; }
    .configure-page { padding-top: 1.25rem; }
}

/* Snapshot */
.snapshot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; align-items: start; }
.snapshot-drawing { margin: 0; background: #E3E6E3; }
.snapshot-drawing .scene { max-height: 34rem; margin-inline: auto; }
.snapshot-drawing figcaption { background: var(--paper); font-size: var(--step--1); color: var(--ink-soft); padding: .55rem .75rem; }
@media (max-width: 48rem) { .snapshot { grid-template-columns: minmax(0, 1fr); } }
.reference { font-size: var(--step-2); margin-bottom: .25rem; }
.reference strong { background: var(--tape); padding: .05em .35em; }
.process-compact { margin-bottom: 1.5rem; gap: .9rem; }
.process-compact > li::before { width: 2rem; height: 2rem; grid-row: 1; }
.process-compact > li { grid-template-columns: 2rem 1fr; }

/* Admin */
.admin { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; background: var(--paper); }
.admin-nav { background: var(--ink); color: var(--paper); padding: 1.25rem; }
.admin-nav .brand { display: block; margin-bottom: 1.5rem; }
.admin-nav nav { display: flex; flex-direction: column; }
.admin-nav nav a { padding: .4rem .6rem; text-decoration: none; }
.admin-nav nav a:hover { background: #3C4347; }
.admin-nav nav a.active { background: var(--tape); color: var(--ink); font-weight: 600; }
.admin-nav :focus-visible { outline-color: var(--tape); box-shadow: none; }
.admin-nav-title { margin: 1.25rem 0 .25rem .6rem; font-size: var(--step--1); color: #C8CDCA; }
.admin-main { padding: clamp(1rem, 3vw, 2.5rem); min-width: 0; }
.admin-main h1 { font-size: var(--step-3); }
.admin-main h2 { font-size: var(--step-2); font-stretch: 100%; }
.admin-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.admin-head h1, .admin-head h2 { margin-bottom: .2rem; }
.admin-head p { margin: 0; }
.panel { background: #fff; border: 1px solid var(--rule); padding: clamp(1rem, 2vw, 1.5rem); margin-block: 1.25rem; }
.admin-columns { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.admin-columns .panel { margin: 0; }
.admin-filters { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; margin-bottom: 1.25rem; }
.admin-filters .field { flex: 1 1 9rem; max-width: 13rem; }
.table-scroll { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; }
.admin-table th, .admin-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.admin-table th { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid var(--ink); white-space: nowrap; }
.status-pill { display: inline-block; padding: .05rem .5rem; font-size: var(--step--1); font-weight: 600; background: var(--plaster); }
.status-pill-new { background: var(--tape); }
.status-pill-won { background: var(--ok-bg); color: var(--ok); }
.status-pill-lost { background: var(--error-bg); color: var(--error); }
.status-field { min-width: 12rem; }
.pager { margin-top: 1rem; }
.notes { display: grid; gap: .75rem; margin-top: 1rem; }
.notes li { padding: .6rem .8rem; background: var(--paper); }
.notes p { margin: 0; }
.notes .fine { margin-top: .25rem; }
.note-status { color: var(--ink-soft); }
.rule-part { padding: 1rem; background: var(--paper); margin-block: .25rem; }
.rule-part legend { padding-inline: .25rem; }
.rule-part > .field { margin-top: 1rem; }
.form-inset { padding: 1rem; background: var(--paper); margin-bottom: 1.25rem; }
.design-edit { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 1.5rem; }
.design-edit > div:first-child { display: grid; gap: 1rem; }
.design-edit-preview { align-self: start; border-bottom: 3px solid var(--ink); }
.option-matrix { margin-block: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.option-matrix legend { font-weight: 650; float: left; width: 100%; margin-bottom: .5rem; }
.option-matrix-row { clear: both; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding-block: .25rem; }
.admin-images { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin-top: 1rem; }
.admin-images li { display: grid; gap: .5rem; align-content: start; }
.admin-thumb { width: 12rem; max-width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--rule); }
@media (max-width: 54rem) {
    .admin { grid-template-columns: minmax(0, 1fr); }
    .admin-nav { padding-block: .85rem; }
    .admin-nav .brand { margin-bottom: .75rem; }
    .admin-nav nav { flex-flow: row wrap; gap: 0 .25rem; }
    .admin-nav-title { display: none; }
    .design-edit { grid-template-columns: minmax(0, 1fr); }
    .design-edit-preview { width: 9rem; }
}

/* Blazor's built-in error banner */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: .75rem 1rem; background: var(--error-bg); color: var(--ink); border-top: 3px solid var(--error); }
#blazor-error-ui .reload { font-weight: 600; margin-left: .5rem; }

@media (max-width: 54rem) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-copy { padding-block: 2.5rem 0; }
    .hero-drawing .scene { max-height: 58vh; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

@media print {
    body { background: #fff; font-size: 11pt; }
    .no-print, .site-header, .site-footer, #blazor-error-ui { display: none !important; }
    .print-only { display: block; }
    .page-head, .section { padding-block: 1rem; border: 0; }
    .section-paper { background: #fff; }
    .snapshot { grid-template-columns: 38% 1fr; }
    .snapshot-drawing { background: #fff; }
    .summary-section { break-inside: avoid; }
    h1 { font-size: 20pt; }
    h2 { font-size: 14pt; }
    a { text-decoration: none; }
    .reference strong, .process > li::before { background: none; border: 1px solid #000; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}