/* ═══════════════════════════════════════════════════════════════
   Aqua Desktop — everything here applies only when data-theme="mac".
   Terminal theme keeps the plain full-bleed window.
   ═══════════════════════════════════════════════════════════════ */

/* ── welcome ── */
.welcome{position:fixed;inset:0;z-index:200;display:grid;place-items:center}
.welcome[hidden]{display:none}
.welcome-bg{position:absolute;inset:0;
  background:
    radial-gradient(1200px 700px at 22% 18%,#5b7cff55,transparent 60%),
    radial-gradient(1000px 800px at 82% 78%,#ff7ac055,transparent 60%),
    radial-gradient(900px 600px at 60% 40%,#39d0d844,transparent 60%),
    linear-gradient(150deg,#1d2340,#101528 55%,#0b0f1c);
  filter:saturate(1.15)}
.welcome-card{position:relative;width:min(430px,92vw);padding:34px 30px 24px;text-align:center;
  background:rgba(255,255,255,.10);backdrop-filter:blur(34px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);border-radius:22px;
  box-shadow:0 30px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35);color:#fff}
.avatar{width:82px;height:82px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;
  font-size:29px;font-weight:600;letter-spacing:1px;
  background:linear-gradient(160deg,#7fb0ea,#4a83d8 45%,#2f62c4);
  box-shadow:0 10px 26px rgba(40,60,160,.5),inset 0 2px 0 rgba(255,255,255,.4)}
.w-name{width:210px;text-align:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:999px;padding:8px 14px;color:#fff;font-size:16px}
.w-name::placeholder{color:rgba(255,255,255,.55)}
.w-name:focus{outline:none;border-color:#fff;background:rgba(255,255,255,.22)}
.w-sub{margin:16px 0 12px;font-size:14px;color:rgba(255,255,255,.72)}
.w-sub kbd{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);color:#fff}
.theme-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:11px;margin-bottom:16px}
.tp{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.2);border-radius:14px;
  padding:12px 8px;cursor:pointer;color:#fff;transition:.15s}
.tp:hover{background:rgba(255,255,255,.16)}
.tp.on{border-color:#fff;background:rgba(255,255,255,.24);box-shadow:0 0 0 4px rgba(255,255,255,.14)}
.tp b{display:block;font-size:14px;margin-top:8px}
.tp small{display:block;font-size:12.5px;color:rgba(255,255,255,.65)}
.tp-art{display:block;height:42px;border-radius:8px;padding:6px;text-align:left}
.tp-art i{display:block;height:5px;border-radius:3px;margin-bottom:4px}
.tp-mac{background:linear-gradient(160deg,#eef1f6,#cdd5e4)}
.tp-mac i{background:#8a97ad}.tp-mac i:nth-child(1){width:60%;background:#4a6cf7}.tp-mac i:nth-child(2){width:85%}.tp-mac i:nth-child(3){width:45%}
.tp-term{background:#0d1117;border:1px solid #243040}
.tp-term i{background:#2a3a4d}.tp-term i:nth-child(1){width:55%;background:#39d0d8}.tp-term i:nth-child(2){width:80%}.tp-term i:nth-child(3){width:40%}
.w-foot{margin:14px 0 0;font-size:12.5px;color:rgba(255,255,255,.5);line-height:1.5}
.welcome .btn.primary{background:#fff;color:#1b2440;border-color:#fff;padding:9px}

/* ── desktop, menu bar, dock: mac theme only ── */
body[data-theme="mac"]{
  background:
    radial-gradient(1100px 700px at 20% 12%,#7f9cff44,transparent 62%),
    radial-gradient(950px 750px at 85% 82%,#ff9ad044,transparent 62%),
    linear-gradient(155deg,#dfe5f2,#c9d3e8 55%,#bcc7e0);
}
body[data-theme="mac"][data-mode="dark"]{
  background:
    radial-gradient(1100px 700px at 20% 12%,#3a4a8c66,transparent 62%),
    radial-gradient(950px 750px at 85% 82%,#6b3a6e66,transparent 62%),
    linear-gradient(155deg,#191b23,#12141b 55%,#0d0f15);
}

.menubar{display:none}
body[data-theme="mac"] .menubar{
  display:flex;align-items:center;gap:2px;height:30px;padding:0 10px;position:relative;z-index:40;
  background:color-mix(in srgb,var(--panel) 78%,transparent);backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  font-size:14px;transition:opacity .35s}
.mb-mark{font-size:15px;padding:0 9px 0 3px;color:var(--ink);opacity:.85}
.mb{background:transparent;border:none;padding:3px 10px;border-radius:6px;cursor:pointer;font-size:14px}
.mb:hover,.mb.on{background:var(--accent);color:var(--accent-ink)}
.mb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.mb-icon{background:transparent;border:none;cursor:pointer;font-size:14px;position:relative;padding:2px 4px}
.mb-icon .dot{position:absolute;top:0;right:1px;width:7px;height:7px;border-radius:50%;background:var(--bad)}
.mb-clock{font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}

.menu-pop{position:fixed;z-index:45;min-width:250px;padding:5px;border-radius:9px;
  background:color-mix(in srgb,var(--panel2) 92%,transparent);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.menu-pop[hidden]{display:none}
.mi{display:flex;gap:10px;align-items:center;padding:5px 10px;border-radius:6px;
  cursor:pointer;font-size:14px;white-space:nowrap}
.mi>span:first-of-type{flex:1}
.mi:hover{background:var(--accent);color:var(--accent-ink)}
.mi:hover .sc{color:var(--accent-ink);opacity:.85}
.mi .sc{font-size:13px;color:var(--dimmer);font-family:var(--mono)}
.mi.sep{height:1px;padding:0;margin:5px 8px;background:var(--line);pointer-events:none}
/* Every row reserves the checkmark gutter so labels stay in one column. */
.mi::before{content:"✓";width:13px;flex:none;opacity:0}
.mi.check.on::before{opacity:1}
.mi.sep::before{content:none}

/* window becomes a floating desktop window */
body[data-theme="mac"] .window{
  inset:30px 16px 92px;border-radius:14px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line) 85%,transparent);
  box-shadow:0 34px 80px rgba(20,28,55,.34),0 3px 10px rgba(20,28,55,.18)}
body[data-theme="mac"][data-mode="dark"] .window{box-shadow:0 34px 80px rgba(0,0,0,.62)}
body[data-theme="mac"] .titlebar{
  background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(26px) saturate(180%)}
body[data-theme="mac"] .lights{display:flex}
body[data-theme="mac"] .panel{background:color-mix(in srgb,var(--panel) 88%,transparent)}

.dock{display:none}
body[data-theme="mac"] .dock{
  display:flex;align-items:center;gap:7px;position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
  padding:8px 11px;border-radius:19px;z-index:35;transition:opacity .35s;
  background:color-mix(in srgb,var(--panel) 62%,transparent);backdrop-filter:blur(30px) saturate(180%);
  border:1px solid color-mix(in srgb,#fff 26%,transparent);
  box-shadow:0 14px 36px rgba(20,28,55,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.dk{width:42px;height:42px;border-radius:11px;border:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,243,250,.75));
  font-size:21px;cursor:pointer;display:grid;place-items:center;transition:.14s;
  box-shadow:0 2px 6px rgba(20,28,55,.14),inset 0 1px 0 rgba(255,255,255,.9)}
body[data-theme="mac"][data-mode="dark"] .dk{background:linear-gradient(180deg,#4a4d57,#35373f)}
.dk:hover{transform:translateY(-7px) scale(1.11)}
.dk:active{transform:translateY(-2px) scale(1.02)}
.dk-sep{width:1px;height:30px;background:color-mix(in srgb,var(--line) 70%,transparent);margin:0 3px}

/* ═══════════════ customer document (puffy / gradient) ═══════════════ */
.paper{position:fixed;inset:0;z-index:50;overflow:auto;padding:34px 20px 120px;
  background:var(--bg)}
.paper[hidden]{display:none}
.sheet{width:min(880px,100%);margin:0 auto;background:#fff;color:#1f2a44;border-radius:26px;
  box-shadow:0 24px 70px rgba(43,92,184,.18),0 2px 8px rgba(43,92,184,.08);overflow:hidden;
  border:1px solid #dce9fb}

.sheet-head{padding:30px 34px 26px;color:#fff;position:relative;
  background:linear-gradient(135deg,#2f62c4,#4a83d8 55%,#5b93e0);}
.sheet-head::after{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 220px at 82% 0%,rgba(255,255,255,.3),transparent 70%);pointer-events:none}
.sh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;position:relative}
.sh-co{font-size:23px;font-weight:800;letter-spacing:-.3px}
.sh-meta{font-size:13px;line-height:1.455;opacity:.9;margin-top:5px}
.sh-tag{text-align:right;font-size:13px;line-height:1.5;opacity:.94}
.sh-pill{display:inline-block;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:700;letter-spacing:1px}
.sh-subject{margin-top:20px;font-size:16px;font-weight:700;line-height:1.5;position:relative}

.sheet-body{padding:26px 34px 32px}
/* ── the document's spacing scale ──
   Every major block on the page is separated by --doc-block, and every grid of
   cards inside one uses --doc-gap. Four different gaps had crept in (14, 16, 22
   and 14) and the summary card sat 2px off the rhythm at 28. Use these. */
.paper{ --doc-block:30px; --doc-gap:16px }

.party{display:grid;grid-template-columns:1fr 1fr;gap:var(--doc-gap);margin-bottom:24px}
.party .box{background:linear-gradient(180deg,#f8faff,#eef2fb);border:1px solid #dfe5f4;border-radius:14px;
  padding:14px 16px;box-shadow:inset 0 1px 0 #fff}
.party h4{margin:0 0 6px;font-size:12px;letter-spacing:1.2px;color:#7a86a0;text-transform:uppercase}
.party p{margin:0;font-size:14px;line-height:1.45;color:#2a3348}
.party b{font-size:15.5px}

.intro{font-size:12.8px;line-height:1.5;color:#3a4560;margin-bottom:26px}
.intro p{margin:0 0 11px}

.sec-band{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:var(--doc-block) 0 0;
  padding:11px 16px;border-radius:16px 16px 0 0;color:#fff;font-weight:800;letter-spacing:1.1px;font-size:14px;
  background:linear-gradient(135deg,#2f62c4,#4a83d8)}
.sec-band .amt{font-family:var(--mono);letter-spacing:0;font-size:16px}

table.items{width:100%;border-collapse:separate;border-spacing:0;font-size:12.2px;
  border:1px solid #e2e7f2;border-top:none;border-radius:0 0 12px 12px;overflow:hidden}
table.items th{background:linear-gradient(180deg,#f4f7fd,#e9eef8);color:#5c6884;font-size:12px;
  letter-spacing:1px;text-transform:uppercase;padding:9px 12px;text-align:left;border-bottom:1px solid #e2e7f2}
table.items td{padding:11px 12px;border-bottom:1px solid #eef1f8;vertical-align:top}
table.items tr:last-child td{border-bottom:none}
table.items tr:nth-child(even) td{background:#fbfcff}
table.items .num{text-align:right;font-family:var(--mono);white-space:nowrap}
table.items .it{font-weight:700;color:#1d2740}
table.items .ds{color:#4a566f;line-height:1.55}
table.items .dt{color:#b4770c;font-size:13px;margin-top:4px;font-weight:600}
table.items .was{display:block;color:#98a2b8;text-decoration:line-through;font-size:13px}
table.items tr.opt td{background:#fdfaf3}
table.items tr.opt .it{color:#8a7a55}
.tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.8px;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle}
.tag.revised{background:#fdf0d5;color:#9a6b00}
.tag.added{background:#dff5e3;color:#1c7c33}
.tag.optional{background:#eceff5;color:#68738a}

.summary-card{margin-top:var(--doc-block);border-radius:16px;overflow:hidden;border:1px solid #dfe5f4;
  box-shadow:0 10px 30px rgba(30,45,90,.10)}
.summary-card .sc-row{display:flex;justify-content:space-between;padding:12px 20px;font-size:15px;
  background:linear-gradient(180deg,#ffffff,#f7f9ff);border-bottom:1px solid #eef1f8;color:#3a4560}
.summary-card .sc-row b{font-family:var(--mono);color:#1d2740}
.summary-card .sc-row.total{background:linear-gradient(135deg,#2f62c4,#4a83d8);color:#fff;font-size:18px;font-weight:700}
.summary-card .sc-row.total b{color:#fff;font-size:21px}
.summary-card .sc-row.pay{background:linear-gradient(180deg,#f2f6ff,#e8eefc);font-weight:600;color:#243056}
.summary-card .sc-row:last-child{border-bottom:none}
.savings-chip{display:inline-block;margin-top:12px;padding:7px 15px;border-radius:999px;font-size:14px;font-weight:700;
  background:linear-gradient(135deg,#dff5e3,#c7edd0);color:#166534;border:1px solid #b6e3c1}

.terms{margin-top:var(--doc-block);display:grid;gap:var(--doc-gap)}
.term{background:linear-gradient(180deg,#fbfcff,#f4f6fc);border:1px solid #e4e9f5;border-radius:14px;padding:15px 18px}
/* The agreement sits outside the .terms grid, so it needs the block rhythm
   itself rather than inheriting the grid gap. */
.term.agreement{margin-top:var(--doc-gap)}
/* Was an inline font-size/colour on the row. Kept here with .dt and .was so a
   theme can restyle all three together. */
table.items .vend{font-size:10.5px;color:#8a94ab;margin-top:2px}
.term h5{margin:0 0 6px;font-size:12.5px;letter-spacing:1.1px;text-transform:uppercase;color:#5c6884}
.term p{margin:0;font-size:14px;line-height:1.5;color:#3e4a63}

.signblock{margin-top:var(--doc-block);display:grid;grid-template-columns:1fr 1fr;gap:var(--doc-gap)}
.sigcell{background:linear-gradient(180deg,#ffffff,#f6f8fe);border:1px solid #e2e7f2;border-radius:14px;padding:16px 18px}
.sigcell .line{height:56px;border-bottom:2px solid #2b3550;margin-bottom:8px;display:flex;align-items:flex-end;
  padding-bottom:4px}
.sigcell .line img{max-height:52px}
.sigcell .line .typed{font-family:var(--script);font-size:34px;color:#12203a;line-height:1}
.sigcell .who{font-size:13px;font-weight:800;letter-spacing:.6px;color:#1d2740;text-transform:uppercase}
.sigcell .role{font-size:12.5px;color:#7a86a0;margin-top:2px}
.sigcell .when{font-size:12.5px;color:#7a86a0;margin-top:6px}
.sigcell.signed{border-color:#b6e3c1;background:linear-gradient(180deg,#fbfffc,#eefaf1)}

.paperbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:55;display:flex;gap:8px;
  padding:9px 12px;border-radius:14px;background:color-mix(in srgb,var(--panel2) 92%,transparent);
  backdrop-filter:blur(24px);border:1px solid var(--line);box-shadow:var(--shadow)}

/* ═══════════════ notifications ═══════════════ */
.noteitem{display:flex;gap:11px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg);margin-bottom:6px}
.noteitem .ic{font-size:19px}
.noteitem .tx{flex:1;min-width:0}
.noteitem .tx b{display:block;font-size:14px}
.noteitem .tx small{color:var(--dimmer);font-size:13px}
.noteitem.paid{border-color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--bg))}

/* ═══════════════ customer-facing options ═══════════════ */
.options{margin-top:var(--doc-block)}
.options h4{margin:0 0 14px;font-size:13px;letter-spacing:1.3px;text-transform:uppercase;color:#5c6884}
.optgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--doc-gap)}
/* SCOPED TO .optgrid ON PURPOSE. `.opt` also means an optional TABLE ROW
   (table.items tr.opt, above). A bare `.opt` here put display:flex on those
   <tr> elements, which stops them being table rows at all — they drop out of
   the column layout and stack their cells into a narrow strip down the left of
   the page. Two components, one class name. Do not unscope these. */
.optgrid .opt{position:relative;border:1.5px solid #dfe5f4;border-radius:16px;padding:18px 16px 16px;
  background:linear-gradient(180deg,#ffffff,#f6f9ff);display:flex;flex-direction:column}
.optgrid .opt.best{border-color:#4a83d8;box-shadow:0 10px 30px rgba(47,98,196,.16);
  background:linear-gradient(180deg,#ffffff,#eef3ff)}
.optgrid .opt .ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:linear-gradient(135deg,#2f62c4,#4a83d8);color:#fff;font-size:12px;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.optgrid .opt h5{margin:0 0 6px;font-size:17px;color:#1d2740;letter-spacing:-.2px}
.optgrid .opt .optprice{font:800 27px var(--mono);color:#2f62c4;margin-bottom:8px;letter-spacing:-1px}
.optgrid .opt.best .optprice{color:#24509f}
.optgrid .opt p{margin:0 0 10px;font-size:13px;line-height:1.45;color:#4a566f}
.optgrid .opt ul{margin:0 0 12px;padding-left:16px;font-size:13px;line-height:1.5;color:#3e4a63}
.optgrid .opt li{margin-bottom:1px}
.optgrid .opt .optsign{margin-top:auto;padding-top:10px;border-top:1px dashed #cfd8ea;font-size:12.5px;color:#8a94ab}
@media print{.optgrid .opt.best{box-shadow:none}}

/* ═══════════════ sign in ═══════════════ */
.w-h{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.3px}
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 16px}
.who{position:relative;background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.2);
  border-radius:16px;padding:16px 10px;cursor:pointer;color:#fff;transition:.15s}
.who:hover{background:rgba(255,255,255,.2);border-color:#fff}
.who b{display:block;font-size:16px;margin-top:9px}
.who small{display:block;font-size:12.5px;color:rgba(255,255,255,.66);margin-top:2px;line-height:1.35}
.who-av{width:44px;height:44px;border-radius:50%;margin:0 auto;display:grid;place-items:center;
  font-size:18px;font-weight:600;letter-spacing:.5px;
  background:linear-gradient(160deg,#7fb0ea,#4a83d8 45%,#2f62c4);
  box-shadow:0 6px 16px rgba(40,60,160,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.who-tag{position:absolute;top:8px;right:8px;font-size:12px;font-weight:800;letter-spacing:.7px;
  padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.22)}
.who-tag.locked{background:#c0392b}
.w-secret{width:230px;text-align:center;letter-spacing:2px;font-size:17px;margin-bottom:9px}
.w-err{min-height:17px;margin:2px 0 10px;font-size:13px;color:#ffb4b4}
.w-link{background:none;border:none;color:rgba(255,255,255,.7);font-size:14px;cursor:pointer;
  margin-top:12px;text-decoration:underline}
.w-link:hover{color:#fff}

.whoami{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;
  font-size:14px;color:var(--ink);padding:1px 6px;border-radius:6px}
.whoami:hover{background:var(--accent);color:var(--accent-ink)}
.who-av.small{width:18px;height:18px;font-size:12px;box-shadow:none}

/* ═══════════════ soft-blue proposal: padded and rounded ═══════════════ */
.paper{background:linear-gradient(180deg,#eef4fd,#e4edfa)}
.sheet-head::after{background:radial-gradient(620px 240px at 84% 0%,rgba(255,255,255,.26),transparent 70%)}
.party .box{background:linear-gradient(180deg,#f7fbff,#eaf2fd);border:1px solid #d6e4f7;border-radius:18px;padding:14px 16px}
table.items{border:1px solid #dce9fb;border-top:none;border-radius:0 0 16px 16px}
table.items th{background:linear-gradient(180deg,#f2f7fe,#e6eefb);color:#5c7196;padding:11px 14px}
table.items td{padding:13px 14px;border-bottom:1px solid #eef4fd}
table.items tr:nth-child(even) td{background:#f7fbff}
table.items .it{color:#1f2a44}
table.items .ds{color:#4a5a78}
.summary-card{border-radius:20px;border:1px solid #d6e4f7;box-shadow:0 10px 30px rgba(47,98,196,.10)}
.summary-card .sc-row{padding:14px 22px;background:linear-gradient(180deg,#ffffff,#f7fbff);border-bottom:1px solid #eef4fd;color:#3a4a68}
.summary-card .sc-row.pay{background:linear-gradient(180deg,#f2f7fe,#e6eefb);color:#24406f}
.term{background:linear-gradient(180deg,#fbfdff,#f2f7fe);border:1px solid #dce9fb;border-radius:18px;padding:14px 16px}
.term h5{color:#5c7196}
.term p{color:#3a4a68}
.sigcell{background:linear-gradient(180deg,#ffffff,#f7fbff);border:1px solid #dce9fb;border-radius:18px;padding:20px 22px}
.sigcell .line{border-bottom:2px solid #2f62c4}
.savings-chip{border-radius:999px;padding:9px 18px}
.tag.revised{background:#fdf2da;color:#94690a}
.tag.added{background:#dff2e4;color:#1e7a46}
.tag.optional{background:#e8eef8;color:#5c7196}
.optgrid .opt{border-radius:20px;padding:16px 14px 14px;border-color:#dce9fb;background:linear-gradient(180deg,#ffffff,#f7fbff)}
.optgrid .opt.best{background:linear-gradient(180deg,#ffffff,#eef4fd)}

/* ══════════════════════════════════════════════════════════════════
   The proposal on paper.

   Everything above controls the document on screen. This controls what
   happens when it crosses a page boundary — which, until now, nothing
   did. A printed proposal could split a line item in half, leave a
   section heading stranded at the foot of a page with its table
   overleaf, or break a signature box across two sheets.
   ══════════════════════════════════════════════════════════════════ */
@media print{
  /* A line item is one thing. Never break it. */
  table.items tr{ break-inside:avoid; page-break-inside:avoid }
  /* Column headers repeat on every page a table spills onto, so page two
     is not a wall of unlabelled numbers. */
  table.items thead{ display:table-header-group }
  table.items tfoot{ display:table-footer-group }
  /* A section heading belongs with the table it names. */
  .sec-band{ break-after:avoid; page-break-after:avoid; break-inside:avoid }
  /* These are all single objects a reader takes in at once. */
  .summary-card,
  .term,
  .signblock,
  .sigcell,
  .party .box,
  .optgrid .opt,
  .savings-chip{ break-inside:avoid; page-break-inside:avoid }
  /* The options are a comparison — splitting them across pages defeats
     the point of showing them side by side. */
  .options{ break-inside:avoid; page-break-inside:avoid }
}

/* ═══════════════ the logo on the proposal ═══════════════
 *
 * The header is a blue gradient and the mark is blue on transparent, so it
 * needs a ground. A knockout filter was the tempting answer — brightness(0)
 * invert(1) turns any single-colour mark white — but the artwork was measured
 * first: 20% of the roundel is WHITE PIXELS, not transparent holes. Inverting
 * it would have flattened the camera, keypad, reader and shield into one solid
 * white blob. So: a plate, and the company name steps aside once the mark
 * loads rather than repeating it in type.
 */
.sh-brand .sh-logo{display:block;width:196px;height:auto;background:#fff;
  padding:9px 13px;border-radius:10px;
  box-shadow:0 2px 10px rgba(11,32,70,.18),0 1px 0 rgba(255,255,255,.6) inset}
.sh-brand.has-logo .sh-co{display:none}
.sh-brand.has-logo + .sh-meta,.sh-brand.has-logo .sh-meta{margin-top:9px}

/* ═══════════════ the document's typeface ═══════════════
 *
 * Set as variables on .paper by applyDocFont, so one switch moves the whole
 * document — body, tables and headings together — instead of leaving the
 * items table in the old face. Defaults here are what renders before the
 * script runs, and match the Charter entry.
 */
.paper{ --doc-face:Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;
        --doc-size:14.4px; --doc-lh:1.5; --doc-track:0; --doc-head-weight:600 }
.sheet{font-family:var(--doc-face);font-size:var(--doc-size);line-height:var(--doc-lh);
  letter-spacing:var(--doc-track)}
.sheet .sh-co,.sheet h4,.sheet .sec-band,.sheet .items thead th{font-weight:var(--doc-head-weight)}
/* The money column stays lining and tabular whatever the face, so figures line
   up under each other. A proposal where the totals do not align reads as
   careless before anybody checks the arithmetic. */
.sheet .num,.sheet .amt{font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}

/* the picker */
.df-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:9px;margin-top:10px}
.df{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);
  cursor:pointer;color:var(--ink)}
.df:hover{border-color:var(--accent)}
.df.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 26%,transparent)}
.df-sample{font-size:19px;line-height:1.25;color:var(--ink)}
.df-name{font-size:12px;font-weight:600;color:var(--dim)}
.df small{font-size:11.5px;color:var(--dimmer);line-height:1.45}

/* ═══════════════ the proposal, on paper ═══════════════
 *
 * Evan: "There is no reason in the entire world why a proposal for 4 items
 * should take up 2 full pages."
 *
 * He is right, and the cause is that this document was drawn for a screen. On
 * an iPad the generous padding, the 26px radii and the soft shadows are what
 * make it feel like a considered thing rather than a spreadsheet. Printed,
 * every one of those is a millimetre of paper spent on nothing, and they add
 * up to a second sheet for four line items.
 *
 * So the screen keeps its manners and paper gets a tighter setting of the same
 * document. Nothing here changes what it SAYS - no field is dropped, no figure
 * is rounded, no term is abbreviated. It is the same proposal, set properly.
 *
 * Measured, not guessed: at Letter's real content width the sheet was 1667px
 * against roughly 980px of usable page. The numbers below were pushed until it
 * fitted and then eased back until it stopped looking cramped.
 */
@media print{
  /* Ink spent describing edges the paper already has. */
  .sheet-head,.party .box,.summary-card,.term,.sigcell,.savings-chip,
  table.items{ box-shadow:none!important }
  .sheet-head::after{ display:none }

  /* the block rhythm, halved */
  .paper{ --doc-block:11px; --doc-gap:8px }

  /* masthead */
  .sheet-head{ margin:14px 18px 0; padding:12px 15px 11px; border-radius:8px }
  .sheet-body{ padding-top:12px }
  .sh-brand .sh-logo{ width:134px; padding:5px 8px; border-radius:5px; box-shadow:none }
  .sh-co{ font-size:16px }
  .sh-meta{ font-size:9.4px; line-height:1.4; margin-top:3px }
  .sh-tag{ font-size:9.6px; line-height:1.4 }
  .sh-pill{ font-size:9px; padding:2px 8px }
  .sh-subject{ margin-top:9px; font-size:12.4px; line-height:1.35 }

  .sheet-body{ padding:12px 18px 10px }
  /* The agreement box is gone, so the signature block carries the gap itself. */
  .signblock{ margin-top:12px }

  /* who it is for and who it is from */
  .party{ margin-bottom:11px; gap:9px }
  .party .box{ padding:8px 11px; border-radius:7px }
  .party h4{ font-size:8.6px; letter-spacing:.9px; margin:0 0 3px }
  .party p{ font-size:10.4px; line-height:1.36 }
  .party b{ font-size:11.4px }

  .intro{ font-size:10.2px; line-height:1.42; margin-bottom:11px }
  .intro p{ margin:0 0 5px }

  /* the line items — where a four-row table has no business being tall */
  .sec-band{ padding:6px 12px; font-size:10.6px; border-radius:7px 7px 0 0; letter-spacing:.8px }
  .sec-band .amt{ font-size:11.6px }
  table.items{ font-size:9.6px; border-radius:0 0 7px 7px }
  table.items th{ padding:5px 9px; font-size:8.5px; letter-spacing:.7px }
  table.items td{ padding:5px 9px }
  table.items .ds{ line-height:1.38 }
  table.items .dt{ font-size:9.4px; margin-top:2px }
  table.items .was{ font-size:9px }
  table.items .vend{ font-size:8.4px; margin-top:1px }
  .tag{ font-size:8.4px; padding:1px 4px }

  /* the money */
  .summary-card{ border-radius:7px }
  .summary-card .sc-row{ padding:5px 13px; font-size:11.2px }
  .summary-card .sc-row.total{ font-size:13px }
  .summary-card .sc-row.total b{ font-size:15px }
  .savings-chip{ margin-top:7px; padding:4px 11px; font-size:10.4px }

  /* terms and signatures */
  .term{ padding:7px 12px; border-radius:7px }
  .term h5{ font-size:9px; letter-spacing:.8px; margin:0 0 3px }
  .term p{ font-size:10px; line-height:1.4 }
  .sigcell{ padding:8px 12px; border-radius:7px }
  .sigcell .line{ height:30px; margin-bottom:4px }
  .sigcell .line img{ max-height:32px }
  .sigcell .line .typed{ font-size:24px }
  .sigcell .who{ font-size:10px }
  .sigcell .role,.sigcell .when{ font-size:9.4px; margin-top:2px }
}

/* ═══════════════ print: this file cancels its own decoration ═══════════════
 *
 * Evan, working it out from the symptom: "I think it's a spanning background
 * applied somewhere way up, because that's what the original background looked
 * like before I had you clean it up, then when you tightened up the table and
 * boxes, it got bigger, aka revealing more of the background."
 *
 * That is exactly it, and it explains the one thing I could not: the band GREW
 * when the layout got tighter. .paper is position:fixed, inset:0 - it is the
 * height of the window whatever the document does - and it carries the soft
 * blue gradient the proposal card sits on. Shorten the sheet and you simply see
 * more of the ground beneath it. It was never an element in the document.
 *
 * The rules that whiten it live in styles.css. This file is where the gradient
 * and the toolbar are DEFINED - so leaning on the other file to undo them is a
 * dependency between two stylesheets that has to hold on every machine, every
 * load, every cache state. It did not hold on Evan's, and I could not reproduce
 * that, which cost him ninety minutes and a customer kept waiting.
 *
 * So each file now cancels its own decoration. This block is deliberately a
 * duplicate of part of the one in styles.css: either file alone is enough, and
 * neither depends on the other arriving.
 */
@media print{
  .paper{ background:#fff!important; background-image:none!important;
    position:static!important; inset:auto!important; overflow:visible!important;
    padding:0!important; height:auto!important; min-height:0!important }
  .paperbar{ display:none!important }
  /* The card look is this file's too - border, 26px radius, and a 70px blue
   * shadow. On paper the sheet IS the page and all three describe an edge the
   * paper already has. */
  .sheet{ width:auto!important; max-width:none!important; margin:0!important;
    border:0!important; border-radius:0!important; box-shadow:none!important }
  .sheet-head::after{ display:none!important }
  html,body{ background:#fff!important; background-image:none!important }
}