/* ============================================================
   Rooftop RTU Replacement Survey Checklist — tool styles
   Uses the site design tokens (style.css). Screen + print.
   ============================================================ */

/* small ghost button used in the toolbar */
.btn--sm{padding:.55rem 1rem;font-size:var(--text-xs);min-height:38px}

/* helper note block (not defined elsewhere) */
.note-block{
  font-size:var(--text-sm);color:var(--color-text-muted);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-left:3px solid var(--color-amber);
  border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);line-height:1.55
}
.note-block a{color:var(--color-primary);font-weight:600}

/* ---- Toolbar / progress ---- */
.survey-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);
  position:sticky;top:4.25rem;z-index:20;box-shadow:var(--shadow-sm)
}
.survey-bar__progress{display:flex;align-items:center;gap:var(--space-4);flex:1;min-width:220px}
.survey-progress{flex:1;height:9px;max-width:340px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden}
.survey-progress__fill{display:block;height:100%;width:0%;background:var(--color-primary);transition:width .25s ease}
[data-theme='dark'] .survey-progress__fill{background:var(--color-amber)}
.survey-bar__count{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-muted);white-space:nowrap}
.survey-bar__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.survey-bar__reset:hover{border-color:#c0392b!important;color:#c0392b!important}
.survey-saved{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-faint);margin-top:var(--space-3)}

/* ---- Job header grid ---- */
.survey-job__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}
.survey-job .field{margin-bottom:0}

/* ---- Sections ---- */
.svy-section{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-6)
}
.svy-section__head{
  display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;
  padding:var(--space-5) var(--space-6);background:var(--color-surface-2);
  border:none;border-bottom:1px solid var(--color-border);cursor:pointer;color:inherit
}
.svy-section__head:hover{background:var(--color-surface-offset)}
.svy-section__chev{flex:0 0 auto;transition:transform .2s ease;color:var(--color-text-muted)}
.svy-section[data-open="false"] .svy-section__chev{transform:rotate(-90deg)}
.svy-section[data-open="false"] .svy-section__body{display:none}
.svy-section__titles{flex:1;min-width:0}
.svy-section__name{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em;font-size:var(--text-lg);line-height:1.1}
.svy-section__blurb{display:block;font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}
.svy-section__tally{flex:0 0 auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-faint);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.25rem .6rem}
.svy-section__done .svy-section__tally{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}
[data-theme='dark'] .svy-section__done .svy-section__tally{background:var(--color-amber);border-color:var(--color-amber);color:#1a1206}
.svy-section__body{padding:var(--space-3) var(--space-6) var(--space-6)}

/* ---- Items ---- */
.svy-item{padding:var(--space-4) 0;border-bottom:1px solid var(--color-divider,var(--color-border))}
.svy-item:last-child{border-bottom:none}
.svy-item__row{display:flex;align-items:flex-start;gap:var(--space-3)}
.svy-check{flex:0 0 auto;width:24px;height:24px;margin-top:2px;border:2px solid var(--color-border);border-radius:var(--radius-sm);
  appearance:none;-webkit-appearance:none;cursor:pointer;display:grid;place-content:center;background:var(--color-bg);transition:.15s}
.svy-check:hover{border-color:var(--color-primary)}
.svy-check:checked{background:var(--color-primary);border-color:var(--color-primary)}
[data-theme='dark'] .svy-check:checked{background:var(--color-amber);border-color:var(--color-amber)}
.svy-check:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translateY(-1px)}
[data-theme='dark'] .svy-check:checked::after{border-color:#1a1206}
.svy-check:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.svy-item__text{flex:1;font-size:var(--text-base);font-weight:600;line-height:1.35;cursor:pointer}
.svy-item.is-checked .svy-item__text{color:var(--color-text-muted)}
.svy-item__note{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:400;line-height:1.5;margin:var(--space-2) 0 0 calc(24px + var(--space-3))}
.svy-item__note strong{color:var(--color-amber)}

/* measurement fields under an item */
.svy-fields{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-3) 0 0 calc(24px + var(--space-3))}
.svy-field{flex:1 1 150px;min-width:120px}
.svy-field label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:.04em}
.svy-field input{width:100%;padding:.6rem .7rem;border-radius:var(--radius-md);border:1px solid var(--color-border);
  background:var(--color-bg);color:var(--color-text);font-size:var(--text-sm);font-family:var(--font-mono)}
.svy-field input:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}

/* fork (radio) item */
.svy-fork{margin:var(--space-3) 0 0 calc(24px + var(--space-3));display:flex;flex-wrap:wrap;gap:var(--space-3)}
.svy-fork__opt{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:600;
  border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.6rem .9rem;cursor:pointer;background:var(--color-bg)}
.svy-fork__opt:hover{border-color:var(--color-primary)}
.svy-fork__opt input{accent-color:var(--color-primary);width:18px;height:18px}
.svy-fork__opt.is-sel{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.svy-item--fork .svy-check{visibility:hidden}
.svy-item--fork .svy-item__text{color:var(--color-text)}

/* conditional (adapter) items get an amber rail */
.svy-item--cond{display:none;border-left:3px solid var(--color-amber);padding-left:var(--space-4);margin-left:-3px;background:color-mix(in oklab,var(--color-amber) 6%,transparent);border-radius:0 var(--radius-md) var(--radius-md) 0}
.svy-item--cond.is-shown{display:block}

/* notes textarea per section */
.svy-notes{margin-top:var(--space-5)}
.svy-notes label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.04em}
.svy-notes textarea{width:100%;min-height:64px;padding:.7rem .8rem;border-radius:var(--radius-md);border:1px solid var(--color-border);
  background:var(--color-bg);color:var(--color-text);font-size:var(--text-sm);font-family:inherit;resize:vertical;line-height:1.5}
.svy-notes textarea:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}

/* print-only footer hidden on screen */
.survey-print-foot{display:none}

@media (max-width:560px){
  .survey-bar{top:3.75rem}
  .svy-section__tally{display:none}
}

/* ============================================================
   PRINT — clean B/W field sheet
   ============================================================ */
@media print{
  @page{margin:14mm 12mm}
  .header,.footer,.survey-bar,.survey-saved,.note-block,.crumb,.sec-head .eyebrow,
  .nav-toggle,.icon-btn{display:none!important}
  body{background:#fff;color:#000;font-size:11px}
  main{padding:0}
  section{padding:0!important}
  .wrap{max-width:100%;padding:0}
  .sec-head{margin:0 0 8px!important}
  .h1{font-size:18px;line-height:1.1;color:#000}
  .lede{font-size:10px;color:#333;margin-top:2px}

  .calc,.svy-section{border:1px solid #999;box-shadow:none;break-inside:avoid;margin-bottom:8px;background:#fff}
  .calc__head,.svy-section__head{background:#f0f0f0!important;border-bottom:1px solid #999;padding:6px 10px;cursor:auto}
  .card__tag,.svy-section__name{color:#000!important}
  .svy-section__chev{display:none}
  .svy-section__tally{border:1px solid #999;color:#000;background:#fff}
  .svy-section__body{display:block!important;padding:4px 10px 8px}
  .calc__body{padding:8px 10px}

  /* job header prints as fillable lines */
  .survey-job__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 14px}
  .survey-job .field input{border:none;border-bottom:1px solid #000;border-radius:0;background:#fff;padding:2px 0}
  .field label{font-size:9px;margin-bottom:1px}

  .svy-item{padding:5px 0;border-bottom:1px dotted #bbb;break-inside:avoid}
  .svy-item__row{gap:6px}
  .svy-check{width:13px;height:13px;border:1.5px solid #000;background:#fff;border-radius:2px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .svy-check:checked{background:#fff}
  .svy-check:checked::after{border-color:#000;width:4px;height:8px}
  .svy-item__text{font-size:10.5px;font-weight:700}
  .svy-item.is-checked .svy-item__text{color:#000}
  .svy-item__note{font-size:8.5px;color:#444;margin-top:1px;margin-left:19px;line-height:1.3}
  .svy-item__note strong{color:#000}

  /* measurement + fork fields print as write-in lines */
  .svy-fields{gap:4px 12px;margin:3px 0 0 19px}
  .svy-field{flex:0 0 auto;min-width:90px}
  .svy-field label{font-size:8px;margin-bottom:0;color:#000}
  .svy-field input{border:none;border-bottom:1px solid #000;border-radius:0;background:#fff;font-size:9px;padding:1px 0;min-width:80px}
  .svy-fork{margin:3px 0 0 19px;gap:10px}
  .svy-fork__opt{border:1px solid #000;background:#fff!important;padding:2px 6px;font-size:9px}
  .svy-fork__opt.is-sel{background:#ddd!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .svy-fork__opt input{width:11px;height:11px}
  /* always show conditional items on print so the paper copy is complete */
  .svy-item--cond{display:block!important;background:#fff;border-left:2px solid #000}

  .svy-notes textarea{border:1px solid #999;min-height:34px;font-size:9px;background:#fff}

  .survey-print-foot{display:block;text-align:center;font-size:8px;color:#666;margin-top:10px;border-top:1px solid #ccc;padding-top:4px}
}