:root{--ink:#1c2430;--muted:#5e6b7a;--line:#dde3ea;--bg:#f5f7fa;--card:#fff;--brand:#1f3a5f;--brand2:#2d5a8c;
--ok:#1e7a46;--okbg:#e5f4ea;--warn:#9a6700;--warnbg:#fff4d6;--bad:#b42318;--badbg:#fde8e6;--wk:#f0f2f5}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--brand2);text-decoration:none}a:hover{text-decoration:underline}
header{background:var(--brand);color:#fff}
header .in{max-width:1280px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:18px;min-height:52px;flex-wrap:wrap}
header .logo{font-weight:700;letter-spacing:.5px;color:#fff}
header nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
header nav a{color:#dbe6f3;padding:6px 10px;border-radius:6px}
header nav a:hover,header nav a.on{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
header .who{font-size:13px;color:#dbe6f3;display:flex;gap:10px;align-items:center}
header .who button{background:none;border:1px solid rgba(255,255,255,.4);color:#fff;border-radius:6px;padding:3px 9px;cursor:pointer}
main{max-width:1280px;margin:0 auto;padding:20px 16px 60px}
h1{font-size:22px;margin:0 0 4px}h2{font-size:16px;margin:26px 0 10px}
.sub{color:var(--muted);margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px}
.stat .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:24px;font-weight:600;margin-top:4px}
table{border-collapse:collapse;width:100%;background:var(--card)}
th,td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;background:#fafbfc;font-weight:600}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin-bottom:16px}
.tablewrap table{border:0}
tr:last-child td{border-bottom:0}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:10px}
.flash.ok{background:var(--okbg);color:var(--ok)}.flash.error{background:var(--badbg);color:var(--bad)}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;background:#eef1f5;color:var(--muted)}
.pill.draft{background:#eef1f5}.pill.submitted{background:#e3edfb;color:#1d4ed8}
.pill.approved{background:var(--okbg);color:var(--ok)}.pill.rejected{background:var(--badbg);color:var(--bad)}
.pill.pending_loan{background:var(--warnbg);color:var(--warn)}
.hot{background:var(--badbg)!important;color:var(--bad);font-weight:600}
.warm{background:var(--warnbg)!important;color:var(--warn)}
.good{color:var(--ok)}
.muted{color:var(--muted)}
input,select,textarea{font:inherit;padding:6px 8px;border:1px solid #c5ced8;border-radius:6px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #9cc0ea;border-color:var(--brand2)}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px;font-weight:600}
.form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:end}
.form .wide{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%}
.btn{display:inline-block;background:var(--brand2);color:#fff;border:0;border-radius:7px;padding:8px 14px;font-weight:600;cursor:pointer;font-size:14px}
.btn:hover{background:var(--brand);text-decoration:none}
.btn.sec{background:#fff;color:var(--brand2);border:1px solid #c5ced8}
.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}
.btn.sm{padding:4px 10px;font-size:13px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
/* timesheet grid */
.ts td,.ts th{padding:4px 5px}
.ts select{max-width:100%}
.ts .proj{min-width:230px}.ts .ph{min-width:150px}
.ts input.h{width:62px;text-align:right;padding:5px 6px}
.ts .we{background:var(--wk)}
.ts th.day{text-align:center;min-width:70px}
.ts th.day small{display:block;font-weight:400;text-transform:none;letter-spacing:0}
.ts tfoot td{font-weight:600;background:#fafbfc}
.ts td.ro{text-align:right;min-width:62px}
.ts tr.otrow td:first-child{border-left:3px solid #e0a100}
.bar{height:8px;background:#e9edf2;border-radius:6px;overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--brand2)}
.bar i.hot{background:var(--bad)!important}.bar i.warm{background:#e0a100!important}
.stat .v.hot{background:none!important}
.stat small.hot{background:var(--badbg)!important}
.login{max-width:360px;margin:9vh auto}
.note{background:#f1f6fc;border:1px solid #d6e4f5;color:#244a74;border-radius:8px;padding:10px 14px;margin-bottom:14px}
details summary{cursor:pointer;color:var(--brand2);font-weight:600}
@media (max-width:700px){header .who{width:100%;justify-content:flex-end;padding-bottom:6px}}
@media print{header,.noprint{display:none}}
/* v2 */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:0 0 18px}
.tabs a{padding:8px 14px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;color:var(--muted);font-weight:600}
.tabs a.on{background:var(--card);border-color:var(--line);color:var(--ink);margin-bottom:-1px}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.banner{background:var(--badbg);color:var(--bad);border-bottom:1px solid #f3c4bf}
.banner .in{max-width:1280px;margin:0 auto;padding:9px 16px;font-weight:600}
.banner a{color:var(--bad);text-decoration:underline}
.ts th.n2{font-size:10px;padding:2px 3px;text-align:center}
.ts input.h{width:52px}
.ts input.h.ot{background:#fff8e6;border-color:#e8cf8f}
.ts input.h[readonly]{background:#eef0f3;border-color:#dde3ea;color:#9aa4af;cursor:not-allowed}
.ts td.dn{border-left:1px solid var(--line)}
.ts .bld{min-width:120px}
.pill.auto_approved{background:var(--warnbg);color:var(--warn)}
.st-ok{background:var(--okbg);color:var(--ok);border-radius:8px;padding:8px 12px;display:flex;gap:8px;align-items:center}
.st-bad{background:var(--badbg);color:var(--bad);border-radius:8px;padding:8px 12px;display:flex;gap:8px;align-items:center}
.board{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.hbars td{padding:5px 9px}
.sumline{font-weight:600}
.sumline.bad{color:var(--bad)}.sumline.good{color:var(--ok)}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
.perm-grid label{display:flex;gap:6px;align-items:center;font-weight:400;color:var(--ink);font-size:13px}
.perm-grid input{width:auto}
/* v2 */
.badge{display:inline-block;background:#e0a100;color:#1c2430;border-radius:99px;font-size:11px;font-weight:700;padding:0 6px;margin-left:2px}
.reminder{background:#fff4d6;color:#7a5200;border-bottom:1px solid #f0d890}
.reminder .in{max-width:1280px;margin:0 auto;padding:8px 16px;font-weight:600}
.pill.auto_approved{background:#fff4d6;color:#9a6700}
.ts th.sub{font-size:10px;text-align:center;padding:2px}
.ts td.ot,.ts th.ot{background:#fffaf0}
.ts td.ot.we,.ts th.ot.we{background:#f3efe6}
.ts input.h{width:42px;padding:5px 3px}
.ts input.locked{background:#eef0f3;color:#9aa3ad;border-color:#dfe3e8}
.ts .proj{width:190px}.ts .ph{width:130px}.ts .bsel{width:95px}
.ts td,.ts th{padding:3px 3px}
main.wide{max-width:1400px}
.ts.nob .bcol{display:none}
.ts td.ro{min-width:40px}
.board{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:block;border-radius:8px;padding:6px 10px;font-size:13px;min-width:170px;color:inherit;border:1px solid transparent}
.chip small{display:block;font-size:11px;opacity:.85}
.chip.green{background:var(--okbg);color:var(--ok);border-color:#bfe3cb}
.chip.red{background:var(--badbg);color:var(--bad);border-color:#f5c2bd}
a.chip:hover{text-decoration:none;filter:brightness(.97)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs a{padding:8px 14px;border-radius:8px 8px 0 0;color:var(--muted);font-weight:600}
.tabs a.on{background:var(--card);border:1px solid var(--line);border-bottom-color:var(--card);margin-bottom:-1px;color:var(--ink)}
.tabs a:hover{text-decoration:none;color:var(--ink)}
.chk{display:flex;gap:6px;align-items:flex-start;font-weight:400;color:var(--ink);font-size:13px;margin:4px 0}
.chk input{width:auto!important;margin-top:2px}
.chk.role{color:var(--muted)}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px 16px}
.sumok{color:var(--ok);font-weight:600}.sumbad{color:var(--bad);font-weight:600}
.money td.n{white-space:nowrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 16px}
.kv div:nth-child(odd){color:var(--muted)}
.vbars{display:flex;align-items:flex-end;gap:4px;height:110px;padding-top:6px}
.vbars .c{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:14px}
.vbars .b{width:100%;background:var(--brand2);border-radius:3px 3px 0 0;position:relative}
.vbars .b .o{position:absolute;left:0;right:0;top:0;background:#e0a100;border-radius:3px 3px 0 0}
.vbars small{font-size:10px;color:var(--muted);margin-top:3px;white-space:nowrap}
/* v3 */
.ts th.hol{background:#fdecec!important;color:#9b1c1c}
.ts tr.leaverow td{background:#f1f6fc;color:#244a74}
.pill.pending{background:#e3edfb;color:#1d4ed8}.pill.pending_manager,.pill.pending_hr{background:#e3edfb;color:#1d4ed8}
.pill.cancelled{background:#eef1f5;color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .d{border:1px solid var(--line);border-radius:6px;padding:4px 6px;min-height:58px;font-size:12px;background:var(--card)}
.cal .d.we{background:var(--wk)}.cal .d.hol{background:#fdecec}.cal .d.abs{background:var(--badbg);border-color:#f5c2bd}
.cal .d.lv{background:#f1f6fc}.cal .d b{font-size:13px}
.score{font-weight:700;font-size:15px}
.rank{display:inline-block;width:24px;height:24px;border-radius:50%;background:#eef1f5;text-align:center;line-height:24px;font-weight:700;font-size:12px}
.rank.r1{background:#f6d365;color:#5a4000}.rank.r2{background:#dfe4ea}.rank.r3{background:#e8c39e}
.verdict{display:inline-block;padding:2px 10px;border-radius:99px;font-weight:700;font-size:12px}
.verdict.Keep{background:var(--okbg);color:var(--ok)}.verdict.Watch{background:var(--warnbg);color:var(--warn)}.verdict.Review{background:var(--badbg);color:var(--bad)}
.verdict.New{background:#eef1f5;color:var(--muted)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:14px}
.filters label{margin:0}
.payslip td{padding:6px 10px}.payslip tr.total td{font-weight:700;border-top:2px solid var(--ink)}

/* v3.1: logo, notifications */
header .logo{display:flex;align-items:center;gap:8px;text-decoration:none!important}
header .logo img{height:26px;width:auto;display:block}
header .logo span{font-weight:600;font-size:14px;color:#dbe6f3;letter-spacing:.3px}
header .bell{position:relative;color:#dbe6f3;display:inline-flex;align-items:center;padding:4px}
header .bell:hover{color:#fff}
header .bell .badge{position:absolute;top:-4px;right:-8px}
.notes .note{display:flex;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.notes .note:last-child{border-bottom:0;padding-bottom:0}
.notes .note .t{flex:1}
.notes .note .dot{width:8px;height:8px;border-radius:50%;background:var(--brand2);flex:none}
/* Urgency: red = deadline passed, amber = due today / needs attention now, blue = routine, grey = for information */
.notes .note.u-red .dot{background:#d6293e}
.notes .note.u-red .t{color:#b3212f;font-weight:700}
.notes .note.u-amber .dot{background:#eb6834}
.notes .note.u-amber .t{color:#a85018;font-weight:600}
.notes .note.u-blue .dot{background:#2b6cb0}
.notes .note.u-grey .dot{background:#9aa5b1}
.notes .note.u-grey .t{color:var(--muted)}
header .bell .badge.red{background:#d6293e;color:#fff}
.login-logo{display:block;margin:0 auto 14px;height:60px;background:var(--brand);padding:10px 16px;border-radius:10px;box-sizing:content-box}
/* v3.1: charts */
.viz{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px 10px;margin-bottom:16px}
.viz .chart{width:100%;min-height:40px}
.viz svg{display:block;max-width:100%;font-family:inherit}
.viz svg text{font-variant-numeric:tabular-nums}
.viz-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:0 0 8px}
.viz-legend i,.viz-dlegend i,.viz-tip i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.viz-donut{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.viz-dlegend{flex:1;min-width:220px;font-size:13px}
.viz-dlegend div{display:flex;gap:8px;align-items:center;padding:3px 0;border-bottom:1px solid var(--line)}
.viz-dlegend div:last-child{border-bottom:0}
.viz-dlegend span{flex:1}.viz-dlegend b{font-weight:600;font-variant-numeric:tabular-nums}
.viz-dlegend small{color:var(--muted);width:42px;text-align:right;font-variant-numeric:tabular-nums}
.viz-tip{position:fixed;z-index:50;display:none;pointer-events:none;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 6px 20px rgba(20,30,45,.14);padding:8px 10px;font-size:12px;min-width:150px;max-width:320px}
.viz-tip .r{display:flex;gap:6px;align-items:center;margin-top:4px}.viz-tip .r span{flex:1;color:var(--muted)}
.viz-tip .x{margin-top:6px;color:var(--muted);border-top:1px solid var(--line);padding-top:5px}
.viz-details{margin-top:8px}
.viz-details summary{cursor:pointer;color:var(--brand2);font-size:13px;font-weight:600;padding:4px 0;user-select:none}
.viz-details[open] summary{margin-bottom:8px}
.viz-details .tablewrap{margin-bottom:6px}
.viz h2,.viz h3{margin:0 0 10px}
.viz .note{font-size:13px;color:var(--muted);margin:6px 0 0}

/* birthday greeting */
.bday-overlay{position:fixed;inset:0;z-index:200;background:rgba(20,30,45,.55);display:flex;align-items:center;justify-content:center;animation:bdayFade .2s ease}

/* v3.2: login page layout + small animated corner brand mark */
@keyframes compassSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes compassPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.login-container{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:100vh;justify-content:center;padding:20px}
.login{max-width:360px;width:100%;margin:0;box-shadow:0 4px 24px rgba(20,30,45,.1)}
.login-content{display:flex;flex-direction:column}
.login-brand{width:100%;max-width:360px;display:flex;justify-content:flex-end;align-items:center;gap:6px;padding:0 4px}
.compass-animated.small{width:22px;height:22px;animation:compassSpin 12s linear infinite;filter:drop-shadow(0 1px 3px rgba(31,58,95,.2))}
.compass-animated.small:hover{animation:compassPulse .4s ease-in-out, compassSpin 8s linear infinite}
.login-brand-name{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.3px}
@media (max-width:700px){
  .login-container{gap:8px;padding:16px}
  .login{max-width:100%}
  .login-brand{max-width:100%}
}
.bday-balloons{position:absolute;inset:0;font-size:38px;display:flex;justify-content:space-around;align-items:flex-end;overflow:hidden;pointer-events:none;line-height:1;animation:bdayFloat 5s ease-in infinite}
.bday-card{position:relative;background:#fff;border-radius:14px;padding:28px 32px;max-width:360px;text-align:center;box-shadow:0 20px 60px rgba(20,30,45,.3)}
.bday-card h2{margin:0 0 8px;font-size:22px}
.bday-card p{margin:0 0 16px;color:var(--muted)}
@keyframes bdayFade{from{opacity:0}to{opacity:1}}
@keyframes bdayFloat{0%{transform:translateY(30vh);opacity:0}10%{opacity:1}100%{transform:translateY(-110vh);opacity:1}}


/* module switches */
.switches .sw-row{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.switches .sw-row:first-of-type{border-top:0}
.switches .sw-row.child{padding-left:34px}
.switches .sw-row.dim{opacity:.5}
.switches .sw-text{flex:1;font-size:14px}.switches .sw-text .muted{font-size:13px}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none;margin:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#c5ced8;border-radius:24px;transition:.15s;cursor:pointer}
.switch .slider:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.15s}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider:before{transform:translateX(18px)}
.switch input:disabled + .slider{cursor:not-allowed;opacity:.45}
.switch input:focus-visible + .slider{outline:2px solid #9cc0ea}

/* info tooltips: a small blue "i" - hover, focus (keyboard) or tap */
.info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#2b6cb0;color:#fff;
  font:italic 700 11px/1 Georgia,serif;cursor:help;position:relative;vertical-align:1px;margin-left:5px;flex:none}
.info .tip{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:260px;background:#1c2430;color:#fff;
  font:400 13px/1.4 "Segoe UI",system-ui,sans-serif;font-style:normal;padding:8px 10px;border-radius:7px;z-index:50;text-align:left;
  box-shadow:0 6px 20px rgba(0,0,0,.2)}
.info:hover .tip,.info:focus .tip,.info:focus-within .tip{display:block}

/* appraisals */
.appr td.crit{min-width:260px}
.appr .cat td{background:#f3f6fa;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.scores{display:inline-flex;gap:2px}
.scores label{margin:0;display:inline-block}
.scores input{position:absolute;opacity:0;width:0;height:0}
.scores span{display:inline-block;min-width:28px;padding:4px 0;text-align:center;border:1px solid #c5ced8;border-radius:6px;cursor:pointer;
  font-weight:600;color:var(--muted);background:#fff;font-size:13px}
.scores input:checked + span{background:var(--brand2);border-color:var(--brand2);color:#fff}
.scores input:focus-visible + span{outline:2px solid #9cc0ea}
.scores input:disabled + span{cursor:default;opacity:.7}
.scores .na{min-width:34px;font-weight:400}
.scorebox{font-size:30px;font-weight:700;line-height:1}
.rating{display:inline-block;padding:3px 10px;border-radius:99px;font-weight:600;font-size:13px;background:#eef1f5}
.rating.r5{background:var(--okbg);color:var(--ok)}.rating.r4{background:#e3f1ec;color:#1e7a46}
.rating.r3{background:#e3edfb;color:#1d4ed8}.rating.r2{background:var(--warnbg);color:var(--warn)}.rating.r1{background:var(--badbg);color:var(--bad)}
.selfcol{color:var(--muted);text-align:center;font-weight:600}
.facts .k{font-size:12px;color:var(--muted)}.facts .v{font-size:18px;font-weight:600}
.facts{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
@media (max-width:700px){           /* phones: each criterion becomes a small card, no sideways scrolling */
  .tablewrap.appr{overflow:visible}
  .appr table,.appr tbody,.appr tr,.appr td{display:block;width:100%}
  .appr tr:first-child{display:none}
  .appr tr{border-bottom:1px solid var(--line);padding:6px 0}
  .appr td{border:0;padding:3px 10px;text-align:left!important}
  .appr td.n{display:none}
  .appr td[data-label]:before{content:attr(data-label);display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
  .appr .cat td{padding:6px 10px}
  .scores span{min-width:36px;padding:7px 0}
  .info .tip{left:auto;right:-10px;transform:none;width:230px}
}

/* v3.5 licence page + banner */
.lic th{text-align:left;font-weight:500;color:var(--muted);padding:5px 18px 5px 0;vertical-align:top}
.lic td{padding:5px 0}
.pill.red{background:var(--badbg);color:var(--bad)}.pill.amber{background:var(--warnbg);color:var(--warn)}
.pill.muted{opacity:.55}
.flash.warn{background:var(--warnbg);color:var(--warn)}
/* v3.5: overtime that is open (normal hours complete, or a weekend/holiday) is light blue; darker once hours are in */
.ts input.h.o.otopen{background:#e6f1ff;border-color:#9cc3f0}
.ts input.h.o.otopen.filled{background:#cfe3ff;border-color:#6aa2e6;font-weight:600}
.ts td.ro.ot.has{background:#dcebff;font-weight:600}
/* v3.5: multi-assign + grouped assignments */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;max-height:260px;overflow:auto;
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff}
.pickgrid label{display:flex;gap:6px;align-items:center;font-weight:400;color:var(--ink);font-size:13px;margin:0}
.pickgrid input{width:auto}
.agroups tr.agroup{cursor:pointer;background:#f6f8fb}
.agroups tr.agroup:hover{background:#eef3f9}
.agroups .caret{display:inline-block;width:12px;color:var(--brand2)}
.pickgrid label[hidden]{display:none}
/* v3.5: bell preview + mark read */
.bellwrap{position:relative;display:inline-flex}
.bellpop{display:none;position:absolute;right:-60px;top:100%;margin-top:6px;width:380px;max-width:92vw;max-height:70vh;overflow:auto;
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(15,30,50,.18);
  padding:10px 14px;z-index:50;font-size:13px;text-align:left}
.bellpop::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.bellwrap:hover .bellpop,.bellwrap:focus-within .bellpop{display:block}
.bellpop .note{padding:7px 0}
.bellpop a:not(.btn){color:var(--brand2)}
.notes .note .mr{padding:2px 8px}
@media (max-width:700px){.bellpop{right:-120px}}
/* v3.5: my history */
details.hist{padding:10px 16px}
details.hist summary{display:flex;gap:8px;align-items:center;list-style:revert}
details.hist .yr{margin:14px 0 6px;font-size:14px}