/* Whencee */

:root {
  --bg:#11141a; --panel:#181c25; --line:#272d3a; --sunk:#0f1218;
  --ink:#e9edf5; --muted:#949eb2; --accent:#4c8dff; --peer:#3ecf8e;
  /* Darker accent for white text on a filled button/bubble: #4c8dff is ~3.2:1
     with white (fails WCAG AA); this is ~4.7:1. Borders/rings keep --accent. */
  --accent-btn:#2f6fe0;
  --warn:#e8a33d; --bad:#e8706e; --r:12px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* [hidden] must always hide. Browsers apply [hidden]{display:none} only as a
   low-priority UA rule, so any id/class that sets `display` silently beats it and
   leaves a "hidden" element on screen (this bit the locks, the share bar, the
   sheets and the modals, each patched one at a time). One !important rule ends
   the whole class of bug, so toggling el.hidden always actually hides. */
[hidden] { display:none !important; }
html, body { height:100%; margin:0; }
body {
  background:var(--bg); color:var(--ink);
  font:16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior:none;
}
button { font:inherit; cursor:pointer; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- setup ---------- */
#setup {
  position:fixed; inset:0; z-index:1000; overflow-y:auto;
  display:flex; align-items:center; justify-content:center; padding:24px;
  padding-top:calc(24px + env(safe-area-inset-top));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.card { width:100%; max-width:380px; }
.card h1 { font-size:26px; margin:0 0 4px; letter-spacing:-.02em; }
.card p.sub { margin:0 0 24px; color:var(--muted); font-size:14px; }
label { display:block; font-size:13px; color:var(--muted); margin:0 0 6px; }
input {
  width:100%; padding:13px 14px; margin:0 0 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  color:var(--ink); font:inherit; outline:none;
}
input:focus { border-color:var(--accent); }
input:disabled { opacity:.45; }
#joinCode { text-transform:uppercase; letter-spacing:.18em; font-weight:600; }
.btn {
  width:100%; padding:14px; border:none; border-radius:var(--r);
  background:var(--accent-btn); color:#fff; font-weight:600;
}
.btn.ghost { background:var(--panel); color:var(--ink); border:1px solid var(--line); }
.btn[disabled] { opacity:.5; cursor:default; }
.or { text-align:center; color:var(--muted); font-size:12px; margin:16px 0; letter-spacing:.08em; }
.err { color:var(--bad); font-size:14px; min-height:20px; margin:12px 0 0; }
.hint { color:var(--muted); font-weight:400; }
.check { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--muted);
         margin:-8px 0 18px; cursor:pointer; line-height:1.4; }
.check input { width:auto; margin:2px 0 0; flex:none; }
.lockmsg { font-size:15px; margin:0 0 20px; color:var(--ink); }
.lockmsg b { letter-spacing:.16em; }
#unlockBlock .btn { margin-bottom:10px; }

/* ---------- app shell ---------- */
#app { display:none; position:fixed; inset:0; flex-direction:column; }
#app.on { display:flex; }

#bar {
  display:flex; align-items:center; gap:7px; padding:10px 12px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--panel); border-bottom:1px solid var(--line); z-index:600; flex:none;
}
#code { font-weight:700; letter-spacing:.14em; font-size:17px; outline:none; cursor:pointer; -webkit-user-select:all; user-select:all; }
#code:hover { color:var(--accent); }
#code:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; }
/* The lock IS the "encrypted" label now: fused to the code, green, compact. */
#lock { color:var(--peer); display:inline-flex; align-items:center; margin-left:-2px; flex:none; }
/* Honest, not alarming: an open padlock in muted grey so "not encrypted" is as
   visible as encrypted, without guilt-tripping a deliberately-open room. */
#openlock { color:var(--muted); display:inline-flex; align-items:center; margin-left:-2px; flex:none; cursor:help; }
#bar .spacer { flex:1; }
#bar button {
  background:transparent; border:1px solid var(--line); color:var(--ink);
  border-radius:9px; padding:7px 11px; font-size:13px;
}
#bar button.icon {
  padding:0; width:40px; height:40px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
}
#bar button.leave { color:var(--bad); border-color:transparent; padding:7px 9px; }
#bar button.toggle.on { color:var(--accent); border-color:var(--accent); }
.tag {
  font-size:11px; color:var(--muted); border:1px solid var(--line);
  border-radius:5px; padding:1px 5px; flex:none; white-space:nowrap;
}
.tag.enc { color:var(--peer); border-color:rgba(62,207,142,.45); }

#notice {
  display:none; padding:9px 14px; font-size:13px; flex:none; z-index:600;
  background:rgba(232,163,61,.14); color:var(--warn);
  border-bottom:1px solid rgba(232,163,61,.25);
}
#notice.on { display:block; }
#notice.bad { background:rgba(232,112,110,.14); color:var(--bad);
              border-bottom-color:rgba(232,112,110,.3); }

#mapWrap { flex:1; position:relative; min-height:0; }
#map { position:absolute; inset:0; background:#0c0e13; }
.leaflet-container { background:#0c0e13; font:inherit; }

#gate {
  display:none; position:absolute; inset:0; z-index:450;
  background:rgba(17,20,26,.94); padding:28px 24px;
  flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
#gate.on { display:flex; }
#gate h2 { font-size:18px; margin:0 0 10px; }
#gate p { color:var(--muted); font-size:14px; margin:0 0 18px; max-width:300px; }
#gate button {
  background:var(--accent-btn); color:#fff; border:none; border-radius:var(--r);
  padding:12px 20px; font-weight:600;
}
/* The decline: a quiet secondary under the primary Share button. */
#gate button.ghost {
  background:transparent; color:var(--muted); border:none; text-decoration:underline;
  padding:8px 12px; margin-top:12px; font-weight:500; font-size:13px;
}

/* "Sharing your location · Stop" — a standing reminder over the map and the
   one-tap way to stop sharing without leaving the room. */
#shareBar {
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:440;
  display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px);
  background:rgba(17,20,26,.92); border:1px solid var(--line);
  border-radius:999px; padding:6px 6px 6px 14px; box-shadow:0 2px 10px rgba(0,0,0,.3);
}
#shareState { color:var(--peer); font-size:13px; font-weight:600; white-space:nowrap; }
#stopShareBtn {
  flex:none; background:var(--accent-btn); color:#fff; border:none; border-radius:999px;
  padding:10px 16px; font-weight:600; font-size:13px; cursor:pointer;
}

/* Blocked people, listed under the People pane with an Unblock each. */
#blocked { border-top:1px solid var(--line); margin-top:8px; padding:10px 12px 4px; }
.blockedh { color:var(--muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 6px; }
.blockedrow { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; }
.bnm { color:var(--muted); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.unblock {
  flex:none; background:var(--sunk); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--r); padding:5px 12px; font-size:13px; cursor:pointer;
}

/* Peer dot popup: their name, directions to them, and Block. */
.mp-name { color:var(--ink); font-weight:600; font-size:14px; padding:1px 2px 2px; }
.mp-pop button.danger { background:var(--sunk); color:#ff6b6b; border:1px solid rgba(255,107,107,.4); }

/* ---------- bottom sheet ---------- */
#sheet {
  flex:none; height:40vh; min-height:210px; display:flex; flex-direction:column;
  background:var(--panel); border-top:1px solid var(--line); z-index:600;
}
/* Drag handle: grab the grey bar to make the panel taller or shorter; the map
   fills whatever is left. Its own hit area is generous; touch-action:none so a
   drag resizes instead of scrolling the page. */
#sheetGrab {
  flex:none; height:22px; padding:0; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center;
  cursor:ns-resize; touch-action:none; -webkit-tap-highlight-color:transparent;
}
#sheetGrab span { display:block; width:36px; height:4px; border-radius:2px; background:var(--line); transition:background .15s; }
#sheetGrab:hover span, #sheetGrab:focus-visible span { background:var(--muted); }
#sheetGrab:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; border-radius:5px; }
@media (prefers-reduced-motion: reduce) { #sheetGrab span { transition:none; } }
/* Collapsed: just the tab strip stays (badges included); the map gets the rest. */
#sheet.collapsed { height:auto; min-height:0; }
#sheet.collapsed .pane, #sheet.collapsed .strip { display:none !important; }
#sheet.collapsed #sheetToggle svg { transform:rotate(180deg); }
#tabs { display:flex; align-items:stretch; flex:none; border-bottom:1px solid var(--line); }
#sheetToggle {
  flex:none; width:46px; background:transparent; border:none;
  border-left:1px solid var(--line); color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
  padding-bottom:env(safe-area-inset-bottom, 0);
}
#sheetToggle svg { transition:transform .18s; }
@media (prefers-reduced-motion: reduce) { #sheetToggle svg { transition:none; } }
.tab {
  flex:1; background:transparent; border:none; color:var(--muted);
  padding:12px 8px; font-size:14px; font-weight:600;
}
.tab[aria-selected="true"] { color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent); }
.tab .count { color:var(--muted); font-weight:400; }
.badge {
  display:none; background:var(--accent-btn); color:#fff; font-size:11px; font-weight:700;
  border-radius:9px; padding:1px 6px; margin-left:5px; vertical-align:1px;
}
.badge.on { display:inline-block; }

.pane { display:none; flex:1; min-height:0; flex-direction:column; }
.pane.on { display:flex; }

#people { overflow-y:auto; -webkit-overflow-scrolling:touch;
          padding-bottom:env(safe-area-inset-bottom); }
.row {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:11px 14px; border:none; border-bottom:1px solid var(--line);
  background:transparent; color:inherit; font:inherit;
}
.row:last-child { border-bottom:none; }
.row[disabled] { cursor:default; }
.dot { width:10px; height:10px; border-radius:50%; background:var(--peer); flex:none; }
.dot.off { background:transparent; border:1.5px solid var(--muted); }
.row .nm { flex:1; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .dist { font-size:15px; font-variant-numeric:tabular-nums; flex:none; }
.row .ag { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; min-width:52px; text-align:right; }
.row.stale { opacity:.6; }
.row.stale .ag { color:var(--warn); }
.row.off .nm { color:var(--muted); }
.empty { padding:16px 14px; color:var(--muted); font-size:14px; }

#msgs { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 14px; }
/* Bubbles hug their text (the 82% cap is on the bubble, not the row), and
   yours sit flush right — a four-letter message is a four-letter bubble. */
.msg { margin:0 0 12px; display:flex; flex-direction:column; align-items:flex-start; }
.msg .who { font-size:11px; color:var(--muted); margin:0 0 3px; }
.msg .bub {
  max-width:82%;
  background:var(--sunk); border:1px solid var(--line); border-radius:12px;
  padding:8px 11px; font-size:15px; word-wrap:break-word; overflow-wrap:anywhere;
}
.msg.mine { align-items:flex-end; }
.msg.mine .who { text-align:right; }
.msg.mine .bub { background:var(--accent-btn); border-color:var(--accent); color:#fff; }
/* An optimistic echo, dimmed until the server confirms it (then replaced). */
.msg.mine.pending .bub { opacity:.55; }
#chatForm {
  flex:none; display:flex; gap:8px; padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
#chatInput { margin:0; flex:1; padding:11px 13px; }
#chatForm button {
  flex:none; background:var(--accent-btn); color:#fff; border:none;
  border-radius:var(--r); padding:0 18px; font-weight:600;
}
#chatForm button[disabled] { opacity:.45; }
.strip {
  flex:none; display:flex; align-items:center; gap:9px; padding:10px 14px;
  border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); cursor:pointer;
}
.strip input { width:auto; margin:0; }

.pin-label {
  background:rgba(24,28,37,.92); border:1px solid var(--line); color:var(--ink);
  border-radius:7px; padding:3px 8px; font-size:12px; font-weight:600;
  box-shadow:none; max-width:190px; white-space:normal; line-height:1.35;
}
.pin-label::before { display:none; }
.pl-msg {
  display:block; font-weight:400; font-size:11px; color:var(--muted); margin-top:2px;
  border-top:1px solid var(--line); padding-top:3px;
}

/* ---------- no-JS ---------- */
noscript .card { display:block; }

/* ---------- room chips (multi-map) ---------- */
#roomsBar {
  display:none; flex:none; gap:6px; padding:7px 12px; overflow-x:auto;
  background:var(--panel); border-bottom:1px solid var(--line); z-index:600;
  -webkit-overflow-scrolling:touch;
}
#roomsBar.on { display:flex; }
.rchip {
  flex:none; display:flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:8px; padding:5px 10px; font-size:13px; font-weight:600;
  letter-spacing:.1em;
}
.rchip.on { color:var(--ink); border-color:var(--accent); }
.rbadge {
  display:none; background:var(--accent-btn); color:#fff; font-size:11px;
  font-weight:700; border-radius:8px; padding:0 5px; letter-spacing:0;
}
.rbadge.on { display:inline-block; }
#addRoomBtn { font-weight:700; min-width:34px; }

/* ---------- meeting point ---------- */
.meetflag {
  filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.55));
  cursor:pointer;
}
.pin-svg { display:block; width:100%; height:100%; }
.mp-popup .leaflet-popup-content-wrapper {
  background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.mp-popup .leaflet-popup-content { margin:8px; }
.mp-popup .leaflet-popup-tip { background:var(--panel); border:1px solid var(--line); }
.mp-pop button {
  background:var(--accent-btn); color:#fff; border:none; border-radius:8px;
  padding:9px 13px; font-size:14px; font-weight:600; white-space:nowrap;
}

/* ---------- landing ---------- */
#setup { background:var(--bg); }
#backdrop {
  position:absolute; inset:0; width:100%; height:100%; z-index:-1;
  opacity:.8; pointer-events:none;
}
#backdrop .pulse { animation:pulse 3s ease-out infinite; transform-origin:center; }
#backdrop .pulse.d2 { animation-delay:1.5s; }
@keyframes pulse {
  0% { r:7; opacity:.9; } 70% { r:22; opacity:0; } 100% { r:22; opacity:0; }
}
.card { position:relative; background:rgba(17,20,26,.78); backdrop-filter:blur(3px);
        border-radius:16px; padding:22px 20px; border:1px solid rgba(39,45,58,.6); }
.card h1 { display:flex; align-items:center; gap:10px; }
#paths { display:flex; flex-direction:column; gap:10px; margin:4px 0 0; }
#paths .btn { margin:0; }
.btn.sm { padding:10px; font-size:14px; margin-top:10px; }
.passRow { display:flex; gap:8px; }
.passRow input { flex:1; margin-bottom:10px; }
#diceBtn {
  flex:none; width:48px; height:48px; border-radius:var(--r);
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center;
}
#diceBtn:active svg { transform:rotate(90deg); }
#diceBtn svg { transition:transform .25s; }
.enc-note {
  display:flex; align-items:center; gap:6px; color:var(--peer);
  font-size:12.5px; margin:0 0 14px;
}
.enc-note svg { flex:none; }
#foot { margin:22px 0 0; text-align:center; font-size:13px; color:var(--muted); }
#foot a, #foot button {
  color:var(--muted); background:none; border:none; padding:0; font:inherit;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
#foot a:hover, #foot button:hover { color:var(--ink); }
#foot span { margin:0 8px; }

/* ---------- how it works ---------- */
#how {
  position:fixed; inset:0; z-index:1200; background:rgba(10,12,16,.7);
  display:flex; align-items:center; justify-content:center; padding:22px;
}
#howCard {
  width:100%; max-width:380px; max-height:86vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px 20px;
}
#howCard h2 { margin:0 0 16px; font-size:19px; }
#howCard ul { list-style:none; margin:0 0 18px; padding:0; }
#howCard li { display:flex; gap:12px; margin:0 0 16px; font-size:14px; color:var(--muted); line-height:1.5; }
#howCard li svg { flex:none; color:var(--accent); margin-top:2px; }
#howCard li:nth-child(3) svg { color:var(--peer); }
#howCard strong { color:var(--ink); }

/* ---------- quick replies ----------
   Understated by design: transparent, small, muted, so they sit quietly above
   the input as shortcuts rather than a wall of chunky buttons. */
#quick {
  flex:none; display:flex; gap:6px; padding:6px 12px 2px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#quick::-webkit-scrollbar { display:none; }
.qr {
  flex:none; background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:15px; padding:6px 11px; font-size:12.5px; white-space:nowrap;
}
.qr:hover, .qr:active { color:var(--ink); border-color:var(--accent); }

/* Demote the bubbles toggle: it is a set-once preference, not a headline. */
.strip { font-size:12px; padding:7px 14px; opacity:.75; }

/* ---------- chat event lines (meeting point) ---------- */
.msg.evt { max-width:100%; margin:2px 0 12px; align-items:center; text-align:center; }
.msg.evt .who { display:none; }
.msg.evt .bub {
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px dashed var(--line); color:var(--muted);
  font-size:13px; border-radius:15px; padding:5px 12px; cursor:pointer;
}
.msg.evt .bub:hover { color:var(--ink); }

/* ---------- dark map ---------- */
/* OSM's light tiles (via our proxy), inverted into a deep, cool, low-clutter
   dark map. hue-rotate past 180 pushes the warm tan of OSM land toward the
   app's blue-grey; the extra contrast and low saturation let the basemap
   recede so the colour markers and labels on top are the focus. Attribution
   stays untouched and readable. */
#map .leaflet-tile {
  filter:invert(1) hue-rotate(215deg) brightness(.72) contrast(1.18) saturate(.22);
}
.leaflet-control-attribution {
  background:rgba(17,20,26,.8) !important; color:var(--muted) !important; font-size:10px;
}
.leaflet-control-attribution a { color:var(--muted) !important; }
.leaflet-bar { border:1px solid var(--line) !important; box-shadow:none !important; }
.leaflet-bar a {
  background:var(--panel) !important; color:var(--ink) !important;
  border-bottom:1px solid var(--line) !important;
  width:44px !important; height:44px !important; line-height:44px !important;
}
.leaflet-bar a:last-child { border-bottom:none !important; }
.leaflet-bar a.leaflet-disabled { color:#4a5261 !important; }

/* custom map controls: recenter on me, fit everyone */
.mapbtns { display:flex; flex-direction:column; border-radius:4px; overflow:hidden; }
.mapbtns button {
  width:44px; height:44px; background:var(--panel); border:none; color:var(--ink);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.mapbtns button:last-child { border-bottom:none; }
.mapbtns button[disabled] { color:#4a5261; cursor:default; }

/* pin message bubbles: one line, always */
.pl-msg { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }

/* ---------- invite card (alone in a room) ---------- */
#invite { padding:18px 14px; border-bottom:1px solid var(--line); text-align:center; }
#invite .big {
  font-size:30px; font-weight:700; letter-spacing:.22em; margin:2px 0 4px;
  color:var(--ink);
}
#invite p { margin:0 0 12px; color:var(--muted); font-size:13px; }
#invite button {
  background:var(--accent-btn); color:#fff; border:none; border-radius:10px;
  padding:10px 22px; font-weight:600; font-size:14px;
}
/* Scan-to-join QR: a white card so it reads off the dark UI; the SVG carries
   its own quiet zone and the padding adds a little more margin for scanners. */
#inviteQr {
  width:168px; height:168px; margin:6px auto 10px; background:#fff;
  border-radius:12px; padding:9px; box-sizing:border-box;
}
#inviteQr svg { display:block; width:100%; height:100%; }
#invite .qrcap { font-size:12px; margin:0 0 14px; }

/* ---------- toast ---------- */
#toast {
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  max-width:88%; background:rgba(24,28,37,.95); color:var(--ink);
  border:1px solid var(--line); border-radius:12px; padding:9px 14px;
  font-size:13px; text-align:center; z-index:500; opacity:0;
  pointer-events:none; transition:opacity .25s;
}
#toast.on { opacity:1; }

/* ---------- markers of note ---------- */
.notemark {
  filter:drop-shadow(0 1.5px 2px rgba(0,0,0,.55)); cursor:pointer;
}
.mp-pop { display:flex; flex-direction:column; gap:7px; min-width:170px; }
.mp-pop button.ghost { background:var(--sunk); color:var(--ink); border:1px solid var(--line); }
.mp-pop input {
  margin:0; padding:9px 11px; font-size:14px;
  background:var(--sunk); border:1px solid var(--line); border-radius:8px; color:var(--ink);
}
.mp-pop .mklabel { color:var(--ink); font-size:13px; padding:2px 2px 0; }

/* iOS: a held finger on the map must never start text selection (the
   selection callout / Writing Tools popover), and a focused input under
   16px makes Safari zoom the whole page. */
#map, #map * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.mp-pop input { font-size:16px; }
.mapbtns button.on { color:var(--accent); }
#map.placing { cursor:crosshair; }

/* your own dot gently pulses: a calm "you are here" heartbeat */
.lm-self { animation:selfpulse 2.6s ease-in-out infinite; }
@keyframes selfpulse {
  0%,100% { filter:drop-shadow(0 0 0 rgba(76,141,255,0)); }
  50%     { filter:drop-shadow(0 0 5px rgba(76,141,255,.9)); }
}

/* ---------- marker label dialog ---------- */
#mkModal {
  position:fixed; inset:0; z-index:1200; background:rgba(10,12,16,.7);
  display:flex; align-items:center; justify-content:center; padding:22px;
}
#mkCard {
  width:100%; max-width:360px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px 20px;
}
#mkCard h2 { margin:0 0 6px; font-size:19px; }
#mkCard .mksub { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.5; }
#mkCard input { margin:0 0 14px; }
#mkCard .btn.ghost { margin-top:2px; }

/* ---------- person action sheet (tap a name in the People list) ---------- */
#peerModal {
  position:fixed; inset:0; z-index:1200; background:rgba(10,12,16,.7);
  display:flex; align-items:center; justify-content:center; padding:22px;
}
#peerCard {
  width:100%; max-width:340px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:20px;
}
#peerCard h2 {
  margin:0 0 14px; font-size:18px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
#peerActions { display:flex; flex-direction:column; gap:8px; margin:0 0 8px; }
#peerActions .btn.danger {
  background:var(--sunk); color:#ff6b6b; border:1px solid rgba(255,107,107,.4);
}