/* ──────────────────────────────────────────────────────────────────────────
   Project pages — /projects/*
   Spec: specs/2026-09-05-project-pages.md §2 (page anatomy), §4 (diagram).

   A project page is a SEQUENCED BUILD with the arithmetic done at each step,
   so the layout is a reading column with a running materials list beside it —
   not the two-column input/output card a calculator page uses. Everything
   here is scoped to .proj-* so it cannot leak into the 18 calculator pages.

   Tokens only (the "Backyard" system in css/styles.css :root). Accent TEXT at
   body size uses --accent-ink; --accent is for fills, borders and rings.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Hero: H1 + the one-paragraph answer ─────────────────────────────────── */

.proj-hero {
    max-width: 760px;
    margin: 0 auto 1.5rem;
    text-align: center;
}

.proj-hero h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.3rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
}

/* The first-screenful answer. Carries real numbers so a visitor who wants one
   figure and leaves gets it without touching an input (spec §2.1). */
.proj-answer {
    background: var(--accent-wash);
    border: 1px solid var(--accent-edge);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    padding: 1.1rem 1.25rem;
    max-width: 760px;
    margin: 0 auto 2rem;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ink-2);
}

.proj-answer strong {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.proj-answer a {
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Two-column shell: build column + running list ───────────────────────── */

.proj-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 1060px) {
    .proj-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 2.5rem;
    }
}

.proj-main {
    min-width: 0;                 /* lets long result rows shrink, not overflow */
}

/* ── Project sizer — the page's single action ────────────────────────────── */

.proj-sizer {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2.5px solid var(--accent);
    border-radius: var(--r-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

@media (min-width: 720px) {
    .proj-sizer {
        padding: 1.5rem 1.75rem;
    }
}

.proj-sizer h2 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
    margin-bottom: 1rem;
}

.proj-sizer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

@media (min-width: 720px) {
    .proj-sizer-grid {
        grid-template-columns: 1fr 1fr 1.4fr;
    }
}

.proj-sizer-error {
    color: #b91c1c;
    font-size: 0.85rem;
    margin-top: 0.75rem;
}

.proj-sizer-error:empty {
    display: none;
}

/* ── The diagram (spec §4) ───────────────────────────────────────────────── */

.proj-diagram {
    background: var(--panel-soft);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

.proj-diagram h2 {
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}

.proj-diagram > p {
    font-size: 0.9rem;
    color: var(--ink-muted);
    margin-bottom: 1rem;
}

/* The viewBox is 800 × 356: the left 480 units are the drawing, the right 320
   are the labels. Pinning the box's aspect ratio and slicing from xMin means
   the narrow-screen box shows exactly the drawing half at full size, instead
   of shrinking the whole thing until the numbered dots are unreadable. */
.proj-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 800 / 356;
}

@media (max-width: 719px) {
    .proj-diagram svg {
        aspect-ratio: 480 / 356;
    }
}

/* SVG theming — strokes and fills come from tokens, never hex. */
.dg-ground      { fill: var(--panel); stroke: var(--border-strong); }
.dg-soil        { stroke: var(--border-strong); fill: none; }
.dg-jointfill   { fill: var(--accent-2); }
.dg-spike       { stroke: var(--ink-2); }
.dg-fabric      { stroke: var(--accent-2); }
.dg-base        { fill: var(--accent-soft); stroke: var(--accent); }
.dg-bedding     { fill: var(--accent-tint); stroke: var(--accent); }
.dg-paver       { fill: var(--surface); stroke: var(--ink-2); }
.dg-edge        { fill: var(--accent-2-tint); stroke: var(--accent-2); }
.dg-joint       { stroke: var(--accent-2); }
.dg-speck       { fill: var(--accent); }
.dg-leader      { stroke: var(--border-strong); }
.dg-marker      { fill: var(--accent); }
.dg-marker-text { fill: var(--on-accent); font-weight: 700; }
.dg-name        { fill: var(--ink); font-weight: 600; }
.dg-qty         { fill: var(--accent-ink); font-weight: 700; }
.dg-house       { fill: var(--border-soft); stroke: var(--border-strong); }
.dg-note        { fill: var(--ink-muted); }

.proj-diagram svg text {
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

.proj-diagram svg a:focus-visible .dg-marker {
    outline: 3px solid var(--focus-ring);
}

/* Mobile: the SVG keeps its numbered dots, the labels beside it are dropped,
   and the key list below carries the text, quantities and links (spec §4).
   The leader GROUP goes with them — a leader whose label has been cropped away
   is a line pointing at nothing, and its stub bleeds off the cut edge. Scoped
   to g.dg-leader so the cut-face line, which shares the stroke colour but is
   not in that group, survives. */
@media (max-width: 719px) {
    .dg-labels,
    g.dg-leader { display: none; }
}

/* The numbered key — always present: it is the diagram's text alternative and
   on mobile it is the only place the labels appear. */
.proj-key {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.proj-key li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.5rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
}

.proj-key li:first-child {
    border-top: none;
}

.proj-key a {
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.proj-key a:hover {
    color: var(--ink);
}

.proj-key-num {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.proj-key-qty {
    margin-left: auto;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.proj-key-qty--pending {
    color: var(--ink-muted);
    font-weight: 600;
}

/* ── Build sequence heading ──────────────────────────────────────────────── */

.proj-seq-h {
    font-size: 1.35rem;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

/* ── Build sequence ──────────────────────────────────────────────────────── */

.proj-step {
    border-top: 1px solid var(--border);
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    scroll-margin-top: 5rem;          /* fixed header clearance for #anchors */
}

.proj-step:first-of-type {
    border-top: none;
}

.proj-step-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.proj-step-num {
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.proj-step h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.proj-step p {
    color: var(--ink-2);
    line-height: 1.7;
    margin-bottom: 0.9rem;
}

.proj-step p a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The step's inline calculator: local controls (where a real choice exists)
   plus the result rows that feed the running list. */
.proj-calc {
    background: var(--accent-wash);
    border: 1px solid var(--accent-edge);
    border-radius: var(--r-md);
    padding: 0.9rem 1.1rem;
}

.proj-calc-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding-bottom: 0.8rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--accent-edge);
}

.proj-calc-controls .calc-field {
    margin-bottom: 0;
    flex: 1 1 190px;
    min-width: 0;
}

.proj-calc-controls .calc-seg {
    background: var(--surface);
}

.proj-calc-fixed {
    font-size: 0.82rem;
    color: var(--ink-muted);
    line-height: 1.5;
    padding-bottom: 0.8rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--accent-edge);
}

.proj-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.2rem 1rem;
    font-size: 0.92rem;
    padding: 0.22rem 0;
}

.proj-row-label {
    color: var(--ink-2);
}

.proj-row-value {
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.proj-row--buy .proj-row-label {
    color: var(--ink);
    font-weight: 600;
}

.proj-row--buy .proj-row-value {
    font-size: 1.05rem;
}

.proj-calc-note {
    font-size: 0.8rem;
    color: var(--ink-muted);
    line-height: 1.55;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--accent-edge);
}

.proj-step-more {
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 0.65rem;
}

.proj-step-more a {
    color: var(--accent-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Running materials list (the spine) ──────────────────────────────────── */

.proj-running {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 2.5px solid var(--accent-2);
    border-radius: var(--r-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    padding: 1.1rem 1.25rem;
}

@media (min-width: 1060px) {
    .proj-running {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
    }
}

.proj-running h2 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-muted);
    margin-bottom: 0.2rem;
}

.proj-running-sub {
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin-bottom: 0.85rem;
    font-variant-numeric: tabular-nums;
}

/* The list body is rendered by CalcCore's shared materials-list markup — the
   same code path the 18 calculator pages use — so it only needs unwrapping
   from its own card here, since .proj-running already is the card. */
.proj-running .materials-list {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.proj-running .materials-group {
    border-top-color: var(--border);
}

.proj-running .materials-note {
    border-top-color: var(--border);
}

/* ── "Also needed — not calculated here" (spec §3) ───────────────────────── */

.proj-coverage {
    background: var(--accent-2-tint);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem;
    margin-top: 2.5rem;
}

.proj-coverage h2 {
    font-size: 1.15rem;
    margin-bottom: 0.3rem;
}

.proj-coverage > p {
    color: var(--ink-2);
    font-size: 0.92rem;
    margin-bottom: 0.9rem;
}

.proj-coverage ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.proj-coverage li {
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
    color: var(--ink-2);
    line-height: 1.6;
}

.proj-coverage li:first-child {
    border-top: none;
}

.proj-coverage li b {
    color: var(--ink);
    font-weight: 700;
}

.proj-coverage li a {
    color: var(--accent-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Print: the list is the artifact; controls and chrome are not ────────── */

@media print {
    .proj-sizer,
    .proj-diagram,
    .proj-calc-controls,
    .proj-step-more {
        display: none !important;
    }

    .proj-running {
        box-shadow: none;
        position: static;
        max-height: none;
    }

    .proj-layout {
        display: block;
    }
}