/* Piggy page shell, linked by every page after the shared /ui/ui.css (xpoes123/toolkit web/ui).
   Components (rows, section heads, bars, controls, densities) come from toolkit; this file is only
   the app shell: page padding, column width, the bottom sheet, the load-error block. */
:root{
  --tabbar-h:57px;   /* mobile bottom tab bar (nav.js), excluding the safe area */
  /* legacy local aliases, kept so older inline styles still resolve */
  --dim:var(--text-2);
  --faint:var(--line-2);
  --blue-d:var(--line-2);
  --amber:var(--warn);
  --mono:var(--font-mono);
  --sans:var(--font-sans);
}

*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}

/* iPhone PWA: viewport-fit=cover + black-translucent status bar, so pad <html> for the notch. */
html{
  background:var(--bg);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  -webkit-text-size-adjust:100%;
}
/* nav.js adds .has-tabbar where the mobile bottom bar shows; keep the last row clear of it. */
@media (max-width:599px){
  html.has-tabbar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}

body.ui-app{padding:20px 20px 40px; overflow-x:hidden}
@media (min-width:600px){ body.ui-app{padding:28px 32px 56px} }
[data-density="terminal"] body.ui-app{padding:12px 12px 40px}
@media (min-width:600px){ [data-density="terminal"] body.ui-app{padding:20px 24px 48px} }
.wrap{max-width:480px; margin:0 auto; display:flex; flex-direction:column; gap:var(--space-5)}
@media (min-width:600px){ .wrap{max-width:600px} }   /* fits the desktop Finance sub-nav */
.wrap.wide{max-width:720px}
@media (min-width:1024px){ .wrap.ui-cols{display:grid; max-width:1120px} }
header{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap}

/* money and counts: the sans with tabular lining figures (mono is for small metadata) */
.num{font-family:var(--font-sans); font-variant-numeric:tabular-nums lining-nums}
[data-density="terminal"] .num{font-family:var(--font-mono)}
.ok,.pos{color:var(--ok)} .bad,.neg{color:var(--bad)}
a.quiet{color:var(--text-2); text-decoration:none} a.quiet:hover{color:var(--text)}

/* Bottom sheet (recategorize etc.): the one raised surface while open. */
.sheet{position:fixed; inset:0; z-index:9600}
.sheet .scrim{position:absolute; inset:0; background:rgb(0 0 0 / .55)}
.sheet .panel{position:absolute; left:0; right:0; bottom:0; max-height:82vh; overflow:auto; max-width:560px; margin:0 auto;
  background:var(--surface-3); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:var(--space-2) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom))}
.sheet .grip{width:36px; height:4px; border-radius:var(--radius-pill); background:var(--line-2); margin:2px auto var(--space-3)}
.sheet h3{margin:0; font-size:var(--fs-lead); font-weight:500}
.sheet .sm{font-size:var(--fs-small); color:var(--muted); margin:2px 0 var(--space-3)}
.sheet .sec{font:500 var(--fs-meta)/1.4 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-2);
  margin:var(--space-4) 0 var(--space-2)}
.sheet .grid{display:flex; flex-wrap:wrap; gap:var(--space-2)}
.sheet .grid button{min-height:var(--touch); padding:0 var(--space-4); border-radius:var(--radius); border:1px solid var(--line-2);
  background:transparent; color:var(--text); font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:var(--space-2)}
.sheet .grid button:hover{border-color:var(--text-2)}
.sheet .grid button.sug{border-color:var(--accent)}
.sheet .grid button:disabled{opacity:.5}
.sheet .foot{display:flex; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-4)}
.sheet .foot a,.sheet .foot button{min-height:var(--touch); display:inline-flex; align-items:center; padding:0;
  color:var(--text-2); background:none; border:0; text-decoration:none; cursor:pointer}
.sheet .foot a:hover,.sheet .foot button:hover{color:var(--text)}
.sheet label{display:flex; align-items:center; gap:var(--space-2); min-height:var(--touch); font-size:var(--fs-small);
  color:var(--text-2); margin-top:var(--space-2)}

/* "Couldn't load" block (app.js loadError): shown instead of sample data when an API call fails. */
.loaderr{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:var(--space-4) 0;
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-1)}
.loaderr .t{color:var(--bad); font-weight:500}
.loaderr .s{color:var(--muted); font-size:var(--fs-small); line-height:1.45}
.loaderr button{margin-top:var(--space-2); min-height:var(--touch); padding:0 var(--space-4); border-radius:var(--radius);
  border:1px solid var(--line-2); background:transparent; color:var(--text); cursor:pointer}
.loaderr button:disabled{opacity:.6; cursor:default}

/* Loading placeholder */
.skel{min-height:150px; border-radius:var(--radius-lg); background:var(--surface); animation:fhpulse 1.2s ease-in-out infinite alternate}
@keyframes fhpulse{from{opacity:.45} to{opacity:.9}}
@media (prefers-reduced-motion:reduce){ .skel{animation:none} }

/* cumulative spend chart (app.js cumChart) */
.cumchart .hd{display:flex; justify-content:space-between; font:10px/1.4 var(--font-mono); color:var(--muted)}
.cumchart .box{position:relative; height:72px; margin-top:var(--space-2)}
.cumchart svg{display:block; width:100%; height:100%; overflow:visible}
.cumchart .pt{position:absolute; width:5px; height:5px; border-radius:var(--radius-pill); background:var(--accent)}
.cumchart .lg{display:flex; gap:var(--space-3); font:10px/1.4 var(--font-mono); color:var(--muted); margin-top:var(--space-1)}