/* Books: reset, type and the shell (rail, top bar, page). */
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--f-ui);font-size:14px;line-height:1.45;color:var(--text);background:var(--ground);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:'kern','liga','calt'}
body{margin:0;min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4,p,dl,dd,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;margin:0}
button{background:none;border:0;padding:0;cursor:pointer}
img,svg{display:block}
table{border-collapse:collapse;border-spacing:0;width:100%}
[hidden]{display:none!important}
::selection{background:var(--brand-tint)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-1)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum','lnum';letter-spacing:0;white-space:nowrap}
.num .c{color:var(--text-3)}
.num .pp{display:none}
.r .pp,.sheet-tot .pp,.irow-amt .pp,.hbar .pp,.xlist .pp,.sug-line .pp,.list .end .pp,.rec-line .pp,.flag-end .pp,.weekitems .pp{display:inline;visibility:hidden;user-select:none}
.num.neg{color:var(--neg)}
.num.neg .c,.num.pos .c{color:inherit;opacity:.75}
.num.zero{color:var(--text-4)}
.mono{font-family:var(--f-mono);font-size:12px}
.muted{color:var(--text-3)}
.pos{color:var(--pos)}.negc{color:var(--neg)}.warnc{color:var(--warn)}
.nw{white-space:nowrap}
.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ── shell ─────────────────────────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--ground);z-index:30}
.rail-brand{display:flex;align-items:center;height:68px;padding:0 20px;flex:none}
.rail-brand img{height:28px;width:auto}
.rail-brand .on-dark{display:none}
[data-theme="dark"] .rail-brand .on-dark{display:block}
[data-theme="dark"] .rail-brand .on-light{display:none}
.rail-nav{flex:1;overflow-y:auto;padding:6px 10px 12px;scrollbar-width:thin}
.rail-group{margin-top:14px}
.rail-group:first-child{margin-top:0}
.rail-label{display:block;padding:0 10px 6px;font-size:11.5px;font-weight:500;color:var(--text-4)}
.nav{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--r-2);color:var(--text-2);font-weight:500;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.nav svg{width:18px;height:18px;color:var(--text-3);transition:color var(--t) var(--ease)}
.nav:hover{background:var(--hover);color:var(--text)}
.nav:active{background:var(--press)}
.nav[aria-current="page"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1),0 0 0 1px var(--line)}
.nav[aria-current="page"] svg{color:var(--brand)}
.nav[aria-current="page"]::before{content:'';position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--acid)}
.nav .count{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--plain-tint);color:var(--text-2);font-family:var(--f-num);font-size:11.5px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.nav .count.hot{background:var(--brand-tint);color:var(--brand)}
.rail-foot{flex:none;border-top:1px solid var(--line)}
.me{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:0 14px 0 20px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-tint);color:var(--brand);display:grid;place-items:center;font-weight:600;font-size:12px;font-family:var(--f-display)}
.me b{display:block;font-weight:600;line-height:1.25}
.me small{display:block;color:var(--text-3);font-size:12px;line-height:1.25}

.scrim{display:none}
.stage{min-width:0;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:20;height:var(--bar);display:flex;align-items:center;gap:10px;padding:0 var(--gutter);background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bar>*{flex:none;white-space:nowrap}
.bar .grow{flex:1;min-width:0}
.bar .menu-btn{display:none}
.entity{display:inline-flex;padding:3px;border-radius:var(--r-2);background:var(--sunken);gap:2px}
.entity button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:6px;font-weight:500;color:var(--text-2);transition:background var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.entity button:hover{color:var(--text)}
.entity button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1),0 0 0 1px var(--line)}
.month{display:inline-flex;align-items:center;height:34px;border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface)}
.month button{width:30px;height:32px;display:grid;place-items:center;color:var(--text-3);border-radius:7px;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.month button:hover:not(:disabled){background:var(--hover);color:var(--text)}
.month button:disabled{opacity:.35;cursor:default}
.month button svg{width:16px;height:16px}
.month select{appearance:none;border:0;background:none;height:32px;padding:0 4px;font-weight:600;text-align:center;text-align-last:center;cursor:pointer;min-width:132px}
.month .lock{width:14px;height:14px;margin-right:8px;color:var(--text-3)}
.search{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:8px;height:34px;flex:0 1 300px;min-width:200px;padding:0 8px 0 10px;border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface);color:var(--text-3);text-align:left;transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.search:hover{border-color:var(--line-3);color:var(--text-2)}
.search svg{width:16px;height:16px}
kbd{font-family:var(--f-ui);font-size:11px;font-weight:500;padding:1px 5px;border-radius:4px;border:1px solid var(--line-2);color:var(--text-3);background:var(--surface-2)}
.sync{display:inline-grid;grid-template-columns:8px auto;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:var(--r-2);color:var(--text-2);font-size:12.5px;font-weight:500;transition:background var(--t) var(--ease)}
.sync:hover{background:var(--hover)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--text-4)}
.dot.ok{background:var(--pos)}.dot.bad{background:var(--neg)}.dot.warn{background:var(--warn)}
.sample{height:22px;padding:0 8px;border-radius:11px;background:var(--warn-tint);color:var(--warn);font-size:11.5px;font-weight:600;display:inline-grid;place-items:center;white-space:nowrap}
.sample.live{background:var(--pos-tint);color:var(--pos)}

.page{flex:1;padding:24px var(--gutter) 56px;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
.page>*{flex:none}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.page-head h1{font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.01em}
.page-head .eyebrow{display:block;color:var(--text-3);font-size:12.5px;font-weight:500;margin-bottom:6px}
.page-head p{color:var(--text-2);margin-top:6px;max-width:none}
.page-head .actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stack{display:grid;gap:var(--gap);align-content:start}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
.g-side{grid-template-columns:minmax(0,1fr) 360px}
.row{display:flex;align-items:center;gap:8px;min-width:0}
.row.wrap{flex-wrap:wrap}
.row.between{justify-content:space-between}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar .grow{flex:1;min-width:0}
.toolbar .select{width:auto;flex:0 1 auto;max-width:100%;height:34px}
.toolbar label.row>.muted{white-space:nowrap}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.page.enter>*{animation:rise 420ms var(--out) both;animation-delay:calc(var(--i,0)*45ms)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── narrower screens ──────────────────────────────────────────────────────────────────────── */
/* what the bar holds, widest first: the feed's words go (the dot stays), then search becomes its icon, then the menu
   becomes a drawer, then the sample note goes, then the month takes its own row. Measured by scripts/squeeze.mjs. */
@media (max-width:1340px){.sync span{display:none}.sync{grid-template-columns:8px;padding:0 13px}}
@media (max-width:1180px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-main,.g-side{grid-template-columns:minmax(0,1fr)}.search{flex:none;width:44px;min-width:0;grid-template-columns:16px;padding:0 13px}.search span,.search kbd{display:none}}
@media (max-width:1040px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;inset:0 auto 0 0;width:min(86vw,300px);transform:translateX(-102%);transition:transform 240ms var(--out);background:var(--surface)}
  .shell.menu-open .rail{transform:none;box-shadow:var(--shadow-3)}
  .scrim{display:block;position:fixed;inset:0;background:var(--scrim);z-index:25;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease)}
  .shell.menu-open .scrim{opacity:1;pointer-events:auto}
  .bar .menu-btn{display:grid}
  .me .btn.icon.sm{width:36px;height:36px}
}
@media (max-width:900px){
  .g2,.g3{grid-template-columns:minmax(0,1fr)}
  .sync{padding:0 8px}
  .bar{gap:8px}
  .page{padding-top:18px}
  .page-head h1{font-size:22px}
}
@media (max-width:780px){.sample{display:none}}
@media (max-width:700px){
  .bar{height:auto;flex-wrap:wrap;padding:8px var(--gutter);row-gap:8px}
  .bar .sync{display:none}
  .bar .month{order:9;width:100%}
  .bar .month select{flex:1;min-width:0}
  .bar .search{width:34px;padding:0 8px}
  .inbox-detail,.setnav,.rec{top:16px}
}
/* on a phone a row of tabs wraps onto a second line rather than hiding its last tab off the edge */
@media (max-width:560px){.toolbar .seg,.page-head .seg,.card-h .seg{flex-wrap:wrap;overflow:visible}}
@media (max-width:560px){.g4{grid-template-columns:minmax(0,1fr)}.entity button{padding:0 10px}.entity .emark{display:none}}