/* ================= SET UP (setup.css, v061) =================
   The fifth room, Hunch only, in its own file since v061 — Michael: "it's
   two different sites in parallel. I worry about the big one." It borrows
   the site whole — the stepper, the lozenges, FIX IT's grid and padlock and
   wrap button, the deets card, the chat — all of which stay in robot.css
   because the client's rooms wear them too. Only what the borrowed
   furniture doesn't carry lives here: the room's ground, the home page,
   the rows a brand's three sections are made of, and the chat's own
   buttons. Loads after robot.css, so a rule here wins a tie. */
#setup{display:none;background:var(--red);min-height:calc(100vh - 52px);padding:34px 0 70px}
#setup.on{display:block}
.setup-wrap{max-width:1060px}
#setup .rail{border-bottom-color:rgba(255,255,255,.25);margin:0 0 30px}
#setup .step{color:rgba(255,255,255,.55)}
#setup .step:hover{color:#fff}
#setup .step.on{color:#fff;border-bottom-color:#fff}
#setup .step.done,#setup .step i{color:#fff}
#setup .feed-hed{color:#fff}
.setup-tagline{color:rgba(255,255,255,.82);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;font-weight:600;margin:4px 0 26px}

/* ---- THE TOP (v161) ----
   The title and three tabs, on every SET UP page. At home the title says
   SET UP; inside a folder it's the crumb — BRANDS › ONE NZ — and the first
   word is the way back. The tabs are FEED IT's stepper on red, but their
   own class: chrome.js walks every `.step` on the page. */
.setup-crumb{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px}
.setup-crumb a{color:rgba(255,255,255,.55);cursor:pointer}
.setup-crumb a:hover{color:#fff}
.setup-crumb b{font-weight:400;color:rgba(255,255,255,.4)}
.setup-crumb i{font-style:normal;color:rgba(255,255,255,.55)}
.setup-tabs{display:flex;margin:22px 0 28px;border-bottom:1px solid rgba(255,255,255,.25)}
.setup-tab{flex:1;padding:0 0 10px;font-size:10px;letter-spacing:2px;font-weight:700;text-transform:uppercase;
  color:rgba(255,255,255,.55);border:none;background:none;border-bottom:2px solid transparent;
  margin-bottom:-1px;text-align:left;cursor:pointer;font-family:inherit}
.setup-tab:hover{color:#fff}
.setup-tab.on{color:#fff;border-bottom-color:#fff}
.setup-tab i{font-style:normal;margin-right:6px;opacity:.7}

/* ---- the home page ----
   One tab at a time. Each opens with its NEW bar — a tap browses, a zip
   can be dropped on it. One filled shape per row, and it's the only thing
   you can press: the list navigates, the room acts. State reads as a word
   at the front so the column scans. */
.home-new{width:100%;background:transparent;border:1.5px dashed rgba(255,255,255,.55);color:#fff;
  border-radius:var(--r-card);padding:14px 18px;cursor:pointer;display:flex;align-items:center;gap:12px;
  font-family:inherit;margin:0 0 22px;text-align:left}
.home-new:hover,.home-new.over{background:rgba(255,255,255,.1);border-color:#fff}
.home-new.busy{opacity:.55;pointer-events:none}
.home-new b{font-family:var(--display);font-size:20px;letter-spacing:1.2px;font-weight:400}
.home-new span{margin-left:auto;font-size:12px;color:rgba(255,255,255,.75)}
.home-new u{color:#fff}

/* CONTAINERS, grouped under their brand */
.home-group{margin:0 0 24px}
.home-group-h{font-size:10px;letter-spacing:2px;font-weight:700;color:rgba(255,255,255,.8);margin:0 0 10px;
  display:flex;align-items:center;gap:10px}
.home-group-h::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.2)}
.home-list{display:flex;flex-direction:column;gap:9px}
.home-row{background:#fff;border-radius:var(--r-card);padding:14px 16px;display:flex;align-items:center;
  gap:14px;box-shadow:0 4px 14px rgba(0,0,0,.11)}
.home-row.landing{animation:homeland .45s ease-out}
@keyframes homeland{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.home-state{flex:0 0 62px;font-size:9.5px;font-weight:700;letter-spacing:1.6px;color:var(--mid)}
.home-state.live{color:var(--ink)}
.home-state.draft{color:var(--red)}
.home-name{font-weight:600;font-size:14px;min-width:0;flex:1 1 auto}
.home-name span{color:var(--mid);font-weight:400;font-size:12.5px}


/* the live switch (v135): a track and a knob, the word beside it */
.home-live{display:inline-flex;align-items:center;gap:8px;background:none;border:none;padding:4px 2px;
  cursor:pointer;font-family:inherit;flex:0 0 auto;color:var(--mid)}
.home-live i{position:relative;width:30px;height:17px;border-radius:var(--r-input);background:#D8D4CE;transition:background .2s}
.home-live i::after{content:'';position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s}
.home-live b{font-size:9.5px;font-weight:700;letter-spacing:1.6px;min-width:52px;text-align:left}
.home-live.on{color:var(--ink)}
.home-live.on i{background:var(--ink)}
.home-live.on i::after{transform:translateX(13px)}
.home-live.armed{color:var(--red)}
.home-live.armed i{background:var(--red)}
.home-live:disabled{opacity:.5;cursor:default}
.home-live.demo{cursor:default;font-size:9.5px;font-weight:700;letter-spacing:1.6px;padding:4px 10px;
  border:1.5px solid #D8D4CE;border-radius:var(--pill)}
.home-empty{background:rgba(255,255,255,.13);border-radius:var(--r-card);padding:15px 17px;
  color:rgba(255,255,255,.85);font-size:13px}

/* ---- the folder ---- */
/* the stops. The title and the way out are THE TOP's now (v161). */
.setup-btns{display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;margin:0 0 26px}
.setup-rail{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* A STOP. White tile; BLACK where you're standing; RED content for one you
   haven't been to — which leaves the padlock as the only thing that knows
   locked from not-yet, and that is the whole reason it is there.

   Its own class, not .step: chrome.js walks every `.step` on the page for the
   main rail and reads `+dataset.s` off it, which was quietly picking up this
   room's stops and getting NaN. */
.setup-step{display:inline-flex;align-items:center;gap:8px;border-radius:var(--pill);
  font-family:'Oswald',var(--display),sans-serif;font-weight:500;font-size:13px;
  letter-spacing:1.5px;text-transform:uppercase;padding:7px 15px 6px;white-space:nowrap;
  background:#fff;color:var(--red);border:none;cursor:pointer;
  transition:background .15s,color .15s,transform .12s}
.setup-step:hover{transform:translateY(-1px)}
.setup-step svg{width:14px;height:14px;flex:0 0 14px}
.setup-step.done{color:var(--ink)}
.setup-step.on{background:var(--ink);color:#fff}


/* the status, beside the stop it describes. A SECONDARY LABEL: white pill,
   red body caps — the DRAFT look, worn by every state. It used to borrow
   the secondary BUTTON's white outline for LIVE and TESTING, which made a
   label look like something to press. */
.setup-status{border-radius:var(--pill);font-size:9.5px;font-weight:700;letter-spacing:1.8px;
  padding:5px 12px 4px;background:#fff;color:var(--red);white-space:nowrap}
.setup-status:empty{display:none}

/* THE TWO COLUMNS LINE UP, and both halves of that are arithmetic.

   ACROSS: the mock is drawn small and zoomed, so its width has to be the
   column divided by the zoom or it can't fill it. One number, used twice,
   named once — at 250px and zoom 2.2 it came out 550 wide in a 600 column
   and `margin:auto` centred the remainder, which is why the artefact sat
   25px right of its own lozenge while the other two stops sat flush.

   DOWN: the rail is a flex column with a gap, and the lozenge row carries a
   bottom margin as well — so the right-hand card started 13px lower than
   the left-hand one. The margin goes, the gap matches the left column's,
   and the two tops agree. */
/* THE COLUMN IS THE ARTEFACT'S OWN WIDTH.

   It used to be 600px, flat, because both containers in the repo were 600
   emails. Hunchmail is 660 — correctly; that is the template — and a 660
   artefact in a 600 frame is clipped, which makes an exact artefact look
   wrong and sends you hunting for a fault that isn't there.

   FIX IT has never had this problem: it measures the thing it is showing
   and sizes its column to it. This is that, with its own variable — a room
   may use the chrome, it may not reach into another room's. */
.setup-grid{grid-template-columns:var(--su-w,600px) 380px;gap:80px;
  max-width:calc(var(--su-w,600px) + 460px);--mockzoom:2.2}
.setup-grid .fix-rail{gap:14px}
.setup-grid .fix-rail .fix-lozrow{margin-bottom:0}
.setup-grid .fix-artwrap{width:var(--su-w,600px)}
.setup-grid .fix-gutter{right:-64px}
.setup-pane{display:none}
.setup-pane.on{display:block}
.setup-hint{color:rgba(255,255,255,.75);font-size:11.5px;margin-top:14px;max-width:600px}
.setup-hint:empty{margin:0}
.setup-lock{top:14px}
.setup-hold{width:calc(var(--su-w,600px) / var(--mockzoom));margin:0;zoom:var(--mockzoom)}
.setup-card{background:#fff;border-radius:var(--r-card);padding:22px;box-shadow:0 4px 18px rgba(0,0,0,.14)}
.setup-art{width:100%;height:880px;border:0;border-radius:var(--r-input);display:block;background:#e9e6e0}

/* the rows a section is made of: label left, the thing itself right */
.setup-brow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;
  padding:14px 0;border-top:1px solid var(--border);font-size:13.5px;line-height:1.55}
.setup-brow:first-child{border-top:none;padding-top:0}
.setup-blab{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  color:var(--mid);padding-top:5px}
.setup-bval.empty{color:var(--red)}
.setup-sub{color:var(--mid);font-size:11.5px;margin-top:7px;line-height:1.5}
.setup-ro{white-space:pre-wrap}

/* a value you can change is a box you type in and tab out of */
.setup-edit{width:100%;border:1px solid var(--border);border-radius:var(--r-input);padding:9px 11px;
  font-family:inherit;font-size:13px;line-height:1.55;resize:vertical;background:#fff;color:var(--ink);
  outline:none;transition:border-color .15s,background .15s}
.setup-edit:focus{border-color:var(--red)}
.setup-edit.saving{background:var(--paper)}
.setup-edit.bad{border-color:var(--red);background:rgba(237,28,36,.06)}

.setup-swatches{display:flex;flex-wrap:wrap;gap:8px}
.setup-sw{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);
  border-radius:var(--pill);padding:4px 10px 4px 4px;font-size:12px;color:var(--mid)}
.setup-sw i{width:20px;height:20px;border-radius:50%;border:1px solid var(--border);display:block}
.setup-swname{white-space:nowrap}
.setup-hex{width:72px;border:none;border-bottom:1px solid var(--border);background:none;
  font-family:inherit;font-size:12px;font-weight:600;color:var(--ink);outline:none;padding:1px 0}
.setup-hex:focus{border-bottom-color:var(--red)}

/* ---------------- THE SHELVES (v046) ----------------
   One white card on the red, above everything, because it answers the
   question you walked in with: can this ship? Three rows, and the order is
   descending agency — done, yours to do, someone else's to send.

   The colours are the app's own and there are only two of them. Ink is
   settled. Red is the hole, and red is the ONLY red on the card — same
   rule as LOCK THE DEETS, where the TBC carries it. The waiting room sits
   in outline: it isn't wrong, it just isn't here yet. N/A goes faint but
   stays visible, because "not needed" is a thing you checked. */
.setup-shelves{background:#fff;border-radius:var(--r-card);padding:4px 20px;
  margin:0 0 14px;box-shadow:0 4px 18px rgba(0,0,0,.14)}
/* in the rail column the label sits over its pills, not beside them —
   380px has no room for a gutter, and the count carries the row when the
   row is empty */
.setup-shelf{padding:14px 0;border-top:1px solid var(--border)}
.setup-shelf:first-child{border-top:none}
.setup-shelf.none{padding:11px 0}
.setup-shlab{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:600;
  color:var(--mid);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.setup-shelf.none .setup-shlab{margin-bottom:0;opacity:.55}
.setup-shlab i{font-style:normal;font-weight:600;font-size:10px;color:var(--mid);
  border:1px solid var(--border);border-radius:var(--pill);padding:1px 7px}
.setup-shelf.sh-gaps .setup-shlab{color:var(--red)}
.setup-shelf.sh-gaps .setup-shlab i{color:var(--red);border-color:var(--red)}
.setup-pills{display:flex;flex-wrap:wrap;gap:6px}
.setup-pill{display:inline-flex;align-items:center;border:1px solid var(--border);
  border-radius:var(--pill);background:none;font-family:inherit;font-size:12px;
  color:var(--mid);padding:4px 11px;cursor:pointer;text-align:left;
  transition:border-color .15s,color .15s,transform .12s}
.setup-pill:hover{transform:translateY(-1px);border-color:var(--ink);color:var(--ink)}
.setup-pill.have{border-color:var(--ink);color:var(--ink)}
.setup-pill.gap{border-color:var(--red);color:var(--red);font-weight:500}
.setup-pill.gap:hover{border-color:var(--red);color:var(--red)}
.setup-pill.na{opacity:.42}
/* an Open line is prose, so it leans italic and never sets the row's width */
.setup-pill.long{font-style:italic;max-width:100%}

/* Not a box. A line that isn't there until there's something to say — a
   refused lock, a name already taken — and takes no room when there isn't.
   The record of what changed lives in the folder's own changelog. */
.setup-note{margin:0 0 14px}
.setup-note:empty{margin:0}
.setup-note .line{margin:0;text-align:left;font-size:13px}

/* the beat after a lock: the button holds its own word and refuses taps */
.fix-wrap.held{pointer-events:none}

/* a new colour: name, hex, go */
.setup-newcol{display:flex;gap:6px;align-items:center;margin-top:10px}
.setup-colname,.setup-colhex{border:1px solid var(--border);border-radius:var(--pill);
  font-family:inherit;font-size:12px;padding:5px 11px;color:var(--ink);background:#fff}
.setup-colname{width:120px}
.setup-colhex{width:92px}
.setup-colname:focus,.setup-colhex:focus{outline:none;border-color:var(--red)}
.setup-colname.bad,.setup-colhex.bad{border-color:var(--red);color:var(--red)}
.setup-colgo{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:1px;
  border:1px solid var(--ink);border-radius:var(--pill);background:none;color:var(--ink);
  padding:5px 13px;cursor:pointer}
.setup-colgo:hover{background:var(--ink);color:#fff}
/* the refusal borrows LOCK THE DEETS' flash: the hole says so */
.setup-pill.flash{animation:deets-flash .85s ease 2}
@media(max-width:880px){.setup-shelf{grid-template-columns:1fr;gap:8px}
  .setup-shlab{padding-top:0}}

/* NAMING AN UPLOAD — one question, one tap, no form */
.setup-name{font-size:13.5px;margin-bottom:9px}
.setup-namebtns{display:flex;flex-wrap:wrap;gap:7px}
.setup-namego{font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.4px;
  border:1px solid var(--red);border-radius:var(--pill);background:none;color:var(--red);
  padding:5px 14px;cursor:pointer;transition:background .15s,color .15s}
.setup-namego:hover{background:var(--red);color:#fff}
.setup-nameskip{font-family:inherit;font-size:12px;border:none;background:none;
  color:var(--mid);padding:5px 6px;cursor:pointer;text-decoration:underline}
.setup-nameskip:hover{color:var(--ink)}

.setup-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.setup-file{display:inline-flex;align-items:center;border:1px solid var(--border);
  border-radius:var(--pill);font-size:12px;color:var(--mid);overflow:hidden}
.setup-file.named{border-color:var(--ink);color:var(--ink)}
.setup-file.gone{border-color:var(--red);color:var(--red);padding:4px 11px}
.setup-fname{background:none;border:none;font-family:inherit;font-size:12px;color:inherit;
  padding:4px 4px 4px 11px;cursor:pointer}
.setup-fname:hover{text-decoration:underline}
.setup-fx{background:none;border:none;color:var(--mid);cursor:pointer;font-size:14px;
  line-height:1;padding:4px 9px 5px 4px}
.setup-fx:hover{color:var(--red)}



.setup-probs{margin:4px 0 0 16px;padding:0}
.setup-probs li{margin-bottom:5px}
/* the waiting room and the strays: things to know, not things to fix, so
   they sit back from the problems above them rather than competing */
.setup-probs.open li{color:var(--mid)}
.setup-probs.open b{color:var(--ink);font-weight:600}

/* ---------------- THE CHAT (v047) ----------------
   The container room's half of SET UP. A brand is fields; a container is a
   picture, and you talk to a picture. */
/* SEND is red — it's the one thing in the card that does something — and
   undo sits beside it as an icon, not as a line of underlined text under
   the box. There are no small underlined calls to action in this room. */
.setup-sendrow{position:absolute;right:0;bottom:0;display:flex;gap:6px;align-items:center}




.setup-undo:disabled{opacity:.3;cursor:default;pointer-events:none}
.setup-undo svg{width:14px;height:14px}

/* the ✕ on a note in the list — how one said last week stops blocking today */
.setup-probs.list li{position:relative;padding-right:22px}


/* THE WAY OUT. The wrap button wears ink (as PUSH does when it's ready)
   and a tray, and it's the same button — one that knows where you're at. */



/* THE PROPOSAL. Before and after, both read off the disk. Nothing is
   written until the yes, so this card is the whole of the confirm step. */
.setup-prop{border:1px solid var(--border);border-radius:var(--r-card);margin:2px 0 4px;overflow:hidden}
/* a proposal you are already looking at. The red edge says the artefact on
   the left is showing this and nothing is on disk yet. */
.setup-prop.live{border-color:var(--red)}
.setup-prop.live .setup-propfile{color:var(--red);border-bottom-color:var(--red)}
.setup-prop.live.spent{border-color:var(--border)}
.setup-prop.live.spent .setup-propfile{color:var(--mid);border-bottom-color:var(--border)}
.setup-prop.spent{opacity:.4}
.setup-prop.spent .setup-propgo{display:none}
.setup-propfile{font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:600;
  color:var(--mid);padding:9px 12px;border-bottom:1px solid var(--border);background:var(--paper)}
.setup-propfile span{letter-spacing:.4px;text-transform:none;font-weight:400;opacity:.85}
.setup-diff{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  line-height:1.55;padding:8px 0;max-height:280px;overflow:auto}
.setup-dl{padding:1px 12px;white-space:pre-wrap;word-break:break-word}
.setup-dl.same{color:var(--mid)}
/* red for what goes, ink for what lands. No green anywhere in this app. */
.setup-dl.out{background:var(--delta);color:var(--red);text-decoration:line-through;
  text-decoration-color:rgba(237,28,36,.45)}
.setup-dl.in{background:rgba(26,25,23,.05);color:var(--ink);font-weight:500}
/* the honest line: real in the file, same on screen */
.setup-propnote{padding:9px 12px;border-top:1px solid var(--border);font-size:12px;
  line-height:1.45;color:var(--red)}
.setup-prop.quiet.live{border-color:var(--border)}
.setup-prop.quiet.live .setup-propfile{color:var(--mid);border-bottom-color:var(--border)}
.setup-propgo{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
.setup-propgo.park{padding:10px 0 0;border-top:none}
.setup-yes,.setup-no{font-family:inherit;font-size:11px;font-weight:600;letter-spacing:1.4px;
  border-radius:var(--pill);padding:6px 15px;cursor:pointer;border:1px solid var(--red)}
/* on white: the action is white on red, the secondary is red on a red
   outline — the same pair FILE IT's go buttons wear */
.setup-yes{background:var(--red);color:var(--white);border-color:var(--red)}
.setup-yes:hover{background:var(--red-dark);border-color:var(--red-dark)}
.setup-no{background:none;color:var(--red);border-color:var(--red)}
.setup-no:hover{background:var(--red);color:var(--white)}

/* what a pill points at, full size */
.menu-card.wide{max-width:640px}
.setup-spec{font-size:30px;line-height:1.35;letter-spacing:.5px}
.setup-shot{background:var(--paper);border-radius:var(--r-input);padding:24px;text-align:center}
.setup-shot img{max-width:100%;max-height:360px}
.setup-voice{white-space:pre-wrap;background:var(--paper);border-radius:var(--r-input);padding:14px;
  font-family:inherit;font-size:12.5px;line-height:1.6;max-height:420px;overflow:auto}
.setup-peeklink{color:var(--red);font-weight:600}

@media(max-width:1060px){
  .setup-grid{grid-template-columns:1fr;gap:34px}
  .setup-grid .fix-artwrap{width:auto}
  .setup-grid .fix-gutter{display:none}
  /* the column stops being 600px here, so the mock's width can't be derived
     from it any more — back to a small centred drawing, which is what it
     was doing on a narrow screen all along */
  .setup-grid .setup-hold{width:250px;margin:0 auto}
  .home-new span{display:none}
  .people-panel{grid-template-columns:1fr}
}

/* ---------------- PEOPLE (people.json, its own tab since v161) ----------------
   Two cards a row; the NEW bar, an open card and the save line span both. */
.people-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:start}
.people-panel>.home-new{margin:0 0 13px}
.people-panel>.home-new,.people-edit,.people-live,.people-note{grid-column:1/-1}

.people-row{background:#fff;border-radius:var(--r-card);padding:12px 14px;cursor:pointer;
  display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center}
.people-row:hover{box-shadow:0 5px 16px rgba(0,0,0,.13)}
.people-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.people-nm{font-weight:700;font-size:14px;color:#1c1a17}
.people-co{color:var(--mid);font-size:12px}
.people-word{grid-column:2;grid-row:1/3;align-self:center;font-weight:600;font-size:13px;color:var(--red);white-space:nowrap}
.people-sees{grid-column:1/3;display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.pchip{font-size:11px;font-weight:600;background:var(--paper);border:1px solid #eadfce;border-radius:var(--pill);padding:2px 8px;color:#1c1a17}
.pchip.all{background:var(--red);border-color:var(--red);color:#fff}
.pchip.none{color:var(--mid);background:transparent;border:1px dashed #d9d2c4}

.people-edit{background:#fff;border-radius:var(--r-card);padding:16px 16px 14px;display:flex;flex-direction:column;gap:12px}
.pe-field label{display:block;font-family:var(--display);letter-spacing:1px;font-size:13px;color:#1c1a17;margin-bottom:5px}
.pe-field label span{color:var(--mid);font-weight:400;font-size:11px;letter-spacing:0;font-family:var(--body,inherit)}
.pe-in{width:100%;font-size:14px;border:1.5px solid #e7e2d6;border-radius:var(--r-input);padding:9px 11px;color:#1c1a17;background:#fff;font-family:inherit}
/* v213: first and last side by side; the phone book drops under both */
.pe-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.pe-find{display:none;position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;
  border-radius:var(--r-input);box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:hidden;z-index:5}
.pe-find.on{display:block}
.pe-hit{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 12px;
  font-size:14px;border-bottom:1px solid var(--border);cursor:pointer}
.pe-hit b{font-weight:700;color:#1c1a17}
.pe-hit span{color:var(--mid);font-size:12px;white-space:nowrap}
.pe-hit.on,.pe-hit:hover{background:var(--paper)}
.pe-hit.new{display:block;color:var(--mid);font-size:13px;border-bottom:none}
.pe-hit.new b{color:var(--red)}
.pe-corow{display:flex;gap:8px}
.pe-corow .pe-co{flex:0 0 auto;width:auto;min-width:110px}
.pe-corow .pe-co:only-child{flex:1}
.pe-in.owed{border-color:var(--red)}
.pe-owed{color:var(--red);font-size:13px;font-weight:600}
.people-co.owed{color:var(--red)}
.pe-wordrow{display:flex;gap:7px}
.pe-word{flex:1}

.pticks{display:flex;flex-direction:column}
.ptick{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:#fff;
  border:1.5px solid #e7e2d6;border-radius:var(--r-input);padding:9px 11px;cursor:pointer;margin-top:6px}
.ptick.on{border-color:var(--red);background:var(--paper)}
.ptick.pall{margin-top:0}
.ptick.locked{opacity:.45;pointer-events:none}
.ptick .pbox{width:18px;height:18px;border-radius:5px;border:2px solid #d9d2c4;flex:none;display:flex;align-items:center;justify-content:center}
.ptick.on .pbox{background:var(--red);border-color:var(--red)}
.ptick .pbox svg{width:11px;height:11px;display:none}
.ptick.on .pbox svg{display:block}
.ptick .pt{font-weight:600;font-size:13px;color:#1c1a17}
.ptick .pc{margin-left:auto;color:var(--mid);font-size:11px;white-space:nowrap}
.ptick .pc.testing{color:#b7791f}
.pe-btns{display:flex;gap:8px;align-items:center;margin-top:2px}


.people-foot{margin-top:4px}


.people-note{font-size:12px;color:rgba(255,255,255,.85);margin-top:7px;text-align:center}
.people-note.quiet{color:rgba(255,255,255,.55)}
.people-note a{color:#fff;text-decoration:underline;cursor:pointer}
.people-live.off,.people-live[disabled]{opacity:.35;cursor:default}