/* ── HEADER ──────────────────────────────────────────────────── */
.tool-header{padding:3.5rem 0 2.5rem;border-bottom:1px solid var(--paper-3)}
.tool-header-eyebrow{
  display:flex;align-items:center;gap:12px;margin-bottom:1.25rem;
}
.tool-header-eyebrow-line{width:32px;height:1px;background:var(--blue)}
.tool-header-title{
  font-size:clamp(2.2rem,4vw,3.4rem);
  margin-bottom:1.25rem;max-width:820px;
}
.tool-header-title em{font-style:italic;color:var(--blue)}
.tool-header-sub{
  font-size:1.02rem;color:var(--ink-2);
  max-width:680px;line-height:1.75;
}

/* ── WORKSPACE ──────────────────────────────────────────────── */
.workspace{padding:3rem 0 5rem;background:var(--paper)}
.workspace-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2rem;
  align-items:start;
}

/* Form pane */
.form-pane{
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.form-pane-header{
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--paper-3);
  background:var(--paper-2);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.form-pane-title{font-size:0.85rem;font-weight:600;color:var(--heading)}
.form-pane-meta{font-size:0.72rem;color:var(--ink-3);letter-spacing:0.04em}

/* Error banner */
.error-banner{
  display:none;
  padding:1rem 1.5rem;
  background:var(--rose-pale);
  border-bottom:1px solid rgba(155,34,51,0.18);
  color:var(--rose);
}
.error-banner.active{display:block}
.error-banner-title{
  font-size:0.82rem;font-weight:600;
  margin-bottom:0.5rem;display:flex;align-items:center;gap:8px;
}
.error-banner-list{
  list-style:none;font-size:0.8rem;line-height:1.7;
  padding-left:18px;
}
.error-banner-list li{
  position:relative;padding-left:2px;
}
.error-banner-list li::before{
  content:'';position:absolute;left:-12px;top:11px;
  width:4px;height:4px;border-radius:50%;background:var(--rose);
}

.form-body{padding:0.5rem 1.5rem 1.5rem}

/* Collapsible sections */
.fset{
  border-top:1px solid var(--paper-3);
  padding:1.25rem 0;
}
.fset:first-child{border-top:none}
.fset-head{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;user-select:none;
  margin-bottom:0;
  padding:0;
}
.fset-head:hover .fset-title{color:var(--blue)}
.fset-title{
  font-size:0.78rem;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--heading);
  transition:color 0.15s;
}
.fset-chev{
  width:14px;height:14px;color:var(--ink-3);
  transition:transform 0.2s ease;
}
.fset.collapsed .fset-chev{transform:rotate(-90deg)}
.fset-body{
  overflow:hidden;
  max-height:2000px;
  transition:max-height 0.3s ease, margin-top 0.3s ease;
  margin-top:1.25rem;
}
.fset.collapsed .fset-body{
  max-height:0;
  margin-top:0;
}

/* "Advanced" sub-collapsible */
.adv{
  margin-top:1rem;
  border:1px dashed var(--paper-3);
  border-radius:var(--r);
  padding:0;
  background:rgba(244,246,253,0.4);
}
.adv-head{
  padding:10px 14px;
  cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;
  font-size:0.74rem;
  color:var(--ink-2);
  letter-spacing:0.04em;
}
.adv-head:hover{color:var(--blue)}
.adv-head-label{display:flex;align-items:center;gap:8px}
.adv-head-icon{width:12px;height:12px;color:var(--ink-3);transition:transform 0.2s}
.adv.collapsed .adv-head-icon{transform:rotate(-90deg)}
.adv-body{
  padding:0 14px 14px;
  overflow:hidden;
  max-height:1500px;
  transition:max-height 0.3s ease, padding 0.3s ease;
}
.adv.collapsed .adv-body{
  max-height:0;
  padding:0 14px 0;
}

/* Fields */
.row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.75rem;margin-bottom:0.75rem}
.row > .field, .row-3 > .field{margin-bottom:0}
.field{margin-bottom:0.75rem}
.field-label{
  display:block;
  font-size:0.72rem;font-weight:500;
  color:var(--ink-2);
  margin-bottom:5px;
}
.field-label .req{color:var(--rose);margin-left:2px}
.field-hint{
  display:block;
  font-size:0.7rem;color:var(--ink-3);
  margin-top:4px;line-height:1.5;
}
input.fld, select.fld, textarea.fld{
  width:100%;
  font-family:var(--sans);
  font-size:0.86rem;
  padding:9px 12px;
  border:1px solid var(--paper-3);
  border-radius:var(--r);
  background:var(--paper);
  color:var(--ink);
  transition:border-color 0.15s, box-shadow 0.15s;
}
input.fld:focus, select.fld:focus, textarea.fld:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(47,74,199,0.12);
}
input.fld::placeholder, textarea.fld::placeholder{color:var(--ink-4)}
textarea.fld{resize:vertical;min-height:60px;line-height:1.55}

/* Line items */
.lines-head{
  display:grid;
  grid-template-columns:1.6fr 70px 110px 110px 28px;
  gap:8px;
  font-size:0.68rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:500;
  padding:0 4px 8px;
  border-bottom:1px solid var(--paper-3);
}
.line{
  display:grid;
  grid-template-columns:1.6fr 70px 110px 110px 28px;
  gap:8px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--paper-2);
}
.line:last-of-type{border-bottom:none}
.line input.fld{padding:7px 10px;font-size:0.82rem}
.line-total{
  font-size:0.84rem;text-align:right;color:var(--ink-2);
  padding-right:8px;font-variant-numeric:tabular-nums;
}
.line-remove{
  width:24px;height:24px;border-radius:var(--r);
  background:transparent;border:1px solid var(--paper-3);
  color:var(--ink-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all 0.15s;
}
.line-remove:hover{
  background:var(--rose-pale);border-color:var(--rose);
  color:var(--rose);
}
.add-line{
  margin-top:10px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;font-size:0.78rem;
  background:transparent;border:1px dashed var(--paper-3);
  color:var(--ink-2);border-radius:var(--r);cursor:pointer;
  transition:all 0.15s;
}
.add-line:hover{border-color:var(--blue);color:var(--blue)}

/* Totals */
.totals{
  margin-top:1.25rem;padding:1rem;
  background:var(--paper-2);border-radius:var(--r);
  font-size:0.85rem;
}
.totals-row{
  display:flex;justify-content:space-between;
  padding:4px 0;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.totals-row.grand{
  border-top:1px solid var(--paper-3);
  margin-top:6px;padding-top:10px;
  font-weight:600;color:var(--heading);font-size:0.95rem;
}

/* Submit row */
.submit-row{
  padding:1.25rem 1.5rem;
  border-top:1px solid var(--paper-3);
  background:var(--paper-2);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.submit-meta{font-size:0.75rem;color:var(--ink-3)}

/* Preview pane */
.preview-pane{
  background:var(--paper);
  border:1px solid var(--paper-3);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:sticky;
  top:80px;
}
.preview-pane-header{
  padding:1.25rem 1.5rem;
  border-bottom:1px solid var(--paper-3);
  background:var(--paper-2);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.preview-pane-title{font-size:0.85rem;font-weight:600;color:var(--heading)}
.preview-actions{display:flex;gap:8px}
.preview-actions .btn{padding:8px 14px;font-size:0.78rem}

#viewer-container{
  width:100%;
  height:760px;
  background:var(--paper-2);
  position:relative;
  overflow:hidden;
}
#viewer-container.active{background:#525659}

/* Empty / loading / error states */
.viewer-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;text-align:center;
  background:var(--paper-2);
  z-index:1;
}
.viewer-placeholder.hidden{display:none}
.placeholder-icon{
  width:54px;height:54px;
  border-radius:50%;
  background:var(--paper-3);
  color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.25rem;
}
.placeholder-title{
  font-size:1rem;font-weight:600;color:var(--heading);
  margin-bottom:0.5rem;
}
.placeholder-body{
  font-size:0.85rem;color:var(--ink-2);
  max-width:340px;line-height:1.6;
}
.loading-spinner{
  width:32px;height:32px;
  border:3px solid var(--paper-3);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-bottom:1rem;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Info / trust strip */
.info-strip{
  background:var(--paper-2);
  border-top:1px solid var(--paper-3);
  border-bottom:1px solid var(--paper-3);
  padding:1.5rem 0;
}
.info-strip-inner{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:2rem;
  max-width:var(--max);margin:0 auto;padding:0 2.5rem;
}
.info-item{display:flex;align-items:flex-start;gap:12px}
.info-icon{
  width:34px;height:34px;border-radius:8px;
  background:var(--blue-pale);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.info-title{
  font-size:0.82rem;font-weight:600;color:var(--heading);
  margin-bottom:3px;
}
.info-body{font-size:0.74rem;color:var(--ink-2);line-height:1.55}

/* Explainer */
.explainer{padding:5rem 0;background:var(--paper)}
.explainer-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
}
.explainer-left .label{margin-bottom:1rem;display:inline-block}
.explainer-headline{
  font-size:clamp(1.8rem,3vw,2.6rem);
  margin-bottom:1.25rem;
}
.explainer-headline em{font-style:italic;color:var(--blue)}
.explainer-sub{
  font-size:0.95rem;color:var(--ink-2);
  line-height:1.75;max-width:480px;
}
.explainer-right{display:flex;flex-direction:column;gap:1.25rem}
.explainer-card{
  border:1px solid var(--paper-3);
  border-radius:var(--r-lg);
  padding:1.5rem;
  background:var(--paper);
}
.explainer-card-title{
  font-size:0.95rem;font-weight:600;color:var(--heading);
  margin-bottom:0.5rem;
}
.explainer-card-body{
  font-size:0.85rem;color:var(--ink-2);line-height:1.7;
}


/* Responsive */
@media (max-width:1024px){
  .workspace-grid{grid-template-columns:1fr;gap:1.5rem}
  .preview-pane{position:static}
  #viewer-container{height:600px}
  .info-strip-inner{grid-template-columns:repeat(2,1fr)}
  .explainer-grid{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:760px){
  .inner, .nav-inner, .breadcrumb-inner, .info-strip-inner{padding:0 1.5rem}
  .nav-links{display:none}
  .nav-menu-btn{display:block}
  .row, .row-3{grid-template-columns:1fr;gap:0.5rem}
  .info-strip-inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .lines-head{display:none}
  .line{
    grid-template-columns:1fr;gap:6px;
    padding:12px;background:var(--paper-2);
    border-radius:var(--r);margin-bottom:8px;border:none;
  }
  .line-total{text-align:left}
}