/* Layout: one passbook column (max 560px). The month's settlement page sits on top, ledger rows below, a fixed action bar at the foot.
   prototype.html の配色トークン・書体・部品をそのまま引き継ぎ、ログイン画面・分析タブ・品目ごとのカテゴリを足している */
:root{
  --paper:#F1F4F3; --sheet:#FFFFFF; --ink:#1B2327; --ink-2:#55636A; --ink-3:#86939A;
  --rule:#D6DEDC; --rule-2:#E7ECEB;
  --accent:#1C6965; --accent-ink:#FFFFFF; --accent-soft:#DFEEEC;
  --pa:#2A5A8E; --pa-soft:#E2EAF4; --pb:#994670; --pb-soft:#F3E4EB;
  --stamp:#C3352B; --warn:#8E5B00; --warn-soft:#FAF0DA;
  /* 分析グラフのカテゴリ色（dataviz の既定8色。validate_palette.js で背景 #FFFFFF に対して検証済み） */
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a; --c4:#eda100; --c5:#e87ba4; --c6:#008300; --c7:#6250d6; --c8:#e34948; --c-other:#A3AEB2;
  --f-display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#101618; --sheet:#172023; --ink:#E2E8E9; --ink-2:#9AA7AB; --ink-3:#6F7D82;
    --rule:#2B363A; --rule-2:#222C30;
    --accent:#4DB2AA; --accent-ink:#0C1A19; --accent-soft:#163130;
    --pa:#86AEDD; --pa-soft:#1C2A3B; --pb:#D98EB3; --pb-soft:#33212B;
    --stamp:#E8594D; --warn:#E3AE52; --warn-soft:#30271A;
    --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500; --c5:#d55181; --c6:#008300; --c7:#9085e9; --c8:#e66767; --c-other:#5A676C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#101618; --sheet:#172023; --ink:#E2E8E9; --ink-2:#9AA7AB; --ink-3:#6F7D82;
  --rule:#2B363A; --rule-2:#222C30;
  --accent:#4DB2AA; --accent-ink:#0C1A19; --accent-soft:#163130;
  --pa:#86AEDD; --pa-soft:#1C2A3B; --pb:#D98EB3; --pb-soft:#33212B;
  --stamp:#E8594D; --warn:#E3AE52; --warn-soft:#30271A;
  --c1:#3987e5; --c2:#d95926; --c3:#199e70; --c4:#c98500; --c5:#d55181; --c6:#008300; --c7:#9085e9; --c8:#e66767; --c-other:#5A676C;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--paper)}
body{
  margin:0;
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:15px; line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:0 calc(104px + env(safe-area-inset-bottom, 0px));
  -webkit-text-size-adjust:100%;
}
body.no-actionbar{padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))}
body.locked{overflow:hidden}
[hidden]{display:none !important}
.wrap{max-width:560px; margin-inline:auto}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.num{font-family:var(--f-num); font-variant-numeric:tabular-nums}

/* login */
.login{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding-block:40px}
.login-in{width:100%; max-width:400px; background:var(--sheet); border:1px solid var(--rule); border-radius:8px; padding:32px 24px; display:flex; flex-direction:column; gap:16px; text-align:center}
.login-in h1{font-size:26px}
.login-lead{margin:0; color:var(--ink-2); font-size:14px}
.login-error{margin:0; background:var(--warn-soft); border-radius:8px; padding:10px 12px; font-size:14px; text-align:left}
.login-in .btn{text-decoration:none}

/* header */
.top{display:flex; flex-direction:column; gap:10px; padding-block:22px 14px}
.brand{display:flex; align-items:center; justify-content:space-between; gap:12px}
h1{font-family:var(--f-display); font-weight:700; font-size:23px; letter-spacing:.08em; margin:0; text-wrap:balance}
.icon-btn{width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--rule); background:var(--sheet); border-radius:10px; color:var(--ink-2)}
.icon-btn svg{width:20px; height:20px}
.session-line{margin:-4px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:13px; color:var(--ink-2)}
.session-line .link{font-size:13px; padding:2px}
.tabs{max-width:260px}
.tabs button[aria-selected="true"]{background:var(--accent-soft); color:var(--accent)}
.month{display:flex; align-items:center; gap:6px}
.month button{width:38px; height:38px; border:1px solid var(--rule); background:var(--sheet); border-radius:10px; font-size:18px; line-height:1; color:var(--ink-2)}
.month-label{font-weight:700; font-size:17px; min-width:7.5em; text-align:center; letter-spacing:.02em}
.month-label .num{font-weight:500}

.notice{background:var(--warn-soft); color:var(--ink); border-radius:8px; padding:10px 14px; font-size:14px; margin-bottom:12px}

/* settlement page */
.summary{position:relative; background:var(--sheet); border:1px solid var(--rule); border-radius:6px; padding:18px 18px 16px; display:flex; flex-direction:column; gap:14px; overflow:hidden}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--ink-2); margin:0}
.due{display:flex; flex-direction:column; gap:4px}
.summary.stamped .due{padding-right:96px}
.due-who{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.who{display:inline-flex; align-items:center; padding:2px 12px; border-radius:999px; font-weight:700; font-size:14px}
.who-a{background:var(--pa-soft); color:var(--pa)}
.who-b{background:var(--pb-soft); color:var(--pb)}
.who-shared{background:var(--accent-soft); color:var(--accent)}
.arrow{color:var(--ink-3); font-size:18px}
.due-amt{font-family:var(--f-num); font-weight:600; font-size:clamp(38px, 11vw, 54px); line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.due-amt .yen{font-size:.55em; margin-right:2px; color:var(--ink-2)}
.due-cap{margin:0; font-size:13px; color:var(--ink-2)}
.due-none{margin:0; font-size:17px; font-weight:700}
.due-none + .due-cap{margin-top:2px}

.book{width:100%; border-collapse:collapse; font-size:14px}
.book th,.book td{padding:7px 0; border-bottom:1px solid var(--rule-2); text-align:right; font-weight:400}
.book thead th{font-size:12px; font-weight:700; color:var(--ink-2); border-bottom:1px solid var(--rule)}
.book thead th.pa{color:var(--pa)} .book thead th.pb{color:var(--pb)}
.book tbody th{text-align:left; color:var(--ink-2)}
.book td{font-family:var(--f-num); font-variant-numeric:tabular-nums; width:32%}
.book tr.diff td,.book tr.diff th{font-weight:600; color:var(--ink); border-bottom:none}
.ratio-line{margin:0; font-size:13px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline}
.ratio-line b{color:var(--ink); font-weight:700}
.link{background:none; border:none; padding:4px 2px; color:var(--accent); font-weight:700; font-size:13px; text-decoration:underline; text-underline-offset:3px}

.cats{display:flex; flex-direction:column; gap:6px; margin:0; padding:0; list-style:none}
.cats-h{font-size:12px; font-weight:700; color:var(--ink-2); letter-spacing:.06em; margin:0}
.cat{display:grid; grid-template-columns:6.5em minmax(0,1fr) 5.5em; gap:10px; align-items:center; font-size:13px}
.cat-bar{height:8px; background:var(--rule-2); border-radius:4px; overflow:hidden}
.cat-bar i{display:block; height:100%; background:var(--accent); border-radius:4px}
.cat-v{text-align:right; font-family:var(--f-num); font-variant-numeric:tabular-nums}

.settle-row{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.settled-note{font-size:13px; color:var(--ink-2)}
.warnbox{background:var(--warn-soft); border-radius:8px; padding:10px 12px; font-size:13px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center}
.warnbox strong{color:var(--warn)}

.stamp{position:absolute; top:16px; right:16px; width:86px; height:86px; border-radius:50%; border:3px solid var(--stamp); color:var(--stamp); display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-14deg); box-shadow:inset 0 0 0 3px var(--sheet), inset 0 0 0 4.5px var(--stamp); opacity:.9; pointer-events:none}
.stamp span{font-family:var(--f-display); font-weight:700; font-size:19px; letter-spacing:.12em; line-height:1.1; margin-right:-.12em}
.stamp small{font-family:var(--f-num); font-size:11px; margin-top:2px}
.stamp.pop{animation:stamp .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes stamp{from{transform:rotate(-14deg) scale(1.7); opacity:0} to{transform:rotate(-14deg) scale(1); opacity:.9}}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 18px; border-radius:10px; border:1px solid var(--rule); background:var(--sheet); color:var(--ink); font-weight:700; font-size:15px}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.sm{min-height:38px; padding:0 14px; font-size:14px}
.btn.danger{color:var(--stamp); border-color:var(--stamp); background:transparent}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn svg{width:20px; height:20px}

/* ledger */
.ledger{margin-top:26px}
.ledger-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:6px}
h2{font-size:16px; margin:0; letter-spacing:.04em}
.count{font-size:13px; color:var(--ink-2)}
.day{margin-top:14px}
.day-h{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--ink-2); margin:0 0 2px; padding-bottom:4px; border-bottom:1px solid var(--rule)}
.day-h .num{font-weight:500}
.rows{list-style:none; margin:0; padding:0}
.row{width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; text-align:left; background:none; border:none; border-bottom:1px solid var(--rule-2); padding:11px 4px; border-radius:0}
button.row:hover{background:var(--accent-soft)}
.row-store{font-weight:700; overflow-wrap:anywhere}
.row-amt{font-family:var(--f-num); font-weight:600; font-variant-numeric:tabular-nums; align-self:start}
.row-meta{grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:2px 10px; font-size:12.5px; color:var(--ink-2)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:1px}
.dot-a{background:var(--pa)} .dot-b{background:var(--pb)}
.split b{font-weight:500}
.split .sa{color:var(--pa)} .split .sb{color:var(--pb)} .split .ss{color:var(--accent)}

.empty{margin-top:12px; border:1.5px dashed var(--rule); border-radius:8px; padding:22px 18px; color:var(--ink-2); font-size:14px; display:flex; flex-direction:column; gap:6px}
.empty strong{color:var(--ink); font-size:15px}

/* action bar */
.actionbar{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--sheet); border-top:1px solid var(--rule);
  padding-top:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.actionbar-in{max-width:560px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:10px}
.actionbar-in.solo{grid-template-columns:minmax(0,1fr)}

/* sheets */
.sheet{position:fixed; inset:0; z-index:40; background:var(--paper); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))}
.sheet-in{max-width:560px; margin-inline:auto}
.sheet-head{position:sticky; top:0; z-index:2; background:var(--paper); display:grid; grid-template-columns:5em minmax(0,1fr) auto; align-items:center; gap:8px;
  padding-top:calc(10px + env(safe-area-inset-top, 0px)); padding-bottom:10px; border-bottom:1px solid var(--rule)}
.sheet-head h2{text-align:center; font-size:16px}
.sheet-head .link{justify-self:start; font-size:15px; text-decoration:none; color:var(--ink-2)}
.sheet-body{display:flex; flex-direction:column; gap:16px; padding-top:16px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field-pair{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px}
.date-field{max-width:14em}
label,.lab{font-size:12.5px; font-weight:700; color:var(--ink-2); letter-spacing:.04em}
input[type=text],input[type=date],input[type=month],select,.in{width:100%; min-width:0; padding:10px 12px; border:1px solid var(--rule); border-radius:8px; background:var(--sheet); color:var(--ink); font-size:16px}
select{appearance:auto}
.seg{display:flex; border:1px solid var(--rule); border-radius:9px; overflow:hidden; background:var(--sheet)}
.seg button{flex:1 1 0; min-width:0; min-height:42px; border:none; border-right:1px solid var(--rule); background:transparent; color:var(--ink-2); font-weight:700; font-size:14px; padding:0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"][data-v="shared"]{background:var(--accent-soft); color:var(--accent)}
.seg button[aria-pressed="true"][data-v="a"]{background:var(--pa-soft); color:var(--pa)}
.seg button[aria-pressed="true"][data-v="b"]{background:var(--pb-soft); color:var(--pb)}
.seg.mini button{min-height:34px; font-size:13px}

.receipt{display:flex; flex-direction:column; gap:10px}
.receipt-frame{position:relative; align-self:center; max-width:100%; border:1px solid var(--rule); border-radius:6px; background:var(--sheet); overflow:hidden}
.receipt-frame img{display:block; max-height:240px; max-width:100%; width:auto; object-fit:contain}
.receipt-frame.reading::after{content:""; position:absolute; left:0; right:0; height:3px; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:scan 1.8s ease-in-out infinite alternate; top:0}
@keyframes scan{from{top:0} to{top:calc(100% - 3px)}}
.status{font-size:13.5px; color:var(--ink-2); display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center}
.status.err{color:var(--stamp)}
.status.ok{color:var(--accent)}
.photo-note{font-size:12px; color:var(--ink-3); margin:0}

.items-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 12px}
.bulk{display:flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-2)}
.bulk button{border:1px solid var(--rule); background:var(--sheet); border-radius:999px; padding:3px 10px; font-size:12.5px; font-weight:700; color:var(--ink-2)}
.items{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.item{display:grid; grid-template-columns:minmax(0,1fr) 6.8em 34px; gap:8px; padding-block:10px; border-bottom:1px solid var(--rule-2); align-items:center}
.item .in{padding:9px 10px; font-size:15px}
.item .amt{text-align:right; font-family:var(--f-num); font-variant-numeric:tabular-nums}
.item .ctl, .item .adj{grid-column:1 / -1}
.item .ctl{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,9.5em); gap:8px; align-items:center}
.item .ctl select{padding:6px 8px; font-size:14px; min-height:36px}
.it-del{width:34px; height:34px; border:none; background:none; color:var(--ink-3); font-size:20px; line-height:1; border-radius:8px}
.it-del:hover{background:var(--rule-2); color:var(--ink)}
.adj{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2)}
.pill{display:inline-flex; padding:2px 10px; border-radius:999px; background:var(--rule-2); font-weight:700; color:var(--ink-2)}
.sign{border:1px solid var(--rule); background:var(--sheet); border-radius:8px; padding:2px 10px; font-weight:700; color:var(--ink-2)}
.items-add{display:flex; flex-wrap:wrap; gap:4px 16px}
.items-add .link{font-size:14px}
.totals{background:var(--sheet); border:1px solid var(--rule); border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:8px}
.totals-sum{display:flex; justify-content:space-between; align-items:baseline; font-weight:700}
.totals-sum .num{font-size:22px; font-weight:600}
.totals-split{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--ink-2)}
.totals-split .num{color:var(--ink)}
.totals-split .ts{color:var(--accent)} .totals-split .ta{color:var(--pa)} .totals-split .tb{color:var(--pb)}
.help{font-size:12.5px; color:var(--ink-2); margin:0}
.del-row{display:flex; justify-content:center; padding-top:8px}

.set-group{background:var(--sheet); border:1px solid var(--rule); border-radius:8px; padding:14px; display:flex; flex-direction:column; gap:12px}
.set-group h3{margin:0; font-size:14px}
.ratio-out{display:flex; justify-content:space-between; font-weight:700; font-size:15px}
.ratio-out .sa{color:var(--pa)} .ratio-out .sb{color:var(--pb)}
input[type=range]{width:100%; accent-color:var(--accent)}

/* analytics */
.an-filters{display:flex; flex-direction:column; gap:12px}
.an-period button[aria-pressed="true"]{background:var(--accent-soft); color:var(--accent)}
.panel{background:var(--sheet); border:1px solid var(--rule); border-radius:6px; padding:16px; margin-top:14px; display:flex; flex-direction:column; gap:12px}
.panel-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.chart{position:relative; width:100%; min-height:220px}
.chart svg{display:block; width:100%; height:auto}
.chart .grid{stroke:var(--rule-2); stroke-width:1}
.chart .base{stroke:var(--rule); stroke-width:1}
.chart .axis{fill:var(--ink-3); font-family:var(--f-num); font-size:11px}
.chart .mlabel{fill:var(--ink-2); font-size:11px}
.chart .hit{fill:transparent; cursor:pointer}
.chart svg.hovering .col:not(.on) .seg{opacity:.4}
.chart-empty{display:grid; place-items:center; min-height:200px; color:var(--ink-2); font-size:14px; text-align:center}
.s1{fill:var(--c1)} .s2{fill:var(--c2)} .s3{fill:var(--c3)} .s4{fill:var(--c4)} .s5{fill:var(--c5)} .s6{fill:var(--c6)} .s7{fill:var(--c7)} .s8{fill:var(--c8)} .s0{fill:var(--c-other)}
.sw{display:inline-block; width:10px; height:10px; border-radius:3px; flex:none}
.b1{background:var(--c1)} .b2{background:var(--c2)} .b3{background:var(--c3)} .b4{background:var(--c4)} .b5{background:var(--c5)} .b6{background:var(--c6)} .b7{background:var(--c7)} .b8{background:var(--c8)} .b0{background:var(--c-other)}
.legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--ink-2)}
.legend li{display:inline-flex; align-items:center; gap:6px}
.tooltip{position:absolute; z-index:5; pointer-events:none; background:var(--sheet); border:1px solid var(--rule); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.14); padding:8px 10px; font-size:12.5px; width:max-content; max-width:220px}
.tooltip h4{margin:0 0 4px; font-size:13px; display:flex; justify-content:space-between; gap:12px}
.tt-row{display:flex; justify-content:space-between; gap:12px; align-items:center}
.tt-row span:first-child{display:inline-flex; align-items:center; gap:6px; color:var(--ink-2)}
.an-table{width:100%; border-collapse:collapse; font-size:13.5px}
.an-table th,.an-table td{padding:8px 4px; border-bottom:1px solid var(--rule-2); text-align:right; font-weight:400; white-space:nowrap}
.an-table thead th{font-size:12px; font-weight:700; color:var(--ink-2); border-bottom:1px solid var(--rule)}
.an-table .th-sub{display:block; font-size:11px; font-weight:400; color:var(--ink-3)}
.an-table th:first-child,.an-table td:first-child{text-align:left; white-space:normal}
.an-table td{font-family:var(--f-num); font-variant-numeric:tabular-nums}
.an-table tbody tr{cursor:pointer}
.an-table tbody tr:hover,.an-table tbody tr:focus-visible{background:var(--accent-soft)}
.an-table .cat-name{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-body)}
.an-table tfoot td{font-weight:600; border-bottom:none}
.rank{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.rank li{display:grid; grid-template-columns:1.6em minmax(0,1fr) auto; gap:8px; align-items:baseline; padding:8px 0; border-bottom:1px solid var(--rule-2); font-size:14px}
.rank li:last-child{border-bottom:none}
.rank .r-n{color:var(--ink-3); font-family:var(--f-num); font-size:12px}
.rank .r-name{overflow-wrap:anywhere}
.rank .r-sub{color:var(--ink-3); font-size:12px; margin-left:6px}
.rank .r-v{font-family:var(--f-num); font-variant-numeric:tabular-nums}
.an-csv{margin-top:16px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.an-csv .btn{text-decoration:none}

.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(88px + env(safe-area-inset-bottom, 0px)); z-index:60; background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:999px; font-size:14px; font-weight:700; max-width:calc(100% - 32px); box-shadow:0 6px 20px rgba(0,0,0,.18)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .stamp.pop{animation:none}
  .receipt-frame.reading::after{animation:none; top:50%}
}