/* Layout: a ledger rail on the right (RTL) beside one working sheet; on phones the rail becomes a bottom tab bar. */
:root{
  --bg:#edf1ef; --surface:#ffffff; --surface-2:#f6f9f8; --sunk:#e2e8e6; --ink:#14201d; --ink-2:#34433f; --muted:#62716c; --line:#d5dedb;
  --pine:#1f5c50; --pine-2:#164a40; --on-pine:#ffffff; --pine-soft:#dbeae5;
  --brass:#9a640f; --brass-soft:#f5e8cf;
  --good:#1f6b3b; --good-bg:#dcefe2; --warn:#8a530a; --warn-bg:#faebd0; --bad:#ad261c; --bad-bg:#f8dcd8; --info:#235896; --info-bg:#dce7f5;
  --c-inc:#2a7a6a; --c-exp:#c4862b; --on-bad:#ffffff;
  --scrim:rgb(14 22 20 / .45); --shadow:0 1px 2px rgb(20 32 29 / .06), 0 6px 20px rgb(20 32 29 / .07);
  --f-ui:"IBM Plex Sans Hebrew","Segoe UI","Arial Hebrew",Arial,sans-serif;
  --f-disp:"Frank Ruhl Libre","David","Times New Roman",serif;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e1413; --surface:#151e1c; --surface-2:#1a2523; --sunk:#0b100f; --ink:#e5eeeb; --ink-2:#c3d0cc; --muted:#93a49f; --line:#283633;
  --pine:#73c2b0; --pine-2:#8fd3c3; --on-pine:#08130f; --pine-soft:#1c3631;
  --brass:#e2ab55; --brass-soft:#3a2d16;
  --good:#79cf95; --good-bg:#183324; --warn:#f0b05c; --warn-bg:#3a2a12; --bad:#f2847a; --bad-bg:#3e1d1a; --info:#8ab8f0; --info-bg:#1a2b42;
  --c-inc:#5fbfa9; --c-exp:#e0a54a; --on-bad:#1c0806;
  --scrim:rgb(0 0 0 / .6); --shadow:0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1413; --surface:#151e1c; --surface-2:#1a2523; --sunk:#0b100f; --ink:#e5eeeb; --ink-2:#c3d0cc; --muted:#93a49f; --line:#283633;
  --pine:#73c2b0; --pine-2:#8fd3c3; --on-pine:#08130f; --pine-soft:#1c3631;
  --brass:#e2ab55; --brass-soft:#3a2d16;
  --good:#79cf95; --good-bg:#183324; --warn:#f0b05c; --warn-bg:#3a2a12; --bad:#f2847a; --bad-bg:#3e1d1a; --info:#8ab8f0; --info-bg:#1a2b42;
  --c-inc:#5fbfa9; --c-exp:#e0a54a; --on-bad:#1c0806;
  --scrim:rgb(0 0 0 / .6); --shadow:0 1px 2px rgb(0 0 0 / .3), 0 6px 20px rgb(0 0 0 / .25);
  color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
#app{min-height:100%;display:grid;grid-template-columns:248px minmax(0,1fr)}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px;border-radius:6px}
.num,.money{font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0;text-wrap:balance}
a{color:var(--pine)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* rail */
.rail{position:sticky;top:0;height:100vh;height:100dvh;overflow:auto;display:flex;flex-direction:column;gap:4px;background:var(--surface);border-inline-start:0;border-inline-end:1px solid var(--line);padding:18px 14px;padding-right:max(14px,env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.brand-mark{width:34px;height:34px;border-radius:9px;background:var(--pine);color:var(--on-pine);display:grid;place-items:center}
.brand-mark svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.brand b{font-family:var(--f-disp);font-size:24px;font-weight:700;letter-spacing:.01em;line-height:1}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.nav-btn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:8px;cursor:pointer;color:var(--ink-2);text-align:right;font-weight:500}
.nav-btn:hover{background:var(--surface-2)}
.nav-btn[aria-current="page"]{background:var(--pine-soft);color:var(--pine-2)}
.nav-btn .cnt{margin-inline-start:auto;font-size:12px;background:var(--bad-bg);color:var(--bad);border-radius:999px;padding:0 7px;font-weight:600}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:8px}
.sync{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sync[data-m="cloud"] i{background:var(--good)}
.sync[data-m="local"] i{background:var(--warn)}

/* main */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:12px;padding-block:12px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.search{position:relative;flex:1;max-width:520px}
.search input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 38px 9px 12px;font-size:16px}
.search>svg{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted)}
.sres{position:absolute;inset-inline:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:60vh;overflow:auto;padding:6px}
.sres button{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;text-align:right;padding:8px 10px;border-radius:7px;cursor:pointer}
.sres button:hover,.sres button:focus{background:var(--surface-2)}
.sres small{color:var(--muted)}
.sp{flex:1}
.page{padding-block:22px 110px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));max-width:1280px;width:100%;display:flex;flex-direction:column;gap:20px}
.ph{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ph h1{font-family:var(--f-disp);font-size:30px;font-weight:700;line-height:1.15}
.ph .sub{color:var(--muted);font-size:14px;margin-top:4px}
.ph .acts{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}
.crumb{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--muted);cursor:pointer;padding:0;font-size:13.5px;margin-bottom:6px}
.crumb:hover{color:var(--pine)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:9px;cursor:pointer;font-weight:500;white-space:nowrap;text-decoration:none;font-size:14.5px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--pine);border-color:var(--pine);color:var(--on-pine)}
.btn.primary:hover{background:var(--pine-2)}
.btn.ghost{background:none;border-color:transparent}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:7px}
.btn.ai{border-color:var(--brass);color:var(--brass)}
.btn[disabled]{opacity:.55;cursor:default}
.icon-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;border:0;background:none;color:var(--muted);cursor:pointer;text-decoration:none}
.icon-btn:hover{background:var(--surface-2);color:var(--ink)}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.card-h h2{font-size:15.5px;font-weight:600}
.card-h .meta{color:var(--muted);font-size:13px}
.card-h .acts{margin-inline-start:auto;display:flex;gap:6px}
.card-b{padding:14px 16px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:20px;align-items:start}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .k{color:var(--muted);font-size:12.5px;letter-spacing:.02em}
.tile .v{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.25}
.tile .d{font-size:12.5px;color:var(--muted)}
.tile.alert .v{color:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.chip.good{background:var(--good-bg);color:var(--good)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.info{background:var(--info-bg);color:var(--info)}
.chip.brass{background:var(--brass-soft);color:var(--brass)}
.chip.sample{background:var(--brass-soft);color:var(--brass);font-weight:500}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.muted{color:var(--muted)}
.empty{padding:28px 16px;text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.empty b{color:var(--ink);font-size:15.5px}

/* rows */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line);min-width:0}
.rows .row:first-child{border-top:0}
.row .main-t{min-width:0;flex:1}
.row .main-t b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .main-t small{color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.click{cursor:pointer}
.row.click:hover{background:var(--surface-2)}
.datebox{width:52px;flex:none;text-align:center;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);padding:4px 0;line-height:1.15}
.datebox b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.datebox small{font-size:11px;color:var(--muted)}
.datebox.late{background:var(--bad-bg);border-color:transparent;color:var(--bad)}
.datebox.late small{color:var(--bad)}
.datebox.soon{background:var(--warn-bg);border-color:transparent;color:var(--warn)}
.datebox.soon small{color:var(--warn)}

/* tables */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-weight:600;color:var(--muted);font-size:12.5px;text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n,.tbl th.n{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--surface-2)}
.tbl tfoot td{font-weight:600;background:var(--surface-2)}
.inc{color:var(--good)} .exp{color:var(--bad)}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters select,.filters input{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 10px;font-size:14px;max-width:100%}
.seg{display:inline-flex;background:var(--sunk);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 12px;border-radius:7px;cursor:pointer;color:var(--ink-2);font-weight:500;font-size:13.5px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;cursor:pointer;color:var(--muted);font-weight:500;border-bottom:2px solid transparent;white-space:nowrap;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--pine-2);border-bottom-color:var(--pine)}

/* property cards */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:right;min-width:0}
.pcard:hover{border-color:var(--muted)}
.pcard h3{font-size:17px;font-weight:600}
.pcard .addr{color:var(--muted);font-size:13.5px}
.pcard .chips{display:flex;gap:6px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
.dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:14px 20px}
.dl div{min-width:0}
.dl dt{color:var(--muted);font-size:12.5px}
.dl dd{margin:2px 0 0;font-weight:500;overflow-wrap:anywhere}
.parcel{font-family:var(--f-ui);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* contacts */
.avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:600;background:var(--pine-soft);color:var(--pine-2);font-size:14px}
.phone{display:inline-flex;align-items:center;gap:2px;direction:ltr;font-variant-numeric:tabular-nums;user-select:all}
.cacts{display:flex;gap:2px;align-items:center;flex-wrap:wrap}

/* chart */
.chart{position:relative;min-height:220px}
.chart svg{display:block;overflow:visible}
.chart .ax{fill:var(--muted);font-size:11px;font-family:var(--f-ui)}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .hit:hover{fill:var(--surface-2)}
.legend{display:flex;gap:16px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px}
.tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px;padding:8px 10px;font-size:12.5px;min-width:150px;z-index:2}
.tip b{display:block;margin-bottom:3px}
.tip div{display:flex;justify-content:space-between;gap:12px}
.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:minmax(90px,130px) 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.bar .track{height:10px;border-radius:0 4px 4px 0;background:none;position:relative}
.bar .fill{height:100%;border-radius:4px 0 0 4px;background:var(--c-exp);margin-inline-start:0}
.bar .val{font-variant-numeric:tabular-nums;min-width:70px;text-align:left}

/* modal */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.scrim{position:absolute;inset:0;background:var(--scrim)}
.sheet{position:relative;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);width:min(640px,100%);max-height:calc(100dvh - 40px);display:flex;flex-direction:column;min-width:0}
.sheet.wide{width:min(900px,100%)}
.sheet.narrow{width:min(420px,100%)}
.sheet-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet-h h2{font-size:18px;font-weight:600;font-family:var(--f-disp)}
.sheet-h .icon-btn{margin-inline-start:auto}
.sheet-b{padding:18px 20px;overflow:auto;min-height:0}
.sheet-f{display:flex;gap:8px;align-items:center;padding:12px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.form{display:contents}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1 / -1}
.field.sect{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.field.sect h3{font-size:13px;color:var(--brass);letter-spacing:.04em;font-weight:600}
.field label{font-size:13px;color:var(--ink-2);font-weight:500;display:flex;align-items:center;gap:6px}
.field label .add{margin-inline-start:auto;border:0;background:none;color:var(--pine);cursor:pointer;font-size:12.5px;padding:0}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:9px 11px;font-size:16px;width:100%;min-width:0}
.field textarea{min-height:76px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--pine);outline-offset:0;background:var(--surface)}
.field.err input,.field.err select,.field.err .checks{border-color:var(--bad);outline:1px solid var(--bad)}
.field .hint{font-size:12px;color:var(--muted)}
.field.check{flex-direction:row;align-items:center;gap:8px}
.field.check input{width:18px;height:18px}
.checks{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);max-height:160px;overflow:auto;padding:6px}
.checks label{display:flex;align-items:center;gap:8px;padding:4px 6px;font-weight:400;color:var(--ink);cursor:pointer;border-radius:6px}
.checks label:hover{background:var(--surface)}
.checks input{width:16px;height:16px}
.att{display:flex;flex-direction:column;gap:6px}
.att-item{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13.5px;min-width:0}
.att-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qa{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.qa button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);cursor:pointer;font-weight:500}
.qa button:hover{border-color:var(--pine);color:var(--pine-2)}
.qa svg.i{width:22px;height:22px}
.preview{max-width:100%;max-height:70vh;display:block;margin:auto;border-radius:8px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:80;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:500;box-shadow:var(--shadow);max-width:calc(100% - 32px)}
.toast.bad{background:var(--bad);color:var(--on-bad)}
.banner{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:10px 14px;font-size:13.5px}
.banner.info{background:var(--info-bg);color:var(--info)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;counter-reset:s}
.step{border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--surface-2)}
.step::before{counter-increment:s;content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--pine);color:var(--on-pine);display:grid;place-items:center;font-weight:700;font-size:13px}
.hero-date{font-family:var(--f-disp);font-size:15px;color:var(--brass);font-weight:500}
.loading{display:flex;align-items:center;gap:10px;color:var(--muted);padding:40px 0}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--pine);animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation:none}}
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;align-items:start}
.tcard{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:12px;display:flex;flex-direction:column;gap:6px;cursor:pointer}
.tcard:hover{border-color:var(--muted)}
.col-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;padding:0 4px 8px}
.col-b{display:flex;flex-direction:column;gap:8px}
.month-h{padding:10px 16px 6px;font-size:12.5px;font-weight:600;color:var(--brass);letter-spacing:.03em;background:var(--surface-2);border-top:1px solid var(--line)}

/* mobile */
.tabbar{display:none}
.fab{display:none}
@media (max-width: 899px){
  #app{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .top-in{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px}
  .page{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 120px;gap:16px}
  .ph h1{font-size:25px}
  .top .newbtn{display:none}
  .mbrand{display:flex!important}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
  .tabbar button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;font-size:11px;color:var(--muted);cursor:pointer;position:relative}
  .tabbar button[aria-current="page"]{color:var(--pine-2)}
  .tabbar svg.i{width:22px;height:22px}
  .tabbar .cnt{position:absolute;top:4px;left:calc(50% - 20px);background:var(--bad);color:var(--on-bad);border-radius:999px;font-size:10px;padding:0 5px;font-weight:700}
  .fab{display:grid;place-items:center;position:fixed;z-index:41;left:max(16px,calc(env(safe-area-inset-left,0px) + 12px));bottom:calc(72px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:16px;border:0;background:var(--pine);color:var(--on-pine);box-shadow:var(--shadow);cursor:pointer}
  .fab svg.i{width:26px;height:26px}
  .modal{padding:0;place-items:end stretch}
  .sheet,.sheet.wide,.sheet.narrow{width:100%;border-radius:16px 16px 0 0;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 24px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .row{padding:11px 14px}
  .hide-m{display:none!important}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{padding:12px}
  .tile .v{font-size:20px}
  .bar{grid-template-columns:90px 1fr auto}
}
.mbrand{display:none;align-items:center;gap:8px}
.mbrand .brand-mark{width:30px;height:30px}
.mbrand b{font-family:var(--f-disp);font-size:20px}

/* ---------- standalone app: sign-in, portals, account ---------- */
#app[data-shell="auth"], #app[data-shell="portal"] { grid-template-columns: minmax(0, 1fr); }
#app[data-shell="auth"] .rail, #app[data-shell="auth"] .top, #app[data-shell="auth"] .tabbar, #app[data-shell="auth"] .fab,
#app[data-shell="portal"] .rail, #app[data-shell="portal"] .tabbar, #app[data-shell="portal"] .fab,
#app[data-shell="portal"] .search, #app[data-shell="portal"] .newbtn { display: none !important; }
#app[data-shell="portal"] .mbrand { display: flex !important; }
#app[data-shell="portal"] .top-in { justify-content: space-between; }
#app[data-shell="portal"] .page { max-width: 1100px; margin-inline: auto; }
.mbrand b { font-family: var(--f-disp); font-size: 20px; }
#userbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--pine-2); font-weight: 600; font-size: 13px; cursor: pointer; flex: none; }
#userbtn:hover { border-color: var(--pine); }
.auth-wrap { min-height: calc(100dvh - 160px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .brand-mark { width: 44px; height: 44px; border-radius: 12px; }
.auth-brand .brand-mark svg { width: 26px; height: 26px; }
.auth-brand b { font-family: var(--f-disp); font-size: 32px; line-height: 1; }
.auth-brand small { display: block; color: var(--muted); margin-top: 2px; }
.auth-card { width: min(420px, 100%); box-shadow: var(--shadow); }
.auth-form { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.auth-form h1 { font-family: var(--f-disp); font-size: 24px; }
.auth-form .btn.primary { padding-block: 11px; }
.auth-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linkbtn { border: 0; background: none; color: var(--pine); cursor: pointer; padding: 0; font-size: 14px; }
.linkbtn:hover { text-decoration: underline; }
.sect-t { font-size: 16px; font-weight: 600; margin: 4px 0 -6px; }
.tbl select { border: 1px solid var(--line); background: var(--surface-2); border-radius: 7px; padding: 6px 8px; font-size: 14px; max-width: 220px; }
@media (max-width: 899px) { #app[data-shell="portal"] .page { padding-block: 16px 40px; } }
/* sign-in screen: intro beside the form */
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: center; width: min(1000px, 100%); }
.auth-grid.solo { grid-template-columns: minmax(0, 400px); justify-content: center; }
.auth-grid .auth-card { width: 100%; }
.auth-intro { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.auth-intro h2 { font-family: var(--f-disp); font-size: 30px; font-weight: 700; line-height: 1.2; }
.auth-intro p { margin: 0; color: var(--ink-2); line-height: 1.75; max-width: 56ch; font-size: 15.5px; }
.auth-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-roles li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.6; color: var(--ink-2); }
.auth-roles b { color: var(--ink); }
.auth-ic { flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--pine-soft); color: var(--pine-2); display: grid; place-items: center; }
.auth-intro .auth-note { font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 899px) {
  .auth-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .auth-intro h2 { font-size: 24px; }
  .auth-wrap { justify-content: flex-start; padding-top: 8px; }
}
/* rights notice at the bottom of every screen */
.credit { margin: 8px 0 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: 12.5px; color: var(--muted); }
.credit b { font-weight: 600; color: var(--ink-2); }
#app[data-shell="auth"] .credit { border-top: 0; }