/* Screen-only workbench treatment. Printed worksheets keep their existing rules. */
@media screen {
  .cost-page, .planner-page {
    --ink: #21382e;
    --muted: #626b60;
    --line: #d9d4c8;
    --surface: #fffefa;
    --soft: #f6f3eb;
    --green: #203c32;
    --green-dark: #203c32;
    --green-soft: #f0eee6;
    color: #21382e;
  }

  .cost-page .estimate-notice, .planner-page .planner-notice {
    padding: 12px 16px;
    border: 0;
    border-left: 3px solid #b55132;
    border-radius: 0;
    background: #eee9dd;
    color: #514a3e;
    font-size: .87rem;
    line-height: 1.6;
    font-weight: 400;
  }

  .cost-page .cost-tool-card, .planner-page .planner-shell {
    border: 1px solid #d9d4c8;
    border-radius: 4px;
    background: #fffefa;
    box-shadow: none;
  }

  .cost-page .cost-tool-heading, .planner-page .planner-heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: clamp(24px, 4vw, 46px);
    border: 0;
    background: #203c32;
    color: #fffefa;
  }

  .cost-page .cost-tool-heading h1, .planner-page .planner-heading h1 {
    max-width: 24ch;
    margin: 10px 0 0;
    color: #fffefa;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 4.1vw, 3.6rem);
    font-weight: 400;
    letter-spacing: -.035em;
    line-height: 1.12;
    text-wrap: balance;
  }

  .cost-page .cost-tool-heading .eyebrow, .planner-page .planner-heading .eyebrow {
    color: #d8c8a2;
    letter-spacing: .14em;
    font-size: .7rem;
  }

  .planner-page .planner-heading p:last-child {
    max-width: 65ch;
    margin-top: 14px;
    color: #e1e6dc;
    font-size: 1rem;
    line-height: 1.6;
  }

  .cost-page .cost-tool-heading .privacy-note, .planner-page .planner-save-state {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #e1e6dc;
    font-size: .79rem;
    font-weight: 400;
    white-space: normal;
  }

  .cost-page .cost-inputs, .planner-page .planner-inputs {
    padding: 24px;
    background: #fffefa;
  }

  .cost-page .cost-results, .planner-page .planner-output {
    margin: 24px 24px 24px 0;
    padding: 20px;
    border: 1px solid #d9d4c8;
    border-top: 4px solid #203c32;
    border-radius: 0 0 4px 4px;
    background: #f6f3eb;
  }

  .cost-page .cost-section-heading h2, .planner-page .planner-section-heading h2,
  .cost-page .cost-results h2, .planner-page .output-heading h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.25;
  }

  .cost-page .cost-section + .cost-section {
    margin-top: 24px;
    padding-top: 24px;
  }
  .planner-page .planner-section { padding-top: 24px; }
  .planner-page .planner-section:first-child { padding-top: 0; }
  .planner-page .planner-section + .planner-section { margin-top: 24px; }
  .planner-page .step-number {
    width: auto;
    height: auto;
    margin-right: 8px;
    border-radius: 0;
    background: transparent;
    color: #b55132;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
  }

  .cost-page .cost-area, .planner-page .planner-area,
  .cost-page .rate-row, .planner-page .project-record, .planner-page .task-board {
    border: 1px solid #d9d4c8;
    border-radius: 4px;
    background: #fffefa;
    box-shadow: none;
  }
  .cost-page .cost-area, .planner-page .planner-area { border-top: 2px solid #c7bfae; }
  .cost-page .rate-row { background: #f6f3eb; }
  .cost-page .project-settings { grid-template-columns: 1fr; gap: 8px; }
  .cost-page .cost-area-title, .planner-page .planner-area-header {
    padding-bottom: 8px;
    border-bottom: 1px solid #e7e1d5;
  }

  .cost-page input:not([type='checkbox']), .cost-page select, .cost-page textarea,
  .planner-page input:not([type='checkbox']), .planner-page select, .planner-page textarea {
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    border-color: #bdbfaf;
    border-radius: 4px;
    background: #fffefa;
    color: #21382e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
  }
  .cost-page .rate-input, .planner-page .planner-unit-input {
    border-color: #bdbfaf;
    border-radius: 4px;
    background: #fffefa;
  }
  .cost-page .rate-input input, .planner-page .planner-unit-input input { border: 0; }
  .cost-page .field, .planner-page .field { min-width: 0; }
  .cost-page .button, .planner-page .button {
    min-height: 44px;
    border-radius: 4px;
    box-shadow: none;
  }
  .cost-page .button-primary, .planner-page .button-primary {
    background: #b55132;
    border-color: #b55132;
    color: #fff;
  }
  .cost-page .button-secondary, .planner-page .button-secondary {
    background: #fffefa;
    border: 1px solid #a8b1a5;
    color: #203c32;
  }

  .cost-page .result-topline { flex-direction: column; gap: 6px; }
  .cost-page .result-topline .privacy-note {
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #626b60;
    font-size: .75rem;
    font-weight: 400;
    white-space: normal;
  }
  .cost-page .summary-grid { gap: 1px; border: 1px solid #d9d4c8; background: #d9d4c8; }
  .cost-page .summary-card, .planner-page .planner-summary-grid > div {
    padding: 14px 12px;
    border-radius: 0;
    background: #fffefa;
    box-shadow: none;
  }
  .cost-page .summary-card { border: 0; }
  .cost-page .summary-card strong, .planner-page .planner-summary-grid strong {
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .cost-page .summary-card:nth-child(4), .planner-page .planner-summary-grid .summary-order {
    background: #203c32;
    border-color: #203c32;
  }
  .cost-page .summary-card:nth-child(4) strong, .planner-page .summary-order strong {
    color: #fffefa;
    font-size: 1.65rem;
  }
  .cost-page .summary-card:nth-child(4) span,
  .planner-page .summary-order span, .planner-page .summary-order small { color: #e1e6dc; }

  .cost-page .result-table-wrap, .planner-page .planner-table-wrap {
    max-width: 100%;
    border-radius: 4px;
    border-color: #d9d4c8;
  }
  .cost-page .result-table, .planner-page .planner-table {
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
  }
  .cost-page .result-table th, .planner-page .planner-table th,
  .cost-page .reference-table th { background: #eae6dc; color: #21382e; }
  .cost-page .result-table td, .planner-page .planner-table td { padding-block: 11px; }
  .cost-page .result-table tbody tr:nth-child(even),
  .planner-page .planner-table tbody tr:nth-child(even) { background: #f8f6f0; }

  .planner-page .completion-badge {
    padding: 5px 8px;
    border: 1px solid #c8c4b6;
    border-radius: 4px;
    background: transparent;
    color: #21382e;
    white-space: normal;
  }
  .planner-page .order-deadline { border-left: 3px solid #b55132; background: #ede6d9; }
  .planner-page .order-deadline span { color: #674534; }
  .planner-page .task-progress { height: 4px; border-radius: 0; background: #e5e0d4; }
  .planner-page .task-progress span { background: #b55132; }
  .planner-page .task-group label { padding-block: 6px; line-height: 1.45; }
  .planner-page .task-group input { accent-color: #203c32; }
  .cost-page .formula-list li, .cost-page .quote-checklist div,
  .planner-page .planner-content-grid article {
    border-radius: 4px;
    background: #f6f3eb;
    border-color: #d9d4c8;
  }

  @media (max-width: 1000px) {
    .cost-page .cost-workbench, .planner-page .planner-workbench { grid-template-columns: minmax(0, 1fr); }
    .cost-page .cost-results, .planner-page .planner-output { margin: 0 24px 24px; }
  }

  @media (max-width: 680px) {
    .cost-page .cost-tool-heading, .planner-page .planner-heading { padding: 26px 20px; }
    .cost-page .cost-inputs, .planner-page .planner-inputs { padding: 20px 16px; }
    .cost-page .cost-results, .planner-page .planner-output { margin: 0 16px 16px; padding: 16px 12px; }
    .cost-page .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cost-page .cost-section-heading { flex-wrap: wrap; }
    .cost-page .result-table tr, .cost-page .reference-table tr, .planner-page .planner-table tr { border-radius: 4px; }
    .cost-page .result-table td, .planner-page .planner-table td { overflow-wrap: anywhere; }
    .cost-page .privacy-note { max-width: 100%; }
    .planner-page .planner-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .planner-page .planner-summary-grid .summary-order { grid-column: 1 / -1; }
    .planner-page .order-deadline { align-items: flex-start; flex-direction: column; gap: 5px; }
    .planner-page .order-deadline strong { text-align: left; }
  }
}