/*
 * Styles the application adds on top of the reviewed site's stylesheet: the
 * guided room-refresh flow, the batch, and the projects page. Same tokens,
 * same radius, no shadows. Phone first.
 */
.hero__secondary { margin-top: 0.75rem; }
.steps-overview { counter-reset: step; list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0.75rem; }
.steps-overview li { position: relative; padding-left: 2.5rem; }
.steps-overview li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); display: grid; place-items: center; font-weight: 600; font-size: 0.9rem; }
.status-banner { margin-bottom: 1rem; }

/* The stepper */
.flow { display: grid; gap: 1rem; }
.flow__progress { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.9rem; color: var(--color-muted-foreground); }
.flow__progress li { display: flex; align-items: center; gap: 0.35rem; }
.flow__progress li::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid var(--color-control-border); }
.flow__progress li[aria-current="step"] { color: var(--color-primary); font-weight: 600; }
.flow__progress li[aria-current="step"]::before { background: var(--color-accent); border-color: var(--color-primary); }
.flow__progress li.is-done::before { background: var(--color-primary); border-color: var(--color-primary); }
.flow__step[hidden] { display: none; }
.flow__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.flow__actions .button--accent { margin-left: auto; }
.flow__summary { background: var(--color-muted); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.95rem; }
.flow__summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 0.25rem 0 0; }
.flow__summary dt { color: var(--color-muted-foreground); }
.flow__summary dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Choice cards */
.choice-cards { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .choice-cards { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.choice-card { display: block; border: 2px solid var(--color-border); border-radius: var(--radius); padding: 0.85rem 1rem; background: var(--color-card); cursor: pointer; }
.choice-card:has(input:checked) { border-color: var(--color-primary); background: var(--color-muted); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.choice-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-card strong { display: block; }
.choice-card span { color: var(--color-muted-foreground); font-size: 0.95rem; }
.choice-card--inline { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Units toggle and imperial inputs */
.units-toggle { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.field-row--imperial .field__control { gap: 0.5rem; }

/* Pack options */
.pack-options { border: 0; padding: 0; margin: 1rem 0 0; }
.pack-options__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: end; margin-bottom: 0.5rem; }
.pack-options__row .field { margin: 0; }
.provenance { display: inline-block; font-size: 0.8rem; border-radius: var(--radius); padding: 0.1rem 0.45rem; margin-left: 0.35rem; vertical-align: middle; }
.provenance--catalogue { background: var(--color-primary); color: var(--color-on-primary); }
.provenance--user { background: var(--color-muted); color: var(--color-foreground); border: 1px solid var(--color-border); }
.provenance--generic { background: var(--color-warning-tint); color: var(--color-warning-text); }
.catalogue-pick { margin: 0.75rem 0; }
.catalogue-pick__source { font-size: 0.9rem; color: var(--color-muted-foreground); }

/* The batch */
.batch__sections { display: grid; gap: 1.25rem; }
.batch-section__title { margin: 0 0 0.5rem; }
.batch-line { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.85rem 1rem; background: var(--color-card); margin-bottom: 0.6rem; }
.batch-line__head { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; justify-content: space-between; }
.batch-line__label { font-weight: 600; margin: 0; }
.batch-line__purchase { font-variant-numeric: tabular-nums; margin: 0.15rem 0 0; }
.batch-line__price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.batch-line__why { margin: 0.35rem 0 0; color: var(--color-muted-foreground); font-size: 0.95rem; }
.batch-line__check { margin: 0.35rem 0 0; font-size: 0.95rem; }
.batch-line__status { margin: 0.6rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.batch-line__status button { font-size: 0.85rem; padding: 0.25rem 0.6rem; }
.batch-line__status button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.batch-line--muted { opacity: 0.8; }
.batch-line .working { margin-top: 0.5rem; }
.batch-line .breakdown__row dd { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.batch-line .breakdown__row--text { flex-direction: column; align-items: stretch; gap: 0.25rem; }
.batch-line .breakdown__row--text dd { text-align: left; }
.batch__total { font-size: 1.1rem; }
.batch__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 0.5rem; }
.batch__sources li { font-size: 0.95rem; }
.batch-warning { margin: 0.35rem 0 0; }

/* Projects page additions */
.batch-card__meta { color: var(--color-muted-foreground); font-size: 0.95rem; margin: 0.25rem 0 0; }
.estimate__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 0; }

@media print {
  .flow__progress, .flow__actions, .batch__actions, .batch-line__status, .no-print { display: none !important; }
  .batch-line { break-inside: avoid; }
  .batch-line .working { display: block; }
  .batch-line .working[open] summary, .batch-line .working summary { display: none; }
}

/* ---- Room planner: the drawing board and the wall list ------------------------------------------
   Tokens only. The board is square on a phone and sits beside the wall list from 1024px. Every
   control is at least 44px tall; the drawing is never the only way to change the room. */
.planner { display: grid; gap: 1rem; }
.planner__layout { display: grid; gap: 1rem; }
@media (min-width: 64rem) { .planner__layout { grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr); align-items: start; } }
.planner__board { display: grid; gap: 0.75rem; }
.planner__canvas { display: block; width: 100%; max-width: 70vh; aspect-ratio: 1; height: auto; margin: 0 auto; background: var(--color-card); border: 1px solid var(--color-control-border); border-radius: var(--radius); touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.planner__canvas.is-closed { cursor: default; }
.planner__grid-minor { stroke: var(--color-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.planner__grid-major { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.planner__room { fill: var(--color-muted); stroke: var(--color-primary); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.planner__room--open { fill: none; }
.planner__room.is-invalid { stroke: var(--color-destructive-text); fill: var(--color-destructive-tint); }
.planner__closing { stroke: var(--color-control-border); stroke-width: 1.5; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.planner__dim line { stroke: var(--color-muted-foreground); stroke-width: 1; vector-effect: non-scaling-stroke; }
.planner__dim text { fill: var(--color-foreground); font-weight: 600; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--color-card); stroke-width: 4px; stroke-linejoin: round; cursor: pointer; }
.planner__preview { stroke: var(--color-link); stroke-width: 2; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.planner__preview-label { fill: var(--color-link); font-weight: 600; paint-order: stroke; stroke: var(--color-card); stroke-width: 4px; }
.planner__corner { cursor: grab; outline: none; }
.planner__corner .hit { fill: transparent; }
.planner__corner .ring { fill: none; stroke: transparent; stroke-width: 3; vector-effect: non-scaling-stroke; }
.planner__corner .dot { fill: var(--color-card); stroke: var(--color-primary); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.planner__corner.is-first .dot { fill: var(--color-accent); }
.planner__corner:focus-visible .ring { stroke: var(--color-ring); }
.planner__corner:hover .dot { fill: var(--color-accent); }
.planner__scale .dark { fill: var(--color-primary); }
.planner__scale .light { fill: var(--color-card); stroke: var(--color-primary); stroke-width: 1; vector-effect: non-scaling-stroke; }
.planner__scale text { fill: var(--color-muted-foreground); }
.planner__hint { margin: 0; color: var(--color-muted-foreground); min-height: 1.5em; }
.planner__example { margin: 0; }
.planner__tools, .planner__options { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.planner__options { justify-content: space-between; }
.planner__area { display: flex; align-items: center; gap: 0.5rem; }
.planner__area .field__label { margin: 0; }
.planner__walls { margin: 0; }
.planner__walls-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.5rem; }
.plan-wall { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end; padding-top: 0.5rem; border-top: 1px solid var(--color-border); }
.plan-wall .field { margin: 0; }
.plan-wall .field-row--imperial { margin: 0; }
.plan-wall__direction { color: var(--color-muted-foreground); }
.planner__summary { background: var(--color-muted); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.95rem; }
.planner__summary dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 0.25rem 0 0; }
.planner__summary dt { color: var(--color-muted-foreground); }
.planner__summary dd { margin: 0; font-variant-numeric: tabular-nums; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.plan-actions .button--accent { margin-right: auto; }
.plan-drawing { margin: 1rem 0; }
.plan-drawing svg { display: block; width: 100%; height: auto; max-width: 42rem; border-radius: var(--radius); }
.plan-drawing figcaption { color: var(--color-muted-foreground); font-size: 0.95rem; margin-top: 0.35rem; }
.plan-print { display: none; }
.room-shape { margin-bottom: 1rem; }
@media print {
  .planner__tools, .planner__options, .planner .choice-cards, .plan-wall > .button { display: none !important; }
  .plan-drawing svg { width: 186mm; max-width: none; }
}

/* Five destinations do not fit beside the name on a phone. Below 1024px the navigation takes its own
   row under the name and its items wrap whole, never mid-label, so every one stays visible. */
.site-nav a { white-space: nowrap; }
@media (max-width: 63.99rem) {
  .site-nav { flex-basis: 100%; padding-bottom: var(--space-xs); }
  .site-nav ul { flex-wrap: wrap; gap: 0 var(--space-xs); margin-left: calc(-1 * var(--space-sm)); }
}

/* Short choices (units, underlay) sit side by side and wrap, instead of taking a full row each. */
.choice-cards:has(> .choice-card--inline) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.planner-setup { display: grid; gap: 0.5rem 1.5rem; }
@media (min-width: 48rem) { .planner-setup { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---- Landing page ----------------------------------------------------------------------------- */
.landing-hero { display: grid; gap: 1.5rem; padding: var(--space-xl) 0 var(--space-lg); align-items: center; }
.landing-hero h1 { margin-top: 0; max-width: 18ch; }
.landing-hero__secondary { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: 1rem; font-weight: 600; }
.landing-hero__picture, .landing-split__picture, .page-intro__picture { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-card); }
@media (min-width: 64rem) { .landing-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.landing-section { margin-top: var(--space-2xl); }
.how-steps { list-style: none; padding: 0; margin: var(--space-md) 0 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .how-steps { grid-template-columns: repeat(3, 1fr); } }
.how-step { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; }
.how-step__picture { width: 100%; height: auto; border-radius: 4px; margin-bottom: 0.75rem; background: var(--color-muted); }
.how-step h3 { margin: 0; display: flex; gap: 0.5rem; align-items: center; }
.how-step__number { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.95rem; flex: none; }
.how-step p { margin: 0.5rem 0 0; color: var(--color-muted-foreground); }
.sample-batch { margin-top: var(--space-md); border-top: 4px solid var(--color-accent); }
.sample-batch__lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.sample-line { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem 1rem; }
.sample-line__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.75rem; align-items: baseline; }
.sample-line__label { font-weight: 600; }
.sample-line__purchase { margin: 0.2rem 0 0; font-variant-numeric: tabular-nums; }
.sample-line__why { margin: 0.25rem 0 0; color: var(--color-muted-foreground); font-size: 0.95rem; }
.status-tag { font-size: 0.8rem; border-radius: 4px; padding: 0.1rem 0.45rem; border: 1px solid var(--color-border); background: var(--color-muted); }
.status-tag--need { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.status-tag--check { background: var(--color-warning-tint); color: var(--color-warning-text); border-color: var(--color-warning-text); }
.sample-batch__total { margin: 0.9rem 0 0.25rem; font-variant-numeric: tabular-nums; }
.landing-split { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 64rem) { .landing-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.landing-honesty { margin-top: var(--space-lg); border-left: 4px solid var(--color-primary); }
.landing-honesty h3 { margin-top: 0; }
.faq-teaser { display: grid; gap: 0.25rem; max-width: 48rem; }
.landing-final { margin-top: var(--space-2xl); background: var(--color-primary); color: var(--color-on-primary); border-radius: var(--radius); padding: var(--space-xl) var(--space-lg); }
.landing-final h2 { color: var(--color-on-primary); margin-top: 0; }
.landing-final p { color: var(--color-on-primary-muted); max-width: 60ch; }
.landing-final :focus-visible { outline-color: var(--color-ring-on-dark); }

/* ---- Guides, questions and information pages -------------------------------------------------- */
.page-intro { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 64rem) { .page-intro { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.guide-list { list-style: none; padding: 0; margin: var(--space-lg) 0; display: grid; gap: 1rem; }
@media (min-width: 48rem) { .guide-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .guide-list--three, .guide-list { grid-template-columns: repeat(3, 1fr); } }
.guide-card { position: relative; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.guide-card:has(a:hover) { border-color: var(--color-primary); }
.guide-card:has(a:focus-visible) { outline: 3px solid var(--color-ring); outline-offset: 2px; }
.guide-card__picture { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--color-muted); }
.guide-card__body { padding: 0.9rem 1rem 1rem; }
.guide-card__title { font-size: var(--text-lg); margin: 0; }
.guide-card__title a { text-decoration: none; color: var(--color-foreground); }
.guide-card__title a::after { content: ''; position: absolute; inset: 0; }
.guide-card__title a:focus-visible { outline: none; }
.guide-card p { margin: 0.4rem 0 0; color: var(--color-muted-foreground); }
.breadcrumb { margin-top: var(--space-md); font-size: var(--text-sm); }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.guide { max-width: 46rem; }
.guide__header h1 { margin-top: 0.25rem; }
.guide__figure { margin: var(--space-md) 0; }
.guide__figure img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-border); }
.guide__body h2 { margin-top: var(--space-xl); }
.guide__body table { border-collapse: collapse; margin: var(--space-md) 0; font-variant-numeric: tabular-nums; }
.guide__body th, .guide__body td { border-bottom: 1px solid var(--color-border); padding: 0.4rem 0.75rem 0.4rem 0; text-align: left; }
.guide__faq { margin-top: var(--space-xl); }
.guide__cta { margin-top: var(--space-xl); display: grid; gap: 0.75rem; justify-items: start; border-top: 4px solid var(--color-accent); }
.guide__cta p { margin: 0; }
.faq-list { max-width: 46rem; }
.faq-item { border-top: 1px solid var(--color-border); padding: var(--space-md) 0; }
.faq-item h2 { font-size: var(--text-lg); margin: 0; }
.faq-item p { margin: 0.5rem 0 0; }

/* "Help:" links to the guides, above a step's fields. They open in a new tab so nothing typed is lost. */
.flow__help { margin: 0 0 0.75rem; font-size: 0.95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 1rem; }
.flow__help a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.flow__help-label { font-weight: 600; }
/* Example figures fold away behind a one-line summary; a custom or catalogue product shows its figures. */
.product-figures { margin-top: 0.75rem; }
.product-figures > summary { cursor: pointer; }
.product-figures__summary { color: var(--color-muted-foreground); font-weight: 400; }

.guide-sections ul { list-style: none; padding: 0; margin: var(--space-md) 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.guide-sections a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.guide-section { margin-top: var(--space-xl); }
.guide-section .guide-list { margin-top: var(--space-md); }

/* The quote offer's optional questions (0.9.0): folded, so the offer stays one line and a button. */
.quote-offer__about { margin: 0.75rem 0 1rem; }
.quote-offer__about > :not(summary) { margin-top: 0.75rem; }

/* Customer accounts (0.10.0). */
.account-form { max-width: 34rem; }
.summary-list { display: grid; gap: 0.75rem; margin: 0; }
.summary-list > div { display: grid; gap: 0.125rem; }
.summary-list dt { color: var(--color-muted-foreground); font-size: var(--text-sm); }
.summary-list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 40rem) { .summary-list > div { grid-template-columns: 14rem 1fr; } }
.button--destructive { color: var(--color-destructive-text); background: var(--color-card); border-color: var(--color-destructive-text); }
.button--destructive:hover { background: var(--color-destructive-tint); }
.password-toggle { margin-top: 0.5rem; }
.account-status { margin: 0 0 1rem; }
.account-changed { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.account-changed p { margin: 0; }