/* ============================ TOKENS ============================ */
/* ------------------------------------------------------------------
   HPFAS Insights site design system (drop-in handoff tokens).
   The tool's original variable NAMES are kept so all downstream CSS is
   unchanged; only their VALUES are remapped to the site's palette.
   Neutrals are fixed (independent of accent); accent hue is switchable
   via html[data-accent="warm|cool|violet"] (default = cool, closest to
   the tool's legacy cyan) and light/dark via html[data-mode].
   --doc (Book Antiqua) is left ALONE — official documents / print keep it.
   ------------------------------------------------------------------ */
:root{
  /* accent — default COOL (see [data-accent] variants below) */
  --accent:#0E9EC9; --accent-deep:#0E7490; --accent-soft:rgba(14,158,201,.13); --accent-ink:#FFFFFF;
  --accent-tint:rgba(14,158,201,.13); --on-accent:#FFFFFF; --g1:#0E9EC9; --g2:#1E7FD4; --g3:#2DD4BF; --g4:#0EA5A5;/* theme-gradient stops (for the SVG benefit band, left-to-right); --g4 = each theme's signature far-hue so the band ends on it (warm→violet) */
  --gradient:radial-gradient(circle at 82% 25%, #22D3EE 0%, transparent 48%),
             radial-gradient(circle at 12% 88%, #0EA5A5 0%, transparent 52%),
             linear-gradient(125deg, #0E9EC9 0%, #1E7FD4 55%, #2DD4BF 100%);
  /* supporting hues (semantic: group / sequence colours) — left unchanged */
  --navy:#0D1B3E; --navy-2:#162447; --navy-soft:#EEF3FA; --gold:#C8881A; --gold-2:#E0A93A; --gold-ink:#3A2702; --gold-deep:#9A6A12; --seq-a:#156082; --seq-n:#E97132; --seq-r:#0A9A4E;
  --dc-a:#185FA5; --dc-b:#0F6E56; --dc-c:#9A5A0E; --dc-d:#3B6D11;
  /* site secondary palette (fixed hues used alongside the switchable accent) */
  --sky:#107BA2; --sky-tint:#E6F6FC; --navy-tint:#EEF2F5; --copper:#A06345; --copper-tint:#FBEDE6;
  /* neutrals — site palette (warm off-white / deep slate ink) */
  --paper:#FBFBF9; --card:#FFFFFF; --elev:#FFFFFF; --card-2:#F5F5F1;
  --ink:#16303F; --ink-2:#3E5763; --muted:#6B7A85; --line:#EDEDE6; --line-soft:#F3F3EE; --row-alt:#F8F8F4;
  --ok:#15915C; --ok-soft:#E6F4EC; --warn:#C27A1A; --warn-soft:#FAF0E1; --danger:#C13838; --danger-soft:#F8EBEB;
  /* fonts — Schibsted Grotesk (UI), IBM Plex Mono (labels), Instrument Serif (display); Book Antiqua kept for documents */
  --ui:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --doc:"Book Antiqua","Palatino Linotype",Palatino,"URW Palladio L",Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;
  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:var(--ui); --disp:var(--ui);
  --r:16px; --r-sm:8px; --r-xs:7px; --r-pill:999px;
  --shadow:0 1px 3px rgba(0,0,0,.05),0 10px 26px rgba(0,0,0,.06);
  --shadow-lg:0 2px 8px rgba(0,0,0,.08),0 18px 44px rgba(0,0,0,.12);
  --pop-shadow:0 2px 8px rgba(0,0,0,.08),0 18px 44px rgba(0,0,0,.12);
  --topbar-h:62px;
  --banner-h:34.5px;/* one height for every full-width sheet banner: Fixation .stmt-fixh/.stmt-prog/.stmt-dni + Arrear .fyhead rows/.arr-words (b158) */
}
/* ---------- Accent variants (light) ---------- */
html[data-accent="cool"]{--accent:#0E9EC9; --accent-deep:#0E7490; --accent-soft:rgba(14,158,201,.13); --accent-tint:rgba(14,158,201,.13); --g1:#0E9EC9; --g2:#1E7FD4; --g3:#2DD4BF; --g4:#0EA5A5;
  --gradient:radial-gradient(circle at 82% 25%, #22D3EE 0%, transparent 48%),radial-gradient(circle at 12% 88%, #0EA5A5 0%, transparent 52%),linear-gradient(125deg, #0E9EC9 0%, #1E7FD4 55%, #2DD4BF 100%);
  --tint:radial-gradient(circle at 90% 15%, rgba(34,211,238,.10) 0%, transparent 50%),radial-gradient(circle at 8% 92%, rgba(45,212,191,.08) 0%, transparent 50%),#F0FBFD;}
html[data-accent="warm"]{--accent:#FF595E; --accent-deep:#CB3A40; --accent-soft:rgba(255,89,94,.12); --accent-tint:rgba(255,89,94,.12); --g1:#FF8A3D; --g2:#FF595E; --g3:#E23A6B; --g4:#8B5CF6;
  --gradient:radial-gradient(circle at 88% 90%, rgba(139,92,246,.5) 0%, transparent 45%),linear-gradient(120deg, #FF8A3D 0%, #FF595E 62%, #E23A6B 100%);
  --tint:radial-gradient(circle at 90% 15%, rgba(255,89,94,.10) 0%, transparent 50%),radial-gradient(circle at 8% 92%, rgba(139,92,246,.08) 0%, transparent 50%),#FFF5F2;}
html[data-accent="violet"]{--accent:#8B5CF6; --accent-deep:#7C3AED; --accent-soft:rgba(139,92,246,.13); --accent-tint:rgba(139,92,246,.13); --g1:#7C3AED; --g2:#8B5CF6; --g3:#D946EF; --g4:#E879F9;
  --gradient:radial-gradient(circle at 82% 25%, #A78BFA 0%, transparent 48%),radial-gradient(circle at 95% 60%, #E879F9 0%, transparent 45%),linear-gradient(135deg, #7C3AED 0%, #8B5CF6 55%, #D946EF 100%);
  --tint:radial-gradient(circle at 90% 15%, rgba(167,139,250,.12) 0%, transparent 50%),radial-gradient(circle at 8% 92%, rgba(232,121,249,.08) 0%, transparent 50%),#F9F5FF;}
/* ---------- Dark mode: neutrals ---------- */
html[data-mode="dark"]{
  --paper:#0B141C; --card:#12202C; --elev:#17293A; --card-2:#16242F;
  --ink:#E8F1F6; --ink-2:#B7C6CF; --muted:#93A6B2; --line:#1E3040; --line-soft:#182636; --row-alt:#0F1C26; --navy-soft:#16242F;
  --sky:#3BB6DE; --sky-tint:rgba(16,123,162,.15); --navy-tint:rgba(147,166,178,.12); --copper:#D09A78; --copper-tint:rgba(160,99,69,.15);
  --ok-soft:rgba(21,145,92,.20); --warn-soft:rgba(194,122,26,.20); --danger-soft:rgba(193,56,56,.22);
  --shadow:0 1px 3px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.35);
  --shadow-lg:0 2px 8px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.4);
  --pop-shadow:0 2px 8px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.4);
}
/* ---------- Dark mode: accent readability (deep accent brightens for contrast) ---------- */
html[data-mode="dark"][data-accent="cool"]{--accent-deep:#5EEAD4; --accent-soft:rgba(45,212,191,.18); --accent-tint:rgba(45,212,191,.18); --tint:radial-gradient(circle at 90% 15%, rgba(34,211,238,.12) 0%, transparent 50%),radial-gradient(circle at 8% 92%, rgba(45,212,191,.14) 0%, transparent 50%),#0A1A20;}
html[data-mode="dark"][data-accent="warm"]{--accent-deep:#FF9195; --accent-soft:rgba(255,89,94,.18); --accent-tint:rgba(255,89,94,.18); --tint:radial-gradient(circle at 90% 15%, rgba(255,89,94,.14) 0%, transparent 50%),radial-gradient(circle at 8% 92%, rgba(139,92,246,.16) 0%, transparent 50%),#0F1A24;}
html[data-mode="dark"][data-accent="violet"]{--accent-deep:#C4B5FD; --accent-soft:rgba(167,139,250,.20); --accent-tint:rgba(167,139,250,.20); --tint:radial-gradient(circle at 90% 15%, rgba(167,139,250,.16) 0%, transparent 50%),radial-gradient(circle at 8% 92%, rgba(232,121,249,.14) 0%, transparent 50%),#150F22;}
/* default (no explicit data-accent) dark = cool */
html[data-mode="dark"]:not([data-accent="warm"]):not([data-accent="violet"]){--accent-deep:#5EEAD4; --accent-soft:rgba(45,212,191,.18); --accent-tint:rgba(45,212,191,.18); --tint:radial-gradient(circle at 90% 15%, rgba(34,211,238,.12) 0%, transparent 50%),radial-gradient(circle at 8% 92%, rgba(45,212,191,.14) 0%, transparent 50%),#0A1A20;}
html[data-theme="paper"]{--paper:#FBF7EF;--card:#FFFDF8;--elev:#FFFDF8;--card-2:#FBF6EA;--ink:#3A2E1F;--ink-2:#6B5A45;--muted:#9A876A;--line:#E2D6BE;--line-soft:#EFE7D5;--row-alt:#FBF6EA;--navy:#4A3520;--navy-soft:#F3ECDC;}
html[data-theme="contrast"]{--paper:#FFFFFF;--card:#FFFFFF;--ink:#000;--ink-2:#1A1A1A;--muted:#444;--line:#000;--line-soft:#333;--row-alt:#F2F2F2;--shadow:0 0 0 1px #000;}
html[data-theme="contrast"] :focus-visible{outline:3px solid #FFDD00;outline-offset:1px}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%;background:var(--paper);overflow-x:hidden}/* --paper on <html> (kills the Safari canvas gap); overflow-x on html ONLY — putting it on body turned body into a fixed-height scroll box and broke the document scroll (b142 regression) */
body{height:100%;background:var(--paper)}
body{font-family:var(--body);background:var(--paper);color:var(--ink);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;color:var(--ink);margin:0}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font-family:inherit}
.tnum{font-variant-numeric:tabular-nums}.mono{font-family:var(--mono)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid var(--paper)}::-webkit-scrollbar-thumb:hover{background:var(--muted)}
@keyframes fade{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}
.fade{animation:fade .32s ease}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================ APP SHELL ============================ */
.app{display:flex;flex-direction:column}/* document-flow: the page scrolls; chrome (header+toolbar+tabs) is pinned via sticky, footer sits at the true bottom */
/* prevent text selection on UI chrome */
.bar,.otabs,.otab,.sec-head,.sec-head .ttl,.sec-head .bdg,.input-col label,.input-col .lbl,.input-col .hint,.seg,.sgi,.chip,.tgl,.dbtable thead,.dbtable thead th,.dbbtn,.setbtn,.dbbar{user-select:none;-webkit-user-select:none}
.body-row{display:flex;align-items:flex-start;min-height:calc(100vh - 112px)}/* fills the viewport below the 66px header + 46px sub-bar so the footer starts below the fold */
.input-col{width:37%;min-width:380px;max-width:530px;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:112px;height:calc(100vh - 112px);align-self:flex-start}/* form panel pinned in view while the page scrolls the output */
.input-scroll{flex:1;overflow-y:auto;padding:0 22px 44px}
.calc-footer{flex:none;padding:12px 22px;border-top:1px solid var(--line);background:var(--card);box-shadow:0 -4px 14px -8px rgba(13,27,62,.18)}/* pinned bottom of the input column (b160) */
.calc-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;border-radius:var(--r-sm);border:none;background:var(--gradient);color:#fff;font-family:var(--ui);font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:var(--shadow);transition:filter .15s,transform .1s,box-shadow .15s}
.calc-btn svg{width:19px;height:19px;flex:none}
.calc-btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.calc-btn:active{transform:translateY(0)}
.calc-btn.dirty{animation:calcDirty 1.5s ease-in-out infinite}/* results are stale — a field changed since the last Calculate */
@keyframes calcDirty{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent),var(--shadow-lg)}}
@media(prefers-reduced-motion:reduce){.calc-btn.dirty{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent),var(--shadow)}}
/* fix (v1.0.1, Manu): faded/inactive while mandatory (★) fields are incomplete (see updateProgress()
   in app.js, which toggles the native `disabled` attribute off the same mandOk signal that drives
   the progress bar). cursor:default, not not-allowed — Manu's site-wide ruling against the
   prohibited-cursor on disabled buttons (hpfas-theme.css .hp-btn:disabled, v0.37.2) applies here
   too. Comes after .hover/.active/.dirty so it wins the cascade whenever they'd otherwise coincide. */
.calc-btn:disabled,.calc-btn:disabled:hover{opacity:.45;cursor:default;filter:none;transform:none;box-shadow:var(--shadow);animation:none}
.output-col{flex:1;min-width:0;padding:0 30px 64px;background:var(--paper);container-type:inline-size;container-name:outcol}/* grows with content; the page (not this column) scrolls */

/* ============================ SITE HEADER (matches hpfasinsights.com) ============================ */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px;padding:0 32px;background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70;flex:none}/* --paper (was undefined --bg → transparent → content bled through while scrolling); 96% so it's opaque */
.sh-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.sh-logo img{height:34px;width:auto;display:block}
html[data-mode="dark"] .sh-logo img{filter:brightness(0) invert(1)}
.sh-nav{display:flex;gap:28px;align-items:center;flex:1;justify-content:center}
.hp-nav-link{font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;transition:color .2s}
.hp-nav-link:hover{color:var(--accent-deep)}
.hp-nav-link--active{color:var(--accent-deep);font-weight:600}
.hp-nav-link--active:hover{color:var(--accent)}
.sh-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.sh-social{display:flex;gap:8px;align-items:center}
.sh-soc{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;transition:color .2s,border-color .2s,transform .2s}
.sh-soc:hover{color:var(--accent-deep);border-color:var(--accent);transform:translateY(-2px)}
.sh-div{width:1px;height:22px;background:var(--line)}
.sh-accents{display:flex;gap:7px;align-items:center}
.acc-dot{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .18s,box-shadow .18s;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.acc-dot[data-acc="warm"]{background:linear-gradient(120deg,#FF8A3D,#FF595E 60%,#E23A6B)}
.acc-dot[data-acc="cool"]{background:linear-gradient(125deg,#0E9EC9,#1E7FD4 55%,#2DD4BF)}
.acc-dot[data-acc="violet"]{background:linear-gradient(135deg,#7C3AED,#8B5CF6 55%,#D946EF)}
.acc-dot:hover{transform:translateY(-1px) scale(1.08)}
.acc-dot.on{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--accent)}
.acc-custom{width:20px;height:20px;border-radius:50%;border:1.5px dashed var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;position:relative;overflow:hidden}
.acc-custom input{position:absolute;inset:-4px;opacity:0;cursor:pointer}
.sh-mode{background:none;border:none;cursor:pointer;color:var(--ink);padding:4px;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s,color .2s}
.sh-mode:hover{transform:translateY(-1px);color:var(--accent-deep)}
/* profile menu — exact hpfasinsights.com style: gradient rounded-square trigger (white compact
   logo inside) → dropdown. The theme switcher lives at the top of the dropdown. */
.sh-profile{position:relative;display:inline-flex;flex-shrink:0}
.sh-avatar{width:42px;height:42px;border-radius:13px;border:none;cursor:pointer;padding:0;overflow:hidden;background:var(--gradient);display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.sh-avatar img{width:66%;height:66%;object-fit:contain;display:block}
.sh-avatar:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.prof-menu{position:absolute;top:54px;right:0;width:272px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--pop-shadow);overflow:hidden;z-index:80;display:none;animation:pop .16s ease}
.sh-profile.open .prof-menu{display:block}
.pm-theme{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pm-welcome{padding:16px;text-align:center;border-bottom:1px solid var(--line)}
.pm-wtitle{font-family:var(--font-display);font-size:19px;line-height:1.1;color:var(--ink);margin-bottom:4px}
.pm-wsub{font-size:12.5px;color:var(--muted);line-height:1.45}
.pm-cta{padding:12px}
.pm-signin{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--gradient);color:#fff;border:none;cursor:pointer;text-decoration:none;font-family:var(--ui);font-weight:600;font-size:13.5px;padding:11px;border-radius:10px;transition:filter .2s,transform .2s,box-shadow .2s}
.pm-signin:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
@media(max-width:900px){.sh-social{display:none}}
@media(max-width:720px){.sh-nav{display:none}}

/* ============================ TOOL SUB-BAR ============================ */
.toolbar{display:flex;align-items:center;gap:18px;height:46px;padding:0 28px;background:var(--gradient);position:sticky;top:66px;z-index:60;flex:none;color:#fff}/* pinned directly below the 66px site header — never scrolls under it */
/* the sub-bar rides the accent gradient — its contents go white/translucent-white for contrast */
.toolbar .brand .tt .name{color:#fff}
.toolbar .brand .tt .name .ver{color:rgba(255,255,255,.82)}
.toolbar .brand .tt .name .calcchip{color:#fff;background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.42)}
.toolbar .brand .tt .name .beta{color:#fff;background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.72)}
.toolbar .tbtn{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.36);color:#fff;box-shadow:none}
.toolbar .tbtn svg{width:15px;height:15px}
.toolbar .tbtn:hover{background:rgba(255,255,255,.30);border-color:#fff;color:#fff;transform:translateY(-1px)}
/* dark "glass" pills on the gradient sub-bar — white text stays legible on ANY accent hue (warm/cool/violet), unlike white-on-white frosting */
/* single 3D "glass" identity chip (IP | Name | Group | Post) on the gradient sub-bar */
.toolbar .idpill{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.06) 45%,rgba(0,0,0,.26) 100%);border:1px solid rgba(255,255,255,.38);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:idPulse 3.6s ease-in-out infinite}
.toolbar .idpill::after{content:"";position:absolute;top:0;bottom:0;left:0;width:46px;transform:translateX(-220%) skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);pointer-events:none;z-index:3;animation:idShine 4.6s ease-in-out infinite}
@keyframes idShine{0%{transform:translateX(-220%) skewX(-18deg)}20%,100%{transform:translateX(640%) skewX(-18deg)}}
@keyframes idPulse{0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.22)}50%{box-shadow:0 4px 15px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.68),inset 0 -1px 0 rgba(0,0,0,.22),0 0 11px rgba(255,255,255,.15)}}
@media(prefers-reduced-motion:reduce){.toolbar .idpill,.toolbar .idpill::after{animation:none}}
/* ONE continuous glass chip: strip the generic .seg border/box so segments aren't separate pills; ~20% shorter (padding 7px→5px) */
.toolbar .idpill .seg,.toolbar .idpill .seg.ip,.toolbar .idpill .seg.grp{color:#fff;font-weight:800;background:transparent;border:none;border-radius:0;padding:5px 13px}
.toolbar .idpill .seg.desig{color:rgba(255,255,255,.9);font-weight:600;background:transparent;border:none;border-radius:0;padding:5px 13px}
.toolbar .idpill .sep{width:auto;margin:0;background:none;color:rgba(255,255,255,.55);font-weight:400;display:flex;align-items:center}/* "|" separator */
.toolbar .statuschip.ok,.toolbar .statuschip.bad{background:rgba(0,0,0,.24);color:#fff;border-color:rgba(255,255,255,.42);backdrop-filter:blur(2px)}

/* ============================ SITE FOOTER (matches hpfasinsights.com) ============================ */
.site-footer{background:var(--card);border-top:1px solid var(--line)}/* --card == site --surface (#FFF light / #12202C dark); full-width, at the true document bottom — revealed only on scroll to the end */
.sf-in{max-width:1220px;margin:0 auto;padding:11px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.sf-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sf-social{display:flex;gap:10px;align-items:center}
.sf-soc{width:32px;height:32px}
.sf-links{display:flex;gap:18px;flex-wrap:wrap}
.sf-links a{color:var(--muted);text-decoration:none;transition:color .2s}
.sf-links a:hover{color:var(--accent-deep)}
@media(max-width:640px){.sf-in{flex-direction:column;text-align:center;gap:10px}}
.brand{display:flex;align-items:center;gap:13px;flex:none;min-width:0}
.brand .logo{height:38px;width:auto;display:block}
html[data-mode="dark"] .brand .logo{filter:brightness(0) invert(1)}
.brand .vline{width:1px;height:34px;background:var(--line)}
.brand .tt{line-height:1.15;min-width:0;position:relative;padding-right:16px}
.brand .tt .eyebrow{font-size:9.5px;font-weight:800;letter-spacing:2.5px;color:var(--accent-deep);text-transform:uppercase}
.brand .tt .name{font-family:var(--disp);font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.2px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand .tt .name .calcchip{font-family:var(--body,inherit);font-size:11px;font-weight:700;letter-spacing:.2px;color:var(--accent-deep);background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent-deep) 35%,transparent);padding:2px 10px;border-radius:999px}
html[data-mode="dark"] .brand .tt .name .calcchip{color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,transparent)}
.brand .tt .name .beta{position:absolute;top:-12px;right:-6px;transform:rotate(-10deg);font-size:9px;font-weight:900;letter-spacing:1.5px;color:var(--gold-deep);background:color-mix(in srgb,var(--gold) 14%,transparent);border:1.5px solid var(--gold-deep);padding:2px 7px;border-radius:5px;text-transform:uppercase;pointer-events:none}
html[data-mode="dark"] .brand .tt .name .beta{color:var(--gold-2);border-color:var(--gold-2);background:color-mix(in srgb,var(--gold) 24%,transparent)}
.brand .tt .name .ver{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.2px}
.banner-mid{flex:1;display:flex;justify-content:center;gap:9px;flex-wrap:wrap;min-width:0;align-items:center}
.statuschip{font-size:10.5px;font-weight:700;letter-spacing:.2px;white-space:nowrap;padding:3px 12px;border-radius:var(--r-pill);align-items:center}
.statuschip.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 38%,transparent)}
.statuschip.bad{background:color-mix(in srgb,var(--bad,#d23f3f) 14%,transparent);color:var(--bad,#d23f3f);border:1px solid color-mix(in srgb,var(--bad,#d23f3f) 34%,transparent)}
.idchip{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);padding:6px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--ink);max-width:240px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-shadow:var(--shadow);transition:.2s}
html[data-mode="dark"] .idchip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--ink)}
.idchip .k{color:var(--accent-deep);font-weight:800;font-size:9.5px;letter-spacing:.6px;text-transform:uppercase}
.idchip svg{width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:2;flex:none}
.idchip.ph{opacity:.5;font-style:italic;font-weight:500}
.idpill{display:inline-flex;align-items:stretch;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);color:var(--ink);border-radius:var(--r-pill);box-shadow:var(--shadow);max-width:600px;overflow:hidden;animation:pop .26s ease}
.idpill .seg{display:flex;align-items:center;padding:7px 15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:600}
.idpill .seg.ip{color:var(--accent-deep);font-weight:800;letter-spacing:.3px}
.idpill .seg.grp{color:var(--accent-deep);font-weight:800;letter-spacing:.2px}
.idpill .seg.desig{color:var(--ink-2);max-width:260px}
.idpill .sep{width:1px;background:color-mix(in srgb,var(--accent) 32%,transparent);margin:5px 0}
.banner-right{flex:none;display:flex;align-items:center;gap:8px}
.tbtn{width:40px;height:40px;border-radius:7px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);display:grid;place-items:center;transition:.18s;box-shadow:var(--shadow)}/* square icon button */
html[data-mode="dark"] .tbtn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:var(--ink-2)}
.tbtn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.tbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}
.tbtn .swdot{width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ============================ DB CONTROLS ============================ */
.dbbar{display:flex;gap:7px;margin-bottom:13px}
.dbbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card-2);color:var(--ink-2);font-weight:700;font-size:12.5px;transition:.16s}
.dbbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.dbbtn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}
.dbbtn.danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.dbbtn:disabled,.dbbtn:disabled:hover{opacity:0.38;cursor:not-allowed;transform:none;border-color:var(--line);color:var(--ink-2);background:var(--card-2)}

/* combobox */
.combo{position:relative;margin-bottom:15px}
.combo>label{display:block;font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.combo input{width:100%;padding:11px 38px 11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card-2);color:var(--ink);font-size:13.5px;transition:.16s}
.combo input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--card)}
.combo .chev{position:absolute;right:12px;top:38px;width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
.combo .menu{position:absolute;top:calc(100% + 5px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--pop-shadow);max-height:280px;overflow-y:auto;z-index:50;display:none;padding:5px}
.combo.open .menu{display:block;animation:pop .15s ease}
.combo .opt{padding:9px 11px;border-radius:var(--r-xs);font-size:13px;display:flex;justify-content:space-between;gap:10px;align-items:center;transition:.1s}
.combo .opt:hover,.combo .opt.hl{background:var(--accent-soft)}
.combo .opt .nm{font-weight:600}.combo .opt .nm .bdg{font-size:9px;font-weight:800;color:#fff;background:var(--muted);border-radius:20px;padding:1px 6px;margin-left:6px}
.combo .opt .ip{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.combo .opt mark{background:var(--warn-soft);color:inherit;border-radius:3px}
.combo .none{padding:13px;text-align:center;color:var(--muted);font-size:12.5px}

/* progress */
.prog{margin-bottom:15px}
.prog .ptrack{height:8px;background:var(--card-2);border:1px solid var(--line-soft);border-radius:10px;overflow:hidden}
.prog .pfill{height:100%;width:0;background:linear-gradient(90deg,var(--g1) 0%,var(--g2) 45%,var(--g3) 78%,var(--g4) 100%);border-radius:10px;transition:width .55s cubic-bezier(.2,.7,.2,1)}/* themed gradient fill */
.prog .pmeta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.prog .pmeta .lbl{font-size:11px;font-weight:600;color:var(--muted)}
.prog .pmeta .pct{font-size:13px;font-weight:800;color:var(--accent);font-family:var(--disp)}
.input-top{position:sticky;top:0;z-index:20;background:var(--card);padding:12px 17px 4px;margin:0 -17px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.db-icon-btns{display:flex;gap:4px;flex-shrink:0}

/* ============================ INPUT SECTIONS ============================ */
.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:11px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.sec:hover{box-shadow:var(--shadow)}
.sec.activeSec{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.sec-head{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;user-select:none;background:var(--gradient);color:#fff}/* theme gradient-fill section header — height ~40px, ~25% shorter than the original 53px */
.sec-head .bdg{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.92);color:var(--accent-deep);font-family:var(--disp);font-weight:800;font-size:11px;display:grid;place-items:center;flex:none;transition:.2s}
.sec.complete .sec-head .bdg{background:#fff;color:var(--accent-deep)}
.sec-head .ttl{flex:1;font-family:var(--disp);font-weight:700;font-size:13.5px;color:#fff}
.sec-head .chk{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.6;opacity:0;transition:.2s}
.sec.complete .sec-head .chk{opacity:1}
.sec-head .caret{width:16px;height:16px;stroke:rgba(255,255,255,.9);fill:none;stroke-width:2;transition:transform .25s}
.sec.collapsed .sec-head .caret{transform:rotate(-90deg)}
.sec-body{padding:2px 14px 15px;border-top:1px solid var(--line-soft)}
.sec.collapsed .sec-body{display:none}

.f{margin-bottom:12px}.f:last-child{margin-bottom:2px}
.f>label,.f>.lbl{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.f>label .req,.f>.lbl .req{color:var(--accent);font-weight:800}
.f>label .on,.f>.lbl .on{font-weight:600;color:var(--accent-deep)}
.in{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card-2);color:var(--ink);font-size:13.5px;transition:.16s}
.in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:var(--card)}
.in.err,.in.fr22err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.in[readonly]{background:var(--card-2);cursor:default;color:var(--ink-2)}
.ctrl{position:relative}
.hint{font-size:10.5px;color:var(--muted);margin-top:4px}
.ferr{font-size:10.5px;color:var(--danger);margin-top:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* selection chips */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:7px 15px;border-radius:var(--r-pill);border:1.4px solid var(--line);background:var(--card-2);color:var(--ink-2);font-size:12.5px;font-weight:600;transition:.15s}
.chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 3px 9px var(--accent-soft)}
.chip.svc.on{background:var(--navy);border-color:var(--navy);color:#fff}
/* segmented selectable block — unified rounded container, connected partitions, pill-rounded outer corners */
.seg{display:inline-flex;border:1.4px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--card-2)}
.seg .sgi{padding:8px 16px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:transparent;border:0;border-right:1.4px solid var(--line);cursor:pointer;transition:.15s;white-space:nowrap}
.seg .sgi:first-child{border-top-left-radius:var(--r-pill);border-bottom-left-radius:var(--r-pill);padding-left:18px}
.seg .sgi:last-child{border-right:0;border-top-right-radius:var(--r-pill);border-bottom-right-radius:var(--r-pill);padding-right:18px}
.seg .sgi:hover{color:var(--accent)}
.seg .sgi.on{background:var(--accent);color:var(--on-accent)}
.seg.segfull{display:flex;width:100%}
.seg.segfull .sgi{flex:1 1 0;text-align:center;padding-left:8px;padding-right:8px}
/* GPF/NPS segmented label + adjacent input */
.gpfwrap{display:flex;align-items:stretch;gap:0;width:100%}
.gpfwrap .seg{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0;flex:none}
.gpfwrap .seg .sgi:last-child{border-top-right-radius:0;border-bottom-right-radius:0}
.gpfwrap .gpfnoin{flex:1;min-width:0;border-top-left-radius:0;border-bottom-left-radius:0}
html[data-mode="dark"] .chip.svc.on{background:#33406b;border-color:#33406b}

/* date input + icon */
.dwrap{position:relative}
.din{padding-right:40px}
.dico{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--muted)}
.dico:hover{background:var(--accent-soft);color:var(--accent-deep)}
.dico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
/* date quick chips (under field) */
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qchip{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-deep);background:var(--accent-soft);border-radius:var(--r-pill);padding:5px 11px;transition:.15s}
.qchip:hover{background:var(--accent);color:var(--on-accent)}
.qchip.on{background:var(--accent);color:var(--on-accent)}

/* scale picker button */
.sselbtn{display:flex;align-items:center;justify-content:space-between;text-align:left;font-family:var(--mono);font-size:12.5px}
.sselbtn .ph{color:var(--muted);font-family:var(--ui)}
.sselbtn svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex:none}
.sselbtn .val{flex:1;display:flex;align-items:center;justify-content:space-between;min-width:0;gap:0}
.sselbtn .rec-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* toggle switch */
.tgl{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.gpfno{font-size:12.5px;color:var(--muted);margin-left:2px}
.gpfnoin{flex:1;min-width:90px}
.tglrow{display:inline-flex;align-items:center;gap:9px}
.tglrow.optlock{opacity:.4;pointer-events:none}
.opt-msg{margin:2px 2px 0;font-size:12px;font-weight:600;color:var(--warn)}
.tglrow .tglno,.tglrow .tglyes{font-size:12.5px;font-weight:600;color:var(--muted);transition:color .15s}
.tglrow .tglno.on,.tglrow .tglyes.on{color:var(--accent-deep)}
/* event 2012-scale field is always shown (re-revision can occur alongside an event, so 2012 may differ from 2009) */
.tgl .tk{width:42px;height:23px;border-radius:30px;background:var(--card-2);position:relative;transition:.2s;border:1px solid var(--line)}
.tgl .tk::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s}
.tgl[aria-checked="true"] .tk{background:var(--accent);border-color:var(--accent)}
.tgl[aria-checked="true"] .tk::after{transform:translateX(19px)}

/* event cards */
.evk,.payk{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;background:var(--card-2);overflow:hidden;animation:pop .2s ease}
.evk .eh,.payk .eh{display:flex;align-items:center;gap:9px;padding:9px 11px;background:color-mix(in srgb,var(--accent) 6%,var(--card-2))}
.evk .eh .etag,.payk .eh .etag{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:3px 9px;border-radius:20px;color:#fff;background:var(--accent);flex:none}
.evk .eh .etag.svc{background:var(--navy)}
html[data-mode="dark"] .evk .eh .etag.svc{background:#3a4775}
.evk .eh b,.payk .eh b{flex:1;font-size:12.5px}
.evk .eh .ex,.payk .eh .ex,.evk .eh .lk,.payk .eh .lk{width:25px;height:25px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--muted);display:grid;place-items:center;font-size:15px;line-height:1;flex:none;cursor:pointer}
.evk .eh .ex:hover,.payk .eh .ex:hover{color:var(--danger);border-color:var(--danger)}
.evk .eh .lk svg,.payk .eh .lk svg{width:13px;height:13px}
.evk .eh .lk:hover,.payk .eh .lk:hover{color:var(--accent);border-color:var(--accent)}
.evk.locked .eh .lk,.payk.locked .eh .lk{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.evk.locked .eh .ex,.payk.locked .eh .ex{display:none}
/* b162: a LOCKED event/payment tile is not editable — its body ignores pointer input and dims
   slightly (the shut-padlock in the header already signals the state); unlock to edit again. */
.evk.locked .eb,.payk.locked .eb{pointer-events:none;opacity:.6}
/* b171 (#11): Step Up - Anomaly card — one bordered group per track, greyed with a reason when the
   group does not apply (see stepUpSync). */
.su-grp{border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 10px;margin-top:9px;background:var(--card-2)}
.su-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:7px}
.su-h .su-sub{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.su-note{font-size:10.5px;font-style:italic;color:var(--warn);margin:-3px 0 7px;display:none}
.su-grp.su-off{opacity:.5}
.su-grp.su-off .row2{pointer-events:none}
.su-grp.su-off .su-note{display:block}
/* b172: the Revised-pay dropdown adopts the standard field look (same box as .in, with the same
   chevron as the scale pickers) so the card's fields line up. */
select.in{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px 15px}
select.in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
/* b172 (Manu): the salutation selector matches a normal input's height — here and in Section A —
   the way the GPF selector does (it stretches inside .gpfwrap). */
.seg.seg-tall .sgi{padding-top:10px;padding-bottom:10px;font-size:13.5px}
.evk .eb,.payk .eb{padding:11px}
.betanote{background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:var(--r-xs);padding:9px 11px;font-size:11px;color:var(--ink-2);line-height:1.5}
.betanote b{color:var(--ink)}
.evnote{background:var(--card-2);border:1px solid var(--line-soft);border-radius:var(--r-xs);padding:9px 11px;font-size:11px;color:var(--ink-2);line-height:1.5}


/* ============================ DATE PICKER (uniform size) ============================ */
.dp{position:absolute;z-index:120;width:210px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--pop-shadow);padding:7px;display:none}/* compact (b155); .dp-body is a FIXED height and .dp-dow keeps its space via visibility, so day/month/decade views are all exactly the same size */
.dp.on{display:block;animation:pop .14s ease-out}
.dp-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:75%;max-height:75%;width:auto;height:auto;object-fit:contain;opacity:.075;pointer-events:none;z-index:-1;user-select:none}/* same asset + centring as .sheet-wm; 75% of the picker, behind the content (b156). Opacity .06→.075 = +25% (b157) */
.dp-h{display:flex;align-items:center;gap:3px;padding:0 0 3px;position:relative}
.dp-nav{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.dp-nav:hover{background:var(--accent-soft);color:var(--accent-deep)}
.dp-nav svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}
.dp-title{flex:1;text-align:center;font-weight:700;font-size:12.5px;color:var(--ink);padding:3px;border-radius:7px;font-family:var(--disp)}
.dp-title:hover{background:var(--accent-soft);color:var(--accent-deep)}
.dp-title .zh{display:block;font-size:8.5px;font-weight:700;letter-spacing:.09em;color:var(--accent-deep);text-transform:uppercase;margin-top:0}
.dp-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 1px}/* visibility (never display:none) so month/decade views keep this row's height */
.dp-dow span{text-align:center;font-size:9px;font-weight:700;color:var(--muted);padding:1px 0;text-transform:uppercase}
.dp-body{height:164px;display:flex;flex-direction:column}/* FIXED — the grid flexes to fill it, so every view is the same height */
.dp-grid{flex:1;display:grid;gap:2px;padding:1px}
.dp-grid.days{grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr}
.dp-grid.m4{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.dp-cell{border-radius:6px;font-size:11.5px;font-weight:500;display:flex;align-items:center;justify-content:center;color:var(--ink);font-variant-numeric:tabular-nums}
.dp-grid.m4 .dp-cell{font-size:12px;font-weight:600}
.dp-cell:hover{background:var(--accent-soft)}
.dp-cell.out{color:var(--muted);opacity:.55}
.dp-cell.dni{box-shadow:inset 0 0 0 1px var(--warn);color:var(--warn)}
.dp-cell.today{box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--accent-deep);font-weight:700}
.dp-cell.sel{background:var(--accent)!important;color:var(--on-accent)!important;font-weight:700}
.dp-cell[disabled]{color:var(--muted);opacity:.35;cursor:not-allowed;background:none!important;box-shadow:none}
.dp-cell.blank{pointer-events:none;opacity:0!important;background:none!important;box-shadow:none!important}
#dpExtChips{position:absolute;z-index:198;display:flex;flex-wrap:wrap;gap:6px;padding:6px 8px;background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-card);box-shadow:var(--shadow);display:none}
#dpExtChips button{font-size:11px;font-weight:700;color:var(--accent-deep);background:var(--accent-soft);border-radius:var(--r-pill);padding:5px 11px;font-variant-numeric:tabular-nums}
#dpExtChips button:hover{background:var(--accent);color:var(--on-accent)}
.rec-label-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.rec-label-row label{flex:1;display:inline;font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-bottom:0}
.rec-input-row{display:flex;gap:6px;align-items:stretch;margin-bottom:10px}
.rec-input-row .combo{flex:1;margin-bottom:0}
.rec-act-msg{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.04em;background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent);white-space:nowrap;flex-shrink:0;opacity:0;transition:opacity .4s}
.dp-f{display:flex;gap:6px;padding:6px 2px 0;border-top:1px solid var(--line-soft);margin-top:6px}
.dp-f button{font-size:11.5px;font-weight:700;color:var(--accent-deep);padding:5px 8px;border-radius:6px}
.dp-f button:hover{background:var(--accent-soft)}
.dp-f .sp{flex:1}.dp-f .clr{color:var(--danger)}

/* scale picker */
.sp-pop{position:absolute;z-index:120;width:min(390px,92vw);background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--pop-shadow);display:none;overflow:hidden}
.sp-pop.on{display:block;animation:pop .14s ease-out}
.sp-pop .srch{padding:9px;border-bottom:1px solid var(--line-soft)}
.sp-pop .srch input{width:100%;border:1px solid var(--line);border-radius:7px;padding:10px 12px;font-size:13px;background:var(--card-2);color:var(--ink)}
.sp-pop .srch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sp-pop .lst{max-height:270px;overflow:auto;padding:4px}
.sp-opt{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:9px 12px;font-size:13px;align-items:center;border-radius:var(--r-xs)}
.sp-opt .sl2{font-family:var(--mono);font-size:12.5px}
.sp-opt .lv{flex:none;font-size:10px;font-weight:800;color:var(--accent-deep);background:var(--accent-soft);border-radius:5px;padding:2px 7px}
.sp-opt:hover,.sp-opt.hi{background:var(--accent-soft)}
.sp-opt.cur{background:var(--accent);color:var(--on-accent)}.sp-opt.cur .lv{background:rgba(255,255,255,.2);color:#fff}
.sp-none{padding:14px;text-align:center;color:var(--muted);font-size:12.5px}

/* ============ b207: CALCULATOR PAD ============
   Deliberately built to the SAME visual contract as the date picker above (.dp): identical card,
   border, radius, padding, watermark treatment and key hover. Manu's instruction was one interface
   across the tool, so the two popups should be recognisably the same component family.
   It is NARROWER than the picker (176px vs 210px) because a keypad needs less room than a month
   grid, and Manu asked for it "as compact as you can". */
.calc{position:absolute;z-index:120;width:176px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--pop-shadow);padding:6px;display:none}
.calc.on{display:block;animation:pop .14s ease-out}
.calc-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:74%;max-height:74%;
  width:auto;height:auto;object-fit:contain;opacity:.075;pointer-events:none;z-index:0;user-select:none}
.calc-scr{position:relative;z-index:1;background:var(--elev);border-radius:7px;padding:5px 7px;margin-bottom:5px;
  height:48px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
/* The working figures sit faded; on = they clear and only the result remains, full strength (Manu). */
.calc-expr{font-family:var(--mono);font-size:9.5px;color:var(--muted);opacity:.62;width:100%;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.calc-disp{font-family:var(--mono);font-size:16px;color:var(--muted);opacity:.62;width:100%;text-align:right;
  white-space:nowrap;overflow:hidden;line-height:1.25;font-variant-numeric:tabular-nums}
.calc.done .calc-disp{color:var(--ink);opacity:1}
.calc.done .calc-expr{opacity:0}
.calc.oob .calc-disp{color:var(--danger)}
.calc.oob .calc-expr{opacity:1;color:var(--danger)}
.calc-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.ck{height:24px;min-width:0;border-radius:6px;font-family:var(--mono);font-size:12px;font-weight:500;
  color:var(--ink);display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.ck:hover,.ck.flash{background:var(--accent-soft)}
.ck.op{color:var(--accent-deep)}
.ck.clr{color:var(--danger)}
.ck.use{background:var(--accent);color:var(--on-accent)}
.ck.use:hover,.ck.use.flash{background:var(--accent-deep)}
.ck svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
/* the trigger, mirroring .dwrap/.dico so a numeric field reads like a date field */
.cwrap{position:relative}
.cico{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:7px;
  display:grid;place-items:center;color:var(--muted)}
.cico:hover{background:var(--accent-soft);color:var(--accent-deep)}
.cico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}
.cwrap .in{padding-right:38px}