/* Sterling Spares Pricing Calculator — stylesheet.
 *
 * Loaded by index.html. Section order matters in places: the mobile overrides
 * near the end must come after the base rules they override, since they rely on
 * source order rather than higher specificity.
 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f4f2ee;--surface:#fff;--surface2:#f9f8f6;
  --border:#e2ddd6;--border2:#ccc7be;
  /* Boundary of an interactive control. WCAG 1.4.11 wants 3:1 against
     every surface it can sit on; --border and --border2 are decorative
     and manage 1.35:1 at best. Solved for the warm grey nearest the
     palette that clears 3:1 on --bg, --surface and --surface2. */
  --border-ctrl:#918b83;
  --text:#1a1916;--text2:#6b6760;--text3:#736e68;
  --accent:#1a1916;
  /* Focus ring: deliberately a mid grey rather than near-black. Verified >=3:1
     (WCAG 1.4.11) against every surface it can land on in BOTH themes —
     including the dark summary bar, where a darker grey would disappear —
     so one value serves light and dark and no theme override is needed. */
  --focus-ring:#8a857c;--accent-fg:#fff;
  /* Foreground counterpart to --accent. --accent is a fill (white text sits on
     it); used as a text or icon colour it turns near-black on near-black in the
     dark theme. Anything drawn ON a surface uses this instead. */
  --accent-ink:#1a1916;
  --green:#1a6b45;--green-bg:#e8f5ef;--green-border:#a8d9bc;
  --red:#8b2020;--red-bg:#faeaea;
  --blue:#1a4a8b;--blue-bg:#e8eef8;--blue-border:#b8cbec;
  --amber:#7a4e10;--amber-bg:#fdf3e3;--amber-border:#e8c87a;
  --radius:10px;--radius-sm:6px;
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.04);
  --shadow-card:0 2px 8px rgba(0,0,0,0.06),0 8px 32px rgba(0,0,0,0.05);
  --shadow-modal:0 8px 40px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.1);
  --font-body:'DM Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-heading:'Syne',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,'Liberation Mono',monospace;
}
/* ── DARK MODE ── */
html[data-theme="dark"]{
  --bg:#141412;--surface:#1e1d1b;--surface2:#252421;
  --border:#2e2c29;--border2:#3d3a36;--border-ctrl:#716d66;
  --text:#f0ede8;--text2:#9a9590;--text3:#8e8a84;
  --accent:#252421;--accent-fg:#f0ede8;
  --green:#3dd68c;--green-bg:#0c261a;--green-border:#1a5235;
  --red:#f08080;--red-bg:#2a1010;
  --blue:#7aabf0;--blue-bg:#0e1e38;--blue-border:#1e3a70;
  --amber:#e8b840;--amber-bg:#271e08;--amber-border:#6a5020;
  --shadow:0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.2);
  --shadow-card:0 2px 8px rgba(0,0,0,0.3),0 8px 32px rgba(0,0,0,0.2);
  --shadow-modal:0 8px 40px rgba(0,0,0,0.6),0 2px 8px rgba(0,0,0,0.4);
;--accent-ink:#f0ede8}
html[data-theme="dark"] .header{background:#111110}
/* Selected state in the dark theme.
   --accent is #252421 there, all but identical to the surfaces it sits on, so
   a selected pill read 1.09:1 against its neighbours and the only cue that it
   was chosen was the brightness of its label. WCAG 1.4.11 covers states, not
   just controls. Solved for the warm grey that clears 3:1 against --bg,
   --surface and --surface2 while keeping white label text at 4.5:1:
   3.69 / 3.37 / 3.11 on the three surfaces, 5.00 for the text. */
html[data-theme="dark"] .pill.on,
html[data-theme="dark"] .fc-tab.on{background:#736f68;border-color:#736f68;color:#fff}
html[data-theme="dark"] .confirm-btn.primary{background:var(--text);border-color:var(--text);color:var(--bg)}
html[data-theme="dark"] .settings-tab.on,
html[data-theme="dark"] .feat-chip.on,
html[data-theme="dark"] .gst-custom-wrap.on,
html[data-theme="dark"] .rnd-custom-wrap.on,
html[data-theme="dark"] .hist-fpill.on{background:#736f68;border-color:#736f68}
html[data-theme="dark"] .feat-chip.on .feat-name,
html[data-theme="dark"] .rnd-custom-wrap.on input,
html[data-theme="dark"] .gst-custom-wrap.on input{color:#fff}
html[data-theme="dark"] .hist-fpill.on{color:#fff}
html[data-theme="dark"] .summary{background:#252421;border:1px solid var(--border)}
/* 0.35 alpha over the dark card was 2.88:1. 0.62 gives 6.01:1 and keeps
   the label visually subordinate to the value beneath it. */
html[data-theme="dark"] .summary .sum-lbl{color:rgba(240,237,232,0.62)}
html[data-theme="dark"] .summary .sum-val{color:rgba(240,237,232,0.9)}
html[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,0.75)}
html[data-theme="dark"] .mtab.on{box-shadow:0 1px 3px rgba(0,0,0,0.4)}
html{font-size:16px;scroll-behavior:smooth;overflow-x:hidden;overscroll-behavior-y:none}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;overflow-x:hidden;transition:background .2s,color .2s}
#pull-reset{position:fixed;top:0;left:0;right:0;height:56px;z-index:9999;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface2);color:var(--text2);font-size:13px;font-weight:500;transform:translateY(-100%);pointer-events:none;transition:transform .15s ease,color .15s;border-bottom:1px solid var(--border)}
#pull-reset.pr-ready{color:#ef4444}

/* ── HEADER ── */
.header{background:var(--accent);color:var(--accent-fg);padding-left:max(clamp(1rem,4vw,2.5rem),env(safe-area-inset-left));padding-right:max(clamp(1rem,4vw,2.5rem),env(safe-area-inset-right));padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:10px;display:flex;align-items:center;justify-content:space-between;min-height:calc(56px + env(safe-area-inset-top,0px));position:fixed;top:0;left:0;right:0;z-index:200}
.page-offset{height:calc(56px + env(safe-area-inset-top,0px))} /* spacer so sticky header doesn't cover content */
/* h1 for the document outline; margin reset so it looks identical to the old div */
.header-brand{font-family:var(--font-heading);font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin:0}
.header-brand::before{content:'';width:8px;height:8px;border-radius:50%;background:#e8c840;display:inline-block}
.header-actions{display:flex;gap:6px;align-items:center}
.hbtn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;border:1px solid rgba(255,255,255,0.35);background:transparent;font-size:11px;font-weight:500;color:rgba(255,255,255,0.75);cursor:pointer;font-family:var(--font-body);transition:all .15s;white-space:nowrap}
.hbtn:hover{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.4)}
.hbtn-icon{width:30px;padding:0;justify-content:center;border-radius:50%;height:30px;flex-shrink:0}
.hdivider{width:1px;height:20px;background:rgba(255,255,255,0.15);margin:0 2px}

.page{max-width:1100px;margin:0 auto;padding:clamp(1.25rem,3vw,2.5rem) clamp(1rem,3vw,2rem)}

/* ── CONTROL BAR ── */
.control-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;box-shadow:var(--shadow)}
.ctrl-group{display:flex;align-items:center;gap:11px}
.ctrl-label{font-size:11px;font-weight:500;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
/* 3px here left the pills all but touching, so the row read as one blurred
   block rather than three separate choices. */
.pill-group{display:flex;flex-wrap:wrap;gap:7px}
.pill{padding:6px 14px;border-radius:20px;border:1px solid var(--border-ctrl);background:transparent;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--font-body);transition:all .15s;white-space:nowrap;min-height:28px}
.pill:hover{border-color:var(--border2);color:var(--text)}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.pill.danger-pill{border-color:var(--red);color:var(--red)}
.pill.danger-pill:hover{background:var(--red);color:#fff}
.divider{width:1px;height:24px;background:var(--border);flex-shrink:0}
.sep{flex:1;min-width:8px}
.btn-reset{display:flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;border:1px solid var(--border-ctrl);background:transparent;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--font-body);transition:all .15s}
.btn-reset:hover{background:var(--surface2);color:var(--text);border-color:var(--accent)}

/* ── MRP BAR ── */
.mrp-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin-bottom:1.25rem;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.mrp-main{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mrp-label{font-family:var(--font-heading);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);white-space:nowrap}
.big-input{display:flex;align-items:center;border:1.5px solid var(--border-ctrl);border-radius:var(--radius-sm);background:var(--surface2);transition:border .15s;overflow:hidden}
.big-input:focus-within{border-color:var(--accent);background:var(--surface)}
.big-input .sym{padding:0 12px;font-family:var(--font-heading);font-size:18px;font-weight:700;color:var(--text3);border-right:1px solid var(--border);height:44px;display:flex;align-items:center}
.big-input input{border:none;outline:none;background:transparent;padding:0 14px;height:44px;font-size:22px;font-family:var(--font-mono);font-weight:500;color:var(--text);width:180px}
.big-input-next{display:none;flex-shrink:0;width:34px;height:34px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-fg);cursor:pointer;margin-right:6px;align-items:center;justify-content:center;opacity:0.7;transition:opacity .15s}
.big-input-next:hover{opacity:1}
@media(max-width:800px){
.big-input-next{display:flex}}
.mrp-meta{display:flex;gap:20px;flex-wrap:wrap}
.mrp-stat{display:flex;flex-direction:column;gap:2px}
.mrp-stat-lbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);font-weight:500}
.mrp-stat-val{font-family:var(--font-mono);font-size:14px;font-weight:500;color:var(--text2)}

/* ── CARDS ── */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:1.25rem}
@media(max-width:800px){.cards{grid-template-columns:1fr}}
@media(min-width:801px) and (max-width:960px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-card);transition:border-color .2s;display:flex;flex-direction:column;gap:12px}
.card.computed{border-color:#1a4a8b;border-width:1.5px}
.card.over-mrp{border-color:var(--red);border-width:1.5px}
.price-alert{display:none;background:var(--red-bg);border:1px solid var(--red-border,#e8a8a8);border-radius:var(--radius-sm);padding:7px 10px;font-size:11px;color:var(--red);line-height:1.4;font-weight:500}
.price-alert.show{display:block}
.card-head{display:flex;align-items:center;justify-content:space-between}
.card-title{font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)}
.badge{font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:10px}
.b-input{background:var(--surface2);color:var(--text3);border:1px solid var(--border-ctrl)}
.b-calc{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border)}
.mode-tabs{display:flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface2)}
.mtab{flex:1;padding:6px 4px;font-size:10.5px;font-weight:500;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--text3);font-family:var(--font-body);transition:all .15s;line-height:1.3}
.mtab:hover{color:var(--text2)}
.mtab.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,0.07)}
.mtab+.mtab{border-left:1px solid var(--border)}
.sub-tabs{display:flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface2)}
.stab{flex:1;padding:4px 6px;font-size:10px;font-weight:500;text-align:center;cursor:pointer;border:none;background:transparent;color:var(--text3);font-family:var(--font-body);transition:all .15s;white-space:nowrap}
.stab:hover{color:var(--text2)}
.stab.on{background:var(--surface);color:var(--text);font-weight:600}
.stab+.stab{border-left:1px solid var(--border)}
.field{display:flex;align-items:center;border:1.5px solid var(--border-ctrl);border-radius:var(--radius-sm);background:var(--surface2);overflow:hidden;transition:border .15s}
.field:focus-within{border-color:var(--accent);background:var(--surface)}
.field .sym{padding:0 10px;font-size:12px;font-weight:500;color:var(--text3);border-right:1px solid var(--border);height:38px;display:flex;align-items:center;white-space:nowrap;background:var(--surface2);flex-shrink:0}
.field input{border:none;outline:none;background:transparent;padding:0 10px;height:38px;font-size:15px;font-family:var(--font-mono);font-weight:500;color:var(--text);width:100%;min-width:0}
.field-next{display:none;flex-shrink:0;width:30px;height:30px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-fg);cursor:pointer;margin-right:4px;align-items:center;justify-content:center;transition:opacity .15s;opacity:0.7}
.field-next:hover{opacity:1}
.field .field-suf{padding:0 10px;font-size:12px;font-weight:500;color:var(--text3);border-left:1px solid var(--border);height:38px;display:flex;align-items:center;white-space:nowrap;background:var(--surface2);flex-shrink:0}
/* The hint is not the data — at the input's own size it would not fit what is
   left of a narrow field. */
.field input::placeholder{font-family:var(--font-body);font-size:12.5px}
@media(max-width:800px){.field-next{display:flex}}
.rows{display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border);gap:8px}
.row:last-child{border-bottom:none;padding-bottom:0}
.row-lbl{font-size:11.5px;color:var(--text2);line-height:1.3;max-width:58%}
.row-val{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--text);white-space:nowrap;text-align:right}
.row-val.dim{color:var(--text3)}
.row-val.pos{color:var(--green)}
.row-val.neg{color:var(--red)}
.row-val.big{font-size:16px}
.row-val.warn{color:var(--red)}
.row-val.warn::after{content:' ▼';font-size:8px}
.footnote{font-size:10.5px;color:var(--text3);font-style:italic;line-height:1.5}

/* ── PANEL (incentives / history) ── */
.panel{background:var(--surface);border-radius:var(--radius);margin-bottom:1.25rem;box-shadow:var(--shadow);overflow:hidden}
.panel-amber{border:1px solid var(--amber-border)}
.panel-gray{border:1px solid var(--border2)}
.panel-green{border:1px solid var(--green-border)}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;cursor:pointer;user-select:none;gap:12px}
.panel-amber .panel-header{background:var(--amber-bg);border-bottom:1px solid var(--amber-border)}
.panel-gray .panel-header{background:var(--surface2);border-bottom:1px solid var(--border)}
.panel-green .panel-header{background:var(--green-bg);border-bottom:1px solid var(--green-border)}
.panel-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-title{font-family:var(--font-heading);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.panel-amber .panel-title{color:var(--amber)}
.panel-gray .panel-title{color:var(--text2)}
.panel-tag{font-size:10px;font-weight:500;border-radius:10px;padding:2px 8px;white-space:nowrap}
.panel-amber .panel-tag{color:var(--amber);background:rgba(122,78,16,0.1);border:1px solid var(--amber-border)}
.panel-gray .panel-tag{color:var(--text2);background:var(--surface2);border:1px solid var(--border)}
.panel-chevron{transition:transform .2s;flex-shrink:0}
.panel-amber .panel-chevron{color:var(--amber)}
.panel-gray .panel-chevron{color:var(--text2)}
.panel-green .panel-title{color:var(--green)}
.panel-green .panel-tag{color:var(--green);background:rgba(26,107,69,0.08);border:1px solid var(--green-border)}
.panel-green .panel-chevron{color:var(--green)}
.inc-row.sp-active{border-color:var(--green-border)}
.panel-chevron.open{transform:rotate(180deg)}
.panel-body{display:none;padding:14px 18px}

/* inc rows */
.inc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin-bottom:12px}
.inc-row{display:flex;flex-direction:column;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:border-color .15s}
.inc-row.active{border-color:var(--amber-border)}
.inc-row-main{display:flex;align-items:center;gap:10px;padding:8px 12px}
.inc-row-sub{display:none;padding:6px 12px 8px;border-top:1px solid var(--border);background:var(--surface)}
.inc-row.active .inc-row-sub,.inc-row.sp-active .inc-row-sub{display:block}
.inc-row.active .inc-row-main{background:var(--amber-bg)}
.toggle{position:relative;display:inline-block;width:32px;height:18px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-track{position:absolute;inset:0;border-radius:18px;background:var(--border2);cursor:pointer;transition:background .2s}
.toggle input:checked+.toggle-track{background:var(--amber)}
#autosave-toggle:checked+.toggle-track,
#autosave-toggle-settings:checked+.toggle-track,
#darkmode-toggle:checked+.toggle-track{background:var(--green)}
.toggle-thumb{position:absolute;height:12px;width:12px;border-radius:50%;background:white;top:3px;left:3px;transition:transform .2s;pointer-events:none}
.toggle input:checked~.toggle-thumb{transform:translateX(14px)}
.inc-name{flex:1;font-size:12px;font-weight:500;color:var(--text2);line-height:1.2}
.inc-row.active .inc-name{color:var(--amber)}
.inc-pct-wrap{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.inc-row.active .inc-pct-wrap{border-color:var(--amber-border)}
.inc-pct-wrap input{border:none;outline:none;background:transparent;padding:4px 6px;width:52px;font-size:13px;font-family:var(--font-mono);font-weight:500;color:var(--text);text-align:right}
.inc-pct-sym{padding:4px 6px 4px 2px;font-size:12px;color:var(--text3);font-weight:500}
.inc-footer{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:10px;border-top:1px solid var(--border)}
.inc-total-item{display:flex;flex-direction:column;gap:1px}
.inc-total-lbl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);font-weight:500}
.inc-total-val{font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--amber)}
.inc-note{font-size:10.5px;color:var(--text3);font-style:italic;line-height:1.4;margin-left:auto;text-align:right}
/* Edit mode */
.panel-edit-btn{font-size:11px;padding:6px 12px;min-height:24px;border-radius:12px;border:1px solid var(--border-ctrl);background:transparent;color:var(--text2);cursor:pointer;margin-right:8px;font-family:var(--font-body);flex-shrink:0;line-height:1.4}
.panel-edit-btn:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.inc-del-btn{display:none;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;border-radius:50%;background:var(--red);border:none;color:#fff;font-size:18px;line-height:1;cursor:pointer;margin-right:4px;padding:0;flex-shrink:0;font-weight:300}
.inc-grid.edit-mode .inc-del-btn{display:flex}
.inc-label-edit{font-size:12px;font-weight:500;font-family:var(--font-body);border:none;border-bottom:1px solid var(--accent);background:transparent;color:var(--text2);padding:0 0 1px;width:0;min-width:0;flex:1;outline:none}
.inc-add-btn{width:100%;margin-top:6px;padding:8px;border:1.5px dashed var(--border-ctrl);border-radius:8px;background:transparent;color:var(--text2);font-size:12px;cursor:pointer;font-family:var(--font-body);display:none}
.inc-add-btn:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
/* Sits in the same pill row, so it has to match .pill's box or the row looks
   ragged. min-height keeps the two aligned as the pill padding changes. */
.gst-custom-wrap{display:inline-flex;align-items:center;gap:1px;border:1.5px solid var(--border-ctrl);border-radius:20px;padding:1px 7px 1px 3px;min-height:28px;background:var(--surface);transition:border-color .15s}
.gst-custom-wrap:focus-within{border-color:var(--accent)}
.gst-custom-wrap input{border:none;background:transparent;width:38px;font-size:12px;font-family:var(--font-body);text-align:center;outline:none;color:var(--text);padding:2px;-moz-appearance:textfield}
.gst-custom-wrap input::-webkit-outer-spin-button,.gst-custom-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gst-custom-wrap span{font-size:11px;color:var(--text3)}
.gst-custom-wrap.on{background:var(--accent);border-color:var(--accent)}
.gst-custom-wrap.on input{color:var(--accent-fg);font-weight:600}
.gst-custom-wrap.on span{color:rgba(255,255,255,0.72)}
/* Custom rounding step — same widget as the custom GST rate, prefix instead of suffix */
.rnd-custom-wrap{display:inline-flex;align-items:center;gap:1px;border:1.5px solid var(--border-ctrl);border-radius:20px;padding:1px 2px 1px 8px;background:var(--surface);transition:background .15s,border-color .15s}
.rnd-custom-wrap:focus-within{border-color:var(--accent)}
.rnd-custom-wrap input{border:none;background:transparent;width:44px;font-size:12px;font-family:var(--font-body);text-align:center;outline:none;color:var(--text);padding:2px;-moz-appearance:textfield}
.rnd-custom-wrap input::-webkit-outer-spin-button,.rnd-custom-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rnd-custom-wrap span{font-size:11px;color:var(--text3)}
/* Active state: a custom step is the live rounding mode. Matches .pill.on, so
   exactly one control in the row reads as selected at any time. The value shown
   in the field is the non-colour cue (WCAG 1.4.1). */
.rnd-custom-wrap.on{background:var(--accent);border-color:var(--accent)}
.rnd-custom-wrap.on input{color:var(--accent-fg);font-weight:600}
.rnd-custom-wrap.on span{color:rgba(255,255,255,0.72)}

/* ── PRESETS + SOLVER ──
   Both used to live inside the incentives panel, which is collapsed by default,
   so neither was reachable without expanding it first. Presets scope the whole
   session (like the GST rate) so they sit in the control bar; the solver targets
   GP%, so it sits with the figures it targets. */
.preset-bar{display:flex;gap:4px;align-items:center}
.preset-select{min-width:104px;max-width:170px;padding:5px 8px;border:1px solid var(--border-ctrl);border-radius:20px;background:transparent;font-size:11.5px;font-family:var(--font-body);color:var(--text2);cursor:pointer}
.fx-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fx-select{min-width:74px;max-width:96px}
.fx-scope{min-width:96px;max-width:124px}
.fx-in{font-size:11px;color:var(--text3)}
.fx-note{font-size:10.5px;color:var(--text3);white-space:nowrap;letter-spacing:.01em}
.fx-note.bad{color:var(--amber)}
.fx-manual-wrap{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text2)}
.fx-manual-wrap input{width:88px;padding:5px 8px;border:1px solid var(--border-ctrl);border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);font-size:12px;font-family:var(--font-mono);text-align:right}
.fx-manual-wrap input:focus{outline:none;border-color:var(--text2)}
.preset-select:hover{border-color:var(--border2);color:var(--text)}
.preset-select:focus{border-color:var(--accent);outline:none}
.preset-btn{padding:5px 11px;border-radius:20px;border:1px solid var(--border-ctrl);background:transparent;font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--font-body);white-space:nowrap}
.preset-btn:hover:not(:disabled){border-color:var(--accent-ink);color:var(--accent-ink)}
.preset-btn:disabled{opacity:.4;cursor:default}
.preset-btn.danger:hover:not(:disabled){border-color:var(--red);color:var(--red)}

/* Inside the summary card, so it inherits the dark treatment */
/* A grid item now, not a row of its own. Margin % used to sit alone on the
   second line with five empty columns beside it while the solver took a
   whole extra row under a divider; it fills that gap instead. */
.solver{grid-column:span 3;display:flex;align-items:center;gap:10px;flex-wrap:wrap;align-self:start}
.solver-lbl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,0.55);font-weight:600;white-space:nowrap}
.solver-input{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,0.42);border-radius:20px;padding:1px 9px;background:rgba(255,255,255,0.08)}
.solver-input:focus-within{border-color:#fff;background:rgba(255,255,255,0.14)}
.solver-input input{border:none;background:transparent;width:54px;text-align:right;font-family:var(--font-mono);font-size:13px;font-weight:600;color:#fff;outline:none;padding:3px 0;-moz-appearance:textfield}
.solver-input input::-webkit-outer-spin-button,.solver-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.solver-input input::placeholder{color:rgba(255,255,255,0.55)}
.solver-input::after{content:'%';font-size:11px;color:rgba(255,255,255,0.55);margin-left:3px}
.solver-out{flex:1;min-width:180px;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,0.75)}
.solver-out.ok{color:#8fe3b0}
.solver-out.bad{color:#ffb4ab}
@media(max-width:800px){
  .solver{gap:8px}
  .solver-out{min-width:100%;order:3}
  .preset-select{min-width:88px;font-size:12px}
}

/* ── SUMMARY ── */
.summary-wrap{margin-bottom:1.25rem}
.summary{background:var(--accent);color:#fff;border-radius:var(--radius);padding:18px 20px;box-shadow:0 4px 20px rgba(26,25,22,0.2)}
.summary-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.summary-title{font-family:var(--font-heading);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,0.62)}
.btn-whatif{display:flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;border:1px solid rgba(255,255,255,0.42);background:rgba(255,255,255,0.08);font-size:11px;font-weight:500;color:rgba(255,255,255,0.85);cursor:pointer;font-family:var(--font-body);transition:all .15s;white-space:nowrap}
.btn-whatif:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.4);color:#fff}
.summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:16px 24px}
/* 0.62 alpha over the accent card = 7.38:1. At 0.4 this was 3.81:1, below AA. */
.sum-lbl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,0.62);font-weight:500;margin-bottom:3px}
.sum-val{font-family:var(--font-mono);font-size:17px;font-weight:500;color:rgba(255,255,255,0.95)}
.sum-val.pos{color:#6ee9a8}
.sum-val.neg{color:#f87a7a}
.sum-val.dim{color:rgba(255,255,255,0.3)}
.sum-val.amber{color:#fcd97a}
.sum-val.warn{color:#f87a7a}
.sum-val.warn::after{content:' ▼';font-size:10px}

/* ── HISTORY ── */
.hist-table-wrap{overflow:hidden;margin-top:2px}
.hist-empty{text-align:center;padding:28px;color:var(--text3);font-size:12px;font-style:italic}
/* History card layout (swipe-to-delete) */
.hist-entry{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hist-entry:last-child{border-bottom:none}
/* Card face */
.hist-inner{position:relative;background:var(--surface1);padding:8px 12px}
/* Meta row: time — gst badge — compare button — delete button */
.hist-meta{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.hist-time{font-size:11px;color:var(--text2);cursor:help;border-bottom:1px dashed var(--border2);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-gst{font-size:10px;color:var(--text3);background:var(--surface2);padding:1px 6px;border-radius:8px;white-space:nowrap;flex-shrink:0}
/* 6-column values grid — collapses to 3-col on very small screens */
.hist-vals{display:grid;grid-template-columns:repeat(6,1fr);gap:3px 4px}
@media(max-width:400px){.hist-vals{grid-template-columns:repeat(3,1fr);gap:5px 8px}}
.hist-kv{display:flex;flex-direction:column;gap:1px;min-width:0}
.hist-k{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:600;white-space:nowrap}
.hist-v{font-size:11px;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-v.pos{color:var(--green)}
.hist-v.neg{color:var(--red)}
.hist-v.warn{color:var(--red)}
.hist-v.warn::after{content:' ▼';font-size:8px}
.hist-v.amber{color:var(--amber)}
/* Inline delete × button */
.hist-del-btn{width:24px;height:24px;padding:0;border-radius:50%;border:1px solid var(--border-ctrl);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text3);flex-shrink:0;transition:background .15s,border-color .15s,color .15s}
.hist-del-btn:hover{background:#fef2f2;border-color:#ef4444;color:#ef4444}
html[data-theme="dark"] .hist-del-btn:hover{background:rgba(239,68,68,0.15);border-color:#ef4444;color:#ef4444}
.hist-del-btn:active{animation:pressDown .15s ease}
/* Incentive badge row */
.hist-inc{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:10.5px;color:var(--amber)}
.hist-inc-k{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:600}
/* Bottom action bar */
.hist-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border);margin-top:2px}
.hist-btn{padding:5px 13px;border-radius:20px;border:1px solid var(--border-ctrl);background:transparent;font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--font-body);transition:all .15s}
.hist-btn:hover{background:var(--surface2);color:var(--text)}
.hist-btn.save{border-color:var(--blue);color:var(--blue)}
.hist-btn.save:hover{background:var(--blue-bg)}
.hist-autosave{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:11px;font-weight:500;color:var(--text2);margin-right:auto}
.hist-btn.export{border-color:var(--green);color:var(--green)}
.hist-btn.export:hover{background:var(--green-bg)}

/* ── COMPARISON MODAL ── */
.cmp-modal{max-width:860px}
.cmp-meta{font-size:11.5px;color:var(--text2);margin-bottom:14px;display:flex;flex-wrap:wrap;gap:6px 20px}
.cmp-meta span{white-space:nowrap}
.cmp-meta strong{color:var(--text);font-weight:500}
.cmp-grid{display:grid;grid-template-columns:minmax(140px,1.4fr) 1fr 1fr 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
@media(max-width:560px){.cmp-grid{grid-template-columns:1fr 1fr 1fr 1fr;font-size:10.5px}}
.cmp-hd{background:var(--surface2);padding:8px 10px;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3);border-bottom:2px solid var(--border);border-right:1px solid var(--border)}
.cmp-hd:last-child{border-right:none}
.cmp-hd.cur{color:var(--blue);border-bottom-color:var(--blue)}
.cmp-hd.sel{color:var(--amber);border-bottom-color:var(--amber)}
.cmp-cell{padding:7px 10px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;display:flex;align-items:center}
.cmp-cell:last-child{border-right:none}
.cmp-cell.lbl{font-family:var(--font-body);font-size:11.5px;color:var(--text2);font-weight:400;background:var(--surface2)}
.cmp-row:last-child .cmp-cell{border-bottom:none}
.cmp-pos{color:var(--green)}
/* Direction glyphs so a rise or fall is not signalled by colour alone. */
.dv.up::after{content:' \2191';font-size:.85em}
.dv.dn::after{content:' \2193';font-size:.85em}
.cmp-neg{color:var(--red)}
.cmp-warn{color:var(--red)}
.cmp-warn::after{content:' ▼';font-size:8px}
.cmp-delta{font-size:10.5px;display:flex;flex-direction:column;gap:1px}
.cmp-delta .dv{font-family:var(--font-mono);font-size:11px;font-weight:500;white-space:nowrap}
.cmp-delta .dv.up{color:var(--green)}
.cmp-delta .dv.dn{color:var(--red)}
.cmp-delta .dv.nt{color:var(--text3)}
.cmp-hist-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:12px;border:1px solid var(--blue);background:var(--blue-bg);font-size:10px;font-weight:500;color:var(--blue);cursor:pointer;font-family:var(--font-body);transition:all .15s;white-space:nowrap;flex-shrink:0}
.cmp-hist-btn:hover{background:var(--blue);color:#fff}

/* ── MODAL BASE ── */
/* z-index must beat .bottom-nav (500), or the nav renders over the dialog on
   mobile and can obstruct its buttons. */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,10,8,0.55);z-index:600;align-items:flex-start;justify-content:center;padding:clamp(1rem,3vw,2rem);overflow-y:auto;backdrop-filter:blur(2px)}
/* The naming and confirmation dialogs are always secondary — raised from the
   preset manager, from Settings, from a history row. At the shared z-index
   they were ordered by position in the markup, so the prompt raised from
   the preset manager painted behind it. */
#overlay-prompt,#overlay-confirm{z-index:640}

.modal-overlay.open{display:flex}
.modal{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-modal);width:100%;max-width:720px;margin:auto;animation:modalIn var(--dur-slow) var(--ease-spring)}
@keyframes modalIn{0%{opacity:0;transform:translateY(-14px) scale(.97)}60%{opacity:1}100%{opacity:1;transform:none}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-title{font-family:var(--font-heading);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.modal-close{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-ctrl);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text3);transition:all .15s;font-size:16px;font-family:sans-serif;line-height:1}
.modal-close:hover{background:var(--surface2);color:var(--text);border-color:var(--border2)}
.modal-body{padding:20px}
.modal-section{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.modal-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.modal-section-title{font-family:var(--font-heading);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:12px}

/* ── SETTINGS MODAL ── */
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border)}
.settings-row:last-child{border-bottom:none}
.settings-lbl{display:flex;flex-direction:column;gap:2px}
.settings-lbl span{font-size:13px;font-weight:500;color:var(--text)}
.settings-lbl small{font-size:11px;color:var(--text3)}
.settings-control{display:flex;align-items:center;gap:8px;flex-shrink:0}
.floor-input-wrap{display:flex;align-items:center;border:1.5px solid var(--border-ctrl);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface2)}
.floor-input-wrap:focus-within{border-color:var(--accent)}
.floor-input-wrap input{border:none;outline:none;background:transparent;padding:6px 8px;width:68px;font-size:14px;font-family:var(--font-mono);font-weight:500;color:var(--text);text-align:right}
.floor-input-wrap span{padding:6px 9px 6px 2px;font-size:13px;color:var(--text3)}

/* ── WHAT-IF MODAL ── */
.wi-modal{max-width:900px}
.wi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:600px){.wi-grid{grid-template-columns:1fr}}
.wi-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:10px}
.wi-card-head{display:flex;align-items:center;justify-content:space-between}
.wi-card-title{font-family:var(--font-heading);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.wi-rows{display:flex;flex-direction:column}
.wi-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border);gap:8px}
.wi-row:last-child{border-bottom:none;padding-bottom:0}
.wi-lbl{font-size:11px;color:var(--text2);line-height:1.3}
.wi-val{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text);white-space:nowrap}
.wi-val.pos{color:var(--green)}
.wi-val.neg{color:var(--red)}
.wi-val.warn{color:var(--red)}
.wi-val.warn::after{content:' ▼';font-size:7px}
.wi-val.dim{color:var(--text3)}
.wi-best{border-color:var(--blue);border-width:1.5px;background:var(--blue-bg)}
.wi-best .wi-card-title{color:var(--blue)}
.wi-cp-info{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:14px;font-size:11.5px;color:var(--text2);display:flex;flex-wrap:wrap;gap:12px 24px}
.wi-cp-info strong{font-family:var(--font-mono);font-weight:500;color:var(--text)}
.wi-note{font-size:10.5px;color:var(--text3);font-style:italic;margin-top:12px}

/* ── HEADER ACTIONS DROPDOWN (mobile) ── */
.hactions-desktop{display:flex;gap:6px;align-items:center}
.hactions-mobile{display:none;position:relative}
@media(max-width:800px){
  .hactions-desktop{display:none}
  .hactions-mobile{display:block}
}
.hmenu-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.25);background:transparent;cursor:pointer;color:rgba(255,255,255,0.8);transition:all .15s}
.hmenu-btn:hover{background:rgba(255,255,255,0.12);color:#fff}
/* ── KEYBOARD SHORTCUTS MODAL ── */
.kb-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
@media(max-width:500px){.kb-grid{grid-template-columns:1fr}}
.kb-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border)}
.kb-row:last-child{border-bottom:none}
.kb-desc{font-size:12.5px;color:var(--text2)}
.kb-keys{display:flex;gap:4px;flex-shrink:0}
.kbd{display:inline-block;background:var(--surface2);border:1px solid var(--border2);border-radius:4px;padding:1px 6px;font-family:var(--font-mono);font-size:11px;color:var(--text);white-space:nowrap;box-shadow:0 1px 0 var(--border2)}
.kb-section-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin:12px 0 4px;grid-column:1/-1}

/* ── ONBOARDING ── */
.ob-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,0.65);display:flex;align-items:center;justify-content:center;padding:max(20px,env(safe-area-inset-top,20px)) 20px max(20px,env(safe-area-inset-bottom,20px));opacity:0;pointer-events:none;transition:opacity .3s}
.ob-overlay.show{opacity:1;pointer-events:all}
.ob-card{background:var(--surface);border-radius:20px;width:100%;max-width:420px;padding:32px 28px 24px;box-shadow:0 20px 60px rgba(0,0,0,0.3);display:flex;flex-direction:column;gap:16px;position:relative}
.ob-step-dots{display:flex;gap:6px;justify-content:center}
/* The visible dot stays 6px; the button around it is 24px so it meets the
   minimum target size (WCAG 2.5.8) without changing the design. */
.ob-dot{appearance:none;-webkit-appearance:none;padding:0;width:24px;height:24px;border:none;background:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ob-dot::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--border2);transition:all .25s}
.ob-dot.cur::before{background:var(--accent);width:18px;border-radius:3px}
.ob-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;margin:0 auto}
.ob-title{font-family:var(--font-heading);font-size:20px;font-weight:700;text-align:center;line-height:1.2;color:var(--text)}
.ob-body{font-size:13.5px;color:var(--text2);line-height:1.65;text-align:center}
.ob-actions{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:4px}
.ob-btn-skip{background:none;border:none;color:var(--text3);font-size:13px;cursor:pointer;font-family:var(--font-body);padding:8px 4px}
.ob-btn-next{flex:1;padding:12px;border-radius:50px;border:none;background:var(--accent);color:var(--accent-fg);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:opacity .15s}
.ob-btn-next:hover{opacity:.88}
.ob-btn-action{display:block;width:100%;margin-top:14px;padding:10px 16px;border-radius:20px;border:1px solid var(--border-ctrl);background:transparent;color:var(--text2);font-size:12.5px;font-weight:600;font-family:var(--font-body);cursor:pointer;min-height:44px;transition:all .15s}
.ob-btn-action:hover{background:var(--surface2);color:var(--text)}
.ob-tip{font-size:11.5px;color:var(--text2);text-align:center;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;line-height:1.5}

.hmenu-dropdown{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-modal);min-width:160px;overflow:hidden;z-index:400}
/* The Tools menu reuses the hamburger's dropdown, but hangs off a button that
   sits mid-row rather than at the right edge of the header. */
.tools-wrap{position:relative;display:inline-flex}
.tools-menu{left:0;right:auto;min-width:196px;text-align:left}
.hbtn-caret{margin-left:1px;opacity:.75}
.hmenu-dropdown.open{display:block;animation:modalIn .15s ease}
.hmenu-item{display:flex;align-items:center;gap:10px;padding:11px 16px;font-size:13px;font-weight:500;color:var(--text);cursor:pointer;font-family:var(--font-body);border:none;background:none;width:100%;text-align:left;transition:background .12s}
.hmenu-item:hover{background:var(--surface2)}
.hmenu-item svg{color:var(--text2);flex-shrink:0}
.hmenu-sep{height:1px;background:var(--border);margin:2px 0}
.mode-pill{padding:4px 11px;border-radius:18px;border:none;background:transparent;font-size:11px;font-weight:500;color:rgba(255,255,255,0.55);cursor:pointer;font-family:var(--font-body);transition:all .15s;white-space:nowrap}
.mode-pill-on{background:rgba(255,255,255,0.18);color:#fff}

/* ── FLASHCARD MODE ── */
#quick-mode{display:none;min-height:calc(100vh - 56px);padding:clamp(1rem,3vw,1.5rem) clamp(1rem,3vw,2rem) clamp(5rem,12vw,7rem);max-width:520px;margin:0 auto;padding-top:calc(clamp(1rem,3vw,1.5rem) + env(safe-area-inset-top,0px) + 56px)}
.fc-progress{display:flex;gap:6px;margin-bottom:1.5rem;justify-content:center}
.fc-dot{height:4px;flex:1;max-width:44px;border-radius:2px;background:rgba(255,255,255,0.2);transition:background .3s}
.fc-dot.done{background:rgba(255,255,255,0.9)}
.fc-dot.cur{background:var(--accent);opacity:1}
html[data-theme="dark"] .fc-dot{background:var(--border)}
html[data-theme="dark"] .fc-dot.cur{background:var(--text)}

.fc-stack{position:relative;height:460px;touch-action:pan-y}
@media(max-height:700px){.fc-stack{height:400px}}

.fc-card{
  position:absolute;inset:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px 24px 24px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 8px 40px rgba(0,0,0,0.1),0 2px 8px rgba(0,0,0,0.06);
  transition:transform .35s cubic-bezier(.25,.46,.45,.94),opacity .35s ease;
  will-change:transform,opacity;
  cursor:default;
  user-select:none;
}
.fc-card.behind-1{transform:scale(0.95) translateY(18px);z-index:1;pointer-events:none}
.fc-card.behind-2{transform:scale(0.90) translateY(36px);z-index:0;pointer-events:none}
.fc-card.active{z-index:10;transform:none;opacity:1}
.fc-card.entering{z-index:10} /* hold z-index during slide-in RAF */
.fc-card.exit-left{transform:translateX(-110%) rotate(-12deg);opacity:0;z-index:11;transition:transform .35s cubic-bezier(.55,.06,.68,.19),opacity .3s}
.fc-card.exit-right{transform:translateX(110%) rotate(12deg);opacity:0;z-index:11;transition:transform .35s cubic-bezier(.55,.06,.68,.19),opacity .3s}
.fc-card.dragging{transition:none!important;z-index:12}
/* Behind cards: hide ALL content completely */
.fc-card.behind-1 > *,
.fc-card.behind-2 > *{visibility:hidden;pointer-events:none}

.fc-card-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.fc-card-icon.mrp{background:#1a191614;color:var(--text2)}
.fc-card-icon.cp{background:var(--blue-bg);color:var(--blue)}
.fc-card-icon.sp{background:var(--green-bg);color:var(--green)}
.fc-card-icon.result{background:var(--amber-bg);color:var(--amber)}

.fc-card-label{font-family:var(--font-heading);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
.fc-card-title{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--text);line-height:1.1}
.fc-card-sub{font-size:12.5px;color:var(--text2);line-height:1.5}

.fc-input-wrap{display:flex;align-items:center;background:var(--surface2);border:2px solid var(--border-ctrl);border-radius:12px;overflow:hidden;transition:border .15s;margin-top:4px}
.fc-input-wrap:focus-within{border-color:var(--accent)}
.fc-input-sym{padding:0 14px;font-family:var(--font-heading);font-size:20px;font-weight:700;color:var(--text3);border-right:1px solid var(--border);height:56px;display:flex;align-items:center}
.fc-input{border:none;outline:none;background:transparent;padding:0 16px;height:56px;font-size:26px;font-family:var(--font-mono);font-weight:500;color:var(--text);width:100%;min-width:0;user-select:text;-webkit-user-select:text}
/* The hint is not the data. At the input's own 26px a placeholder like
   "e.g. 34" is wider than the box it has to fit on a phone. */
.fc-input::placeholder{font-family:var(--font-body);font-size:17px;font-weight:400}
/* Set in fcMkField when the prefix is a word ("Discount") rather than a ₹ or
   % glyph — at 20px heading weight it would crowd out the number. */
.fc-input-sym.word{font-family:var(--font-body);font-size:13px;font-weight:500;padding:0 12px}
.fc-input-suf{padding:0 12px;font-size:13px;font-weight:500;color:var(--text3);border-left:1px solid var(--border);height:56px;display:flex;align-items:center;text-align:right;line-height:1.2;max-width:88px;flex-shrink:0;font-family:var(--font-body)}

.fc-mode-tabs{display:flex;gap:6px;flex-wrap:wrap}
.fc-tab{padding:6px 12px;border-radius:20px;border:1px solid var(--border-ctrl);background:transparent;font-size:11.5px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--font-body);transition:all .15s}
.fc-tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}

.fc-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.fc-result-item{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.fc-result-item.wide{grid-column:1/-1}
.fc-result-item.profit-pos{background:var(--green-bg);border-color:var(--green-border)}
.fc-result-item.profit-neg{background:var(--red-bg);border-color:#e8a8a8}
.fc-result-lbl{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.fc-result-val{font-family:var(--font-mono);font-size:16px;font-weight:500;color:var(--text)}
.fc-result-val.pos{color:var(--green)}
.fc-result-val.neg{color:var(--red)}
.fc-result-val.warn{color:var(--red)}
.fc-result-val.amber{color:var(--amber)}
.fc-result-val.big{font-size:22px}
.fc-over-alert{font-size:11px;color:var(--red);background:var(--red-bg);border:1px solid #e8a8a8;border-radius:8px;padding:7px 10px;line-height:1.4}

.fc-actions{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px}
.fc-btn{display:flex;align-items:center;gap:7px;padding:10px 22px;border-radius:50px;border:none;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:all .15s}
.fc-btn-next{background:var(--accent);color:var(--accent-fg);box-shadow:0 4px 14px rgba(0,0,0,0.18)}
.fc-btn-next:hover{opacity:.9}
.fc-btn-back{background:var(--surface2);color:var(--text2);border:1px solid var(--border-ctrl)}
.fc-btn-back:hover{color:var(--text);border-color:var(--border2)}
.fc-btn-full{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border)}
.fc-btn-full:hover{background:var(--blue);color:#fff}

.fc-hint-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--text3);background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px 9px}

/* ── WIZARD MODE ── */
#wizard-mode{display:none;padding:clamp(1rem,3vw,1.5rem) clamp(1rem,3vw,2rem) calc(80px + env(safe-area-inset-bottom,0px) + 1rem);max-width:640px;margin:0 auto}
.wz-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;box-shadow:var(--shadow)}
.wz-section-title{font-family:var(--font-heading);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.wz-section-title::after{content:'';flex:1;height:1px;background:var(--border)}
.wz-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.wz-row:last-child{margin-bottom:0}
.wz-lbl{font-size:12.5px;color:var(--text2);min-width:110px;flex-shrink:0}
.wz-field{display:flex;align-items:center;background:var(--surface2);border:1.5px solid var(--border-ctrl);border-radius:8px;overflow:hidden;flex:1;transition:border .15s}
.wz-field:focus-within{border-color:var(--accent)}
.wz-sym{padding:0 10px;font-size:13px;font-weight:600;color:var(--text3);border-right:1px solid var(--border);height:36px;display:flex;align-items:center;white-space:nowrap;background:var(--surface)}
.wz-suf{padding:0 10px;font-size:12px;font-weight:500;color:var(--text3);border-left:1px solid var(--border);height:36px;display:flex;align-items:center;text-align:right;line-height:1.2;max-width:86px;flex-shrink:0;background:var(--surface)}
.wz-input{border:none;outline:none;background:transparent;padding:0 10px;height:36px;font-size:15px;font-family:var(--font-mono);font-weight:500;color:var(--text);width:100%;min-width:0;user-select:text;-webkit-user-select:text}
.wz-inc-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border)}
.wz-inc-row:last-child{border-bottom:none}
.wz-inc-lbl{font-size:12px;color:var(--text2);flex:1}
.wz-inc-field{display:flex;align-items:center;background:var(--surface2);border:1px solid var(--border-ctrl);border-radius:6px;overflow:hidden;width:100px;flex-shrink:0}
.wz-inc-input{border:none;outline:none;background:transparent;padding:0 8px;height:30px;font-size:13px;font-family:var(--font-mono);color:var(--text);width:100%;min-width:0}
.wz-inc-sym{padding:0 7px;font-size:11.5px;color:var(--text3);background:var(--surface);border-left:1px solid var(--border);height:30px;display:flex;align-items:center}
.wz-results{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.wz-results-title{font-family:var(--font-heading);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px 0;color:var(--text3)}
.wz-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border-radius:0 0 var(--radius) var(--radius);overflow:hidden;margin-top:10px}
.wz-res-item{background:var(--surface);padding:12px 16px;display:flex;flex-direction:column;gap:3px}
.wz-res-item.wide{grid-column:1/-1;background:var(--surface2)}
.wz-res-lbl{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
.wz-res-val{font-family:var(--font-mono);font-size:17px;font-weight:500;color:var(--text)}
.wz-res-val.pos{color:var(--green)}
.wz-res-val.neg{color:var(--red)}
.wz-res-val.warn{color:var(--red)}
.wz-res-val.amber{color:var(--amber)}
.wz-res-val.big{font-size:22px}
.wz-alert{background:var(--red-bg);border:1px solid #e8a8a8;border-radius:8px;padding:8px 12px;font-size:11.5px;color:var(--red);margin:10px 18px;line-height:1.4}
.wz-toggle-row{display:flex;align-items:center;gap:8px;padding:6px 0}
.wz-toggle-lbl{font-size:12px;color:var(--text2);flex:1}
@media(max-width:800px){
  .page{padding-bottom:80px} /* space for bottom nav */
  .big-input input{width:140px}
}

/* ── ACCORDION (card rows) ── */
.acc-toggle{display:block;width:100%;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-body)}
.acc-bar{display:flex;align-items:center;justify-content:space-between;padding:6px 0 2px;border-top:1px solid var(--border);margin-top:4px}
.acc-lbl{font-size:11px;color:var(--text3);font-weight:500;letter-spacing:.04em}
.acc-chevron{transition:transform .2s;color:var(--text3);flex-shrink:0}
.acc-chevron.open{transform:rotate(180deg)}
.rows-be{margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.rows-primary{margin-top:10px}
.rows-primary .row-val{font-size:14px;font-weight:600;color:var(--text)}
.acc-body{overflow:hidden;max-height:0;transition:max-height .25s ease}
.acc-body.open{max-height:400px}
@media(max-width:800px){
  .acc-toggle{display:block}
  .acc-body{max-height:0}
  .acc-body.open{max-height:400px}
}
/* Settings accordions always collapse regardless of viewport */
.acc-body-settings{max-height:0}
.acc-body-settings.open{max-height:600px}

/* ── BOTTOM NAV ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:500;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -2px 12px rgba(0,0,0,0.08);padding:6px 0 env(safe-area-inset-bottom,6px)}
@media(max-width:800px){.bottom-nav{display:flex}}
.bnav-items{display:flex;width:100%;justify-content:space-around;padding-left:env(safe-area-inset-left,8px);padding-right:env(safe-area-inset-right,8px)}
.bnav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 8px;border:none;background:none;cursor:pointer;font-family:var(--font-body);color:var(--text3);font-size:9.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;min-width:0;flex:1;transition:color .15s}
.bnav-item:hover,.bnav-item.active{color:var(--accent-ink)}
html[data-theme="dark"] .bnav-item:hover,html[data-theme="dark"] .bnav-item.active{color:var(--text)}
.bnav-icon{width:20px;height:20px;flex-shrink:0}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* ── MICRO ANIMATIONS ── */
.footer{text-align:center;padding:2rem 1rem 1.5rem;font-size:11px;color:var(--text3);letter-spacing:.04em}
@keyframes pressDown{0%{transform:scale(1)}50%{transform:scale(0.94)}100%{transform:scale(1)}}
@keyframes popIn{0%{transform:scale(0.85);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes slideUp{0%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes dotPop{0%{transform:scaleX(1)}40%{transform:scaleX(1.4)}100%{transform:scaleX(1)}}
@keyframes cardBounce{0%{transform:translateX(0) scale(1)}15%{transform:translateX(-3px) scale(1.01)}35%{transform:translateX(2px) scale(1)}55%{transform:translateX(-1px)}75%{transform:translateX(1px)}100%{transform:translateX(0) scale(1)}}
@keyframes valReveal{0%{opacity:0;transform:translateY(4px) scale(0.95)}100%{opacity:1;transform:none}}
@keyframes ripple{0%{transform:scale(0);opacity:.35}100%{transform:scale(2.5);opacity:0}}

/* Button active press */
.pill:active,.btn-reset:active,.mtab:active,.stab:active,.hbtn:active,.fc-tab:active{animation:pressDown .18s ease}
.fc-btn:active{animation:pressDown .15s ease;transform:scale(0.97)}
.hmenu-item:active{animation:pressDown .12s ease}
.modal-close:active,.hist-btn:active,.cmp-hist-btn:active,.btn-whatif:active{animation:pressDown .15s ease}
.toggle-track{cursor:pointer}

/* Progress dot active pop */
.fc-dot.cur{animation:dotPop .3s ease}

/* Result card value stagger reveal */
.fc-result-item{animation:slideUp .28s ease both}
.fc-result-item:nth-child(1){animation-delay:.04s}
.fc-result-item:nth-child(2){animation-delay:.08s}
.fc-result-item:nth-child(3){animation-delay:.12s}
.fc-result-item:nth-child(4){animation-delay:.16s}
.fc-result-item:nth-child(5){animation-delay:.20s}
.fc-result-item:nth-child(6){animation-delay:.24s}
.fc-result-item:nth-child(7){animation-delay:.28s}
.fc-result-item:nth-child(8){animation-delay:.32s}
.fc-result-item:nth-child(9){animation-delay:.36s}

/* Input focus ring glow */
.fc-input-wrap:focus-within{box-shadow:0 0 0 3px rgba(26,25,22,0.1)}
html[data-theme="dark"] .fc-input-wrap:focus-within{box-shadow:0 0 0 3px rgba(240,237,232,0.12)}

/* Ripple container for fc-btn-next */
.fc-btn-next{position:relative;overflow:hidden}
.fc-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.35);width:60px;height:60px;margin-top:-30px;margin-left:-30px;animation:ripple .5s ease-out forwards;pointer-events:none}

/* Summary value pop when updated */
.sum-val.updated{animation:popIn .22s ease}

/* History card slide-in */
.hist-entry{animation:slideUp .22s ease both}
.hist-entry:nth-child(2){animation-delay:.04s}
.hist-entry:nth-child(3){animation-delay:.08s}
.hist-entry:nth-child(4){animation-delay:.12s}
.hist-entry:nth-child(5){animation-delay:.16s}
.hist-entry:nth-child(n+6){animation-delay:.18s}

/* History card hover — only when not mid-swipe */
.hist-inner:hover{background:var(--surface2)}

/* Mode toggle pop */
.mode-pill-on{animation:popIn .18s ease}
.card{animation:fadeIn .3s ease both}
.card:nth-child(1){animation-delay:.05s}
.card:nth-child(2){animation-delay:.10s}
.card:nth-child(3){animation-delay:.15s}

/* Floor-limit input focus glow */
.floor-input-wrap:focus-within{box-shadow:0 0 0 3px rgba(26,25,22,0.08)}
html[data-theme="dark"] .floor-input-wrap:focus-within{box-shadow:0 0 0 3px rgba(240,237,232,0.1)}

/* Settings row subtle hover */
.settings-row{transition:background .12s}
.settings-row:hover{background:var(--surface2)}

/* Panel header hover */
.panel-header{transition:background .15s}
.panel-header:hover{background:var(--surface2)}

/* Incentive label field — prefix-input widget */
.lbl-fields{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.lbl-field{display:flex;align-items:stretch;border:1.5px solid var(--border-ctrl);border-radius:var(--radius-sm);background:var(--surface2);overflow:hidden;transition:border-color .15s,background .15s,box-shadow .15s}
.lbl-field:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(26,25,22,0.07)}
html[data-theme="dark"] .lbl-field:focus-within{box-shadow:0 0 0 3px rgba(240,237,232,0.09)}
.lbl-field.lbl-saved{border-color:var(--green)}
.lbl-abbr{padding:0 10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);font-family:var(--font-body);display:flex;align-items:center;border-right:1px solid var(--border);background:transparent;user-select:none;white-space:nowrap;min-width:38px;justify-content:center}
.lbl-input{flex:1;border:none;outline:none;background:transparent;padding:7px 10px;font-size:13px;font-family:var(--font-body);font-weight:400;color:var(--text);min-width:0}
.lbl-input::placeholder{color:var(--text3)}

/* ── QUANTITY ── */
.landed-wrap{display:inline-flex;align-items:center;gap:1px;border:1.5px solid var(--border2);border-radius:var(--radius-sm);padding:1px 4px 1px 7px;background:var(--surface);transition:border-color .15s}
.landed-wrap:focus-within{border-color:var(--accent)}
/* Direction is in the prefix (+₹ / −₹), not only the colour, so it reads the
   same to anyone who cannot distinguish the two tints. */
.landed-wrap>span{font-variant-numeric:tabular-nums}
.landed-wrap.out{border-color:var(--green-border)}
.landed-wrap.out>span{color:var(--green)}
.landed-wrap.out:focus-within{border-color:var(--green)}
.landed-wrap>span{font-size:11px;color:var(--text3)}
.landed-wrap input{border:none;background:transparent;width:62px;font-size:13px;font-family:var(--font-mono);font-weight:500;text-align:right;outline:none;color:var(--text);padding:3px 2px;-moz-appearance:textfield}
.landed-wrap input::-webkit-outer-spin-button,.landed-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-wrap{display:flex;align-items:center;gap:6px}
.qty-box{display:flex;align-items:center;border:1.5px solid var(--border2);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.qty-box button{width:26px;height:28px;border:none;background:transparent;color:var(--text2);font-size:15px;cursor:pointer;line-height:1;font-family:var(--font-body)}
.qty-box button:hover{background:var(--surface2);color:var(--accent-ink)}
.qty-box input{width:46px;border:none;outline:none;background:transparent;text-align:center;font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--text);padding:4px 0;-moz-appearance:textfield}
.qty-box input::-webkit-outer-spin-button,.qty-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sum-item.sum-order .sum-val{color:#fff}
.sum-order-sep{grid-column:1/-1;height:1px;background:rgba(255,255,255,0.18);margin:2px 0}

/* ── STICKY MOBILE RESULT BAR ──
   Phones can't show the inputs and the summary at once, which turned "tweak a
   discount, read the profit" into a scroll round-trip. This pins the three
   figures that matter directly above the bottom nav. Desktop keeps the full
   summary and never shows this. */
.mini-result{display:none;position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));z-index:450;background:var(--accent);color:#fff;padding:7px calc(10px + env(safe-area-inset-left,0px)) 7px calc(10px + env(safe-area-inset-right,0px));box-shadow:0 -2px 10px rgba(0,0,0,0.14);align-items:center;justify-content:space-around;gap:6px}
.mini-item{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;flex:1}
.mini-lbl{font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;opacity:.72;white-space:nowrap}
.mini-val{font-family:var(--font-mono);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mini-val.neg{color:#ffb4ab}
.mini-val.warn{color:#ffd479}
.mini-sep{width:1px;align-self:stretch;background:rgba(255,255,255,0.22);flex:0 0 1px}
@media(max-width:800px){.mini-result.show{display:flex}}

/* ── COUNT-UP ──
   Large jumps in the headline figures are animated so the eye can follow the
   direction of change instead of the number simply teleporting. Small deltas
   are set directly — see animateValue(). */
.sum-val.counting,.row-val.counting{will-change:contents}
.sum-val.bump{animation:valueBump var(--dur-slow) var(--ease-spring)}
@keyframes valueBump{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ── TOAST ── */
/* Above .modal-overlay (600). A toast confirming something you did inside a
   dialog — "Rates updated" from Settings, "Saved" from the preset dialog — was
   rendering underneath it, dimmed by the scrim and softened by its blur. */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:var(--text);color:var(--surface);padding:10px 16px;border-radius:22px;font-size:12.5px;font-family:var(--font-body);box-shadow:0 6px 24px rgba(0,0,0,0.25);z-index:700;opacity:0;transition:transform var(--dur-slow) var(--ease-spring),opacity var(--dur);pointer-events:none;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
.toast-undo{background:none;border:none;color:var(--amber);font-weight:600;font-size:12.5px;cursor:pointer;font-family:var(--font-body);padding:0;white-space:nowrap}
/* On mobile the toast shares the bottom edge with the FAB, so it stops short of
   the right-hand corner rather than being centred underneath it. */
@media(max-width:800px){
  .toast{left:12px;right:80px;bottom:calc(72px + env(safe-area-inset-bottom,0px));max-width:none;transform:translateY(80px)}
  .toast.show{transform:translateY(0)}
  .mini-result.show ~ .toast{bottom:calc(118px + env(safe-area-inset-bottom,0px))}
}

/* ── FLOATING ACTION BUTTON (mobile) ──
   Share / Save / Copy / PDF live in the top header, which is the hardest place
   to reach one-handed on a large phone. This puts them in the thumb zone.
   Default mode only: Quick mode keeps its own flow, and the actions here read
   LAST_CP/LAST_SP from the main calculator. */
.fab-wrap{display:none;position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:520;flex-direction:column;align-items:flex-end;gap:10px}
@media(max-width:800px){.fab-wrap.show{display:flex}}
/* Lift clear of the sticky result bar when it is visible */
.mini-result.show ~ .fab-wrap{bottom:calc(116px + env(safe-area-inset-bottom,0px))}
/* Above .bottom-nav (500), or the nav stays lit and tappable through the scrim
   while the menu is open. Still below .modal-overlay (600). */
.fab-scrim{display:none;position:fixed;inset:0;background:rgba(10,10,8,0.4);z-index:510;backdrop-filter:blur(1.5px)}
.fab-scrim.show{display:block}
.fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:9px;pointer-events:none}
.fab-wrap.open .fab-menu{pointer-events:auto}
.fab-item{display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--text);border:1px solid var(--border2);border-radius:24px;padding:10px 16px;font-size:12.5px;font-weight:500;font-family:var(--font-body);cursor:pointer;white-space:nowrap;box-shadow:0 3px 12px rgba(0,0,0,0.16);opacity:0;transform:translateY(12px) scale(.92);transition:opacity var(--dur-fast),transform var(--dur) var(--ease-spring)}
.fab-item svg{flex-shrink:0;color:var(--accent-ink)}
.fab-wrap.open .fab-item{opacity:1;transform:none}
/* Stagger so the stack unfurls rather than appearing all at once */
.fab-wrap.open .fab-item:nth-child(6){transition-delay:0s}
.fab-wrap.open .fab-item:nth-child(5){transition-delay:.03s}
.fab-wrap.open .fab-item:nth-child(4){transition-delay:.06s}
.fab-wrap.open .fab-item:nth-child(3){transition-delay:.09s}
.fab-wrap.open .fab-item:nth-child(2){transition-delay:.12s}
.fab-wrap.open .fab-item:nth-child(1){transition-delay:.15s}
.fab-item:active{transform:scale(.95)}
.fab-btn{width:56px;height:56px;min-width:56px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.28);transition:transform var(--dur) var(--ease-spring),box-shadow var(--dur);align-self:flex-end}
.fab-btn svg{transition:transform var(--dur) var(--ease-spring)}
.fab-wrap.open .fab-btn svg{transform:rotate(135deg)}
.fab-wrap.open .fab-btn{box-shadow:0 6px 22px rgba(0,0,0,0.34)}
.fab-btn:active{transform:scale(.92)}

/* ── CONFIRM MODAL ── */
.confirm-modal{max-width:400px}
.confirm-msg{font-size:13.5px;color:var(--text);line-height:1.55;margin-bottom:6px}
.confirm-sub{font-size:11.5px;color:var(--text3);line-height:1.5}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.confirm-btn{padding:7px 16px;border-radius:20px;border:1px solid var(--border-ctrl);background:transparent;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--font-body)}
.confirm-btn:hover{background:var(--surface2)}
.confirm-btn.danger{border-color:var(--red);color:#fff;background:var(--red)}
.confirm-btn.primary{border-color:var(--accent);color:var(--accent-fg);background:var(--accent)}
.confirm-btn.primary:hover{filter:brightness(1.12)}
.confirm-btn:disabled{opacity:.45;cursor:not-allowed}
.confirm-btn:disabled:hover{background:transparent}

/* ── Text-entry dialog ── */
.prompt-label{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:14px 0 6px}
.prompt-input{width:100%;padding:9px 12px;border:1.5px solid var(--border-ctrl);border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);font-size:14px;font-family:var(--font-body)}
.prompt-input:focus{outline:none;border-color:var(--text2)}
.confirm-sub.prompt-err{color:var(--red)}
.confirm-sub.prompt-note{color:var(--amber)}
#prompt-hint{min-height:16px;margin-top:6px}

/* ── Preset manager ── */
/* ── Settings: nav rail on desktop, segmented strip on phones ── */
.modal-settings{max-width:820px}
.settings-body{padding:0;display:flex;flex-direction:column;min-height:0}
.settings-shell{display:flex;align-items:stretch;min-height:0;flex:1}
.settings-nav{display:flex;flex-direction:column;gap:2px;padding:16px 10px;border-right:1px solid var(--border);flex-shrink:0;width:168px}
.settings-tab{text-align:left;padding:9px 12px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--text2);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;min-height:38px}
.settings-tab:hover{background:var(--surface2);color:var(--text)}
.settings-tab.on{background:var(--accent);color:var(--accent-fg);font-weight:600}
.settings-panes{flex:1;min-width:0;overflow-y:auto;padding:20px 24px}
.settings-pane[hidden]{display:none}
/* The last section in a pane has nothing under it to separate from. */
.settings-pane .modal-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}

/* ── GP / markup converter ── */
.cv-intro{font-size:12px;color:var(--text2);line-height:1.55;margin:0 0 16px}
.cv-pair{display:flex;align-items:flex-start;gap:12px}
.cv-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;cursor:text}
.cv-lbl{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--text3);font-weight:600}
.cv-input{display:flex;align-items:center;border:1.5px solid var(--border-ctrl);border-radius:var(--radius-sm);background:var(--surface2);padding:0 10px}
.cv-input:focus-within{border-color:var(--text2)}
.cv-input input{flex:1;min-width:0;border:none;background:transparent;outline:none;padding:10px 0;font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--text);-moz-appearance:textfield}
.cv-input input::-webkit-outer-spin-button,.cv-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cv-input::after{content:'%';font-size:12px;color:var(--text3);margin-left:4px}
.cv-hint{font-size:10.5px;color:var(--text3);line-height:1.4}
.cv-swap{align-self:center;margin-top:14px;font-size:16px;color:var(--text3);flex-shrink:0}
/* Currency converter: same two-field shape, but each side carries a currency
   picker instead of the fixed "%" the GP converter appends. */
/* Amounts here run long — ₹20,833.33 against a GP figure's "25" — so the
   currency converter's boxes take a smaller size than the GP one's. */
.cv-input.cc-input::after{content:none}
.cc-input input{font-size:15px}
/* 400px is right for a confirmation. This one carries two currency pickers
   and two amounts, and ₹20,833.33 was being cut off at the last digit. */
.cc-modal{max-width:500px}
.cv-ccy{border:none;background:transparent;font-family:var(--font-body);font-size:12px;font-weight:600;
  color:var(--text2);outline:none;cursor:pointer;padding:0 8px 0 0;margin-right:8px;
  border-right:1px solid var(--border);align-self:stretch}
.cv-swap-btn{background:none;border:1px solid var(--border-ctrl);border-radius:50%;width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;
  color:var(--text2);font-family:var(--font-body);transition:all .15s;padding:0}
.cv-swap-btn:hover{border-color:var(--text2);color:var(--text)}
.cv-out{font-size:11.5px;line-height:1.55;color:var(--text2);min-height:34px;margin:14px 0 0}
.cv-out.bad{color:var(--amber)}
.feat-intro{font-size:12px;color:var(--text2);line-height:1.55;margin:0 0 12px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.feat-chip{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-ctrl);background:transparent;cursor:pointer;font-family:var(--font-body);transition:all .15s;min-height:44px}
.feat-chip:hover{background:var(--surface2)}
.feat-name{font-size:12.5px;font-weight:600;color:var(--text2)}
.feat-hint{font-size:10.5px;color:var(--text3);line-height:1.4}
.feat-chip.on{background:var(--accent);border-color:var(--accent)}
.feat-chip.on .feat-name{color:var(--accent-fg)}
.feat-chip.on .feat-hint{color:rgba(255,255,255,0.66)}
.pm-intro{font-size:12px;color:var(--text2);line-height:1.55;margin:0 0 14px}
.pm-new{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1px dashed var(--border-ctrl);background:transparent;color:var(--text2);font-size:12.5px;font-weight:500;font-family:var(--font-body);cursor:pointer;transition:all .15s}
.pm-new:hover{background:var(--surface2);color:var(--text)}
.pm-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.pm-empty{font-size:12.5px;color:var(--text3);line-height:1.6;text-align:center;padding:18px 8px;margin:0}
.pm-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface2)}
.pm-name{flex:1;min-width:0;font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-acts{display:flex;gap:6px;flex-shrink:0}
.pm-btn{padding:5px 11px;min-height:30px;border-radius:16px;border:1px solid var(--border-ctrl);background:transparent;font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--font-body);white-space:nowrap;transition:all .15s}
.pm-btn:hover{background:var(--surface);color:var(--text)}
.pm-btn.danger{color:var(--red);border-color:var(--red)}
.pm-btn.danger:hover{background:var(--red);color:#fff}
.confirm-btn.danger:hover{filter:brightness(.92)}

/* ── HISTORY SEARCH / FILTER / TAGS ── */
.hist-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.hist-search-wrap{display:flex;align-items:center;gap:6px;border:1.5px solid var(--border2);border-radius:20px;padding:3px 10px;background:var(--surface);flex:1;min-width:150px}
.hist-search-wrap:focus-within{border-color:var(--accent)}
.hist-search-wrap input{border:none;outline:none;background:transparent;font-size:12px;font-family:var(--font-body);color:var(--text);flex:1;min-width:0;padding:2px 0}
.hist-search-wrap svg{color:var(--text3);flex-shrink:0}
.hist-filters{display:flex;gap:4px;flex-wrap:wrap}
.hist-fpill{padding:3px 10px;border-radius:14px;border:1px solid var(--border-ctrl);background:transparent;font-size:10.5px;font-weight:500;color:var(--text3);cursor:pointer;font-family:var(--font-body);white-space:nowrap}
.hist-fpill:hover{background:var(--surface2)}
.hist-fpill.on{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.hist-tag{font-family:var(--font-body);appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:600;letter-spacing:.03em;padding:1px 7px;border-radius:9px;background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue);cursor:pointer;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}
.hist-tag:hover{border-color:var(--blue)}
.hist-tag.empty{background:transparent;color:var(--text3);border:1px dashed var(--border-ctrl)}
.hist-tag.empty:hover{color:var(--accent-ink);border-color:var(--accent-ink)}
.hist-tag-input{font-size:10px;font-family:var(--font-body);border:1px solid var(--accent);border-radius:9px;padding:1px 6px;outline:none;background:var(--surface);color:var(--text);width:110px}
.hist-more{display:block;width:100%;margin-top:8px;padding:10px;border:1px dashed var(--border2);border-radius:var(--radius-sm);background:transparent;color:var(--text2);font-size:12px;font-weight:500;font-family:var(--font-body);cursor:pointer;transition:border-color .15s,color .15s}
.hist-more:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.hist-more span{color:var(--text3);font-weight:400}
.hist-none{text-align:center;padding:22px;color:var(--text3);font-size:12px;font-style:italic}

/* ── QUOTE (multi-line) ── */
.quote-modal{max-width:1000px}
.qt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.qt-table{width:100%;border-collapse:collapse;min-width:720px}
.qt-table th{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-weight:600;text-align:left;padding:4px 6px;border-bottom:1px solid var(--border);white-space:nowrap}
.qt-table th.num,.qt-table td.num{text-align:right}
.qt-table td{padding:3px 6px;border-bottom:1px solid var(--border);font-size:11.5px;font-family:var(--font-mono);white-space:nowrap}
.qt-table tr:last-child td{border-bottom:none}
.qt-in{border:1px solid var(--border-ctrl);border-radius:var(--radius-sm);background:var(--surface);padding:4px 6px;font-size:11.5px;font-family:var(--font-mono);color:var(--text);outline:none;width:72px;text-align:right;-moz-appearance:textfield}
.qt-in::-webkit-outer-spin-button,.qt-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qt-in:focus{border-color:var(--accent)}
.qt-in.desc{width:150px;text-align:left;font-family:var(--font-body)}
.qt-del{width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--border-ctrl);background:transparent;cursor:pointer;color:var(--text3);display:flex;align-items:center;justify-content:center}
.qt-del:hover{background:#fef2f2;border-color:var(--red);color:var(--red)}
html[data-theme="dark"] .qt-del:hover{background:rgba(239,68,68,0.15)}
.qt-pos{color:var(--green)}
.qt-neg{color:var(--red)}
.qt-foot td{border-top:2px solid var(--border2);font-weight:600;padding-top:8px;font-size:12px}
.qt-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.qt-empty{text-align:center;padding:26px;color:var(--text3);font-size:12px;font-style:italic}
.qt-note{font-size:10.5px;color:var(--text3);font-style:italic;margin-top:10px;line-height:1.5}
/* Quote card layout — used below 800px instead of the 720px-wide table */
.qt-cards{display:flex;flex-direction:column;gap:10px}
.qtc{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface2);padding:10px 12px}
.qtc-head{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.qtc-num{font-size:10px;font-weight:700;color:var(--text3);min-width:16px;font-family:var(--font-mono)}
.qtc-desc{flex:1;width:auto;min-width:0}
.qtc-inputs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.qtc-f{display:flex;flex-direction:column;gap:3px}
.qtc-f>span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:600}
.qtc-f .qt-in{width:100%;text-align:left;font-size:15px;padding:9px 10px}
.qtc-out{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 10px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--border)}
.qtc-o{display:flex;flex-direction:column;gap:1px;font-family:var(--font-mono);font-size:13px;min-width:0}
.qtc-ol{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:600;font-family:var(--font-body)}
.qtc-total{background:var(--accent);color:#fff;border-color:var(--accent)}
.qtc-total .qtc-ol{color:rgba(255,255,255,0.75)}
.qtc-total .qtc-out{border-top-color:rgba(255,255,255,0.25);grid-template-columns:repeat(3,1fr)}
.qtc-thead{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.85}
.qtc-total .qt-pos{color:#a7f3d0}
.qtc-total .qt-neg{color:#ffb4ab}

.inc-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-bottom:1.25rem}
.inc-pair > .panel{margin-bottom:0}

/* ── MOBILE-ONLY OVERRIDES (must come after base rules) ── */
@media(max-width:800px){
  /* These were originally added to the first @media block in the file, which
     sits before the base rules they override — so .pm-btn kept its 30px height
     and .fx-note kept nowrap. Same specificity, later wins. */
  .inc-pair{grid-template-columns:1fr;gap:10px}
  /* Three Calculate chips will not fit one line on a phone. Let them wrap and
     keep the group label level with the first of them, rather than floating it
     in the middle of a two-line block. The divider between groups only made
     sense while they sat side by side. */
  .control-bar .ctrl-group{align-items:flex-start}
  .control-bar .ctrl-label{padding-top:9px}
  .control-bar .divider{display:none}
  .cv-pair{flex-direction:column;gap:14px}
  .cv-swap{align-self:flex-start;margin-top:0;transform:rotate(90deg)}
  .cv-swap-btn{width:44px;height:44px}
  .cv-input input{min-height:44px}
  .solver{grid-column:1/-1;padding-top:10px;border-top:1px solid rgba(255,255,255,0.16)}
  .fx-note{white-space:normal;width:100%}
  .fx-manual-wrap input{min-height:44px}
  .pm-row{flex-direction:column;align-items:stretch;gap:8px}
  .pm-acts{justify-content:space-between}
  .pm-btn{flex:1;min-height:44px}
  .feat-grid{grid-template-columns:1fr}
  .modal-settings{max-width:100%}
  .settings-shell{flex-direction:column}
  .settings-nav{flex-direction:row;width:auto;border-right:none;border-bottom:1px solid var(--border);padding:10px 12px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .settings-nav::-webkit-scrollbar{display:none}
  .settings-tab{flex:0 0 auto;border-radius:20px;min-height:44px;padding:10px 16px;border:1px solid var(--border-ctrl)}
  .settings-tab.on{border-color:var(--accent)}
  .settings-panes{padding:16px 18px calc(18px + env(safe-area-inset-bottom,0px))}
  /* Footer clears the bottom nav AND the sticky result bar above it */
  .footer{padding-bottom:calc(126px + env(safe-area-inset-bottom,0px) + 1.5rem)}

  /* Every dialog — not just Settings — must fit the viewport with a scrolling
     body, so its action buttons stay reachable. */
  .modal-overlay{align-items:center;padding:0.75rem;padding-bottom:calc(0.75rem + env(safe-area-inset-bottom,0px))}
  .modal-overlay .modal{max-height:calc(100svh - 1.5rem - env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}
  /* min-height:0 lets a flex child actually scroll instead of growing */
  .modal-overlay .modal-body{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0}
  /* Hide keyboard shortcuts row — not useful on phones */
  #settings-kb-row{display:none}

  /* Quote actions pinned to the bottom of the dialog — they are the primary
     controls and were previously below the fold on a phone. */
  .qt-actions{position:sticky;bottom:0;background:var(--surface);margin:14px -20px -20px;padding:11px 20px calc(11px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);z-index:2}
  .qt-note{display:none}

  /* Confirm actions pinned so the destructive choice is never scrolled away */
  .confirm-actions{position:sticky;bottom:0;background:var(--surface);padding-top:14px;margin-bottom:-4px}
  .confirm-btn{padding:11px 20px;font-size:13px}

  /* ── Touch targets: Apple HIG asks for 44×44; these were 22–28px ── */
  .inc-del-btn{width:30px;height:30px;min-width:30px;font-size:21px;margin-right:8px}
  .qt-del{width:34px;height:34px}
  .hist-del-btn{width:36px;height:36px}
  .cmp-hist-btn{padding:8px 14px}
  .qty-box button{width:40px;height:40px;font-size:19px}
  .qty-box input{width:54px;font-size:15px;padding:8px 0}
  .modal-close{width:40px;height:40px;font-size:20px}
  .stab{padding:9px 8px}
  .hist-fpill{padding:7px 13px;font-size:11.5px}
  .hist-tag,.hist-tag.empty{padding:5px 10px;font-size:11px}
  .pill{padding:8px 15px;font-size:12.5px}
  .hist-btn{padding:9px 15px;font-size:12px}
  .inc-add-btn{padding:12px}
  .hmenu-item{padding:12px 14px}

  /* ── Type scale: nothing below ~10.5px on a phone ── */
  .badge,.hist-k,.hist-inc-k{font-size:10.5px}
  .bnav-item,.fc-result-lbl,.wz-res-lbl{font-size:10.5px}
  .hist-v{font-size:12px}
  .inc-note,.qt-note{font-size:11.5px}
  .sum-lbl{font-size:10.5px}
}

/* ── NARROW PHONES (must come after the mobile block) ──
   "% on MRP + 18% GST" stays on one line — the input beside it never holds
   more than a couple of digits — but on a 320px screen the label and the
   prefix together leave it nothing. Both step down to the 10.5px floor here,
   and only here. */
@media(max-width:380px){
  /* No amount of trimming fits an 18-character label, a prefix, a number and a
     next button across 264px. The label drops to its own row underneath
     instead — still one line, and the input gets the width back. */
  .field{flex-wrap:wrap}
  /* width:100% would claim a whole row for the input alone; it has to share the
     first one with the prefix and the next button. */
  .field input{width:auto;flex:1 1 60px}
  .field .field-suf{order:9;flex:0 0 100%;height:auto;padding:5px 10px;
    justify-content:flex-end;border-left:none;border-top:1px solid var(--border)}
  .field .sym{padding:0 8px}
}

/* ── MOTION ──
   One easing scale so movement feels consistent. --ease-spring overshoots
   slightly, which reads as physical on elements that travel (modals, toast,
   FAB); --ease-out is for things that only fade or tint. Durations are short
   enough to stay out of the way. All of it collapses under
   prefers-reduced-motion, further down. */
:root{
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.14s;
  --dur:.22s;
  --dur-slow:.32s;
}

/* View Transitions: cross-fade the layout swap between Default and Quick.
   The header and bottom nav are named so they persist across the transition
   rather than fading with everything else. */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){
    animation-duration:var(--dur-slow);
    animation-timing-function:var(--ease-out);
  }
  .header{view-transition-name:app-header}
  .bottom-nav{view-transition-name:app-bottom-nav}
}

/* ── ACCESSIBILITY ── */

/* Visually hidden but available to screen readers. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Skip link — first tab stop, visible only when focused. */
.skip-link{position:absolute;left:8px;top:-60px;z-index:900;background:var(--accent);color:#fff;padding:10px 18px;border-radius:0 0 var(--radius-sm) var(--radius-sm);font-size:13px;font-weight:600;font-family:var(--font-body);text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}

/* Every input suppresses its own outline (they are styled via a wrapper), so a
   single visible focus ring is defined here for keyboard users. :focus-visible
   means pointer users never see it. */
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:3px}
/* Inputs sit inside bordered wrappers; ring the wrapper so it isn't clipped. */
.big-input:has(:focus-visible),.field:has(:focus-visible),.floor-input-wrap:has(:focus-visible),
.gst-custom-wrap:has(:focus-visible),.rnd-custom-wrap:has(:focus-visible),.inc-pct-wrap:has(:focus-visible),
.fc-input-wrap:has(:focus-visible),.wz-field:has(:focus-visible),.hist-search-wrap:has(:focus-visible),
.qty-box:has(:focus-visible),.lbl-field:has(:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
/* Fallback for browsers without :has() — ring the input itself. */
@supports not selector(:has(*)){
  input:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
}

/* Panel headers: a stretched button provides the keyboard/AT target while the
   visible content stays laid out as before. Sibling controls (Edit) opt back
   into pointer events so they are not swallowed by the overlay. */
.panel-header{position:relative}
.panel-hdr-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:none;background:none;cursor:pointer;z-index:0}
.panel-hdr-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-3px;border-radius:var(--radius-sm)}
.panel-header>.panel-header-left,.panel-header>.panel-hdr-actions{position:relative;z-index:1;pointer-events:none}
.panel-header>.panel-hdr-actions button,.panel-header>.panel-header-left label,
.panel-header>.panel-header-left input{pointer-events:auto}
.panel-hdr-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* h2 used for the document outline — keep the original inline appearance */
h2.panel-title,h2.card-title,h2.modal-title,h2.summary-title{margin:0;display:inline;font-size:inherit}
h2.card-title,h2.modal-title{font-size:unset}

/* Respect a reduced-motion preference: keep state changes, drop the movement. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .toast,.fab-item,.fab-btn svg,.modal{transition:none !important;animation:none !important}
}

/* Suppress double-tap zoom on controls without disabling pinch-zoom page-wide */
button,.pill,.stab,.mtab,.fc-tab,.bnav-item,.toggle,.hist-tag,.inc-row-main,
.hmenu-item,.modal-close,.hist-fpill,label{touch-action:manipulation}

/* Press feedback for touch, where :hover never fires */
.inc-del-btn:active,.qt-del:active,.hist-tag:active,.qty-box button:active{
  transform:scale(0.88);opacity:.75
}
.inc-del-btn,.qt-del,.hist-tag,.qty-box button{transition:transform .1s,opacity .1s}
@media print{
  .header,.control-bar,.mrp-bar,.cards,.panel,.footer,
  .hist-actions,.hbtn,.btn-reset,.modal-overlay{display:none!important}
  body{background:white}
  .page{padding:0;max-width:100%}
  .summary{border-radius:0;box-shadow:none;padding:16px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:1.5cm}
}