/* New pages (app/js/19-pages.js): Home, Receivables/Payables, Customers/
   Vendors, GST and tax, Audit log. Matches the agreed mock app-frame-mock.html.
   Tokens from tokens.css. */

.mg-page{ font-family:var(--font-ui); color:var(--g900); }
.mg-page h1, .mg-page h2{ margin:0; }

/* page header: breadcrumb · title · scope line · actions */
.mg-ph{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.mg-ph-l{ min-width:0; }
.mg-crumb{ font-size:var(--f13); color:var(--g500); margin-bottom:4px; }
.mg-title{ font-size:var(--f24); font-weight:700; letter-spacing:-.01em; line-height:1.2; }
.mg-ph-sub{ font-size:var(--f14); color:var(--g600); margin-top:6px; max-width:80ch; }
.mg-ph-actions{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.mg-ph-actions .mg-btn svg{ margin-right:6px; }
.mg-scopeline, .mg-page .mg-scopeline{ font-family:var(--font-num); font-size:var(--f12); }

/* panels */
.mg-panel{ background:var(--g0); border:1px solid var(--g200); border-radius:var(--r-panel); margin-bottom:16px; min-width:0; }
.mg-panel-h{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--g100); }
.mg-panel-h h2{ font-size:var(--f16); font-weight:700; }
.mg-aside{ margin-left:auto; font-size:var(--f12); color:var(--g500); }
.mg-panel-b{ padding:16px; }
.mg-empty{ padding:24px 16px; color:var(--g500); font-size:var(--f13); }
.mg-empty-panel{ padding:24px; }
.mg-empty-panel h2{ font-size:var(--f16); margin-bottom:6px; }
.mg-empty-panel p{ color:var(--g600); font-size:var(--f14); margin:0 0 14px; }
.mg-link{ border:0; background:none; padding:0; color:var(--link); font:600 var(--f12)/1.4 var(--font-ui); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.mg-fine{ font-size:var(--f12); color:var(--g500); margin-top:4px; }

/* KPI tiles */
.mg-tiles{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; margin-bottom:16px; }
.mg-tiles.four{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.mg-tile{ text-align:left; background:var(--g0); border:1px solid var(--g200); border-radius:var(--r-panel); padding:14px 16px; min-width:0; cursor:pointer; font:inherit; color:inherit; transition:border-color .15s; }
.mg-tile:hover{ border-color:var(--g300); }
.mg-tile-l{ font-size:var(--f13); font-weight:600; color:var(--g600); }
.mg-tile-v{ font-family:var(--font-num); font-size:var(--f24); font-weight:600; letter-spacing:-.02em; margin:6px 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-tile-chg{ font-family:var(--font-num); font-size:var(--f12); }
.mg-tile-chg.good{ color:var(--pos); } .mg-tile-chg.bad{ color:var(--neg); } .mg-tile-chg.flat{ color:var(--g500); }
.mg-tile-src{ font-size:var(--f12); color:var(--g500); margin-top:8px; padding-top:8px; border-top:1px solid var(--g100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Home rows */
.mg-row2{ display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:16px; }
.mg-row3{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:start; } /* a short list ends, rather than leaving an empty box */
.mg-row2 > .mg-panel, .mg-row3 > .mg-panel{ margin-bottom:16px; }
.mg-ax{ font:12px var(--font-num); fill:var(--g500); }
.mg-pulse{ display:flex; gap:20px; align-items:center; }
.mg-pulse-n{ font-family:var(--font-num); font-size:var(--f32); font-weight:600; }
.mg-band{ display:inline-block; font-size:var(--f13); font-weight:700; border-radius:4px; padding:2px 8px; background:var(--g50); color:var(--g600); }
.mg-band.good{ background:var(--brand-50); color:var(--brand-700); }
.mg-band.warn{ background:var(--warn-50); color:var(--warn); }
.mg-band.bad{ background:var(--neg-50); color:var(--neg); }
.mg-drivers{ list-style:none; margin:14px 0 12px; padding:0; border-top:1px solid var(--g100); }
.mg-drivers li{ display:flex; gap:8px; padding:10px 0; border-bottom:1px solid var(--g100); font-size:var(--f13); }
.mg-pts{ margin-left:auto; font-family:var(--font-num); font-size:var(--f12); }
.mg-pts.neg{ color:var(--neg); } .mg-pts.pos{ color:var(--pos); }
.mg-li{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--g100); font-size:var(--f13); }
.mg-li:last-child{ border-bottom:0; }
.mg-li-t{ font-weight:600; }
.mg-li-s{ color:var(--g500); font-size:var(--f12); margin-top:2px; }
.mg-li-a{ margin-left:auto; font-family:var(--font-num); white-space:nowrap; }
.mg-li-a.neg{ color:var(--neg); background:var(--neg-50); border-radius:4px; padding:1px 6px; font-size:var(--f12); font-weight:600; }
.mg-ai-panel{ border-color:#EBCDBF; }
.mg-ai-panel h2{ color:var(--ai); }
.mg-ai-tag{ font-size:var(--f12); font-weight:600; color:var(--ai); background:var(--ai-50); border-radius:4px; padding:1px 6px; }
.mg-ai-panel p{ margin:0; font-size:var(--f14); line-height:1.6; color:var(--g900); max-width:90ch; }

/* toolbar, segmented control, aging */
.mg-toolbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.mg-seg{ display:inline-flex; border:1px solid var(--g200); border-radius:var(--r-ctl); background:var(--g0); padding:2px; }
.mg-seg button{ height:28px; padding:0 12px; border:0; background:none; border-radius:4px; font:600 var(--f13)/1 var(--font-ui); color:var(--g600); cursor:pointer; }
.mg-seg button.on{ background:var(--g100); color:var(--g900); }
.mg-search{ height:32px; min-width:200px; border:1px solid var(--g200); border-radius:var(--r-ctl); padding:0 10px; font:500 var(--f13) var(--font-ui); background:var(--g0); color:var(--g900); }
.mg-chip{ height:28px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border:1px solid var(--g300); border-radius:14px; background:var(--g0); font:600 var(--f12) var(--font-ui); color:var(--g600); cursor:pointer; }
.mg-count{ margin-left:auto; font-size:var(--f12); color:var(--g500); }
.mg-posnote{ margin:0 0 12px; padding:8px 12px; border-radius:6px; background:var(--g50); border:1px solid var(--g200); font-size:var(--f12); color:var(--g700); }
.mg-aging{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; background:var(--g200); border:1px solid var(--g200); border-radius:var(--r-panel); overflow:hidden; margin-bottom:12px; }
.mg-aging button{ background:var(--g0); border:0; padding:10px 14px; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.mg-aging button:hover{ background:var(--g25); }
.mg-aging button.on{ background:var(--brand-50); }
.mg-ag-l{ font-size:var(--f12); font-weight:600; color:var(--g600); }
.mg-ag-v{ font-family:var(--font-num); font-size:var(--f16); font-weight:600; margin-top:2px; }
.mg-ag-bar{ height:4px; border-radius:2px; background:var(--g100); margin-top:8px; overflow:hidden; }
.mg-ag-bar i{ display:block; height:100%; }

/* data grid (compact by default) */
.mg-gridwrap{ overflow-x:auto; }
.mg-grid{ width:100%; border-collapse:collapse; font-size:var(--f13); }
.mg-grid th{ position:sticky; top:0; background:var(--g25); text-align:left; font-weight:600; color:var(--g600); font-size:var(--f12); padding:8px 12px; border-bottom:1px solid var(--g200); white-space:nowrap; }
.mg-grid td{ padding:8px 12px; border-bottom:1px solid var(--g100); white-space:nowrap; vertical-align:middle; }
.mg-grid.comfy td{ padding:12px; }
.mg-grid tr:hover td{ background:var(--g25); }
.mg-grid .r{ text-align:right; }
.mg-grid td.r, .mg-mono{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.mg-grid td.mg-diff{ color:var(--neg); font-weight:600; }
.mg-grid td.mg-miss{ color:var(--neg); font-family:var(--font-num); }
.mg-muted{ color:var(--g500); }
.mg-grid tfoot td{ font-weight:700; background:var(--g25); border-top:1px solid var(--g200); }
.mg-grid tr.mg-click{ cursor:pointer; }
.mg-foot-note{ padding:10px 12px; font-size:var(--f12); color:var(--g500); }
.mg-row-act{ height:26px; padding:0 10px; border:1px solid var(--g200); border-radius:var(--r-ctl); background:var(--g0); font:600 var(--f12) var(--font-ui); color:var(--g900); cursor:pointer; opacity:0; transition:opacity .12s; }
.mg-grid tr:hover .mg-row-act, .mg-row-act:focus{ opacity:1; }
@media (hover:none){ .mg-row-act{ opacity:1; } }

/* badges and source marks */
.mg-bdg{ display:inline-flex; align-items:center; font-size:var(--f12); font-weight:600; border-radius:4px; padding:1px 6px; white-space:nowrap; background:var(--g50); color:var(--g600); font-family:var(--font-ui); }
.mg-bdg.pos{ background:var(--brand-50); color:var(--brand-700); }
.mg-bdg.neg{ background:var(--neg-50); color:var(--neg); }
.mg-bdg.warn{ background:var(--warn-50); color:var(--warn); }
.mg-src-logo{ width:18px; height:18px; border-radius:4px; display:inline-grid; place-items:center; font:700 10px/1 var(--font-ui); color:#fff; flex:none; }
.mg-srcs{ display:inline-flex; gap:3px; vertical-align:middle; margin-left:4px; }
.mg-srccell{ display:inline-flex; align-items:center; gap:6px; font-size:var(--f12); color:var(--g600); }
.mg-opt.mg-static{ cursor:default; }
.mg-opt.mg-static:hover{ background:none; }

/* responsive */
@media (max-width:1180px){
  .mg-tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .mg-tiles.four{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px){
  .mg-row2, .mg-row3{ grid-template-columns:minmax(0, 1fr); }
  .mg-ph-actions{ margin-left:0; }
  .mg-aging{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mg-search{ min-width:0; flex:1; }
}
@media (max-width:600px){
  .mg-tiles, .mg-tiles.four{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .mg-tile-v{ font-size:var(--f20); }
}

/* Inbox vs Agents (same underlying view) */
#view-agents.mg-is-inbox #agentTabs{ display:none; }
#view-agents.mg-is-agents #agentTabs [data-atab="queue"]{ display:none; }

/* ---------- forecast ---------- */
.mg-btn-sm{ height:28px; padding:0 10px; font-size:var(--f12); }
.mg-panel-h .mg-btn-sm{ margin-left:8px; }
.mg-fc-callout{ font-size:var(--f13); color:var(--brand-700); background:var(--brand-50); border-radius:var(--r-ctl); padding:8px 12px; margin-bottom:10px; }
.mg-fc-callout.warn{ color:var(--neg); background:var(--neg-50); }

/* ---------- detail drawer (plan §7.4) ---------- */
.mg-drawer-scrim{ position:fixed; inset:0; background:rgba(20,24,31,.24); z-index:900; }
.mg-drawer{ position:absolute; top:0; right:0; bottom:0; width:min(480px, 100%); background:var(--g0); border-left:1px solid var(--g200);
  box-shadow:var(--shadow-overlay); display:flex; flex-direction:column; font-family:var(--font-ui); color:var(--g900); animation:mgSlide .16s ease-out; }
@keyframes mgSlide{ from{ transform:translateX(24px); opacity:.6; } to{ transform:none; opacity:1; } }
.mg-drawer-h{ display:flex; align-items:flex-start; gap:12px; padding:16px 16px 12px 20px; border-bottom:1px solid var(--g100); }
.mg-drawer-h > div{ flex:1; min-width:0; }
.mg-drawer-h h3{ margin:0; font-size:var(--f20); font-weight:700; }
.mg-drawer-sub{ font-size:var(--f13); color:var(--g500); margin-top:4px; }
.mg-drawer-tabs{ display:flex; gap:20px; padding:0 20px; border-bottom:1px solid var(--g100); }
.mg-drawer-tabs button{ border:0; background:none; padding:10px 0; font:600 var(--f13) var(--font-ui); color:var(--g600); cursor:pointer; box-shadow:inset 0 -2px 0 transparent; }
.mg-drawer-tabs button.on{ color:var(--g900); box-shadow:inset 0 -2px 0 var(--brand); }
.mg-drawer-b{ flex:1; overflow:auto; padding:16px 20px; }
.mg-drawer-b h4{ font-size:var(--f13); font-weight:700; margin:18px 0 8px; color:var(--g600); }
.mg-drawer-f{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--g100); }
.mg-dl{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--g100); border:1px solid var(--g100); border-radius:var(--r-panel); overflow:hidden; margin-bottom:16px; }
.mg-dl > div{ background:var(--g0); padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.mg-dl span{ font-size:var(--f12); color:var(--g500); }
.mg-dl b{ font-family:var(--font-num); font-size:var(--f16); font-weight:600; }
.mg-dl b.neg{ color:var(--neg); }
.mg-dl b .mg-bdg{ font-size:var(--f12); }
.mg-src-block{ border:1px solid var(--g200); border-radius:var(--r-panel); margin-bottom:10px; }
.mg-src-block-h{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--g100); font-size:var(--f13); }
.mg-src-amt{ margin-left:auto; font-family:var(--font-num); font-weight:600; }
.mg-src-row{ display:grid; grid-template-columns:1fr auto auto; gap:12px; padding:6px 12px; font-size:var(--f12); color:var(--g600); }
.mg-act{ padding:10px 0; border-bottom:1px solid var(--g100); }
.mg-act-t{ font-size:var(--f13); font-weight:600; }
.mg-act-t::first-letter{ text-transform:uppercase; }

/* ---------- forms inside the drawer ---------- */
.mg-field{ display:grid; grid-template-columns:1fr 150px; gap:4px 12px; align-items:center; padding:8px 0; border-bottom:1px solid var(--g100); }
.mg-field-l{ font-size:var(--f13); color:var(--g900); }
.mg-field-in{ display:flex; align-items:center; border:1px solid var(--g200); border-radius:var(--r-ctl); background:var(--g0); height:32px; padding:0 8px; gap:4px; }
.mg-field-in i{ font-style:normal; color:var(--g500); font-size:var(--f12); }
.mg-field-in input{ border:0 !important; outline:0; width:100%; min-width:0; font:500 var(--f13) var(--font-num); background:transparent !important; text-align:right; padding:0 !important; margin:0 !important; height:100% !important; line-height:30px; box-shadow:none !important; }
.mg-field-v{ font-family:var(--font-num); font-weight:600; color:var(--g600); font-size:var(--f12); margin-left:4px; }
.mg-field-in:focus-within{ border-color:var(--link); }
.mg-field-h{ grid-column:1 / -1; font-size:var(--f12); color:var(--g500); }
.mg-field-h:empty{ display:none; }
.mg-switch{ display:flex; gap:8px; align-items:center; font-size:var(--f14); font-weight:600; padding:4px 0 8px; cursor:pointer; }
@media (max-width:600px){ .mg-field{ grid-template-columns:1fr; } }
.mg-dl b.txt{ font-family:var(--font-ui); font-size:var(--f14); }
.mg-dl > div:last-child:nth-child(odd){ grid-column:1 / -1; }

/* Cash page (19d-cash.js) */
.mg-grid tr.mg-cash-src td{ font-weight:600; background:var(--g25); }
.mg-grid tr.mg-cash-acct td:nth-child(2){ padding-left:24px; }
.mg-grid tr.mg-muted-row td{ color:var(--g500); }
.mg-panel-h.mg-sub-h{ border-top:1px solid var(--g100); }

/* CFO pack (19e-cfopack.js): the document itself is styled by MG_PACK_CSS, shared with the PDF */
.mg-pk-month{ display:inline-flex; align-items:center; gap:8px; font-size:var(--f13); color:var(--g600); }
.mg-pk-month select, .mg-drawer select{ font:inherit; font-size:var(--f13); color:var(--g900); border:1px solid var(--g200); border-radius:6px; padding:6px 8px; background:#fff; }
.mg-pk-strip{ margin-bottom:16px; }
.mg-pk-strip .mg-li{ border-bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mg-pk-paper{ background:#fff; border:1px solid var(--g200); border-radius:8px; padding:40px 44px; max-width:900px; }
.mg-pk-paper .pk-frame > thead, .mg-pk-paper .pk-frame > tfoot{ display:none; }   /* running header/footer: PDF only */
.mg-pk-paper .pk-doc .pk-frame > tbody > tr > td{ padding-bottom:36px; }
.mg-pk-add{ display:flex; gap:8px; margin:10px 0 4px; }
.mg-pk-add input{ flex:1; min-width:0; font:inherit; font-size:var(--f13); border:1px solid var(--g200); border-radius:6px; padding:6px 8px; }
@media (max-width:600px){
  .mg-pk-paper{ padding:20px 16px; }
  .mg-pk-paper .pk-tiles, .mg-pk-paper .pk-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  .mg-pk-paper table.pk-t{ display:block; overflow-x:auto; }
  .mg-pk-add{ flex-wrap:wrap; }
}
/* on screen nothing under 12px; the PDF keeps print sizes */
.mg-pk-paper .pk-doc, .mg-pk-paper .pk-t{ font-size:13px; }
.mg-pk-paper .pk-scope, .mg-pk-paper .pk-note, .mg-pk-paper .pk-tile-l, .mg-pk-paper .pk-tile-n, .mg-pk-paper .pk-meta span,
.mg-pk-paper .pk-t th, .mg-pk-paper .pk-bdg, .mg-pk-paper .pk-ai-l, .mg-pk-paper .pk-empty{ font-size:12px; }
.mg-pk-paper .pk-frame{ table-layout:fixed; }   /* never wider than the paper; wide tables scroll inside it on phones */
.mg-pk-strip .mg-btn{ white-space:nowrap; flex:none; }
.mg-pk-rec .mg-row-act{ opacity:1; margin-left:auto; }

/* Party master: new/edit form, profile block, import party picker (app/js/19f-parties.js). */
.mg-pf{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.mg-pf-f{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.mg-pf-f.full, .mg-pf-msg.full{ grid-column:1 / -1; }
.mg-pf-f span{ font-size:var(--f12); color:var(--g600); font-weight:600; }
.mg-pf-f span i{ font-style:normal; color:var(--neg); }
.mg-pf-f input, .mg-pf-f select, .mg-pf-f textarea{ width:100%; min-width:0; box-sizing:border-box; border:1px solid var(--g200); border-radius:var(--r-ctl); background:var(--g0); padding:7px 10px; font:400 var(--f13) var(--font-ui); color:var(--g900); margin:0; }
.mg-pf-f input, .mg-pf-f select{ height:34px; }
.mg-pf-f textarea{ resize:vertical; line-height:1.45; }
.mg-pf-f input:focus, .mg-pf-f select:focus, .mg-pf-f textarea:focus{ outline:none; border-color:var(--link); }
.mg-pf-msg{ font-size:var(--f13); color:var(--g600); min-height:18px; line-height:1.45; }
.mg-pf-msg.bad{ color:var(--neg); } .mg-pf-msg.warn{ color:var(--warn, #9A6A00); }
.mg-link-btn{ border:0; background:none; padding:0; font:600 var(--f13) var(--font-ui); color:var(--link); cursor:pointer; }
.mg-pf-card{ border:1px solid var(--g100); border-radius:var(--r-panel); padding:12px; margin-bottom:16px; }
.mg-pf-card-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:var(--f13); }
.mg-pf-card .mg-dl{ margin-bottom:0; }
.mg-dl.mg-dl-1{ grid-template-columns:1fr; }
.mg-pf-none{ display:flex; gap:12px; align-items:center; justify-content:space-between; border:1px dashed var(--g200); border-radius:var(--r-panel); padding:12px; margin-bottom:16px; font-size:var(--f13); }
.mg-pf-none .mg-btn{ flex:none; }
.mg-master-tag{ display:inline-block; font-size:11px; color:var(--g500); border:1px solid var(--g200); border-radius:999px; padding:1px 7px; }
.mg-imp-party{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--g200); font-size:var(--f12); color:var(--g600); }
.mg-imp-party.ok{ color:var(--brand-700); }
.mg-imp-party.new > span:first-child{ font-weight:600; color:var(--ai, #CC5B34); }
.mg-imp-party select{ width:auto !important; max-width:100%; height:28px !important; margin:0 !important; font:400 var(--f12) var(--font-ui); border:1px solid var(--g200); border-radius:var(--r-ctl); padding:0 6px !important; background:var(--g0); }
@media (max-width:600px){ .mg-pf{ grid-template-columns:1fr; } .mg-pf-none{ flex-direction:column; align-items:flex-start; } }

/* ---------- team logins (19g-team.js) ---------- */
.mg-invite-note{ margin:0 0 16px; padding:10px 12px; border-radius:var(--r-ctl); background:var(--brand-50); color:var(--brand-700); font-size:var(--f13); line-height:1.5; }
.mg-join-box{ margin:0 0 18px; padding:12px; border:1px solid var(--g200); border-radius:var(--r-panel); background:var(--g25); }
.mg-join-q{ font-size:var(--f13); color:var(--g700); }
.mg-join-form{ margin-top:12px; }
.mg-linkbtn{ border:0; background:none; padding:0; color:var(--link, var(--brand-700)); font:inherit; font-weight:600; cursor:pointer; text-decoration:underline; }
.mg-user-role{ margin-top:4px; font-size:var(--f12); color:var(--g500); }
.mg-acct-h{ padding:6px 10px 2px; font-size:var(--f12); color:var(--g500); }
.mg-acct-opt{ justify-content:space-between; }
.mg-acct-opt small{ color:var(--g500); font-size:var(--f12); }
.mg-acct-opt.on{ background:var(--g50); font-weight:600; }
.mg-team-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200; max-width:min(520px, calc(100vw - 32px)); padding:10px 16px; border-radius:var(--r-panel); background:var(--g900); color:var(--g0); font-size:var(--f13); box-shadow:0 6px 24px rgba(0,0,0,.18); }
.mg-team-toast.bad{ background:var(--neg); }
.pagenav button.mg-hide-perm{ display:none; }
.mg-team td{ vertical-align:top; }
.mg-team .mg-sub, .mg-team-invite .mg-sub{ display:block; margin-top:2px; font-size:var(--f12); color:var(--g500); white-space:normal; }
.mg-team .r .mg-btn{ margin:0 0 4px 4px; }
.mg-team-h{ margin:18px 0 8px; font-size:var(--f14); font-weight:600; color:var(--g900); }
.mg-team-code{ margin:16px 0; padding:14px; border:1px solid var(--brand); border-radius:var(--r-panel); background:var(--brand-50); font-size:var(--f13); line-height:1.5; }
.mg-team-code-v{ margin:10px 0; font-size:var(--f20); letter-spacing:.08em; color:var(--g900); overflow-wrap:anywhere; }
.mg-team-code-a{ display:flex; flex-wrap:wrap; gap:8px; }
.mg-team-fields{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.mg-tf{ display:grid; gap:4px; font-size:var(--f12); color:var(--g700); }
.mg-tf input, .mg-tf select, .mg-team-role{ height:34px; padding:0 10px; border:1px solid var(--g200); border-radius:var(--r-ctl); background:var(--g0); font:inherit; font-size:var(--f13); color:var(--g900); min-width:0; }
.mg-team-invite .mg-btn.primary{ margin-top:12px; }
.mg-form-err{ margin-top:8px; font-size:var(--f13); color:var(--neg); }
.mg-team-perms .set-row{ cursor:pointer; }
@media (max-width:700px){
  .mg-team-fields{ grid-template-columns:1fr; }
  /* One card per person on a phone, not a sideways-scrolling table. */
  .mg-team thead{ display:none; }
  .mg-team, .mg-team tbody, .mg-team tr, .mg-team td{ display:block; width:100%; }
  .mg-team tr{ padding:12px 0; border-bottom:1px solid var(--g100); }
  .mg-team td{ padding:3px 0; border:0; text-align:left; white-space:normal; }
  .mg-team td.r, .mg-grid.mg-team td.r{ padding-top:8px; text-align:left; }
  .mg-team .r .mg-btn{ margin:0 6px 6px 0; }
  .mg-team-role{ width:100%; }
}
/* Read-only roles: no add / edit / settle controls (the server and the
   database refuse these anyway; this keeps the screen honest). */
body.mg-ro .mg-ph-actions .mg-btn.primary, body.mg-ro [data-money-settle], body.mg-ro .mg-row-act,
body.mg-ro [data-party-new], body.mg-ro [data-party-edit], body.mg-ro [data-party-add-dir],
body.mg-ro #ledgerAddBtn, body.mg-ro #mgImportBtn, body.mg-ro .ledger-form{ display:none !important; }
body.mg-member #setDeleteAccount, body.mg-member #deleteAccountBtn{ display:none !important; }
.mg-row2 > .mg-panel:only-child{ grid-column:1 / -1; }   /* Home without the cash panel (a role without cash) */
.mg-team-wa{ margin-bottom:16px; }
.mg-team-wa small{ display:block; margin-top:4px; }

/* ---------- Conversations hub (app/js/26-hub.js) ---------- */
#mgHub{ margin-bottom:8px; }
#mgHub .mg-panel-h{ flex-wrap:wrap; }
#mgHub .mg-panel-h h2{ white-space:nowrap; }
#mgHub .mg-aside{ text-align:right; }
.mg-hub-lbl{ font-size:var(--f13); font-weight:600; color:var(--g700); }
.mg-hub-asks, .mg-hub-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mg-chip.on{ border-color:var(--brand); background:var(--brand-50); color:var(--brand-700); }
.mg-hub-watch{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; border-bottom:1px solid var(--g100); }
.mg-hub-watch .mg-fine{ flex-basis:100%; margin:0; }
.mg-hub-runs{ display:flex; flex-direction:column; gap:6px; }
.mg-hub-run{ padding:6px 0; border-top:1px solid var(--g100); font-size:var(--f13, 13px); }
.mg-hub-run summary{ cursor:pointer; list-style:none; }
.mg-hub-run summary::-webkit-details-marker{ display:none; }
.mg-li.mg-hub-note{ align-items:flex-start; }
.mg-li.mg-hub-note .mg-dot{ margin-top:6px; }
.mg-dot.neg{ background:var(--neg); }
.mg-hub-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:8px; }
.mg-hub-miss{ color:var(--neg); }
/* ---------- Margin: what else the books say ---------- */
.mg-ins-li{ display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-bottom:1px solid var(--g100); font-size:var(--f13); }
.mg-ins-li:last-child{ border-bottom:0; }
.mg-ins-li .mg-dot{ margin-top:6px; }
.mg-ins-li .mg-li-t{ font-weight:600; }

/* Cash page: week by week this year, four small charts each on its own scale (19a-forecast.js mgPositionHistoryPanel) */
.mg-histgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mg-histmini-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:var(--f12);color:var(--text-2);margin-bottom:2px}
.mg-histmini-h b{font-size:var(--f13);color:var(--text-0);font-variant-numeric:tabular-nums}
@media (max-width:900px){.mg-histgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.mg-histgrid{grid-template-columns:1fr}}
#mgFcHow ul.mg-fine{margin:6px 0 0 18px;padding:0}
#mgFcHow ul.mg-fine li{margin:2px 0}

/* Cash flow (19j-cashflow.js): statement table, checks, borrowing history */
.mg-cf-wrap{ overflow-x:auto; }
.mg-cf td:first-child, .mg-cf th:first-child{ position:sticky; left:0; background:var(--g0); z-index:1; min-width:260px; }
.mg-cf th:first-child{ background:var(--g25); }
.mg-cf .mg-cf-sec td{ font-weight:700; color:var(--g900); background:var(--g25); padding-top:12px; }
.mg-cf .mg-cf-l{ padding-left:24px; color:var(--g600); }
.mg-cf .mg-cf-sub td{ font-weight:600; border-top:1px solid var(--g200); }
.mg-cf .mg-cf-net td{ font-weight:700; border-top:2px solid var(--g300); }
.mg-cf .mg-cf-made td{ color:var(--g500); font-size:var(--f12); }
.mg-cf .mg-cf-warn .mg-cf-l{ color:var(--warn); }
.mg-cf td.mg-cf-neg{ color:var(--neg); }
.mg-cf .mg-cf-totcol{ background:var(--g25); font-weight:600; }
.mg-cf-why{ font-size:var(--f13); color:var(--g600); border-bottom:1px solid var(--g100); }
.mg-cf-checks{ list-style:none; margin:0; padding:0; font-size:var(--f13); }
.mg-cf-checks li{ display:flex; gap:10px; align-items:baseline; padding:6px 0; }
.mg-ax-v{ fill:var(--g900); font-weight:600; }
.mg-bw{ padding:16px; border-top:1px solid var(--g100); }
.mg-bw-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.mg-bw-h .mg-linkbtn{ margin-left:auto; font-size:var(--f12); }
.mg-bw-stats{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:8px; }
.mg-bw-k{ font-size:var(--f12); color:var(--g500); }
.mg-bw-v{ font:700 var(--f16) var(--font-num); color:var(--g900); font-variant-numeric:tabular-nums; margin-top:2px; }
.mg-bw-s{ font-size:var(--f12); color:var(--g500); margin-top:2px; }
.mg-bw-alert{ font-size:var(--f12); color:var(--warn); background:var(--warn-50); border-radius:4px; padding:4px 8px; display:inline-block; margin:4px 0 8px; }
.mg-bw-months td, .mg-bw-months th{ padding:6px 10px; }
.mg-bw-total{ font-size:var(--f13); color:var(--g600); border-bottom:1px solid var(--g100); }
.mg-bw-total b{ color:var(--g900); font-family:var(--font-num); }
@media (max-width:900px){ .mg-bw-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .mg-cf td:first-child, .mg-cf th:first-child{ min-width:180px; } }