/* UI Patterns v0.2 layer (guide sections 1-7, 9). Loaded after demo.css on every app page. Square, flat, red-black. */
:root{--lift:0 1px 2px rgb(0 0 0 / 8%),0 2px 6px rgb(0 0 0 / 6%);--raise:0 12px 40px -8px rgb(0 0 0 / 28%);--ease:cubic-bezier(.2,.8,.2,1)}
/* 3. Typography: kept as the original prototype (Bold) so pages look as before; only line length is capped */
.page-head p,.card-head p,.note span{max-width:75ch}
/* 2. Page widths: reading 1040, list 1440, workspace 1760, left-aligned beside the menu */
html[data-width] .page{margin-left:0;margin-right:auto;box-sizing:border-box;width:100%}
html[data-width="reading"] .page{max-width:1040px}
html[data-width="list"] .page{max-width:1440px}
html[data-width="workspace"] .page{max-width:1760px}
@media (min-width:1600px){html[data-width="workspace"] .inbox{grid-template-columns:300px minmax(0,1fr)}}
/* 4. Finish: translucent top bar, state layers, hairline tables */
.table tr:hover td,.t tr:hover td{background:#f7f6f3}
.table td,.table th{border-bottom:1px solid var(--line)}
.btn{transition:background .15s,box-shadow .15s}.btn:active{transform:translateY(1px)}
span.btn{cursor:pointer;user-select:none}
.btn:focus-visible,.p-menu button:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.btn.final{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.text{border:0;background:none;color:var(--red-strong);padding:0 6px;height:32px}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex:none;vertical-align:-3px}
.nav a{display:flex;align-items:center;gap:10px}.nav a .ic{opacity:.85}
.badge .ic{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.badge.dot.has-ic::before{display:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* toolbar over every table */
.p-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px}
.p-tools .grow{flex:1}
.p-tools .p-search{height:40px;min-width:240px;padding:0 12px;border:1px solid #8f8a83;font:15px var(--body);border-radius:0;box-sizing:border-box}
.p-tools .p-count{font-size:13px;color:var(--ink-3)}
@media (max-width:640px){.p-tools{flex-direction:column;align-items:stretch}.p-tools .p-search{min-width:0;width:100%}.p-tools .btn.primary{width:100%;height:48px}}
.p-empty-c{display:flex;gap:8px;align-items:center;padding:12px 4px;font-size:14px;color:var(--ink-2)}
.p-empty-c .ic{width:20px;height:20px}
.p-empty-c a{color:var(--red-strong);font-weight:600;cursor:pointer}
/* full empty state (6) */
.p-empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:40px 16px;max-width:520px;margin:0 auto}
.p-empty .tile40{width:64px;height:64px;background:var(--sunk);display:grid;place-items:center}
.p-empty .tile40 .ic{width:40px;height:40px;stroke-width:1.5}
.p-empty h3{margin:0;font:700 18px var(--body)}.p-empty p{margin:0;color:var(--ink-2);max-width:60ch}
/* row Actions menu, select menu, popover (top layer: fixed, above everything) */
.p-menu{position:fixed;z-index:1000;min-width:200px;max-height:320px;overflow:auto;background:#fff;box-shadow:var(--raise);padding:4px 0;display:grid;animation:pIn .15s var(--ease)}
.p-menu button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;padding:9px 14px;font:14px var(--body);color:var(--ink);cursor:pointer}
.p-menu button:hover,.p-menu button.act{background:var(--sunk)}
.p-menu button[aria-selected="true"]{font-weight:600}
.p-menu button .tick{width:16px;flex:none}
.p-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.p-menu .grp{font:600 12px var(--body);color:var(--ink-3);padding:8px 14px 2px;text-transform:uppercase;letter-spacing:.04em}
.p-menu input{margin:4px 8px 6px;height:36px;border:1px solid #8f8a83;padding:0 10px;font:14px var(--body)}
.p-menu .none{padding:9px 14px;color:var(--ink-3);font-size:14px}
.p-menu .sheet-h{display:none}
@media (max-width:640px){.p-menu.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;max-height:70vh;padding-bottom:16px}.p-menu.sheet .sheet-h{display:block;font:700 16px var(--body);padding:14px}}
.p-select{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;height:40px;min-width:220px;padding:0 12px;border:1px solid #8f8a83;background:#fff;font:15px var(--body);cursor:pointer;text-align:left;border-radius:0;box-sizing:border-box}
.p-act{white-space:nowrap}
/* dialogs: pop-up (centre), confirm, side panel (right, 520px; full screen on phone) */
dialog.p-dlg{border:0;padding:0;box-shadow:var(--raise);max-width:min(480px,calc(100vw - 32px));width:100%;color:var(--ink);font-family:var(--body)}
dialog.p-dlg::backdrop{background:rgb(26 26 26 / 45%);backdrop-filter:blur(2px)}
dialog.p-dlg[open]{animation:pGrow .2s var(--ease)}
dialog.p-sheet{margin:0 0 0 auto;height:100vh;max-height:100vh;max-width:520px;width:100%}
dialog.p-sheet[open]{animation:pSlide .22s var(--ease)}
@media (max-width:640px){dialog.p-sheet{max-width:100vw}}
.p-dlg form{display:grid;gap:16px;padding:24px;min-height:100%;box-sizing:border-box;align-content:start}
.p-sheet form{grid-template-rows:auto auto 1fr auto}
.p-dlg .dh{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.p-dlg h2{margin:0;font:700 20px/1.2 var(--body)}
.p-dlg .dh p{margin:4px 0 0;color:var(--ink-2);font-size:14px}
.p-dlg .x{background:none;border:0;font:600 13px var(--body);cursor:pointer;color:var(--ink-2);display:inline-flex;gap:4px;align-items:center;padding:4px}
.p-dlg .p-fields{display:grid;gap:14px;align-content:start}
.p-dlg fieldset{border:0;padding:0;margin:0;display:grid;gap:14px}.p-dlg legend{font:600 12px var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);padding:0 0 8px}
.p-dlg label{font:600 13.5px var(--body);display:grid;gap:6px}
.p-dlg .hint{font-weight:400;font-size:13px;color:var(--ink-3)}
.p-dlg input,.p-dlg textarea{height:40px;border:1px solid #8f8a83;padding:0 12px;font:15px var(--body);border-radius:0;box-sizing:border-box;width:100%}
.p-dlg textarea{height:80px;padding:8px 12px;resize:vertical}
.p-dlg .err{color:var(--red-strong);font-size:13px;font-weight:600;display:flex;gap:6px;align-items:center}
.p-dlg .sum{border-left:4px solid var(--red-strong);background:var(--red-soft);padding:10px 12px;font-size:14px}
.p-dlg .sum a{color:var(--red-strong);font-weight:600}
.p-dlg .warn{display:flex;gap:10px;align-items:flex-start;background:var(--attn-bg);padding:10px 12px;font-size:14px}
.p-dlg .warn .ic{color:var(--attn)}
.p-dlg .df{display:flex;gap:8px;flex-wrap:wrap}
@keyframes pIn{from{opacity:0;transform:translateY(-4px)}}@keyframes pGrow{from{opacity:0;transform:scale(.97)}}@keyframes pSlide{from{transform:translateX(40px);opacity:.4}}
/* toasts */
.p-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1100;display:grid;gap:8px;width:max-content;max-width:calc(100vw - 32px)}
.p-toast{display:flex;gap:10px;align-items:center;background:var(--ink);color:#fff;padding:12px 16px;font:600 14px var(--body);box-shadow:var(--raise);animation:pIn .2s var(--ease)}
.p-toast .ic{color:#8fd3a8}
tr.p-hl td,.p-hl{animation:pHl 2.5s var(--ease)}@keyframes pHl{0%,40%{background:#fff4c2}}
/* "?" glossary help */
.hq{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:4px;border:1px solid var(--ink-3);background:#fff;color:var(--ink-2);font:700 11px var(--body);cursor:pointer;vertical-align:1px;padding:0;border-radius:0}
.p-pop{position:fixed;z-index:1000;max-width:300px;background:var(--ink);color:#fff;padding:12px 14px;font:14px/1.4 var(--body);box-shadow:var(--raise);display:grid;gap:6px}
.p-pop b{font-weight:700}.p-pop span{color:#ddd}
/* inline edit */
.p-inline{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.p-inline input{height:32px;border:1px solid var(--ink);padding:0 8px;font:14px var(--body);min-width:200px}
.p-inline label{font-size:12px;color:var(--ink-3);display:grid;gap:2px}
/* 7.3 selection, sticky head, sticky page bar */
.p-tw{position:relative}
.p-tw thead th,.p-tw tr:first-child th{position:sticky;top:64px;background:#fff;z-index:2}
@media (max-height:760px){.p-tw thead th,.p-tw tr:first-child th,.p-pager,.p-bulk{position:static!important}}
.p-tw td.cb,.p-tw th.cb{width:36px}.p-tw input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink)}
.p-bulk{position:sticky;top:64px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:8px 12px;margin-bottom:8px}
.p-bulk .btn{height:32px}.p-bulk .btn:not(.primary){background:transparent;color:#fff;border-color:#fff}
.p-bulk a{color:#fff;text-decoration:underline;cursor:pointer;font-weight:600}
.p-pager{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;background:#fff;border-top:1px solid var(--ink);padding:8px 0}
.p-pager .pages{display:flex;gap:2px}.p-pager .pages button{min-width:32px;height:32px;border:1px solid var(--line);background:#fff;font:600 13px var(--body);cursor:pointer}
.p-pager .pages button[aria-current]{background:var(--ink);color:#fff;border-color:var(--ink)}
.p-pager .pages button:disabled{opacity:.4;cursor:default}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
/* 7.5 waiting */
.p-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:14px}
.p-steps li{display:flex;gap:8px;align-items:center;color:var(--ink-3)}
.p-steps li.on{color:var(--ink);font-weight:600}.p-steps li.done{color:var(--ok)}
.p-steps .dot{width:18px;height:18px;display:grid;place-items:center}
.p-spin{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;animation:pSpin .8s linear infinite}@keyframes pSpin{to{transform:rotate(360deg)}}
.btn[aria-busy="true"]{opacity:.75;pointer-events:none}
.skel td{color:transparent!important}.skel td::after{content:"";display:block;height:12px;background:var(--sunk);margin-top:-14px}
.chip,.badge,.input,.select{border-radius:0!important}button.chip{cursor:pointer;height:32px;font:600 13px var(--body)}
/* workbook sheet pages: wide sheets scroll sideways, one line per row like Excel */
html[data-width] body[data-page="wb"] .p-tw{overflow-x:auto}
body[data-page="wb"] .p-tw td,body[data-page="wb"] .p-tw th{white-space:nowrap}
body[data-page="wb"] .p-tw{max-height:calc(100vh - 190px);overflow:auto}
body[data-page="wb"] .p-tw thead th{position:sticky;top:0;z-index:2;background:#fff}

/* Shell: fixed full-height menu with its own scroll; person block pinned at the bottom; content scrolls on the right */
@media (min-width:821px){
  html .app{align-items:start}
  html[data-look] .sidebar{position:sticky;top:0;height:100vh;min-height:0;max-height:100vh;display:flex;flex-direction:column;overflow:hidden}
  .sidebar .brand{flex:none}
  .sidebar .nav{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent}
  .sidebar .kr-person{flex:none;margin-top:auto}
}
/* the branch bar stays under the top of the window; table column names stick under it */
.scope{box-shadow:0 1px 0 rgb(0 0 0 / 15%)}
/* Phone: top bar with a Menu button; the menu opens as a drawer from the left */
.kr-menu-btn{display:none}
@media (max-width:820px){
  html[data-look] .sidebar{position:fixed;inset:0 auto 0 0;width:min(86vw,320px);height:100vh;z-index:900;transform:translateX(-105%);transition:transform .22s var(--ease);overflow:hidden;display:flex;flex-direction:column;border:0}
  html.kr-drawer .sidebar{transform:none;box-shadow:var(--raise)}
  html[data-look] .sidebar .nav{display:block;flex:1;overflow-y:auto;columns:auto}
  html[data-look] .sidebar .nav a{display:flex}
  html[data-look] .nav-label{display:block}
  .kr-scrim{display:none;position:fixed;inset:0;background:rgb(26 26 26 / 45%);z-index:899}
  html.kr-drawer .kr-scrim{display:block}
  html.kr-drawer body{overflow:hidden}
  .kr-menu-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:600 14px var(--body);cursor:pointer}
  .topbar .crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
}
/* per-aggregator download: outlined, brand red, under the count in Transactions */
.kr-dl.btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;margin-top:6px;border:1px solid var(--red-strong);background:#fff;color:var(--red-strong);font:600 13px var(--body);border-radius:0;white-space:nowrap}
.kr-dl.btn:hover{background:var(--red-soft)}
.kr-dl .ic{width:16px;height:16px}
td.num .kr-dl{float:right;clear:both}
/* Your account form (uses the sign-in field styles outside the sign-in card) */
.kr-form .field{display:grid;gap:6px}.kr-form label{font:600 13.5px var(--body)}
.kr-form .in{display:block;width:100%;height:40px;box-sizing:border-box;padding:0 64px 0 12px;border:1px solid #8f8a83;background:#fff;font:15px var(--body);color:var(--ink);border-radius:0}
.kr-form .in:focus{outline:2px solid var(--ink);outline-offset:1px}
.kr-form .a-pw button{top:4px;height:32px}
.kr-form .a-err svg,.kr-form .a-ok svg{width:18px;height:18px}
#everywhere{width:auto}
.p-bulk[hidden],.p-pager[hidden],.p-empty-c[hidden],.p-tools [hidden]{display:none!important}
.inbox{overflow:clip}
.p-bulk:not([hidden]) + .p-tw thead th{top:calc(64px + var(--kr-bulk-h,48px))}
/* role-gated actions: visible but clearly not available, with the reason on hover/focus and in a message on click */
.kr-locked{opacity:.45;cursor:not-allowed!important;filter:grayscale(1)}
.nav a[hidden],.nav-label[hidden]{display:none!important}
/* table filters */
.p-fbtns{display:contents}
.p-fbtn{height:40px}.p-fbtn.on{border-color:var(--ink);font-weight:600}
.p-fpop{padding:6px 0;min-width:240px}
.p-fopt{display:flex;gap:8px;align-items:center;padding:8px 14px;font:14px var(--body);cursor:pointer}.p-fopt:hover{background:var(--sunk)}
.p-fopt input{width:18px;height:18px;accent-color:var(--brand,#c8102e)}
.p-frange{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:8px 14px}.p-frange label{display:grid;gap:4px;font-size:13px;color:var(--ink-3)}
.p-frange input{height:40px;border:1px solid #8f8a83;padding:0 8px;font:14px var(--body);border-radius:0;min-width:0}
.p-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.p-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:1px solid var(--line);background:var(--sunk);font:13px var(--body);color:var(--ink);cursor:pointer;border-radius:16px}
.p-chip b{font-size:15px}.p-chip.clear{background:none;border-color:transparent;text-decoration:underline}
.p-chip.locked{cursor:default}.p-chip .ic{width:14px;height:14px}
@media (max-width:640px){.p-fbtns{display:flex;flex-wrap:wrap;gap:6px}.p-fbtn{flex:1 1 45%}}