/* 💚 Build - styles for build*.html, loaded AFTER app.css. Uses only app.css tokens, so light and dark
   both work. Nothing Build needs lives in pages.css (which these pages do not load). */
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nav-ink); }
.brand-name { font-weight: 800; font-size: 20px; white-space: nowrap; }
@media (max-width: 600px) { .brand { gap: 8px; } .brand-name { font-size: 16px; } }
.btn.small { min-height: 44px; padding: 0 14px; }
.muted { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { white-space: normal; }
.card details > summary { cursor: pointer; font-weight: 800; min-height: 44px; display: flex; align-items: center; }

/* Waiting-on-you strip */
.build-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; }
.build-strip-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 72px; padding: 10px 12px; text-align: left;
    border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; cursor: pointer;
    font: 600 15px "Cabinet Grotesk", system-ui, sans-serif; }
.build-strip-item .n { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.build-strip-item.hot .n { color: var(--alert-ink); }
.build-strip-item[aria-pressed="true"] { border: 2px solid var(--teal); }
.build-strip-item:hover { border-color: var(--teal); color: var(--ink); }

/* Board */
.build-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.build-filters .field { flex: 1 1 200px; }
/* Only stages that hold a house are drawn. If they are still wider than the page the strip scrolls sideways inside its own
   box: the edge with more behind it fades, and a line above says how many stages are further right. */
.build-board-box { position: relative; min-width: 0; }
.build-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 400px); gap: 12px; overflow-x: auto; padding: 4px 4px 10px; }
.build-more { text-align: right; font-weight: 700; margin: 0 0 6px; }
.build-more button.link { color: var(--teal-ink); min-height: 44px; }
.build-board-box::before, .build-board-box::after { content: ""; position: absolute; top: 0; bottom: 10px; width: 56px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.build-board-box::after { right: 0; background: linear-gradient(to right, transparent, var(--cream)); }
.build-board-box::before { left: 0; z-index: 1; background: linear-gradient(to left, transparent, var(--cream)); }
.build-board-box[data-more="1"]::after, .build-board-box[data-less="1"]::before { opacity: 1; }
#strip:empty { display: none; }   /* a role with no strip gets no gap where it would be */
.build-col { background: var(--line-soft); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.build-col h2 { font-size: 16px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.build-col-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Stage sketches (lib/build-stage-art.js): decoration, painted on the page's cream paper, so a small radius and no border.
   In dark mode the cream square would glare: it is kept as a rounded chip, drawn smaller and a little dimmer. */
.build-art { display: block; flex: none; height: auto; border-radius: 10px; background: #FCF2D7; }
.build-art-col { width: 44px; }
.build-head.has-art { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 4px; align-items: start; }
.build-head.has-art > * { grid-column: 1; min-width: 0; }
.build-head.has-art > .build-art-head { grid-column: 2; grid-row: 1 / span 4; width: 144px; border-radius: 14px; }
@media (max-width: 600px) { .build-head.has-art { column-gap: 12px; } .build-head.has-art > .build-art-head { width: 88px; border-radius: 12px; } }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .build-art { filter: brightness(.86); }
    :root:not([data-theme="light"]) .build-art-col { width: 36px; }
    :root:not([data-theme="light"]) .build-head.has-art > .build-art-head { width: 120px; }
}
:root[data-theme="dark"] .build-art { filter: brightness(.86); }
:root[data-theme="dark"] .build-art-col { width: 36px; }
:root[data-theme="dark"] .build-head.has-art > .build-art-head { width: 120px; }
@media (max-width: 600px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .build-head.has-art > .build-art-head { width: 80px; } }
@media (max-width: 600px) { :root[data-theme="dark"] .build-head.has-art > .build-art-head { width: 80px; } }
.build-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.build-card-title { font-weight: 800; font-size: 18px; text-decoration: none; overflow-wrap: anywhere; }
.build-card .sub { font-size: 14px; color: var(--muted); }
.build-people { display: flex; flex-direction: column; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .build-board { grid-auto-flow: row; grid-auto-columns: auto; overflow-x: visible; padding: 0; }
    .build-board-box::before, .build-board-box::after { display: none; }
}

/* House page */
.build-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.build-timeline li { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 14px; display: flex; flex-direction: column; min-width: 0; }
.build-timeline li .sub { color: var(--muted); font-size: 13px; }
.build-timeline li.passed { background: var(--good-bg); color: var(--good-ink); border-color: var(--teal); }
.build-timeline li.current { border: 2px solid var(--ink); font-weight: 800; }
.build-missing { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }
fieldset.build-override { border: 1px dashed var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
/* A fieldset is min-content wide by default; long option text would push the page sideways on a phone. */
.build-override select, .build-override textarea, .build-act select, .build-act textarea, .build-act input:not([type="checkbox"]) { width: 100%; min-width: 0; }
fieldset.build-override legend { font-weight: 700; padding: 0 4px; }
.build-check-group + .build-check-group { margin-top: 12px; }
.build-item-actions { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; }
.build-item-actions:empty { display: none; }
form.build-act { border-top: 1px dashed var(--line-soft); padding-top: 8px; }
form.build-act-inline { display: inline-flex; gap: 8px; align-items: center; }
.build-docs ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.build-docs li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; overflow-wrap: anywhere; }
.build-note { border: 1px solid var(--line-soft); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.build-note.draft { border-style: dashed; }
.build-note blockquote { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.build-replies { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 3px solid var(--line); display: flex; flex-direction: column; gap: 6px;
    font-size: 15px; overflow-wrap: anywhere; }
.build-open { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }

/* Review screen: document left, notes right; stacked on narrow screens */
.build-review { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.build-frame { width: 100%; height: 75vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (max-width: 900px) { .build-review { grid-template-columns: minmax(0, 1fr); } .build-frame { height: 60vh; } }
form.build-items-act { display: flex; flex-direction: column; gap: 10px; }
.build-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.build-pending { border: 2px solid var(--teal, currentColor); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }

/* Browser check (Task 13) */
/* The browser's own placeholder grey is under 4.5:1 on the field background in both themes. */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
/* The create section is itself the card, so the rule above for sections inside a card does not reach its summary. */
details.card > summary { cursor: pointer; padding: 11px 0; }   /* 44 px tall, and it keeps its arrow */
/* A long file name wraps; it reads from the left like the rest of the row. */
button.link[data-doc-open] { text-align: left; }

/* Follow-up fixes */
/* One message line at the head of each section, checklist row and note: the outcome of a form that has gone is said here. */
/* (Selected by the attribute: the page rewrites the class to msg / msg ok / msg err.) */
[data-section-msg] { scroll-margin: 16px; }
.row > [data-section-msg] { flex-basis: 100%; }
[data-section-msg]:focus-visible { outline-offset: 4px; }
/* People on this house. On a phone each person is a card: what they are, name, email (wrapping), then the action full width. */
table.build-members td { overflow-wrap: anywhere; }
table.build-members td.act { text-align: right; }
form.build-act-inline { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) {
    table.build-members, table.build-members tbody, table.build-members tr, table.build-members td { display: block; width: 100%; }
    table.build-members thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.build-members tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
    table.build-members td { border: 0; padding: 2px 0; }
    table.build-members td[data-label]::before { content: attr(data-label); display: block; font-size: 14px; color: var(--eyebrow); font-variant-caps: all-small-caps; letter-spacing: .05em; }
    table.build-members td.act:empty { display: none; }
    table.build-members td.act { padding-top: 8px; text-align: left; }
    table.build-members form.build-act-inline { display: flex; flex-direction: column; align-items: stretch; }
    table.build-members form.build-act-inline .btn { width: 100%; }
}

/* A record that needs repair: its own group above the stage columns (it has no stage to sit in). */
.build-repair h2 { display: flex; align-items: baseline; gap: 8px; }
.build-repair h2 .count { font-size: 0.8em; opacity: 0.75; }
.build-repair-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.build-repair-card .build-missing { margin: 6px 0 0; padding-left: 18px; overflow-wrap: anywhere; }