/* ── Setup section: Supplies, Charting forms, Settings ─────────────────
   Section-specific rules only; everything else comes from app.css. */

/* Sub-tabs under the page header, as the prototype draws them */
.subtabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.subtabs a,.subtabs button{border-radius:8px 8px 0 0}
.subtabs .on{color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}

.btn.crit-fill{background:var(--crit);border-color:var(--crit);color:#fff}
.btn.crit-fill:hover{filter:brightness(1.08)}
.btn.crit-fill:disabled,.btn:disabled{opacity:.5;cursor:default}
.btn.left{justify-content:flex-start;width:100%}

/* A bordered row: a member, a supplier item, an order in a drawer */
.rowbox{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--rule);border-radius:8px}
.rowbox.dimmed{opacity:.45}
.rowbox .grow{flex:1;min-width:0}

/* Activity timeline: wider time column */
.tl.act .ev{grid-template-columns:150px minmax(0,1fr) auto;cursor:default}
.tl.act .ev .s{white-space:normal}
.tl.act .who{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}

/* Groups list in Settings */
.glist .gi{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--rule-2);cursor:pointer}
.glist .gi:hover{background:var(--surface-2)}
.glist .gi.on{background:var(--accent-soft)}
.glist .gi .ch{margin-left:auto;color:var(--muted)}

/* Form builder */
.fld{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--surface)}
.fld .ty{width:30px;justify-content:center;flex-shrink:0}
.fld input.lbl{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-weight:600;color:var(--ink);outline:0;padding:4px 2px}
.fld input.lbl::placeholder{color:var(--placeholder);font-weight:400}
.fld input.lbl:focus{box-shadow:inset 0 -2px 0 var(--accent)}
.fld .ord{display:inline-flex;gap:2px}
.sec-title{border:0;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink);outline:0;padding:2px 4px;border-radius:4px;min-width:120px}
.sec-title:focus{box-shadow:inset 0 -2px 0 var(--accent)}
.phone{padding:14px;background:var(--surface-2);margin:12px;border-radius:24px;border:6px solid var(--ink);max-height:560px;overflow:auto}
/* A field row in the form builder's phone preview. Named fpv, not pv: app.css
   gives .pv to the full-screen photo viewer (position:fixed;inset:0;z-index:80),
   and since that rule set a property this one never overrode, every preview row
   became a dark overlay covering the whole page — the form builder looked blank
   and could not be scrolled (2026-09-19). */
.phone .fpv{display:flex;gap:8px;align-items:center;padding:8px 10px;background:var(--surface);border-radius:8px;margin-bottom:4px;font-size:13px}
.phone .fpv .ic{color:var(--muted);font-family:var(--f-data);font-size:12px;flex-shrink:0}
.portal-pv{padding:14px}
.portal-pv .field{margin-bottom:6px}
.portal-pv .in{height:30px}
.sticky-card{align-self:start;position:sticky;top:0}
.builder{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
@media (max-width:1100px){.builder{grid-template-columns:1fr}.sticky-card{position:static}}

/* Plan & billing compare grid, usage bars */
.tier{padding:12px;border:1px solid var(--rule);border-radius:10px}
.tier.cur{border-color:var(--accent);background:var(--accent-soft)}
.usage .stock{min-width:0}

/* Email template preview */
.preview{padding:12px 14px;border:1px solid var(--rule);border-radius:8px;background:var(--surface-2);font-size:13.5px;white-space:pre-line}
textarea.in.mono{font-family:var(--f-data);font-size:13px;min-height:150px}

/* Level picker in the access table */
.lvl .seg button{min-width:52px}

/* Form builder: the rules on a field (migration 096) */
.fld .rules{margin-left:auto;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fld .req,.phone .req,.portal-pv .req{color:var(--crit);font-weight:700}
.phone .fpv .cond{margin-left:auto;flex-shrink:0;width:16px;height:16px;border-radius:50%;background:var(--surface-2);
  color:var(--muted);font-size:11px;line-height:16px;text-align:center;border:1px solid var(--rule)}

/* Shopping list — the print layout for /supplies/print.

   EVERY rule is scoped under .shop-list. setup.css is the LAST stylesheet
   index.html links, so a bare .print-page / .print-actions / .print-h here
   would quietly restyle the health summary and the charting printout too.
   The shared print classes are health.css's; this only adds what is its own. */
.shop-list{max-width:820px;margin:0 auto}

.shop-list .shop{margin-bottom:18px;break-inside:avoid}
.shop-list .shop h2{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 2px}
.shop-list .sup-contact{margin:0 0 6px}
.shop-tbl{width:100%;border-collapse:collapse}
.shop-tbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:4px 8px;border-bottom:1px solid var(--rule)}
.shop-tbl td{padding:8px;border-bottom:1px solid var(--rule-2);vertical-align:top}
.shop-tbl .r{text-align:right}
.shop-tbl .u{font-size:11px;color:var(--muted)}
.shop-tbl .buy{font-weight:700}
.shop-tbl .cat{display:block;font-size:11px;color:var(--muted)}
/* A real box to tick with a pen, not a rendered checkbox that prints grey */
.shop-tbl .tick{width:28px}
.shop-tbl .box{display:inline-block;width:15px;height:15px;border:1.5px solid var(--ink);border-radius:3px}
.shop-tbl .flag{margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.06em;padding:1px 5px;border-radius:3px;
  border:1px solid var(--crit);color:var(--crit)}
.shop-tbl .flag.low{border-color:var(--warn);color:var(--warn)}
.shop-list footer{margin-top:20px;padding-top:8px;border-top:1px solid var(--rule)}

@media print{
  .shop-list{max-width:none}
  .shop-tbl .box{border-color:#000}
  .shop-tbl .flag{border-color:#000;color:#000}
  .shop-tbl .flag.low{border-color:#666;color:#666}
}