/* Reco — mobile-first design system. Single global stylesheet linked by every page. */
:root{
  --bg:#ffffff; --surface:#f4f3ef; --card:#ffffff;
  --ink:#17140f; --muted:#6c6660; --line:#e5e1d9;
  --accent:#0f6e5c; --accent-ink:#0b5446; --accent-weak:#e6f1ed;
  --alert:#a2560a; --alert-weak:#fbf0e0;
  --danger:#b42318;
  --radius:14px; --ctrl:52px; --pad:16px;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(20,17,12,.06);
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--surface);
  font-size:17px; line-height:1.55; text-align:left; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink)}
.wrap{max-width:640px; margin:0 auto; padding:0 var(--pad)}

/* App bar (sticky) */
.appbar{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.3) blur(8px); border-bottom:1px solid var(--line)}
.appbar .bar{max-width:640px; margin:0 auto; padding:12px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{margin:0; font-size:21px; font-weight:800; letter-spacing:.01em}
.brand small{margin-left:8px; font-size:13px; font-weight:500; color:var(--muted)}
.bar-actions{display:flex; align-items:center; gap:8px}

/* Pills / chips */
.pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px;
  padding:5px 12px; font-size:14px; font-weight:700; text-decoration:none}
.pill-alert{background:var(--alert-weak); color:var(--alert)}
.pill-ok{background:var(--accent-weak); color:var(--accent-ink)}
.pill-quiet{background:var(--surface); color:var(--muted); font-weight:600}
.chip{display:inline-block; border:1px solid var(--line); border-radius:999px;
  padding:3px 10px; font-size:13px; color:var(--muted); background:var(--bg)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--ctrl); padding:0 20px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); font-size:16px; font-weight:700; cursor:pointer;
  text-decoration:none; -webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:active{background:var(--accent-ink)}
.btn-block{width:100%}
.btn-lg{min-height:60px; font-size:18px}
.link-muted{background:none; border:none; color:var(--muted); font-size:14px;
  padding:10px 8px; min-height:44px; cursor:pointer; text-decoration:none}
.backlink{display:inline-flex; align-items:center; gap:6px; min-height:44px;
  color:var(--accent-ink); text-decoration:none; font-weight:700; font-size:15px}

/* Forms */
.page{font-size:22px; font-weight:800; margin:14px 0 4px}
.hint{color:var(--muted); font-size:14px; margin:4px 0 0}
label.field{display:block; margin:0 0 14px}
label.field>span{display:block; font-size:14px; font-weight:700; color:var(--muted); margin-bottom:6px}
input,select,textarea{width:100%; min-height:var(--ctrl); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px; font-size:16px; font-family:inherit; color:var(--ink); background:var(--bg)}
textarea{min-height:auto; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
/* Paired fields: stack full-width on phones (avoids date/amount overlap), side-by-side ≥460px */
.row2{display:flex; gap:10px; flex-wrap:wrap}
.row2>*{flex:1 1 100%; min-width:0}
@media (min-width:460px){ .row2>*{flex:1 1 0} }

/* Ledger cards */
.cards{display:flex; flex-direction:column; gap:10px; padding:12px 0 132px}
.card{display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow); text-decoration:none; color:inherit}
.card:active{transform:translateY(1px)}
.card .top{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.card .payee{font-weight:700; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.card .amount{font-variant-numeric:tabular-nums; font-weight:800; font-size:19px; white-space:nowrap}
.card .meta{display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap}
.card .date{color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums}
.missing-mark{color:var(--alert); font-weight:700}
.empty{color:var(--muted); text-align:left; padding:32px 4px; font-size:15px}

/* Filters (collapsible) */
details.filters{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); margin:12px 0; overflow:hidden}
details.filters>summary{list-style:none; cursor:pointer; padding:15px 16px; font-weight:700;
  display:flex; justify-content:space-between; align-items:center; min-height:52px}
details.filters>summary::-webkit-details-marker{display:none}
details.filters>summary::after{content:"›"; transform:rotate(90deg); color:var(--muted); font-size:20px}
details.filters[open]>summary::after{transform:rotate(-90deg)}
.filters-body{padding:0 16px 16px; display:flex; flex-direction:column; gap:12px}
.toggle{display:flex; align-items:center; gap:10px; min-height:52px; font-size:16px; font-weight:600}
.toggle input{width:24px; height:24px; min-height:auto}

/* Sticky docks */
.dock{position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--surface) 68%, rgba(244,243,239,0))}
.dock-inner{max-width:640px; margin:0 auto}
.form-dock{position:sticky; bottom:0; margin-top:8px;
  padding:12px 0 calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, var(--surface) 74%, rgba(244,243,239,0))}

/* Misc */
.receipt-img{width:100%; border:1px solid var(--line); border-radius:var(--radius); margin:12px 0; display:block}
.status{background:var(--accent-weak); color:var(--accent-ink); border-radius:12px;
  padding:13px 14px; font-size:15px; margin:12px 0; line-height:1.45}
.status:empty{display:none}
.danger-link{color:var(--danger); background:none; border:none; text-decoration:underline;
  font-size:15px; padding:12px 0; min-height:44px; cursor:pointer}
.divider{height:1px; background:var(--line); border:0; margin:16px 0}

/* Hidden native file input, label acts as button */
.file-btn input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0)}

@media (min-width:700px){ body{font-size:16px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }