/* =========================================
   PROPOSAL GENERATOR: app styles
   Dark app UI (house style) + light "paper"
   proposal that prints as the PDF.
   ========================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:#07080F; --surface:#0C0E1B; --surface2:#11142A; --border:#2A2B3D;
  --gold:#D4AF37; --gold-border:rgba(212,175,55,.25); --gold-faint:rgba(212,175,55,.07);
  --text:#fff; --muted:#E2E2EB; --dim:#A8A8B8; --red:#E57373; --green:#7bd3a3;
  --ff:'Poppins',sans-serif;
}

html { -webkit-font-smoothing: antialiased; }
body { background:var(--bg); background-image:radial-gradient(circle at top, rgba(212,175,55,.07) 0%, transparent 60%); color:var(--text); font-family:var(--ff); line-height:1.6; min-height:100dvh; }

.app { max-width:1240px; margin:0 auto; padding:0 2rem 4rem; }

/* header */
.hd { display:flex; align-items:center; justify-content:space-between; padding:1.2rem 0; border-bottom:1px solid var(--border); gap:1rem; flex-wrap:wrap; }
.hd-brand { display:flex; align-items:center; gap:.7rem; font-weight:700; text-decoration:none; color:var(--text); }
.hd-brand img { height:40px; width:auto; }
.hd-nav a { color:var(--dim); font-size:.82rem; text-decoration:none; margin-left:1.2rem; }
.hd-nav a:hover { color:var(--gold); }

/* layout */
.pg-title { margin:2rem 0 0; font-size:1.6rem; font-weight:800; letter-spacing:-.02em; }
.pg-sub { color:var(--dim); font-size:.88rem; margin-bottom:2rem; }
.grid { display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start; }
@media(min-width:1000px){ .grid { grid-template-columns: minmax(340px,440px) 1fr; } }

/* form card */
.card { background:var(--surface); border:1px solid var(--border); padding:1.4rem 1.5rem; }
.card + .card { margin-top:1.25rem; }
.card-h { font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:baseline; }
.card-h small { color:var(--dim); font-weight:400; letter-spacing:0; text-transform:none; }

.f-row { margin-bottom:1rem; }
.f-row:last-child { margin-bottom:0; }
.f-row label { display:block; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; }
.f-row .hint { display:block; font-size:.7rem; color:var(--dim); margin-bottom:.3rem; }
.f-row input, .f-row select {
  width:100%; background:var(--bg); border:1px solid var(--dim); color:var(--text);
  padding:.6rem .7rem; font-family:var(--ff); font-size:.88rem; outline:none;
}
.f-row input:focus, .f-row select:focus { border-color:var(--gold); }
.f-row .inline { display:flex; gap:.5rem; }
.f-row .inline input { flex:1; } .f-row .inline .inline-h { width:7ch; }

/* azimuth presets */
.chips { display:flex; gap:.45rem; flex-wrap:wrap; margin-top:.4rem; }
.chip { padding:.32rem .7rem; font-size:.75rem; border:1px solid var(--dim); background:transparent; color:var(--muted); cursor:pointer; font-family:var(--ff); }
.chip.on { border-color:var(--gold); color:var(--gold); background:var(--gold-faint); }

/* small print + buttons */
.note { font-size:.72rem; color:var(--dim); line-height:1.5; }
.btn { display:inline-flex; align-items:center; gap:.5rem; background:var(--gold); color:var(--bg); border:none; padding:.85rem 1.4rem; font-family:var(--ff); font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.btn:hover { opacity:.88; }
.btn.ghost { background:transparent; color:var(--gold); border:1px solid var(--gold); }
.btn:disabled { opacity:.45; cursor:default; }
.btn-row { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.status { font-size:.8rem; color:var(--gold); min-height:1.2em; }

/* ── PROPOSAL "PAPER" (light, prints as the PDF) ────────── */
.proposal { background:#fff; color:#1a2332; padding:2.6rem 2.8rem; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.p-msg { display:none; text-align:center; padding:4rem 1rem; color:var(--dim); border:1px dashed var(--border); }
.p-msg.on { display:block; }
.p-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; border-bottom:2px solid #d4af37; padding-bottom:1.2rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.p-head img { height:46px; width:auto; }
.p-prep { text-align:right; font-size:.74rem; color:#5b6472; line-height:1.5; }
.p-title { font-size:1.5rem; font-weight:800; color:#0c3460; line-height:1.15; margin-bottom:.3rem; }
.p-sub { font-size:.85rem; color:#5b6472; }
.p-prop { font-size:.82rem; color:#33405a; margin-top:.4rem; }

.p-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin:1.4rem 0; }
@media(max-width:720px){ .p-grid { grid-template-columns:1fr; } }
.p-sec { border:1px solid #e3e7ee; }
.p-sec-h { background:#0c3460; color:#fff; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.5rem .9rem; }
.p-sec-b { padding:.8rem .9rem; }
.p-row { display:flex; justify-content:space-between; align-items:baseline; padding:.28rem 0; font-size:.84rem; }
.p-row .k { color:#5b6472; }
.p-row .v { font-weight:600; color:#1a2332; }
.p-row.hl .v { color:#0c79a8; }
.big { text-align:center; padding:1.2rem .9rem; }
.big .n { font-size:2rem; font-weight:800; color:#0c3460; line-height:1; }
.big .l { font-size:.72rem; color:#5b6472; text-transform:uppercase; letter-spacing:.06em; margin-top:.3rem; }

/* comparison table */
.p-table { width:100%; border-collapse:collapse; font-size:.8rem; margin:.8rem 0; }
.p-table th { background:#f4f1e6; color:#0c3460; text-transform:uppercase; font-size:.66rem; letter-spacing:.08em; padding:.5rem .6rem; text-align:left; border:1px solid #e3e7ee; }
.p-table td { padding:.5rem .6rem; border:1px solid #e3e7ee; color:#33405a; }
.p-table tr.rec td { background:#eef7fb; color:#0c3460; font-weight:700; }
.p-table td.num, .p-table th.num { text-align:right; }

.p-pays { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin:.8rem 0 1.4rem; }
.p-pay { border:1px solid #e3e7ee; padding:.9rem; text-align:center; }
.p-pay.rec { border:2px solid #0c79a8; background:#eef7fb; }
.p-pay .n { font-size:1.35rem; font-weight:800; color:#0c3460; line-height:1.05; }
.p-pay .p { font-size:.68rem; color:#5b6472; margin:.15rem 0; }
.p-pay .s { font-size:.78rem; font-weight:700; color:#0c79a8; }

.p-note { font-size:.7rem; color:#6b7280; line-height:1.55; margin-top:1rem; }
.p-note b { color:#33405a; }
.p-steps { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem; }
.p-step { display:flex; align-items:center; gap:.45rem; font-size:.78rem; color:#33405a; border:1px solid #e3e7ee; padding:.35rem .7rem; }
.p-step .n { background:#d4af37; color:#1a2332; font-weight:800; width:20px; height:20px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.66rem; }
.p-foot { display:flex; justify-content:space-between; align-items:center; border-top:2px solid #d4af37; margin-top:1.6rem; padding-top:1rem; font-size:.72rem; color:#5b6472; gap:1rem; flex-wrap:wrap; }
.p-foot .page { font-weight:700; color:#0c3460; }

/* test box */
#selftest { display:none; margin-top:1rem; font-family:monospace; font-size:.75rem; white-space:pre; color:var(--muted); }
#selftest.ok { color:var(--green); } #selftest.fail { color:var(--red); }

/* ── PRINT: only the light proposal, Letter size ───────── */
@page { size: Letter; margin: 12mm; }
.print-hint { display:none; }
@media print {
  body { background:#fff !important; }
  .hd, .pg-title, .pg-sub, .grid .card, .btn-row, .status, #selftest { display:none !important; }
  .grid { display:block; }
  .proposal { box-shadow:none !important; padding:0 !important; }
  .print-hint { display:none; }
}
@media screen { .proposal { max-width:820px; } }