/* Admin surface.
 *
 * CLAUDE.md §8: "Visual design follows the LiveCard admin — same shell, same
 * layout primitives, same CSS." This file IS that CSS, lifted from LiveCard's
 * admin and kept in the same shape so the two products read as one family:
 * dark chrome bar, light working surface, Montserrat for headings and Lato for
 * text, and a theme toggle that remembers.
 *
 * Extending it: add to the FEEDBACK-ONLY section at the bottom rather than
 * editing the shared block, so the diff against LiveCard stays legible.
 */


:root{
  --ink:#1d2025; --ink-2:#3a3f47; --muted:#5b6068; --line:#e7e7e8; --line-strong:#d3d4d6;
  --bg:#f4f4f5; --surface:#ffffff; --surface-2:#fafafa;
  --accent:#f5a81d; --accent-hover:#f5ce8a; --accent-press:#e2940c; --accent-line:#f7c164; --accent-tint:#fef8ec;
  --danger:#d64545; --danger-tint:#fdf1f1; --success:#2e9e5b; --success-tint:#eef7f1;
  --font-display:'Montserrat',-apple-system,"Segoe UI",sans-serif;
  --font-body:'Lato',-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-caption:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:22px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px;
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --shadow:0 1px 2px rgba(29,32,37,.05); --ring:0 0 0 3px rgba(245,168,29,.28);
  --chrome:#1d2025; --chrome-ink:#ffffff; --chrome-muted:#9ea3aa; --chrome-line:#40454d; --chrome-hover:#2b3038;
  --on-accent:#1d2025; --pill-ink:#7a5410; --warn-bg:#fdf6e6; --warn-ink:#7a5410;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#eceef0; --ink-2:#c3c7cc; --muted:#8f959d; --line:#2b3037; --line-strong:#3c424a;
  --bg:#141619; --surface:#1c1f24; --surface-2:#22262c; --accent-tint:#2a2315; --accent-line:#6a5320;
  --danger:#ef8080; --danger-tint:#301d1d; --success:#5cc287; --success-tint:#1b2b22;
  --chrome:#101215; --chrome-line:#2b3037; --chrome-hover:#23272e;
  --pill-ink:#f0c274; --warn-bg:#33280f; --warn-ink:#f3d79a; --shadow:0 1px 2px rgba(0,0,0,.4);
}
:root[data-theme="dark"] select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238f959d' stroke-width='1.5'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--accent-press);text-decoration:none}
a:hover{color:var(--ink)}
code{font-family:var(--font-mono);font-size:.92em}
.topbar{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;padding:10px var(--s-6);background:var(--chrome);color:var(--chrome-ink);border-bottom:2px solid var(--accent);position:sticky;top:0;z-index:40;}
.topbar__brand{display:flex;align-items:center;gap:var(--s-2);color:var(--chrome-ink);font-family:var(--font-display);font-weight:700;font-size:var(--fs-base);letter-spacing:.01em;text-decoration:none;}
.topbar__brand:hover{color:var(--chrome-ink)}
.topbar__logo{height:21px;width:auto;display:block}
.topbar__brand span{font-family:var(--font-body);font-weight:400;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.14em;color:var(--chrome-muted);}
.topbar .grow{flex:1 1 auto}
.topbar__group{display:flex;align-items:center;gap:var(--s-2);flex:0 0 auto}
.topbar__group>*{flex:0 0 auto}
.topbar__rule{width:1px;height:22px;background:var(--chrome-line)}
.topbar__account{display:flex;align-items:center;gap:var(--s-3);font-size:var(--fs-sm);flex:0 0 auto;margin-left:auto;white-space:nowrap;}
.topbar__account a,.topbar__account button{font-family:var(--font-body);font-size:var(--fs-sm);background:none;border:0;padding:0;cursor:pointer;color:var(--chrome-muted);text-decoration:none;}
.langsw{display:flex;gap:1px;align-items:center}
.langsw__opt{color:var(--chrome-muted);font-size:var(--fs-caption);text-decoration:none;padding:3px 6px;border-radius:var(--r-sm)}
.langsw__opt:hover{color:var(--chrome-ink)}
.langsw__opt[aria-current]{color:var(--accent);font-weight:700}
.topbar__account a:hover,.topbar__account button:hover{color:var(--chrome-ink)}
.acct{position:relative}
.acct__btn{display:inline-flex;align-items:center;gap:6px}
.acct__btn #who{color:var(--chrome-ink);font-weight:700}
.acct__role{color:var(--chrome-muted);font-weight:400}
.acct__btn[aria-expanded="true"] #who{color:var(--accent)}
.acct__caret{font-size:10px;color:var(--chrome-muted)}
.acct__menu{position:absolute;right:0;top:calc(100% + 10px);min-width:170px;z-index:45;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:0 10px 28px rgba(0,0,0,.28);padding:var(--s-1);display:flex;flex-direction:column;}
.acct__menu[hidden]{display:none}
.acct__menu a,.acct__menu button{text-align:left;color:var(--ink);font-size:var(--fs-sm);padding:8px 10px;border-radius:var(--r-sm);}
.acct__menu a:hover,.acct__menu button:hover{background:var(--surface-2);color:var(--ink)}
.acct__menu hr{border:0;border-top:1px solid var(--line);margin:var(--s-1) 0}
.tbtn{font-family:var(--font-body);font-size:var(--fs-sm);line-height:1;color:#e8e9ea;background:transparent;border:1px solid var(--chrome-line);border-radius:var(--r-md);padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;transition:background .12s,border-color .12s,color .12s;}
.tbtn:hover{background:var(--chrome-hover);border-color:#565c65;color:#fff}
.impbar{align-items:center;gap:var(--s-4);padding:10px var(--s-6);font-size:var(--fs-sm);background:var(--warn-bg);color:var(--warn-ink);border-bottom:1px solid var(--accent-line);}
.impbar button{font-family:var(--font-body);font-size:var(--fs-sm);font-weight:700;background:transparent;color:var(--warn-ink);border:1px solid var(--accent-line);border-radius:var(--r-md);padding:6px 12px;cursor:pointer;}
.impbar button:hover{background:var(--accent-tint)}
.page{max-width:1180px;margin:0 auto;padding:var(--s-8) var(--s-6) 96px}
.page__head{margin:0 0 var(--s-6)}
.page__title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);line-height:1.25;margin:0 0 var(--s-1);letter-spacing:-.01em;}
.page__sub{margin:0;color:var(--muted);font-size:var(--fs-sm)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);margin-bottom:var(--s-4);}
.panel__head{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);}
.panel__title{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);margin:0;letter-spacing:-.005em;}
.panel__count{font-size:var(--fs-caption);color:var(--muted);background:var(--bg);border-radius:999px;padding:2px 8px;}
.panel__note{font-size:var(--fs-sm);color:var(--muted);margin:0}
.activebar{border-left:3px solid var(--accent)}
.activebar__row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);flex-wrap:wrap}
.activebar__lbl{font-size:var(--fs-caption);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.activebar__sel{flex:1 1 240px;max-width:420px;font-size:var(--fs-base);font-weight:600;padding:9px 12px}
.orgfilter{margin-left:auto;flex:0 1 240px;min-width:150px;font-size:var(--fs-sm);padding:7px 11px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink)}
.orgfilter:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,168,29,.22)}
.orgpager{display:flex;align-items:center;justify-content:center;gap:var(--s-3);padding:var(--s-3) var(--s-5);border-top:1px solid var(--line)}
.orgpager[hidden]{display:none}
.orgpager__lbl{font-size:var(--fs-sm);color:var(--muted);min-width:110px;text-align:center}
tr.is-active>td{background:var(--accent-tint)}
tr.is-active>td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.panel__body{padding:var(--s-5)}
.panel__body--flush{padding:0}
.panel__foot{display:flex;align-items:flex-end;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg);}
.panel__foot--split{justify-content:space-between;align-items:center}
.toolbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--line);}
.toolbar .grow{flex:1 1 auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px var(--s-2);border-bottom:1px solid var(--line);text-align:left;font-size:var(--fs-sm);vertical-align:middle;}
th{color:var(--muted);font-weight:700;font-size:var(--fs-caption);text-transform:uppercase;letter-spacing:.06em;background:var(--surface-2);white-space:nowrap;}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
th:first-child,td:first-child{padding-left:var(--s-5)}
th:last-child,td:last-child{padding-right:var(--s-5)}
td.narrow{width:1%;white-space:nowrap}
td.narrow .btn,td.narrow a.btn{margin:2px 6px 2px 0}
td.narrow .btn:last-child{margin-right:0}
.tablewrap{overflow-x:auto}

/* --- the actions column stays put --------------------------------------- */
/* A wide table scrolls sideways without saying so, and the buttons are the
   last thing in the row — so they are what disappears. Pinned to the right
   edge they are always reachable, and the shadow says the rest slides under
   them. tbody tr:hover repaints the row, so the pinned cell has to repaint
   with it or it flickers a different colour mid-scroll. */
.tablewrap table td:last-child,
.tablewrap table th:last-child {
  position: sticky; right: 0; z-index: 1;
  background: var(--surface);
  border-left: 1px solid var(--line);
}
.tablewrap table th:last-child { background: var(--surface-2); z-index: 2; }
.tablewrap tbody tr:hover td:last-child { background: var(--surface-2); }
input[type=text],input[type=password],input[type=date],input:not([type]),select,textarea{width:100%;font-family:var(--font-body);font-size:var(--fs-base);color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:9px 11px;transition:border-color .12s,box-shadow .12s;}
textarea{resize:vertical}
select{appearance:none;cursor:pointer;padding-right:30px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%235b6068' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 11px center;background-size:10px 6px;}
input:hover,select:hover,textarea:hover{border-color:#b9bbbe}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:#9ea3aa}
td input[type=text],td input[type=password],td select{padding:6px 9px;font-size:var(--fs-sm);min-width:130px}
td select{padding-right:26px}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);cursor:pointer;}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>span,.lbl{font-size:var(--fs-caption);font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
.row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:flex-end}
.row label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-caption);font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
.checkline{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:var(--fs-caption);font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;}
.checkline input{width:15px;height:15px}
.btn{font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);line-height:1;padding:9px 15px;border-radius:var(--r-md);cursor:pointer;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s,color .12s;}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink-2)}
.btn.ghost:hover{background:var(--bg);border-color:#b9bbbe;color:var(--ink)}
.btn.del{background:var(--surface);border-color:var(--danger-tint);color:var(--danger)}
.btn.del:hover{background:var(--danger-tint);border-color:var(--danger);color:var(--danger)}
td .btn,.toolbar .btn,.panel__foot--split .btn{padding:7px 11px;font-size:var(--fs-caption)}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:var(--fs-caption);font-weight:700;letter-spacing:.03em;background:var(--bg);color:var(--muted);border:1px solid var(--line-strong);}
.pill.on,.pill.paid{background:var(--success-tint);color:var(--success);border-color:transparent}
.pill.off,.pill.failed,.pill.past_due{background:var(--danger-tint);color:var(--danger);border-color:transparent}
.pill.due{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent;text-transform:capitalize}
.muted{color:var(--muted);font-size:var(--fs-sm)}
.statsrow{display:flex;gap:var(--s-8);flex-wrap:wrap;margin-bottom:var(--s-4)}
.stat .statnum{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.02em;}
.stat .statlbl{font-size:var(--fs-caption);color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:.06em;}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:var(--r-md);opacity:0;transition:opacity .2s;pointer-events:none;font-size:var(--fs-sm);z-index:60;box-shadow:0 6px 20px rgba(29,32,37,.22);}
#toast.show{opacity:1}
#toast.err{background:var(--danger);color:#fff}
.dmodal{position:fixed;inset:0;background:rgba(29,32,37,.55);display:none;align-items:center;justify-content:center;z-index:50;padding:var(--s-6);}
.dpanel{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:1000px;height:86vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(29,32,37,.3);}
.dhead{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);}
.dhead strong{font-family:var(--font-display);font-size:var(--fs-md);font-weight:600}
.dhead .grow{flex:1}
.dcontent{display:flex;flex:1;min-height:0}
.dform{width:340px;overflow:auto;padding:var(--s-4);border-right:1px solid var(--line);background:var(--surface-2)}
.dpreview{flex:1;border:0;background:var(--bg)}
.dnote{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-sm);padding:var(--s-5);text-align:center}
.dsec{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--s-2);background:var(--surface)}
.dsec>summary{padding:10px 12px;cursor:pointer;font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);color:var(--ink);}
.dsec>summary:hover{color:var(--accent-press)}
.dbody{padding:var(--s-3);display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);border-top:1px solid var(--line)}
.dfield{display:flex;flex-direction:column;font-size:var(--fs-caption);color:var(--muted);gap:4px}
.dfield input[type=color]{width:100%;height:32px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface)}
.dfield select{padding:6px 26px 6px 8px;font-size:var(--fs-sm)}
.dfield .chk{flex-direction:row;display:flex;align-items:center;gap:6px;grid-column:1/-1;color:var(--ink)}
.dscroll{padding:var(--s-5);overflow:auto}
.orow{margin-bottom:var(--s-4)}
.orow>label{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-caption);font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;}
.orow>label .muted{text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--fs-caption)}
.subgrid{display:grid;gap:var(--s-2);margin-top:var(--s-2)}
.logorow{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-2);flex-wrap:wrap}
.logorow img{max-height:46px;max-width:140px;object-fit:contain;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:4px;}
.logorow input[type=file]{font-size:var(--fs-sm);width:auto;border:0;padding:0;background:none}
.logorow input[type=file]::file-selector-button{font-family:var(--font-body);font-size:var(--fs-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);border-radius:var(--r-sm);padding:5px 10px;margin-right:8px;cursor:pointer;}
@media(max-width:980px){.topbar{row-gap:var(--s-2)}.topbar .grow{flex-basis:100%;height:0}}
@media(max-width:720px){.dcontent{flex-direction:column}.dform{width:auto;border-right:0;border-bottom:1px solid var(--line);max-height:46vh}.page{padding:var(--s-5) var(--s-4) 72px}}

/* ==========================================================================
   FEEDBACK-ONLY — components LiveCard has no equivalent for.
   Everything above this line is shared with LiveCard's admin; keep it that way
   so the two stay comparable.
   ========================================================================== */

/* --- form builder ------------------------------------------------------- */
.q {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
  background: var(--surface-2);
}
.q.retired { opacity: .55; }
.qhead { display: flex; align-items: center; gap: var(--s-2); }
.qhead input { flex: 1; }
.qmeta {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-2); flex-wrap: wrap;
  font-size: var(--fs-caption); color: var(--muted);
}
.qmeta .btn { margin-left: auto; }

.grip {
  cursor: grab; color: var(--muted); user-select: none;
  font-size: var(--fs-caption); letter-spacing: -2px; padding: 2px 4px;
}
.grip:active { cursor: grabbing; }
.drag { opacity: .45; }

.key {
  font-family: var(--font-mono); font-size: var(--fs-caption);
  background: var(--bg); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: var(--r-sm); white-space: nowrap;
}

.opts { list-style: none; margin: var(--s-3) 0 0; padding: 0 0 0 var(--s-5); }
.opt { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 6px; }
.opt input { flex: 1; }
.opt.retired { opacity: .55; }
.addopt { padding-left: var(--s-5); margin-top: var(--s-2); }

label.inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); color: var(--muted);
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
label.inline input { width: 15px; height: 15px; }

/* --- languages ---------------------------------------------------------- */
.langbar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.langtab {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-caption);
  padding: 6px 12px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2);
}
.langtab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.langbar select { width: auto; font-size: var(--fs-sm); padding: 6px 10px; }

/* Marks a field with no text in the language being edited, so an editor can see
   at a glance that they are looking at the fallback, not their translation. */
.fallback {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--warn-bg); color: var(--warn-ink);
}

/* --- conditions --------------------------------------------------------- */
.rulesum {
  margin: var(--s-3) 0 0; padding: 7px 11px; border-radius: var(--r-md);
  font-size: var(--fs-caption); line-height: 1.45;
  background: var(--accent-tint); color: var(--ink-2);
  border-left: 3px solid var(--accent);
}
.cond { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }
.cond select, .cond input { width: auto; font-size: var(--fs-sm); padding: 6px 10px; }

/* --- reports ------------------------------------------------------------ */
table.bars { width: 100%; border-collapse: collapse; }
table.bars td { border: 0; padding: 5px var(--s-2) 5px 0; vertical-align: middle; }
td.bl { width: 34%; font-size: var(--fs-sm); }
td.bt { width: 52%; }
td.bn { width: 14%; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.bar { display: block; height: 18px; border-radius: var(--r-sm); min-width: 2px; background: var(--accent); }
.avg { margin: 0 0 var(--s-3); font-size: var(--fs-base); }

.chartwrap { overflow-x: auto; }
.chart { width: 100%; min-width: 420px; height: auto; display: block; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.legend { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.legend .key {
  display: inline-block; width: 11px; height: 11px;
  border-radius: 3px; padding: 0; border: 0; background: none;
}
.legend .key.filled { background: var(--accent); }
.legend .key.outline { border: 1px solid var(--accent-press); }

.filter { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: var(--s-3); }
.flabel {
  font-size: var(--fs-caption); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; min-width: 140px;
}
.filter input, .filter select { width: auto; font-size: var(--fs-sm); padding: 6px 10px; }
.chip {
  font-family: var(--font-body); font-size: var(--fs-caption);
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted);
}
.chip:hover { border-color: #b9bbbe; color: var(--ink); }
.chip.on { background: var(--accent-tint); border-color: var(--accent); color: var(--ink); }

ul.texts { list-style: none; margin: 0; padding: 0; }
ul.texts li { border-left: 3px solid var(--accent); padding: 2px 0 2px var(--s-3); margin-bottom: var(--s-4); }
ul.texts p { margin: 0 0 3px; white-space: pre-line; font-size: var(--fs-sm); }
ul.texts a { font-size: var(--fs-caption); }

td.qcol { width: 40%; }
.text { white-space: pre-line; }
.warn { color: var(--warn-ink); font-size: var(--fs-caption); }

/* --- billing ------------------------------------------------------------ */
.bill-ok, .bill-due, .bill-warn, .bill-stop {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  margin-bottom: var(--s-4); font-size: var(--fs-sm); line-height: 1.5;
}
.bill-ok   { background: var(--success-tint); color: var(--success); }
.bill-due  { background: var(--bg);           color: var(--ink-2); border: 1px solid var(--line-strong); }
.bill-warn { background: var(--warn-bg);      color: var(--warn-ink); }
.bill-stop { background: var(--danger-tint);  color: var(--danger); }

table.lines2 { width: 100%; border-collapse: collapse; }
table.lines2 td { padding: 8px 6px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
table.lines2 tr.tot td { border-bottom: 0; border-top: 2px solid var(--line-strong); padding-top: var(--s-3); }
table.lines2 .r { text-align: right; font-variant-numeric: tabular-nums; }

/* --- outro editor ------------------------------------------------------- */
.oblock {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4); margin: var(--s-4) 0; background: var(--surface-2);
}
.oblock > label.inline { margin-bottom: var(--s-3); color: var(--ink); font-size: var(--fs-sm); }
.oblock textarea { min-height: 74px; }

/* --- misc --------------------------------------------------------------- */
.hidden { display: none !important; }
.empty { color: var(--muted); padding: var(--s-6) 0; text-align: center; font-size: var(--fs-sm); }
.dim { color: var(--muted); font-size: var(--fs-caption); }
.hint { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--s-4); }
.right { text-align: right; }
.big { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; }
.big.small { font-size: var(--fs-md); padding-top: 8px; }

/* --- account menu ------------------------------------------------------- */
.acct__org {
  padding: 8px 10px 4px; font-size: var(--fs-caption); color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.acct__org:empty { display: none; }

/* --- signed-out pages --------------------------------------------------- */
.authbody { background: var(--bg); }
.auth {
  max-width: 400px; margin: 0 auto;
  padding: 8vh var(--s-4) var(--s-8);
}
.auth .panel__body { padding: var(--s-6); }
.auth__title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  margin: 0; letter-spacing: -.01em;
}
.auth__sub {
  margin: 2px 0 var(--s-6); font-size: var(--fs-caption); color: var(--muted);
  text-transform: uppercase; letter-spacing: .14em;
}
.auth .fld { margin-bottom: var(--s-4); }
.auth__go { width: 100%; justify-content: center; margin-top: var(--s-2); }
.auth__foot { margin: var(--s-5) 0 0; font-size: var(--fs-sm); }
.auth__hint { margin: var(--s-5) 0 0; font-size: var(--fs-caption); color: var(--muted); }

/* A stat whose value is a date or an amount, not a count — same slot, smaller
   type, so the row of numbers still lines up. */
.statnum--sm { font-size: var(--fs-md); display: inline-block; padding-top: 9px; }

/* The builder writes plain <label><span>Name</span><input></label> in dozens of
   places. Rather than touch every one, give a bare label inside a panel the
   same shape as LiveCard's .fld. */
.panel label:not(.inline):not(.fld) {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-3);
}
.panel label:not(.inline):not(.fld) > span {
  font-size: var(--fs-caption); font-weight: 700; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.panel__head .ptitle { flex: 1 1 220px; min-width: 0; }
.panel__head .grip { flex: 0 0 auto; }
.formpage .questions { margin: 0; }

/* --- folding the builder shut ------------------------------------------- */
/* Shut, a page is one row and a question is one row, so a long form fits on
   one screen and dragging a row past another is a short drag rather than an
   expedition. See builder.js for why the open/shut state cannot live here. */
/* A caret has to look like something you press. At 11px in muted grey it read
   as a bullet point, so it is now a real 26px target with a border that says
   "control" — the same size a finger expects and an eye can find mid-drag.
   Both glyphs sit in one fixed box, or every title in the form would shift
   sideways as its own row opened. */
.caret {
  flex: 0 0 auto; cursor: pointer;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 16px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: color .12s, background .12s, border-color .12s;
}
.caret:hover { color: var(--accent); border-color: var(--accent); }
.caret:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Same complaint, same fix: 10px muted grey next to the account name was a
   speck, and 13px was still one. The shared block above stays as LiveCard
   has it. */
.acct__caret { font-size: 24px; line-height: 16px; color: var(--chrome-ink); }
/* `.topbar__account button` in the shared block sets padding:0 and outranks a
   bare `.acct__btn`, so this has to carry the same weight to be heard. */
.topbar__account .acct__btn { gap: 8px; padding: 5px 8px; border-radius: var(--r-sm); }
.topbar__account .acct__btn:hover { background: var(--chrome-hover); }
.acct__btn:hover .acct__caret { color: var(--accent); }

/* --- LiveCard mark in the topbar ---------------------------------------- */
/* .topbar__logo is in the shared block above — LiveCard's own rule, copied
   with the rest and until now emitting nothing. These two are ours: the
   product name beside the mark, and the hairline that keeps them apart. */
/* Signed-out pages. The panel sits on --surface, so the mark has to follow the
   theme, and the theme has three states: explicit dark, explicit light, and the
   system default that stamps no attribute at all. Same guard as the tokens. */
.auth__logo { height: 24px; width: auto; display: block; margin: 0 auto var(--s-5); }
.auth__logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth__logo--light { display: none; }
  :root:not([data-theme="light"]) .auth__logo--dark  { display: block; }
}
:root[data-theme="dark"] .auth__logo--light { display: none; }
:root[data-theme="dark"] .auth__logo--dark  { display: block; }

.topbar__x {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-base); color: var(--chrome-ink);
  padding-left: var(--s-3); margin-left: var(--s-1);
  border-left: 1px solid var(--chrome-line);
}

/* The summary a folded row is recognised by. It must never be the thing that
   pushes the title out of the row, so it shrinks before the title does. */
.foldsum {
  flex: 0 1 auto; min-width: 0;
  font-size: var(--fs-caption); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* .foldable folds the same way but is NOT a page: `.formpage` is what the drag
   code selects when reordering pages, and a panel wearing it would put its own
   uuid into the reorder payload. */
.formpage:not(.open) > .panel__body,
.formpage:not(.open) > .panel__foot,
.foldable:not(.open) > .panel__body { display: none; }
/* With the body gone the head's rule would sit on the panel's own border. */
.formpage:not(.open) > .panel__head,
.foldable:not(.open) > .panel__head { border-bottom: 0; }

.q:not(.open) > .qbody { display: none; }
.q:not(.open) { padding-bottom: var(--s-3); }

/* --- the deployment check --------------------------------------------- */
/* Fixed-width, because the report is aligned in columns and wrapping it would
   scramble them. It scrolls sideways rather than reflowing. */
.preflight {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-caption);
  line-height: 1.6; white-space: pre; overflow-x: auto; color: var(--ink);
}

/* --- what this page's buttons say --------------------------------------- */
.pbtns {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4); padding-bottom: var(--s-4);
  border-bottom: 1px dashed var(--line);
}
.pbtns .fld { flex: 0 1 220px; }

/* --- per-question settings ---------------------------------------------- */
/* Only rating and slider have any, so this strip is absent on every other type
   rather than sitting there empty on twenty of them. */
.qcfg {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
}
.qcfg .fld { flex: 0 1 170px; }

/* --- a form's public address, ready to be taken away -------------------- */
/* Two of these, side by side on a desktop and stacked on a phone. The code is
   a fixed square so both cards line up whatever the address length. */
.addr {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--s-4); margin-bottom: var(--s-4); background: var(--surface-2);
}
.addr:last-child { margin-bottom: 0; }
.addr__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--s-3); }
.addr__title {
  font-size: var(--fs-caption); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.addr__body { display: flex; gap: var(--s-4); align-items: flex-start; flex-wrap: wrap; }
/* White ground on the image itself: a QR inverted by a dark theme does not
   scan, and the quiet zone has to stay white too. */
.addr__qr {
  flex: 0 0 auto; width: 150px; height: 150px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 6px;
}
.addr__side { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); }
/* The whole URL, wrapping rather than truncating — a half-shown address is
   exactly what this panel exists to stop. */
.addr__url {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--ink); word-break: break-all; line-height: 1.5;
}
.addr__url:hover { color: var(--accent); }
.addr__acts { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.addr__acts .btn { text-decoration: none; }

/* --- impersonation ------------------------------------------------------ */
/* The .impbar block above is LiveCard's, and it sets no `display` — LiveCard
   toggles the bar with an inline style. Here the bar is only ever rendered when
   it applies, so it can simply be flex. */
.impbar { display: flex; }
.impbar strong { text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-caption); }
.impbar .grow { flex: 1 1 auto; }

/* --- inline row editor (users) ------------------------------------------ */
tr.editrow > td { background: var(--surface-2); padding: var(--s-4) var(--s-5); }
tr.editrow .row { margin-bottom: var(--s-3); }
tr.editrow .toolbar { padding: 0; border: 0; margin-top: var(--s-3); }
.flagrow { display: flex; gap: var(--s-5); flex-wrap: wrap; margin: var(--s-2) 0; }
.flagrow label.inline { font-size: var(--fs-sm); color: var(--ink); }
.flagrow input:disabled + * , .flagrow label.inline:has(input:disabled) { opacity: .55; }

/* --- branding editor ---------------------------------------------------- */
.tokens {
  display: grid; gap: var(--s-3); margin: var(--s-4) 0;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.token { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.tlabel { flex: 1 1 100%; font-size: var(--fs-caption); font-weight: 700; color: var(--muted);
          text-transform: uppercase; letter-spacing: .04em; }
.token input[type=color] {
  width: 44px; height: 34px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
}
.token input:not([type=color]) { flex: 1 1 90px; font-family: var(--font-mono); font-size: var(--fs-sm); }

/* A miniature of the public form, so a colour choice is judged where it lands
   rather than as a swatch on its own. */
.fpreview { margin-top: var(--s-4); }
/* The design preview. Every colour on it is set INLINE from the tokens being
   edited — nothing here may name one, or the miniature would stop following
   the editor. Layout only. */
.fp { padding: var(--s-5); }
.fp__top { display: flex; align-items: center; gap: 10px; margin: 0 auto var(--s-4);
           max-width: 340px; }
.fp__logo { height: 34px; width: auto; }
.fp__brand { font-weight: 600; font-size: var(--fs-sm); }
.fp__card { padding: var(--s-5); max-width: 340px; margin: 0 auto; border: 1px solid transparent; }
.fp__bar { height: 6px; border-radius: 10px; overflow: hidden; }
.fp__bar i { display: block; height: 100%; width: 55%; }
.fp__t { font-weight: 700; margin: var(--s-4) 0 4px; font-size: var(--fs-md); }
.fp__m { margin: 0 0 var(--s-4); font-size: var(--fs-sm); }
.fp__rating { display: flex; gap: 6px; margin-bottom: var(--s-4); }
.fp__r { flex: 1; text-align: center; padding: 5px 0; font-size: 17px; line-height: 1.1;
         border: 1px solid transparent; border-radius: 9px; }
.fp__field { padding: 9px 11px; font-size: var(--fs-sm); border: 1px solid transparent;
             margin-bottom: var(--s-3); }
.fp__pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s-4); }
.fp__pill { padding: 5px 12px; border-radius: 20px; font-size: var(--fs-caption);
            border: 1px solid transparent; }
.fp__btn { display: inline-block; padding: 9px 18px; font-weight: 700; font-size: var(--fs-sm); }

/* --- language switcher -------------------------------------------------- */
/* EN · DE · FR — the separators are drawn by CSS so the markup stays a plain
   list of links, and the first one never gets a leading dot. */
.langsw__opt + .langsw__opt::before {
  content: "·"; color: var(--chrome-line); margin-right: 7px;
}
.langsw { gap: 0; }
.langsw__opt { padding: 3px 4px; }

/* --- condition editor --------------------------------------------------- */
/* A rule is a flat list of conditions joined by all/any (CLAUDE.md §5), so it
   reads as a stack of rows rather than one line that grows sideways. */
.rules {
  margin: var(--s-3) 0 0; padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.rules__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.rules__foot { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); flex-wrap: wrap; }
.condrow {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-bottom: 6px;
}
.condrow:last-child { margin-bottom: 0; }
.condrow select, .condrow input,
.rules__head select { width: auto; font-size: var(--fs-sm); padding: 6px 10px; }
.condrow select[multiple] { padding: 4px; min-width: 180px; }
/* The remove button is a quiet × until the row is hovered. */
.condrm { padding: 4px 9px; line-height: 1; font-size: var(--fs-base); }
.condrm[disabled] { opacity: .25; }
.rules__head select[hidden] { display: none; }

/* --- the admin page's sections ------------------------------------------ */
/* Four sections on one page (CLAUDE.md §8). The heading and the jump strip are
   what make them read as a set rather than as an accidental scroll. */
.secttl {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  margin: var(--s-8) 0 var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--line-strong); scroll-margin-top: 84px;
}
.secttl:first-child { margin-top: 0; }
#secOrg, #secUsers, #secBilling, #secAudit { scroll-margin-top: 76px; }

.secnav {
  display: flex; gap: var(--s-1); flex-wrap: wrap;
  position: sticky; top: 56px; z-index: 30;
  margin: 0 0 var(--s-5); padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.secnav a {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  padding: 7px 13px; border-radius: var(--r-md); color: var(--ink-2); text-decoration: none;
}
.secnav a:hover { background: var(--surface-2); color: var(--ink); }
.secnav a[aria-current] { background: var(--accent-tint); color: var(--ink); }

/* The org picker scopes every section, so it sits above the strip and stays. */
.activebar .panel__note { margin-left: var(--s-2); }

/* --- the design modal's preview pane ------------------------------------ */
/* LiveCard previews a card in an <iframe>; a feedback form's look is seven tokens,
   so the miniature is drawn in place from the same values the server emits. */
#designPreview { display: flex; align-items: center; justify-content: center; padding: var(--s-6); }
#designPreview .fp { width: 100%; max-width: 340px; padding: var(--s-5); border-radius: var(--r-lg); }
#designForm .token { margin-bottom: var(--s-3); }

/* Inline user editing: the row is a form, so its inputs stay compact. */
#secUsers td input[type=text],
#secUsers td input[type=password] { min-width: 150px; }
#secUsers td .checkline { margin-top: 4px; white-space: nowrap; }
#secUsers tr[data-new] > td { background: var(--surface-2); }

/* --- input types LiveCard never used ------------------------------------ */
/* The shared block above styles text, password, date and untyped inputs, and
   nothing else — LiveCard had no email or number field anywhere. This app does
   (sign-in, the allowance box, phone numbers), and they were rendering as bare
   browser defaults next to properly styled neighbours. Same declarations, so
   there is one look; kept here rather than edited into the shared block so the
   diff against LiveCard stays legible. */
input[type=email],
input[type=number],
input[type=tel],
input[type=url],
input[type=search]:not(.orgfilter),
input[type=datetime-local],
input[type=time] {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 9px 11px;
  transition: border-color .12s, box-shadow .12s;
}
td input[type=email],
td input[type=number],
td input[type=tel] { padding: 6px 9px; font-size: var(--fs-sm); min-width: 130px; }