/* Proforma generator - Recurlab's calm look, in a dark and a light theme.
   System fonts only (nothing is fetched from anywhere). The printed page has its own file: render/proforma.css.
   EVERY colour on screen is a token below; nothing else in this file (or in tour.css) names a colour. The paper
   tokens (--paper, --ink) are the same in both themes on purpose: the page preview and anything printed stay white paper. */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0b0e; --bg2:#131318; --bg3:#1b1b22;
  --fg:#f3f0e9; --fg2:#cfccc4; --mute:#a6a39b; --ph:#8f8c85;
  --line:rgba(243,240,233,.14); --line2:rgba(243,240,233,.08); --line3:rgba(243,240,233,.3); --ctl:#85838c;
  --card-a:rgba(243,240,233,.045); --card-b:rgba(243,240,233,.015); --wash:rgba(243,240,233,.04); --wash2:rgba(243,240,233,.02);
  --topbar:rgba(11,11,14,.92); --glow:rgba(216,242,58,.06);
  --accent:#d8f23a; --accent-bg:#d8f23a; --on-accent:#141417; --accent-tint:rgba(216,242,58,.06); --accent-tint2:rgba(216,242,58,.18); --accent-line:rgba(216,242,58,.5);
  --terra:#ff9a73; --terra-tint:rgba(224,105,63,.1); --terra-tint2:rgba(224,105,63,.07); --terra-line:rgba(255,154,115,.65); --terra-glow:rgba(255,154,115,.55);
  --violet:#bdb6f0; --violet-line:rgba(189,182,240,.7);
  --teal:#7fd9d2; --teal-line:rgba(127,217,210,.7); --teal-tint:rgba(127,217,210,.1);
  --amber:#f0c36b;
  --scrim:rgba(0,0,0,.6); --shadow:rgba(0,0,0,.55); --dim:rgba(0,0,0,.5);
  --ring:#d8f23a; --ring-inner:#0b0b0e;
  --pv-bg:#2a2a30;
  --off-bg:#26262d; --off-fg:#a6a39b; --off-line:#6a6872;
  --paper:#ffffff; --ink:#000000;
  --serif:Georgia,'Times New Roman',serif; --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r:14px;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f1ea; --bg2:#ffffff; --bg3:#ebe7dd;
  --fg:#1a1a1f; --fg2:#3b3a42; --mute:#58565e; --ph:#6b6970;
  --line:rgba(26,26,31,.2); --line2:rgba(26,26,31,.1); --line3:rgba(26,26,31,.38); --ctl:#6d6b74;
  --card-a:rgba(255,255,255,.9); --card-b:rgba(255,255,255,.6); --wash:rgba(26,26,31,.05); --wash2:rgba(26,26,31,.03);
  --topbar:rgba(244,241,234,.94); --glow:rgba(77,94,0,.07);
  --accent:#4a5a00; --accent-bg:#4a5a00; --on-accent:#ffffff; --accent-tint:rgba(77,94,0,.09); --accent-tint2:rgba(77,94,0,.16); --accent-line:rgba(77,94,0,.55);
  --terra:#a32f08; --terra-tint:rgba(190,70,30,.1); --terra-tint2:rgba(190,70,30,.07); --terra-line:rgba(163,47,8,.6); --terra-glow:rgba(190,70,30,.45);
  --violet:#4b3fa8; --violet-line:rgba(75,63,168,.6);
  --teal:#0a6159; --teal-line:rgba(10,97,89,.6); --teal-tint:rgba(10,97,89,.09);
  --amber:#7a4f00;
  --scrim:rgba(20,20,23,.55); --shadow:rgba(20,20,23,.28); --dim:rgba(0,0,0,.55);
  --ring:#ffe94d; --ring-inner:#1a1a1f;
  --pv-bg:#d6d3ca;
  --off-bg:#e4e0d6; --off-fg:#58565e; --off-line:#8b8892;
}
/* ── Gujarati: a font stack that has the letters (system fonts only, nothing is fetched), a taller line so the tall glyphs are never
   clipped, no letter-spacing (it breaks the joined letters), and room to wrap. The printed proforma has its own file and is not touched. ── */
html[lang="gu"]{
  --sans:'Noto Sans Gujarati','Nirmala UI','Gujarati Sangam MN','Shruti',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Noto Sans Gujarati','Nirmala UI','Gujarati Sangam MN','Shruti',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
html[lang="gu"] body{line-height:1.65}
html[lang="gu"] h1{line-height:1.4;font-size:38px}
html[lang="gu"] h2,html[lang="gu"] .tour-title{line-height:1.4}
html[lang="gu"] h3,html[lang="gu"] .sub,html[lang="gu"] .hint,html[lang="gu"] .rules-line,html[lang="gu"] .note,html[lang="gu"] .plain,html[lang="gu"] .words,html[lang="gu"] .why,html[lang="gu"] .learned{line-height:1.75}
html[lang="gu"] .btn,html[lang="gu"] .chip,html[lang="gu"] .tag,html[lang="gu"] .sup,html[lang="gu"] .seg,html[lang="gu"] .linkbtn,html[lang="gu"] .rowbtn,html[lang="gu"] .tabs a,html[lang="gu"] .field,html[lang="gu"] .where,html[lang="gu"] .stat span,html[lang="gu"] .product,html[lang="gu"] .demo-bar,html[lang="gu"] .toast{line-height:1.6}
html[lang="gu"] .label,html[lang="gu"] .eyebrow,html[lang="gu"] h3.sec,html[lang="gu"] .grid-table thead th,html[lang="gu"] .tour-count,html[lang="gu"] table.stackable td[data-label]:before,html[lang="gu"] table.stackable th[data-label]:before,html[lang="gu"] .lines td[data-label]:before,html[lang="gu"] .check td[data-label]:before{font-family:var(--sans);letter-spacing:0;text-transform:none}
html[lang="gu"] .chip{white-space:normal}
/* Gujarati letters are drawn smaller than Latin ones at the same size, so the smallest text is a point or two larger */
html[lang="gu"] .grid-table thead th{font-size:12.5px}
html[lang="gu"] .label,html[lang="gu"] .eyebrow,html[lang="gu"] h3.sec,html[lang="gu"] .tour-count{font-size:13px}
html[lang="gu"] .hint,html[lang="gu"] .why{font-size:14px}
html[lang="gu"] .where,html[lang="gu"] .hit-main small,html[lang="gu"] .wordnote,html[lang="gu"] .sample,html[lang="gu"] .stat span,html[lang="gu"] .linkbtn,html[lang="gu"] .proposal,html[lang="gu"] .namefix p,html[lang="gu"] .need{font-size:13.5px}
html[lang="gu"] .grid-table small{font-size:13px}
html[lang="gu"] .err{font-size:14.5px}
html[lang="gu"] .chip,html[lang="gu"] .tag,html[lang="gu"] .sup{font-size:12.5px}
html[lang="gu"] .field,html[lang="gu"] .demo-bar{font-size:14px}
html[lang="gu"] table.stackable td[data-label]:before,html[lang="gu"] table.stackable th[data-label]:before,html[lang="gu"] .lines td[data-label]:before,html[lang="gu"] .check td[data-label]:before{font-size:12px}
html[lang="gu"] .grid-table th,html[lang="gu"] .grid-table td{line-height:1.6}
html[lang="gu"] .tour-card p{line-height:1.75}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:radial-gradient(1100px 600px at 90% -10%,var(--glow),transparent 60%),var(--bg);background-attachment:fixed}
button,select,input,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--accent-bg);color:var(--on-accent);padding:8px 12px;border-radius:8px;z-index:100;font-weight:600}
.skip:focus{top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.label{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.muted{color:var(--mute)}
.bad-text{color:var(--terra)} .ok-text{color:var(--accent)}
.hint{font-size:13px;color:var(--mute);margin:8px 0 0;line-height:1.45}
.err{color:var(--terra);font-size:13.5px;margin:6px 0 0;min-height:0}
.err:empty{display:none}

/* ── top bar ── */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 24px;background:var(--topbar);backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.product{display:flex;flex-direction:column;line-height:1.25}
.product b{font-weight:600;font-size:14px}
.product span{font-size:12.5px;color:var(--mute);text-transform:capitalize}
.tabs{display:flex;gap:4px;margin-left:auto;align-items:center;flex-wrap:wrap}
.tabs a{text-decoration:none;padding:8px 11px;white-space:nowrap;border-radius:99px;font-size:14px;color:var(--fg2)}
.tabs a:hover{background:var(--bg3)}
.tabs a.on{background:var(--accent-bg);color:var(--on-accent);font-weight:600}
.icon-btn{background:none;border:1px solid var(--ctl);border-radius:10px;width:36px;height:36px;cursor:pointer;font-size:18px;line-height:1}
.icon-btn.small{width:30px;height:30px;font-size:16px}
.icon-btn:hover{border-color:var(--fg)}
.menu{position:absolute;right:28px;top:58px;background:var(--bg2);border:1px solid var(--ctl);border-radius:12px;padding:6px;box-shadow:0 20px 50px var(--shadow);display:flex;flex-direction:column;min-width:210px}
.menu button{background:none;border:none;padding:10px 14px;cursor:pointer;border-radius:8px;text-align:left}
.menu button:hover{background:var(--bg3)}
.demo-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:8px 28px;font-size:13px;background:var(--accent-tint);border-bottom:1px dashed var(--accent-line)}
.demo-bar .dd b{color:var(--accent)}
.demo-bar.pretend-on{background:var(--terra-tint);border-bottom-color:var(--terra-line)}
.demo-bar.pretend-on .dd b{color:var(--terra)}
.pretend{display:flex;align-items:center;gap:8px;color:var(--fg2)}
.pretend input{background:var(--bg2);border:1px solid var(--ctl);border-radius:8px;padding:4px 8px;font-size:13px}
.sample{color:var(--mute);font-size:12.5px}

main{max-width:1380px;margin:0 auto;padding:28px 28px 80px;outline:none}
h1{font-family:var(--serif);font-weight:400;font-size:42px;line-height:1.05;margin:0;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--accent)}
h2{font-family:var(--serif);font-weight:400;font-size:26px;margin:0 0 10px}
h3{margin:0;font-size:15px;font-weight:600}
h3.sec{margin:16px 0 8px;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:500}
h2.block{margin-top:40px}
.sub{color:var(--fg2);font-size:15px;line-height:1.55;max-width:820px;margin:12px 0 0}
.sub.small{font-size:13.5px}
.eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.eyebrow:before{content:"";width:22px;height:2px;background:currentColor}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:22px;flex-wrap:wrap}
.hero>div:first-child{flex:1 1 560px}
.back{display:inline-flex;gap:8px;color:var(--mute);text-decoration:none;font-size:13.5px}
.back:hover{color:var(--fg)}

.card{background:linear-gradient(180deg,var(--card-a),var(--card-b));border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.card h2{font-size:22px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.two-col>*{min-width:0}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:4px 14px;align-items:start}
.grid-form .hint{grid-column:auto;margin-top:-2px}
.field{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:13.5px;color:var(--fg2)}
.field input,.field select,.field textarea,input.sm{background:var(--bg2);border:1px solid var(--ctl);border-radius:10px;padding:9px 11px;font-size:15px;color:var(--fg);width:100%;min-width:0}
.field input[readonly]{color:var(--mute)}
input::placeholder,textarea::placeholder{color:var(--ph)}
.field input:focus,.field select:focus,.field textarea:focus,input.sm:focus{outline:2px solid var(--accent);outline-offset:1px}
.rules-line{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line2);font-size:14px;line-height:1.5}

/* ── buttons, chips ── */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:10px 16px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid var(--ctl);background:var(--bg3);text-decoration:none}
.btn:hover{border-color:var(--fg)}
.btn.primary{background:var(--accent-bg);border-color:var(--accent-bg);color:var(--on-accent)}
.btn.small{padding:6px 10px;font-size:13px;border-radius:9px}
.btn[disabled],.btn.primary[disabled]{background:var(--off-bg);color:var(--off-fg);border:1px dashed var(--off-line);opacity:1;cursor:not-allowed;font-weight:500}   /* clearly "not now": grey, dashed, no accent colour */
.btn[disabled]:hover,.btn.primary[disabled]:hover{border-color:var(--off-line)}
.linkbtn{background:none;border:none;padding:0;color:var(--fg2);font-size:12.5px;text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--fg)}
.rowbtn{background:none;border:none;padding:0;text-align:left;font-weight:500;font-size:13px;cursor:pointer;color:var(--fg);text-decoration:underline;text-decoration-color:var(--line3)}
.rowbtn:hover{text-decoration-color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.why{font-size:13px;color:var(--terra);margin:12px 0 0;line-height:1.45}
.why:empty{display:none}
.chip{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:99px;border:1px solid var(--line3);color:var(--fg2);white-space:nowrap;vertical-align:1px}
.chip-proved{border-color:var(--accent-line);color:var(--accent)}
.chip-confirm{border-color:var(--violet-line);color:var(--violet)}
.chip-needs{border-color:var(--terra-line);color:var(--terra);background:var(--terra-tint)}
.chip-mine{border-color:var(--teal-line);color:var(--teal)}
.chip-none{border-style:dashed;color:var(--mute)}
.tag{font-size:11.5px;padding:2px 8px;border-radius:6px;border:1px solid var(--violet-line);color:var(--violet)}
.sup{font-size:11.5px;padding:1px 7px;border-radius:6px;border:1px solid var(--line3);color:var(--fg2);background:var(--wash)}
.where{font-size:12.5px;color:var(--mute)}
.wordnote{color:var(--amber)!important;font-size:12.5px;line-height:1.4}
small.wordnote:before{content:"\26A0\FE0E  "}
.hit-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.proposal{display:block;margin-top:6px;padding:8px 10px;border-radius:9px;border:1px dashed var(--violet-line);font-size:12.5px;line-height:1.45;color:var(--fg2);width:100%}
.proposal b{color:var(--fg)}
.proposal .btn{margin-top:6px}
.namefix{margin-top:8px;padding:8px 10px;border-radius:9px;border:1px dashed var(--terra-line)}
.namefix p{margin:0;font-size:12.5px}
.namefix .field{margin-top:6px}
.ack{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:14px;color:var(--fg)}
.ack.small{font-size:12.5px;margin-top:6px}
.ack input{width:18px;height:18px;accent-color:var(--accent-bg)}
.warnnote{color:var(--terra)}
.need{font-size:12.5px;color:var(--terra);font-weight:600}

.note{font-size:13.5px;line-height:1.5;color:var(--fg2);padding:12px 14px;border-radius:12px;background:var(--bg2);border:1px dashed var(--line3);margin:0 0 14px}
.note.warn{border-color:var(--terra-line);background:var(--terra-tint2)}
.note.warn b{color:var(--terra)}
.note.lime{border-color:var(--accent-line)}
.plain{margin:8px 0 0;padding-left:20px;font-size:13.5px;line-height:1.55;color:var(--fg2)}
details.problems{margin:8px 0;font-size:13.5px;color:var(--fg2)}
details.problems summary{cursor:pointer}

/* ── the New proforma screen ── */
.np{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px;align-items:start}
.np-right{position:sticky;top:112px}
.hits{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.hit{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px 14px;padding:10px 12px;border-radius:11px;background:var(--bg2);border:1px solid var(--line2)}
.hit-main{flex:1 1 320px;min-width:0}
.hit-main small{display:block;font-size:12.5px;color:var(--mute);margin-top:3px;line-height:1.4}
.hit-main small b{color:var(--fg)}
.oneoff{flex:1 1 100%;padding-top:10px;border-top:1px dashed var(--line3)}
.totals{width:100%;border-collapse:collapse;font-size:14.5px}
.totals th,.totals td{padding:7px 0;border-bottom:1px solid var(--line2);text-align:left;font-weight:400}
.totals td.n{text-align:right;font-variant-numeric:tabular-nums}
.totals tr.strong th,.totals tr.strong td{font-weight:600}
.totals tr.grand th,.totals tr.grand td{font-size:20px;font-weight:700;color:var(--accent);border-bottom:none;padding-top:12px}
.words{margin:12px 0 0;font-size:13.5px;line-height:1.5}

/* ── the Add the new prices screen ── */
.ways{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start}
.ways-side{display:grid;gap:16px;align-content:start}
.dropzone{margin:12px 0 4px;padding:18px;border:2px dashed var(--ctl);border-radius:14px;text-align:center;background:var(--wash2)}
.dropzone p{margin:0 0 10px;font-size:14px}
.dropzone.over,.dropzone:focus-within{border-color:var(--accent);background:var(--accent-tint)}
.dropzone{position:relative}
.dropzone input[type=file]{max-width:100%;font-size:13.5px}
/* The browser's own "Choose file / No file chosen" is in the browser's language, so it is hidden and the button beside it (a label for the same box) says it in ours. It stays reachable by keyboard. */
.dropzone input.filepick{position:absolute;left:50%;bottom:6px;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.filebtn{cursor:pointer}
.dropzone:focus-within .filebtn{outline:2px solid var(--accent);outline-offset:2px}
.en-detail{display:block;margin-top:2px;color:var(--mute);font-size:12px;line-height:1.4}
#lang-btn{white-space:nowrap}
.sheet-preview th,.sheet-preview td{padding:4px 8px;font-size:12px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}

/* ── tables ── */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--wash2);margin-top:10px}
.grid-table{width:100%;border-collapse:collapse;font-size:13.5px}
.grid-table th,.grid-table td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:top;text-align:left}
.grid-table thead th{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);font-weight:400;border-bottom:1px solid var(--line);background:var(--bg2)}
.grid-table tbody th{font-weight:500}
.grid-table small{display:block;color:var(--mute);font-size:12px;font-weight:400;margin-top:3px;line-height:1.4}
.grid-table .n{text-align:right;font-variant-numeric:tabular-nums}
.grid-table tr.now th,.grid-table tr.now td{background:var(--accent-tint)}
.grid-table tr.open>*{background:var(--wash)}
.grid-table tr.detail>td{background:var(--bg2);padding:14px 16px}
.lines th,.lines td{padding:9px 7px}
.lines .sm{width:82px;padding:7px 8px;font-size:14.5px}
.lines td:first-child{min-width:170px;max-width:260px}
.lines td:nth-child(4){min-width:96px}
.lines .namefix input{width:100%}
.lines .rm{width:36px;padding-left:2px;padding-right:6px}
.lines .meta{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.lines tr.needs td{background:var(--terra-tint2)}
input.bad{border-color:var(--terra);outline:2px solid var(--terra-glow);outline-offset:0}
.check .ck{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:13px;font-weight:700;margin-right:6px}
.ck.ok{background:var(--accent-tint2);color:var(--accent)}
.ck.bad{background:var(--terra-tint);color:var(--terra)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:16px 0 6px}
.stat{padding:10px 12px;border-radius:11px;background:var(--bg2);border:1px solid var(--line2);display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--serif);font-weight:400;font-size:26px}
.stat span{font-size:12.5px;color:var(--mute)}
.hist{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.hist li{padding:8px 12px;border-radius:10px;background:var(--bg3);border:1px solid var(--line2);display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--fg2)}
.hist b{color:var(--fg);font-variant-numeric:tabular-nums}
.toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 16px}
.segs{display:flex;flex-wrap:wrap;gap:4px;background:var(--bg2);border:1px solid var(--ctl);padding:3px;border-radius:12px;margin:6px 0 10px;width:fit-content;max-width:100%}
.seg{background:none;border:none;padding:7px 12px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--fg2)}
.seg.on{background:var(--fg);color:var(--bg);font-weight:600}
.seg .count{opacity:.75;margin-left:3px}
.panel p{margin:0 0 6px;line-height:1.5;font-size:14px}
.learned{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--fg2)}
.cust .head{display:flex;justify-content:space-between;gap:10px}
.fx-add{margin-top:10px;padding-top:6px;border-top:1px dashed var(--line3)}
.stackcards{display:block}

/* ── the printed page preview: paper stays white in both themes ── */
.preview-host{min-width:0}
.pv-bar{display:flex;justify-content:flex-end;margin-bottom:8px}
.pv-frame{overflow:hidden;background:var(--pv-bg);border-radius:10px;padding:0;position:relative;max-width:830px;margin:0 auto}
.pv-frame.zoomed{overflow:auto;max-height:80vh}
.pv-inner{background:var(--paper);color:var(--ink)}
.pv-inner .pf-page{margin:0 0 8px;box-shadow:none}

/* ── modal, toast ── */
.modal-back{position:fixed;inset:0;z-index:50;background:var(--scrim);display:grid;place-items:center;padding:20px}
.modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--bg2);border:1px solid var(--ctl);border-radius:18px;padding:24px;box-shadow:0 40px 90px var(--shadow)}
.modal p{line-height:1.55;font-size:14.5px;color:var(--fg2)}
.modal b{color:var(--fg)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 20px 40px var(--shadow);max-width:min(760px,calc(100% - 32px));text-align:center}
#print-root{display:none}
.print-note{font:14px sans-serif;margin:0;padding:12mm}

@media (max-width:1100px){
  .np{grid-template-columns:minmax(0,1fr)}
  .np-right{position:static}
  .two-col,.ways{grid-template-columns:minmax(0,1fr)}
  .top{flex-wrap:wrap;gap:10px 16px}
  .tabs{margin-left:0;order:5;flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
  .tabs a{white-space:nowrap}
  .icon-btn#menu-btn{margin-left:auto}
}
@media (max-width:700px){
  main{padding:20px 14px 70px}
  .top{padding:10px 14px}
  .demo-bar{padding:8px 14px}
  .menu{right:14px;top:56px}
  h1{font-size:32px}
  .two,.toolbar{grid-template-columns:1fr}
  .card{padding:16px}
  .table-wrap{border:none;background:none}
  table.stackable,.lines,.check{display:block}
  table.stackable thead,.lines thead,.check thead{display:none}
  table.stackable tbody,.lines tbody,.check tbody{display:block}
  table.stackable tr,.lines tr,.check tr{display:block;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;padding:8px 12px;margin-bottom:10px;position:relative}
  table.stackable tr.detail,.lines tr.detail{padding:8px}
  table.stackable th,table.stackable td,.lines td,.check th,.check td{display:block;border:none;padding:6px 0;text-align:left!important}
  table.stackable td[data-label]:before,.lines td[data-label]:before,.check td[data-label]:before{content:attr(data-label);display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
  table.stackable th[data-label]:before{content:attr(data-label);display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:2px}
  .lines td:first-child{min-width:0;max-width:none;padding-right:36px}
  .lines .rm{position:absolute;top:8px;right:8px;width:auto;padding:0}
  .lines .sm{width:140px}
  .grid-table tr.now th,.grid-table tr.now td{background:none}
  table.stackable tr.now{border-color:var(--accent-line)}
  table.stackable tr.open{border-color:var(--line3)}
}

/* ── printing: ONLY the proforma pages, always white paper whatever the theme. The page's own layout comes from render/proforma.css. ── */
@media print{
  html,body{background:var(--paper)!important;color:var(--ink)!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important}
  body>*:not(#print-root){display:none!important}
  #print-root{display:block!important}
}