/* Hezlep platform demo. Stripe/Wave-style light UI, Hezlep forest green
   where Stripe would use purple. Light mode only on purpose. */

:root{
  --ts:1.2;               /* default text scale; A-/A+ adjusts, saved per device */
  --bg:#f6f8f9;
  --surface:#ffffff;
  --ink:#1a2e26;
  --ink-2:#4f6058;
  --ink-3:#6b7a72;
  --border:#e3e8e5;
  --border-soft:#eef1ef;

  --green:#12382d;        /* Hezlep forest: primary buttons, active nav */
  --green-hover:#0d2b22;
  --green-soft:#e9f0ec;

  --pos:#0c7d54;          /* positive numbers, charts */
  --pos-soft:#e2f3ec;
  --pos-text:#06603f;
  --warn:#b96a12;
  --warn-soft:#fcf1e3;
  --crit:#c03b2d;
  --crit-soft:#fdeae7;
  --blue:#3b66b0;

  --radius:12px;
  --shadow:0 1px 2px rgba(26,46,38,.06), 0 4px 14px rgba(26,46,38,.05);
  --sans:"Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:calc(14px*var(--ts,1)); line-height:1.5; -webkit-font-smoothing:antialiased;
}
button{font:inherit; cursor:pointer;}
a{color:var(--green); text-decoration:none;}

/* ---------- demo bar ---------- */
.demo-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#101c17; color:#b9c6bf;
  padding:8px 18px; font-size:calc(12px*var(--ts,1));
}
.demo-bar b{color:#fff; font-weight:600;}
.demo-bar .dot{width:6px;height:6px;border-radius:50%;background:#e0a832;}
.demo-bar .spacer{flex:1;}
.demo-bar .switch{
  display:flex; border:1px solid rgba(255,255,255,.22); border-radius:99px; overflow:hidden;
}
.demo-bar .switch button{
  appearance:none; border:0; background:transparent; color:#b9c6bf;
  font-size:calc(12px*var(--ts,1)); font-weight:600; padding:5px 14px;
}
.demo-bar .switch button.on{background:#fff; color:#101c17;}

/* Viewing-as bar: unmissable when the firm is inside a client's portal */
.view-bar{
  flex:none; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:#7a5200; color:#fdf4e3;
  padding:9px 18px; font-size:calc(13px*var(--ts,1));
}
.view-bar b{color:#fff;}
.view-bar .vb-back{
  margin-left:auto; appearance:none; border:0; border-radius:8px; cursor:pointer;
  background:#fff; color:#7a5200; font-weight:700; font-size:calc(12.5px*var(--ts,1));
  padding:6px 16px;
}
.view-bar .vb-back:hover{background:#fdf4e3;}

/* ---------- shell ---------- */
html, body{height:100%;}
body{display:flex; flex-direction:column; overflow:hidden;}
.demo-bar{flex:none;}
.shell{display:flex; flex:1; min-height:0;}
.main{overflow-y:auto; min-width:0;}
.main-in{max-width:1320px; margin:0 auto; padding:28px 40px 70px;}
.side{
  width:236px; flex:0 0 236px; background:var(--surface);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:24px 0 18px;
  /* The shell never scrolls; only .main does. The sidebar cannot move,
     and if the nav ever outgrows the viewport it scrolls itself. */
  overflow-y:auto;
}
.side nav{flex:1 0 auto;}
.wordmark{display:flex; align-items:center; gap:10px;}
.wordmark .tree{flex:0 0 34px; width:34px;}
.wordmark .tree:empty{display:none;}   /* nothing shifts until the real logo asset lands */
.wordmark .tree svg, .wordmark .tree img{display:block; width:100%; height:auto;}
.wordmark{padding:0 22px 2px;}
.wordmark .name{font-weight:700; font-size:calc(18px*var(--ts,1)); letter-spacing:-.01em; color:var(--green);}
.wordmark .sub{font-size:calc(10px*var(--ts,1)); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; font-weight:600;}
.orgline{
  margin:14px 14px 0; padding:10px 12px;
  background:var(--bg); border:1px solid var(--border-soft); border-radius:10px;
  font-size:calc(12.5px*var(--ts,1));
}
.orgline b{display:block; font-size:calc(13px*var(--ts,1));}
.orgline span{color:var(--ink-3); font-size:calc(11.5px*var(--ts,1));}
.side nav{display:flex; flex-direction:column; gap:2px; padding:10px 12px;}
.side nav a{
  display:flex; align-items:center; gap:10px;
  color:var(--ink-2); font-weight:500; font-size:calc(13.5px*var(--ts,1));
  padding:9px 12px; border-radius:9px; cursor:pointer;
}
.side nav a{padding-left:14px;}
.side nav a:hover{background:var(--bg); color:var(--ink);}
.side nav a.on{background:var(--green-soft); color:var(--green); font-weight:600;}
.side nav a .badge{
  margin-left:auto; background:var(--green); color:#fff; font-size:calc(10.5px*var(--ts,1)); font-weight:700;
  border-radius:99px; padding:1px 7px;
}
.textsize{
  margin-top:auto; display:flex; gap:7px; align-items:center;
  padding:12px 22px; font-size:calc(11px*var(--ts,1)); color:var(--ink-3);
}
.textsize span{margin-right:2px;}
.textsize button{
  background:var(--surface); border:1px solid var(--border); border-radius:7px;
  padding:3px 10px; font-size:13px; font-weight:700; color:var(--ink-2);
}
.textsize button:hover{border-color:var(--green); color:var(--green);}
.side .foot{
  padding:14px 22px 0; font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); line-height:1.55;
  border-top:1px solid var(--border-soft); margin-left:0;
}
.side .foot .ok{color:var(--pos-text); font-weight:600;}

.main{flex:1; min-width:0;}

/* ---------- page headers ---------- */
.crumb{font-size:calc(11px*var(--ts,1)); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:5px;}
h1.page{font-weight:700; font-size:calc(23px*var(--ts,1)); letter-spacing:-.015em;}
.page-sub{color:var(--ink-2); margin-top:4px; font-size:calc(13.5px*var(--ts,1));}
.headrow{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; flex-wrap:wrap;}
.trust-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:9px 13px; font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); box-shadow:var(--shadow);
}
.trust-chip .tick{color:var(--pos-text); font-weight:700;}

/* ---------- banners / notes ---------- */
.banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--green-soft); border:1px solid #d5e3da; color:var(--green);
  border-radius:10px; padding:10px 14px; font-size:calc(13px*var(--ts,1)); font-weight:500; margin-bottom:18px;
}
.banner.gray{background:var(--surface); border-color:var(--border); color:var(--ink-2); font-weight:400;}
/* amber = the one "needs a human" color; green stays calm/verified */
.banner.urgent{background:var(--warn-soft); border-color:#ecd9b8; color:#7a5200;}
.banner .b-link{margin-left:auto; font-weight:600; cursor:pointer; white-space:nowrap;}
/* dismissible read-once notes: an X that remembers, per device */
.banner.dis{position:relative; padding-right:42px;}
.banner .bx{
  position:absolute; top:50%; transform:translateY(-50%); right:9px; width:26px; height:26px;
  border:none; background:none; color:inherit; opacity:.45; cursor:pointer;
  font-size:18px; line-height:24px; padding:0; border-radius:7px; font-family:inherit;
}
.banner .bx:hover{opacity:1; background:rgba(0,0,0,.07);}

/* ---------- cards, grids, tiles ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow);
}
.card h3{font-size:calc(13.5px*var(--ts,1)); font-weight:600;}
.card .h-sub{font-size:calc(12px*var(--ts,1)); color:var(--ink-3); margin-top:2px;}
.cardhead{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px;}
.grid-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px;}
.grid-2{display:grid; grid-template-columns:3fr 2fr; gap:14px; margin-bottom:14px;}
.grid-2e{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.stack{display:flex; flex-direction:column; gap:14px;}

.tile .label{font-size:calc(12px*var(--ts,1)); color:var(--ink-2); font-weight:500;}
.tile .value{font-size:calc(25px*var(--ts,1)); font-weight:700; margin-top:5px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.tile .delta{font-size:calc(12px*var(--ts,1)); margin-top:3px; font-weight:600;}
.tile .delta small{font-weight:400; color:var(--ink-3);}
.up-good{color:var(--pos-text);}
.down-bad{color:var(--crit);}

/* ---------- buttons ---------- */
.btn{
  appearance:none; border:1px solid transparent; border-radius:9px;
  font-weight:600; font-size:calc(13px*var(--ts,1)); padding:8px 15px;
  background:var(--green); color:#fff;
}
.btn:hover{background:var(--green-hover);}
.btn.ghost{background:var(--surface); color:var(--ink); border-color:var(--border);}
.btn.ghost:hover{border-color:var(--ink-3); background:var(--surface);}
.btn.small{padding:6px 12px; font-size:calc(12.5px*var(--ts,1)); border-radius:8px;}
.btn.subtle{background:var(--green-soft); color:var(--green);}
.btn.subtle:hover{background:#dde9e2;}
.btn:disabled{opacity:.45; cursor:default;}

/* ---------- .ctl: inputs, selects and buttons that must line up exactly ----------
   Selects and buttons have different intrinsic heights from text inputs, so
   anything sitting on one row shares an explicit height here. */
.ctl{
  height:calc(38px*var(--ts,1)); box-sizing:border-box;
  border:1px solid var(--border); border-radius:9px;
  padding:0 12px; font:inherit; font-size:calc(13px*var(--ts,1));
  background:var(--surface); color:var(--ink); line-height:normal;
}
.ctl:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
select.ctl{
  -webkit-appearance:none; appearance:none; padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234f6058' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:11px;
}
button.ctl{background:var(--green); color:#fff; border-color:transparent; font-weight:600; padding:0 22px; cursor:pointer;}
button.ctl:hover{background:var(--green-hover);}
.ctl-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px;}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
  appearance:none; background:var(--surface); border:1px solid var(--border);
  border-radius:99px; padding:7px 14px; font-size:calc(12.5px*var(--ts,1)); font-weight:500; color:var(--ink);
}
.chip:hover{border-color:var(--green); color:var(--green); background:var(--green-soft);}
.evd{display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border-soft);
  border-radius:7px; padding:3px 9px; font-size:calc(11.5px*var(--ts,1)); color:var(--ink-2);}

/* ---------- pills / status ---------- */
.pill{display:inline-block; border-radius:99px; padding:2px 10px; font-size:calc(11.5px*var(--ts,1)); font-weight:600;}
.pill.good{background:var(--pos-soft); color:var(--pos-text);}
.pill.warn{background:var(--warn-soft); color:var(--warn);}
.pill.crit{background:var(--crit-soft); color:var(--crit);}
.pill.gray{background:var(--bg); color:var(--ink-2); border:1px solid var(--border-soft);}

/* ---------- meters ---------- */
.meter-row{display:grid; grid-template-columns:160px 1fr 190px; gap:12px; align-items:center; padding:9px 0;}
.meter-row + .meter-row{border-top:1px solid var(--border-soft);}
.meter-row .m-label{font-size:calc(12.5px*var(--ts,1)); font-weight:500;}
.meter-row .m-val{font-size:calc(12px*var(--ts,1)); color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums;}
.meter-row .m-val b{color:var(--ink); font-weight:600;}
.meter{position:relative; height:9px; border-radius:5px; background:var(--border-soft); overflow:hidden;}
.meter .fill{position:absolute; inset:0 auto 0 0; border-radius:5px; background:var(--pos);}
.meter .fill.over{background:var(--warn);}
.meter-flag{grid-column:1 / -1; font-size:calc(11.5px*var(--ts,1)); color:var(--warn); padding:2px 0 4px;}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;}
table.data{width:100%; border-collapse:collapse; font-size:calc(12.5px*var(--ts,1));}
table.data th{
  text-align:left; font-size:calc(10.5px*var(--ts,1)); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; padding:0 10px 8px; border-bottom:1px solid var(--border);
  white-space:nowrap;
}
table.data td{padding:10px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
table.data tr:last-child td{border-bottom:0;}
table.data td.num, table.data th.num{text-align:right; font-variant-numeric:tabular-nums;}
table.data .muted{color:var(--ink-3);}
tr.rowlink{cursor:pointer;}
tr.rowlink:hover td{background:var(--bg);}

/* ---------- question / item cards ---------- */
.item-card{border:1px solid var(--border); border-radius:var(--radius); background:var(--surface);
  padding:16px 18px; box-shadow:var(--shadow);}
.item-card + .item-card{margin-top:12px;}
.item-top{display:flex; justify-content:space-between; gap:12px; align-items:baseline;}
.item-q{font-size:calc(14px*var(--ts,1)); font-weight:600; max-width:640px;}
.item-when{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); white-space:nowrap;}
.item-ctx{font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); margin-top:4px;}
.item-actions{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.item-actions input[type=text]{
  flex:1; min-width:180px; border:1px solid var(--border); border-radius:9px;
  padding:8px 12px; font:inherit; font-size:calc(12.5px*var(--ts,1)); color:var(--ink); background:var(--surface);
}
.item-actions input[type=text]:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
.item-done{margin-top:10px; font-size:calc(12.5px*var(--ts,1)); color:var(--pos-text); font-weight:600;}

.answer-block{background:var(--bg); border:1px solid var(--border-soft); border-radius:10px;
  padding:12px 14px; margin-top:10px; font-size:calc(13px*var(--ts,1)); color:var(--ink);}
.answer-by{margin-top:8px; font-size:calc(12px*var(--ts,1)); color:var(--ink-2); font-weight:600;}
.posted-tag{display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  font-size:calc(11.5px*var(--ts,1)); font-weight:600; color:var(--pos-text);}

/* ---------- bill cards ---------- */
.bill-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.bill .b-vendor{font-size:calc(15px*var(--ts,1)); font-weight:700;}
.bill .b-amount{font-size:calc(21px*var(--ts,1)); font-weight:700; font-variant-numeric:tabular-nums; margin-top:2px;}
.bill .b-meta{font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); margin-top:6px; line-height:1.6;}
.bill .item-actions{margin-top:14px;}

/* ---------- reports ---------- */
.report-row{display:flex; align-items:center; gap:14px; padding:13px 0; flex-wrap:wrap;}
.report-row + .report-row{border-top:1px solid var(--border-soft);}
.report-row .r-month{font-weight:600; font-size:calc(13.5px*var(--ts,1)); min-width:90px;}
.report-row .r-items{flex:1; display:flex; flex-wrap:wrap; gap:6px;}

/* ---------- workspace extras ---------- */
.exc .why{font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); margin-top:5px;}
.exc .proposed{margin-top:8px; font-size:calc(12.5px*var(--ts,1));}
.exc .proposed b{font-weight:600;}
.exc .evds{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px;}

.draft-card{border:1px solid #d5e3da; background:#f4f8f5;}
.draft-card .answer-block{background:var(--surface);}
.draft-note{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-2); margin-top:9px;}

/* ---------- toast ---------- */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  background:#101c17; color:#fff; font-size:calc(13px*var(--ts,1)); padding:11px 18px; border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; max-width:min(560px, 92vw); text-align:center;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---------- login (live mode) ---------- */
body.login-mode .side, body.login-mode .demo-bar{display:none !important;}
.login-wrap{max-width:430px; margin:7vh auto 0; padding:0 16px;}
.login-brand{text-align:center; margin-bottom:22px;}
.login-brand .name{font-weight:700; font-size:calc(26px*var(--ts,1)); color:var(--green); letter-spacing:-.01em;}
.login-brand .sub{font-size:calc(10.5px*var(--ts,1)); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-top:3px;}
.login-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; box-shadow:var(--shadow);}
.login-card h2{font-size:calc(16px*var(--ts,1)); margin-bottom:14px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block; font-size:calc(12.5px*var(--ts,1)); font-weight:600; margin-bottom:6px;}
.login-field input{width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 13px; font:inherit; font-size:calc(14px*var(--ts,1)); color:var(--ink);}
.login-field input:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
.login-field .hint{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); margin-top:4px;}
.login-field input[type=checkbox]{width:auto; margin:0; accent-color:var(--green);}
.login-field .remember{display:flex; gap:8px; align-items:center; margin-top:10px; font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); font-weight:400; cursor:pointer;}
.headrow.narrow{max-width:820px;}
.login-err{color:var(--crit); font-size:calc(12.5px*var(--ts,1)); font-weight:600; margin-top:10px; display:none;}
.login-div{display:flex; align-items:center; gap:10px; color:var(--ink-3); font-size:calc(11.5px*var(--ts,1)); margin:18px 0;}
.login-div::before, .login-div::after{content:""; flex:1; height:1px; background:var(--border);}
.keybox{background:var(--warn-soft); border:1px solid #ecd9b8; border-radius:10px; padding:12px 15px; margin-bottom:14px; font-size:calc(13px*var(--ts,1)); line-height:1.6;}
.keybox code{font-weight:700; font-size:calc(14px*var(--ts,1)); letter-spacing:.02em; user-select:all; font-family:ui-monospace, Menlo, monospace;}
.chip.on{background:var(--green); border-color:var(--green); color:#fff;}
.chip.on:hover{background:var(--green-hover); color:#fff;}

/* ---------- firm data editor ---------- */
.ed{max-width:1000px;}
.ed .card{margin-bottom:14px;}
.ed input, .ed select, .ed textarea{
  width:100%; border:1px solid var(--border); border-radius:9px; padding:9px 11px;
  font:inherit; font-size:calc(13px*var(--ts,1)); color:var(--ink); background:var(--surface);
}
.ed input:focus, .ed select:focus, .ed textarea:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
.ed label{display:block; font-size:calc(12px*var(--ts,1)); font-weight:600; margin-bottom:4px;}
.ed .fieldwrap{margin-bottom:12px;}
.ed-grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.ed-grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.ed-row{display:grid; gap:8px; align-items:center; margin-bottom:8px;}
.ed-del{background:none; border:0; color:var(--crit); font-weight:700; cursor:pointer; font-size:calc(16px*var(--ts,1)); padding:0 4px;}
@media (max-width:820px){ .ed-grid4{grid-template-columns:1fr 1fr;} .ed-row{grid-template-columns:1fr 1fr !important;} }

/* ---------- progress rail (client setup: where things stand) ---------- */
.steps{padding:4px 20px;}
.step{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--border-soft);}
.step:first-child{border-top:0;}
.step .dot{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(12px*var(--ts,1)); font-weight:700;
}
.step.done .dot{background:var(--pos-soft); color:var(--pos-text);}
.step.active .dot{background:var(--green); color:#fff;}
.step.todo .dot{background:var(--bg); color:var(--ink-3); border:1px solid var(--border);}
.step .t{font-weight:600; font-size:calc(14px*var(--ts,1));}
.step.todo .t{color:var(--ink-3);}
.step .s{font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); margin-top:3px; line-height:1.5;}
.step.todo .s{color:var(--ink-3);}

/* ---------- document tiles ---------- */
.doc-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(175px,1fr)); gap:12px; margin-bottom:16px;}
.doc-tile{
  background:var(--surface); border:1.5px dashed var(--border); border-radius:12px;
  padding:14px 15px; cursor:pointer; text-align:left; box-shadow:var(--shadow); font:inherit;
}
.doc-tile:hover{border-color:var(--green);}
.doc-tile.done{border:1.5px solid var(--pos); background:#f4faf7;}
.doc-tile.auto{border:1.5px solid #ecd9b8; background:var(--warn-soft); cursor:default;}
.doc-tile.auto.done{border-color:var(--pos); background:#f4faf7;}
.doc-tile.busy{opacity:.55; pointer-events:none;}
.doc-tile .t{font-weight:600; font-size:calc(13px*var(--ts,1));}
.doc-tile .s{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); margin-top:3px; line-height:1.45;}
.doc-tile .st{margin-top:9px; font-size:calc(11.5px*var(--ts,1)); font-weight:700; color:var(--ink-3);}
.doc-tile.done .st{color:var(--pos-text);}
.doc-tile.auto .st{color:var(--warn);}
.doc-files .df{display:flex; justify-content:space-between; gap:14px; align-items:baseline; padding:8px 0; border-top:1px solid var(--border-soft); font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2);}
.doc-files .df-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.doc-files .df-kind{flex:0 0 auto; color:var(--ink-3); font-size:calc(11.5px*var(--ts,1));}
.doc-files .df:first-child{border-top:0;}
.doc-files .df a{cursor:pointer; font-weight:600;}

/* ---------- modals (centered, in-app; no system dialogs) ---------- */
.modal-ov{
  position:fixed; inset:0; z-index:90; background:rgba(16,28,23,.45);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  width:100%; max-width:480px; padding:22px 24px; box-shadow:0 24px 70px rgba(16,28,23,.35);
}
.modal h3{font-size:calc(16px*var(--ts,1)); font-weight:700;}
.modal .m-sub{font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); margin-top:4px; line-height:1.55;}
.modal .m-body{margin-top:16px; display:flex; flex-direction:column; gap:12px;}
.modal .m-body input{width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 13px; font:inherit; font-size:calc(14px*var(--ts,1)); color:var(--ink);}
.modal .m-body input:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
.modal-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:20px;}
.btn.danger{background:var(--crit); color:#fff;}
.btn.danger:hover{background:#a83226;}
.tightcard{padding:8px 20px 8px;}
.tightcard table.data th{padding-top:10px;}
table.data tr.rowlink td{cursor:pointer;}

/* ---------- corner chat (quick answers) ---------- */
.chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:60;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--green); color:#fff; border:0; border-radius:99px;
  padding:12px 18px; font-weight:600; font-size:calc(13.5px*var(--ts,1));
  box-shadow:0 10px 30px rgba(18,56,45,.35);
}
.chat-fab:hover{background:var(--green-hover);}
.chat-fab svg{stroke:#fff; flex:0 0 16px;}
/* The conversation happens in the middle of the screen, like Messages:
   dimmed backdrop, centered card, bubbles, input at the bottom. */
.chat-overlay{position:fixed; inset:0; background:rgba(16,28,23,.45); z-index:69; display:none;}
.chat-panel{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:70;
  width:min(560px, calc(100vw - 28px)); height:min(680px, calc(100vh - 56px));
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 28px 80px rgba(16,28,23,.35);
  display:flex; flex-direction:column; overflow:hidden;
}
@media (max-width:720px){
  .chat-panel{left:0; top:0; transform:none; width:100vw; height:100dvh; border-radius:0; border:none;}
}
.chat-head{padding:13px 16px 11px; border-bottom:1px solid var(--border-soft); display:flex; gap:10px; align-items:flex-start;}
.chat-head .t{font-weight:700; font-size:calc(14px*var(--ts,1));}
.chat-head .d{font-size:calc(11px*var(--ts,1)); color:var(--ink-3); margin-top:3px; line-height:1.5; max-width:300px;}
.chat-close{margin-left:auto; background:none; border:0; color:var(--ink-3); font-size:calc(20px*var(--ts,1)); line-height:1; padding:0 2px;}
.chat-close:hover{color:var(--ink);}
.chat-body{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px; background:var(--bg);}
.msg{max-width:85%; font-size:calc(14px*var(--ts,1)); line-height:1.55;}
.msg.user{align-self:flex-end; background:var(--green); color:#fff; border-radius:14px 14px 4px 14px; padding:9px 13px;}
.msg.bot{align-self:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:14px 14px 14px 4px; padding:10px 13px; box-shadow:var(--shadow);}
.msg .eyebrow{display:block; font-size:calc(9.5px*var(--ts,1)); letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--pos-text); margin-bottom:5px;}
.msg .eyebrow.warn{color:var(--warn);}
.msg .srcs{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px;}
.msg .srcs .evd{font-size:calc(10.5px*var(--ts,1)); padding:2px 8px;}
.msg .note{font-size:calc(11px*var(--ts,1)); color:var(--ink-3); margin-top:8px;}
.msg .sent-tag{display:block; margin-top:8px; font-size:calc(11.5px*var(--ts,1)); font-weight:600; color:var(--pos-text);}
.chat-chips{display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; max-width:95%;}
.chat-chips .chip{font-size:calc(12px*var(--ts,1)); padding:6px 12px;}
.typing.bubble{background:var(--surface); border:1px solid var(--border); border-radius:14px 14px 14px 4px; padding:13px 14px; align-self:flex-start;}
.chat-more{padding:8px 14px; font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); border-top:1px solid var(--border-soft); background:var(--surface);}
.chat-more a{font-weight:600; cursor:pointer;}
.chat-input{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border-soft); background:var(--surface);}
.chat-input input{flex:1; min-width:0; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font:inherit; font-size:calc(13px*var(--ts,1)); color:var(--ink);}
.chat-input input:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
@media (max-width:600px){
  .chat-panel{right:8px; left:8px; bottom:8px; width:auto; height:calc(100vh - 70px);}
  .chat-fab{right:14px; bottom:14px;}
}

/* ---------- library (ask your records) ---------- */
.lib-privacy{
  display:flex; gap:10px; align-items:flex-start;
  font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); line-height:1.55;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:11px 14px; margin-bottom:16px;
}
.lib-privacy svg{flex:0 0 14px; margin-top:2px; stroke:var(--green);}
.lib-privacy b{color:var(--ink);}
.lib-search{display:flex; gap:10px; margin:0 0 12px;}
.lib-search input{
  flex:1; min-width:0; border:1px solid var(--border); border-radius:12px;
  padding:13px 16px; font:inherit; font-size:calc(15px*var(--ts,1)); color:var(--ink);
  background:var(--surface); box-shadow:var(--shadow);
}
.lib-search input:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
.lib-search .btn{padding:0 22px; border-radius:12px;}

.searching{
  display:flex; gap:12px; align-items:center; font-size:calc(13px*var(--ts,1)); color:var(--ink-2);
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:16px 18px; margin:16px 0; box-shadow:var(--shadow);
}
.typing{display:inline-flex; gap:4px;}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:tp 1s infinite;}
.typing i:nth-child(2){animation-delay:.15s;}
.typing i:nth-child(3){animation-delay:.3s;}
@keyframes tp{0%,60%,100%{opacity:.25; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}

.ans-card{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:20px 22px; box-shadow:var(--shadow); margin:16px 0;
}
.ans-card .eyebrow{font-size:calc(10.5px*var(--ts,1)); letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--pos-text); margin-bottom:8px;}
.ans-card.escalated .eyebrow{color:var(--warn);}
.ans-card .q{font-size:calc(15px*var(--ts,1)); font-weight:700; margin-bottom:8px;}
.ans-card .a{font-size:calc(14px*var(--ts,1)); line-height:1.6;}
.ans-card .srcs{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.ans-card .sent{margin-top:12px; font-size:calc(12.5px*var(--ts,1)); font-weight:600; color:var(--pos-text);}
.ans-card .note{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); margin-top:8px;}
.ans-card .fups{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;}
.fact{display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-top:1px solid var(--border-soft); font-size:calc(13px*var(--ts,1));}
.fact:first-of-type{border-top:0; margin-top:2px;}
.fact b{font-weight:600; text-align:right;}

.lib-topics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.topic{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; cursor:pointer; box-shadow:var(--shadow);
}
.topic:hover{border-color:var(--green);}
.topic.on{border-color:var(--green); background:var(--green-soft);}
.topic .t{font-weight:600; font-size:calc(13px*var(--ts,1));}
.topic .s{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); margin-top:3px;}

.lib-recent .item{padding:12px 0; border-top:1px solid var(--border-soft);}
.lib-recent .item:first-child{border-top:0; padding-top:0;}
.lib-recent .rq{font-weight:600; font-size:calc(13px*var(--ts,1));}
.lib-recent .ra{font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); margin-top:3px; line-height:1.5;}
.lib-recent .rm{font-size:calc(11px*var(--ts,1)); color:var(--ink-3); margin-top:4px;}
@media (max-width:820px){
  .lib-topics{grid-template-columns:1fr 1fr;}
}

/* ---------- responsive ---------- */
@media (max-width: 960px){
  /* minmax(0,1fr): a long dollar figure must shrink its tile, not widen the page */
  .grid-tiles{grid-template-columns:repeat(2, minmax(0,1fr));}
  .card.tile{min-width:0;}
  .grid-2, .grid-2e, .bill-grid{grid-template-columns:1fr;}
  .meter-row{grid-template-columns:120px 1fr; }
  .meter-row .m-val{grid-column:2; text-align:left;}
}
@media (max-width: 600px){
  .tile .value{font-size:calc(20px*var(--ts,1));}
}
@media (max-width: 820px){
  .shell{flex-direction:column; display:flex;}
  /* Phone: normal document flow again, whole page scrolls */
  html, body{height:auto;}
  body{display:block; overflow:auto;}
  .main{overflow:visible;}
  /* The sidebar becomes a compact sticky app header: one slim brand row,
     one scrollable row of nav chips. Content starts within the first screen. */
  .side{
    position:sticky; top:0; z-index:60;
    width:auto; flex:none; border-right:0; border-bottom:1px solid var(--border);
    padding:10px 0 0; height:auto; overflow:visible;
    box-shadow:0 2px 12px rgba(16,28,23,.07);
  }
  .side{display:grid; grid-template-columns:1fr auto; align-items:center;}
  .wordmark{padding:0 16px 6px; grid-column:1;}
  .wordmark .name{font-size:calc(16px*var(--ts,1));}
  .wordmark .sub{display:none;}
  .wordmark .tree{display:none;}
  .orgline{display:none;}
  #askSlot{grid-column:2; padding:0 14px 6px 0;}
  .askbtn{width:auto; padding:8px 14px; font-size:calc(13px*var(--ts,1)); border-radius:99px;}
  .askbtn .ask-l{display:none;}
  .askbtn::after{content:"Ask";}
  .side nav{grid-column:1 / -1;}
  .side nav{
    flex:0 0 auto; flex-direction:row; flex-wrap:nowrap; gap:6px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding:2px 14px 10px;
  }
  .side nav::-webkit-scrollbar{display:none;}
  .side nav a{
    white-space:nowrap; flex:0 0 auto;
    border:1px solid var(--border); border-radius:99px;
    padding:7px 14px; font-size:calc(13.5px*var(--ts,1));
  }
  .textsize{display:none;}
  .side .foot{display:none;}
  .main-in{padding:14px 14px 60px;}
}

.meter-flag .flag-x{
  display:inline-block; margin-left:8px; color:var(--ink-3); font-weight:600; cursor:pointer;
  font-size:calc(11px*var(--ts,1)); text-decoration:underline; text-underline-offset:2px;
}
.meter-flag .flag-x:hover{color:var(--ink);}

/* ---------- firm queue items: one visual system, no emoji ---------- */
.q-item{display:flex; gap:14px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--border-soft);}
.q-item:first-of-type{border-top:0;}
.q-ic{flex:0 0 30px; width:30px; height:30px; border-radius:8px; background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center;}
.q-ic svg{stroke:currentColor; fill:none;}
.q-body{flex:1; min-width:0;}
.q-label{font-size:calc(13.5px*var(--ts,1)); color:var(--ink); line-height:1.5;}
.q-when{flex:0 0 auto; font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); white-space:nowrap; padding-top:2px;}
.q-act{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;}

/* ---------- close checklist: a real checkbox, not a chip cosplay ---------- */
.ck{
  flex:0 0 20px; width:20px; height:20px; margin-top:1px;
  border:1.5px solid var(--border); border-radius:6px; background:var(--surface);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  padding:0; appearance:none;
}
.ck:hover{border-color:var(--green);}
.ck.on{background:var(--green); border-color:var(--green);}
.ck.on svg{stroke:#fff;}
/* platform-verified: a fact the system can vouch for, distinct from a human tick */
.ck.auto{background:#eaf4ee; border-color:#9cc5ae;}
.ck.auto svg{stroke:#2e7d54;}
.q-note{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); margin-top:2px; line-height:1.45;}
.q-note.good{color:#2e7d54;}

/* ---------- client cards: one structure, no button soup ---------- */
.cc{max-width:820px; margin-bottom:16px;}
.cc-head{display:flex; align-items:flex-start; gap:14px;}
.cc-name{font-size:calc(16px*var(--ts,1)); font-weight:700; letter-spacing:-.01em;}
.cc-meta{margin-top:3px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.cc-stats{display:flex; gap:30px; flex-wrap:wrap; margin:14px 0 2px; padding-top:12px; border-top:1px solid var(--border-soft);}
.cc-stat .l{font-size:calc(10.5px*var(--ts,1)); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.cc-stat .v{font-size:calc(15px*var(--ts,1)); font-weight:600; color:var(--ink); margin-top:2px;}
.cc-stat .v.warn{color:#7a5200;}
.cc-stat .v.dim{color:var(--ink-3); font-weight:500;}
.cc-tabs{display:flex; gap:2px; margin-top:14px; border-bottom:1px solid var(--border-soft);}
.cc-tab{appearance:none; border:0; background:none; cursor:pointer; font:inherit;
  font-size:calc(12.5px*var(--ts,1)); font-weight:600; color:var(--ink-3);
  padding:7px 12px 9px; border-bottom:2px solid transparent; margin-bottom:-1px;}
.cc-tab:hover{color:var(--ink);}
.cc-tab.on{color:var(--green); border-bottom-color:var(--green);}
.cc-panel{padding-top:14px;}

/* Queue cards breathe: these are read at a glance, several times a day */
.qcard{padding:22px 24px; margin-bottom:18px;}
.qcard .cardhead{margin-bottom:6px;}
.qcard .q-item:first-of-type{padding-top:14px;}
.qcard .q-item:last-of-type{padding-bottom:4px;}
.owner-card{padding:22px 24px; margin-bottom:22px;}
.owner-card .q-item{border-top-color:#ecd9b8;}
.q-label{line-height:1.55;}

/* ---------- the ask button: the front door, at the top of the sidebar ---------- */
#askSlot{padding:14px 14px 4px;}
.askbtn{
  display:flex; width:100%; align-items:center; justify-content:center; gap:9px;
  background:var(--green); color:#fff; border:none; cursor:pointer;
  font:inherit; font-weight:600; font-size:calc(13.5px*var(--ts,1));
  padding:11px 14px; border-radius:12px;
  box-shadow:0 4px 14px rgba(18,56,45,.20);
  transition:transform .12s ease, box-shadow .12s ease;
}
.askbtn:hover{background:var(--green-hover); transform:translateY(-1px); box-shadow:0 7px 18px rgba(18,56,45,.26);}
.askbtn svg{stroke:#fff; flex:0 0 auto;}


/* ---------- the fleet: every client, one screen ---------- */
.fleet-head, .fleet-row{
  display:grid; grid-template-columns:2.1fr 1fr 1.1fr .9fr .8fr 1fr 1.1fr;
  gap:10px; align-items:center; padding:12px 0;
}
.fleet-head{
  font-size:calc(10.5px*var(--ts,1)); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:#6b7a72; border-bottom:1px solid var(--border-soft);
  padding:14px 0 10px;
}
.fleet-row{border-top:1px solid var(--border-soft); cursor:pointer; font-size:calc(13.5px*var(--ts,1));}
.fleet-row:first-of-type{border-top:none;}
.fleet-row:hover{background:var(--bg); margin:0 -20px; padding-left:20px; padding-right:20px;}
.fleet-row .f-name b{display:block; font-size:calc(14px*var(--ts,1));}
.fleet-row .f-name small{color:var(--ink-3); font-size:calc(11.5px*var(--ts,1));}
.fleet-row .f-dim{color:var(--ink-3);}
.fleet-row .f-warm{color:#7a5200; font-weight:600;}
@media (max-width:820px){
  .fleet-head{display:none;}
  .fleet-row{grid-template-columns:1.6fr 1fr 1fr; row-gap:4px;}
  .fleet-row span:nth-child(4), .fleet-row span:nth-child(5), .fleet-row span:nth-child(7){display:none;}
}

/* ---------- the More menu: one primary action, the rest tucked away ---------- */
.morewrap{position:relative; display:inline-block;}
.moremenu{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:50;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 34px rgba(16,28,23,.16); padding:6px; min-width:220px;
}
.moremenu.open{display:flex; flex-direction:column;}
.moremenu button{
  background:none; border:none; cursor:pointer; text-align:left;
  font:inherit; font-size:calc(13px*var(--ts,1)); color:var(--ink);
  padding:9px 12px; border-radius:8px; white-space:nowrap;
}
.moremenu button:hover{background:var(--bg);}


/* ---------- guided tour ---------- */
.demo-bar .tour-go{
  background:var(--green-soft); color:var(--green); border:1px solid #d5e3da;
  font-weight:700; font-size:12.5px; padding:6px 14px; border-radius:99px; cursor:pointer; margin-right:14px;
}
.demo-bar .tour-go:hover{filter:brightness(.97);}
/* The spotlight never travels: it is repositioned while the card is faded
   out, so every stop transitions the same way (a sliding spotlight left a
   ghost outline whenever the page changed underneath it). */
#tourSpot{
  position:absolute; z-index:8000; display:none; pointer-events:none;
  border-radius:14px; box-shadow:0 0 0 100vmax rgba(10,22,17,.6); border:2px solid rgba(255,255,255,.85);
}
.tour-lit{
  position:relative !important; z-index:8005 !important;
  box-shadow:0 0 0 3px rgba(224,168,50,.9), 0 0 24px rgba(224,168,50,.45) !important;
}
#tourCard{
  position:absolute; z-index:8001; display:none; width:min(430px, calc(100vw - 24px));
  opacity:1; transform:translateY(0);
  transition:opacity .17s ease, transform .17s ease;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 24px 60px rgba(10,22,17,.35); padding:18px 20px;
}
#tourCard.slim{width:min(320px, calc(100vw - 24px));}
#tourSpot{opacity:1;}
/* mid-transition: invisible and unclickable while it is repositioned */
#tourCard.out{opacity:0; transform:translateY(7px); pointer-events:none;}
@media (prefers-reduced-motion:reduce){
  #tourCard{transition:none;}
}
#tourCard .t-kick{font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--green); margin-bottom:6px;}
#tourCard .t-title{font-size:17px; font-weight:800; letter-spacing:-.01em; margin-bottom:6px;}
#tourCard .t-text{font-size:13.5px; line-height:1.65; color:var(--ink-2); margin-bottom:14px;}
#tourCard .t-row{display:flex; gap:8px; align-items:center;}
#tourCard .t-x{margin-left:auto; font-size:20px; color:var(--ink-3); cursor:pointer; line-height:1; padding:2px 6px; border-radius:6px;}
#tourCard .t-x:hover{background:rgba(0,0,0,.06);}

/* ---- Guided tour: the 7 AM digest email mockup (mirrors the real email
   the worker sends; emails are always light, so fixed light palette) ---- */
#digestMock{
  position:fixed; z-index:7000; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(440px, calc(100vw - 32px)); max-height:88vh; overflow:auto;
  background:#ffffff; color:#1a2e26; border-radius:14px;
  box-shadow:0 24px 70px rgba(10,30,22,.45); padding:18px 20px 20px;
  font-size:13.5px; line-height:1.55;
}
#digestMock .dgm-mail{display:flex; gap:10px; align-items:center; padding-bottom:10px; border-bottom:1px solid #eef2ef;}
#digestMock .dgm-av{width:34px; height:34px; border-radius:50%; background:#12382d; color:#f0c95c; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 34px;}
#digestMock .dgm-from{font-weight:700; font-size:13.5px;}
#digestMock .dgm-meta{font-size:11.5px; color:#6b7a72;}
#digestMock .dgm-subj{font-weight:700; font-size:14.5px; padding:10px 0 2px;}
#digestMock .dgm-hi{font-size:17px; font-weight:800; margin-top:8px;}
#digestMock .dgm-intro{color:#4f6058; margin-top:3px;}
#digestMock .dgm-label{font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#7a5200; margin-top:12px;}
#digestMock .dgm-label.quiet{color:#6b7a72;}
#digestMock .dgm-row{padding:9px 0; border-bottom:1px solid #eef2ef;}
#digestMock .dgm-rowhead{display:flex; justify-content:space-between; align-items:center; gap:8px;}
#digestMock .dgm-chip{display:inline-block; font-size:10px; font-weight:700; padding:3px 9px; border-radius:99px; letter-spacing:.04em;}
#digestMock .dgm-min{font-size:11px; font-weight:700; color:#256b47; background:#e7f3ec; padding:3px 9px; border-radius:99px; white-space:nowrap;}
#digestMock .dgm-t{font-size:13.5px; font-weight:600; margin-top:6px; line-height:1.45;}
#digestMock .dgm-b{font-size:12.5px; color:#4f6058; margin-top:2px;}
#digestMock .dgm-quiet{font-size:12.5px; color:#4f6058; line-height:1.7; margin-top:6px;}
#digestMock .dgm-cta{margin-top:12px; background:#12382d; color:#fff; font-weight:700; text-align:center; border-radius:10px; padding:10px 0; font-size:13.5px;}
#digestMock .dgm-foot{font-size:11px; color:#8a958f; margin-top:12px; line-height:1.6;}

/* ---------- tester feedback (the CPA-test loop) ---------- */
.fb-fab{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:8px;
  background:var(--surface); color:var(--green);
  border:1.5px solid var(--green); border-radius:99px;
  padding:10px 16px; font:inherit; font-weight:600; font-size:calc(13px*var(--ts,1));
  cursor:pointer; box-shadow:0 6px 18px rgba(16,28,23,.14);
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.fb-fab:hover{background:var(--green); color:#fff; transform:translateY(-1px);}
.fb-fab svg{flex:0 0 auto;}
.fb-count{
  background:var(--green); color:#fff; border-radius:99px;
  font-size:calc(10.5px*var(--ts,1)); font-weight:700; padding:1px 7px;
}
.fb-fab:hover .fb-count{background:#fff; color:var(--green);}
.modal .m-body textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:11px 13px;
  font:inherit; font-size:calc(14px*var(--ts,1)); color:var(--ink); resize:vertical; min-height:70px;
}
.modal .m-body textarea:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
.fb-where{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); line-height:1.5;}
.fb-thanks{
  background:var(--green-soft); color:var(--green); border-radius:10px;
  padding:9px 13px; font-size:calc(12.5px*var(--ts,1)); font-weight:600;
}
.fb-listhead{font-size:calc(11px*var(--ts,1)); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:6px;}
.fb-list{max-height:280px; overflow:auto; margin-top:2px;}
.fb-item{padding:11px 2px; border-bottom:1px solid var(--border);}
.fb-item:last-child{border-bottom:none;}
.fb-item .t{font-size:calc(13.5px*var(--ts,1)); color:var(--ink); line-height:1.5; white-space:pre-line;}
.fb-item .meta{
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
  font-size:calc(11.5px*var(--ts,1)); color:var(--ink-3); margin-top:5px;
}
.fb-chip{font-size:calc(10.5px*var(--ts,1)); font-weight:700; border-radius:99px; padding:2px 9px;}
.fb-chip.fresh{background:var(--bg); color:var(--ink-2); border:1px solid var(--border);}
.fb-chip.noted{background:#fdf3e2; color:#7a5200;}
.fb-chip.shipped{background:var(--green-soft); color:var(--green);}
.fb-reply{
  margin-top:7px; background:var(--bg); border-left:3px solid var(--green);
  border-radius:6px; padding:7px 10px; font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); line-height:1.5;
}
.fb-ctl{display:flex; gap:7px; margin-top:8px; align-items:center;}
.fb-ctl input{
  flex:1; min-width:0; border:1px solid var(--border); border-radius:8px; padding:7px 10px;
  font:inherit; font-size:calc(12.5px*var(--ts,1)); color:var(--ink);
}
.fb-ctl input:focus{outline:2px solid var(--green-soft); border-color:var(--green);}
@media (max-width:700px){
  .fb-fab{right:12px; bottom:12px; padding:9px 13px;}
  .fb-fab span:not(.fb-count){display:none;}
}

/* platform addendum modal */
.add-text{
  max-height:290px; overflow:auto; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:13px 15px; font-size:calc(13px*var(--ts,1)); color:var(--ink-2);
  line-height:1.6; white-space:pre-line;
}