@import url("/fonts/fonts.css");

:root{
  --paper:#F1F2ED; --panel:#FBFBF8; --panel-2:#F6F7F1;
  --line:#DCDED3; --line-strong:#C9CCBF; --grid:#E6E8DF;
  --ink:#1B2A3A; --ink-2:#54606E; --ink-3:#8B94A0;
  --gain:#0F6E5C; --gain-soft:rgba(15,110,92,.10);
  --cost:#9C4A33; --tax:#A97A2B; --proj:#B07D1E; --proj-soft:rgba(176,125,30,.12);
  --held:#3E5C76; --held-soft:rgba(62,92,118,.12);
  --danger:#9C2B2B; --danger-soft:rgba(156,43,43,.10);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r:14px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink); overflow-x:hidden;
  font-family:var(--sans); font-size:15px; line-height:1.5;
  font-feature-settings:"tnum" 1,"cv01" 1;
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px; background-position:-1px -1px;
}
.wrap{max-width:1180px; margin:0 auto;
  padding:clamp(20px,4vw,56px) max(clamp(16px,4vw,40px),env(safe-area-inset-right)) 64px max(clamp(16px,4vw,40px),env(safe-area-inset-left));}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
[hidden]{display:none !important;}

/* ---------- Masthead ---------- */
.mast{border-bottom:1.5px solid var(--ink); padding-bottom:26px; margin-bottom:34px;}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-2); display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.eyebrow::before{content:""; width:26px; height:1.5px; background:var(--gain); display:inline-block;}
h1{font-family:var(--serif); font-weight:500; font-size:clamp(38px,7vw,68px); line-height:.98;
  letter-spacing:-.015em; margin:0 0 14px;}
h1 em{font-style:italic; color:var(--ink-2); font-weight:400;}
.lede{font-family:var(--serif); font-weight:400; font-size:clamp(16px,2.4vw,20px); color:var(--ink-2);
  max-width:46ch; margin:0 0 18px; line-height:1.4;}
.meta-row{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-2); letter-spacing:.04em;}
.meta-row .dot{color:var(--ink-3);}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; margin-left:auto;}
.lg{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px;
  letter-spacing:.04em; color:var(--ink-2); text-transform:uppercase;}
.lg i{width:13px; height:13px; border-radius:3px; display:inline-block;}
.lg.realized i{background:var(--gain);}
.lg.proj i{background:repeating-linear-gradient(45deg,var(--proj),var(--proj) 3px,transparent 3px,transparent 6px),var(--proj-soft); border:1px solid var(--proj);}
.lg.held i{background:var(--held);}

/* ---------- Toolbar (account + add) ---------- */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px;}
.toolbar .spacer{flex:1;}
.who{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); letter-spacing:.03em;}
.who b{color:var(--ink); font-weight:600;}

/* ---------- Buttons ---------- */
.btn{font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  padding:9px 15px; border-radius:9px; border:1px solid var(--line-strong); background:var(--panel);
  color:var(--ink); cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .05s;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
@media(hover:hover){.btn:hover{background:var(--panel-2); border-color:var(--ink-3);}}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:2px solid var(--gain); outline-offset:2px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn-primary{background:var(--ink); color:#F4F5F0; border-color:var(--ink);}
.btn-danger{color:var(--danger); border-color:rgba(156,43,43,.4);}
@media(hover:hover){
  .btn-primary:hover{background:#26384b; border-color:#26384b;}
  .btn-danger:hover{background:var(--danger-soft); border-color:var(--danger);}
}
.btn-sm{padding:6px 11px; font-size:10.5px;}
.btn .ic{font-size:14px; line-height:1;}

/* ---------- Section heads ---------- */
.sec{margin-top:46px;}
.sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:18px;}
.sec-no{font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.1em;}
.sec-title{font-family:var(--serif); font-weight:500; font-size:23px; letter-spacing:-.01em;}
.sec-sub{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-left:auto; letter-spacing:.03em;}

/* ---------- KPI grid ---------- */
.kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:0; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; background:var(--panel);}
.kpi{padding:18px 18px 20px; border-right:1px solid var(--line); position:relative; min-width:0;}
.kpi:last-child{border-right:none;}
.kpi-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:12px; min-height:2.4em;}
/* nowrap: the count-up rewrites the value each frame; without this the inline
   "/mois" (and "ans") suffix wraps in and out as the number's width changes. */
.kpi-val{font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.4vw,30px); line-height:1;
  letter-spacing:-.01em; color:var(--ink); white-space:nowrap;}
.kpi-val.pos{color:var(--gain);}
.kpi-sub{font-size:12px; color:var(--ink-3); margin-top:9px; line-height:1.35;}
.kpi-tick{position:absolute; top:0; left:0; width:34px; height:2px; background:var(--gain);}

/* ---------- Panel / cards ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px clamp(16px,2.4vw,26px);}
.empty{font-family:var(--serif); font-size:18px; color:var(--ink-2); text-align:center; padding:40px 10px;}
.empty span{display:block; font-family:var(--sans); font-size:13px; color:var(--ink-3); margin-top:8px;}

/* ---------- Chronology (SVG host) ---------- */
#chrono-host{width:100%;}
#chrono-host svg{width:100%; height:auto; display:block; overflow:visible;}
.gx-line{stroke:var(--line); stroke-width:1;}
.gx-line.major{stroke:var(--line-strong);}
.gx-label{fill:var(--ink-3); font-family:var(--mono); font-size:11px; letter-spacing:.03em;}
.euro-line{stroke:var(--proj); stroke-width:1; stroke-dasharray:2 4; opacity:.7;}
.euro-label{fill:var(--proj); font-family:var(--mono); font-size:10px; letter-spacing:.05em;}
.row-name{fill:var(--ink); font-family:var(--sans); font-size:12.5px; font-weight:600; text-anchor:end;}
.bar{rx:5; transition:opacity .2s, filter .2s; cursor:pointer;}
.bar-val{fill:var(--ink-2); font-family:var(--mono); font-size:11px; font-weight:500;}
.bar-val.pos{fill:var(--gain);} .bar-val.proj{fill:var(--proj);} .bar-val.held{fill:var(--held);}
.gantt-g.dim .bar{opacity:.28;} .gantt-g.dim .row-name{opacity:.4;} .gantt-g.dim .bar-val{opacity:.4;}
.gantt-g .bar.hot{opacity:1 !important; filter:drop-shadow(0 1px 4px rgba(27,42,58,.28));}
.curve-area{fill:url(#gainGrad);} .curve-line{fill:none; stroke:var(--gain); stroke-width:2.2; stroke-linejoin:round;}
.curve-line.proj{stroke:var(--proj); stroke-dasharray:5 4;}
.curve-dot{fill:var(--panel); stroke:var(--gain); stroke-width:2; cursor:pointer;}
.curve-dot.proj{stroke:var(--proj);}
.curve-lab{fill:var(--ink-2); font-family:var(--mono); font-size:10.5px; text-anchor:middle;}
.axis-cap{fill:var(--ink-3); font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;}
.undated{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:14px; letter-spacing:.02em;
  display:flex; align-items:center; gap:8px;}
.undated i{width:11px;height:11px;border-radius:3px;background:repeating-linear-gradient(45deg,var(--held),var(--held) 2px,transparent 2px,transparent 4px),var(--held-soft);border:1px solid var(--held);}

/* ---------- Comparison ---------- */
.toggle{display:inline-flex; border:1px solid var(--line-strong); border-radius:9px; overflow:hidden; background:var(--panel);}
.toggle button{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:7px 13px; border:none; background:transparent; color:var(--ink-2); cursor:pointer;
  border-right:1px solid var(--line); transition:background .15s,color .15s;}
.toggle button:last-child{border-right:none;}
.toggle button.on{background:var(--ink); color:#F4F5F0;}
.toggle button:focus-visible{outline:2px solid var(--gain); outline-offset:-2px;}
.bars{margin-top:20px; display:flex; flex-direction:column; gap:3px;}
.barrow{display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:14px;
  padding:8px 6px; border-radius:9px; cursor:pointer; transition:background .15s;}
@media(hover:hover){.barrow:hover{background:var(--panel-2);}}
.barrow.sel{background:var(--gain-soft);}
.barrow:focus-visible{outline:2px solid var(--gain); outline-offset:-2px;}
.br-name{font-weight:600; font-size:14px; display:flex; align-items:center; gap:7px; min-width:0;}
.br-name span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pill{font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--proj); border:1px solid var(--proj); border-radius:4px; padding:1px 4px; flex:none;}
.br-track{height:14px; background:var(--panel-2); border-radius:7px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line);}
.br-fill{height:100%; width:0; border-radius:7px; transition:width .9s cubic-bezier(.22,1,.36,1); background:var(--gain);}
.br-fill.proj{background:repeating-linear-gradient(45deg,var(--proj),var(--proj) 5px,#c79433 5px,#c79433 10px);}
.br-val{font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink); min-width:96px; text-align:right;}
.br-val.pos{color:var(--gain);}

/* ---------- Detail card ---------- */
.detail-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.detail-actions{display:flex; gap:8px; flex:none;}
.detail-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:24px;}
.dt-name{font-family:var(--serif); font-weight:500; font-size:26px; letter-spacing:-.01em; line-height:1;}
.dt-period{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); letter-spacing:.04em; margin-top:8px;}
.dt-tag{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  padding:2px 7px; border-radius:5px; margin-left:8px; vertical-align:middle;}
.dt-tag.realized{color:var(--gain); background:var(--gain-soft);}
.dt-tag.proj{color:var(--proj); background:var(--proj-soft);}
.dt-tag.held{color:var(--held); background:var(--held-soft);}
.comp{margin-top:24px;}
.comp-lab{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); margin:14px 0 6px;}
.comp-bar{height:26px; display:flex; border-radius:7px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); background:var(--panel-2);}
.comp-seg{height:100%; min-width:0; transition:width .6s cubic-bezier(.22,1,.36,1);}
.seg-achat{background:var(--ink);} .seg-frais{background:#7c8794;} .seg-travaux{background:var(--cost);}
.seg-impots{background:var(--tax);} .seg-vente{background:var(--gain);} .seg-loc{background:#5aa593;}
.comp-key{display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:16px;}
.ck{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2);}
.ck i{width:11px; height:11px; border-radius:3px;}
.ck b{color:var(--ink); font-family:var(--mono); font-size:12px; font-weight:500; margin-left:2px;}
.dt-stats{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; align-self:start;}
.dt-stat{display:flex; justify-content:space-between; align-items:baseline; padding:13px 16px; border-bottom:1px solid var(--line);}
.dt-stat:last-child{border-bottom:none;}
.dt-stat .k{font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);}
.dt-stat .v{font-family:var(--serif); font-size:21px; font-weight:500;}
.dt-stat .v.pos{color:var(--gain);} .dt-stat.head{background:var(--panel-2);}
.dt-stat.head .v{font-size:27px;}
.dt-note{font-size:12.5px; color:var(--ink-2); margin-top:16px; line-height:1.5; border-left:2px solid var(--line-strong); padding-left:12px;}

/* ---------- Ledger table ---------- */
.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--panel);}
table{border-collapse:collapse; width:100%; min-width:880px; font-size:13.5px;}
thead th{font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-2); text-align:right; padding:14px 12px; border-bottom:1.5px solid var(--ink);
  white-space:nowrap; cursor:pointer; user-select:none; position:relative;}
thead th:first-child{text-align:left;}
thead th:hover{color:var(--ink);}
thead th.sorted{color:var(--ink);}
thead th .ar{opacity:0; margin-left:4px;} thead th.sorted .ar{opacity:1;}
tbody td{text-align:right; padding:12px; border-bottom:1px solid var(--line); white-space:nowrap;}
tbody td:first-child{text-align:left;}
tbody tr{cursor:pointer; transition:background .12s;}
@media(hover:hover){tbody tr:hover{background:var(--panel-2);}}
tbody tr.sel{background:var(--gain-soft);}
tbody tr:last-child td{border-bottom:none;}
.t-name{font-weight:600; display:flex; align-items:center; gap:8px;}
.t-name i{width:8px; height:8px; border-radius:50%; flex:none;}
.i-realized{background:var(--gain);} .i-proj{background:var(--proj);} .i-held{background:var(--held);}
.t-net{font-weight:600;} .t-net.pos{color:var(--gain);}
.t-mut{color:var(--ink-3);}
.t-roi{font-family:var(--mono); font-size:12.5px;}
tfoot td{padding:14px 12px; border-top:1.5px solid var(--ink); font-weight:600;
  font-family:var(--mono); font-size:12.5px; text-align:right;}
tfoot td:first-child{text-align:left; font-family:var(--sans); text-transform:uppercase; letter-spacing:.05em; font-size:11px;}

/* ---------- Tooltip ---------- */
#tip{position:fixed; pointer-events:none; z-index:50; background:var(--ink); color:#EEF0EA;
  border-radius:10px; padding:11px 13px; font-size:12px; line-height:1.5; max-width:240px;
  box-shadow:0 8px 28px rgba(27,42,58,.32); opacity:0; transform:translateY(4px);
  transition:opacity .14s, transform .14s;}
#tip.show{opacity:1; transform:translateY(0);}
#tip .tt-name{font-family:var(--serif); font-size:15px; font-weight:500; margin-bottom:3px;}
#tip .tt-row{display:flex; justify-content:space-between; gap:18px; font-family:var(--mono); font-size:11px;}
#tip .tt-row .lbl{color:#9fb0b0;} #tip .tt-pos{color:#6fd0b6;} #tip .tt-prj{color:#e0b659;}
#tip .tt-meta{font-family:var(--mono); font-size:10px; color:#9fb0b0; margin-top:5px; letter-spacing:.03em;}

/* ---------- Footer ---------- */
footer{margin-top:54px; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.7; letter-spacing:.02em;}
footer b{color:var(--ink-2); font-weight:500;}

/* ---------- Login overlay ---------- */
.gate{position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;}
.login-card{width:100%; max-width:380px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); padding:34px 30px; box-shadow:0 18px 50px rgba(27,42,58,.12);}
.login-card .eyebrow{margin-bottom:18px;}
.login-card h2{font-family:var(--serif); font-weight:500; font-size:30px; letter-spacing:-.01em; margin:0 0 6px;}
.login-card h2 em{font-style:italic; color:var(--ink-2); font-weight:400;}
.login-card p.sub{font-family:var(--serif); color:var(--ink-2); font-size:14.5px; margin:0 0 24px;}
.login-card form{display:flex; flex-direction:column; gap:14px;}
.cf-slot{min-height:0;}
.cf-slot:not(:empty){margin-top:2px;}

/* ---------- Forms ---------- */
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);}
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--panel-2);
  border:1px solid var(--line-strong); border-radius:9px; padding:10px 12px; width:100%;
  transition:border-color .15s, box-shadow .15s;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--gain); box-shadow:0 0 0 3px var(--gain-soft);}
.field textarea{resize:vertical; min-height:72px; line-height:1.5;}
.field .hint{font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.02em;}
.field-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.field-grid.three{grid-template-columns:repeat(3,1fr);}
.errbox{background:var(--danger-soft); border:1px solid rgba(156,43,43,.35); color:var(--danger);
  border-radius:9px; padding:10px 12px; font-size:13px; line-height:1.45;}
.errbox ul{margin:4px 0 0; padding-left:18px;}

/* ---------- Modal ---------- */
.modal-back{position:fixed; inset:0; z-index:90; background:rgba(20,28,38,.42); backdrop-filter:blur(2px);
  display:flex; align-items:flex-start; justify-content:center; padding:clamp(16px,5vh,60px) 16px; overflow-y:auto;}
.modal{width:100%; max-width:680px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:0 24px 64px rgba(27,42,58,.28); overflow:hidden;}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:20px 24px; border-bottom:1px solid var(--line);}
.modal-head h3{font-family:var(--serif); font-weight:500; font-size:22px; margin:0;}
.modal-x{border:none; background:transparent; font-size:22px; line-height:1; color:var(--ink-3); cursor:pointer; padding:4px 8px; border-radius:8px;}
@media(hover:hover){.modal-x:hover{background:var(--panel-2); color:var(--ink);}}
.modal-body{padding:24px; display:flex; flex-direction:column; gap:16px; max-height:none;}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:18px 24px; border-top:1px solid var(--line); background:var(--panel-2);}
.fieldset-title{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); margin:6px 0 -4px; padding-bottom:4px; border-bottom:1px solid var(--line);}

/* ---------- Toast ---------- */
#toasts{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:120;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{background:var(--ink); color:#EEF0EA; font-size:13px; padding:11px 18px; border-radius:10px;
  box-shadow:0 8px 28px rgba(27,42,58,.3); opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s;}
.toast.show{opacity:1; transform:translateY(0);}
.toast.err{background:var(--danger);}
.toast.ok{background:var(--gain);}

/* ---------- Account menu (toolbar) ----------
   Desktop: the wrapper is transparent to layout so name + buttons sit inline in the
   toolbar exactly as before, and the toggle is hidden. ≤640px turns it into a popover. */
.who-menu{display:contents;}
.account-toggle{display:none;}

/* Mobile-only ledger sort control (shown ≤640px) */
.ledger-sort{display:none;}

/* ---------- Mobile chronology ----------
   These classes are emitted ONLY by renderChronoMobile() (host ≤640px); they never
   exist in the desktop SVG, so styling them globally is inert on desktop. The
   sparkline reuses the desktop .curve-area/.curve-line/.curve-dot/.gx-line rules. */
.chrono-m-cap{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); margin-bottom:4px;}
.chrono-m-final{font-family:var(--serif); font-size:22px; font-weight:500; letter-spacing:-.01em; text-transform:none;}
.chrono-m-final.pos{color:var(--gain);} .chrono-m-final.proj{color:var(--proj);}
.chrono-m-spark{width:100%; height:auto; display:block; overflow:visible;}
.chrono-m-ticks{display:flex; justify-content:space-between; margin-top:2px;
  font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.04em;}
.chrono-m-pt-hit{fill:transparent; cursor:pointer;}
.chrono-m-divider{display:flex; align-items:center; gap:10px; margin:18px 0 8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);}
.chrono-m-divider::before,.chrono-m-divider::after{content:""; flex:1; height:1px; background:var(--line);}
.chrono-m-list{display:flex; flex-direction:column;}
.chrono-m-row{padding:11px 4px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:8px; transition:background .12s;}
.chrono-m-row:last-child{border-bottom:none;}
.chrono-m-row.sel{background:var(--gain-soft);}
.chrono-m-row:focus-visible{outline:2px solid var(--gain); outline-offset:-2px;}
.chrono-m-head{display:flex; align-items:center; gap:8px; min-height:30px;}
.chrono-m-dot{width:9px; height:9px; border-radius:50%; flex:none;}
.chrono-m-name{font-weight:600; font-size:14.5px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.chrono-m-net{font-family:var(--mono); font-size:12.5px; font-weight:500; flex:none;}
.chrono-m-net.pos{color:var(--gain);} .chrono-m-net.proj{color:var(--proj);} .chrono-m-net.held{color:var(--held);}
.chrono-m-caret{font-size:11px; color:var(--ink-3); flex:none; transition:transform .15s;}
.chrono-m-row.open .chrono-m-caret{transform:rotate(180deg);}
.chrono-m-track{position:relative; height:10px; margin:9px 0 6px; background:var(--panel-2);
  border-radius:6px; box-shadow:inset 0 0 0 1px var(--line);}
.chrono-m-seg{position:absolute; top:0; height:100%; border-radius:6px; background:var(--gain);}
.chrono-m-seg.held{background:var(--held);}
.chrono-m-seg.proj{background:repeating-linear-gradient(45deg,var(--proj),var(--proj) 5px,#c79433 5px,#c79433 10px); border:1px solid var(--proj);}
.chrono-m-arrow{position:absolute; top:50%; transform:translateY(-50%); color:var(--held); font-size:11px; line-height:1;}
.chrono-m-meta{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.02em;}
.chrono-m-bd{margin-top:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.chrono-m-row:not(.open) .chrono-m-bd{display:none;}
.bd-row{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 12px; border-bottom:1px solid var(--line);}
.bd-k{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2);}
.bd-v{font-family:var(--mono); font-size:13px; color:var(--ink);}
.bd-v.pos{color:var(--gain);} .bd-v.proj{color:var(--proj);}
.bd-net{background:var(--panel-2);}
.bd-net .bd-v{font-family:var(--serif); font-size:16px; font-weight:500;}
.chrono-m-more{display:block; width:100%; text-align:center; padding:11px; border:none; background:transparent;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--gain); cursor:pointer;}

/* ---------- Responsive ---------- */
@media(max-width:920px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .kpi{border-right:1px solid var(--line); border-bottom:1px solid var(--line);}
  .kpi:nth-child(2n){border-right:none;}
  .kpi:nth-last-child(-n+2){border-bottom:none;}
  .detail-grid{grid-template-columns:1fr;}
  .legend{margin-left:0; width:100%;}
}
@media(max-width:560px){
  .barrow{grid-template-columns:96px 1fr; grid-template-rows:auto auto;}
  .br-val{grid-column:2; text-align:left; min-width:0; margin-top:-4px;}
  /* KPIs stay 2-col on phones (borders come from the 920px block above) */
  .sec-sub{display:none;}
  .row-name{font-size:10.5px;} .bar-val{font-size:10px;}
  .field-grid,.field-grid.three{grid-template-columns:1fr;}
}

/* ===== Phone / small tablet (≤640px): cards, sticky action bar, bottom sheets ===== */
@media(max-width:640px){
  /* reserve space so content isn't hidden behind the fixed action bar */
  .wrap{padding-bottom:calc(78px + env(safe-area-inset-bottom));}
  .mast{padding-bottom:20px; margin-bottom:26px;}
  .kpi{padding:14px 14px 16px;}
  .sec{margin-top:38px;}

  /* bigger touch targets */
  .btn{min-height:44px;}
  .btn-sm{min-height:44px; padding:10px 13px; font-size:11px;}

  /* section heads wrap; the metric toggle drops to its own full-width line */
  .sec-head{flex-wrap:wrap;}
  .sec-sub{display:none;}
  #metric-toggle{margin-left:0 !important; width:100%;}
  #metric-toggle button{flex:1; text-align:center; padding:10px 8px;}

  /* --- Toolbar → fixed bottom action bar --- */
  .toolbar{position:fixed; left:0; right:0; bottom:0; z-index:80; margin-top:0;
    gap:10px; flex-wrap:nowrap; align-items:center;
    padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    background:var(--panel); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(27,42,58,.08);}
  .toolbar .spacer{display:none;}
  #btn-add{flex:1; justify-content:center; min-height:48px;}
  .account-toggle{display:inline-flex;}
  .who-menu{display:none; position:absolute; bottom:calc(100% + 8px);
    right:max(16px,env(safe-area-inset-right));
    flex-direction:column; align-items:stretch; gap:8px; min-width:210px;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
    padding:12px; box-shadow:0 -10px 30px rgba(27,42,58,.22);}
  .who-menu.open{display:flex;}
  .who-menu .who{padding:2px 2px 8px; border-bottom:1px solid var(--line);}
  .who-menu .btn{justify-content:center;}

  /* toasts clear the action bar */
  #toasts{bottom:calc(82px + env(safe-area-inset-bottom));}

  /* --- Ledger: table → stacked cards --- */
  .ledger-sort{display:block; margin-left:auto; width:auto; max-width:62%;
    font-family:var(--mono); font-size:12px; min-height:40px; padding:8px 10px;
    border:1px solid var(--line-strong); border-radius:9px; background:var(--panel); color:var(--ink);}
  .tbl-scroll{overflow-x:visible; border:none; background:transparent; border-radius:0;}
  #ledger{min-width:0; display:block; font-size:14px;}
  #ledger thead{display:none;}
  #ledger tbody{display:block;}
  #ledger tbody tr{display:grid; grid-template-columns:1fr 1fr; gap:5px 14px;
    border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
    padding:14px 16px; margin-bottom:12px;}
  #ledger tbody td{display:flex; justify-content:space-between; gap:10px; align-items:baseline;
    border:none; padding:3px 0; text-align:right; white-space:normal;}
  #ledger tbody td::before{content:attr(data-label); flex:none; text-align:left;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
  #ledger tbody td:empty{display:none;} /* drop fields with no value (no orphan label) */
  #ledger tbody td:nth-child(1){grid-column:1/-1; order:-4; font-size:15.5px;}
  #ledger tbody td:nth-child(1)::before{display:none;}
  #ledger tbody td:nth-child(10){grid-column:1/-1; order:-3;}
  #ledger tbody td:nth-child(10) .t-net{font-size:17px;}
  #ledger tbody td:nth-child(2){grid-column:1/-1; order:-2;}
  #ledger tbody td:nth-child(2)::before{display:none;}
  #ledger tbody td:nth-child(3){grid-column:1/-1; order:-1;}
  #ledger tbody tr.sel{background:var(--gain-soft);}
  #ledger tfoot{display:block;}
  #ledger tfoot tr{display:grid; grid-template-columns:1fr 1fr; gap:5px 14px;
    border:1.5px solid var(--ink); border-radius:var(--r); background:var(--panel-2); padding:14px 16px;}
  #ledger tfoot td{display:flex; justify-content:space-between; gap:10px; border:none; padding:3px 0;
    text-align:right; font-family:var(--mono); font-size:12.5px;}
  #ledger tfoot td:empty{display:none;}
  #ledger tfoot td::before{content:attr(data-label); flex:none; text-align:left; font-weight:400;
    font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
  #ledger tfoot td:first-child{grid-column:1/-1; order:-1; font-family:var(--sans);
    text-transform:uppercase; letter-spacing:.05em; font-size:11px;}
  #ledger tfoot td:first-child::before{display:none;}

  /* --- Modals → full-bleed sheet that scrolls as one ---
     The whole overlay (.modal-back) is the scroller — no internal flex-height
     scroll and no align-items:flex-end (which on iOS pushes a tall form's top
     fields above the viewport where they can't be reached). Header + footer are
     sticky so the title and Save/Cancel stay visible while the body scrolls. */
  .modal-back{display:block; padding:0; -webkit-overflow-scrolling:touch;}
  .modal{max-width:none; width:100%; min-height:100%; max-height:none;
    border-radius:0; overflow:visible;}
  .modal > form{display:block;}
  .modal-head{position:sticky; top:0; z-index:2; background:var(--panel);}
  .modal-body{padding:18px 16px;}
  .modal-foot{position:sticky; bottom:0; z-index:2; background:var(--panel-2);
    padding-bottom:calc(14px + env(safe-area-inset-bottom));}
  .modal-foot .btn{flex:1; justify-content:center; min-height:48px;}

  /* --- Login gate: clear notch / home indicator, fit the Turnstile widget --- */
  .gate{align-items:flex-start;
    padding:max(24px,env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));}
  .login-card{padding:28px 22px; margin-top:6vh;}
  .cf-slot{display:flex; justify-content:center;}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important;}
}