:root { --canvas: #f0f2f0; --surface: #fff; --text: #181c1a; --accent: #17815e; --quiet: #59665e; }
body { background: var(--canvas); min-width: 0; }
button, summary, select, input[type="checkbox"] { touch-action: manipulation; }
.project-strip { grid-template-columns: 1fr; }
.intro-copy { max-width: 48ch; }
.rules-group { display: flex; flex-direction: column; gap: 1rem; }
.rules-group legend { float: left; width: 100%; padding: 0; margin-bottom: 0.25rem; }
.rules-group > * { margin-block: 0; }
.rules-group #clear-constraints { align-self: flex-start; margin-top: 0.25rem; }
.rules-group .select-field { gap: 0.5rem; }
.button, .micro-button, .segmented button, .strategy-tabs button, .view-run-tabs button { cursor: pointer; box-shadow: 0 1px 2px #14221914; transition: transform 140ms cubic-bezier(0.23,1,0.32,1), box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease; }
button:disabled { cursor: not-allowed; box-shadow: none; }
.button-primary { background-image: linear-gradient(120deg, #076444, #128259 65%, #177451); border-color: #076444; }
.button-primary[aria-busy="true"]::after { content: ""; width: 1rem; height: 1rem; margin-left: 0.75rem; display: inline-block; border: 2px solid #ffffff55; border-top-color: white; border-radius: 50%; animation: calculating-spin 800ms linear infinite; }
@keyframes calculating-spin { to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover, .micro-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 10px #12302120; border-color: #17815e; }
  .button-primary:not(:disabled):hover { background-image: linear-gradient(120deg, #075239, #0c704d 65%, #19885e); }
}
.strategy-tabs button[aria-pressed="true"]::before { content: "✓ "; }
.button:not(:disabled):active, .micro-button:not(:disabled):active { transform: translateY(0) scale(0.98); box-shadow: inset 0 1px 3px #12302130; }
.strategy-comparison { padding: 1.5rem; border-block: 1px solid var(--steel); }
.comparison-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-block: 1rem; }
.comparison-grid > div { display: grid; gap: 0.25rem; padding: 1rem; background: #eef4f0; border-radius: 0.5rem; }
.comparison-grid span, .strategy-comparison p { font-size: 0.875rem; color: var(--muted); }
@media (max-width: 767px) {
  input:not([type="checkbox"]):not([type="range"]), select { font-size: 1rem; }
  .comparison-grid { grid-template-columns: 1fr; }
  .intro-copy { max-width: none; }
  .rules-group { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  button, button:hover, button:active { transform: none !important; }
  .button-primary[aria-busy="true"]::after { animation: none; }
}
#print-sheet { display: none; }
@page { size: letter portrait; margin: 0.35in; }
@media print {
  html, body { background: white !important; min-height: 0 !important; }
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block !important; color: #111; background: white; font: 10pt/1.25 Arial,sans-serif; }
  #print-sheet header { display: flex; justify-content: space-between; gap: 0.2in; border-bottom: 2px solid #17654b; padding-bottom: 0.1in; }
  #print-sheet header > div:last-child { text-align: right; font-size: 8pt; flex-shrink: 0; }
  #print-sheet h1 { font: bold 16pt/1.1 Arial,sans-serif; letter-spacing: 0; max-width: none; margin-top: 4pt; overflow-wrap: anywhere; }
  #print-sheet h3 { font-size: 11pt; margin: 0.12in 0 0.06in; break-after: avoid; }
  #print-sheet h3 span { float: right; font-size: 9pt; }
  .print-stock { padding-block: 0.1in; border-bottom: 1px solid #aaa; }
  .print-stock span { display: block; font-size: 8pt; margin-top: 4pt; }
  .print-pours { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0.2in; }
  #print-sheet table { min-width: 0; width: 100%; font-size: 9pt; table-layout: auto; }
  #print-sheet th, #print-sheet td { padding: 5pt 3pt; font-size: 10pt; color: #111; text-transform: none; letter-spacing: 0; vertical-align: top; border-bottom: 1px solid #ccc; overflow-wrap: anywhere; }
  #print-sheet th { font-family: Arial,sans-serif; }
  #print-sheet small { display: block; font-size: 8pt; color: #333; }
  #print-sheet tr { break-inside: avoid; }
  .print-geometry { height: 1.5in; }
  .print-geometry .box-svg { width: 100%; height: 100%; }
  .print-geometry .box-label { fill: #111; stroke: white; stroke-width: 4px; font-size: 27px; }
  .print-geometry .box-label.depth { display: none; }
  .print-geometry .box-line { stroke: #333; }
  #print-sheet footer { font-size: 8pt; line-height: 1.3; border-top: 1px solid #333; margin-top: 0.12in; padding-top: 0.08in; break-inside: avoid; }
}
main { max-width: 1480px; margin-inline: auto; }
.intro { min-height: 0; padding-block: 2rem; align-items: center; }
h1 { max-width: 22ch; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.03; letter-spacing: -0.045em; text-transform: none; }
.intro-copy { max-width: 30ch; font-size: 1rem; }
/* The portrait owns a separate grid cell. The opaque controls sit in front. */
.intro { grid-template-columns: minmax(0, 1.65fr) 12rem minmax(0, 1fr); grid-template-areas: "heading portrait description"; padding-bottom: 0; align-items: start; }
.intro > div:first-child { grid-area: heading; padding-bottom: 2rem; }
.intro > .intro-copy { grid-area: description; max-width: none; padding-block: 1.75rem 2rem; }
.kelly-peek { grid-area: portrait; position: relative; align-self: end; height: 11rem; width: 100%; pointer-events: none; user-select: none; }
.kelly-peek img { display: block; width: 100%; height: auto; max-width: none; position: absolute; top: 0; left: 0; }
#planner-form { position: relative; z-index: 1; }
@media (min-width: 768px) and (max-width: 1100px) {
  .intro { grid-template-columns: minmax(0, 1fr) 12.5rem; grid-template-areas: "heading portrait" "description portrait"; column-gap: 2rem; row-gap: 1rem; }
  .intro > div:first-child { padding-bottom: 0; }
  .intro > .intro-copy { max-width: 48ch; padding-block: 0 1.5rem; }
  .kelly-peek { width: 12.5rem; height: 11rem; justify-self: end; }
}
@media (max-width: 767px) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "heading heading" "description portrait"; padding-bottom: 0 !important; }
  .intro > div:first-child { padding-bottom: 0; }
  .intro > .intro-copy { max-width: none; padding-block: 0 1.25rem; }
  .kelly-peek { width: 100%; max-width: 12rem; height: 100%; min-height: 12rem; justify-self: end; align-self: stretch; }
}
@media print { .kelly-peek { display: none; } }
h2 { font-size: clamp(1.4rem, 2.5vw, 1.8rem); }
.site-header { background: #181c1a; }
.deck-heading, .results-header { padding: 1.5rem; gap: 1rem; }
.project-strip { padding: 1.5rem; align-items: center; }
.project-actions { border-bottom: 1px solid var(--steel); padding: 0.75rem 1.5rem; }
summary { cursor: pointer; min-height: 2.75rem; align-content: center; font-weight: 700; font-size: 0.875rem; }
.project-actions .toolbar { justify-content: start; padding-block: 0.75rem; }
.project-actions .field-help { margin-bottom: 0.5rem; }
.builder-introduction { padding: 1.5rem; display: grid; grid-template-columns: 1fr 1.4fr; gap: 2rem; border-bottom: 1px solid var(--steel); }
.builder-introduction p:not(.section-index) { max-width: 65ch; color: var(--muted); font-size: 0.875rem; }
.pour-panel { padding: 1.5rem; }
.pour-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.pour-heading h3 { font-size: 1.5rem; }
.run-count { font-size: 0.875rem; color: var(--muted); }
.geometry-controls { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.geometry-controls label, .heading-field { display: grid; gap: 0.35rem; font-size: 0.875rem; font-weight: 650; color: var(--muted); align-content: start; }
.geometry-controls small { font-size: 0.75rem; font-weight: 400; }
.box-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.75rem 0; }
.segmented { display: inline-flex; padding: 0.25rem; background: #e8ede9; border-radius: 0.6rem; }
.segmented button { border: 0; background: transparent; border-radius: 0.4rem; padding: 0.5rem 0.8rem; color: var(--muted); font-size: 0.875rem; }
.segmented button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 4px #14221920; }
.rotation-control { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: var(--muted); }
.rotation-control input { max-width: 8rem; padding: 0; accent-color: var(--accent); }
.box-preview { border-radius: 0.75rem; background: #1b241f; overflow: hidden; }
.box-svg { width: 100%; height: auto; display: block; }
.box-face { fill: #52685c; fill-opacity: 0.72; stroke: #b3c5ba; stroke-width: 1; vector-effect: non-scaling-stroke; }
.box-face.closure { fill: #48be8d; fill-opacity: 1; }
.box-line { stroke: #b8cabe; stroke-width: 1; }
.box-line.panel { stroke-width: 4; }
.box-line.closure { stroke: #65d9a7; stroke-width: 5; }
.box-line.gap { stroke: #e4ac7b; stroke-dasharray: 5 5; }
.box-label { fill: #fff; font: 700 18px var(--font-mono); text-anchor: middle; paint-order: stroke; stroke: #1b241f; stroke-width: 4px; stroke-linejoin: round; }
.box-label.depth { fill: #a8edcb; font-size: 18px; }
.independent-reference { min-height: 9rem; padding: 1.5rem; display: grid; gap: 0.6rem; align-content: center; color: #c7d5cb; font-size: 0.875rem; }
.independent-reference strong { color: #f1f6f2; font: 700 1.5rem var(--font-mono); }
.independent-reference .section-index { color: #a8c6b4; }
.geometry-status { padding: 0.65rem 0; font-size: 0.875rem; font-weight: 650; color: var(--accent-strong); min-height: 2.75rem; }
.builder-actions { display: flex; gap: 0.75rem; justify-content: space-between; margin-bottom: 1rem; }
.run-row { grid-template-columns: 1.6rem minmax(0, 1fr) minmax(4.5rem, 0.5fr) 2.75rem; gap: 0.75rem; align-items: start; padding: 0.5rem 0; border-bottom: 1px solid #e5e9e6; }
.run-row:has(.heading-field[hidden]) { grid-template-columns: 1.6rem minmax(0, 1fr) 2.75rem; }
.run-row .run-id { padding-top: 1.95rem; }
.length-field { min-width: 0; display: grid; gap: 0.35rem; }
.run-row label.input-caption { font: 650 0.875rem var(--font-ui); color: var(--muted); }
.run-row input { min-width: 0; }
.normalized { font-size: 0.75rem; min-height: 1.1rem; }
.field-error { grid-column: 2 / -1; }
.remove-run { border: 0; border-radius: 0.5rem; background: transparent; color: var(--muted); margin-top: 1.65rem; font-size: 1.4rem; }
.remove-run:hover { background: #f2e3df; color: #8a3327; }
.builder-help { margin-top: 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted); }
.rules-details > summary { padding: 1rem 1.5rem; border-bottom: 1px solid var(--steel); }
.rules-group { padding: 1.5rem; }
.field-help, .group-help, .switch-row { font-size: 0.875rem; }
.micro-button, .view-run-tabs button { min-height: 2.75rem; font-size: 0.875rem; padding: 0.5rem 0.75rem; }
.button:active, .micro-button:active, .segmented button:active { transform: scale(0.98); }
.button, .micro-button { transition: background-color 120ms ease, transform 120ms ease; }
.submit-row { padding: 1.25rem 1.5rem; }
.strategy-tabs button[aria-pressed="true"] { background: var(--accent-dark); color: var(--accent-strong); }
.view-run-tabs button[aria-pressed="true"] { background: #17815e; color: #fff; border-color: #51b893; }
.metric-grid dt, .section-index, th { font-size: 0.75rem; }
.component-line, .equation, .run-card header span, .cycle-steps p, td { font-size: 0.875rem; }
.segment small { font-size: 0.75rem; }
.perspective-meta dt { font-size: 0.75rem; color: #b0bcb3; }
.perspective-meta dd, .perspective-meta p { font-size: 0.875rem; }
.perspective-svg { min-width: 0; }
.perspective-dimension-label { font-size: 16px; }
.perspective-callout-label { font-size: 13px; }
.perspective-callout-value { font-size: 16px; }
.geometry-results { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.geometry-results h4 { margin: 0 0 0.75rem; font-size: 1rem; }
.geometry-results .box-preview { margin-bottom: 0.75rem; }
.geometry-results p { font-size: 0.875rem; color: var(--muted); }
.depth-note { padding: 0.85rem 1.5rem; color: #75411f; background: #fbefe5; border-bottom: 1px solid #dfcbbb; }
.inventory-summary { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1rem 0; }
.inventory-summary span { font-size: 0.875rem; color: var(--muted); }
.inventory-summary strong { color: var(--text); }
.is-stale { opacity: 0.62; }
@media (prefers-reduced-motion: no-preference) { .plan-identity { animation: result-in 160ms ease-out; } @keyframes result-in { from { opacity: 0.4; } to { opacity: 1; } } }
@media (max-width: 1000px) { .pours-grid { grid-template-columns: 1fr; } .pour-panel + .pour-panel { border-left: 0; } }
@media (max-width: 767px) {
  .intro { padding-block: 1.5rem; gap: 1rem; }
  .project-strip, .builder-introduction, .geometry-results, .geometry-controls { grid-template-columns: 1fr; gap: 1rem; }
  .deck-heading, .results-header, .project-strip, .builder-introduction, .pour-panel, .rules-group { padding: 1rem; }
  .view-run-tabs { flex-wrap: wrap; overflow: visible; }
  .perspective-stage { overflow: visible; }
  .normalized { grid-column: auto; }
  .run-row { gap: 0.5rem; }
  .rotation-control input { max-width: 7rem; }
  .toolbar { gap: 0.5rem; }
  .box-label.depth { font-size: 22px; }
}
@media (prefers-contrast: more) { .box-face { stroke: white; } .field-help, .group-help { color: #27322b; } }
@media print { .geometry-results { break-before: page; } .box-svg { max-height: 3in; } .box-label { stroke: none; } .project-actions { display: none; } }