/* Dime Time — one stylesheet, no build step.
   Sized for a phone first: this gets opened standing up more than sitting down.

   The look comes from the name. "Drop a dime" meant putting a coin in a
   payphone to make a call, so the palette is coin and payphone hardware —
   brass, graphite, warm paper — rather than the blue-grey every admin tool
   defaults to. Restrained: one accent, spent on the things you press. */

:root{
  /* paper and ink */
  --bg:#F4F3F0;          /* warm-tinted grey, not cream */
  --card:#FFFFFF;
  --quiet:#EDEBE6;
  --sunk:#E4E1DA;
  --ink:#1B1A18;
  --ink-2:#55524C;
  --ink-3:#847F76;
  --line:#DFDBD3;
  --line-soft:#EBE8E2;

  /* brass — the one accent, spent on what you press */
  --brass:#8A5A16;
  --brass-hi:#A56C1B;
  --brass-ink:#FFFFFF;
  --brass-soft:#F5EADA;
  --brass-line:#E0CBA8;

  /* states */
  --go:#1E6A46;    --go-bg:#E4F0E9;
  --warn:#8A5410;  --warn-bg:#F8EEDC;
  --stop:#9E2B2B;  --stop-bg:#F9E9E7;
  --off:#6B665E;   --off-bg:#EDEBE6;

  /* per-person and idle colours */
  --ow1:#1B6E7A;   --ow1-bg:#DFF0F2;
  --ow2:#5B4BA8;   --ow2-bg:#E9E6F7;
  --ow3:#0E6394;   --ow3-bg:#DFEDF7;
  --ow4:#8A3B70;   --ow4-bg:#F7E6F1;
  --ow5:#3F6098;   --ow5-bg:#E5EBF7;
  --idle:#8A5410;  --idle-bg:#FAF1E1;

  --r:10px;
  --r-sm:7px;
  --shadow:0 1px 2px rgba(27,26,24,.05), 0 1px 1px rgba(27,26,24,.03);
  --shadow-lift:0 2px 6px rgba(27,26,24,.07), 0 1px 2px rgba(27,26,24,.05);

  --display:'Bricolage Grotesque','Public Sans',system-ui,sans-serif;
  --sans:'Public Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14130F;
    --card:#1D1B17;
    --quiet:#252219;
    --sunk:#2C2820;
    --ink:#F0EDE6;
    --ink-2:#B8B2A6;
    --ink-3:#8A8478;
    --line:#332F26;
    --line-soft:#282419;

    --brass:#D8A657;
    --brass-hi:#E7B96F;
    --brass-ink:#14130F;
    --brass-soft:#2A2317;
    --brass-line:#463A22;

    --go:#6FCB9B;    --go-bg:#13251B;
    --warn:#DDA85C;  --warn-bg:#271F11;
    --stop:#E58A85;  --stop-bg:#2A1917;
    --off:#9A948A;   --off-bg:#252219;

  --ow1:#63C6D2; --ow1-bg:#122A2E;
    --ow2:#A99BE8; --ow2-bg:#1E1A33;
    --ow3:#6BB6E8; --ow3-bg:#122430;
    --ow4:#DE96C6; --ow4-bg:#2C1826;
    --ow5:#8FA8DE; --ow5-bg:#1A2033;
    --ow6:#C7AC7E; --ow6-bg:#26200F;
    --idle:#DCA758; --idle-bg:#271F11;

    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-lift:0 2px 8px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#14130F; --card:#1D1B17; --quiet:#252219; --sunk:#2C2820;
  --ink:#F0EDE6; --ink-2:#B8B2A6; --ink-3:#8A8478;
  --line:#332F26; --line-soft:#282419;
  --brass:#D8A657; --brass-hi:#E7B96F; --brass-ink:#14130F;
  --brass-soft:#2A2317; --brass-line:#463A22;
  --go:#6FCB9B; --go-bg:#13251B;
  --warn:#DDA85C; --warn-bg:#271F11;
  --stop:#E58A85; --stop-bg:#2A1917;
  --off:#9A948A; --off-bg:#252219;
  --ow1:#63C6D2; --ow1-bg:#122A2E;
  --ow2:#A99BE8; --ow2-bg:#1E1A33;
  --ow3:#6BB6E8; --ow3-bg:#122430;
  --ow4:#DE96C6; --ow4-bg:#2C1826;
  --ow5:#8FA8DE; --ow5-bg:#1A2033;
  --idle:#DCA758; --idle-bg:#271F11;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --shadow-lift:0 2px 8px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px}

/* ── header ────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;background:var(--card);
  border-bottom:1px solid var(--line)}
.top-in{max-width:1040px;margin:0 auto;padding:0 18px;display:flex;
  align-items:center;gap:14px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--ink);margin-right:2px}
.brand .coin{flex:0 0 auto;display:block}
.brand .word{font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:-.025em;line-height:1;white-space:nowrap}
.top nav{display:flex;gap:2px;flex-wrap:wrap;flex:1 1 auto}
.top nav a{padding:7px 12px;border-radius:99px;text-decoration:none;
  color:var(--ink-2);font-size:14px;font-weight:500;white-space:nowrap;
  transition:background .12s,color .12s}
.top nav a:hover{background:var(--quiet);color:var(--ink)}
.top nav a.on{background:var(--brass-soft);color:var(--brass);
  box-shadow:inset 0 0 0 1px var(--brass-line)}
.who{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2)}
.who form{margin:0}
.who .btn{min-height:32px;padding:4px 11px;font-size:13px}

main{max-width:1040px;margin:0 auto;padding:24px 18px 80px}

/* ── type ──────────────────────────────────────────────────────────────── */
h1{font-family:var(--display);font-size:26px;font-weight:700;
  letter-spacing:-.025em;margin:0 0 3px;line-height:1.15}
h2{font-family:var(--display);font-size:18px;font-weight:600;
  letter-spacing:-.015em;margin:30px 0 9px}
.sub{color:var(--ink-3);font-size:14px;margin:0}
.head{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.head-r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ── surfaces ──────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin:0 0 14px;box-shadow:var(--shadow)}
.card.tight{padding:0;overflow:hidden}
.rowset{display:flex;flex-direction:column}
.rowset>*{padding:13px 18px;border-bottom:1px solid var(--line-soft)}
.rowset>*:last-child{border-bottom:0}

/* ── forms ─────────────────────────────────────────────────────────────── */
label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
input[type=text],input[type=email],input[type=password],input[type=file],
select,textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 12px;min-height:42px;transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.75}
textarea{min-height:130px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px var(--brass-soft)}
.field{margin:0 0 16px}
.field:last-child{margin-bottom:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.hint{font-size:12.5px;color:var(--ink-3);margin:6px 0 0;line-height:1.45}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:inherit;font-size:14px;font-weight:600;padding:10px 16px;
  min-height:42px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow);transition:background .12s,border-color .12s,
  transform .06s,box-shadow .12s}
.btn:hover{background:var(--quiet);box-shadow:var(--shadow-lift)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brass);border-color:var(--brass);
  color:var(--brass-ink)}
.btn.primary:hover{background:var(--brass-hi);border-color:var(--brass-hi)}
.btn.danger{color:var(--stop)}
.btn.danger:hover{background:var(--stop-bg)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.btn.wide{width:100%}
.btnrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ── tables ────────────────────────────────────────────────────────────── */
.tw{overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);margin:0 0 14px;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);padding:11px 16px;
  border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card)}
td{padding:11px 16px;border-bottom:1px solid var(--line-soft);
  vertical-align:middle;color:var(--ink-2)}
tr:last-child td{border-bottom:0}
td.mono,th.mono{font-family:var(--mono);font-size:13px;
  font-variant-numeric:tabular-nums}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--quiet)}
td a{font-weight:600;text-decoration:none;color:var(--ink)}
td a:hover{color:var(--brass)}

/* money and other right-aligned numbers. Tabular figures so a column of
   amounts lines up on the decimal point instead of drifting. */
th.r,td.r{text-align:right}
td.owed{color:var(--ink);font-weight:600}
tfoot td{border-top:1px solid var(--line);border-bottom:0;
  background:var(--quiet);font-weight:600;color:var(--ink);padding:10px 16px}
tfoot .tfoot-l{font-weight:500;color:var(--ink-3);font-size:13px}

/* a $ that sits inside the field, so the number starts where you expect */
.prefixed{position:relative;display:block}
.prefixed .prefix{position:absolute;left:12px;top:50%;
  transform:translateY(-50%);color:var(--ink-3);font-size:15px;
  pointer-events:none}
.prefixed input{padding-left:26px;font-variant-numeric:tabular-nums}

/* a checkbox that is comfortable to hit on a phone */
label.check{display:flex;align-items:center;gap:10px;text-transform:none;
  letter-spacing:0;font-size:14.5px;font-weight:500;color:var(--ink);
  margin:0;cursor:pointer;padding:9px 0}
label.check input[type=checkbox]{width:19px;height:19px;min-height:0;
  margin:0;flex:0 0 auto;accent-color:var(--brass);cursor:pointer}

/* the row action. One right-aligned cell carries both the status and the
   edit control, so neither takes a column of its own. The pencil stays
   faintly visible rather than appearing only on hover — on a phone there is
   no hover, and an action nobody can see is an action nobody uses. */
th.act,td.act{text-align:right;width:1%;white-space:nowrap}
td.act{padding-right:14px}
/* No circular background and no fill: the icon alone, faint until the row is
   hovered. The hit area stays 30px square via padding so it is still easy to
   tap on a phone, but nothing is drawn there. */
.edit{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;vertical-align:middle;color:var(--ink-3);
  opacity:.38;transition:opacity .14s,color .14s}
.edit svg{display:block}
tbody tr:hover .edit{opacity:.8}
.edit:hover{opacity:1;color:var(--brass)}
.edit:focus-visible{opacity:1;color:var(--brass);outline-offset:0}

/* initials, so a list of names scans as people rather than rows */
.who-cell{display:flex;align-items:center;gap:11px;min-width:0}
.avatar{flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  font-weight:700;letter-spacing:.02em;background:var(--sunk);color:var(--ink-2);
  font-family:var(--sans)}
.avatar.b{background:var(--brass-soft);color:var(--brass);
  box-shadow:inset 0 0 0 1px var(--brass-line)}
.who-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.handle{font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.01em}

/* ── bits ──────────────────────────────────────────────────────────────── */
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:99px;
  background:var(--off-bg);color:var(--off);white-space:nowrap}
.pill.go{background:var(--go-bg);color:var(--go)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.stop{background:var(--stop-bg);color:var(--stop)}
.pill.brass{background:var(--brass-soft);color:var(--brass)}

/* Six owner colours, none of them green, amber or red — those three are
   spoken for by Active, Inactive and Opted out, and a pill that borrows a
   status colour reads as a status. */
.pill.ow1{background:var(--ow1-bg);color:var(--ow1)}
.pill.ow2{background:var(--ow2-bg);color:var(--ow2)}
.pill.ow3{background:var(--ow3-bg);color:var(--ow3)}
.pill.ow4{background:var(--ow4-bg);color:var(--ow4)}
.pill.ow5{background:var(--ow5-bg);color:var(--ow5)}
/* Inactive is its own colour rather than the default grey, which read as
   "nothing here" next to a green Active. */
.pill.idle{background:var(--idle-bg);color:var(--idle)}
/* "No account" states a fact rather than warning about one, so it sits
   quiet next to the coloured status and owner pills. */
.pill.noacct{background:var(--off-bg);color:var(--off)}
.held{color:var(--brass);font-weight:600}

/* Owner and Status pills share one width per column, so each column reads as
   a single stack rather than a ragged edge. Sized to the longest label in
   use ("Opted out"), which means a longer label later needs this revisited —
   the alternative, letting each pill size itself, is what made them uneven in
   the first place. The name is truncated rather than allowed to break the
   width, since a long name would otherwise reintroduce the raggedness. */
td.st .pill{min-width:78px;max-width:110px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  /* An inline-block with overflow other than visible takes its baseline from
     the bottom margin edge instead of its text, which lifted these a couple
     of pixels off the row. Align to the middle instead of the baseline. */
  vertical-align:middle}

.msg{border-left:3px solid var(--brass);background:var(--brass-soft);
  padding:12px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0 0 16px;
  font-size:14px;line-height:1.5;color:var(--ink-2)}
.msg.bad{border-left-color:var(--stop);background:var(--stop-bg);color:var(--stop)}
.msg.good{border-left-color:var(--go);background:var(--go-bg);color:var(--go)}
.msg.warn{border-left-color:var(--warn);background:var(--warn-bg);color:var(--warn)}
.msg code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;
  font-family:var(--mono);font-size:.88em}

.empty{text-align:center;padding:52px 24px;color:var(--ink-3)}
.empty .coin-lg{opacity:.4;margin:0 auto 16px;display:block}
.empty p{margin:0 0 16px;font-size:15px}

.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 16px}
.toolbar input[type=text]{flex:1 1 160px;min-width:120px}
.toolbar select{flex:0 0 auto;width:auto;min-width:150px}
.toolbar.tight{margin:0 0 10px}
/* Narrower than the old 150px so five of them and a search box sit on one
   row instead of wrapping onto a second and third. */
.toolbar select{min-width:112px}
/* The named individuals on Compose, when a send is by hand rather than by
   filter. */
.picked{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
td.act input[type=checkbox]{width:16px;height:16px;cursor:pointer;margin:0}

/* the counters — a ledger, not stat tiles */
.ledger{display:flex;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--card);margin:0 0 16px;
  box-shadow:var(--shadow)}
.ledger>div{flex:1 1 116px;padding:14px 17px;
  border-right:1px solid var(--line-soft)}
.ledger>div:last-child{border-right:0}
.ledger .n{font-family:var(--display);font-size:24px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.02em}
.ledger .l{font-size:11.5px;color:var(--ink-3);margin-top:4px;
  letter-spacing:.02em}

.bubble{background:var(--sunk);border-radius:14px;border-bottom-left-radius:5px;
  padding:11px 15px;font-size:14.5px;white-space:pre-wrap;max-width:58ch;
  margin:0 0 7px;line-height:1.5;color:var(--ink)}
.stamp{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}

.split{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:13.5px;
  color:var(--ink-2);align-items:baseline}
.split b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* ── login ─────────────────────────────────────────────────────────────── */
.login-wrap{max-width:372px;margin:11vh auto 0;padding:0 20px}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:12px;
  margin:0 0 22px}
.login-brand .word{font-family:var(--display);font-weight:700;font-size:30px;
  letter-spacing:-.03em;line-height:1}
.login-wrap .sub{text-align:center;margin:0 0 20px}
.login-foot{text-align:center;margin-top:18px;font-size:12.5px;
  color:var(--ink-3)}

@media(max-width:640px){
  main{padding:18px 14px 64px}
  .top-in{padding:0 14px;gap:10px}
  h1{font-size:22px}
  .who span{display:none}
}

/* ── a conversation ───────────────────────────────────────────────────────
   Their messages and yours in one column, sides swapped, so an exchange
   reads as an exchange. The Replies screen used to list inbound texts on
   their own, which meant reading "sounds good" with no way to see what was
   good. */
.thread{display:flex;flex-direction:column;gap:12px;margin:0 0 18px}
.turn{display:flex;flex-direction:column;max-width:78%}
.turn.in{align-self:flex-start}
.turn.out{align-self:flex-end;align-items:flex-end}
.bubble.out{background:var(--brass);color:#fff;border-color:transparent}
.turn .stamp{margin:3px 2px 0;font-size:12px}
.convo{gap:12px;align-items:center}
.convo .last{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* The "new replies" notice, which appears without reloading the page —
   a timed reload would discard a reply being typed. */
#newmsg{position:fixed;right:18px;bottom:18px;z-index:50;
  background:var(--brass);border-radius:var(--r);box-shadow:0 6px 20px
  rgba(0,0,0,.22);padding:11px 15px}
#newmsg a{color:#fff;font-weight:600;text-decoration:none}


/* ── one select component, everywhere ─────────────────────────────────────
   The browser's own select control is drawn by the operating system, so an
   open menu looks unrelated to the field it came from and no two platforms
   agree on the height. Every select on the site is now the same object with
   the same chevron, which is also why the Filters BUTTON has no chevron at
   all — a caret on a thing that is not a select is the confusing part. */
select{appearance:none;-webkit-appearance:none;
  background-color:var(--card);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23968d80' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:34px}

/* ── the filter bar ───────────────────────────────────────────────────────
   Search takes the row. Status is the one quick filter worth a permanent
   control. Everything else is behind Filters. */
.fbar{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px}
.fbar input[type=text]{flex:1 1 auto;min-width:0}
.fbar select{flex:0 0 auto;width:auto;min-width:132px}

/* The Filters button. Same height, radius, border weight, font size and
   horizontal padding as the Status field beside it — they used to differ,
   which is most of why the row looked unconsidered. */
.fpop{position:relative;flex:0 0 auto}
.fpop>summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:8px;min-height:42px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font-size:15px;font-weight:600;color:var(--ink);
  white-space:nowrap;transition:border-color .12s}
.fpop>summary::-webkit-details-marker{display:none}
.fpop>summary::marker{content:""}
.fpop>summary:hover{border-color:var(--ink-3)}
.fpop[open]>summary{border-color:var(--brass)}
.fpop>summary .ic{width:15px;height:15px;color:var(--ink-3);flex:0 0 auto}

/* Anchored to the button's right edge, fixed width, floating over the table
   rather than pushing it down. */
.fpop-body{position:absolute;z-index:60;top:calc(100% + 8px);right:0;
  width:min(520px,calc(100vw - 32px));background:var(--card);
  border:1px solid var(--line);border-radius:11px;
  box-shadow:0 14px 40px rgba(38,30,18,.15),0 2px 6px rgba(38,30,18,.06);
  padding:18px}
.fpop-head{display:flex;align-items:center;justify-content:space-between;
  margin:0 0 16px}
.fpop-head span{font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.fpop-x{border:0;background:none;cursor:pointer;font-size:20px;line-height:1;
  color:var(--ink-3);padding:0 2px;min-height:0;width:auto}
.fpop-x:hover{color:var(--ink)}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.fcol.fspan{grid-column:1/-1;margin-top:2px}
.fpair{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
/* Section label, then a 10px gap; inside a group, label then 6px then the
   field, then 16px before the next label. */
.flabel{margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
.ffield{display:grid;gap:6px;margin:0 0 16px;font-size:13px;
  color:var(--ink-2)}
.ffield:last-child{margin-bottom:0}
.fpop-foot{display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.quiet{font-size:13px;color:var(--ink-2);text-decoration:none}
.quiet:hover{color:var(--ink);text-decoration:underline}

/* Chips: only filters that constrain something, each removable on its own,
   Clear all as a quiet text action at the end rather than a button. */
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.chip{display:inline-flex;align-items:center;gap:8px;
  padding:5px 9px 5px 12px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);font-size:13px;color:var(--ink)}
.chip a{color:var(--ink-3);text-decoration:none;font-size:16px;line-height:1;
  padding:0 1px}
.chip a:hover{color:var(--ink)}
.chips .clearall{font-size:13px;color:var(--ink-2);margin-left:2px}

/* Result count and select-all, then bulk actions. Kept visually quieter
   than the filter row so the two do not compete. */
.listhead{margin:0 0 9px;color:var(--ink-2);font-size:13px}
.listhead .check{display:inline-flex;align-items:center;gap:10px;
  cursor:pointer}
.bulkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin:0 0 14px;padding:9px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:transparent}
.bulkbar select{width:auto;min-width:158px}
.bulkbar #bulklabel{min-width:112px;font-weight:600;color:var(--ink-2)}
.bulkbar button[disabled],.bulkbar select[disabled]{opacity:.45;
  cursor:not-allowed}
.bulkbar .check{display:inline-flex;align-items:center;gap:8px;
  margin-left:auto;font-size:13px;cursor:pointer}

/* Public footer. Signed-out pages only — the app's own screens have the
   header nav instead, and repeating the links under them would just be
   furniture. Matches main's 1040px so it lines up with the cards above. */
.foot{border-top:1px solid var(--line);background:var(--quiet);
  margin-top:8px}
.foot-in{max-width:1040px;margin:0 auto;padding:26px 18px 34px;
  display:flex;flex-direction:column;gap:8px}
.foot-id{display:flex;align-items:center;gap:9px}
.foot-id .word{font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:700;font-size:17px;letter-spacing:-.01em}
.foot p{margin:0;font-size:13.5px;line-height:1.55;max-width:62ch}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px}
.foot-nav a{font-size:13.5px;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px}
.foot-nav a:hover{color:var(--brass);border-bottom-color:var(--brass)}