/* Del Prado Radar 1.4: the visual system and typography of Radar by Yoni (Inter Tight + Inter), wearing the Del Prado brand colors (brand manual: Pantone 287 C / 354 C). */
@font-face{font-family:"Inter Tight";src:url("fonts/inter-tight.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
:root{
  --brand:#002F87; --brand-2:#00236A; --accent:#1F55D1; --accent-ink:#fff;
  --bg:#EEF2F8; --surface:#fff; --surface-2:#F6F8FC;
  --ink:#0B1220; --ink-2:#334155; --muted:#5B6679; --line:#E2E8F0; --line-2:#CBD5E1;
  --warn:#C2410C; --warn-soft:#FFEDD5; --pred:#5B21B6; --pred-soft:#EDE9FE;
  --act:#047857; --act-soft:#D1FAE5; --good:#00AE42; --good-ink:#047857;
  --err:#B91C1C; --err-soft:#FEE2E2; --link:#1D4ED8;
  --radius:20px; --radius-s:12px;
  --shadow:0 1px 2px rgba(11,18,32,.04),0 4px 16px rgba(11,18,32,.05);
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --num:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --control:44px;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0F1A; --surface:#121A2A; --surface-2:#182236; --ink:#EEF2F8; --ink-2:#C7D0DE; --muted:#93A0B5;
  --line:#243049; --line-2:#33415E; --warn-soft:#3A2412; --pred-soft:#2A1F4A; --act-soft:#0F2E24; --err-soft:#3B1A1A;
  --good-ink:#6EE7B7; --err:#FCA5A5; --warn:#FDBA74; --pred:#C4B5FD; --act:#6EE7B7; --link:#93C5FD; --shadow:none; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0A0F1A; --surface:#121A2A; --surface-2:#182236; --ink:#EEF2F8; --ink-2:#C7D0DE; --muted:#93A0B5;
  --line:#243049; --line-2:#33415E; --warn-soft:#3A2412; --pred-soft:#2A1F4A; --act-soft:#0F2E24; --err-soft:#3B1A1A;
  --good-ink:#6EE7B7; --err:#FCA5A5; --warn:#FDBA74; --pred:#C4B5FD; --act:#6EE7B7; --link:#93C5FD; --shadow:none; color-scheme:dark;}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--link)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.2;font-weight:700}
h1{font-size:30px;font-weight:800;margin:0}
h2{font-size:18px;margin:0}
h3{font-size:15px;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}.small{font-size:13px}.small-note{font-size:13px}
.lead{color:var(--ink-2);font-size:16px;margin:6px 0 0}
.num-big{font-family:var(--num);font-weight:800;letter-spacing:-.02em}
.up{color:var(--good-ink);font-weight:600}.down{color:var(--err);font-weight:600}.flat{color:var(--muted);font-weight:600}

/* Top bar (PC) */
.top{background:var(--brand);color:#fff;position:sticky;top:0;z-index:20}
.top-inner{display:flex;align-items:center;gap:16px;height:68px}
.top .brand{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.top .brand .mark{width:38px;height:38px;border-radius:11px;background:#fff;padding:3px;display:grid;place-items:center;flex:none}
.top .brand .mark img{width:100%;height:100%;object-fit:contain;border-radius:8px}
.top .brand .sub{display:block;font:500 11.5px/1 var(--body);opacity:.78;margin-top:3px;letter-spacing:0}
.topnav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:rgba(255,255,255,.86);text-decoration:none;font-weight:600;font-size:14px;padding:9px 11px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
.topnav a:hover{background:rgba(255,255,255,.12);color:#fff}
.topnav a.on{background:#fff;color:var(--brand)}
.topnav a .n{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.22);font-size:11px;text-align:center;margin-inline-start:5px;line-height:18px}
.topnav a.on .n{background:var(--brand);color:#fff}
.top-right{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.top-right .when{font-size:12.5px;opacity:.85;white-space:nowrap}
.ibtn{appearance:none;border:0;background:rgba(255,255,255,.14);color:#fff;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;text-decoration:none;transition:background .15s}
.ibtn:hover{background:rgba(255,255,255,.24)}
.ibtn svg{width:19px;height:19px}
.more-menu{position:relative}
.more-menu summary{list-style:none;cursor:pointer}.more-menu summary::-webkit-details-marker{display:none}
.more-menu .menu{position:absolute;inset-inline-end:0;top:50px;background:var(--surface);color:var(--ink);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:8px;min-width:210px;display:grid;z-index:30}
.more-menu .menu a,.more-menu .menu button{color:var(--ink);text-decoration:none;padding:11px 14px;border-radius:10px;font:500 15px var(--body);text-align:start;background:none;border:0;cursor:pointer}
.more-menu .menu a:hover,.more-menu .menu button:hover{background:var(--surface-2)}
.more-menu .menu a.on{font-weight:700;color:var(--brand)}
.more-menu .menu .sep{height:1px;background:var(--line);margin:6px 4px}

/* Buttons, forms */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-s);border:1px solid transparent;padding:0 18px;min-height:var(--control);height:var(--control);font:600 14px/1.2 var(--body);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,transform .06s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff}.btn.primary:hover{background:var(--brand-2)}
.btn.accent{background:var(--good);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:var(--err-soft);color:var(--err)}
.btn.small{min-height:36px;height:36px;padding:0 13px;font-size:13px}
.btn.block{display:flex;width:100%}
.btn.wa{background:#25D366;color:#063}
.linklike{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline}
label{display:block;font-weight:600;font-size:13.5px;color:var(--ink);margin:0 0 6px;line-height:1.3}
label .hint{display:block;color:var(--muted);font-size:13px;font-weight:400;margin-top:2px}
input,select,textarea{font:400 15px var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-s);padding:0 13px;width:100%;height:var(--control);min-height:var(--control);line-height:1.3}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235B6679' stroke-width='1.8'/></svg>");background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
textarea{height:auto;min-height:96px;padding:11px 13px;resize:vertical}
input[type=file]{padding:0;height:auto;min-height:0;border:0;background:none;font-size:14px}
input[type=file]::file-selector-button{font:600 13px var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-s);height:40px;padding:0 14px;margin-inline-end:10px;cursor:pointer}
input[type=color]{padding:4px;width:var(--control)}
input[type=range]{height:auto;min-height:0;border:0;padding:0;accent-color:var(--brand)}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;margin:0;vertical-align:middle;accent-color:var(--brand)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field{margin:0 0 14px;min-width:0}
.field .note{color:var(--muted);font-size:12.5px;margin-top:5px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px;align-items:start}
.form-grid .field{margin:0}
.form-grid .span2{grid-column:span 2}.form-grid .span3{grid-column:1/-1}
.form-grid.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.form-section{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.form-section>h3{margin-bottom:12px;color:var(--muted);font-size:12px;letter-spacing:.08em}
.inline-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}.inline-form .field{margin:0;flex:1 1 180px}
/* legacy class fallbacks (1.0.0 views) */
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px;align-items:start}.frow .field,.frow>div{margin:0}
.stack{display:grid;gap:14px}.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabx{display:flex;gap:8px;margin:18px 0 14px;overflow-x:auto;scrollbar-width:none}.tabx a{flex:none;text-decoration:none;background:var(--surface);color:var(--ink);font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow)}.tabx a.on{background:var(--ink);color:var(--bg)}
.line{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.line:first-child{border-top:0}
.pos{color:var(--good-ink)}.neg{color:var(--err)}
.dp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.dp-fact{background:var(--surface-2);border-radius:var(--radius-s);padding:12px 14px}
.dp-source{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:var(--radius-s);padding:10px 13px;font-weight:600;font-size:14px;color:var(--brand);text-decoration:none}
.sev-info{color:var(--muted)}.sev-warn{color:var(--warn)}
.check{display:flex;align-items:center;gap:9px;font-weight:500;cursor:pointer;margin:0}
.flash{padding:12px 16px;border-radius:var(--radius-s);margin:18px 0 0;font-size:14px;font-weight:500}
.flash.ok{background:var(--act-soft);color:var(--act)}.flash.err{background:var(--err-soft);color:var(--err)}.flash.warn{background:var(--warn-soft);color:var(--warn)}

/* Help bubble "?" */
.help{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:999px;border:1.5px solid var(--line-2);background:var(--surface);color:var(--muted);font:800 11px/1 var(--body);cursor:pointer;vertical-align:middle;margin-inline-start:6px;padding:0;position:relative;top:-1px}
.help:hover{border-color:var(--brand);color:var(--brand)}
.help-pop{position:absolute;z-index:40;max-width:300px;background:var(--ink);color:var(--bg);font:500 13.5px/1.45 var(--body);padding:10px 12px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.25);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.help-pop.show{opacity:1;transform:none}

/* Hero + KPIs */
.hero{padding:26px 0 2px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.hero .date{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.hero .hi{font-family:var(--display);font-weight:800;font-size:31px;letter-spacing:-.02em;line-height:1.2}
.hero .lead b{color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 18px}
.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr))}.kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}.kpis.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi{background:var(--surface);border-radius:var(--radius);padding:18px 22px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow);min-width:0;align-items:stretch;text-align:left;overflow:hidden}
.kpi span{font-size:13px;color:var(--muted);font-weight:500}
.kpi .pct{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-top:6px}.kpi .pct b{color:var(--ink)}
.kpi strong{font-family:var(--num);font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:clip;min-width:0}
.kpi em{font-style:normal;font-size:13px;color:var(--muted);display:block;overflow-wrap:anywhere}
.kpi>span{display:block}
.kpi.brand{background:var(--brand);color:#fff}.kpi.brand span,.kpi.brand em{color:rgba(255,255,255,.82)}
.kpi.brand .up,.kpi.brand .down,.kpi.brand .flat{color:#fff}
.kpi.pos strong{color:var(--good-ink)}.kpi.warn strong{color:var(--warn)}.kpi.dang strong{color:var(--err)}
.kpi-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.kpi-row>div{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.spark{display:block;color:var(--accent);flex:none;width:96px;height:34px}

/* Topic pills (tabs with counts) */
.pills{display:flex;gap:8px;margin:22px 0 14px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pills::-webkit-scrollbar{display:none}
.pills a,.pill{flex:none;text-decoration:none;background:var(--surface);color:var(--ink);font-weight:600;font-size:14.5px;padding:11px 18px;border-radius:999px;box-shadow:var(--shadow);transition:background .15s}
.pills a:hover,.pill:hover{background:var(--surface-2)}
.pills a .n,.pill .n{color:var(--muted);font-weight:500;margin-inline-start:4px}
.pills a.on,.pill.on{background:var(--ink);color:var(--bg)}
.pills a.on .n,.pill.on .n{color:var(--bg);opacity:.75}
.tabsum{margin:0 0 14px;color:var(--ink-2);font-size:15px}

/* Today layout */
.grid-main{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.cards{display:grid;gap:14px}
.side{display:grid;gap:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;align-items:start}

/* Advice card: big icon, then the words */
.card{background:var(--surface);border-radius:var(--radius);padding:20px 22px;display:flex;gap:18px;box-shadow:var(--shadow);transition:box-shadow .15s}
.card:hover{box-shadow:0 1px 2px rgba(11,18,32,.06),0 8px 24px rgba(11,18,32,.09)}
.icon{width:58px;height:58px;flex:none;border-radius:16px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:20px}
.icon svg{width:26px;height:26px}
.k-warning .icon{background:var(--warn-soft);color:var(--warn)}
.k-prediction .icon{background:var(--pred-soft);color:var(--pred)}
.k-action .icon{background:var(--act-soft);color:var(--act)}
.k-celebrate .icon{background:var(--act-soft);color:var(--act)}
.k-setup .icon{background:var(--surface-2);color:var(--brand)}
.card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.meta{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex-wrap:wrap;color:var(--muted)}
.k-warning .meta .kind{color:var(--warn)}.k-prediction .meta .kind{color:var(--pred)}.k-action .meta .kind,.k-celebrate .meta .kind{color:var(--act)}.k-setup .meta .kind{color:var(--brand)}
.meta .impact{margin-inline-start:auto;letter-spacing:0;text-transform:none;font-weight:600;font-size:13px;color:var(--muted)}
.meta .impact b{color:var(--ink)}
.early{display:inline-block;font-size:11px;letter-spacing:.02em;text-transform:none;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--pred-soft);color:var(--pred)}
.card-title{font-family:var(--display);font-size:19px;font-weight:700;margin:2px 0 0;letter-spacing:-.01em;line-height:1.3}
.card-title a{color:var(--ink);text-decoration:none}.card-title a:hover{text-decoration:underline}
.card-summary{margin:0;color:var(--ink-2)}
.card-voice{margin:2px 0 0;color:var(--ink);font-weight:600;line-height:1.5}
.card-voice .by{display:block;color:var(--muted);font-weight:500;font-size:12.5px;margin-top:4px}.card-voice .by b{color:var(--brand)}
.card-action{margin:4px 0 0;background:var(--surface-2);border-radius:var(--radius-s);padding:10px 14px;color:var(--ink)}
.card-action b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.card-foot{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.money{display:flex;align-items:baseline;gap:8px;margin-inline-end:auto;flex-wrap:wrap}
.money strong{font-family:var(--num);font-size:26px;font-weight:800;letter-spacing:-.02em}
.money span{color:var(--muted);font-size:13px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions form{display:flex;gap:8px;flex-wrap:wrap;margin:0}
.facts-mini{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.facts-mini b{color:var(--ink);font-weight:700}
.empty{background:var(--surface);border-radius:var(--radius);padding:26px;color:var(--ink-2);box-shadow:var(--shadow)}

/* Panels */
.panel{background:var(--surface);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);margin-bottom:14px}
.panel>h2,.panel-head h2{margin:0 0 10px;font-size:15px}
.panel.dark{background:var(--ink);color:var(--bg)}.panel.dark .muted,.panel.dark p{color:var(--line-2)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.panel-sub{color:var(--muted);font-size:13.5px;margin:-4px 0 12px}
.week-lines{margin:8px 0 0;padding-inline-start:18px;display:grid;gap:7px;color:var(--ink-2);font-size:14.5px}
.sectlab{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin:6px 0 2px}
.sectlab .count{background:var(--brand);color:#fff;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:11px;padding:0 6px}

/* Page head (modules) */
.pagehead{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;justify-content:space-between;padding:26px 0 2px}
.pagehead+.panel,.pagehead+.grid2,.pagehead+.grid-main,.pagehead+.table-wrap,.hero+.panel,.hero+.grid2,.hero+.grid-main{margin-top:16px}
.pills+.panel,.pills+.grid2,.pills+.grid-main,.filters+.panel,.filters+.grid2,.filters+.grid-main,.kpis+.pills{margin-top:14px}
.panel .table-wrap{margin:4px -8px 0}
.panel-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.row-list>div,.row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.row-list>div:first-child,.row:first-child{border-top:0}
.badge-soft{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.kv div{background:var(--surface-2);border-radius:var(--radius-s);padding:10px 13px}.kv .k{font-size:12px;color:var(--muted);font-weight:600}.kv .v{font-weight:600;overflow-wrap:anywhere}
.avatar{width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--brand);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:14px;flex:none}
.auth{min-height:100svh;display:grid;place-items:center;padding:24px}.auth .panel{width:min(420px,100%);padding:30px}.auth .logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px;text-align:center}.auth .logo img{width:72px;height:72px;object-fit:contain}.auth .logo b{font-family:var(--display);font-weight:800;letter-spacing:-.01em;font-size:18px}
.install-guide{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-top:16px;display:grid;gap:10px}.install-guide ol{margin:0;padding-inline-start:20px;display:grid;gap:6px;color:var(--ink-2)}.install-guide .ico{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--surface-2);vertical-align:middle;margin:0 2px}.install-guide .ico svg{width:14px;height:14px}
.pagehead .lead{font-size:15px}
.back{color:var(--muted);text-decoration:none;font-size:14px;display:inline-flex;align-items:center;gap:6px;margin-top:22px}
.back:hover{color:var(--brand)}

/* Filters */
.filters{display:flex;flex-direction:column;gap:10px;margin:16px 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-btn{appearance:none;border:0;background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 16px;font:600 14px var(--body);cursor:pointer;white-space:nowrap;box-shadow:var(--shadow);transition:background .15s}
.chip-btn:hover{background:var(--surface-2)}
.chip-btn.on{background:var(--ink);color:var(--bg)}
.chip-btn.small{padding:7px 13px;font-size:13px}
.chips-lab{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-inline-end:4px}
.chips.secondary{gap:6px}
.inline-lab{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.inline-lab select,.inline-lab input{width:auto;min-width:130px;min-height:40px;padding:7px 11px;font-size:14px;font-weight:600}
.custom-range{gap:10px}

/* Tables */
.table-wrap{overflow-x:auto}
table.table{width:100%;border-collapse:collapse;font-size:14px}
table.table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);font-weight:700;white-space:nowrap}
table.table th a{color:inherit;text-decoration:none}table.table th a.on{color:var(--brand)}
table.table tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}
table.table td .sub{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
table.table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.table tr:last-child td{border-bottom:0}
table.table .num{text-align:right;font-variant-numeric:tabular-nums}
table.table tbody tr:hover{background:var(--surface-2)}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.tag.ok{background:var(--act-soft);color:var(--act)}.tag.warn{background:var(--warn-soft);color:var(--warn)}.tag.dang{background:var(--err-soft);color:var(--err)}.tag.pred{background:var(--pred-soft);color:var(--pred)}
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}

/* Charts */
.chart-wrap{color:var(--accent);margin-top:6px}
svg.trend{width:100%;height:auto;display:block}
svg.trend .grid{stroke:var(--line);stroke-width:1}
svg.trend .gl,svg.trend .xl{fill:var(--muted);font-size:10px;font-weight:700;font-family:var(--body)}
.bars{display:flex;gap:12px;align-items:flex-end;min-height:140px;padding-top:6px;color:var(--accent)}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.bar-val{font-size:12px;font-weight:700;color:var(--ink)}
.bars.stacked .bar-fill{border-radius:0}.bars.stacked .bar-fill:first-child{border-radius:10px 10px 0 0}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-top:8px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:middle}
.c-cash{background:var(--good)}.c-card{background:var(--accent)}.c-check{background:var(--pred)}
.chart-empty{min-height:140px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:14px;background:var(--surface-2);border-radius:var(--radius-s);padding:16px}
.bar-track{width:100%;max-width:64px;height:104px;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:10px;overflow:hidden}
.bar-fill{width:100%;background:var(--accent);border-radius:10px 10px 0 0;transition:height .3s}
.bar-lab{font-size:12px;font-weight:600;color:var(--muted);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.track{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.fill{height:100%;background:var(--accent);border-radius:999px}

/* Detail page (card drill-in) */
.detail{background:var(--surface);border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow);margin:12px 0 24px}
.detail-head{display:flex;gap:20px;align-items:flex-start}
.detail-head .icon{width:68px;height:68px;border-radius:20px;font-size:26px}
.detail h1{font-size:26px;margin:6px 0 8px}
.detail .card-summary{font-size:17px}
.detail .money{margin:12px 0 0}.detail .money strong{font-size:32px}
.detail-head .icon{font-size:24px}
.block{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}
.block h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px;font-family:var(--body);font-weight:700}
.block ul.why{margin:0;padding-inline-start:18px;display:grid;gap:7px;color:var(--ink-2);font-size:15px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.fact{background:var(--surface-2);border-radius:var(--radius-s);padding:12px 14px}
.fact .k{font-size:12px;font-weight:600;color:var(--muted)}
.fact .v{font-family:var(--num);font-weight:800;font-size:23px;letter-spacing:-.02em;margin-top:2px}
.sources{display:flex;flex-wrap:wrap;gap:8px}
.sources a{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:var(--radius-s);padding:10px 13px;font-weight:600;font-size:14px;color:var(--brand);text-decoration:none}
.sources a:hover{background:var(--line)}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}

/* Impersonation / test bars */
.asbar{background:var(--warn-soft);color:var(--warn);border-radius:var(--radius-s);padding:10px 14px;font-size:14px;font-weight:600;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:16px}
.asbar form{margin:0}
.testbar{background:var(--pred);color:#fff;text-align:center;font-size:12.5px;font-weight:700;padding:5px 10px}

/* Footer + bottom bar */
.foot{color:var(--muted);font-size:12.5px;padding:28px 24px 40px;display:flex;flex-wrap:wrap;gap:8px 18px}
.bottombar{display:none}
main.wrap{padding-bottom:40px}

/* Phone: compact top, bottom topic bar, stacked grids, big numbers */
@media(max-width:860px){
  .wrap{padding:0 16px}
  .top-inner{height:60px;gap:10px}
  .top .brand{font-size:16px}.top .brand .mark{width:34px;height:34px}
  .topnav{display:none}
  .top-right .when{display:none}
  h1,.hero .hi{font-size:24px}
  h2{font-size:15px}
  .card-title{font-size:17px}
  .form-grid.cols2,.form-grid.cols3,.form-grid.cols4,.frow{grid-template-columns:1fr}.form-grid .span2{grid-column:auto}
  .inline-form .field{flex-basis:100%}
  .inline-lab{width:100%}.inline-lab select,.inline-lab input{flex:1}
  .kv{grid-template-columns:1fr 1fr}
  .panel .table-wrap{margin:4px -18px 0;padding:0 18px}
  .install-guide{margin-top:12px}
  .hero{padding:18px 0 0}
  .kpis,.kpis.k4,.kpis.k5,.kpis.k2{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .kpi{padding:14px 16px}.kpi strong{font-size:clamp(19px,6vw,26px)}.kpi span{font-size:12.5px}.kpi em{font-size:12px}
  .kpi-row .spark{display:none}.kpi-row{display:block}
  .grid-main,.grid2,.grid3,.detail-grid{grid-template-columns:1fr}
  .card{padding:16px;gap:12px}.icon{width:46px;height:46px;border-radius:13px;font-size:18px}
  .card-title{font-size:18px}
  .panel{padding:18px}
  .detail{padding:20px}.detail-head .icon{width:54px;height:54px}.detail h1{font-size:24px}
  .pagehead{padding-top:18px}
  .form-grid{grid-template-columns:1fr}
  body.has-bottombar main.wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.has-bottombar .foot{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .bottombar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:10.5px;font-weight:700;text-decoration:none;padding:4px 0;position:relative}
  .bottombar a svg{width:22px;height:22px}
  .bottombar a.on{color:var(--brand)}
  .bottombar .badge{position:absolute;top:0;right:calc(50% - 20px);background:var(--err);color:#fff;border-radius:999px;font-size:10px;min-width:17px;height:17px;display:grid;place-items:center;padding:0 4px}
}
@media(min-width:861px){ .mobile-only{display:none!important} }
@media(max-width:860px){ .pc-only{display:none!important} }
@media(min-width:861px) and (max-width:1100px){ .kpis.k5{grid-template-columns:repeat(3,minmax(0,1fr))} .kpis.k4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid3{grid-template-columns:1fr 1fr} .form-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{ .top,.bottombar,.foot,.asbar,.filters,.btn,.more-menu{display:none!important} body{background:#fff} .panel,.kpi,.card{box-shadow:none;border:1px solid #ddd} }

/* ---- messages (WhatsApp): scenario list + chat bubbles ---- */
.msg-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.msg-nav{display:grid;gap:8px;margin-bottom:16px}
.msg-nav a{display:flex;gap:10px;align-items:center;background:var(--surface);border-radius:var(--radius-s);padding:10px 13px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;box-shadow:var(--shadow);min-height:44px;transition:background .15s}
.msg-nav a .em{font-size:18px;width:24px;text-align:center;flex:none;line-height:1}
.msg-nav a:hover{background:var(--surface-2)}
.msg-nav a.on,.msg-nav a.on:hover{background:var(--ink);color:var(--bg)}
.msg-nav a .flagdot{margin-inline-start:auto;width:8px;height:8px;border-radius:999px;background:var(--err);flex:none}
.msg-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:6px}
.msg-head .em{font-size:28px;line-height:1.1;flex:none}
.msg-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.msg-step{color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin:18px 0 8px}
.wa-bubble{background:#DCF8C6;color:#1B2B1B;border-radius:14px 14px 14px 4px;padding:12px 14px;margin:0 0 10px;font-size:14.5px;line-height:1.5}
.wa-bubble .lang{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#3D7A4F;margin-bottom:3px}
.wa-bubble .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.wa-bubble .acts{margin-top:9px}
.wa-bubble .btn.ghost{background:#fff;color:#1F6A3A;border-color:#B9E2A8}
.wa-bubble .btn.ghost.done{background:#1F7A4D;color:#fff;border-color:#1F7A4D}
.msg-branches{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.msg-branch{border-radius:var(--radius-s);padding:12px 12px 2px;background:var(--surface-2)}
.msg-branch h3{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:14.5px;margin:0 0 2px}
.msg-branch .reply{color:var(--muted);font-size:13px;font-style:italic;margin:0 0 10px}
.msg-branch.yes h3{color:var(--act)}.msg-branch.no h3{color:var(--warn)}
.msg-branch .wa-bubble{background:var(--surface);color:var(--ink)}
.msg-branch.no .wa-bubble .lang{color:var(--warn)}.msg-branch.no .wa-bubble .btn.ghost{color:var(--warn);border-color:var(--line-2)}
.msg-branch.no .wa-bubble .btn.ghost.done{background:var(--warn);color:#fff;border-color:var(--warn)}
.msg-barrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:14px}
.msg-barrow .lab{width:170px;flex:none;color:var(--ink-2)}
.msg-barrow .track{flex:1;margin:0}
.msg-barrow .val{width:44px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.msg-barrow.pos .fill{background:var(--good)}.msg-barrow.neg .fill{background:var(--warn)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .wa-bubble{background:#1F3A2A;color:#E6F4E6}:root:not([data-theme="light"]) .wa-bubble .lang{color:#8FD19E}:root:not([data-theme="light"]) .wa-bubble .btn.ghost{background:#132A1C;color:#B9E2A8;border-color:#2F5A3E}}
:root[data-theme="dark"] .wa-bubble{background:#1F3A2A;color:#E6F4E6}:root[data-theme="dark"] .wa-bubble .lang{color:#8FD19E}:root[data-theme="dark"] .wa-bubble .btn.ghost{background:#132A1C;color:#B9E2A8;border-color:#2F5A3E}
@media(max-width:860px){.msg-grid,.msg-branches{grid-template-columns:1fr}.msg-nav{grid-template-columns:1fr 1fr}.msg-nav a{font-size:13px;padding:8px 10px}.msg-barrow .lab{width:120px;font-size:13px}}
.panel.msg-fields{margin-top:14px}.msg-note{margin:14px 0 0}

/* ---- reports (global report) ---- */
a.chip-btn{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.chip-btn.check{position:relative;display:inline-flex;align-items:center;gap:7px}
.chip-btn.check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.chip-btn.check::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid currentColor;opacity:.45;flex:0 0 auto}
.chip-btn.check.on::before{background:currentColor;opacity:1}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.chips.scroll::-webkit-scrollbar{display:none}
details.panel>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;font-size:15px}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::after{content:"+";font-size:20px;line-height:1;color:var(--muted);font-weight:400}
details.panel[open]>summary::after{content:"–"}
details.panel>summary .muted{font-weight:600;font-size:13px}
details.panel>summary+*{margin-top:12px}
.bar-stack{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%}
.bar-stack .bar-fill{border-radius:0;flex:0 0 auto}.bar-stack .bar-fill:first-child{border-radius:10px 10px 0 0}
.rg-hbars{display:grid;gap:8px;margin-top:6px}
.rg-hbar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.rg-hbar .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rg-hbar .track{height:10px;background:var(--surface-2);border-radius:999px;overflow:hidden}.rg-hbar .fill{display:block;height:100%;background:var(--accent);border-radius:999px}
.rg-hbar .v{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.rg-cmp{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
@media(max-width:860px){ .rg-hbar{grid-template-columns:minmax(80px,34%) 1fr auto;font-size:13px} }
@media print{ .rg-noprint{display:none!important} details.panel{break-inside:avoid} details.panel:not([open])>*:not(summary){display:block} }

/* inventory: share bars inside report tables */
table.table td.bar-cell{width:38%;min-width:120px}table.table td.bar-cell .track{margin-top:0}
.bars.stacked{gap:6px}.bars.stacked .bar-val{font-size:11px}
@media(max-width:860px){ .bars.stacked .bar-val{display:none} .bars.stacked .bar-lab{font-size:10px} }
.chips.scroll{min-width:0;max-width:100%}.chips.scroll .inline-lab{width:auto;flex:0 0 auto}
.grid2>*,.grid3>*,.grid-main>*{min-width:0}.bars.stacked .bar-col{overflow:hidden}

/* [views 1.3.0] grid children must be allowed to shrink so a wide .table-wrap scrolls inside its panel instead of widening the page */
.grid-main>*,.grid2>*,.grid3>*,.side>*{min-width:0}
.rg .kpi strong{overflow-wrap:anywhere}
.rg table.table td:first-child{min-width:120px}
@media(max-width:860px){ .rg .kpi strong{font-size:clamp(16px,4.9vw,24px);letter-spacing:-.02em} }
.bar-stack .bar-fill.c-cash{background:var(--good)}.bar-stack .bar-fill.c-card{background:var(--accent)}.bar-stack .bar-fill.c-check{background:var(--pred)}
.rg .kpi strong{white-space:normal;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.rg .kpi strong>span{font-size:13px;font-family:var(--body);letter-spacing:0;white-space:nowrap}
.flash+.panel,.flash+.grid-main,.flash+.grid2,.flash+.grid3,.flash+.kpis{margin-top:14px}
.form-grid+.field,.form-grid+.form-grid,.field+.form-grid{margin-top:14px}
[hidden]{display:none!important}

/* [access 1.3.0] printable card document, anniversary image page, notification matrix, QR panel */
body.doc-page{background:var(--bg);padding:16px}
.doc-tools{max-width:820px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.doc{max-width:820px;margin:0 auto;background:var(--surface);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 8px 0 var(--brand);padding:42px 38px 34px}
.doc.k-warning{box-shadow:var(--shadow),inset 0 8px 0 var(--warn)}.doc.k-celebrate{box-shadow:var(--shadow),inset 0 8px 0 var(--good)}.doc.k-prediction{box-shadow:var(--shadow),inset 0 8px 0 var(--pred)}.doc.k-action{box-shadow:var(--shadow),inset 0 8px 0 var(--act)}
.doc-head{display:flex;gap:16px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:18px}
.doc-head img{width:56px;height:56px;object-fit:contain;flex:0 0 auto}
.doc-head>div:nth-child(2){flex:1;min-width:0}
.doc-brand{font-family:var(--display);font-weight:800;letter-spacing:-.01em;color:var(--brand);font-size:17px}
.doc-sub{color:var(--muted);font-size:13px}
.doc-date{text-align:right;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.doc h1{font-size:28px;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em}
.doc-lead{font-size:17px;color:var(--ink-2);margin:0 0 14px}
.doc-money{display:flex;align-items:baseline;gap:10px;margin:10px 0 6px}.doc-money strong{font-size:34px;color:var(--brand)}.doc-money span{color:var(--muted)}
.doc section{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.doc h2{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.doc ul,.doc ol{margin:0;padding-left:22px}.doc li{margin:4px 0}
.doc-sources{list-style:none;padding:0}.doc-sources li{padding:6px 0;border-bottom:1px dashed var(--line)}
.doc-foot{margin-top:26px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.doc .tag{display:inline-block}
.anniv-img{margin:16px 0;border-radius:var(--radius-s);overflow:hidden;line-height:0}.anniv-img svg{width:100%;height:auto;display:block}
.doc .wa-bubble{display:block;white-space:pre-wrap}
@media(max-width:600px){ body.doc-page{padding:10px} .doc{padding:30px 18px 22px} .doc-head{flex-wrap:wrap} .doc-head>div:nth-child(2){flex:1 1 200px} .doc-date{flex:1 1 100%;text-align:left;white-space:normal} .doc h1{font-size:23px} .doc-money strong{font-size:28px} }
@media print{ body.doc-page{background:#fff;padding:0} .doc-tools{display:none!important} .doc{box-shadow:none;max-width:none;border-radius:0;padding:0 0 10px;border-top:6px solid var(--brand)} .doc section{break-inside:avoid} @page{margin:16mm} }
.nmatrix th,.nmatrix td{vertical-align:middle}
.nmatrix td .what{display:block;color:var(--muted);font-size:12.5px;font-weight:400;margin-top:2px}
.nmatrix select{min-height:40px;padding:6px 36px 6px 10px;font-size:14px;width:auto;min-width:130px}.nmatrix td:nth-child(3) select{min-width:215px}
@media(max-width:860px){ .nmatrix,.nmatrix tbody{display:block;width:100%;min-width:0} .nmatrix thead{display:none} .nmatrix tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:12px 0;border-top:1px solid var(--line)} .nmatrix tr:first-child{border-top:0} .nmatrix td{display:block;padding:0;border:0;white-space:normal;min-width:0} .nmatrix td:first-child{grid-column:1/-1} .nmatrix td .what{white-space:normal} .nmatrix select,.nmatrix td:nth-child(3) select{width:100%;min-width:0} .nmatrix td[data-l]::before{content:attr(data-l);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-bottom:3px} }
.qr-box{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.qr-box .qr{width:168px;height:168px;flex:0 0 auto;background:#fff;border-radius:var(--radius-s);padding:8px;border:1px solid var(--line)}.qr-box .qr svg{width:100%;height:100%;display:block}
.qr-box>div:last-child{flex:1 1 220px;min-width:0}
.wa-link{display:inline-flex;align-items:center;gap:6px}

/* [cards 1.3.0] Later / Move to the end / I don't use this, group chips, prediction power, goal bar */
.card-life{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card-life .later{position:relative}
.card-life .later>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.card-life .later>summary::-webkit-details-marker{display:none}
.card-life .later-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow);padding:10px;display:grid;gap:6px;min-width:220px}
.card-life .later-menu .btn{justify-content:flex-start;width:100%}
.card-life .later-menu .inline-lab{display:flex;flex-direction:column;align-items:stretch;gap:4px;text-transform:none;letter-spacing:0;font-size:12.5px}
.card-life .later-menu input[type=date]{min-width:0;width:100%}
.detail .card-life{margin-top:10px}
.detail .later-menu{position:static;box-shadow:none;border:0;padding:8px 0 0;min-width:0;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.tag.new-tag{background:var(--pred-soft);color:var(--pred)}
.meta .tag{text-transform:none;letter-spacing:0}
.power{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-weight:700;font-size:22px;font-family:var(--display)}
.power small{font-size:12.5px;color:var(--muted);font-weight:600;font-family:var(--body)}
.power-mods{display:grid;gap:8px;margin-top:10px}
.power-mod{display:grid;grid-template-columns:minmax(80px,34%) 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.power-mod .track{margin:0;height:8px}
.power-mod .v{font-variant-numeric:tabular-nums;font-weight:700}
.power-mod a{color:inherit;text-decoration:none;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.goalbar{margin-top:12px;max-width:560px}
.goalbar .lab{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-2);flex-wrap:wrap}
.goalbar .lab b{color:var(--ink)}
.goalbar .track{height:10px}
.goalbar.behind .fill{background:var(--warn)}
.chips.group-chips{margin:0 0 12px}
.cards .sectlab+.card{margin-top:0}
.worth-kind{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.worth-kind.late,.worth-kind.offhours{background:var(--warn-soft);color:var(--warn)}.worth-kind.delete{background:var(--err-soft);color:var(--err)}.worth-kind.edit{background:var(--pred-soft);color:var(--pred)}
@media(max-width:600px){ .card-life{width:100%} .card-life .later-menu{left:0;right:0;min-width:0} .power-mod{grid-template-columns:minmax(70px,30%) 1fr auto} }
.panel.dark h2{color:var(--bg)}
.row-list a{color:inherit;text-decoration:none}
.side .panel .actions{margin-top:12px}
.detail-life{flex-direction:column;align-items:stretch;gap:8px}
.detail-life .life-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.detail-life .inline-lab{text-transform:none;letter-spacing:0;display:inline-flex;gap:6px;align-items:center}
.detail-life .inline-lab input[type=date]{min-width:0;width:auto}

/* ---- [qa 1.3.0] final visual pass: one page head, one table, one form, one empty state ---- */
/* page heads: same module label everywhere; the text column wraps, the buttons stay on the right */
.pagehead .date,.hero .date{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pagehead>div:first-child,.hero>div:first-child{flex:1 1 420px;min-width:0;max-width:820px}
.pagehead .actions,.pagehead .acts,.hero .actions{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pagehead+.kpis,.hero+.kpis,.pagehead+.filters,.hero+.filters{margin-top:14px}
.pagehead+.flash,.hero+.flash{margin-top:14px}
/* card meta: "Prediction · Inventory" reads as one line */
.meta .kind+span{margin-inline-start:-4px}
/* panels inside a grid: the grid gap is the spacing, no extra bottom margin */
.grid2>.panel,.grid3>.panel,.grid-main>.panel,.side>.panel,.cards>.panel,.board>.panel{margin-bottom:0}
.panel-head{margin-bottom:12px}
.panel>.panel-sub:first-of-type{margin-top:-2px}
/* key/value tiles: only the tile gets the background, not the key and value inside it */
.kv .k,.kv .v{background:none;padding:0;border-radius:0}
/* tables: short cells never wrap (dates, money, tags, buttons), long text still can */
table.table td:first-child,table.table td.num,table.table td.nw,table.table th,table.table td:has(>.btn),table.table td:has(>form>.btn),table.table td:has(>.tag:only-child),table.table td:has(>.worth-kind){white-space:nowrap}
table.table td:first-child .sub,table.table td:first-child p{white-space:normal}
table.table td .btn+.btn{margin-inline-start:6px}
table.table a:not(.btn){text-decoration:none;font-weight:600}table.table a:not(.btn):hover{text-decoration:underline}
table.table.stack{display:table;gap:0}
.tag,.chip,.badge-soft,.worth-kind,.early,.topnav a .n{white-space:nowrap}
/* KPI value: the change badge may wrap under the number instead of being cut */
.kpi strong{white-space:normal;overflow:visible}
.kpi strong .up,.kpi strong .down,.kpi strong .flat{display:inline-block;font-family:var(--body);font-size:13px;letter-spacing:0;vertical-align:middle;margin-inline-start:4px;white-space:nowrap}
.sectlab+.kpis{margin-top:10px}
/* empty states: inside a panel they are a soft inset, never a second white card; a button after the text breathes */
.panel .empty{box-shadow:none;background:var(--surface-2);padding:16px 18px;border-radius:var(--radius-s)}
.empty .btn{margin-inline-start:10px;vertical-align:middle}
.empty+.panel,.empty+.grid2,.empty+.grid3,.empty+.grid-main,.empty+.kpis,.empty+.empty,.empty+.table-wrap,.empty+.filters{margin-top:14px}
.panel .empty+.panel-head,.panel .empty+h2,.panel .empty+.table-wrap,.panel .empty+form{margin-top:14px}
/* forms: controls in one row line up at the bottom even when one label has a hint; checkboxes sit at control height */
.form-grid{align-items:end}
.form-grid .field>.check{min-height:var(--control)}
input,select{min-width:0}
.inline-lab select{padding-right:34px}
.panel>form:not(.inline-form):not(.chips)>.btn,.panel>form:not(.inline-form):not(.chips)>button{margin-top:14px}
.form-grid+.btn,.form-grid+button,.grid2+.btn,.grid2+button{margin-top:14px}
/* side column forms: never three columns in a 300px panel */
.side .form-grid.cols3,.side .form-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))}
.side .form-grid .span2{grid-column:1/-1}
@media(min-width:861px) and (max-width:1100px){.side .form-grid.cols2,.side .form-grid.cols3,.side .form-grid.cols4{grid-template-columns:1fr}}
/* pills on PC wrap instead of hiding the last ones behind a scroll */
@media(min-width:861px){.pills{flex-wrap:wrap;overflow:visible}}
/* trend chart: the line stretches, the labels are HTML and stay readable at any width */
.trend-box{margin-top:6px}
.trend-plot{position:relative;height:150px}
.trend-plot svg.trend{width:100%;height:100%;display:block}
.trend-y{position:absolute;inset:0;pointer-events:none}
.trend-y span{position:absolute;right:0;transform:translateY(-110%);font-size:11px;font-weight:700;color:var(--muted);background:color-mix(in srgb,var(--surface) 82%,transparent);padding:0 4px;border-radius:4px;line-height:1.4}
.trend-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--surface)}
.trend-dot.hi{width:7px;height:7px;box-shadow:none}
.trend-x{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:700;color:var(--muted);margin-top:6px}
/* task board: one column per person, never the KPI grid */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-items:start}
.task-item{background:var(--surface-2);border-radius:var(--radius-s);padding:10px 12px;margin-top:8px}
.task-item.late{outline:2px solid var(--err-soft)}
.task-item .t{font-weight:600}
.task-item .btn{margin-top:8px}
/* phone */
@media(max-width:860px){
  body.has-bottombar .pills{display:none}
  .kpis>.kpi:last-child:nth-child(odd){grid-column:1/-1}
  .trend-plot{height:130px}
  .board{grid-template-columns:1fr}
  .pagehead .actions,.pagehead .acts,.hero .actions{width:100%}
}
@media(max-width:600px){
  .filters .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .filters .chips::-webkit-scrollbar{display:none}
  .filters .chips>*{flex:0 0 auto}
}
.panel .bars+h2,.panel .chart-empty+h2,.panel .trend-box+h2,.panel .table-wrap+h2,.panel .kv+h2{margin-top:18px}
.row-list .task-text{min-width:0;flex:1}.pre{white-space:pre-wrap}.row-list form{margin:0;flex:none}
/* settings helpers (no inline styles) */
.check-row{display:flex;flex-wrap:wrap;gap:8px 18px;min-height:var(--control);align-items:center}
h3.sub-h{margin:0 0 8px}
.p0{margin:0 0 8px}
.wrap-any{overflow-wrap:anywhere;word-break:break-all}.fact .v.wrap-any{font-size:15px}
.flash.in-panel{margin:0 0 12px}
.form-section>h3 .tag{vertical-align:middle;margin-inline-start:6px;letter-spacing:0}
.sources+p,.sources+.muted,.panel .sources+.small{margin-top:10px}
.panel p:last-child{margin-bottom:0}
.form-section.first{border-top:0;margin-top:0;padding-top:0}
h3.sub-h{font-size:12px;letter-spacing:.08em;color:var(--muted);margin:0 0 8px}
.panel>h2+.grid2,.panel>h2+.grid3,.panel>h2+.form-grid,.panel>h2+form,.panel>h2+.kv,.panel>h2+.facts,.panel>h2+.qr-box,.panel>h2+.sources{margin-top:12px}
table.table td .actions{flex-wrap:nowrap}table.table td:has(>.actions){white-space:nowrap}
.trend-box+.table-wrap,.bars+.table-wrap{margin-top:12px}
/* phone tables scroll sideways: short cells stay on one line, long text (marked .wrap by the layout script) wraps at a readable width */
@media(max-width:860px){ table.table td{white-space:nowrap} table.table td.wrap,table.table td:has(p),table.table td:has(.what){white-space:normal;min-width:220px;max-width:280px} table.table td .sub{white-space:normal} }
/* tablet: two form columns instead of one */
@media(min-width:600px) and (max-width:860px){ .form-grid.cols2,.form-grid.cols3,.form-grid.cols4{grid-template-columns:repeat(2,minmax(0,1fr))} .form-grid .span2{grid-column:1/-1} .side .form-grid.cols2,.side .form-grid.cols3{grid-template-columns:repeat(2,minmax(0,1fr))} }
.grid2>.kv,.grid3>.kv{grid-template-columns:1fr}
.panel>form+.panel-head,.panel>form+h2{margin-top:18px}

/* ---- [qa2 1.3.0] second visual pass: rhythm between sections, tables that say "swipe", chips that wrap, file inputs, charts with a gutter ---- */
/* 1. vertical rhythm: a grid row of panels is followed by the same gap as everything else */
.grid2,.grid3{margin-bottom:14px}
.panel>.grid2:last-child,.panel>.grid3:last-child,.grid-main .grid2:last-child,.side .grid2:last-child{margin-bottom:0}
.grid2+.panel,.grid3+.panel,.kpis+.panel,.kpis+.grid2,.kpis+.grid3,.kpis+.grid-main,.kpis+.table-wrap,.kpis+.sectlab,.chips.group-chips+.cards,.tabsum+.grid-main{margin-top:14px}
.sectlab{margin:18px 0 4px}.cards>.sectlab{margin-top:10px}
.foot{padding-top:18px}
.back+.pagehead,.back+.hero{padding-top:10px}
.back{margin-top:24px}
/* 2. KPI tiles: same height in a row, sub-line never stretches a tile alone */
.kpis{align-items:stretch}
.kpi{min-height:108px;justify-content:flex-start}
.kpi em{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi.brand em{-webkit-line-clamp:3}
.kpi strong:empty::before{content:"—";color:var(--muted)}
/* 3. tables: a soft fade on the side that still has content; the layout script toggles the classes */
.table-wrap{position:relative;scrollbar-width:thin}
.table-wrap.can-right{mask-image:linear-gradient(to right,#000 calc(100% - 36px),rgba(0,0,0,.15));-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),rgba(0,0,0,.15))}
.table-wrap.can-left{mask-image:linear-gradient(to right,rgba(0,0,0,.15),#000 36px);-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.15),#000 36px)}
.table-wrap.can-left.can-right{mask-image:linear-gradient(to right,rgba(0,0,0,.15),#000 36px,#000 calc(100% - 36px),rgba(0,0,0,.15));-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.15),#000 36px,#000 calc(100% - 36px),rgba(0,0,0,.15))}
.swipe-hint{display:none;font-size:12px;color:var(--muted);margin:6px 0 0;text-align:right}
.table-wrap.can-right+.swipe-hint{display:block}
table.table th{padding-left:10px;padding-right:10px}
.tag,.badge-soft{white-space:normal;line-height:1.35}
table.table td:has(>.tag:only-child){white-space:nowrap}
.pill-score,.score{display:inline-block;min-width:46px;text-align:center}
/* 4. chip rows and pills: wrap from tablet up; on the phone they bleed to the edge with padding so no chip is cut */
@media(min-width:601px){.pills,.chips.scroll,.filters .chips{flex-wrap:wrap;overflow:visible;white-space:normal}.tabx{flex-wrap:wrap;overflow:visible}}
@media(max-width:600px){
  .filters .chips,.pills,.chips.scroll,.tabx{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scroll-snap-type:x proximity}
  .filters .chips>*,.pills>*,.chips.scroll>*,.tabx>*{scroll-snap-align:start}
  .pills{flex-wrap:nowrap;overflow-x:auto}
}
.chips .chips-lab{white-space:nowrap;display:inline-flex;align-items:center}
.chips .chips-lab .help{margin-inline-start:4px}
/* 5. page actions: the primary action first and clearly the strongest */
.pagehead .actions .btn.primary,.hero .actions .btn.primary,.pagehead .acts .btn.primary{order:-1}
.form-actions .btn.primary{order:-1}
/* 6. empty states: text and button breathe */
.empty{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;line-height:1.5}
.empty .btn{margin-inline-start:0}
.empty.col{flex-direction:column;align-items:flex-start}
.empty-wide{grid-column:1/-1}
/* 7. charts: y labels live in a right gutter, never over the line; empty boxes are lighter */
.trend-plot{padding-right:0}
.trend-inner{position:relative;height:100%;margin-right:62px}
.trend-y{left:auto;width:58px}
.trend-y span{right:0;width:58px;text-align:right;background:none;padding:0;transform:translateY(-50%);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trend-x{padding-right:62px}
svg.trend .area{fill:currentColor;opacity:.08}
.chart-empty{min-height:96px;font-size:13.5px}
.bars.many .bar-val{display:none}
.bars .bar-val.zero{visibility:hidden}
@media(max-width:600px){.bars.many .bar-lab{font-size:10px}.bars.many{gap:4px}}
/* 8. file inputs: one button, one filename (the layout script wraps the native control) */
.file-field{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:var(--control)}
.file-field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.file-field .btn{position:relative}
.file-field .fname{color:var(--muted);font-size:13.5px;overflow-wrap:anywhere}
/* 9. forms: date/time inputs look like their siblings */
input[type=date],input[type=time],input[type=month]{color:var(--ink)}
input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator{opacity:.6}
/* 10. today: the topic summary sits with the view row */
.tabsum{margin:4px 0 10px;font-size:14px;color:var(--muted)}
.card-foot .actions .btn.small{height:36px}
.card-life .btn,.card-life .later>summary .btn{font-weight:600}
/* notification matrix: titles left, controls the same height */
.nmatrix td,.nmatrix th{text-align:left}
.nmatrix td:first-child{min-width:220px}
.nmatrix td .fixed{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-s);color:var(--muted);font-size:14px;background:var(--surface-2);white-space:nowrap}
@media(max-width:860px){ .nmatrix td .fixed{width:100%} .nmatrix tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
/* settings: two columns of panels on a wide screen */
@media(min-width:1101px){ .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .settings-grid>.panel{margin-bottom:0} .settings-grid>.panel.wide{grid-column:1/-1} }
/* buttons that sit together are the same height even when one is a danger pill */
.btn.danger{border-color:var(--err-soft)}
.btn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* tablet form rows */
@media(min-width:601px) and (max-width:860px){.kv{grid-template-columns:repeat(3,1fr)}}
/* collapsible report sections: a real chevron, not a dash */
details.panel>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;flex:0 0 auto;margin-inline-end:4px}
details.panel[open]>summary::after{content:"";transform:rotate(-135deg)}
details.panel>summary>span:first-child,details.panel>summary>h2{flex:1;min-width:0}
.hide-sm{display:table-cell}
@media(max-width:600px){.hide-sm{display:none!important}}
.row-link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.row-link:first-child{border-top:0}.row-link:hover{color:var(--brand)}
.row-link .chev{color:var(--muted);flex:none}
.quick-dates{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.result-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.result-line .big{font-family:var(--num);font-weight:700;font-size:24px}.result-line .ph{color:var(--muted);font-size:15px;font-weight:500}
.tiles-even{align-items:stretch}

/* ---- [qa3 1.3.0] third pass ---- */
/* Today: the side column follows the reader instead of ending at the top of a long page */
@media(min-width:861px){ .grid-main>.side{position:sticky;top:84px} }
/* paired panels: same height in a row */
.grid2,.grid3{align-items:stretch}
.grid2>.panel,.grid3>.panel{display:flex;flex-direction:column}
.grid2>.panel>.table-wrap,.grid3>.panel>.table-wrap,.grid2>.panel>.chart-empty,.grid3>.panel>.chart-empty{flex:1}
/* chips: start flush left and fade the side that still has chips */
.chips,.pills,.tabx{position:relative}
.scroll-x.can-right{mask-image:linear-gradient(to right,#000 calc(100% - 40px),rgba(0,0,0,.1));-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),rgba(0,0,0,.1))}
.scroll-x.can-left{mask-image:linear-gradient(to right,rgba(0,0,0,.1),#000 40px);-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.1),#000 40px)}
.scroll-x.can-left.can-right{mask-image:linear-gradient(to right,rgba(0,0,0,.1),#000 40px,#000 calc(100% - 40px),rgba(0,0,0,.1));-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.1),#000 40px,#000 calc(100% - 40px),rgba(0,0,0,.1))}
@media(max-width:600px){ .filters .chips .chips-lab{position:sticky;left:0;background:var(--bg);padding-right:6px;z-index:1} }
/* phone KPI numbers never touch the tile edge */
@media(max-width:600px){ .kpi strong{font-size:clamp(16px,5.2vw,23px);letter-spacing:-.02em} .kpi{padding:13px 14px} }
/* chart axis gutter wide enough for "$10,000" */
.trend-inner{margin-right:66px}.trend-y{width:62px}.trend-y span{width:62px}.trend-x{padding-right:66px}
/* bar charts: no ghost track behind the bars */
.bar-track{background:transparent;border-bottom:1px solid var(--line);border-radius:0}
.bar-fill{border-radius:8px 8px 0 0}
/* destructive row actions are quiet */
table.table .btn.danger{background:transparent;color:var(--err);border-color:transparent;padding:0 8px}
table.table .btn.danger:hover{background:var(--err-soft)}
/* collapsible section heads: title and meta never collide */
details.panel>summary{flex-wrap:wrap}
details.panel>summary .muted{flex:1 1 100%;order:3;margin-top:2px}
@media(min-width:861px){ details.panel>summary .muted{flex:0 1 auto;order:0;margin-top:0} }
/* swipe hint at the top of a wide table too */
.swipe-hint.above{text-align:right;margin:0 0 6px}
.swipe-hint.above.show{display:block}
/* negative or zero stock badges */
.tag.zero{background:var(--err-soft);color:var(--err)}
/* card detail: header spans the full width above the two columns */
.detail-grid>.detail-head{grid-column:1/-1}
/* progress bars for negative values: show nothing but keep the track */
.track .fill.neg{background:var(--err);opacity:.35}
/* bigger checkboxes for the audience */
input[type=checkbox],input[type=radio]{width:22px;height:22px}
.check{gap:10px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed}
@media(max-width:600px){.row-list>div,.row{flex-wrap:wrap}.row-list>div>form,.row>form{flex-basis:100%}}

@media(max-width:860px){ .nmatrix td:first-child{max-width:none;min-width:0;width:100%;text-align:left} .nmatrix td{text-align:left} }
.people-table td.muted:not(.nw){white-space:normal}

/* ---- [menu 1.4.0] the menu is a dropdown on PC and a full-height sheet with its own scroll on the phone ---- */
.more-menu .menu{display:flex;flex-direction:column;max-height:min(70vh,560px);padding:6px}
.more-menu .menu-head{display:none}
.more-menu .menu-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;gap:1px;padding:2px;scrollbar-width:thin}
.more-menu .menu-lab{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:10px 14px 4px}
.more-menu .menu-lab:first-child{padding-top:4px}
.menu-back{display:none}
@media(max-width:860px){
  .menu-back[hidden]{display:none}
  .menu-back{display:block;position:fixed;inset:0;z-index:28;background:rgba(5,10,24,.45);backdrop-filter:blur(2px)}
  body.menu-open{overflow:hidden}
  body.menu-open .top{z-index:30}
  .more-menu .menu{position:fixed;inset:0 0 0 auto;width:min(360px,88vw);max-height:none;height:100dvh;border-radius:0;box-shadow:-18px 0 50px rgba(0,0,0,.3);padding:0;z-index:29;animation:menu-in .18s ease-out}
  .more-menu .menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px 0 18px;height:60px;flex:none;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:1}
  .more-menu .menu-head b{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.02em}
  .more-menu .menu-x{appearance:none;border:0;background:var(--surface-2);color:var(--ink);width:40px;height:40px;border-radius:12px;font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center}
  .more-menu .menu-scroll{flex:1;min-height:0;padding:8px 10px calc(24px + env(safe-area-inset-bottom,0px))}
  .more-menu .menu a,.more-menu .menu button{min-height:48px;display:flex;align-items:center;font-size:16px}
  .more-menu .menu-lab{padding:14px 14px 4px}
}
@media(prefers-reduced-motion:no-preference){@keyframes menu-in{from{transform:translateX(18px);opacity:.4}to{transform:none;opacity:1}}}

/* ---- [qa 1.4.0] after the typography swap: labels, tiles and fades retuned for Inter ---- */
/* the right-edge fade on a scrolling table must sit on empty space, never on the last figure */
.table-wrap.can-right{padding-inline-end:16px}
.table-wrap.can-right{mask-image:linear-gradient(to right,#000 calc(100% - 16px),rgba(0,0,0,.55));-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 16px),rgba(0,0,0,.55))}
.table-wrap.can-left{mask-image:linear-gradient(to right,rgba(0,0,0,.55),#000 16px);-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.55),#000 16px)}
.table-wrap.can-left.can-right{mask-image:linear-gradient(to right,rgba(0,0,0,.55),#000 16px,#000 calc(100% - 16px),rgba(0,0,0,.55));-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,.55),#000 16px,#000 calc(100% - 16px),rgba(0,0,0,.55))}
table.table td{padding-inline:12px}
/* KPI tiles: the "?" lives in the corner, labels reserve two lines so every number shares a baseline */
.kpi{position:relative}
.kpi>span:first-child,.kpi .kpi-row>div>span:first-child{display:block;min-height:2.5em;padding-inline-end:26px}
.kpi>span:first-child>.help,.kpi .kpi-row>div>span:first-child>.help{position:absolute;top:16px;inset-inline-end:16px;margin:0}
@media(max-width:600px){ .kpi>span:first-child,.kpi .kpi-row>div>span:first-child{min-height:2.4em;padding-inline-end:22px} .kpi>span:first-child>.help,.kpi .kpi-row>div>span:first-child>.help{top:12px;inset-inline-end:12px} }
/* value tiles inside a card: a long value steps down instead of wrapping into three lines */
.facts,.dp-facts{grid-template-columns:repeat(auto-fit,minmax(172px,1fr))}
.fact .v{font-size:clamp(17px,1.7vw,23px);overflow-wrap:anywhere}
/* stock pills and other status tags stay on one line */
.tag.zero,.tag.ok,.tag.warn,.tag.dang{white-space:nowrap}
table.table td .tag{margin-inline-end:4px}
/* small group labels keep the caps treatment the eyebrows have */
.form-section>h3,h3.sub-h{text-transform:uppercase}
/* a summary's subtitle is body text, not a second heading */
details.panel>summary .muted{font-weight:500}
/* two panels side by side need a little more air between them now the type is wider */
.grid2,.grid3{gap:18px}
/* phone: the filter label sits on its own line instead of sticking over the chips */
@media(max-width:600px){
  .filters .chips{flex-wrap:wrap}
  .filters .chips .chips-lab{position:static;background:none;padding:0;margin:0 2px 0 0;align-self:center}
  .filters .chips>:not(.chips-lab){flex:0 0 auto}
  .nmatrix tr{grid-template-columns:1fr}
  .bottombar a{white-space:nowrap;font-size:10px}
}
/* phone numbers and other short data never break mid-value */
table.table td a[href^="tel:"]{white-space:nowrap}
.nw,.nw *{white-space:nowrap}
/* a chart panel next to a list: the axis gutter never reads as part of the list */
.grid2>.panel>.trend-box,.grid3>.panel>.trend-box{padding-inline-end:4px}
@media(max-width:860px){ table.table.nmatrix td{padding-inline:0;border-bottom:0} table.table.nmatrix td:first-child{min-width:0;padding:0 0 4px;text-align:left} .nmatrix td:first-child strong{display:block} .nmatrix tr{padding:14px 0} }

/* chips inside a panel keep the panel's inner padding */
.panel>.chips:last-child,.panel .chips.panel-foot{padding-inline-end:2px}
@media(max-width:860px){ table.table.nmatrix tbody td:first-child{width:100%;max-width:none;margin:0;justify-self:stretch} }

/* [crud 1.5.0] editing, archiving and paging look the same in every module */
.row-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.row-actions>form,.inline-form{display:inline-flex;margin:0}
.row-actions .btn.small,.inline-form .btn.small{min-height:34px;height:34px;padding:0 11px}
td .row-actions{justify-content:flex-end}
tr.is-archived{opacity:.62}
tr.is-archived td:first-child{box-shadow:inset 3px 0 0 var(--line-2)}
.tag-archived{display:inline-block;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 9px;font-size:11.5px;font-weight:700;letter-spacing:.02em;margin-inline-start:6px;white-space:nowrap}
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin-top:var(--s4)}
.pager .pg{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 12px;border-radius:var(--radius-s);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);text-decoration:none;font:600 13.5px/1 var(--body)}
.pager .pg:hover{background:var(--surface-2)}
.pager .pg.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pager .pg.off{color:var(--muted);background:var(--surface-2);border-style:dashed}
.pager .pg.gap{border:0;background:transparent;min-width:18px;color:var(--muted)}
.count-line{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:var(--s3)}
.count-line b{color:var(--ink)}
.edit-open{border:1px solid var(--brand);box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent)}
@media(max-width:860px){
  .row-actions{justify-content:flex-start}
  .pager .pg{min-width:44px;height:44px}
}

/* ===== crud-money (1.5.0) ===== */
/* Editing, deleting and voiding in the money modules.
   Only the few things app.css does not already have. No new colours: every value below
   comes from the variables the theme already defines, so light and dark both follow. */

/* The quiet "3 deleted · show" line under a list. */
.arch-line{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:var(--s3)}
.arch-line a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.arch-line a:hover{color:var(--ink)}

/* Rows that are archived, or movements that were voided: still readable, clearly out of play. */
.table tr.is-archived td,.table tr.is-void td{color:var(--muted);background:var(--surface-2)}
.table tr.is-void td.void-qty{text-decoration:line-through}
.table tr.is-void td.void-qty.no-strike{text-decoration:none}

/* The reason a movement was voided, under the line it belongs to. */
.void-why{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

/* The panel of a record being corrected, so it is obvious this is an edit and not a new entry. */
.panel.editing{border-color:var(--brand)}

/* The small form that asks why a movement is being voided, inside a table row. */
.void-form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0}
.void-form input[type=text]{flex:1 1 220px;min-width:0}
@media (max-width:640px){.void-form input[type=text]{flex-basis:100%}}

/* ===== crud-people (1.5.0) ===== */
/* Editing and deleting on the people pages: roster, doctors, documents, policies,
   payers, fax routing and tasks. Only the few things app.css does not already have.
   No new colours: every value comes from the theme variables, so light and dark both follow. */

/* The panel of a record being edited, so it is obvious this is a correction and not a new entry.
   (Same rule as crud-money.css, kept here so this block stands on its own.) */
.panel.editing{border-color:var(--brand)}

/* The row whose record is open in the form beside it. */
.table tr.is-editing td{background:var(--surface-2)}
.table tr.is-editing td:first-child{box-shadow:inset 3px 0 0 var(--brand)}

/* The earlier versions of a renewed license or a replaced policy, behind one tap. */
.doc-vers{margin-top:4px}
.doc-vers>summary{display:inline-flex;align-items:center;gap:6px;min-height:28px;color:var(--muted);font-size:12.5px;cursor:pointer}
.doc-vers>summary:hover{color:var(--ink)}
.doc-vers>ul{list-style:none;margin:4px 0 0;padding:0 0 0 2px}
.doc-vers>ul li{color:var(--muted);font-size:12.5px;line-height:1.7}
.doc-vers>ul a{font-weight:700}

/* The permission list when a login is created from a person's page. */
.perm-box{margin-top:var(--s3);border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2)}
.perm-box>summary{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;min-height:44px;padding:0 12px;line-height:44px;font-weight:700;cursor:pointer}
.perm-group{padding:8px 12px;border-top:1px solid var(--line)}
.perm-group .check{display:inline-flex;margin-inline-end:12px}

/* Two stacked buttons under a form on the phone keep their 44px targets. */
.form-actions .btn.block+.btn.block{margin-top:8px}

/* ===== cards (1.5.0) ===== */
/* Card lifecycle, 1.5.0: what changed since you last looked, the value line, a card that came back,
   the "stop asking" menu and the seen fallback. Same tokens, classes and shapes as the rest of the app. */

/* The value line under the greeting: what the app has caught so far */
.valueline{margin:6px 0 0;font-size:14px;color:var(--muted)}
.valueline a{font-weight:700}

/* "What changed since you last looked" */
.whatsnew{margin-bottom:12px}
.whatsnew .wn-group+.wn-group{margin-top:10px}
.whatsnew .sectlab{margin:0 0 4px}
.whatsnew .row-list>div{align-items:flex-start}

/* The line the card used to say, before it changed */
.card-was{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.card-was b{color:var(--ink);font-weight:700}

/* A card that was closed or parked, seen from its own page */
.card-backbox{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface-2)}
.card-backbox>p{margin:0 0 8px}
.card-backbox .actions{margin:0}

/* "Stop asking about this kind of card", inside the card's own action row */
.card-life .mute .later-menu{min-width:240px}
.card-life .mute-q{font-size:13px;font-weight:700;color:var(--ink)}
.card-life .mute-what{font-size:12.5px;color:var(--muted);margin-bottom:2px}

/* The seen beacon's no-JavaScript fallback */
.seen-form{margin:14px 0 0}

@media(max-width:600px){
  .card-life .mute .later-menu{min-width:0}
  .card-backbox{padding:10px}
  .card-backbox .btn{width:100%;min-height:44px}
}

/* ===== account (1.5.0) ===== */
/* Getting in and staying in: the forgotten-password, reset and invitation pages, the access
   panel on a user's admin page, and the calm error page. Only the few things app.css does not
   already have. No new colours: every value comes from the theme variables, so light and dark
   both follow, and every tap target stays at least 44px on the phone. */

/* The token pages have no navigation, so the column is held to a readable width. */
.account-page{max-width:620px;margin-inline:auto}
.account-page .hero{padding-block:var(--s5) 0}

/* A link or a temporary password shown once: big enough to read off a phone and to select
   with one long press, and it never pushes the panel sideways. */
.link-once{margin:var(--s3) 0 0;padding:var(--s3) var(--s4);min-height:var(--control);
  background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--radius-s);
  font-family:var(--num);font-size:15px;font-weight:700;line-height:1.5;user-select:all}
.link-once-panel{border-color:var(--warn)}

/* Choosing how a new person gets in, and the access actions on a user: each row is a whole
   tap target with its explanation under the label. */
.access-pick .check{align-items:flex-start;gap:var(--s3)}
.access-pick .check input{margin-top:3px;flex:0 0 auto}
.access-list>div{gap:var(--s3)}
.access-list .btn{flex:0 0 auto}

/* An action that asks for the password before it runs, folded away until it is wanted. */
.pw-confirm{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s3)}
.pw-confirm>summary{display:flex;align-items:center;min-height:var(--control);color:var(--muted);
  font-size:13.5px;font-weight:700;cursor:pointer}
.pw-confirm>summary:hover{color:var(--ink)}
.pw-confirm[open]>summary{color:var(--ink)}
.pw-confirm .field{max-width:320px}

/* The reference code of a failure: meant to be read out loud over the phone. */
.err-ref{font-family:var(--num);font-size:15px;color:var(--ink-2)}
.err-ref strong{font-size:17px;letter-spacing:.04em}

/* The calm page itself, and the detail only a super admin sees while debug is on. */
.panel.errpage{max-width:620px;margin-inline:auto;margin-top:var(--s6)}
.panel.errpage h1{margin:0 0 var(--s2)}
.panel.errpage .btn-row{margin-top:var(--s4)}
.err-detail{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.err-detail pre{overflow:auto;max-height:340px;margin:var(--s2) 0 0;padding:var(--s3);
  background:var(--surface-2);border-radius:var(--radius-s);font-size:12px;line-height:1.5}

/* The role pill sits on the first line of the name, even when the name wraps onto two lines or
   carries the email and the invitation note under it. app.css centres every cell in the table,
   which pushed the pill half a row down; this one table lines its cells up at the top instead.
   The selector repeats table.table so it outweighs that rule without !important. */
table.table.users-table td{vertical-align:top}
table.table.users-table td .tag{margin-top:1px}

@media(max-width:860px){
  .account-page{max-width:none}
  .access-list>div{flex-wrap:wrap}
  .access-list .btn{width:100%}
}

/* ===== ops (1.5.0) ===== */
/* Operations: search, backup, the safe import and the alarm panel.
   Only what app.css does not already carry. No new colours: every value comes from the theme's own
   variables, so light and dark both follow, and every control stays at least 44px on a phone. */

/* The one search box: full width on a phone, never a tiny field. */
.ops-search{margin:0}
.ops-search .field{margin-bottom:var(--s3)}
.ops-search input{width:100%;min-height:44px;font-size:16px}

/* A result row: the whole row is the link, with the title above and the quiet line under it. */
.row-link{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:44px;width:100%;text-decoration:none;color:inherit}
.row-link .task-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.row-link .task-text strong{word-break:break-word}
.row-link:hover .task-text strong{text-decoration:underline;text-underline-offset:2px}

/* "Where I looked": the pills are labels here, not links. */
.ops-looked .pill{cursor:default}

/* The alarm panel. The border is the one the theme already uses for danger; no new colour. */
.panel.ops-alarm{border-color:var(--err)}
.ops-alarm-msg{margin:0 0 var(--s2);white-space:normal;word-break:break-word}

/* The restore steps: numbered, with the explanation under each title so it reads on a phone. */
.ops-steps{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:var(--s3)}
.ops-steps li strong{display:block}
.ops-steps li span{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}

/* Pasting a CSV: a real box to paste into, and the example shown as it will be typed. */
.ops-csv{width:100%;min-height:150px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.5}
.ops-csv-sample{margin:0;padding:var(--s3);background:var(--surface-2);border-radius:var(--radius-s);font-size:12.5px;line-height:1.6;overflow-x:auto;white-space:pre}

/* One scheduled report, as a block inside the panel instead of a table that would not fit a phone. */
.ops-sched{border-top:1px solid var(--line);padding-top:var(--s3);margin-top:var(--s3)}
.ops-sched:first-of-type{border-top:0;padding-top:0;margin-top:0}
.ops-sched h3{margin:0;font-size:15px}

/* A note under a check table, kept off the table's own spacing. */
.ops-note{margin-top:var(--s3)}

@media (max-width:640px){
  .ops-steps{padding-left:1.1em}
  .row-link{flex-wrap:wrap}
  .row-link .btn{margin-left:auto}
}

/* ===== oauth (1.5.0) ===== */
/* Connecting an AI app: the approval screen and the list of connected apps.
   Only what app.css does not already have. No new colours: every value comes from the theme
   variables, so light and dark both follow, and every tap target stays at least 44px on the phone. */

/* The approval screen is read before anything is decided, so it is held to a readable column. */
.oauth-page{max-width:640px;margin-inline:auto;display:grid;gap:var(--s4)}
.oauth-hero{max-width:640px;margin-inline:auto}

/* What the app will and will not see: one line per point, the mark aligned with the first line. */
.oauth-list{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s3)}
.oauth-list li{display:flex;align-items:flex-start;gap:var(--s3)}
.oauth-list li>div{min-width:0}
.oauth-yes,.oauth-no{flex:0 0 auto;width:26px;height:26px;border-radius:999px;display:grid;place-items:center;margin-top:1px}
.oauth-yes{background:var(--act-soft);color:var(--act)}
.oauth-no{background:var(--warn-soft);color:var(--warn)}
.oauth-yes svg,.oauth-no svg{width:16px;height:16px}

/* Allow and Cancel: both full width on the phone, side by side from a tablet up. */
.oauth-actions{display:grid;gap:var(--s3);margin-bottom:var(--s3)}
.oauth-actions .btn{min-height:var(--control);width:100%;justify-content:center}
@media(min-width:560px){
  .oauth-actions{grid-template-columns:1fr auto}
}
.oauth-go{margin:0}
.oauth-ask code{word-break:break-all}

/* The connected apps: name and dates on the left, Disconnect on the right, stacked on the phone. */
.ai-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.ai-item{display:flex;align-items:flex-start;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-s)}
.ai-main{display:grid;gap:2px;flex:1 1 220px;min-width:0}
.ai-main span{overflow-wrap:anywhere}
.ai-act{margin:0;flex:0 0 auto}
.ai-act .btn{min-height:var(--control)}

/* ===== settings (1.5.0) ===== */
/* Settings, 1.5.0 (block F) and the four visual details of block I.
   Only what app.css does not already have: no new colours (every value is a theme variable, so
   light and dark both follow), no new shapes, and every tap target stays at least 44px on a phone. */

/* ---------- How I work: one row per setting ---------- */

/* The gentle line at the top: how much of this she has made her own. */
.cfg-filled{margin:0 0 var(--s3);color:var(--ink-2);font-size:14.5px}
.cfg-filled strong{font-family:var(--num);font-weight:800}

/* Two columns of settings on a desk, one on a phone (the auto-fit of .form-grid does it),
   with a line between the rows so a long group stays readable. */
/* These rows are not of one height (some carry a warning, some the way back), so they hang from
   the top of their line and the separators line up across the panel. */
.cfg-grid{gap:var(--s4) var(--s5);align-items:start}
.cfg-row{padding-block:var(--s3);border-top:1px solid var(--line)}
.cfg-row>label{display:block;font-weight:600}
.cfg-row .note{margin-top:var(--s1)}
/* A setting she has chosen herself is marked, not coloured in. */
.cfg-row.mine>label .tag{vertical-align:middle;margin-inline-start:var(--s1);letter-spacing:0;text-transform:none}

/* The box with its unit beside it: "30 days", "25 %". The unit never squeezes the box. */
.cfg-in{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.cfg-in input,.cfg-in select{min-height:var(--control)}
.cfg-in input[type=number]{max-width:9ch}
.cfg-in input[inputmode=decimal]{max-width:14ch}
.cfg-in>input[type=text]{width:100%}
.cfg-unit{flex:0 0 auto;color:var(--muted);font-size:13.5px;font-weight:600}

/* What she should know before she changes this one. */
.cfg-careful{color:var(--warn)}

/* "I would normally use 30 days" and the way back, under the box. */
.cfg-back{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s2)}
.cfg-back .btn{flex:0 0 auto}

/* ---------- Your offices ---------- */

/* What the office's heading looks like on a printed page, shown as it will read. */
.lh-preview{margin:0 0 var(--s4)}
.letterhead{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-s)}
.letterhead img{width:48px;height:48px;object-fit:contain;flex:0 0 auto}
.letterhead .lh-name{font-family:var(--display);font-weight:800;font-size:16px;color:var(--brand)}
.letterhead .lh-line{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .letterhead .lh-name{color:var(--ink)}}
:root[data-theme="dark"] .letterhead .lh-name{color:var(--ink)}

/* Choosing a picture uses the app's own file field (a button plus the chosen name): nothing to add,
   except that the button is a full tap target on a phone. */
@media(max-width:860px){ .file-field .btn{min-height:var(--control);height:var(--control)} }

/* ---------- Your team ---------- */

/* A person, and the invitation to add one, open from one line: the line says where they work and
   how much they may touch, so a team of five is five lines instead of five pages. */
#add>summary+.panel-sub,.team-row>summary+.panel-sub{margin-top:10px}
.team-row .panel-foot{margin-top:var(--s4)}

/* One module of permissions per block, the words inside it wrapping like checkboxes should. */
.perms{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s3) var(--s4);margin-top:var(--s2)}
.perm-mod{min-width:0}
.perm-lab{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1)}
.perm-row{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.perm-row .check{min-height:36px}

/* ---------- What the messages say ---------- */

.tpl-em{font-size:18px;line-height:1}
.tpl-peek{margin-top:var(--s1);font-style:italic;overflow-wrap:anywhere}
.tpl-tokens code{font-size:13.5px}
.tpl-pair textarea{width:100%;min-height:104px;resize:vertical;line-height:1.5}
.tpl-field.mine>label .tag{vertical-align:middle;margin-inline-start:var(--s1);letter-spacing:0;text-transform:none}

/* ---------- The hub ---------- */

.set-hub .row-list>div,.set-when>div{align-items:flex-start;gap:var(--s4)}
.set-hub .row-list>div>div:first-child,.set-when>div>div:first-child{min-width:0}
.set-hub .btn,.set-when .btn{flex:0 0 auto}

/* On a phone every one of these screens' own buttons is a whole 44px target, even the quiet ones:
   "Back to normal", "Open", "Change the hours", "Change the words", the team and logo actions. */
@media(max-width:860px){
  .cfg-back .btn.small,.set-hub .row-list .btn.small,.set-when .btn.small,
  .tpl-list .row-actions .btn.small,.team-foot .btn.small,.clinic-foot .btn.small,
  .btn.small.set-go{min-height:var(--control);height:var(--control)}
  .perms .check,.check-row .check{min-height:var(--control)}
}

/* ---------- Block I · 11. The comparison line under a KPI tile ---------- */
/* It was clipped at three lines, so "insurers still owe $20,203.00" never arrived.
   The tile grows instead: the numbers that matter are worth the two extra lines. */
.kpi em{display:block;-webkit-line-clamp:unset;-webkit-box-orient:unset;overflow:visible}
.kpi.brand em{-webkit-line-clamp:unset}

/* ---------- Block I · 12. The period filter as one line ---------- */
/* On a phone the chips cost three rows before the first number. Closed, the bar says what is in
   force; open, every chip is the same submit button it always was. On a desk nothing is hidden. */
.filterbar>summary h2{display:inline;margin:0;font-size:15px}
.filterbar>summary .muted{display:block;margin-top:2px;font-weight:600;font-size:13px}
.filterbar>summary{align-items:flex-start}
.filterbar .filters{margin-block:var(--s3) 0}
.filterbar .filters+.filters{margin-top:var(--s2)}
/* The bar reads the same way on a desk, where it saves a third of the first screen too: the line
   already says the period, the office and the view, and the chips are one click under it. It is the
   same shape as "More filters" right below it, which has always opened this way. */
@media(min-width:861px){ details.filterbar>summary h2{font-size:15px} }

/* ---------- Block I · 13. Growth: the book titles and the ideas under them ---------- */
/* The titles were set tighter than the ideas; both read as body text now. */
.gr-library .panel-head h2{letter-spacing:normal}

/* ---------- The office heading on a printed page ---------- */
/* Out of the way on screen, the first thing on paper and in a saved PDF. */
.printhead{display:none}
@media print{
  .printhead{display:block;margin-bottom:var(--s4)}
  .printhead .letterhead{background:none;border:0;padding:0}
  .printhead .ph-what{margin-top:var(--s2);font-size:12px;color:var(--muted)}
  .filterbar{display:none!important}
}

/* [settings 1.5.0] "How I work": each group opens on its own, so the phone shows a short list of headings */
.cfg-group{padding:0}
.cfg-group>summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);display:flex;align-items:baseline;gap:10px;justify-content:space-between;min-height:var(--control)}
.cfg-group>summary::-webkit-details-marker{display:none}
.cfg-group>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-inline-start:auto;flex:none;transition:transform .15s}
.cfg-group[open]>summary::after{transform:rotate(-135deg)}
.cfg-group>summary:hover{background:var(--surface-2)}
.cfg-group>*:not(summary){padding-inline:var(--s5)}
.cfg-group>*:last-child{padding-bottom:var(--s5)}
@media(max-width:860px){.cfg-group>summary{padding:var(--s4)}.cfg-group>*:not(summary){padding-inline:var(--s4)}}
.wn-more{margin-top:var(--s2)}

/* [smtp 1.5.4] the mail-server conversation, read as a list of steps */
.smtp-diag .table td:first-child{white-space:nowrap;font-weight:600}
.smtp-diag .table td{vertical-align:top}
@media(max-width:860px){.smtp-diag .table td:first-child{white-space:normal}}

/* [push 1.5.6] the device check under the notifications button */
.push-check{margin-top:var(--s2)}
.push-what{list-style:none;margin:var(--s2) 0 0;padding:0;font-size:13px}
.push-what li{padding:3px 0;color:var(--muted)}
.push-what li.yes{color:var(--good-ink)}
.push-what li.no{color:var(--err);font-weight:600}