:root {
    --wood-50: #faf6f1;
    --wood-100: #f0e8dc;
    --wood-200: #e2d2bb;
    --wood-300: #d1b896;
    --wood-400: #c19b6d;
    --wood-500: #a67c52;
    --wood-600: #8b6342;
    --wood-700: #6d4c35;
    --wood-800: #4a3425;
    --wood-900: #2d1f17;
    --sawdust: #f7f3ed;
    --chalk: #ffffff;
    --graphite: #1a1612;
    --pencil: #3d342b;
    --steel: #6b7280;
    --blade: #e74c3c;
    --blade-hover: #c0392b;
    --green-ok: #27ae60;
    --green-light: #eafaf1;
    --amber: #f39c12;
    --amber-light: #fef9e7;
    --kerf: rgba(231, 76, 60, 0.15);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(45,31,23,0.06);
    --shadow-md: 0 4px 16px rgba(45,31,23,0.08);
    --shadow-lg: 0 8px 32px rgba(45,31,23,0.12);
    --shadow-xl: 0 16px 48px rgba(45,31,23,0.16);
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    color: var(--pencil);
    background: var(--sawdust);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* The floor the footer sinks to on a short page - see footer below. */
    min-height: 100dvh;
  }

  /* ═══════════════════ NAV ═══════════════════ */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(247, 243, 237, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--wood-200);
    padding: 0 24px;
  }

  .nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--graphite);
  }

  .logo-icon {
    width: 28px;
    height: 28px;
    background: var(--wood-800);
    border-radius: 6px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
  }

  .logo-icon::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--blade);
    left: 60%;
    opacity: 0.9;
  }

  .logo-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--blade);
    top: 40%;
    opacity: 0.9;
  }

  .logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.3px;
  }

  .logo-text span { color: var(--wood-500); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
  }

  .nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--pencil);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  .nav-links a:hover { opacity: 1; }

  .nav-cta {
    background: var(--wood-800) !important;
    color: var(--chalk) !important;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-size: 13px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
    transition: background 0.2s !important;
  }

  .nav-cta:hover { background: var(--graphite) !important; }

  .nav-burger {
    display: none;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 0;
    position: relative;
    margin-left: auto;
  }
  .nav-burger span {
    display: block;
    position: absolute;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--graphite);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s, top 0.2s;
  }
  .nav-burger span:nth-child(1) { top: 13px; }
  .nav-burger span:nth-child(2) { top: 19px; }
  .nav-burger span:nth-child(3) { top: 25px; }
  .nav-burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .nav-burger.is-open span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

  @media (max-width: 760px) {
    .nav-burger { display: block; }
    .nav-links {
      display: none;
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      background: var(--sawdust);
      border-bottom: 1px solid var(--wood-200);
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 8px 24px 16px;
      box-shadow: var(--shadow-md);
      z-index: 99;
    }
    .nav-links.is-open { display: flex; }
    .nav-links li {
      width: 100%;
      padding: 12px 0;
      border-bottom: 1px solid var(--wood-200);
    }
    .nav-links li:last-child { border-bottom: 0; }
    .nav-links a { font-size: 16px; opacity: 0.85; display: block; }
    .nav-cta {
      display: inline-block;
      text-align: center;
      margin-top: 8px;
      padding: 10px 18px !important;
      font-size: 14px !important;
    }
    .nav-user { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
    .nav-user-link { padding: 6px 0; }
  }

  /* ═══════════════════ HERO - TOOL FIRST ═══════════════════ */
  .hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 24px 60px;
  }

  .hero-header {
    text-align: center;
    margin-bottom: 36px;
  }

  .early-access-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--wood-700);
    background: var(--wood-100);
    border: 1px solid var(--wood-300);
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    margin-bottom: 18px;
    transition: background 0.15s, color 0.15s;
  }
  .early-access-badge:hover {
    background: var(--wood-200);
    color: var(--wood-800);
  }

  .hero-header h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: var(--graphite);
    letter-spacing: -1px;
    line-height: 1.15;
    margin-bottom: 12px;
  }

  .hero-header h1 .accent { color: var(--wood-500); }

  .hero-header p {
    font-size: 16px;
    color: var(--steel);
    max-width: 520px;
    margin: 0 auto;
  }

  /* ─── Tool Container ─── */
  .tool {
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .tool-grid {
    display: grid;
    /* minmax(0, ...) for the same reason as on phones below: at 901-1000px
       the result outgrew its 1fr track and was cut off on the right. */
    grid-template-columns: 380px minmax(0, 1fr);
    min-height: 560px;
  }

  /* minmax(0, ...), not 1fr: a 1fr track is at least its widest content, and
     after Optimize the PDF / DXF / dxfkit row pushed both panels to 362px on a
     360px phone, cutting off the form's buttons (persona QA 2026-10-29). */
  @media (max-width: 900px) {
    .tool-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* ─── Input Panel ─── */
  .input-panel {
    padding: 28px;
    border-right: 1px solid var(--wood-200);
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--chalk);
    /* Grid items default to min-width:auto, so this column could not shrink
       below its widest child's min-content (the add-part row, 463px + padding
       = 519px). On a phone that pinned the panel at 519 inside a 340px cell and
       .tool's overflow:hidden silently cut the rest off - taking the "+" button,
       Qty and the inch toggle with it. */
    min-width: 0;
  }

  .panel-section h3 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--steel);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .panel-section h3 .step {
    background: var(--wood-800);
    color: var(--chalk);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-family: var(--font-mono);
  }

  .stock-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .input-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--pencil);
    opacity: 0.7;
  }

  .field-hint {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--pencil);
    opacity: 0.55;
  }

  /* Safety net: the UA rule [hidden] { display: none } has specificity 0,1,0, so
     any later author rule that sets `display` on the same element (e.g.
     .share-panel { display: flex }) silently wins and the element stays visible
     while hidden=true. Keep this ahead of any such rule. */
  [hidden] { display: none !important; }

  .share-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--wood-300);
    border-radius: 8px;
    background: var(--wood-50);
  }

  .share-panel > label {
    font-size: 12px;
    font-weight: 500;
    color: var(--pencil);
    opacity: 0.7;
  }

  .share-link-row {
    display: flex;
    gap: 6px;
  }

  .share-link-row input {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid var(--wood-200);
    border-radius: 6px;
    background: #fff;
    color: var(--pencil);
  }

  .share-channels {
    display: flex;
    gap: 8px;
  }

  .share-channels a {
    flex: 1;
    text-align: center;
    padding: 7px 10px;
    border: 1px solid var(--wood-200);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: var(--wood-700);
    background: #fff;
  }

  .share-channels a:hover { border-color: var(--wood-400); background: var(--wood-50); }

  .input-group input, .input-group select {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 14px;
    padding: 8px 10px;
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--sawdust);
    color: var(--graphite);
    transition: border-color 0.15s;
    outline: none;
  }

  .input-group input:focus, .input-group select:focus {
    border-color: var(--wood-500);
  }

  .input-group input::placeholder {
    color: var(--wood-300);
  }

  .input-full { grid-column: 1 / -1; }

  /* ─── Parts Table ─── */
  .parts-table-wrap {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--sawdust);
  }

  .parts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }

  .parts-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .parts-table th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--steel);
    background: var(--wood-100);
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--wood-200);
  }

  .parts-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--wood-100);
    font-family: var(--font-mono);
    font-size: 13px;
  }

  /* A long one-word part name ("Prateleira", or the user's own) widened the
     name column past a phone screen and the table scrolled sideways. */
  .parts-table td:nth-child(2) { overflow-wrap: anywhere; }
  /* A mixed job with edges puts the material picker under the name
     (optimizer renderParts, task 7344); the name column is then as wide
     as the picker and no longer breaks a name letter by letter. */
  .part-material-stacked { margin-top: 4px; }
  .part-material-stacked .part-material { padding-right: 18px; text-overflow: ellipsis; }

  .parts-table tr:last-child td { border-bottom: none; }

  /* Sizes and qty are typed over in place (task 6206). Borderless until hovered
     or focused, so the table still reads as a list. As wide as the number in
     it, and the negative margin gives back the padding and border: a fixed
     7ch box pushed a 360px phone's table 20-40px wider than it was. Capped at
     6ch so "23 15/16" breaks onto a second line like the plain text did. */
  .parts-table .part-cell {
    display: block;
    width: 6ch;
    padding: 2px 3px;
    margin: -3px -4px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    font: inherit;
    line-height: 1.4;
    color: inherit;
    resize: none;
    overflow: hidden;
  }
  .parts-table .part-cell[data-field="qty"] { width: 4ch; }
  @supports (field-sizing: content) {
    .parts-table .part-cell,
    .parts-table .part-cell[data-field="qty"] { width: auto; field-sizing: content; min-width: 2ch; max-width: calc(6ch + 8px); }
  }
  .parts-table .part-cell:hover { border-color: var(--wood-200); }
  .parts-table .part-cell:focus { outline: none; border-color: var(--wood-500); background: var(--chalk); }

  /* The swatch carries the part's row number: the drawing marks a part too
     small for its name with it ("#3"), the PDF's table and the legend too
     (task 7943). */
  .parts-table .part-color {
    min-width: 16px;
    height: 16px;
    padding: 0 2px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: rgba(0,0,0,0.6);
    font-variant-numeric: tabular-nums;
  }

  .add-part-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
  }

  /* ─── Extra sheet sizes ─── */
  .extra-stocks { display: flex; flex-direction: column; gap: 6px; }
  .extra-stocks:not(:empty) { margin-top: 8px; }

  .extra-stock-row {
    display: flex;
    gap: 6px;
    align-items: center;
    /* Six controls now that a row names its own material: let them wrap rather
       than shrink past thumb size on a phone. */
    flex-wrap: wrap;
  }

  .extra-stock-row input,
  .extra-stock-row select {
    flex: 1;
    min-width: 64px;
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 7px 8px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--chalk);
    color: var(--graphite);
    outline: none;
  }
  .extra-stock-row select { flex: 1.4; font-family: var(--font-body); }
  /* An offcut row has no price - it is already paid for - so the tag sits
     where the price would, and says why the row behaves differently. */
  .offcut-tag {
    flex: 1;
    min-width: 64px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 7px 8px;
    border-radius: var(--radius-sm);
    background: var(--wood-100);
    color: var(--wood-700);
  }
  .stat-note { font-size: 11px; color: var(--wood-700); margin-top: 2px; }
  .extra-stock-row input:focus,
  .extra-stock-row select:focus { border-color: var(--wood-500); }

  /* Which board a part is cut from. Only rendered once the job holds more than
     one material, so it costs a single-material list nothing. */
  .part-material {
    width: 100%;
    min-width: 90px;
    font-family: var(--font-body);
    font-size: 12px;
    padding: 3px 4px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--chalk);
    color: var(--graphite);
    outline: none;
  }
  .part-material:focus { border-color: var(--wood-500); }

  /* Edge banding: four toggles per row, only while the switch is on. A 2x2
     grid (long sides over ends) rather than a row of four: in a row they
     pushed the table 60px past the panel on desktop and on a phone. */
  .parts-table.with-edges th,
  .parts-table.with-edges td { padding-left: 5px; padding-right: 5px; }
  .part-edges-grid { display: grid; grid-template-columns: repeat(2, 22px); gap: 2px; }
  .edge-btn {
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1;
    height: 18px;
    padding: 0;
    border: 1px solid var(--wood-200);
    border-radius: 3px;
    background: var(--chalk);
    color: var(--steel);
    cursor: pointer;
  }
  .edge-btn.on { background: #1f2937; border-color: #1f2937; color: #fff; }

  /* Grain lock: one arrow per row, filled while the part is locked (task 5027). */
  .grain-head { text-align: center; }
  .part-grain { text-align: center; }
  .grain-btn {
    font-size: 13px;
    line-height: 1;
    width: 24px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--wood-200);
    border-radius: 3px;
    background: var(--chalk);
    color: var(--steel);
    cursor: pointer;
  }
  .grain-btn.on { background: #6b4f2a; border-color: #6b4f2a; color: #fff; }
  .part-grain-stacked { margin-top: 4px; }
  .part-grain-stacked .grain-btn { width: 100%; }
  /* A finger needs more than a cursor (WCAG 2.5.8 asks 24px): at 22x18 the
     neighbouring edge was the easy hit on a phone. The extra size goes into
     height, which is free; width is what pushed the delete button out of a
     390px screen at 28px, so the cells give up a pixel of padding as well. */
  @media (pointer: coarse) {
    .parts-table.with-edges th,
    .parts-table.with-edges td { padding-left: 4px; padding-right: 4px; }
    .part-edges-grid { grid-template-columns: repeat(2, 24px); gap: 4px; }
    .edge-btn { height: 30px; font-size: 11px; }
  }

  .edge-banding-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--graphite);
    cursor: pointer;
    margin-bottom: 6px;
  }
  .edge-banding-group .input-group { margin-top: 4px; }

  .edge-banding-note {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--sawdust);
    font-size: 13px;
  }
  .edge-banding-cut { margin-top: 4px; color: var(--steel); font-size: 12px; }

  /* The material picker of a mixed job takes a line of its own under the
     inputs: beside them it squeezed the placeholders to "No" and "Ca"
     (task 7344). */
  .add-part-row select {
    order: 1;
    flex: 1 0 100%;
    font-family: var(--font-body);
    font-size: 13px;
    padding: 7px 6px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--chalk);
    color: var(--graphite);
    outline: none;
  }

  /* One line per board the job actually opens: a mixed job cannot be shopped
     for from a single total. */
  .material-breakdown {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    background: var(--sawdust);
  }

  .material-breakdown-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
  }

  .material-breakdown-name { font-weight: 600; color: var(--graphite); }
  .material-breakdown-qty { color: var(--wood-700); margin-left: auto; font-family: var(--font-mono); }
  .material-breakdown-cost { font-family: var(--font-mono); color: var(--graphite); min-width: 60px; text-align: right; }

  .btn-add-stock {
    margin-top: 8px;
    align-self: flex-start;
    background: var(--wood-50);
    border: 1px dashed var(--wood-400);
    border-radius: var(--radius-sm);
    color: var(--wood-800);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
  }
  .btn-add-stock:hover { border-color: var(--wood-600); background: var(--wood-100); }

  /* ─── Parts import (task 5029) ─── */
  .import-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .import-panel textarea {
    width: 100%;
    font-family: var(--font-mono);
    /* 16px, like the other fields: under that iOS Safari zooms the page on focus. */
    font-size: 16px;
    padding: 8px;
    border: 1.5px dashed var(--wood-300);
    border-radius: var(--radius-sm);
    background: transparent;
    resize: vertical;
  }
  .import-hint { color: var(--wood-600); font-size: 12px; line-height: 1.45; }
  .import-hint a { color: inherit; text-decoration: underline; }
  .import-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .import-actions .btn-add-stock { margin-top: 0; }
  .import-panel textarea.dragging { border-color: var(--wood-600); background: var(--wood-50); }
  /* The input stays in the label, focusable, so the keyboard still reaches the
     picker; only the browser's "Choose file" chrome is hidden. */
  .import-file { position: relative; }
  .import-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
  .import-file:focus-within { outline: 2px solid var(--wood-600); outline-offset: 2px; }
  .import-result { font-size: 13px; color: var(--graphite); margin: 0; }
  .import-result-warn { color: #b45309; }

  .stock-hint {
    margin-top: 6px;
    max-width: 42ch;
    color: var(--wood-600);
    font-size: 12px;
    line-height: 1.45;
  }

  .add-part-row input {
    font-family: var(--font-mono);
    font-size: 13px;
    padding: 7px 8px;
    border: 1.5px dashed var(--wood-300);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--graphite);
    outline: none;
    flex: 1;
    min-width: 0;
  }

  .add-part-row input::placeholder { color: var(--wood-300); font-size: 12px; }
  .add-part-row input:focus { border-color: var(--wood-500); border-style: solid; }

  .btn-add {
    background: var(--wood-100);
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-sm);
    color: var(--wood-600);
    font-size: 18px;
    width: 34px;
    cursor: pointer;
    transition: all 0.15s;
    display: grid;
    place-items: center;
  }

  .btn-add:hover {
    background: var(--wood-200);
    color: var(--wood-800);
  }

  /* ─── Settings Row ─── */
  .settings-row {
    display: flex;
    gap: 12px;
    align-items: end;
  }

  .settings-row .input-group { flex: 1; }

  /* ─── Optimize Button ─── */
  .btn-optimize {
    width: 100%;
    padding: 14px;
    background: var(--blade);
    color: var(--chalk);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .btn-optimize:hover {
    background: var(--blade-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3);
  }

  .btn-optimize:active { transform: translateY(0); }

  .btn-optimize svg { width: 18px; height: 18px; }

  /* ─── Result Panel ─── */
  .result-panel {
    padding: 28px;
    display: flex;
    flex-direction: column;
    background: var(--sawdust);
  }

  /* Wraps: on a phone the heading over the PDF / DXF / dxfkit row, which is
     wider than the panel, instead of both squeezed into one line past it. */
  .result-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .result-header .result-actions { min-width: 0; }

  .result-header h3 {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--steel);
  }

  .result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--wood-200);
    background: var(--chalk);
    color: var(--pencil);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .btn-sm:hover { border-color: var(--wood-400); background: var(--wood-50); }

  /* A pointer, not an action: it sits with the export buttons because that is
     where the file is, and wraps under them on a narrow screen. */
  .dxfkit-link {
    align-self: center;
    font-size: 12px;
    color: var(--steel);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
  }
  .dxfkit-link:hover { color: var(--graphite); }

  /* ─── Cutting Diagram ─── */
  .diagram-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .sheet-diagram {
    background: var(--chalk);
    border: 2px solid var(--wood-300);
    border-radius: var(--radius-md);
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  .sheet-label {
    position: absolute;
    top: -10px;
    left: 12px;
    background: var(--wood-800);
    color: var(--chalk);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.5px;
  }

  /* Mock cut pieces */
  .piece {
    position: absolute;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: rgba(0,0,0,0.6);
    transition: all 0.3s ease;
    cursor: default;
    border: 1px solid rgba(0,0,0,0.08);
  }

  .piece:hover {
    filter: brightness(0.95);
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

  .piece-a { background: #a8d8ea; top: 2%; left: 1%; width: 48%; height: 55%; }
  .piece-b { background: #f6d186; top: 2%; left: 50%; width: 30%; height: 55%; }
  .piece-c { background: #cce5ae; top: 2%; left: 81%; width: 18%; height: 38%; }
  .piece-d { background: #f2b5a0; top: 60%; left: 1%; width: 35%; height: 38%; }
  .piece-e { background: #d4b8e0; top: 60%; left: 37%; width: 25%; height: 38%; }
  .piece-f { background: #b8d4e3; top: 60%; left: 63%; width: 18%; height: 38%; }
  .piece-waste {
    background: repeating-linear-gradient(
      45deg,
      var(--wood-100),
      var(--wood-100) 4px,
      var(--wood-200) 4px,
      var(--wood-200) 8px
    );
    top: 42%; left: 81%; width: 18%; height: 16%;
    font-size: 9px;
    color: var(--steel);
  }
  .piece-waste2 {
    background: repeating-linear-gradient(
      45deg,
      var(--wood-100),
      var(--wood-100) 4px,
      var(--wood-200) 4px,
      var(--wood-200) 8px
    );
    top: 60%; left: 82%; width: 17%; height: 38%;
    font-size: 9px;
    color: var(--steel);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-family: var(--font-mono);
    font-weight: 600;
    cursor: default;
  }

  /* ─── Stats Bar ─── */
  .stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .stat-card {
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-align: center;
    /* A 1fr track is at least its widest label: on a phone "Aprovechamiento"
       pushed the second column past the panel. */
    min-width: 0;
  }

  .stat-value {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--graphite);
    line-height: 1;
    margin-bottom: 4px;
  }

  .stat-value.good { color: var(--green-ok); }
  .stat-value.warn { color: var(--amber); }

  .stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* ─── Sheet inventory note (needs vs on-hand) ─── */
  .inventory-note {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.55;
  }
  .inventory-ok {
    background: #eef6ec;
    border: 1px solid #cbe3c4;
    color: #2f6b2f;
  }
  .inventory-short {
    background: #fdf1ec;
    border: 1px solid #f2cfc0;
    border-left: 4px solid var(--blade);
    color: var(--pencil);
  }
  .inventory-title {
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 4px;
  }
  .inventory-row strong { color: var(--blade-hover); }
  .inventory-total {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--wood-300);
    font-weight: 600;
    color: var(--graphite);
  }

  @media (max-width: 600px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
  }

  /* ─── Save CTA (anon, post-result) ─── */
  .save-cta-anon {
    margin-top: 16px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #fff7e6 0%, #fff0d4 100%);
    border: 1px solid #e8c98a;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
  }
  .save-cta-anon-text {
    font-size: 14px;
    color: var(--graphite);
    line-height: 1.4;
  }
  .save-cta-anon-text strong { color: var(--graphite); font-weight: 700; }
  .save-cta-anon-btn {
    background: var(--graphite);
    color: var(--chalk);
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
  }
  .save-cta-anon-btn:hover { opacity: 0.88; }

  /* ═══════════════════ SOCIAL PROOF BAR ═══════════════════ */
  .proof-bar {
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    opacity: 0.5;
  }

  .proof-item {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--steel);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .proof-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-ok);
  }

  /* ═══════════════════ HOW IT WORKS ═══════════════════ */
  .section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 24px;
  }

  .section-header {
    text-align: center;
    margin-bottom: 48px;
  }

  .section-header h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700;
    color: var(--graphite);
    letter-spacing: -0.5px;
    margin-bottom: 10px;
  }

  .section-header p {
    font-size: 15px;
    color: var(--steel);
    max-width: 460px;
    margin: 0 auto;
  }

  .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  @media (max-width: 700px) {
    .steps-grid { grid-template-columns: 1fr; }
  }

  .step-card {
    text-align: center;
    padding: 32px 24px;
  }

  .step-number {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    color: var(--wood-200);
    line-height: 1;
    margin-bottom: 16px;
  }

  .step-card h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 8px;
  }

  .step-card p {
    font-size: 14px;
    color: var(--steel);
    line-height: 1.6;
  }

  /* ═══════════════════ SAVINGS SECTION ═══════════════════ */
  .savings {
    background: var(--wood-800);
    color: var(--chalk);
    border-radius: var(--radius-lg);
    padding: 48px;
    margin: 0 24px;
    max-width: 1152px;
    margin-left: auto;
    margin-right: auto;
  }

  .savings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }

  @media (max-width: 700px) {
    .savings-grid { grid-template-columns: 1fr; }
    .savings { padding: 32px 24px; }
  }

  .savings h2 {
    font-family: var(--font-display);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .savings p {
    font-size: 15px;
    opacity: 0.75;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  .savings-example {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    padding: 24px;
  }

  .savings-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
  }

  .savings-row:last-child { border-bottom: none; }

  .savings-row .label { opacity: 0.6; }
  .savings-row .val { font-family: var(--font-mono); font-weight: 600; }
  .savings-row .val.highlight { color: var(--green-ok); font-size: 18px; }

  /* ═══════════════════ TEMPLATES ═══════════════════ */
  .templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }

  .template-card {
    background: var(--chalk);
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-md);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
  }

  .template-card:hover {
    border-color: var(--wood-400);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .template-icon {
    font-size: 28px;
    margin-bottom: 10px;
  }

  .template-card h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--graphite);
    margin-bottom: 4px;
  }

  .template-card p {
    font-size: 12px;
    color: var(--steel);
  }

  .template-parts {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--wood-500);
  }

  /* ═══════════════════ FAQ ═══════════════════ */
  .faq-list {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .faq-item {
    border-bottom: 1px solid var(--wood-200);
  }

  .faq-q {
    width: 100%;
    padding: 18px 0;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--graphite);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .faq-q::after {
    content: '+';
    font-size: 20px;
    font-weight: 400;
    color: var(--steel);
    transition: transform 0.2s;
  }

  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .faq-a-inner {
    padding: 0 0 18px;
    font-size: 14px;
    color: var(--steel);
    line-height: 1.7;
  }

  .faq-item.open .faq-q::after { transform: rotate(45deg); }
  .faq-item.open .faq-a { max-height: 200px; }

  /* ═══════════════════ FOOTER ═══════════════════ */
  /* Always at the bottom: on a page shorter than the screen (404, sign-in)
     sticky pushes it down to the body's floor; on a longer one the threshold
     is never reached and it stays in the flow. Chosen over a flex column on
     body, which would stop the margins of every page's sections collapsing. */
  footer {
    position: sticky;
    top: 100dvh;
    border-top: 1px solid var(--wood-200);
    padding: 40px 24px;
    margin-top: 40px;
  }

  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-copy {
    font-size: 13px;
    color: var(--steel);
  }

  .footer-links {
    display: flex;
    gap: 24px;
    list-style: none;
  }

  .footer-links a {
    font-size: 13px;
    color: var(--steel);
    text-decoration: none;
  }

  .footer-links a:hover { color: var(--pencil); }

  /* ═══════════════════ ANIMATIONS ═══════════════════ */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-header { animation: fadeUp 0.6s ease both; }
  /* backwards, not both: a transform kept after the animation makes .tool the
     box a position:fixed child is placed in, and the piece tooltip landed a
     panel's offset to the right of its part, past the window (task 7344 QA). */
  .tool { animation: fadeUp 0.6s ease 0.15s backwards; }
  .proof-bar { animation: fadeUp 0.6s ease 0.3s both; }

  /* ═══════════════════ TOP TOGGLES ═══════════════════ */
  .top-toggles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }

  .mode-toggle, .unit-toggle {
    display: flex;
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .mode-toggle button, .unit-toggle button {
    flex: 1;
    padding: 8px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--steel);
    transition: all 0.15s;
  }

  .mode-toggle button.active, .unit-toggle button.active {
    background: var(--wood-800);
    color: var(--chalk);
  }

  .error-banner {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    color: #dc2626;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
  }

  /* The one remedy the tool can carry out itself, inside the message that asks
     for it. Prose alone did not move anyone: three runs on one board-shaped
     stock and two more boards added to the list instead (prod 2026-08-07). */
  .btn-error-action {
    display: block;
    margin-top: 10px;
    padding: 7px 14px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #dc2626;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
  }

  .btn-error-action:hover { background: #b91c1c; }

  /* The row the error names, once the user asks to be shown it. Held rather
     than flashed away: he still has to type the right size into it, and a
     highlight that has faded by then leaves him counting rows again. */
  .parts-table tr.part-row-flagged {
    background: #fef2f2;
    outline: 2px solid #dc2626;
    outline-offset: -2px;
  }

  /* A layout that packed but should not be cut - a kerf wider than any blade.
     Amber rather than the banner's red: the run succeeded and the diagram
     below it is still worth reading, so this must not look like a failure.
     Prod 2026-07-13..08-10: 37 runs above 20mm, one a six-sheet job at
     81.28mm, none of which the tool said a word about. */
  .kerf-warning {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
  }

  /* ═══════════════════ SVG DIAGRAM ═══════════════════ */
  /* The sheet/bar labels are absolutely positioned at top:-10px of their own
     diagram. Without a positioned wrapper they anchor to .tool instead and pile
     up over the left panel, ~150px above the sheet they name. */
  .sheet-wrapper { width: 100%; margin-bottom: 16px; position: relative; }
  /* The label pill sits in a strip of its own above the drawing: hung over
     the sheet's top edge it covered the first row of parts and their tape
     marks (task 7344). The 3D button shares the strip. */
  .sheet-wrapper:has(> .sheet-label) { padding-top: 26px; }
  .sheet-wrapper > .sheet-label { top: 0; }
  .sheet-wrapper > .sheet-view-toggle { top: -1px; }

  .sheet-svg {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--wood-300);
  }


  /* ─── 3D cutting order (cut_sequence_controller) ─── */
  /* Opens it: on the same line as the sheet label, at the other end. */
  .sheet-view-toggle {
    position: absolute; top: -12px; right: 12px; z-index: 2;
    font: 600 11px var(--font-mono);
    padding: 3px 10px; border-radius: 3px; cursor: pointer;
    border: 1.5px solid var(--blade); background: var(--chalk); color: var(--blade);
  }
  .sheet-view-toggle:hover { background: var(--blade); color: var(--chalk); }
  /* On a phone the sheet label wraps to two lines and would cover it. */
  @media (max-width: 640px) {
    .sheet-wrapper:has(.sheet-view-toggle) { display: flex; flex-direction: column; }
    .sheet-view-toggle { position: static; order: 2; align-self: flex-end; margin-top: 8px; padding: 6px 12px; }
  }

  /* Full screen, over everything including the /v2 result modal (z 200) and
     the piece tooltip (z 1000). The page behind must not scroll under it. */
  html.cs-open, html.cs-open body { overflow: hidden; }
  .cs-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; flex-direction: column;
    background: radial-gradient(ellipse at 50% 45%, #2a231d 0%, #0b0907 70%);
    color: #eee6dc;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .cs-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
  .cs-label { flex: 1; font: 600 13px var(--font-mono); color: #d8cbbb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-sheet-nav { display: flex; gap: 6px; }
  .cs-sheet-nav[hidden] { display: none; }
  .cs-btn.cs-close { font-size: 24px; font-weight: 400; line-height: 1; width: 40px; height: 40px; justify-content: center; }

  .cs-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer;
    font-size: 13px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #eee6dc;
    transition: background 0.15s, border-color 0.15s;
  }
  .cs-btn:hover:not(:disabled) { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.35); }
  .cs-btn:disabled { opacity: 0.35; cursor: default; }
  .cs-btn:focus-visible { outline: 2px solid var(--blade); outline-offset: 2px; }

  /* A size container, so the board can be sized against the stage in both
     directions (cqw/cqh) whatever shape the sheet is. */
  .cs-stage {
    position: relative; flex: 1; min-height: 0; container-type: size;
    perspective: 1600px; touch-action: none; cursor: grab; user-select: none; overflow: hidden;
  }
  .cs-stage:active { cursor: grabbing; }
  .cs-board {
    --thick: 14px;
    position: absolute; left: 50%; top: 50%;
    width: min(82cqw, 74cqh * var(--arn));
    aspect-ratio: var(--ar);
    transform-style: preserve-3d;
  }
  /* Turned a quarter (PORTRAIT_TURN), so its length runs up the stage. */
  .cs-board.is-portrait { width: min(70cqh, 74cqw * var(--arn)); }
  /* Only once it is on screen: animating the first angle in slides the board
     in from the side, since it starts out untranslated. */
  .cs-board.is-live { transition: transform 0.4s ease; }
  .cs-board.is-live.is-dragging { transition: none; }
  .cs-face {
    position: absolute; inset: 0; transform-style: preserve-3d;
    background: repeating-linear-gradient(45deg, var(--wood-300) 0 2px, var(--wood-100) 2px 9px);
    box-shadow: 0 0 0 1px var(--wood-500), 0 40px 80px rgba(0,0,0,0.55);
  }
  .cs-edge { position: absolute; background: var(--wood-500); }
  .cs-edge-front { left: 0; top: 100%; width: 100%; height: var(--thick); transform-origin: top; transform: rotateX(-90deg); background: var(--wood-600); }
  .cs-edge-side { top: 0; left: 100%; height: 100%; width: var(--thick); transform-origin: left; transform: rotateY(90deg); }

  .cs-part {
    position: absolute; box-sizing: border-box; border: 1px solid rgba(0,0,0,0.15); border-radius: 1px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    transition: transform 0.45s cubic-bezier(.2,.8,.3,1.2), box-shadow 0.45s;
  }
  /* Name over size, as on the diagram. The font is sized on the face, against
     the stage; each part is a size container so the tag can take the part's
     shape - turned back a quarter on a portrait board, where its width is the
     part's height (its padding turns with it: tag top = part left). The tag is
     a container too, so the text fits its own box, past any tape (--pad-*).
     Both lines shrink to fit the way fitLabel does on the diagram (--n =
     characters, 0.6em a glyph): the name down to 0.75em, then an ellipsis;
     the size never gets an ellipsis - "250×11…" reads as another number. The
     size line drops when two lines do not fit the height. */
  .cs-face { font-size: clamp(9px, 1.4cqw, 15px); }
  .cs-board.is-portrait .cs-face { font-size: clamp(9px, 1.4cqh, 15px); }
  .cs-part { container-type: size; }
  .cs-tag {
    position: relative; z-index: 1; box-sizing: border-box;
    container-type: size; width: 100%; height: 100%; flex: none;
    padding: var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
  }
  .cs-board.is-portrait .cs-tag {
    width: 100cqh; height: 100cqw; rotate: -90deg;
    padding: var(--pad-left) var(--pad-top) var(--pad-right) var(--pad-bottom);
  }
  .cs-tag span { max-width: 100%; white-space: nowrap; overflow: hidden; }
  .cs-name {
    font: 600 max(0.75em, min(1em, 90cqw / (var(--n) * 0.6))) 'DM Sans', sans-serif;
    color: rgba(0,0,0,0.62); text-overflow: ellipsis;
  }
  .cs-size { font: min(max(0.8em, 9px), 94cqw / (var(--n) * 0.62)) var(--font-mono); color: rgba(0,0,0,0.55); }
  @container (max-height: 2.3em) { .cs-size { display: none; } }
  /* Tape marks (tapeBox, in percent of the part): never under 2px, or the
     diagram's 1/250 of the sheet vanishes on a small part. */
  .cs-tape { position: absolute; background: #1f2937; }
  .cs-tape-h { min-height: 2px; }
  .cs-tape-v { min-width: 2px; }
  /* Off the sheet: lifted, and drawn a little smaller so a gap opens between
     neighbours - at true scale the kerf is a pixel or two and lifted parts
     merge into one slab. The board shows the footprint it left (.cs-hole)
     rather than a sideways shadow, which fell on the next part and made it
     look lower than it was. */
  .cs-part.is-free { transform: translateZ(22px) scale(0.94); box-shadow: 0 0 0 1px rgba(0,0,0,0.25); }
  .cs-hole { position: absolute; background: rgba(20,14,10,0.55); opacity: 0; transition: opacity 0.45s; }
  .cs-hole.is-free { opacity: 1; }
  /* Waste: same board as the sheet until its cut, then thrown off the nearest
     edge (--dx/--dy, set per offcut) and gone. */
  .cs-offcut {
    position: absolute;
    background: repeating-linear-gradient(45deg, var(--wood-300) 0 2px, var(--wood-100) 2px 9px);
    transition: transform 0.6s ease-in, opacity 0.6s ease-in;
  }
  .cs-offcut.is-free { transform: translate(calc(var(--dx) * 10cqw), calc(var(--dy) * 10cqw)) translateZ(30px); opacity: 0; }
  /* Freed by the cut being made right now: waits for the blade (0.7s). */
  .cs-part.is-late, .cs-hole.is-late, .cs-offcut.is-late { transition-delay: 0.7s; }

  /* Kerf lines: hidden until reached, the current one drawn by the blade. */
  .cs-line { position: absolute; background: var(--blade); opacity: 0; transform: translateZ(1px); }
  .cs-line-h { height: 2px; margin-top: -1px; transform-origin: left center; }
  .cs-line-v { width: 2px; margin-left: -1px; transform-origin: center top; }
  .cs-line.is-done { opacity: 0.4; }
  .cs-line.is-cutting { opacity: 1; box-shadow: 0 0 10px 1px var(--blade); }
  .cs-line-h.is-cutting { animation: cs-saw-h 0.7s ease-out; }
  .cs-line-v.is-cutting { animation: cs-saw-v 0.7s ease-out; }
  @keyframes cs-saw-h { from { transform: translateZ(1px) scaleX(0); } to { transform: translateZ(1px) scaleX(1); } }
  @keyframes cs-saw-v { from { transform: translateZ(1px) scaleY(0); } to { transform: translateZ(1px) scaleY(1); } }

  .cs-hint { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(238,230,220,0.45); pointer-events: none; }
  /* A landscape phone leaves the stage ~200px tall: the tilted board's front
     edge reaches the bottom and the hint sat on the sheet. Shrinking the board
     to clear it costs more than the hint, which portrait already showed. */
  @media (max-height: 500px) { .cs-hint { display: none; } }
  .cs-bottom { padding: 8px 16px 16px; max-width: 960px; width: 100%; margin: 0 auto; box-sizing: border-box; }
  .cs-caption { margin: 0 0 10px; font-size: 16px; line-height: 1.4; min-height: 2.8em; text-align: center; color: #f5efe7; }
  .cs-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
  .cs-range { flex: 1 1 160px; min-width: 120px; accent-color: var(--blade); }
  .cs-step { font: 600 12px var(--font-mono); color: #d8cbbb; min-width: 9ch; }
  .cs-play { background: var(--blade); border-color: var(--blade); color: #fff; }
  .cs-play:hover:not(:disabled) { background: var(--blade-hover); border-color: var(--blade-hover); }
  .cs-play .cs-pause-label, .cs-play.is-playing .cs-play-label { display: none; }
  .cs-play.is-playing .cs-pause-label { display: inline; }

  @media (prefers-reduced-motion: reduce) {
    .cs-board.is-live, .cs-part, .cs-hole, .cs-offcut { transition: none; }
    .cs-line.is-cutting { animation: none; }
  }

  .piece-rect { cursor: default; transition: filter 0.15s; }
  .piece-rect:hover { filter: brightness(0.92); }

  .piece-tooltip {
    display: none;
    position: fixed;
    z-index: 1000;
    background: var(--graphite);
    color: var(--chalk);
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    pointer-events: none;
    transform: translate(-50%, -100%);
    width: max-content;
    max-width: min(360px, calc(100vw - 16px));
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-md);
  }
  .piece-tooltip.below { transform: translate(-50%, 0); }

  .sheet-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .sheet-nav-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--steel);
  }

  .sheet-nav button:disabled { opacity: 0.3; cursor: default; }

  .parts-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--wood-200);
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pencil);
  }

  .legend-color {
    min-width: 18px;
    height: 18px;
    padding: 0 3px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: rgba(0,0,0,0.6);
    font-variant-numeric: tabular-nums;
  }

  .bar-wrapper { margin-bottom: 16px; position: relative; }
  /* Its pill in a strip above the bar, as a sheet's: hung over the bar's top
     edge it covered the names now drawn there (task 8032). The phone layout
     puts the pill in the flow instead. */
  .bar-wrapper { padding-top: 26px; }
  .bar-wrapper > .sheet-label { top: 0; }
  /* A fixed height on screen, whatever the stock's length (task 8032): drawn
     as a stockLen x 80 viewBox a 96" bar was 15px tall on a phone. */
  .bar-svg { display: block; width: 100%; height: 48px; overflow: hidden; border-radius: var(--radius-sm); border: 2px solid var(--wood-300); box-shadow: var(--shadow-sm); }
  @media (min-width: 768px) { .bar-svg { height: 56px; } }

  .stat-value.bad { color: var(--blade); }
  .stat-value.ok { color: var(--amber); }

  /* ═══════════════════ PRINT ═══════════════════ */
  @page { margin: 12mm; }
  /* Filled only for printing (optimizer printSheets). */
  .print-sheets { display: none; }
  @media print {
    nav, .input-panel, .btn-optimize, .proof-bar,
    .section, .savings, footer, .hero-header,
    .result-actions, .sheet-nav, .piece-tooltip { display: none !important; }
    /* Every sheet, one per page (optimizer printSheets), instead of the one
       on screen cut off at the page foot; no banners, buttons or forms on
       paper (task 7344). */
    .v2-banner, .error-banner, .share-panel, .save-cta-anon, .sheet-view-toggle,
    .diagram-area > .sheet-wrapper { display: none !important; }
    .hero { padding: 0; max-width: none; }
    .tool { border: 0; border-radius: 0; overflow: visible; box-shadow: none; animation: none; }
    .tool-grid { min-height: 0; }
    /* A flex column does not split across pages in Chrome: the cards after
       the sheets were drawn over the last one. */
    .result-panel, .diagram-area { display: block; }
    .diagram-area > * + * { margin-top: 16px; }
    .print-sheets { display: block; }
    .print-sheet { break-inside: avoid; margin: 0 auto; }
    .stat-card, .stats-bar, .material-breakdown, .edge-banding-note { break-inside: avoid; }
    .print-sheet + .print-sheet { break-before: page; }
    .print-sheet .sheet-wrapper { padding-top: 0; }
    .print-sheet .sheet-label { position: static; display: inline-block; margin-bottom: 6px; }
    .print-sheet .sheet-svg { width: 100%; max-height: 22cm; }
    .result-panel { width: 100%; padding: 0; }
    .tool-grid { grid-template-columns: 1fr !important; }
  }

  /* ═══════════════════ MOBILE ═══════════════════ */
  @media (max-width: 900px) {
    .tool-grid { grid-template-columns: minmax(0, 1fr); }
    .input-panel { border-right: none; border-bottom: 1px solid var(--wood-200); }
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 480px) {
    /* The desktop gutters (24 hero + 28 panel per side) left the parts table
       254px on a 360px phone: it scrolled sideways with the delete button past
       the edge, "Lateral" broke mid-word, and the "Aprovechamiento" stat card
       stuck out of the result column (task 7339). */
    .hero { padding-left: 12px; padding-right: 12px; }
    .input-panel, .result-panel { padding: 20px 16px; }
    .stat-card { padding: 12px 8px; }

    .stock-inputs { grid-template-columns: 1fr; }
    .add-part-row input { font-size: 16px; }
    .input-group input, .input-group select { font-size: 16px; }

    /* The label is a small pill floating above its sheet on a wide screen, but
       "Sheet 1 of 2 · Plywood (18mm) 96.06 × 48.03 in" is wider than a phone
       sheet: absolute-positioned it wraps to two lines and covers the diagram.
       Put it in the flow instead. */
    .sheet-wrapper:has(> .sheet-label), .bar-wrapper { padding-top: 0; }
    .sheet-label, .bar-wrapper .sheet-label {
      position: static;
      display: block;
      margin-bottom: 8px;
      border-radius: var(--radius-sm);
      line-height: 1.5;
    }
  }

  .btn-delete {
    background: none;
    border: none;
    color: var(--steel);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.15s;
  }
  .btn-delete:hover { color: var(--blade); background: var(--kerf); }

  .btn-optimize:disabled { opacity: 0.7; cursor: wait; }
  /* Share before a layout exists: look unavailable, and say why via title. */
  .btn-save:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn-optimize svg { width: 18px; height: 18px; }

  /* ═══════════════════ PRICING ═══════════════════ */
  .pricing-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 80px;
  }
  .pricing-header {
    text-align: center;
    margin-bottom: 48px;
  }
  .pricing-header h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--graphite);
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 14px 0 14px;
  }
  .pricing-header p {
    color: var(--steel);
    font-size: 16px;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.65;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 760px;
    margin: 0 auto;
  }
  .price-card {
    position: relative;
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-lg);
    padding: 28px 26px 30px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
  }
  .price-card--current {
    border-color: var(--wood-500);
    box-shadow: var(--shadow-md);
  }
  .price-card--future {
    background: var(--sawdust);
    border-style: dashed;
  }
  .price-card-tag {
    position: absolute;
    top: -11px;
    left: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--wood-500);
    color: white;
  }
  .price-card-tag--soon {
    background: var(--wood-200);
    color: var(--wood-800);
  }
  .price-card h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 8px;
  }
  .price-card-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .price-amount {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    color: var(--graphite);
    line-height: 1;
  }
  .price-period {
    font-size: 13px;
    color: var(--steel);
  }
  .price-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
  }
  .price-features li {
    font-size: 14px;
    color: var(--pencil);
    padding: 6px 0;
    border-bottom: 1px dashed var(--wood-100);
  }
  .price-features li:last-child { border-bottom: none; }
  .price-cta {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
  }
  .price-cta--primary {
    background: var(--wood-700);
    color: white;
  }
  .price-cta--primary:hover {
    background: var(--wood-800);
    transform: translateY(-1px);
  }
  .price-note {
    background: var(--wood-100);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 13px;
    color: var(--wood-800);
    line-height: 1.5;
  }
  .price-note strong { color: var(--graphite); }

  .pricing-faq {
    max-width: 680px;
    margin: 72px auto 0;
  }
  .pricing-faq h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--graphite);
    text-align: center;
    margin-bottom: 28px;
  }
  .pricing-faq-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--wood-100);
  }
  .pricing-faq-item h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--graphite);
    margin-bottom: 6px;
  }
  .pricing-faq-item p {
    font-size: 14px;
    color: var(--pencil);
    line-height: 1.65;
  }

  /* ═══════════════════ AUTH ═══════════════════ */
  .auth-wrap {
    max-width: 420px;
    margin: 0 auto;
    padding: 48px 24px 80px;
  }
  .auth-card {
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-md);
  }
  .auth-card h1 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 6px;
  }
  .auth-sub {
    font-size: 14px;
    color: var(--steel);
    margin-bottom: 22px;
  }
  .auth-flash {
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    margin-bottom: 16px;
  }
  .auth-flash--error {
    background: #fdecea;
    color: var(--blade-hover);
    border: 1px solid #f5c6c0;
  }
  .auth-flash--ok {
    background: var(--green-light);
    color: var(--green-ok);
    border: 1px solid #b9e7cc;
  }
  /* Same gutter as .hero, so the notice lines up with the page under it. */
  .home-flash { max-width: 1200px; margin: 0 auto; padding: 24px 24px 0; }
  .home-flash .auth-flash { margin-bottom: 0; font-size: 14px; }
  .home-flash .auth-flash + .auth-flash { margin-top: 8px; }
  .auth-form { display: flex; flex-direction: column; gap: 14px; }
  .auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--pencil);
  }
  .auth-form label span { color: var(--steel); font-weight: 500; }
  /* Rails wraps a field that failed validation in div.field_with_errors; as a
     block inside the flex label it shrank the input to its own width. */
  .auth-form .field_with_errors { display: contents; }
  .auth-form input {
    padding: 10px 12px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: var(--sawdust);
    color: var(--graphite);
    transition: border-color 0.15s, background 0.15s;
  }
  .auth-form input:focus {
    outline: none;
    border-color: var(--wood-500);
    background: var(--chalk);
  }
  .auth-form button {
    margin-top: 6px;
  }
  .auth-alt {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed var(--wood-200);
    font-size: 13px;
    color: var(--steel);
    text-align: center;
  }
  .auth-alt a { color: var(--wood-700); font-weight: 600; text-decoration: none; }
  .auth-alt a:hover { color: var(--wood-800); text-decoration: underline; }
  .auth-alt span { margin: 0 8px; color: var(--wood-300); }

  /* Nav auth state */
  .nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .nav-user-name {
    font-size: 13px;
    color: var(--pencil);
    font-weight: 500;
  }
  .nav-link-btn {
    background: none;
    border: none;
    font: inherit;
    font-size: 14px;
    color: var(--steel);
    cursor: pointer;
    padding: 0;
  }
  .nav-link-btn:hover { color: var(--graphite); }
  .nav-cta {
    background: var(--wood-700);
    color: white !important;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background 0.15s;
  }
  .nav-cta:hover { background: var(--wood-800); }

  /* ─── Google OAuth button ─── */
  .btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--graphite);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  }
  .btn-google:hover {
    background: var(--sawdust);
    border-color: var(--wood-300);
    box-shadow: var(--shadow-sm);
  }
  /* button_to wraps in a form - kill the default form margin */
  .auth-card form[action="/auth/google_oauth2"] { margin: 0 0 4px; }

  .auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 10px;
    color: var(--steel);
    font-size: 12px;
    font-weight: 500;
  }
  .auth-divider::before,
  .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wood-200);
  }

  /* ═══════════════════ NAV USER (avatar + early access) ═══════════════════ */
  .nav-user-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--graphite);
  }
  .nav-user-link:hover .nav-user-name { color: var(--wood-700); }
  .nav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--wood-200);
    object-fit: cover;
  }
  .early-access-banner {
    background: var(--wood-100);
    color: var(--wood-800);
    font-size: 13px;
    padding: 8px 24px;
    text-align: center;
    border-bottom: 1px solid var(--wood-200);
    position: relative;
  }
  .early-access-banner a {
    color: var(--wood-700);
    font-weight: 600;
  }
  .early-access-banner .banner-close {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--wood-700);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.7;
  }
  .early-access-banner .banner-close:hover {
    opacity: 1;
  }

  /* ═══════════════════ ACTION ROW (Optimize + Save + Share) ═══════════════════ */
  .action-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    /* Three buttons no longer fit one narrow line; wrap instead of overflowing
       the panel (which would scroll the whole page sideways on a phone). */
    flex-wrap: wrap;
  }

  /* Optimize takes the slack and always keeps its label on one line. Save and
     Share size to their content and drop to the next line when the row is
     narrow. Keep these together: an earlier duplicate `flex: 1` further down
     silently beat the nowrap and let the row overflow. */
  .action-row .btn-optimize {
    flex: 1 1 auto;
    min-width: max-content;
    white-space: nowrap;
  }

  .action-row .btn-save {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .btn-save {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    background: var(--chalk);
    border: 1px solid var(--wood-300);
    border-radius: var(--radius-md);
    color: var(--wood-700);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .btn-save:hover {
    background: var(--wood-100);
    border-color: var(--wood-500);
    color: var(--wood-800);
  }

  /* ═══════════════════ PROJECTS LIST ═══════════════════ */
  .projects-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 24px 80px;
  }
  .projects-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
  }
  .projects-header h1 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--graphite);
    margin-bottom: 4px;
  }
  .projects-sub { color: var(--steel); font-size: 14px; }

  .projects-empty {
    background: var(--chalk);
    border: 2px dashed var(--wood-200);
    border-radius: var(--radius-lg);
    padding: 50px 24px;
    text-align: center;
  }
  .projects-empty h3 {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--graphite);
    margin-bottom: 6px;
  }
  .projects-empty p { color: var(--steel); font-size: 14px; }

  .projects-list { display: flex; flex-direction: column; gap: 10px; }
  .project-card {
    background: var(--chalk);
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .project-card:hover {
    border-color: var(--wood-400);
    box-shadow: var(--shadow-sm);
  }
  .project-card-main { flex: 1; min-width: 0; }
  .project-card-title {
    display: block;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--graphite);
    text-decoration: none;
    margin-bottom: 4px;
    /* An 80-character name in one word pushed the page 800px wide on a phone
       and the pencil off-screen (QA 8200). */
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .project-card-title:hover { color: var(--wood-700); }
  .project-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--steel);
    flex-wrap: wrap;
  }
  .project-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    background: var(--wood-100);
    color: var(--wood-800);
  }
  .project-tag--1d { background: #e3eef5; color: #1a4a6e; }
  .project-card-actions {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .project-card-actions form { margin: 0; }
  /* Three buttons beside the name left it 40-75px on a 360-390px phone and
     the meta line ran to eight lines (QA 8059): there the buttons go under. */
  @media (max-width: 640px) {
    .project-card { flex-wrap: wrap; gap: 12px; }
    .project-card-main { flex-basis: 100%; }
  }
  .btn-sm--danger { color: var(--blade); border-color: rgba(231,76,60,0.3); }
  .btn-sm--danger:hover { background: var(--kerf); color: var(--blade-hover); }
  .btn-sm--ghost { background: transparent; color: var(--steel); border-color: var(--wood-300); }
  .btn-sm--ghost:hover { background: var(--wood-50); color: var(--graphite); }

  .project-rename-view { display: flex; align-items: center; gap: 6px; }
  .project-rename-btn {
    background: transparent;
    border: 0;
    padding: 4px;
    color: var(--steel);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    border-radius: 4px;
  }
  .project-rename-btn:hover { background: var(--wood-100); color: var(--wood-700); }
  .project-card:hover .project-rename-btn { opacity: 1; }
  /* A finger has no hover: the pencil would never show on a phone. */
  @media (hover: none) { .project-rename-btn { opacity: 1; } }
  .project-rename-edit { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
  .project-rename-edit input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    font: inherit;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--graphite);
    border: 1px solid var(--wood-300);
    border-radius: 6px;
    background: var(--chalk);
  }
  .project-rename-edit input:focus { outline: 2px solid var(--wood-400); outline-offset: -1px; }
  .project-rename-error {
    font-size: 12px;
    color: var(--blade);
    margin: 4px 0 8px;
  }

  /* ═══════════════════ DANGER (account delete) ═══════════════════ */
  .btn-danger {
    background: var(--blade);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }
  .btn-danger:hover { background: var(--blade-hover); }

  /* ═══════════════════ BLOG POST ═══════════════════ */
  .post-section { max-width: 1080px; }
  .post-back {
    display: inline-block;
    font-size: 14px;
    color: var(--steel);
    text-decoration: none;
    margin-bottom: 8px;
  }
  .post-back:hover { color: var(--graphite); }

  .post-layout {
    display: grid;
    grid-template-columns: minmax(0, 720px) 240px;
    gap: 64px;
    align-items: start;
    margin-top: 16px;
  }

  .post-toc {
    position: sticky;
    top: 100px;
    font-size: 13px;
    border-left: 2px solid var(--wood-200);
    padding-left: 20px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
  .post-toc-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--wood-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
  }
  .post-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .post-toc li { margin: 0 0 10px; line-height: 1.45; }
  .post-toc a {
    color: var(--steel);
    text-decoration: none;
    display: block;
    padding: 2px 0;
    border-left: 2px solid transparent;
    margin-left: -22px;
    padding-left: 20px;
    transition: color 0.15s, border-color 0.15s;
  }
  .post-toc a:hover { color: var(--graphite); }
  .post-toc a.active {
    color: var(--graphite);
    border-left-color: var(--blade);
    font-weight: 600;
  }

  .post-cta {
    margin-top: 56px;
    padding: 28px 32px;
    background: var(--wood-50);
    border: 1.5px solid var(--wood-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .post-cta-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--graphite);
    margin: 0 0 6px;
  }
  .post-cta-text {
    font-size: 14px;
    color: var(--steel);
    margin: 0 0 14px;
  }
  .post-cta-link {
    display: inline-block;
    color: var(--blade);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.15s;
  }
  .post-cta-link:hover { border-bottom-color: var(--blade); }

  .post-article { min-width: 0; }
  .post-date {
    display: inline-block;
    font-size: 13px;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  /* The intro under a landing's title. It had no rule at all, so preflight's
     zero margin glued the CTA button to the last line of text. */
  .post-lede { margin: 0 0 24px; }
  .post-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--graphite);
    line-height: 1.2;
    margin: 8px 0 32px;
    letter-spacing: -0.01em;
  }

  .post-body {
    font-size: 17px;
    line-height: 1.75;
    color: var(--pencil);
  }
  .post-body p { margin: 0 0 20px; }
  .post-body strong { color: var(--graphite); font-weight: 600; }
  .post-body a {
    color: var(--blade);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }
  .post-body a:hover { color: var(--blade-hover); text-decoration-thickness: 2px; }

  .post-body h2 {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 700;
    color: var(--graphite);
    line-height: 1.25;
    margin: 56px 0 18px;
    padding-top: 32px;
    border-top: 2px solid var(--wood-200);
    letter-spacing: -0.01em;
  }
  .post-body > h2:first-child,
  .post-body > h2:first-of-type:not(:nth-of-type(n+2)) {
    margin-top: 24px;
  }

  .post-body h3 {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 600;
    color: var(--graphite);
    margin: 36px 0 12px;
    line-height: 1.3;
  }

  .post-body h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--wood-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 24px 0 10px;
  }

  .post-body ul, .post-body ol {
    margin: 0 0 24px;
    padding-left: 24px;
  }
  /* Tailwind preflight resets ol/ul to list-style:none; restore markers in long-form content */
  .post-body ul { list-style: disc; }
  .post-body ol { list-style: decimal; }
  .post-body li {
    margin-bottom: 10px;
    padding-left: 4px;
  }
  .post-body li::marker { color: var(--wood-500); }
  .post-body li > ul, .post-body li > ol { margin: 10px 0 0; }

  .post-body hr {
    border: 0;
    height: 1px;
    background: var(--wood-200);
    margin: 48px 0;
  }

  .post-body blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    background: var(--wood-50);
    border-left: 4px solid var(--wood-500);
    border-radius: var(--radius-sm);
    color: var(--pencil);
    font-size: 16px;
  }
  .post-body blockquote p { margin: 0 0 12px; }
  .post-body blockquote p:last-child { margin-bottom: 0; }
  .post-body blockquote strong { color: var(--graphite); }

  .post-body .callout-tldr {
    background: linear-gradient(135deg, var(--wood-50) 0%, var(--sawdust) 100%);
    border: 1.5px solid var(--wood-300);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin: 32px 0 40px;
    box-shadow: var(--shadow-sm);
  }
  .post-body .callout-tldr h2 {
    border-top: 0;
    padding-top: 0;
    margin: 0 0 16px;
    font-size: 20px;
  }
  .post-body .callout-tldr ul { margin-bottom: 0; }
  .post-body .callout-tldr li { margin-bottom: 12px; }
  .post-body .callout-tldr li:last-child { margin-bottom: 0; }

  .post-body .callout-verdict {
    background: var(--wood-50);
    border-left: 4px solid var(--wood-600);
    border-radius: var(--radius-sm);
    padding: 16px 22px;
    margin: 20px 0 32px;
  }
  .post-body .callout-verdict::before {
    content: "Verdict";
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--wood-700);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
  }
  .post-body .callout-verdict p { margin: 0; }

  .post-body .table-wrap {
    overflow-x: auto;
    margin: 28px 0 36px;
    border: 1px solid var(--wood-200);
    border-radius: var(--radius-md);
    background: var(--chalk);
    box-shadow: var(--shadow-sm);
  }
  .post-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
  }
  .post-body table thead { background: var(--wood-100); }
  .post-body table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--graphite);
    border-bottom: 2px solid var(--wood-300);
    font-size: 13px;
    white-space: nowrap;
  }
  .post-body table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--wood-100);
    vertical-align: top;
    color: var(--pencil);
  }
  .post-body table tbody tr:nth-child(even) { background: var(--sawdust); }
  .post-body table tbody tr:last-child td { border-bottom: 0; }
  .post-body table tbody tr:hover { background: var(--wood-50); }
  .post-body table strong { color: var(--graphite); }

  .post-body code {
    background: var(--wood-100);
    color: var(--wood-800);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.92em;
  }
  .post-body pre {
    background: var(--graphite);
    color: var(--wood-100);
    padding: 18px 22px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 24px 0;
    font-size: 13px;
    line-height: 1.6;
  }
  .post-body pre code { background: transparent; color: inherit; padding: 0; }

  .post-body .faq-list { counter-reset: faq; margin-top: 8px; }
  .post-body .faq-list h3 {
    counter-increment: faq;
    position: relative;
    padding-left: 60px;
    margin-top: 36px;
    margin-bottom: 10px;
    min-height: 32px;
  }
  .post-body .faq-list h3::before {
    content: counter(faq, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 2px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--wood-700);
    background: var(--wood-100);
    border: 1px solid var(--wood-300);
    border-radius: var(--radius-sm);
    padding: 5px 9px;
    letter-spacing: 0.04em;
    line-height: 1;
  }
  .post-body .faq-list > p,
  .post-body .faq-list > ul,
  .post-body .faq-list > ol { padding-left: 60px; }

  .post-body .callout-warn {
    background: #fdf1ec;
    border: 1.5px solid #f2cfc0;
    border-left: 4px solid var(--blade);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin: 32px 0 40px;
  }
  .post-body .callout-warn h2 {
    border-top: 0;
    padding-top: 0;
    margin: 0 0 16px;
    font-size: 20px;
  }
  .post-body .callout-warn p { margin-bottom: 14px; }
  .post-body .callout-warn p:last-child { margin-bottom: 0; }

  /* Template pages reuse .post-body, scaled down a notch to sit above the parts table */
  .template-body { font-size: 16px; margin-bottom: 44px; }
  .template-body .callout-tldr ul { margin-bottom: 18px; }
  .template-body .callout-tldr p:last-child { margin-bottom: 0; }
  .template-body h2 { font-size: 24px; margin: 44px 0 16px; padding-top: 28px; }
  .template-body h3 { font-size: 18px; margin: 28px 0 10px; }
  .template-body .faq-list h3 { padding-left: 56px; }
  .template-body .faq-list > p,
  .template-body .faq-list > ul { padding-left: 56px; }

  @media (max-width: 1000px) {
    .post-layout { grid-template-columns: 1fr; gap: 0; }
    .post-toc { display: none; }
    .post-section { max-width: 760px; padding: 56px 20px; }
  }

  @media (max-width: 700px) {
    .post-section { padding: 16px 18px 60px; }
    .post-layout { margin-top: 0; }
    .post-title { font-size: 26px; margin: 8px 0 24px; }
    .post-body { font-size: 16px; line-height: 1.7; }
    .post-body h2 { font-size: 22px; margin: 36px 0 14px; padding-top: 22px; }
    .post-body h3 { font-size: 18px; margin: 26px 0 10px; }
    .post-body p { margin: 0 0 16px; }
    .post-body ul, .post-body ol { padding-left: 22px; }
    .post-body table { font-size: 13px; }
    .post-body table th, .post-body table td { padding: 10px 12px; }
    .post-body blockquote { padding: 14px 16px; margin: 22px 0; }
    .post-body .faq-list h3 { padding-left: 44px; margin-top: 26px; }
    .post-body .faq-list h3::before { padding: 4px 7px; font-size: 11px; }
    .post-body .faq-list > p,
    .post-body .faq-list > ul,
    .post-body .faq-list > ol { padding-left: 44px; }
    .post-cta { padding: 20px; margin-top: 40px; }
    .post-cta-title { font-size: 16px; }
  }

/* Dropdowns in the navbar: language switcher and the signed-in account menu. */
.dropdown { position: relative; }
.dropdown-btn {
  display: flex; align-items: center; gap: 6px;
  /* Explicit properties, not the `font` shorthand: `font: 600 12px/1 inherit`
     is invalid - `inherit` is not a family - so the browser dropped the whole
     declaration and the button rendered at the 16px default. */
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: 0.04em;
  color: var(--steel); background: transparent;
  border: 1px solid var(--wood-200); border-radius: 8px;
  /* Fixed height rather than vertical padding: the account button carries a
     26px avatar, which under padding-only sizing made it 46px against the
     34px language switcher beside it. */
  height: 34px; padding: 0 12px; cursor: pointer;
}
.dropdown-btn:hover { color: var(--graphite); }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 170px; padding: 4px;
  background: #fff; border: 1px solid var(--wood-200);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.dropdown-menu[hidden] { display: none; }
.dropdown-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--pencil); text-decoration: none;
  white-space: nowrap; text-align: left;
}
.dropdown-item:hover { background: var(--wood-50); color: var(--graphite); }
.dropdown-item.current { color: var(--wood-600); font-weight: 600; }
.dropdown-item-btn { background: transparent; border: 0; font-family: inherit; cursor: pointer; }
.dropdown-form { margin: 0; display: block; }
.flag { width: 18px; height: 14px; border-radius: 2px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.nav-account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Inside the pill the 26px navbar avatar leaves 3px of air top and bottom. */
.nav-account-btn .nav-avatar { width: 22px; height: 22px; }


/* Board-foot calculator: a working tool sitting inside a markdown page, so it
   has to read as an instrument rather than as another block of prose. */
.bf-calc {
  margin: 8px 0 36px;
  padding: 20px;
  border: 1.5px solid var(--wood-200);
  border-radius: var(--radius-md, 12px);
  background: var(--sawdust);
}
.bf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.bf-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--graphite); }
.bf-note { font-size: 12px; color: var(--steel); }
.bf-settings input {
  max-width: 120px; padding: 7px 9px; border: 1.5px solid var(--wood-200); border-radius: 8px;
  background: #fff; font-family: inherit; font-size: 13px; color: var(--graphite);
}
/* The prose table-wrap carries 28/36px of article rhythm; inside the widget
   the table and the button under it are one control. */
.bf-calc .table-wrap { margin: 0; }
.bf-calc .bf-table { background: #fff; }
.bf-calc .bf-table th { padding: 10px 12px; }
.bf-calc .bf-table td { padding: 8px 12px; vertical-align: middle; }
.bf-calc .bf-table input {
  width: 100%; max-width: 92px; padding: 6px 8px;
  border: 1.5px solid var(--wood-200); border-radius: 6px;
  background: #fff; font-family: inherit; font-size: 13px; color: var(--graphite);
}
.bf-calc .bf-table input[aria-invalid="true"] { border-color: #c2410c; background: #fff7ed; }
.bf-unreadable { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fbe9e7; color: #9a3412; font-size: 13px; line-height: 1.45; }
.bf-unreadable:empty { margin: 0; padding: 0; }
.bf-calc .bf-table td[data-row-bf] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--wood-700); }
/* Its own button, not the tool's square "+": .btn-add is width:34px, which
   turned the label into a column of single words. */
.bf-add {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 9px 14px; white-space: nowrap;
  background: var(--wood-100); border: 1.5px solid var(--wood-200);
  border-radius: var(--radius-sm); color: var(--wood-700);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bf-add:hover { background: var(--wood-200); border-color: var(--wood-300); color: var(--wood-800); }
.bf-settings { display: flex; gap: 20px; flex-wrap: wrap; margin: 18px 0 4px; }
.bf-settings label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--steel); }

.bf-result {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--wood-200);
}
.bf-stat { display: flex; flex-direction: column; gap: 3px; }
.bf-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--steel); }
.bf-stat strong { font-family: var(--font-display); font-size: 22px; color: var(--graphite); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .bf-calc { padding: 14px; }
  .bf-calc .bf-table input { max-width: 46px; padding: 6px 5px; }
  .bf-calc .bf-table th { padding: 8px 4px; font-size: 10px; }
  .bf-calc .bf-table td { padding: 6px 4px; }
  .bf-calc .bf-table .btn-delete { padding: 0 2px; }
  .bf-stat strong { font-size: 18px; }
  /* The note above the table already says thickness and width are inches, so
     the header can drop the suffix and the six columns fit a phone. */
  .bf-unit-hint { display: none; }
}

/* Plywood calculator (/plywood-calculator). Built on the board-foot widget's
   bf-* pieces; what is new is the two tabs and the layout drawing. */
.ply-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ply-tab {
  padding: 8px 14px; border: 1.5px solid var(--wood-200); border-radius: 999px;
  background: #fff; color: var(--steel); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ply-tab[aria-selected="true"] { background: var(--wood-700); border-color: var(--wood-700); color: #fff; }
/* Fixed columns: left to auto, the table sized itself to header text like
   "LENGTH (FT)" and squeezed the one column that holds words. Names get the
   room, numbers get what three or four digits need, inputs fill their cell. */
.ply-calc .ply-table { table-layout: fixed; width: 100%; }
.ply-calc .ply-table input { max-width: none; }
.ply-calc .ply-table th:last-child, .ply-calc .ply-table td:last-child { width: 32px; padding-left: 0; padding-right: 4px; text-align: center; }
.ply-cover th:nth-child(1) { width: 30%; }
.ply-cover th:nth-child(2), .ply-cover th:nth-child(3) { width: 18%; }
.ply-cover th:nth-child(4) { width: 13%; }
.ply-parts th:nth-child(1) { width: 34%; }
.ply-parts th:nth-child(2), .ply-parts th:nth-child(3) { width: 22%; }
.ply-unit { font-weight: 400; text-transform: none; color: var(--steel); }
.ply-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ply-calc .ply-run { width: auto; margin-top: 12px; padding: 9px 18px; font-size: 14px; }
.ply-calc .ply-run:disabled { opacity: 0.6; cursor: wait; }
.ply-error { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fbe9e7; color: #9a3412; font-size: 13px; }
.ply-note { margin: 14px 0 0; font-size: 14px; color: var(--graphite); }
.ply-diagram { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.ply-diagram:empty { display: none; }
.ply-sheet { margin: 0; }
.ply-sheet svg { display: block; width: 100%; height: auto; }
.ply-sheet figcaption { margin-top: 4px; font-size: 12px; color: var(--steel); }
.ply-more { grid-column: 1 / -1; font-size: 13px; color: var(--steel); margin: 0; }
.ply-handoff { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--wood-700); }
@media (max-width: 640px) {
  .ply-calc .ply-table th { padding: 8px 4px; font-size: 10px; line-height: 1.3; vertical-align: bottom; }
  .ply-calc .ply-table td { padding: 6px 3px; }
  .ply-calc .ply-table input { padding: 6px 6px; }
  .ply-unit { display: block; }
}

/* Units, sheet size and thickness as buttons rather than selects: the opened
   native select is the browser's (an iOS wheel) and cannot be styled; five or
   six short values read better laid out and cost one tap instead of two. */
.ply-seg { display: inline-flex; margin-left: auto; border: 1.5px solid var(--wood-200); border-radius: 999px; background: #fff; padding: 2px; }
.ply-seg .ply-chip { border: none; background: none; }
.ply-seg .ply-chip[aria-pressed="true"] { background: var(--wood-700); color: #fff; }
.ply-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ply-chip {
  padding: 7px 12px; border: 1.5px solid var(--wood-200); border-radius: 999px;
  background: #fff; color: var(--graphite); font-family: inherit; font-size: 13px; font-weight: 600;
  white-space: nowrap; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ply-chip:hover { border-color: var(--wood-300); }
.ply-chip[aria-pressed="true"] { background: var(--wood-700); border-color: var(--wood-700); color: #fff; }
.ply-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--steel); }
.ply-field-wide { flex-basis: 100%; }
@media (max-width: 640px) {
  .ply-seg { margin-left: 0; }
}

/* ─── Partner widget (/embed) ───
   The iframe grows to fit the page (public/embed.js), so nothing here may
   depend on the viewport height, and the page has no margin of its own: the
   partner's layout decides the spacing around it. */
.embed-body { background: transparent; overflow: hidden; }
.embed-body .tool { box-shadow: none; animation: none; }
.embed-body .tool-grid { min-height: 0; }
.embed-sheet-picker { margin-bottom: 12px; }
.embed-sheet-picker select { width: 100%; }
.embed-powered { text-align: right; font-size: 11px; padding: 6px 4px 0; color: var(--steel); }
.embed-powered a { color: inherit; }

/* ─── 404 (ErrorsController#not_found) ─── */

.not-found {
  max-width: 640px;
  text-align: center;
}

.not-found-code {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 700;
  line-height: 1;
  color: var(--wood-500);
  margin-bottom: 12px;
}

.not-found h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  color: var(--graphite);
  margin-bottom: 12px;
}

.not-found p {
  font-size: 16px;
  color: var(--steel);
  margin-bottom: 28px;
}

.not-found .not-found-cta {
  display: inline-flex;
  width: auto;
  padding: 14px 32px;
  text-decoration: none;
}

.not-found h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--steel);
  margin: 48px 0 12px;
}

.not-found-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 20px;
}

.not-found-links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--wood-700);
  text-decoration: none;
  font-weight: 500;
}

.not-found-links a:hover {
  text-decoration: underline;
}

/* Pieces-per-sheet calculator (/how-many-pieces-can-you-cut-from-a-sheet):
   the board-foot and plywood pieces again, plus two size groups side by side
   and one large drawing instead of a grid of small ones. */
.fill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fill-group { display: flex; flex-wrap: wrap; gap: 10px 14px; align-content: flex-start; margin: 0; padding: 12px 14px; border: 1.5px solid var(--wood-200); border-radius: 10px; background: #fff; }
.fill-group legend { padding: 0 4px; font-size: 13px; font-weight: 700; color: var(--graphite); }
.fill-group label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--steel); }
.fill-group input { width: 90px; padding: 8px 10px; border: 1.5px solid var(--wood-200); border-radius: 8px; background: #fff; font: inherit; font-size: 15px; color: var(--graphite); }
/* The plywood widget stacks its unit under a narrow table header on phones;
   here it sits beside a short label and stays on the line. */
.fill-calc .ply-unit { display: inline; }
.fill-group .ply-chips { flex-basis: 100%; }
.fill-calc .bf-settings .fill-check { flex-direction: row; align-items: center; gap: 8px; flex-basis: 100%; }
.fill-diagram { margin-top: 14px; }
.fill-diagram:empty { display: none; }
@media (max-width: 640px) {
  .fill-grid { grid-template-columns: 1fr; }
}