/* Match the navy, red accents, and white controls of calculator/src/plusline.css. */
@media screen {
  :root {
    color: #18264b;
    background: #f6f7fb;
    --ink: #101b56;
    --red: #ed1c35;
    --muted: #647089;
    --line: #e1e6f0;
  }
  .header { background: #101b56; color: #fff; border-bottom: 1px solid #ffffff25; }
  nav a[aria-current], nav .contact {
    background: #fff;
    color: #101b56;
    border: 1px solid #fff;
    padding: 11px 16px;
  }
  nav a[aria-current]:hover, nav .contact:hover { background: #f0f4fc; }
  h1, h2, h3 { color: #101b56; }
  h1 span { color: #4f5b77; }
  .eyebrow, .text-link, .link-button, .source-cta { color: #244886; }
  .text-link, .link-button { border-color: #a6b8d9; }
  #storage { color: #5a6786; }
  #storage:before { background: #ed1c35; }
  .blueprint {
    color: #244886;
    background-color: #eef2fa;
    border-color: #dce4f3;
    background-image: linear-gradient(#2448860a 1px, transparent 1px), linear-gradient(90deg, #2448860a 1px, transparent 1px);
  }
  .blueprint svg path[stroke="#e9edf1"] { stroke: #eef2fa; }
  .plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
  .plan-toolbar select { width: auto; max-width: 140px; height: 30px; font-size: 11px; color: #244886; background: #fff; }
  .plan-toolbar select[hidden] { display: none; }
  #plan-drawing { min-height: 190px; display: grid; align-items: center; }
  .plan-empty { color: #5c6c89; font-size: 12px; line-height: 1.8; text-align: center; padding: 45px 12px; }
  .plan-bottom { letter-spacing: .5px; font-size: 9px; }
  .hero { grid-template-columns: 1fr 1.15fr; gap: 4%; }
  .plan-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; margin-top: 18px; }
  .plan-view-grid figure { min-width: 0; margin: 0; position: relative; }
  .plan-view-grid figure + figure::before { content: ""; position: absolute; left: -4px; top: 0; bottom: 0; border-left: 1px solid #dce4f3; }
  .plan-view-grid figcaption { font-size: 9px; letter-spacing: .6px; color: #244886; text-align: center; }
  .plan-view-grid svg { width: 100%; height: 215px; max-height: none; }
  .section-assumption { font-size: 10px!important; line-height: 1.6!important; margin: 6px 0 14px!important; color: #5c6c89!important; }
  .site-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; padding: 16px; background: #edf2fb; }
  .site-totals span { display: block; font-size: 11px; color: #5c6c89; margin-bottom: 8px; }
  .site-totals strong { font-size: 22px; font-weight: 500; color: #101b56; }
  .computed-floor>div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #101b56; }
  .computed-floor small { display: block; color: #647089; font-size: 10px; margin-top: 9px; }
  .migration-note { padding: 12px; background: #fff5e8; }
  .simulation-note { background: #edf2fb; border-color: #dce4f2; }
  .simulation-note p { color: #5c6c89; }
  .simulation-note strong { color: #163877; }
  .step { color: #234780; background: #edf2fb; }
  .mode, .mode.selected { background: #fff; color: #101b56; }
  .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mode.selected { border-color: #244886; box-shadow: inset 0 -3px #244886; }
  .mode small, .mode-number { color: #101b56; }
  .selected .radio { border-color: #ed1c35; }
  .radio { border-color: #a6b8d9; }
  .floor, .exclusions, thead, .total-row { background: #f2f5fb; }
  .floor { border-color: #dce4f3; }
  .input-wrap input, select { border-color: #d6deee; }
  .quantity-row, .rate-row { border-color: #e1e6f0; }
  .summary { background: #101b56; color: #f5f7ff; }
  .summary h2, .grand-total { color: #fff; }
  .summary-top, .summary .eyebrow, .result-mode, .total-label, .summary-lines span, .base-total span { color: #d2dcf4; }
  .result-mode, .summary-lines { border-color: #344373; }
  .summary-note, .summary-foot { color: #bcccec; }
  .button.light, .button.outline { background: #fff; color: #101b56; border-color: #d6deee; }
  .button.light:hover, .button.outline:hover { background: #f0f4fc; }
  .source { border-color: #dce4f3; }
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline-color: #5c83ce; }
}
@media screen and (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .modes { grid-template-columns: repeat(4, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
  .blueprint { display: block; margin-top: 4px; padding: 16px 18px; }
  .blueprint svg { max-height: 210px; }
}