/* Lodgaroo — light product theme. Brand: green house + navy + orange roo. */
:root {
  --bg:#f6f8fc; --bg2:#ffffff; --surface:#ffffff; --surface2:#f2f5fa;
  --ink:#16213a; --muted:#5d6b80; --line:#e6eaf2; --line2:#d6dce8;
  --accent:#1a9e64; --accent2:#138a54; --accent-ink:#ffffff;   /* logo green */
  --navy:#1f3a5f; --orange:#f5853f;
  --ok:#178a54; --ok-bg:#e7f6ee; --warn:#9a6a12; --warn-bg:#fbf1dd; --err:#cf4646; --err-bg:#fcebeb;
  --radius:14px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 12px 26px -14px rgba(16,24,40,.16);
  --shadow-lg:0 30px 70px -30px rgba(16,24,40,.22);
  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Safe-area insets. Android's WebView frequently reports env() as 0 even under edge-to-edge, so
     content ends up behind the status/nav bars. Inside the app (html.is-app, set by a head script)
     we FLOOR the insets to real bar heights. Normal browsers keep env() (usually 0) → no change. */
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
html.is-app{ --sat: max(env(safe-area-inset-top, 0px), 26px); --sab: max(env(safe-area-inset-bottom, 0px), 14px); }
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
  background:radial-gradient(1100px 560px at 50% -8%, rgba(26,158,100,.08), transparent 60%), linear-gradient(180deg,#f7f9fc,#eef2f8);
  background-attachment:fixed}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px;margin:0 auto;padding:28px 18px 72px}
.narrow{max-width:430px;margin:6vh auto;padding:0 18px}
/* Bare pages have no top bar, so their content must clear the status bar itself (in-app). */
body.bare .wrap{padding-top:calc(28px + var(--sat));padding-bottom:calc(72px + var(--sab))}
body.bare .narrow{margin-top:calc(6vh + var(--sat))}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:calc(12px + var(--sat)) calc(22px + env(safe-area-inset-right,0px)) 12px calc(22px + env(safe-area-inset-left,0px));background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.brand{display:inline-flex;align-items:center;font-weight:800;font-size:1.1rem;letter-spacing:-.02em;color:var(--ink)}
.brand .rev{font-size:.6rem;font-weight:800;color:var(--accent-ink);background:var(--accent);border-radius:6px;padding:2px 6px;margin-left:8px;vertical-align:middle}
.brandlogo{height:46px;vertical-align:middle;display:inline-block}
.topbar nav{display:flex;gap:20px;align-items:center}
.topbar nav a{color:var(--muted);font-size:.92rem;font-weight:500;transition:color .15s}
.topbar nav a:hover{color:var(--ink);text-decoration:none}

/* cards + headings */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:20px;box-shadow:var(--shadow)}
.card.tight{padding:18px}
h1{font-size:1.7rem;margin:0 0 6px;letter-spacing:-.025em;font-weight:800}
h2{font-size:1.15rem;margin:24px 0 12px;letter-spacing:-.01em;font-weight:700}
.muted{color:var(--muted)}
.center{text-align:center}

/* forms */
label{display:block;font-weight:600;font-size:.85rem;margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px 13px;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:var(--radius-sm);transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,158,100,.16)}

/* buttons */
button,.btn{display:inline-block;margin-top:18px;padding:12px 18px;background:linear-gradient(180deg,var(--accent),var(--accent2));color:var(--accent-ink);border:0;border-radius:var(--radius-sm);font:inherit;font-weight:800;cursor:pointer;text-align:center;text-decoration:none;box-shadow:0 6px 16px -8px rgba(20,138,84,.5);transition:transform .12s, filter .12s}
button:hover,.btn:hover{filter:brightness(1.05);text-decoration:none;transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0)}
button:disabled,button[disabled],.btn:disabled,.btn[disabled]{filter:grayscale(1);opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
button:disabled:hover,.btn:disabled:hover{filter:grayscale(1);transform:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line2);font-weight:600;box-shadow:none}
.btn.ghost:hover{background:var(--surface2);border-color:var(--muted)}
.btn.block{display:block;width:100%}
.btn.google{background:#fff;color:#1f2330;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:none}
.btn.small{padding:6px 12px;margin-top:0;font-size:.85rem;box-shadow:none}
.btn.ok{background:linear-gradient(180deg,#1fb172,#138a54);color:#fff}
.btn.danger{background:linear-gradient(180deg,#e25555,#cf4646);color:#fff}

/* flashes */
.flash{padding:12px 14px;border-radius:var(--radius-sm);margin:14px 0;font-size:.92rem;border:1px solid transparent}
.flash.error{background:var(--err-bg);color:#b23636;border-color:rgba(207,70,70,.25)}
.flash.ok{background:var(--ok-bg);color:#137a4d;border-color:rgba(23,138,84,.22)}
.flash.info{background:#e8f0ff;color:#2257b8;border-color:rgba(37,99,192,.2)}

/* pills */
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:800}
.pill.ok{background:var(--ok-bg);color:#137a4d}
.pill.warn{background:var(--warn-bg);color:#8a5d10}
.pill.dev{background:#efe9fe;color:#6d4bd0}
.pill.err{background:var(--err-bg);color:#b23636}
.pill.pending{background:#e8f0ff;color:#2257b8}
.pill.muted{background:#eef1f6;color:var(--muted)}
.pill.dr{background:#fbf1dd;color:#8a5d10}   /* debit balance (Dr) — neutral amber */
.pill.cr{background:var(--ok-bg);color:#137a4d} /* credit balance (Cr) */
.pill.nil{background:#eef1f6;color:var(--muted)}

/* hero + landing */
.hero{padding:5vh 0 3vh;text-align:center}
.landing-note{max-width:680px;margin:4px auto 8px;text-align:center;color:var(--muted);font-size:.9rem;line-height:1.5;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 18px}
.herologo{display:inline-block;margin-bottom:18px}
.herologo img{height:248px;max-width:100%;display:block;filter:drop-shadow(0 14px 32px rgba(16,24,40,.16))}
.hero h1{font-size:2.8rem;line-height:1.08;letter-spacing:-.03em;margin:0;color:var(--ink)}
.hero h1 .hl{background:linear-gradient(90deg,var(--accent),#34c98b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:1.12rem;max-width:560px;margin:16px auto 28px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:10px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .15s, border-color .15s}
.feature:hover{transform:translateY(-2px);border-color:var(--line2)}
.feature .ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(26,158,100,.12);color:var(--accent);margin-bottom:13px}
.feature .ico svg{width:21px;height:21px}
.feature h3{margin:0 0 6px;font-size:1.02rem;font-weight:700;color:var(--ink)}
.feature p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
.sitefoot{text-align:center;color:var(--muted);font-size:.85rem;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}

.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* tables */
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
tbody tr{transition:background .12s}
tbody tr:hover{background:#f7f9fc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.settled td{color:var(--muted)}
tr.upcoming td{color:var(--muted)}
tr.ledger-sep td{padding-top:14px;font-size:.66rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-top:1px solid var(--line)}
tfoot td,tr.ledger-total td{font-weight:800;border-top:2px solid var(--line2)}

/* misc layout */
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1 1 0;min-width:140px}
.check{display:flex;align-items:center;gap:8px;font-weight:500;margin:14px 0 0}
.check input{width:auto}
.statline{display:flex;gap:28px;flex-wrap:wrap;margin:8px 0 0}
.statline .stat .big{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.statline .stat .lbl{font-size:.72rem;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.debit{color:var(--err)}
.credit{color:var(--ok)}
.tabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{padding:10px 16px;cursor:pointer;color:var(--muted);font-weight:700;border:0;background:transparent;border-bottom:2px solid transparent;margin:0;border-radius:0;font-size:.95rem;transition:color .12s;white-space:nowrap;flex:0 0 auto}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.tabpanel{display:none}
.tabpanel.active{display:block}
/* Subtle per-row delete in the ledger */
.ledger-del{background:none;border:0;color:var(--line2);cursor:pointer;font-size:1.1rem;line-height:1;padding:0 4px;margin:0;vertical-align:middle}
.ledger-del:hover{color:var(--err)}
.delcol{display:none;width:1%;white-space:nowrap;text-align:center}
.delmode .delcol{display:table-cell}
/* Section header row inside the lodgers table (Lodgers / Non-lodgers) */
.rowhead td{background:var(--surface2);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:9px 14px 6px}
/* Dashboard group tiles */
.grouplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:4px}
.groupbox{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;background:var(--surface2)}
.groupbox-name{font-weight:700;color:var(--ink);text-decoration:none}
.groupbox-name:hover{color:var(--accent)}
.groupbox-link{font-size:.82rem;margin-top:3px;word-break:break-all}
/* Discreet "create group" disclosure */
.addgroup>summary{display:inline-block;cursor:pointer;list-style:none;color:var(--accent);font-weight:700;font-size:.9rem}
.addgroup>summary::-webkit-details-marker{display:none}
.addgroup>summary::marker{content:""}
/* Dev-only view toggle in the top nav */
.devtoggle{font-size:.78rem;padding:2px 8px;border:1px solid var(--line2);border-radius:999px;color:var(--muted)!important}
.devtoggle.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)!important}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar>form{margin:0}
.btn.link-danger{background:transparent;border:0;box-shadow:none;color:var(--muted);font-weight:600}
.btn.link-danger:hover{color:var(--err);filter:none}
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:44px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;box-shadow:none;margin:0;padding:7px;cursor:pointer;color:var(--muted);display:flex;align-items:center}
.pw-eye:hover{color:var(--ink);filter:none}
.pw-eye .eye-off{display:none}
.pw-eye.on .eye-on{display:none}
.pw-eye.on .eye-off{display:flex}
/* Messaging */
.msg-threads{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.msg-tab{background:var(--surface2);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:.85rem;padding:6px 12px;border-radius:999px;margin:0;cursor:pointer;box-shadow:none}
.msg-tab:hover{filter:none;border-color:var(--line2)}
.msg-tab.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.msg-badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:999px;background:var(--err);color:#fff;font-size:.72rem;line-height:18px;text-align:center;vertical-align:middle}
.msg-tab.on .msg-badge{background:#fff;color:var(--accent)}
.msg-list{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px}
.msg{max-width:78%;display:flex;flex-direction:column}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.them{align-self:flex-start;align-items:flex-start}
.msg-name{font-size:.72rem;color:var(--muted);margin:0 6px 2px}
.msg-bubble{padding:8px 12px;border-radius:14px;background:var(--surface2);white-space:pre-wrap;word-break:break-word}
.msg.me .msg-bubble{background:var(--accent);color:var(--accent-ink)}
.msg-at{font-size:.68rem;color:var(--muted);margin:2px 6px 0}
.msg-empty{color:var(--muted);text-align:center;padding:20px}
.msg-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.msg-img{max-width:210px;max-height:210px;border-radius:10px;display:block;cursor:pointer}
.msg-file{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:10px;background:var(--surface2);color:var(--ink);font-size:.85rem;text-decoration:none;border:1px solid var(--line)}
.msg.me .msg-file{background:rgba(255,255,255,.22);color:var(--accent-ink);border-color:transparent}
.msg-compose-files{font-size:.8rem;color:var(--muted);margin-top:4px;word-break:break-word}
.rules-text{white-space:pre-wrap;line-height:1.65;word-break:break-word}
.emoji-wrap{position:relative;display:inline-block}
.emoji-panel{position:absolute;bottom:calc(100% + 6px);right:0;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;display:none;grid-template-columns:repeat(8,1fr);gap:2px;width:272px;max-height:208px;overflow:auto}
.emoji-panel.open{display:grid}
.emoji-panel button{background:none;border:0;box-shadow:none;margin:0;padding:4px;font-size:1.2rem;line-height:1;cursor:pointer;border-radius:8px}
.emoji-panel button:hover{background:var(--surface2);filter:none}
.devpanel{background:#f3effe;border:1px solid #ddd2fb}
.kv{display:flex;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.kv b{color:var(--ink)}
.sitefooter{text-align:center;color:var(--muted);font-size:.85rem;padding:24px 18px 34px;border-top:1px solid var(--line);margin-top:36px}
.footer-brand{display:inline-flex;margin-bottom:14px}
.footer-brand .brandlogo{height:115px}
.footer-dev{margin-top:14px}
.sitefooter a{color:var(--muted)}
.sitefooter a:hover{color:var(--ink)}
/* --- Ledger stream filter (All / Rent / Expenses). When filtered, hide non-matching
   rows, the running-balance column (.balcol) and All-only rows (.allonly). Untagged
   payments carry data-stream="pay" so they only appear under "All". --- */
.led-filter[data-f="rent"] tbody tr[data-stream="bill"],
.led-filter[data-f="rent"] tbody tr[data-stream="pay"],
.led-filter[data-f="bill"] tbody tr[data-stream="rent"],
.led-filter[data-f="bill"] tbody tr[data-stream="pay"]{display:none}
.led-filter[data-f="rent"] .allonly,.led-filter[data-f="bill"] .allonly{display:none}
.led-filter[data-f="rent"] .balcol,.led-filter[data-f="bill"] .balcol{display:none}
.led-hide{display:none}   /* free-text search hides non-matching rows (composes with the stream filter) */
tr.jl-over{display:none}  /* journal limiter: rows beyond the "show last N" window (composes with filters) */
#hTable.md-run tr.noncash td{opacity:.5}  /* cashbook: accrual (non-cash) rows greyed — they do not move the running cash balance */
#hTable.md-dr tr.settled td,#hTable.md-dr tr.upcoming td{color:var(--ink)}  /* Dr/Cr journal: charges are real debits, not greyed */
/* The ledger's columns are narrow; without this the browser leaves the leftover width unallocated
   on the right (a dead gap). Force full width and let Detail (col 2) absorb the slack, so the
   numeric columns sit flush at the right edge and the table fills its card. */
/* The overflow:auto scroll-wrappers shrink-wrap to content in Chromium (a quirk with a
   width:100% table + many rows), leaving the card half-empty. Force them to fill the card so the
   table fills too — then its columns distribute naturally, matching the lodger ledger (no single
   column forced to absorb the slack, so Date isn't squeezed into a 3-line wrap). Mobile still
   scrolls because a table wider than the wrapper overflows it. */
#hLedgerWrap>div,#hSummaryWrap>div{width:100%}
#hTable,#hSummary{width:100%}
#hSummary th:nth-child(1){width:100%}
/* Logged-in lodger: their name is fixed (not an editable picker) on the pay form. */
.lockedname{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel,#f7f7f9);font-weight:600}
/* Collapsible cards (details.card): the summary is an always-visible header with a chevron. */
details.card>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:700;font-size:1rem;color:var(--ink);user-select:none}
details.card>summary::-webkit-details-marker{display:none}
details.card>summary::before{content:'▸';font-size:.75rem;color:var(--muted);transition:transform .12s}
details.card[open]>summary::before{content:'▾'}
details.card[open]>summary{margin-bottom:12px}
/* Expense splitter: tick a person to include them in the split — row highlights; unticked dims. */
.expRow.exp-on>td{background:rgba(20,138,84,.07)}
.expRow.exp-off{opacity:.5}
.expRow.exp-off .expPct{background:var(--surface2,#f1f1f4);cursor:not-allowed}
/* Landlord's own expense share in the consolidated ledger: his out-of-pocket cost,
   shown but flagged (amber) so it reads as a cost, not as money owed to him. */
.oop{color:#b26a00;font-weight:600}
.pill.oop{background:#fff3e0;color:#b26a00}
@media (prefers-color-scheme:dark){.oop{color:#f0b060}.pill.oop{background:rgba(240,176,96,.15);color:#f0b060}}
/* Print: statement only — drop the app chrome + on-screen controls. */
@media print{.topbar,.sitefooter,.no-print{display:none!important}.card{box-shadow:none;border:0}body{background:#fff}}
/* --- Mobile: keep the whole top nav reachable (no sideways scroll to reach Log out). --- */
@media (max-width:600px){
  .topbar{flex-wrap:wrap;gap:6px 12px;padding:calc(10px + var(--sat)) calc(14px + env(safe-area-inset-right,0px)) 10px calc(14px + env(safe-area-inset-left,0px))}
  .topbar nav{width:100%;justify-content:flex-end;flex-wrap:wrap;gap:8px 16px}
  .topbar nav a{font-size:.9rem}
  .brandlogo{height:38px}
  .footer-brand .brandlogo{height:95px}
  /* Group tabs wrap onto multiple rows so every tab is visible (no hidden sideways scroll). */
  .tabs{flex-wrap:wrap;overflow-x:visible;gap:4px 10px}
  /* House ledger + summary: fit the phone (compact cells, wrapping detail) so the whole row shows — no sideways scroll. */
  #hTable,#hSummary{font-size:.82rem}
  #hTable th,#hTable td,#hSummary th,#hSummary td{padding:8px 5px}
  #hTable td:nth-child(2){overflow-wrap:anywhere}
}

.exp-simple .exp-col-share,.exp-simple .exp-col-lock{display:none}  /* one-tap split: %/lock hidden until "Adjust shares" */
#expSplitTable.exp-collapsed tbody tr:not(:first-child){display:none}  /* House-covers default: people rows hidden until "Split with people" */
#expSplitTable:not(.exp-collapsed) .expHouse{opacity:.5}  /* splitting with people: House is the greyed, non-selectable residual */