/* proposal-layouts.css — the three proposal layouts (Modern, Classic, Bold) shared by estimate
   proposals (proposal.html), maintenance proposals (maint-proposal.html) and visit reports
   (maint-report.html). Modern is the original dark look; Classic and Bold are light "paper"
   layouts. Chosen per company on proposal-design.html. 2026-10-15. */

/* ── shared document pieces (used by the maintenance documents) ── */
.doc-sec{margin-top:16px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.02em;white-space:nowrap}
.p-pass{background:rgba(34,197,94,.15);color:#16a34a}.p-attention{background:rgba(245,158,11,.16);color:#b45309}.p-fail{background:rgba(239,68,68,.15);color:#dc2626}.p-na{background:rgba(148,163,184,.18);color:#64748b}
.p-urgent{background:#dc2626;color:#fff}.p-high{background:rgba(239,68,68,.15);color:#dc2626}.p-medium{background:rgba(245,158,11,.16);color:#b45309}.p-low{background:rgba(148,163,184,.2);color:#475569}
.fq{display:inline-block;font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:999px;white-space:nowrap;letter-spacing:.02em}
.f-annual{background:rgba(59,130,246,.14);color:#2563eb}.f-semi{background:rgba(16,185,129,.15);color:#059669}.f-quarterly{background:rgba(168,85,247,.15);color:#7e22ce}
.f-monthly{background:rgba(245,158,11,.17);color:#b45309}.f-daily{background:rgba(239,68,68,.13);color:#dc2626}.f-asreq{background:rgba(148,163,184,.2);color:#475569}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tier{position:relative;border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--card-2,transparent);display:flex;flex-direction:column;gap:6px}
.tier.rec{border:2px solid var(--accent)}
.tier .rec-badge{position:absolute;top:-11px;left:14px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.05em}
.tier .t-name{font-weight:800;font-size:16px}.tier .t-price{font-size:26px;font-weight:900;color:var(--accent);line-height:1.1}.tier .t-price small{font-size:13px;font-weight:600;color:var(--text-2)}
.tier ul{margin:4px 0 0;padding-left:18px;font-size:13.5px;color:var(--text-2)}.tier li{margin:3px 0}
.cal{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.cal .m{border:1px solid var(--border);border-radius:8px;padding:6px 2px;text-align:center;font-size:11px;color:var(--text-2);min-height:52px}
.cal .m.on{border-color:var(--accent);color:var(--text)}
.cal .m b{display:block;font-size:11px;letter-spacing:.03em}
.cal .dot{display:inline-block;min-width:20px;height:20px;line-height:20px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800;margin-top:4px;padding:0 5px}
.sys{margin-top:12px}.sys h3{font-size:14px;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.tl{list-style:none;margin:0;padding:0}.tl li{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.tl li .tx{flex:1}.tl li .nt{display:block;font-size:12px;color:var(--text-2);margin-top:2px}
.caveat{font-size:12px;color:var(--text-2);border-left:3px solid var(--accent);padding:8px 12px;margin-top:12px;background:rgba(127,127,127,.06);border-radius:0 8px 8px 0}
.budget{width:100%;border-collapse:collapse;font-size:13px}
.budget th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);padding:8px 6px;border-bottom:1px solid var(--border)}
.budget td{padding:8px 6px;border-bottom:1px solid var(--border)}.budget .r{text-align:right;white-space:nowrap}
.budget tfoot td{font-weight:800;border-top:2px solid var(--accent)}
.kpis3{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.kpis3 div{border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center}
.kpis3 b{display:block;font-size:22px;font-weight:900}.kpis3 span{font-size:11px;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}.photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.sigimg{max-width:280px;max-height:110px;background:#fff;border-radius:8px;border:1px solid var(--border);padding:4px}
/* CATALYST_FLAG_HERO_20261028: cover photo shown as a banner under the title */
.cover .cv-photo{margin:0 0 24px;border-radius:12px;overflow:hidden;aspect-ratio:2.4/1;background:rgba(0,0,0,.06)}
.cover .cv-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
@media print{.cover .cv-photo{margin:0 0 .25in;border-radius:6px;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
.cover.has-photo{background-image:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.66)),var(--cover-photo)!important;background-size:cover!important;background-position:center!important}
.cover.has-photo .headline,.cover.has-photo .co-name,.cover.has-photo .subtext{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.doc-ribbon:not(.hide)~#app .printbtn{top:46px}
.doc-ribbon{position:sticky;top:0;z-index:30;background:#111;color:#f5e070;font:700 13px Inter,Arial,sans-serif;text-align:center;padding:8px 12px;border-bottom:1px solid #333}
@media(max-width:560px){.cal{grid-template-columns:repeat(6,1fr)}.kpis3{grid-template-columns:repeat(2,1fr)}.budget{font-size:12px}}

/* ── Classic: white paper, serif headings, thin accent rules ── */
body.lay-classic{--bg:#f3f1ec;--bg-2:#f3f1ec;--card:#fff;--card-2:#fff;--text:#1f2328;--text-2:#5d6168;--border:rgba(0,0,0,.11);--gold:var(--accent)}
body.lay-classic .cover{background:#fff;border-bottom:3px double var(--accent);text-align:left;padding:34px max(16px,calc(50% - 364px)) 26px}
body.lay-classic .cover img.logo{margin-bottom:10px}
body.lay-classic .headline{font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:30px;color:#1f2328}
body.lay-classic .subtext{margin:0;color:#5d6168}
body.lay-classic .co-name{color:#5d6168}
body.lay-classic .card{border-radius:6px;border-color:rgba(0,0,0,.09);box-shadow:0 1px 2px rgba(0,0,0,.04)}
body.lay-classic .card h2{font-family:Georgia,'Times New Roman',serif;text-transform:none;letter-spacing:0;font-size:19px;color:#1f2328;border-bottom:1px solid var(--accent);padding-bottom:7px}
body.lay-classic input.name{background:#fff;color:#1f2328}
body.lay-classic .actionbar{background:rgba(243,241,236,.97)}
body.lay-classic .printbtn{background:#fff;color:#1f2328;border-color:rgba(0,0,0,.15)}
body.lay-classic .btn-decline{color:#5d6168}
body.lay-classic .badge.pending{color:#7a5d00}

/* ── Bold: full-bleed accent cover, heavy type, light body ── */
body.lay-bold{--bg:#f4f5f7;--bg-2:#f4f5f7;--card:#fff;--card-2:#fff;--text:#111318;--text-2:#555b66;--border:rgba(0,0,0,.09);--gold:var(--accent)}
body.lay-bold .cover{background:var(--accent);border-bottom:0;padding:54px 16px 46px;color:var(--accent-ink)}
body.lay-bold .cover .headline{color:var(--accent-ink);font-size:36px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
body.lay-bold .cover .co-name,body.lay-bold .cover .subtext{color:var(--accent-ink);opacity:.9}
body.lay-bold .cover img.logo{background:#fff;border-radius:12px;padding:8px 12px}
body.lay-bold .card{border-radius:16px;border:0;box-shadow:0 2px 10px rgba(15,23,42,.07)}
body.lay-bold .card h2{font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--accent)}
body.lay-bold input.name{background:#fff;color:#111318}
body.lay-bold .actionbar{background:rgba(244,245,247,.97)}
body.lay-bold .printbtn{background:#fff;color:#111318;border-color:rgba(0,0,0,.15)}
body.lay-bold .btn-decline{color:#555b66}
body.lay-bold .badge{background:#fff!important}

/* ── Print / PDF: always white paper; keep the accent and the cover band ── */
@media print{
  @page{margin:12mm}
  html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body,body.lay-classic,body.lay-bold,body.theme-evolve{--bg:#fff;--bg-2:#fff;--card:#fff;--card-2:#fff;--text:#111;--text-2:#4b5563;--border:#d1d5db}
  .tier{background:#fff!important}.cal .m{color:#4b5563!important}.cal .m.on{color:#111!important}
  .doc-ribbon,.no-print{display:none!important}
  body.lay-bold .cover{background:var(--accent)!important}
  body.lay-bold .cover .headline,body.lay-bold .cover .co-name,body.lay-bold .cover .subtext{color:var(--accent-ink)!important}
  .cover.has-photo .headline,.cover.has-photo .co-name,.cover.has-photo .subtext{color:#fff!important}
  .tier,.sys,.cal,.budget tr,.photos img{break-inside:avoid}
  .card h2{color:var(--accent)!important}
  .tier .t-price{color:var(--accent)!important}
}
#mk-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#111;color:#fff;border:1px solid #333;padding:11px 16px;border-radius:12px;font:600 14px Inter,Arial,sans-serif;z-index:99;transition:.2s;max-width:calc(100% - 32px)}
#mk-toast.show{opacity:1;transform:translateX(-50%)}#mk-toast.err{background:#7f1d1d;border-color:#b91c1c}