/* ==========================================================================
   Shared styles for Funding Lab tool pages (simulators, calculators)
   ========================================================================== */

body { background: var(--fill); }

.app-header {
  display:flex; align-items:center; justify-content:space-between; padding:20px 48px;
  background:#FFFFFF; border-bottom:1px solid var(--border);
}
.app-header .brand-block { display:flex; align-items:center; gap:12px; }
.app-header img { height:28px; }
.app-title { font-family: var(--font-display); font-weight:700; font-size:15px; color:var(--navy); }
.app-subtitle { font-size:11.5px; color:var(--muted-2); }

.app-body { display:flex; justify-content:center; padding:44px 24px 80px; }
.app-panel { width:100%; max-width:640px; }

.field-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: #6B7684; margin-bottom: 8px; display: block; }
.field-box { display: flex; align-items: center; border: 1.5px solid #DCE1E7; border-radius: 10px; padding: 0 16px; background: #FFFFFF; }
.field-box:focus-within { border-color: var(--gold); }
.field-box input, .field-box select {
  border: none; outline: none; background: transparent; font-family: var(--font-body);
  font-size: 15px; font-weight: 600; color: var(--navy); padding: 14px 4px; width: 100%; appearance: none;
}
.field-prefix { font-size: 15px; font-weight: 600; color: var(--muted-2); }
.field-suffix { font-size: 15px; font-weight: 600; color: var(--muted-2); }
.field-row-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; }
.field-row-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
@media (max-width: 640px) { .field-row-2, .field-row-3 { grid-template-columns: 1fr; } }

.result-eyebrow { font-size:12px; font-weight:700; letter-spacing:0.08em; color:var(--gold-deep); margin-bottom:6px; }
.result-headline { font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--navy); }

.result-card { background:#FFFFFF; border:1px solid var(--border); border-radius:16px; padding:32px; margin-bottom:20px; }
.stat-box { background: var(--fill); border-radius:12px; padding:16px 18px; }
.stat-label { font-size:11px; font-weight:700; letter-spacing:0.06em; color:var(--muted-2); margin-bottom:6px; }
.stat-value { font-size:17px; font-weight:700; color:var(--navy); }

.scenario-card { background:var(--fill); border:1px solid var(--border); border-radius:14px; padding:20px; }
.scenario-card.highlight { background:var(--navy); border-color:var(--navy); }
.scenario-card.highlight .scenario-label,
.scenario-card.highlight .scenario-row span:first-child { color:#AEBBC8; }
.scenario-card.highlight .scenario-row span:last-child,
.scenario-card.highlight .scenario-title { color:#fff; }
.scenario-title { font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--navy); margin-bottom:12px; }
.scenario-row { display:flex; justify-content:space-between; font-size:13px; margin-bottom:8px; }
.scenario-row span:first-child { color:var(--muted); }
.scenario-row span:last-child { font-weight:700; color:var(--navy); }

#view-form.hidden, #view-result.hidden { display:none; }

@media (max-width: 960px) {
  .app-header { flex-direction: column; align-items: flex-start !important; gap: 14px; padding: 18px 24px !important; }
  .app-header > div[style*="display:flex"] { width: 100%; justify-content: flex-start; }
}

/* ---------- Document / form-builder pages ---------- */
.app-panel-wide { max-width: 780px; }

.doc-note {
  display:flex; gap:12px; align-items:flex-start; background:#F2F7F2; border:1px solid #CFE3CF;
  border-radius:12px; padding:16px 18px; margin-bottom:28px; font-size:13px; line-height:1.55; color:#3C5A3C;
}
.doc-note strong { color:#254025; }
.doc-note svg { flex-shrink:0; margin-top:2px; }

.doc-note.warn { background:#FBF3E7; border-color:#EAD2A6; color:#6B4E14; }
.doc-note.warn strong { color:#4A3609; }

.form-section { margin-bottom:36px; }
.form-section-head {
  display:flex; align-items:center; gap:12px; margin-bottom:6px; padding-bottom:14px; border-bottom:1.5px solid var(--border);
}
.form-section-num {
  width:26px; height:26px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--font-display);
  font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.form-section-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--navy); }
.form-section-desc { font-size:12.5px; color:var(--muted); margin:6px 0 20px; line-height:1.55; }
.form-section-body { display:flex; flex-direction:column; gap:18px; }

.field-box textarea {
  border:none; outline:none; background:transparent; font-family:var(--font-body); font-size:14.5px; font-weight:500;
  color:var(--navy); padding:13px 4px; width:100%; resize:vertical; min-height:64px; line-height:1.5;
}
.field-hint { font-size:11.5px; color:var(--muted-2); margin-top:6px; line-height:1.5; }

.choice-row { display:flex; gap:10px; flex-wrap:wrap; }
.choice-pill {
  background:#FFFFFF; border:1.5px solid #DCE1E7; border-radius:999px; padding:10px 18px;
  font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--navy); cursor:pointer; user-select:none;
}
.choice-pill input { display:none; }
.choice-pill.checked { background:var(--navy); border-color:var(--navy); color:#fff; }

.repeat-card { background:var(--fill); border:1px solid var(--border); border-radius:14px; padding:22px; position:relative; }
.repeat-card + .repeat-card { margin-top:16px; }
.repeat-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.repeat-card-title { font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--navy); }
.repeat-remove { background:none; border:none; color:#B24A4A; font-size:12px; font-weight:700; cursor:pointer; padding:4px 8px; }
.repeat-remove:hover { text-decoration:underline; }

.add-entry-btn {
  width:100%; background:#FFFFFF; border:1.5px dashed #C7CDD5; border-radius:12px; padding:14px;
  font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--navy); cursor:pointer; margin-top:16px;
}
.add-entry-btn:hover { border-color:var(--gold); color:var(--gold-deep); }

.sig-pad-wrap { border:1.5px dashed #C7CDD5; border-radius:12px; background:#fff; overflow:hidden; }
.sig-pad-wrap canvas { display:block; width:100%; height:150px; touch-action:none; cursor:crosshair; }
.sig-actions { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.sig-tabs { display:flex; gap:6px; margin-bottom:10px; }
.sig-tab {
  background:transparent; border:1.5px solid #DCE1E7; border-radius:8px; padding:7px 14px;
  font-size:12px; font-weight:700; color:var(--muted); cursor:pointer;
}
.sig-tab.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.sig-typed { font-family:'Brush Script MT', cursive; font-size:30px; color:var(--navy); padding:24px 16px; border:1.5px dashed #C7CDD5; border-radius:12px; background:#fff; min-height:60px; }
.link-btn { background:none; border:none; color:var(--gold-deep); font-size:12px; font-weight:700; cursor:pointer; padding:0; }
.link-btn:hover { text-decoration:underline; }

.doc-hub-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; }
@media (max-width:900px) { .doc-hub-grid { grid-template-columns: 1fr; } }
.doc-card {
  background:#fff; border:1px solid var(--border); border-radius:16px; padding:26px; text-decoration:none;
  display:flex; flex-direction:column; gap:14px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.doc-card:hover { transform:translateY(-3px); border-color:var(--gold); box-shadow:0 16px 32px rgba(10,30,51,0.08); }
.doc-card-icon {
  width:44px; height:44px; border-radius:12px; background:var(--fill-2); display:flex; align-items:center; justify-content:center;
}
.doc-card-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--navy); }
.doc-card-desc { font-size:13px; color:var(--muted); line-height:1.55; }
.doc-card-meta { font-size:11.5px; font-weight:700; letter-spacing:0.05em; color:var(--gold-deep); margin-top:auto; }