/* Bluntrock brand styles: copied from tools/_brand.css (the 02 Final Look v2 design), then the live page's additions below */

*{box-sizing:border-box}
body{margin:0;font-family:'Figtree',system-ui,sans-serif;background:#FBF7EE;color:#2A2826}
a{color:#B8480F}a:hover{color:#8F3709}
.page{width:max-content;margin:0 auto}
.pg{width:1280px;padding:36px 48px 56px;display:flex;flex-direction:column;gap:26px}
.mono{font-family:'IBM Plex Mono',monospace}
.tabs{display:flex;gap:4px;align-items:flex-end}
.tab{padding:11px 20px;border-radius:10px 10px 0 0;background:#F0EADB;color:#6B6660;font-weight:600;font-size:14px;text-decoration:none;border:1px solid #E5DECE;border-bottom:none}
.tab.on{background:#2A2826;color:#FBF7EE;border-color:#2A2826;padding:12px 20px}
.tab.soon{border-style:dashed;background:#F4EFE3;color:#8A847B}
.tab small{font-weight:500;font-size:11px;margin-left:6px}
.mast{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:2px solid #2A2826;padding-bottom:18px;margin-top:-8px}
.brand{display:flex;align-items:center;gap:10px}.brand i{width:22px;height:22px;border-radius:5px;background:#F1BF40;display:block}
.brand span{font-size:13px;color:#6B6660;font-weight:600}
h1{margin:6px 0 4px;font-size:34px;font-weight:700;letter-spacing:-.015em}
.lede{font-size:13px;color:#6B6660}
.btn{min-height:44px;padding:0 14px;border-radius:8px;border:1px solid #E5DECE;background:#fff;color:#2A2826;font-family:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn.on{background:#2A2826;border-color:#2A2826;color:#FBF7EE;font-weight:600}
.btn.soft{background:#FBF7EE}
.btn.dd:after{content:"";width:0;height:0;border:4px solid transparent;border-top:5px solid #6B6660;margin-top:4px}
.btn.on.dd:after{border-top-color:#FBF7EE}
.btn.sm{min-height:34px;font-size:12px;padding:0 11px}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.stamp{font-size:12px;color:#6B6660}
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #E5DECE;border-radius:10px;padding:12px 16px}
.filters .lab{font-size:12px;font-weight:600;color:#6B6660;margin-right:4px}
.sep{width:1px;height:28px;background:#E5DECE;margin:0 4px}
.sec{display:flex;flex-direction:column;gap:12px}
.sh{display:flex;align-items:baseline;gap:12px}
h2{margin:0;font-size:19px;font-weight:700}
.sh span{font-size:12px;color:#6B6660}
.g{display:grid;gap:16px}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.card{background:#fff;border:1px solid #E5DECE;border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card.later{background:#F4EFE3;border:1px dashed #C9C1AE}
.k{font-size:12px;font-weight:600;color:#6B6660;display:flex;align-items:center;gap:6px}
.v{font-family:'IBM Plex Mono',monospace;font-size:27px;font-weight:600;letter-spacing:-.02em}
.v.s{font-size:24px}
.v.grey{color:#8A847B}
.cmp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap}
.up{background:#EDF3E4;color:#3A6320}.dn{background:#FBE9DF;color:#B8480F}
.prov{background:#FDF4DE;color:#6B5310;border:1px dashed #D9B646}
.soonp{background:#F4EFE3;color:#6B6660;border:1px dashed #C9C1AE}
.note{font-size:11px;color:#6B6660;line-height:1.45}
.split{display:flex;gap:10px;font-size:11px;color:#6B6660;font-family:'IBM Plex Mono',monospace}
.bar3{display:flex;gap:4px}.bar3 div{height:7px;border-radius:4px}
.ic{display:inline-flex;width:16px;height:16px;border-radius:50%;border:1.5px solid #8A847B;color:#6B6660;font-size:10px;font-weight:700;align-items:center;justify-content:center;font-family:Georgia,serif;font-style:italic;cursor:help}
.ex{display:inline-flex;width:16px;height:16px;border-radius:50%;background:#FDF4DE;border:1.5px solid #D9B646;color:#6B5310;font-size:10px;font-weight:700;align-items:center;justify-content:center;cursor:help}
.tbl{background:#fff;border:1px solid #E5DECE;border-radius:10px;overflow:hidden}
.tr{display:grid;font-family:'IBM Plex Mono',monospace;font-size:13px;border-bottom:1px solid #F0EADB}
.tr>div{padding:12px 10px;text-align:right}
.tr>div:first-child{text-align:left;padding-left:14px;font-family:'Figtree',sans-serif;font-weight:600;display:flex;align-items:center;gap:6px}
.tr.h{background:#F4EFE3;border-bottom:1px solid #E5DECE;font-family:'Figtree',sans-serif;font-size:12px;font-weight:600;color:#6B6660}
.tr.h>div:first-child{font-weight:600;color:#6B6660}
.tr.tot{background:#FDFBF6;border-bottom:2px solid #E5DECE;font-weight:600}
.tr.sub{background:#FDF8EC}.tr.sub>div:first-child{border-left:4px solid #F1BF40;padding-left:26px}
.mini{display:grid;font-size:12px;font-family:'IBM Plex Mono',monospace;color:#6B6660;padding:8px 0;border-bottom:1px solid #F4EFE3;align-items:center;gap:6px}
.mini.h{font-family:'Figtree',sans-serif;font-size:11px;font-weight:600;border-bottom:1px solid #E5DECE;padding:6px 0}
.mini .r,.r{text-align:right}
.lk{color:#2A2826;text-decoration:underline;text-decoration-color:#C9C1AE;text-underline-offset:3px;font-family:'Figtree',sans-serif;font-weight:500}
.lk:after{content:" \2197";color:#B8480F;font-size:11px}
.scroll{max-height:214px;overflow-y:auto;border:1px solid #F0EADB;border-radius:8px;padding:0 10px}
.tick{width:16px;height:16px;border:1.5px solid #C9C1AE;border-radius:4px;justify-self:end;cursor:pointer}.tick.done{background:#4A7C2A;border-color:#4A7C2A;box-shadow:inset 0 0 0 3px #fff}
.seg span{cursor:pointer}
.thr{min-height:34px;align-self:flex-start;padding:0 12px;border-radius:8px;border:1px dashed #C9C1AE;background:#FBF7EE;color:#6B6660;font-family:inherit;font-size:12px}
.count{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:600}
.foot{font-size:11px;color:#6B6660;border-top:1px solid #F0EADB;padding-top:8px;margin-top:auto}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#6B6660;align-items:center}
.sw{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.ln{display:inline-block;width:20px;margin-right:6px;vertical-align:middle;border-top:2.5px solid}
.tip{background:#2A2826;color:#FBF7EE;border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.45;box-shadow:0 6px 18px rgba(42,40,38,.18)}
.tip b{color:#F1BF40}
.seg{display:inline-flex;border:1px solid #E5DECE;border-radius:8px;overflow:hidden;background:#fff}
.seg span{padding:8px 12px;font-size:12px;color:#6B6660;border-right:1px solid #E5DECE}.seg span:last-child{border-right:none}
.seg span.on{background:#2A2826;color:#FBF7EE;font-weight:600}
.callout{background:#F4EFE3;border:1px dashed #C9C1AE;border-radius:10px;padding:14px 16px;font-size:12px;color:#6B6660;line-height:1.5}
.callout b{color:#2A2826}

/* ---------------------------------------------------------------- live page additions */
.pg{width:auto;max-width:1280px;margin:0 auto;padding:28px 32px 56px}
.page{width:auto}
body{-webkit-font-smoothing:antialiased}
button{font-family:inherit}
.hide{display:none!important}
.mast .right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.who{font-size:12px;color:#6B6660;display:flex;gap:8px;align-items:center}
.linkbtn{background:none;border:none;color:#B8480F;text-decoration:underline;cursor:pointer;font-size:12px;padding:0}
.health{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:#6B6660}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid #E5DECE;background:#fff;font-weight:600;font-size:12px;cursor:help}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:#8A847B}
.st-ok .dot,.dot.ok{background:#4A7C2A}.st-amber .dot,.dot.amber{background:#D9A21F}.st-red .dot,.dot.red{background:#E2611C}
.chip.st-red{border-color:#E2611C;color:#B8480F}.chip.st-amber{border-color:#D9B646;color:#6B5310}
.card.st-red{border:2px solid #E2611C}.card.st-amber{border:2px solid #D9B646}
.status{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px}
.status.red{color:#B8480F}.status.amber{color:#6B5310}.status.ok{color:#3A6320}
.packbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#F0EADB}
.packbar div{height:100%}
.legend2{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:#6B6660;font-family:'IBM Plex Mono',monospace}
.legend2 span{display:inline-flex;align-items:center;gap:4px}
.tr.oth{color:#6B6660}
.tr.unk>div:first-child{color:#B8480F}
.tr>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr>div:first-child{min-width:0}
.list{display:flex;flex-direction:column}
.list .mini{grid-template-columns:minmax(0,1fr) 70px 60px}
.list .mini>div:first-child{font-family:'Figtree',sans-serif;color:#2A2826;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart{width:100%;height:auto;display:block}
.chart text{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:#6B6660}
.loading{padding:40px;text-align:center;color:#6B6660;font-size:14px}
.err{background:#FBE9DF;border:1px solid #E2611C;color:#8F3709;border-radius:10px;padding:14px 16px;font-size:13px}
.custom{display:inline-flex;gap:6px;align-items:center;font-size:12px;color:#6B6660}
.custom input{min-height:34px;border:1px solid #E5DECE;border-radius:8px;padding:0 8px;font-family:inherit;font-size:12px;color:#2A2826}
.na{color:#8A847B;font-size:12px}
.ftable{width:100%;border-collapse:collapse;font-size:12px}
.ftable th{text-align:left;font-weight:600;color:#6B6660;padding:8px 6px;border-bottom:1px solid #E5DECE;background:#F4EFE3}
.ftable td{padding:8px 6px;border-bottom:1px solid #F0EADB}
.ftable td.f{font-family:'IBM Plex Mono',monospace;text-align:right}
.ftable th.f{text-align:right}

/* sign-in */
.signin{max-width:420px;margin:12vh auto;background:#fff;border:1px solid #E5DECE;border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:14px}
.signin h1{font-size:24px;margin:0}
.signin label{font-size:12px;font-weight:600;color:#6B6660}
.signin input{min-height:44px;border:1px solid #C9C1AE;border-radius:8px;padding:0 12px;font-size:15px;font-family:inherit;width:100%}
.signin input.code{font-family:'IBM Plex Mono',monospace;font-size:22px;letter-spacing:6px}
.signin .btn{justify-content:center}
.signin p{margin:0;font-size:13px;color:#6B6660;line-height:1.5}

@media (max-width:1000px){
  .c4,.c5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c3{grid-template-columns:minmax(0,1fr)}
  .mast{flex-direction:column;align-items:flex-start}
  .mast .right{align-items:flex-start}
}
@media (max-width:640px){
  .pg{padding:16px 16px 40px}
  .c2,.c4,.c5{grid-template-columns:minmax(0,1fr)}
  .tbl{overflow-x:auto}
  .tr{min-width:640px}
}

/* ---------------------------------------------------------------- mockup rebuild (8 Nov): tabs, filters, scroll tables, Settings */
#app{display:flex;flex-direction:column;gap:26px}
#app.hide{display:none!important}
.tab{cursor:pointer}
.sel{position:relative}
.sel select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;font-size:14px}
.btn.soft.dd.set{background:#2A2826;color:#FBF7EE;border-color:#2A2826}
.btn.soft.dd.set:after{border-top-color:#FBF7EE}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.scroll10{max-height:352px;overflow-y:auto;border:1px solid #F0EADB;border-radius:8px;padding:0 10px}
.scroll10 .mini:last-child{border-bottom:none}
.mini .nm{font-family:'Figtree',system-ui,sans-serif;color:#2A2826;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mini.tot{font-weight:600;color:#2A2826;border-top:2px solid #E5DECE;border-bottom:none}
.tick[aria-disabled]{opacity:.45;cursor:not-allowed}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#2A2826;color:#FBF7EE;border-radius:8px;padding:10px 16px;font-size:13px;z-index:20;box-shadow:0 6px 18px rgba(42,40,38,.25)}
.toast.bad{background:#8F3709}
.healthbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:#6B6660}
/* Settings */
.set-row{display:grid;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid #F4EFE3;font-size:12px}
.set-row.h{font-weight:600;color:#6B6660;border-bottom:1px solid #E5DECE}
.set-row input,.set-row select,.reason input,.addrow input,.addrow select{min-height:32px;border:1px solid #E5DECE;border-radius:6px;padding:0 8px;font-family:inherit;font-size:12px;color:#2A2826;background:#fff;width:100%;min-width:0}
.set-row .ex2{color:#6B6660;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-row.unm{background:#FDF8EC}
.reason{position:sticky;top:0;z-index:5;background:#FBF7EE;padding:10px 0;display:flex;gap:10px;align-items:center}
.reason input{max-width:520px;min-height:40px;font-size:13px}
.addrow{display:grid;gap:8px;align-items:center;margin-top:10px}
.scroll-set{max-height:420px;overflow-y:auto;border:1px solid #F0EADB;border-radius:8px;padding:0 10px}
/* hover box: the mockup's .tip, drawn by the page (browser tooltips don't show reliably in a frame) */
.hovertip{position:fixed;z-index:30;max-width:340px;pointer-events:none;white-space:pre-line;display:none}
[data-tip]{cursor:help}
.btn[data-tip],.tab[data-tip],.chip[data-tip]{cursor:pointer}
.btn[disabled][data-tip]{pointer-events:auto}

/* ---------------------------------------------------------------- layout pass (8 Nov): toolbar, compare switch, panels, trend */
#app{gap:18px}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px solid #E5DECE;border-radius:12px;padding:10px 12px}
.tsep{width:1px;height:28px;background:#E5DECE;margin:0 4px}
.cmpbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 10px;border-radius:999px;border:1px solid #2A2826;background:#2A2826;color:#FBF7EE;font-size:13px;cursor:pointer}
.cmpbtn .swap{display:inline-flex;width:24px;height:24px;border-radius:50%;background:#F1BF40;color:#2A2826;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:transform .25s}
.cmpbtn:hover .swap{transform:rotate(180deg)}
.cmpbtn .cl{color:#C9C1AE;font-size:12px}
.cmpbtn .cr{color:#C9C1AE;font-size:11px;font-family:'IBM Plex Mono',monospace}
.chipsel{position:relative;display:inline-flex;flex-direction:column;justify-content:center;min-height:40px;padding:2px 30px 2px 12px;border:1px solid #E5DECE;border-radius:10px;background:#FBF7EE;cursor:pointer;max-width:220px}
.chipsel:after{content:"";position:absolute;right:11px;top:50%;margin-top:-2px;border:4px solid transparent;border-top:5px solid #6B6660}
.chipsel .cl{font-size:10px;font-weight:600;color:#8A847B;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.chipsel .cv{font-size:13px;font-weight:600;color:#2A2826;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.chipsel.set{background:#FDF4DE;border-color:#D9B646}
.chipsel select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.datachip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#6B5310;background:#FDF4DE;border:1px dashed #D9B646;border-radius:999px;padding:4px 10px}
.panel{background:#fff;border:1px solid #E5DECE;border-radius:12px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panel.st-red{border:2px solid #E2611C}.panel.st-amber{border:2px solid #D9B646}
.ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid #F0EADB;padding-bottom:10px}
.ph h3{margin:0;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.ph .pn{font-size:12px;color:#8A847B}
.stats{display:grid;gap:0}
.stats.c4s{grid-template-columns:repeat(4,minmax(0,1fr))}.stats.c5s{grid-template-columns:repeat(5,minmax(0,1fr))}.stats.c2s{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
.stat{display:flex;flex-direction:column;gap:6px;padding:4px 16px;border-left:1px solid #F0EADB;min-width:0}
.stats .stat:first-child,.stats.c2s .stat:nth-child(odd){border-left:none;padding-left:0}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.cols3.w211{grid-template-columns:2fr 1fr 1fr;margin-bottom:6px}
.cols2{display:grid;grid-template-columns:1fr 2fr;gap:0}
.cols2.w32{grid-template-columns:3fr 2fr}
.cols3>.col,.cols2>.col{padding:0 16px;border-left:1px solid #F0EADB;display:flex;flex-direction:column;gap:8px;min-width:0}
.cols3>.col:first-child,.cols2>.col:first-child{border-left:none;padding-left:0}
.cols3>.col:last-child,.cols2>.col:last-child{padding-right:0}
.tbl.flat{border:none;border-radius:0}
.chline{font-size:11px;color:#6B6660;display:flex;align-items:center;gap:8px;justify-content:space-between;border-top:1px dashed #E5DECE;padding-top:8px;cursor:help}
.chline .status{cursor:pointer;font-size:11px}
.card.hovercard{position:relative}
svg.trend{display:block;width:100%;height:auto}
svg.trend .tcol{cursor:crosshair}
svg.trend .tcol:hover rect:nth-child(2){filter:brightness(.93)}
@keyframes pulse{0%{r:6;opacity:.7}100%{r:18;opacity:0}}
svg.trend #pulse .ring{animation:pulse 1.2s ease-out infinite}
@media (max-width:1000px){
  .stats.c4s,.stats.c5s{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px}
  .stats .stat:nth-child(odd){border-left:none;padding-left:0}
  .cols3,.cols3.w211,.cols2,.cols2.w32{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .cols3>.col,.cols2>.col{border-left:none;padding:0}
}

/* ---------------------------------------------------------------- round 3: logo, headings, period heading, compare switch, sparklines */
.mastl{display:flex;align-items:center;gap:16px}
.logo{width:64px;height:auto;display:block}
.logo.lg{width:96px;margin:0 auto 4px}
h1{font-size:32px;margin:0 0 4px}
.periodhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:4px}
.periodhead h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.periodhead span{font-size:13px;color:#6B6660}
h3.k{margin:0;font-size:12px;font-weight:600;color:#6B6660;display:flex;align-items:center;gap:6px}
.panel{margin-top:6px}
.ph{background:#FDF8EC;margin:-16px -18px 0;padding:12px 18px;border-radius:12px 12px 0 0;border-bottom:1px solid #EFE4C8;border-left:5px solid #F1BF40}
.ph h2{margin:0;font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.ph .pn{font-size:12px;color:#6B6660}
.cmpsw{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6B6660}
.cmpsw .cl{font-weight:600;color:#2A2826}
.cmpsw .opt{cursor:pointer;padding:2px 0}
.cmpsw .opt.on{color:#2A2826;font-weight:700;border-bottom:2px solid #F1BF40}
.cmpsw .sw{position:relative;width:52px;height:26px;border-radius:999px;border:1px solid #C9C1AE;background:#F4EFE3;cursor:pointer;padding:0}
.cmpsw .sw span{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#2A2826;color:#F1BF40;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:left .2s}
.cmpsw .sw.ly span{left:28px}
.chbar{margin-top:2px}
.chbar div{height:8px}
.chlegend{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:#6B6660;font-family:'IBM Plex Mono',monospace}
.chlegend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:middle}
svg.spark{display:block;width:100%;height:40px;cursor:help}

/* ---------------------------------------------------------------- round 4: sortable headers, dropdown, calendar */
.sortable{cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px;white-space:nowrap}
.sortable.r{justify-content:flex-end}
.sortable .arr{font-size:9px;color:#C9C1AE}
.sortable.on{color:#2A2826}
.sortable.on .arr{color:#B8860B}
.sortable:hover{color:#2A2826}
.toolbar{overflow:visible;position:relative;z-index:6}
.chipsel{overflow:visible}
.chipsel.open{background:#fff;border-color:#2A2826;box-shadow:0 0 0 2px rgba(241,191,64,.45)}
.ddpanel{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:260px;background:#fff;border:1px solid #E5DECE;border-radius:12px;box-shadow:0 12px 30px rgba(42,40,38,.18);padding:8px;cursor:default}
.ddpanel.wide{width:480px}
.ddsearch{width:100%;min-height:36px;border:1px solid #E5DECE;border-radius:8px;padding:0 10px;font-family:inherit;font-size:13px;margin-bottom:6px}
.ddhead,.ddrow{display:grid;grid-template-columns:minmax(0,1fr) 70px 90px;gap:8px;align-items:center}
.ddpanel:not(.wide) .ddrow{grid-template-columns:1fr}
.ddhead{font-size:10px;font-weight:600;color:#8A847B;text-transform:uppercase;letter-spacing:.04em;padding:4px 8px;border-bottom:1px solid #F0EADB}
.ddlist{max-height:300px;overflow-y:auto}
.ddrow{padding:7px 8px;border-radius:6px;font-size:13px;cursor:pointer}
.ddrow .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2A2826}
.ddrow .mono{font-size:12px;color:#6B6660}
.ddrow:hover{background:#FDF8EC}
.ddrow.on{background:#FDF4DE;font-weight:600}
.ddfoot{font-size:11px;color:#8A847B;padding:6px 8px 0;border-top:1px solid #F0EADB;margin-top:4px}
.mast>div:last-child{position:relative}
.custom{position:absolute;right:0;top:calc(100% + 4px);z-index:30}
.custom:empty{display:none}
.calpop{background:#fff;border:1px solid #E5DECE;border-radius:12px;box-shadow:0 12px 30px rgba(42,40,38,.18);padding:12px 14px;width:540px}
.calnav{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#6B6660;margin-bottom:8px}
.cmonths{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cmh{font-size:13px;font-weight:700;text-align:center;margin-bottom:6px}
.cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cgrid b{font-size:10px;font-weight:600;color:#8A847B;padding:4px 0}
.cday{border:none;background:none;border-radius:6px;height:30px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#2A2826;cursor:pointer}
.cday:hover:not([disabled]){background:#FDF8EC}
.cday.inr{background:#FDF4DE;border-radius:0}
.cday.edge{background:#2A2826;color:#FBF7EE;border-radius:6px}
.cday[disabled]{color:#D6D0C4;cursor:not-allowed}
.calfoot{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid #F0EADB;font-size:12px}
@media (max-width:640px){.calpop{width:300px}.cmonths{grid-template-columns:1fr}.ddpanel.wide{width:300px}}

/* ---------------------------------------------------------------- the Period dropdown; a proper divide under the period heading */
.periodhead{padding:4px 0 14px;margin-bottom:6px;border-bottom:2px solid #2A2826}
#view>.periodhead+.g{margin-top:12px}
.pchip{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 36px 0 14px;border:1px solid #2A2826;border-radius:10px;background:#fff;cursor:pointer}
.pchip:after{content:"";position:absolute;right:14px;top:50%;margin-top:-2px;border:5px solid transparent;border-top:6px solid #2A2826}
.pchip .cl{font-size:10px;font-weight:600;color:#8A847B;text-transform:uppercase;letter-spacing:.04em}
.pchip .cv{font-size:14px;font-weight:700}
.pchip .pd{font-size:12px;color:#6B6660;font-family:'IBM Plex Mono',monospace}
.pchip.open{box-shadow:0 0 0 2px rgba(241,191,64,.5)}
.pppanel{position:absolute;right:0;top:calc(100% + 6px);z-index:50;display:grid;grid-template-columns:230px minmax(320px,1fr);background:#fff;border:1px solid #E5DECE;border-radius:12px;box-shadow:0 14px 34px rgba(42,40,38,.2);cursor:default;text-align:left}
.ppleft{display:flex;flex-direction:column;padding:8px;border-right:1px solid #F0EADB}
.pprow{display:flex;align-items:center;justify-content:space-between;gap:8px;border:none;background:none;text-align:left;padding:9px 10px;border-radius:8px;font-family:inherit;font-size:13px;color:#2A2826;cursor:pointer}
.pprow:hover{background:#FDF8EC}
.pprow.on{background:#2A2826;color:#FBF7EE;font-weight:600}
.pprow .ppdates{font-size:10px;color:#8A847B;font-family:'IBM Plex Mono',monospace}
.pprow.on .ppdates{color:#C9C1AE}
.pprow .chev{font-size:16px;color:#8A847B}
.ppright{padding:12px 14px;max-height:420px;overflow-y:auto;min-width:320px}
.ppright .calpop{border:none;box-shadow:none;padding:0;width:520px}
.ppyear{margin-bottom:10px}
.ppyear b{display:block;font-size:12px;color:#6B6660;margin-bottom:6px}
.ppgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ppgrid.q{grid-template-columns:repeat(4,1fr)}
.ppcell{border:1px solid #E5DECE;background:#FBF7EE;border-radius:8px;padding:8px 0;font-family:inherit;font-size:12px;cursor:pointer}
.ppcell:hover{border-color:#2A2826}
.ppcell.on{background:#2A2826;color:#FBF7EE;border-color:#2A2826;font-weight:600}
.pphint{font-size:12px;color:#8A847B;padding:6px 0}
@media (max-width:760px){.pppanel{grid-template-columns:1fr;right:auto;left:0}.ppleft{border-right:none;border-bottom:1px solid #F0EADB}.ppright .calpop{width:auto}}
/* ---------------------------------------------------------------- spacing between sections */
#view{display:flex;flex-direction:column;gap:32px}
#view>.periodhead{margin-bottom:-12px}            /* the period heading sits with its cards, the divide still shows */
#view>.panel{margin-top:0}
.panel{gap:16px;padding:18px 20px 22px}
.ph{margin:-18px -20px 2px}
#view>.note{margin-top:-16px}

/* ---------------------------------------------------------------- the filter row stays at the top while scrolling; Period at its right end */
#filters{position:sticky;top:0;z-index:25;margin:0 -6px;padding:8px 6px;background:linear-gradient(#FBF7EE 85%,rgba(251,247,238,0))}
#filters:empty{display:none}
#filters .toolbar{box-shadow:0 4px 14px rgba(42,40,38,.08)}
#filters .pchip{min-height:40px;border-color:#2A2826}
#filters .pppanel{right:0;left:auto}
#periods .datachip{margin-top:4px}

/* ---------------------------------------------------------------- critique fixes */
.cmpsw .opt{color:#3F3B36}                       /* the off label readable, not faded */
.cmpsw .opt.on{color:#2A2826}
.seclinks{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px 4px 0;font-size:12px}
.seclinks a{color:#2A2826;text-decoration:none;font-weight:600;padding:2px 2px;border-bottom:2px solid transparent}
.seclinks a:hover{border-bottom-color:#F1BF40}
.seclinks span{color:#B5AD9C}
.panel{scroll-margin-top:110px}
.periodhead .todate{font-size:13px;font-weight:600;color:#6B6660;letter-spacing:0;margin-left:6px;padding:2px 8px;border:1px solid #D8D0BE;border-radius:999px;vertical-align:middle}
.sprange{display:flex;justify-content:space-between;font-size:10px;color:#8A847A;margin-top:2px}
#filters{background:#FBF7EE;padding-bottom:8px;border-bottom:1px solid #E5DECE}
.seclinks{padding:8px 4px 0}