/* The HVAC Guy — admin panel.
   Mobile first: this is used one-handed on an iPhone far more often than on a
   desk. Bottom tab bar, 44px tap targets, nothing that scrolls sideways, and a
   layout that works before any wide-screen rule applies. */

:root {
  --bg:      #f4f6fa;
  --panel:   #ffffff;
  --ink:     #16202e;
  --muted:   #5d6b80;
  --line:    #dde3ec;
  --brand:   #0f172a;
  --accent:  #1f6feb;
  --good:    #0f7b46;
  --good-bg: #e4f6ec;
  --warn:    #8a5a00;
  --warn-bg: #fdf1dc;
  --bad:     #b3261e;
  --bad-bg:  #fdeceb;
  --radius:  14px;
  --shadow:  0 1px 2px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.05);
  --tabh:    62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b1017; --panel:#141c27; --ink:#e8eef7; --muted:#9aa8bd; --line:#243244;
    --brand:#0b1017; --accent:#5aa2ff;
    --good:#5fd39b; --good-bg:#0e2b1f; --warn:#f0c274; --warn-bg:#332612;
    --bad:#ff9f97;  --bad-bg:#38191a;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

/* ---------- chrome ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: max(env(safe-area-inset-top), 10px) 16px 10px;
  background: var(--brand); color: #fff;
}
.brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.brand .mark {
  width: 10px; height: 10px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.22);
  flex: none;
}
.brand .name { font-weight: 650; letter-spacing: .2px; }
.signout {
  background: rgba(255,255,255,.12); color: #fff; border: 0;
  padding: 9px 14px; border-radius: 999px; font-size: 14px; cursor: pointer;
  min-height: 38px;
}
.signout:active { background: rgba(255,255,255,.22); }
.inline { display: inline; margin: 0; }

main { padding: 16px 16px 24px; max-width: 900px; margin: 0 auto; }
main.has-nav { padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 24px); }

h1 { font-size: 22px; margin: 4px 0 14px; letter-spacing: -.2px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .7px;
     color: var(--muted); margin: 26px 0 10px; font-weight: 650; }

footer { text-align: center; color: var(--muted); font-size: 12px;
         padding: 0 16px calc(var(--tabh) + env(safe-area-inset-bottom) + 14px); }
footer p { margin: 0; }

/* ---------- bottom tab bar ---------- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--tabh);
  text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 550;
}
.tabbar a .ico { font-size: 19px; line-height: 1; }
.tabbar a.on { color: var(--accent); }

/* ---------- banners & verdict ---------- */

.banner { padding: 12px 14px; border-radius: var(--radius); margin: 0 0 14px;
          font-size: 15px; border: 1px solid transparent; }
.banner.ok  { background: var(--good-bg); color: var(--good); border-color: currentColor; }
.banner.err { background: var(--bad-bg);  color: var(--bad);  border-color: currentColor; }

.verdict { background: var(--panel); border-radius: var(--radius); padding: 16px;
           box-shadow: var(--shadow); border-left: 5px solid var(--muted); }
.verdict.healthy  { border-left-color: var(--good); }
.verdict.degraded { border-left-color: var(--warn); }
.verdict.critical { border-left-color: var(--bad); }
.verdict-word { font-size: 19px; font-weight: 680; }
.verdict.healthy  .verdict-word { color: var(--good); }
.verdict.degraded .verdict-word { color: var(--warn); }
.verdict.critical .verdict-word { color: var(--bad); }
.problems { margin: 10px 0 0; padding-left: 20px; color: var(--ink); font-size: 14px; }
.problems li { margin: 4px 0; }

/* ---------- cards ---------- */

.cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.card { background: var(--panel); border-radius: var(--radius); padding: 13px 14px;
        box-shadow: var(--shadow); min-width: 0; }
.card .k { font-size: 12px; color: var(--muted); text-transform: uppercase;
           letter-spacing: .5px; font-weight: 600; }
.card .v { font-size: 24px; font-weight: 680; margin: 3px 0 2px; letter-spacing: -.4px;
           overflow-wrap: anywhere; }
.card .v.good { color: var(--good); }
.card .v.bad  { color: var(--bad); }
.sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; overflow-wrap: anywhere; }

/* ---------- chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
        padding: 5px 10px; border-radius: 999px; background: var(--line);
        color: var(--ink); }
.chip b { font-weight: 650; }
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad  { background: var(--bad-bg);  color: var(--bad); }

/* ---------- greeting & preview ---------- */

.greeting-card { background: var(--panel); border-radius: var(--radius); padding: 14px;
                 box-shadow: var(--shadow); margin-bottom: 14px; }
.greeting-card .k { font-size: 12px; color: var(--muted); text-transform: uppercase;
                    letter-spacing: .5px; font-weight: 600; }
.greeting { font-size: 18px; margin: 6px 0 0; line-height: 1.4; }

.preview-box { background: var(--panel); border: 1px dashed var(--accent);
               border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.preview-h { font-size: 13px; color: var(--muted); margin-bottom: 10px;
             display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag { background: var(--accent); color: #fff; font-size: 11px; font-weight: 650;
       padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
       letter-spacing: .5px; }
audio { width: 100%; display: block; }

/* ---------- forms ---------- */

.settings { margin: 0; }
.field { background: var(--panel); border-radius: var(--radius); padding: 13px 14px;
         box-shadow: var(--shadow); margin-bottom: 10px; }
.field.changed { outline: 2px solid var(--accent); outline-offset: -2px; }
.field label { display: block; font-weight: 620; font-size: 14.5px; margin-bottom: 7px; }
.pill { background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 650;
        padding: 2px 7px; border-radius: 999px; margin-left: 6px;
        text-transform: uppercase; letter-spacing: .4px; vertical-align: 1px; }

input[type=text], input[type=search], input[type=password], input[type=email],
select, textarea {
  width: 100%; font: inherit; font-size: 16px;   /* 16px stops iOS zooming on focus */
  padding: 11px 12px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink);
}
textarea { resize: vertical; min-height: 88px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.help { font-size: 12.5px; color: var(--muted); margin: 7px 0 0; }
.help.was { color: var(--accent); }

.actions { display: grid; gap: 12px; margin-top: 16px; }
.action-block { background: var(--panel); border-radius: var(--radius); padding: 14px;
                box-shadow: var(--shadow); }
.action-block.safe   { border-left: 4px solid var(--accent); }
.action-block.danger { border-left: 4px solid var(--bad); }
.action-block input[type=text] { margin: 10px 0; }

.btn { display: block; width: 100%; min-height: 48px; font: inherit; font-size: 16px;
       font-weight: 620; border: 0; border-radius: 12px; cursor: pointer;
       padding: 12px 16px; }
.btn.secondary { background: var(--accent); color: #fff; }
.btn.danger    { background: var(--bad); color: #fff; }
.btn.tiny { width: auto; min-height: 38px; padding: 8px 14px; font-size: 13.5px;
            background: var(--line); color: var(--ink); }
.btn:active { filter: brightness(.92); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500;
         font-size: 14.5px; margin-bottom: 4px; }
.check input { width: 22px; height: 22px; min-height: 22px; flex: none; margin-top: 1px; }

.searchbar { display: flex; gap: 8px; margin-bottom: 14px; }
.searchbar input { flex: 1; }
.searchbar .btn { width: auto; padding: 0 18px; }

/* ---------- diff, versions ---------- */

.diff { background: var(--panel); border-radius: var(--radius); padding: 14px;
        box-shadow: var(--shadow); margin-bottom: 14px;
        border-left: 4px solid var(--good); }
.diff-h { font-size: 12px; color: var(--muted); text-transform: uppercase;
          letter-spacing: .5px; font-weight: 600; margin-bottom: 8px; }
.diff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
            font-size: 14px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.diff-row:last-child { border-bottom: 0; }
.diff-row .from { color: var(--muted); text-decoration: line-through; }
.diff-row .to { color: var(--good); font-weight: 650; }
.arrow { color: var(--muted); }

.versions { display: grid; gap: 8px; }
.version { background: var(--panel); border-radius: var(--radius); padding: 12px 14px;
           box-shadow: var(--shadow); display: flex; align-items: center;
           justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vmeta { font-size: 13.5px; min-width: 0; flex: 1; }

.locked { background: var(--panel); border-radius: var(--radius); padding: 13px 14px;
          box-shadow: var(--shadow); border-left: 4px solid var(--warn); }

/* ---------- tables ---------- */

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
          background: var(--panel); border-radius: var(--radius);
          box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
         vertical-align: top; }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
     color: var(--muted); font-weight: 650; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }
code { font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
       background: var(--bg); padding: 2px 6px; border-radius: 6px; }

.foot-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
a { color: var(--accent); }

/* ---------- sliders ---------- */

.sliders { display: grid; gap: 16px; }
.slider label { display: flex; justify-content: space-between; align-items: baseline;
                gap: 10px; font-weight: 620; font-size: 14px; margin-bottom: 6px; }
.slider output { font-variant-numeric: tabular-nums; font-weight: 700;
                 color: var(--accent); background: var(--bg); border-radius: 8px;
                 padding: 1px 9px; font-size: 13px; min-width: 42px; text-align: center; }
input[type=range] {
  width: 100%; height: 34px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none; background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--line);
}
input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--line); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px;   /* big enough for a thumb */
  border-radius: 50%; background: var(--accent); border: 3px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--panel); cursor: pointer;
}
input[type=range]:focus { outline: none; }
input[type=range]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(31,111,235,.28); }

/* ---------- voice gallery ---------- */

.voicegrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
             margin-top: 10px; }
@media (min-width: 560px) { .voicegrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.voicebtn { width: 100%; text-align: center; }
.voicebtn.on { background: var(--accent); color: #fff; }

/* ---------- draft prompt ---------- */

.draft-box { background: var(--panel); border: 1px dashed var(--warn);
             border-radius: var(--radius); padding: 14px; margin-bottom: 16px; }
.tag.draft { background: var(--warn); }
pre.prompt {
  margin: 0; padding: 12px; background: var(--bg); border-radius: 10px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 420px; overflow-y: auto;
}

/* ---------- owner block ---------- */

.field.owner { border-left: 4px solid var(--warn); }
.field.owner label:not(.check) { margin-top: 16px; }

/* ---------- credential list ---------- */

.credlist { display: grid; gap: 8px; }
.cred { background: var(--panel); border-radius: var(--radius); padding: 12px 14px;
        box-shadow: var(--shadow); border-left: 4px solid var(--line); }
.cred.system { border-left-color: var(--good); }
.cred.optional, .cred.not_needed { border-left-color: var(--muted); }
.cred.missing { border-left-color: var(--bad); }
.cred-h { display: flex; align-items: center; justify-content: space-between;
          gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.cred-name { font-weight: 640; font-size: 15px; }

details summary { cursor: pointer; font-weight: 620; padding: 4px 0; }
details[open] summary { margin-bottom: 10px; }

/* ---------- login / MFA ----------
   login.html and mfa.html predate this stylesheet and use .auth and
   .primary.wide; those class names are kept rather than churning the auth
   templates, which are the one place a mistake locks the owner out. */

.auth {
  max-width: 400px; margin: 6vh auto 0;
  background: var(--panel); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow);
}
.auth h1 { margin-top: 0; }
.auth label { display: block; font-weight: 620; font-size: 14.5px; margin: 15px 0 7px; }
.auth .help { margin-bottom: 4px; }

button.primary, .btn.primary {
  background: var(--accent); color: #fff; border: 0; border-radius: 12px;
  font: inherit; font-size: 16px; font-weight: 620; padding: 13px 16px;
  min-height: 48px; cursor: pointer;
}
button.primary:active { filter: brightness(.92); }
.wide { display: block; width: 100%; margin-top: 20px; }

/* mfa: a 6-digit code reads better spaced out */
#code { letter-spacing: 6px; font-size: 22px; text-align: center; font-weight: 650; }

/* ---------- wider screens ---------- */

@media (min-width: 700px) {
  .cards { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .actions { grid-template-columns: 1fr 1fr; align-items: start; }
  h1 { font-size: 26px; }
}

@media (min-width: 900px) {
  .tabbar { grid-template-columns: repeat(6, minmax(0, 130px)); justify-content: center; }
}

/* Saved outbound numbers, shown the way a person reads them. The textarea below
   holds the editable copy; this row is the at-a-glance check that the list is
   the one you meant. */
.numlist { display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
           margin: 6px 0 8px; }
.numlist .num { display: inline-flex; align-items: center; font-size: 13px;
                font-variant-numeric: tabular-nums; letter-spacing: .01em;
                padding: 4px 9px; border-radius: 999px;
                background: var(--good-bg); color: var(--good); font-weight: 620; }
.numlist .sub { font-size: 12px; }
.numlist.empty { color: var(--muted); font-size: 12.5px; display: block; }
.numlist.empty b { color: var(--bad); }
/* --------------------------------------------------------------------------
   HUB AND LIVE CALLS

   Built for a phone held one-handed: the tap targets are cards, not links in
   a wall of settings, and the live state is the first thing on the page rather
   than four screens below the fold.
   -------------------------------------------------------------------------- */

.hub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
       margin: 16px 0 6px; }
.hubcard { display: flex; flex-direction: column; gap: 3px;
           min-height: 92px; padding: 14px;
           border: 1px solid var(--line); border-radius: 14px;
           background: var(--card); color: inherit; text-decoration: none;
           -webkit-tap-highlight-color: transparent; }
.hubcard:active { transform: scale(.985); background: var(--card-hi, var(--card)); }
.hubcard .hc-ico { font-size: 19px; line-height: 1; opacity: .75; }
.hubcard .hc-name { font-weight: 650; font-size: 15px; }
.hubcard .hc-sub { font-size: 12.5px; color: var(--muted); }
.hubcard.flag { border-color: var(--bad); }
.hubcard.flag .hc-sub { color: var(--bad); }

.livewrap { margin: 14px 0 4px; }
.livewrap.quiet { padding: 16px; border: 1px dashed var(--line);
                  border-radius: 14px; }
.live-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
          font-size: 14px; }
.live-h .sub { margin-left: auto; font-size: 12.5px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good);
            box-shadow: 0 0 0 0 var(--good); animation: pulse 1.8s infinite; }
.live-dot.off { background: var(--muted); animation: none; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.livecall { display: block; padding: 14px; margin-bottom: 10px;
            border: 1px solid var(--line); border-left: 4px solid var(--muted);
            border-radius: 12px; background: var(--card);
            color: inherit; text-decoration: none; }
.livecall .lc-top { display: flex; align-items: center; gap: 10px;
                    margin-bottom: 6px; }
.livecall .lc-dur { margin-left: auto; font-variant-numeric: tabular-nums;
                    font-size: 13px; color: var(--muted); }
.livecall .lc-who { font-weight: 650; font-size: 16px; }
.livecall .lc-who .sub { font-weight: 400; margin-left: 7px; font-size: 12.5px; }
.livecall .lc-obj, .livecall .lc-ref { font-size: 13px; color: var(--muted);
                                       margin-top: 4px; }

.lc-state { display: inline-flex; align-items: center; font-size: 11.5px;
            font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
            padding: 3px 9px; border-radius: 999px;
            background: var(--warn-bg); color: var(--warn); }
.lc-state.state-dialing,   .state-dialing   .lc-state { background: var(--warn-bg); color: var(--warn); }
.lc-state.state-ringing,   .state-ringing   .lc-state { background: var(--warn-bg); color: var(--warn); }
.lc-state.state-connected, .state-connected .lc-state { background: var(--good-bg); color: var(--good); }
.lc-state.state-talking,   .state-talking   .lc-state { background: var(--good-bg); color: var(--good); }
.lc-state.state-ending,    .state-ending    .lc-state { background: var(--bad-bg);  color: var(--bad); }
.livecall.state-talking   { border-left-color: var(--good); }
.livecall.state-connected { border-left-color: var(--good); }
.livecall.state-ringing   { border-left-color: var(--warn); }
.livecall.state-dialing   { border-left-color: var(--warn); }
.livecall.state-ending    { border-left-color: var(--bad); }

.statekey { display: grid; gap: 9px; font-size: 13px; color: var(--muted); }
.statekey .lc-state { margin-right: 7px; }

.tiny-input { width: auto; max-width: 190px; display: inline-block;
              margin-right: 7px; }

/* Two columns is right on a phone; three once there is room for them. */
@media (min-width: 620px) {
  .hub { grid-template-columns: repeat(3, 1fr); }
}
/* References: a preview big enough to recognise on a phone, never the original. */
.refthumb { display: block; width: 100%; max-width: 320px; height: auto;
            margin: 10px 0; border-radius: 10px; border: 1px solid var(--line); }
.refthumb.big { max-width: 100%; }
.reftext { white-space: pre-wrap; word-break: break-word; font-size: 13px;
           line-height: 1.5; padding: 12px; border-radius: 10px;
           background: var(--card); border: 1px solid var(--line);
           overflow-x: auto; }
input[type="file"] { width: 100%; padding: 12px; font-size: 15px;
                     border: 1px dashed var(--line); border-radius: 10px;
                     background: var(--card); }
input[type="search"] { width: 100%; }
/* Finished-call cards. Everything the owner asks about a call, on one card,
   with no horizontal scrolling on a phone. */
.callcards { display: grid; gap: 12px; margin: 14px 0; }
.callcard { padding: 14px; border: 1px solid var(--line); border-radius: 14px;
            background: var(--card); }
.cc-head { display: flex; align-items: flex-start; gap: 10px; }
.cc-who { font-weight: 650; font-size: 16px; flex: 1; min-width: 0;
          overflow-wrap: anywhere; }
.cc-who .sub { display: block; font-weight: 400; font-size: 12.5px; }
.cc-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px;
           font-size: 12.5px; color: var(--muted);
           font-variant-numeric: tabular-nums; }
.cc-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px;
          margin-top: 8px; font-size: 13.5px; align-items: start; }
.cc-row > span:last-child { overflow-wrap: anywhere; min-width: 0; }
.cc-label { color: var(--muted); font-size: 12px; text-transform: uppercase;
            letter-spacing: .04em; padding-top: 2px; }
/* Full width and a real height: the iOS audio control is unusable when it is
   squeezed, and a narrow one scrolls the page sideways. */
.cc-audio { width: 100%; max-width: 100%; height: 40px; display: block;
            margin-top: 2px; }
@media (min-width: 620px) { .cc-row { grid-template-columns: 110px 1fr; } }
/* Listen Live: a full-width, thumb-sized control. */
.listenbtn { display: block; width: 100%; margin-top: 10px; padding: 13px 16px;
             border: 1px solid var(--line); border-radius: 12px;
             background: var(--card); color: inherit; font: inherit;
             font-weight: 620; font-size: 15px; cursor: pointer;
             -webkit-tap-highlight-color: transparent; }
.listenbtn.on { background: var(--good-bg); color: var(--good);
                border-color: var(--good); }
.listenbtn:active { transform: scale(.99); }
/* --- Owner memory ------------------------------------------------------- */
/* Grouped by the place a preference is about, because "what does he know
   about McAlister's" is the question actually being asked. */
.chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.chiprow .chip { text-decoration: none; }
.chip.on { background: var(--accent); color: #fff; }

.memgroup { margin: 0 0 18px; }
.memgroup-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 8px; font-size: 14px; }
.memgroup-h b { font-weight: 650; }
.memgroup-h .chip { text-decoration: none; }

/* On a phone the actions must not crowd onto one unreadable line. */
@media (max-width: 480px) {
  .memgroup-h { font-size: 13px; }
  .memgroup .actions { display: flex; flex-wrap: wrap; gap: 8px; }
}