/* Membora — app layer on the Ownware UI kit (assets/ui/ownware-ui.css). Accent + app-specific rules only; generic rules come from the kit. */
:root{--accent:#7c3aed;--accent-dark:#6d28d9;--accent-soft:#f0e9ff;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#c4b5fd;--accent-dark:#ddd6fe;--accent-soft:#2a2150;--on-accent:#12081f;--accent-ink:var(--on-accent)}

/* membership statuses the kit doesn't know */
.pill.active{background:var(--okbg);color:var(--ok)}
.pill.frozen{background:var(--infobg);color:var(--info)}
.pill.expired{background:var(--badbg);color:var(--bad)}
.pill.cancelled,.pill.off{background:var(--chip);color:var(--sub)}

.grid-side{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.review-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;align-items:start}
.brandmark{max-height:26px;max-width:120px;object-fit:contain}

/* ── the front desk (the hero) ── */
.desk-search{display:flex;gap:8px;margin-bottom:16px}
.desk-search input{font-size:1.15rem;min-height:54px;padding:12px 16px;border-radius:12px}
.desk-search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.desk-search .btn{min-height:54px;padding-left:22px;padding-right:22px}

.deskcard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;align-items:center;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--faint);border-radius:var(--radius);padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.deskcard.ok{border-left-color:var(--ok)}
.deskcard.no{border-left-color:var(--bad);background:color-mix(in srgb,var(--bad) 3%,var(--card))}
.deskcard.seen{opacity:.72;border-left-color:var(--accent)}
.deskcard .nm{font-size:1.08rem;font-weight:700;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.deskcard .nm a{color:var(--ink)} .deskcard .nm a:hover{color:var(--accent);text-decoration:none}
.deskcard .meta{color:var(--sub);font-size:.9rem;margin-top:3px}
.deskcard .act{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.deskcard .act .btn.lg{min-height:46px}
.deskcard .why{grid-column:1/-1;font-size:.9rem;color:var(--bad);display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:10px}
.deskcard .why a{margin-left:auto;font-weight:600}

/* a .s subtitle nested inside a .t title is a second line, not a run-on (rail lists) */
.list .t .s{display:block;margin-top:1px}

/* ── member record ── */
dl.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;margin:0}
dl.kv dt{font-size:.82rem;font-weight:700;color:var(--sub)}
dl.kv dd{margin:0}
.member-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.member-hero .av{width:56px;height:56px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;flex:0 0 auto}
/* Quorum readout — the one number a clerk watches while taking a roll, so it is sized to be
   read across a room and colour-coded by state rather than by decoration. */
.quorum{min-width:190px;padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--chip);text-align:right}
.quorum .qv{font-size:26px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.quorum .ql{font-size:12px;color:var(--sub);margin-top:2px}
.quorum.met{border-color:var(--ok);} .quorum.met .qv{color:var(--ok)}
.quorum.short{border-color:var(--warn);} .quorum.short .qv{color:var(--warn)}
.rc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
        padding:10px 0;border-bottom:1px solid var(--line)}
.rc-row:last-child{border-bottom:0}
/* Attendance rate on a member's page: how many of the meetings held they actually came to. */
.att-bar{height:8px;border-radius:4px;background:var(--chip);overflow:hidden;margin:8px 0 4px}
.att-bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.att-bar.low i{background:var(--warn)} .att-bar.none i{background:var(--bad)}

@media(max-width:900px){
  .grid-side,.review-grid{grid-template-columns:minmax(0,1fr)}
  .deskcard{grid-template-columns:minmax(0,1fr)}
  .deskcard .act{justify-content:flex-start}
  .member-hero{grid-template-columns:auto minmax(0,1fr)}
}
@media(max-width:520px){
  .desk-search{flex-wrap:wrap} .desk-search input{min-width:100%}
  .deskcard .act .cls{flex:1}
}