/* The Parking Lot (lot.js): one plain feed. The title row (search, More), a chosen topic's chip, the composer box,
   Top · New · Following, cards with ▲ Here, here / ▼ Keep coming back / 💬 / Send / ⋯, a post with its comments nested
   under indent lines, @mentions, a member's page, search, the Send sheet, the More sheet, the New post page with its
   kind tiles and pickers, the quick post sheet and the floating +. Built on the shared tokens and profile.css's pf-
   pieces (boxes, forms, faces); everything here is a lot- class. Light (cream) and navy both come from the tokens.
   Text is 16px and up (the fine print excepted); every tap target is 48px or more. */

:root, :root[data-theme="light"] {
  --lot-inset: #f6f2e8;                         /* an attached talk or poll, inside a white card */
  --lot-up: #1f6fb3;                            /* Here, here */
  --lot-down: #a9772f;                          /* Keep coming back */
  --lot-anon: #8e95a3;
  --lot-line: #d9d2c2;                          /* a comment's indent line */
}
:root[data-theme="dark"] {
  --lot-inset: rgba(248, 244, 233, 0.07);
  --lot-up: #5fb3ff;
  --lot-down: #f2c460;
  --lot-anon: #6f7a8c;
  --lot-line: rgba(248, 244, 233, 0.22);
}
.lot-page [hidden] { display: none !important; }

/* ---------- The title row: "The Parking Lot", search, More ---------- */
.lot-top { display: flex; align-items: center; gap: 6px; margin: 16px 0 12px; }
.lot-title { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 30px/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.lot-tool {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 15px var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(11, 31, 59, 0.05);
}
.lot-tool svg { flex: 0 0 auto; color: var(--clay-dark); }
.lot-tool:active { background: var(--paper-2); }
.lot-tool:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
a.lot-tool { padding: 0; width: 48px; }
.lot-top-search { margin-bottom: 14px; }
/* The chosen topic (and flavor, or the talk), as a chip you can clear. */
.lot-chips-on { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lot-chip-on {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 14px;
  border-radius: 999px; background: var(--clay); color: var(--navy); font: 600 15px var(--sans); text-decoration: none;
}
.lot-chip-on svg:last-child { opacity: 0.8; }
.lot-chip-on:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
/* The one-line intro, the first time. */
.lot-intro { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 6px 10px 14px; border-radius: 14px; background: var(--pf-tint); }
.lot-intro p { flex: 1 1 auto; margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.lot-intro a { color: var(--clay-dark); font-weight: 600; }
/* The composer box: your face and "What's on your mind?". */
.lot-composer {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0 0 14px; padding: 10px 12px 10px 14px;
  border: 1px solid var(--pf-edge); border-radius: 16px; background: var(--paper); color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--pf-shadow);
}
.pf-box.lot-composer > * + * { border-top: 0; } /* a pf-box draws a line between its rows; this box is one row */
.lot-composer:active { background: var(--paper-2); }
.lot-composer:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lot-composer-words { flex: 1 1 auto; min-width: 0; font-size: 17px; line-height: 1.3; }
.lot-composer-plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--navy); }

/* ---------- Top · New · Following ---------- */
.lot-pills { display: flex; gap: 8px; margin: 0 0 14px; }
.lot-pill {
  flex: 1 1 0; min-height: 48px; padding: 0 12px; border: 1px solid var(--line-strong, var(--line)); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 600 16px/1.2 var(--sans); cursor: pointer; box-shadow: 0 1px 2px rgba(11, 31, 59, 0.05);
}
.lot-pill[aria-selected="true"] { border-color: var(--clay); background: var(--clay); color: var(--navy); }
.lot-pill:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
/* All · Discussions · Talks · Playlists · Events · Polls: a row of 48px chips that scrolls sideways, under the pills. */
.lot-pills + .lot-kinds-row { margin-top: -4px; }
.lot-kinds-row .lot-chip { min-height: 44px; padding: 0 14px; }

/* ---------- The feed's cards ---------- */
.lot-feed { display: grid; gap: 14px; }
.lot-card, .lot-thread {
  display: grid; gap: 10px; padding: 14px 16px 6px; overflow: hidden;
  border: 1px solid var(--pf-edge); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: var(--pf-shadow);
}
.lot-card.waiting .lot-card-main h3 { opacity: 0.75; }
.lot-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lot-face.pf-face { width: auto; height: auto; margin: 0; text-decoration: none; }
.lot-card-who { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.lot-card-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; }
.lot-card-who b, .lot-name { font: 600 16px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.lot-name { display: inline; margin: 0; padding: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer; }
.lot-name:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 4px; }
.lot-at { font: 500 14px/1.3 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.lot-card-who small, .lot-reply-who .pf-byline-meta { display: block; font-size: 14px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.lot-card-who small .lot-tag, .lot-tag { color: var(--clay-dark); font-weight: 600; text-decoration: none; }
.lot-anon-note { display: inline; margin-left: 2px; font: 500 13px/1.3 var(--sans); color: var(--ink-2); }
/* Round 16: where they are now (a live check-in), a quiet line under the name: a pin and "At the 2026 Keystone
   Conference" / "In Wilkes-Barre, PA", a link to the event or to who's around that place. The colors are tokens, so
   it reads in light and dark alike. */
.lot-checkin { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 1px 0 0; font: 500 13px/1.3 var(--sans); color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; }
.lot-checkin svg { flex: 0 0 auto; color: var(--clay-dark); }
.lot-checkin > span { min-width: 0; }
a.lot-checkin:hover > span { text-decoration: underline; }
a.lot-checkin:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 4px; }
.lot-card-who .lot-checkin { justify-self: start; }
.pf-av.lot-anon { --pf-c: var(--lot-anon); }
.lot-pin { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--gold) 38%, transparent); color: var(--ink); font: 600 13px/1.3 var(--sans); }
.lot-card-main { display: grid; gap: 6px; color: var(--ink); cursor: pointer; }
.lot-card-main h3 { margin: 0; font: 600 18px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.lot-card-main h3 a { color: inherit; text-decoration: none; }
.lot-card-main h3 a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 6px; }
.lot-body { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.lot-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }
.lot-clamp.open { display: block; overflow: visible; -webkit-line-clamp: unset; }
.lot-more { justify-self: start; min-height: 32px; margin: -2px 0 0; padding: 0 4px; border: 0; background: none; font: 600 15px var(--sans); color: var(--clay-dark); cursor: pointer; }
.lot-handle, .lot-page .msg-mention, .lot-sheet .msg-mention { color: var(--clay-dark); font-weight: 600; text-decoration: none; }
.lot-handle:hover, .lot-page .msg-mention:hover { text-decoration: underline; }
.lot-body a[target="_blank"], .lot-c-text a[target="_blank"] { color: var(--clay-dark); overflow-wrap: anywhere; }
.lot-card .pf-wait { margin-top: 2px; justify-self: start; }

/* The attached talk, playlist or event: an inset row with its picture; the play button is 48px, blue. */
.lot-att {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 10px 10px 10px;
  border-radius: 14px; background: var(--lot-inset); color: var(--ink); text-decoration: none;
}
.lot-att-art { flex: 0 0 auto; display: block; }
.lot-att .art { display: block; width: 54px; height: 54px; overflow: hidden; border-radius: 10px; background: var(--paper-2); }
.lot-att .art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lot-att-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; color: var(--ink); text-decoration: none; }
.lot-att-text b { font: 600 16px/1.3 var(--sans); overflow-wrap: anywhere; }
.lot-att-text small { font-size: 14px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.lot-att-go { flex: 0 0 auto; color: var(--ink-2); }
.lot-play {
  flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 50%; background: var(--blue); color: var(--navy); cursor: pointer; box-shadow: 0 4px 12px rgba(31, 111, 179, 0.25);
}
.lot-play svg { margin-left: 2px; }
.lot-play:active { transform: translateY(1px); }
.lot-play:focus-visible, .lot-open:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lot-open {
  flex: 0 0 auto; min-width: 72px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 999px; background: var(--paper); color: var(--clay-dark); font: 600 15px var(--sans); cursor: pointer;
}
/* A playlist's cover stack: up to three pictures fanned out. */
.lot-stack { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 62px; height: 54px; color: var(--ink-2); }
.lot-stack .art { position: absolute; left: 0; top: 0; width: 46px; height: 46px; overflow: hidden; border-radius: 9px; box-shadow: 0 1px 3px rgba(11, 31, 59, 0.2); background: var(--paper-2); }
.lot-stack .art:nth-child(2) { left: 8px; top: 4px; }
.lot-stack .art:nth-child(3) { left: 16px; top: 8px; }
.lot-stack .art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* An event's date: the month in red over the day. */
.lot-date {
  flex: 0 0 auto; display: grid; justify-items: center; align-content: center; gap: 0; width: 52px; height: 56px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink);
}
.lot-date b { font: 700 12px/1 var(--sans); letter-spacing: 0.08em; color: #d8372c; }
.lot-date i { font: 700 22px/1.1 var(--display); font-style: normal; }
.lot-date.none { color: var(--ink-2); }

/* The poll: options as full-width buttons; after a vote (or when it's closed), bars with percentages. */
.lot-poll { display: grid; gap: 8px; }
.lot-poll-opt {
  display: flex; align-items: center; min-height: 48px; padding: 10px 16px;
  border: 1.5px solid var(--line-strong, var(--line)); border-radius: 12px; background: var(--paper); color: var(--ink);
  font: 600 16px/1.3 var(--sans); text-align: left; cursor: pointer;
}
.lot-poll-opt:active { background: var(--paper-2); }
.lot-poll-opt:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lot-poll-bar { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; overflow: hidden; border-radius: 12px; background: var(--lot-inset); }
.lot-poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--blue) 22%, transparent); transition: width 300ms; }
.lot-poll-bar.on .lot-poll-fill { background: color-mix(in srgb, var(--blue) 42%, transparent); }
.lot-poll-bar b { position: relative; flex: 1 1 auto; font: 500 16px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.lot-poll-bar.on b { font-weight: 700; }
.lot-poll-bar em { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; font: 700 15px var(--sans); font-style: normal; color: var(--ink); }
.lot-poll-bar em svg { color: var(--clay-dark); }
.lot-poll-meta { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ▲ Here, here · ▼ Keep coming back · 💬 · Send · ⋯: five 48px targets in one row (it scrolls sideways on the very
   narrowest phones rather than wrapping). */
.lot-actions { display: flex; align-items: center; gap: 2px; margin: 0 -8px; overflow-x: auto; scrollbar-width: none; }
.lot-actions::-webkit-scrollbar { display: none; }
.lot-act {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 48px; min-height: 48px; padding: 0 9px;
  border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14px var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
}
.lot-act b { font-weight: 700; }
.lot-act:active { background: var(--paper-2); }
.lot-act:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
.lot-up[aria-pressed="true"] { color: var(--lot-up); }
.lot-down[aria-pressed="true"] { color: var(--lot-down); }
.lot-act-more { margin-left: auto; }
.lot-act-wide { display: none; }
@media (min-width: 430px) { .lot-act-wide { display: inline; } }
.lot-thread .lot-act-more { display: none; } /* the post page has ⋯ at the top */

/* ---------- A post and its comments ---------- */
.lot-thread { margin-top: 12px; padding-bottom: 6px; }
.lot-thread-title { margin: 2px 0 0; font: 700 25px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.lot-thread .pf-body { margin: 0; }
.lot-thread .pf-wait { justify-self: start; }
.lot-comments { margin-top: 22px; }
.lot-comments h2 { margin: 0 0 6px; font: 700 20px/1.3 var(--sans); color: var(--ink); }
.lot-comments h2 small { font: 500 15px var(--sans); color: var(--ink-2); }
.lot-c-list, .lot-c-kids { margin: 0; padding: 0; list-style: none; }
.lot-c-kids { padding-left: 14px; }
.lot-c[data-level="5"] > .lot-c-kids { padding-left: 0; }
/* A comment: the indent line down its left (a tap folds the thread), then the words. */
.lot-c { position: relative; padding: 8px 0 0 16px; }
.lot-c-line {
  position: absolute; left: 0; top: 40px; bottom: 0; width: 16px; margin: 0; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.lot-c-line::before { content: ''; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: var(--lot-line); }
.lot-c-line:hover::before, .lot-c-line:active::before { background: var(--clay); }
.lot-c-main { display: grid; gap: 4px; min-width: 0; }
.lot-c-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.lot-c-head .lot-face .pf-av { width: 28px; height: 28px; }
.lot-c-who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 5px; min-width: 0; }
.lot-c-who b, .lot-c-who .lot-name { font-size: 15px; }
.lot-c-who .pf-verified { margin-left: 0; }
.lot-c-meta { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.lot-c-fold {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; border: 0; border-radius: 999px;
  background: var(--paper-2); color: var(--clay-dark); font: 600 13px var(--sans); cursor: pointer;
}
.lot-c-to { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.lot-c-to b { font-weight: 600; color: var(--ink); }
.lot-c-text { font-size: 16px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.lot-c.waiting > .lot-c-main > .lot-c-text { opacity: 0.72; }
.lot-c-acts { display: flex; align-items: center; gap: 2px; margin: 0 0 0 -8px; }
.lot-c-vote, .lot-c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14px var(--sans); cursor: pointer;
}
.lot-c-vote:active, .lot-c-btn:active { background: var(--paper-2); }
.lot-c-vote:focus-visible, .lot-c-btn:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
.lot-c-more { margin-left: auto; }
.lot-c-box:empty { display: none; }
.lot-c-form { display: grid; gap: 10px; margin: 6px 0 8px; padding: 12px; border-radius: 14px; background: var(--lot-inset); }
.lot-c-form textarea {
  display: block; width: 100%; min-height: 80px; margin: 0; padding: 12px 14px; resize: vertical;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 12px; background: var(--pf-field); color: var(--ink); font: 17px/1.5 var(--sans); -webkit-appearance: none; appearance: none;
}
.lot-c-form textarea:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 22%, transparent); }
.lot-c-form-actions .btn { flex: 1 1 120px; }
.lot-c-form .lot-as-switch { background: var(--paper); }
/* Folded: the head stays, with "— 4 replies"; the rest goes. */
.lot-c.folded > .lot-c-main > :is(.lot-c-text, .lot-c-acts, .lot-c-box, .lot-c-to), .lot-c.folded > .lot-c-kids { display: none; }
.lot-c.folded > .lot-c-line { top: 40px; bottom: auto; height: 0; }
.lot-c.pf-hilite { border-radius: 12px; animation: pf-wash 2.8s ease-out both; }
.lot-reply .pf-byline { flex-wrap: nowrap; align-items: center; gap: 10px; }
.lot-reply-who { display: grid; gap: 1px; min-width: 0; }
.lot-reply-form { margin-top: 20px; }
/* Comment as / Post as (round 13): one switch, "Post as Roger L." ⇄ "Anonymous Member"; the whole row is the tap. */
.lot-as { display: grid; gap: 8px; }
.lot-as-switch {
  display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0; padding: 6px 12px 6px 8px;
  border: 1.5px solid var(--line-strong, var(--line)); border-radius: 16px; background: var(--paper); cursor: pointer;
}
.lot-as-switch:has(input:checked) { border-color: var(--lot-anon); background: color-mix(in srgb, var(--lot-anon) 12%, var(--paper)); }
.lot-as-face { flex: 0 0 auto; display: grid; place-items: center; }
.lot-as-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.lot-as-text small { font: 500 14px/1.3 var(--sans); color: var(--ink-2); }
.lot-as-text b { font: 600 17px/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.lot-as-switch .pf-switch { flex: 0 0 auto; }
.lot-anon-hint { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--pf-tint); font-size: 15px; line-height: 1.45; color: var(--ink); }
.lot-anon-hint svg { flex: 0 0 auto; margin-top: 2px; color: var(--clay-dark); }
.lot-sheet .pf-note { margin: 10px 0 12px; }
.lot-as .pf-note { margin: 0; }
/* A verified speaker's check after the name (profile.css draws the mark itself). */
.lot-card-who .pf-verified, .lot-reply-who .pf-verified { margin-left: 0; }
/* An admin's App News post sent to everyone: the switch on New post and the quick sheet. */
.lot-broadcast { padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; }
.lot-broadcast .pf-set-text b { font-size: 17px; }
.lot-broadcast .pf-set-text small { font-size: 15px; }

/* ---------- @mentions: the list under a box while you type ---------- */
.lot-mentions { display: grid; gap: 2px; margin: 6px 0 0; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: var(--pf-shadow); }
.lot-mention {
  display: flex; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 4px 8px;
  border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.lot-mention.on, .lot-mention:active { background: var(--pf-tint); }
.lot-mention:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
.lot-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lot-person-text { display: grid; gap: 0; min-width: 0; }
.lot-person-text b { display: flex; align-items: center; gap: 4px; font: 600 16px/1.25 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.lot-person-text b .pf-verified { margin-left: 0; }
.lot-person-text small { font-size: 14px; line-height: 1.3; color: var(--ink-2); }

/* ---------- Send to a member ---------- */
.lot-send-post { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--lot-inset); font: 600 15px/1.4 var(--sans); color: var(--ink); }
.lot-send-post svg { flex: 0 0 auto; color: var(--clay-dark); }
.lot-send-post span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lot-people-list { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.lot-person-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; margin: 0; padding: 8px 10px 8px 12px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.lot-person-row .lot-person { flex: 1 1 auto; }
.lot-person-row:active { background: var(--paper-2); }
.lot-person-row:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lot-people-none { margin-top: 8px; font-size: 15px; }
.lot-chosen-person { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 10px 8px 12px; border: 1.5px solid var(--clay); border-radius: 14px; background: color-mix(in srgb, var(--clay) 10%, var(--paper)); }
.lot-chosen-person .lot-person { flex: 1 1 auto; }
.lot-send-form .btn[type="submit"] { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- Sheets whose body scrolls (lot-split): the handle and the header stay put ---------- */
/* The dialog itself never scrolls; .lot-sheet-body does, and keeps its scrolling to itself (no rubber-banding the
   page behind, smooth on iPhone). swipe.js then closes the sheet from the handle or the header at any time, and from
   the body only once it's scrolled to the top. */
.lot-sheet.lot-split[open] { display: flex; flex-direction: column; max-height: 92dvh; overflow: hidden; }
.lot-split > .sheet-head { flex: 0 0 auto; }
.lot-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: 0 -6px; padding: 0 6px 2px; }
.lot-sheet-body > .pf-form { padding-top: 12px; }
/* The back header of a sheet's second page: ‹ Back at the left, the page's name after it. */
.lot-sheet-head-back { justify-content: flex-start; gap: 4px; }
.lot-sheet-head-back h3 { flex: 1 1 auto; min-width: 0; }
.lot-sheet-back {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0; min-width: 48px; min-height: 48px; margin: 0 0 0 -10px; padding: 0 12px 0 4px;
  border: 0; border-radius: 999px; background: none; color: var(--clay-dark); font: 600 17px var(--sans); cursor: pointer;
}
.lot-sheet-back svg { flex: 0 0 auto; }
.lot-sheet-back:active { background: var(--paper-2); }
.lot-sheet-back:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }

/* ---------- The More sheet (and the topics a search finds) ---------- */
.lot-topics { max-height: 92dvh; } /* lot-split: the body scrolls */
.lot-topic-btn { width: 100%; margin: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.lot-topic-list { display: grid; gap: 2px; margin: 8px 0 0; padding: 0; list-style: none; }
.lot-topic {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 10px 6px 8px;
  border-radius: 14px; color: var(--ink); text-decoration: none;
}
.lot-topic:active { background: var(--paper-2); }
.lot-topic.on { background: var(--pf-tint); }
.lot-topic.on > svg { color: var(--clay-dark); }
.lot-topic:focus-visible { outline: 2px solid var(--clay); outline-offset: -2px; }
.lot-topic .pf-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--lot-inset); color: var(--clay-dark); }
.lot-topic .pf-row-text b { font-size: 17px; }
.lot-topic .pf-row-text small { font-size: 14px; }
.lot-topics .lot-pick-label { margin: 16px 0 6px; }
.lot-topics .lot-chips.wrap { margin: 0; }
.lot-topic-mine .lot-topic { min-height: 56px; }
.lot-topic-men .lot-topic { min-height: 64px; }
.lot-man-face { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--c, var(--clay)); }
.lot-man-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lot-topics .lot-men-note { margin: 6px 4px 4px; font-size: 13px; }
.lot-found-topics { margin: 0 0 8px; padding: 6px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow); }

/* ---------- A member's page ---------- */
.lot-member { display: grid; gap: 12px; margin-top: 14px; padding: 18px 16px 16px; }
.lot-member > * + * { border-top: 0; }
.lot-member-top { display: flex; align-items: center; gap: 16px; }
.lot-member-who { min-width: 0; display: grid; gap: 2px; }
.lot-member-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font: 700 24px/1.2 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.lot-member-name .pf-verified { margin-left: 0; }
.lot-member-handle { margin: 0; font: 500 16px/1.3 var(--sans); color: var(--ink-2); overflow-wrap: anywhere; }
.lot-member-who .lot-checkin { justify-self: start; margin: 2px 0 1px; font-size: 14px; }
.lot-member-who .lot-checkin svg { width: 14px; height: 14px; }
.lot-member-fact { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink); }
.lot-member-fact svg { flex: 0 0 auto; color: var(--clay-dark); }
.lot-member-fact .pf-verified { margin-left: 0; }
.lot-member-fact a { color: var(--clay-dark); font-weight: 600; }
.lot-member-bio { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.lot-member-counts { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.lot-member-counts b { color: var(--ink); }
.lot-member-actions .btn { flex: 1 1 140px; }
.lot-member-actions .btn.ghost { color: var(--ink); }
.lot-member-posts { margin-top: 24px; }
.lot-member-none { margin: 4px; }

/* ---------- Search ---------- */
.lot-search-box { min-height: 58px; margin-bottom: 14px; padding-right: 4px; }
.lot-search-box input { font-size: 18px; }
.lot-search-clear { color: var(--ink-2); }
.lot-found-title { margin-top: 20px; }
.lot-found-list { margin: 0; padding: 0; list-style: none; }
.lot-found-c a { display: grid; gap: 6px; min-height: 64px; padding: 12px 16px; color: var(--ink); text-decoration: none; }
.lot-found-c a:active { background: var(--paper-2); }
.lot-found-c a:focus-visible { outline: 2px solid var(--clay); outline-offset: -3px; }
.lot-found-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.lot-found-head b { font: 600 15px/1.3 var(--sans); }
.lot-found-head small { font-size: 13px; color: var(--ink-2); }
.lot-found-text { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.lot-found-on { font-size: 14px; color: var(--ink-2); }
.lot-found-on em { font-style: normal; font-weight: 600; color: var(--clay-dark); }
.lot-search-note { margin: 12px 4px 0; font-size: 14px; }

/* ---------- New post ---------- */
.lot-chips { display: flex; gap: 8px; margin: 0 -16px 14px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 16px; }
.lot-chips::-webkit-scrollbar { display: none; }
.lot-chips.wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.lot-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: 0; padding: 0 16px;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 600 15px/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 2px rgba(11, 31, 59, 0.05);
}
.lot-chip svg { flex: 0 0 auto; color: var(--clay-dark); }
.lot-chip.on { border-color: var(--clay); background: var(--clay); color: var(--navy); }
.lot-chip.on svg { color: var(--navy); }
.lot-chip:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lot-compose { gap: 18px; }
.lot-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.lot-kind {
  display: grid; justify-items: center; gap: 4px; min-height: 96px; padding: 12px 6px 10px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; text-align: center; cursor: pointer;
}
.lot-kind-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pf-tint); color: var(--clay-dark); }
.lot-kind b { font: 600 14px/1.25 var(--sans); }
.lot-kind small { font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.lot-kind[aria-checked="true"] { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 12%, var(--paper)); }
.lot-kind[aria-checked="true"] .lot-kind-ico { background: var(--blue); color: var(--navy); }
.lot-kind:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lot-picker { display: grid; gap: 12px; }
.lot-picker:empty { display: none; }
.lot-pick-label { margin: 0; font: 600 15px/1.3 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.lot-pick-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lot-pick {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.lot-pick .art { display: block; width: 48px; height: 48px; overflow: hidden; border-radius: 9px; background: var(--paper-2); }
.lot-pick .art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lot-pick-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.lot-pick-text b { font: 600 16px/1.3 var(--sans); overflow-wrap: anywhere; }
.lot-pick-text small { font-size: 14px; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; }
.lot-pick-check { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: transparent; }
.lot-pick.on { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 10%, var(--paper)); }
.lot-pick.on .lot-pick-check { background: var(--blue); color: var(--navy); }
.lot-pick:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lot-chosen { display: flex; align-items: center; gap: 10px; }
.lot-chosen .lot-att { flex: 1 1 auto; min-width: 0; }
.lot-search { margin: 0; }
.lot-ev-seg { margin: 0; }
.lot-own-event { display: grid; gap: 14px; }
.lot-poll-edit { display: grid; gap: 8px; }
.lot-poll-row { display: flex; align-items: center; gap: 6px; }
.lot-poll-row input {
  flex: 1 1 auto; min-width: 0; min-height: 50px; margin: 0; padding: 12px 14px;
  border: 1px solid var(--line-strong, var(--line)); border-radius: 12px; background: var(--pf-field); color: var(--ink); font: 17px/1.4 var(--sans); box-shadow: none; -webkit-appearance: none; appearance: none;
}
.lot-poll-row input:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 22%, transparent); }
.btn.lot-add-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 48px; margin: 0; padding: 0 18px; }
.lot-talk-card { margin: 0 0 14px; padding: 6px; }
.lot-talk-card .lot-att { background: none; }
.lot-pl-list { display: grid; gap: 4px; margin: 0; padding: 6px; list-style: none; }
.lot-pl-list > li { padding: 0; }
.lot-pl-list > li + li { border-top: 1px solid var(--line); }
.lot-pl-list .lot-att { background: none; }
.lot-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lot-sec-head a { font: 600 15px var(--sans); color: var(--clay-dark); text-decoration: none; }
.lot-history-talks { margin-top: 4px; margin-bottom: 20px; }
.lot-men { margin-bottom: 20px; }

/* ---------- The guidelines ---------- */
.lot-guide { font-size: 17px; }
.lot-anon-box { margin-top: 16px; }

/* ---------- The floating + (the Parking Lot's home only) ---------- */
/* A 56px round blue button with a white plus, above the mini player and the navigation (--dock-h: app.js measures
   the dock), inside the page's column on a wide screen. Dragged, it keeps the spot it was left in (.placed: left and
   top instead); it hides whenever something sits over the page. */
.lot-fab {
  position: fixed; z-index: 29; right: max(16px, calc((100% - 640px) / 2 + 16px)); bottom: calc(var(--dock-h, 84px) + 16px);
  display: grid; place-items: center; width: 56px; height: 56px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: #1f6fb3; color: #fff;
  box-shadow: 0 6px 18px rgba(11, 31, 59, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.35);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms, box-shadow 120ms;
}
.lot-fab svg { pointer-events: none; }
.lot-fab.placed { right: auto; bottom: auto; }
.lot-fab.dragging { cursor: grabbing; transform: scale(1.08); box-shadow: 0 12px 28px rgba(11, 31, 59, 0.38), 0 0 0 2px rgba(255, 255, 255, 0.5); transition: none; }
.lot-fab:active { transform: scale(0.96); }
.lot-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.lot-fab[hidden] { display: none !important; }
:root[data-theme="dark"] .lot-fab { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(248, 244, 233, 0.35); }

/* ---------- The quick post sheet: two pages (the simple one, More options) in one body ---------- */
.lot-quick { max-height: 92dvh; } /* lot-split: the body scrolls; keyboardFit caps it lower with the keyboard up */
.lot-quick .pf-form { padding: 12px 0 0; gap: 14px; }
.lot-quick-page { display: grid; gap: 14px; }
.lot-quick-page[hidden] { display: none !important; }
.lot-quick .pf-set-plain.lot-quick-flavors { padding: 0; }
.lot-quick-where { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--lot-inset); font-size: 15px; line-height: 1.45; color: var(--ink); }
.lot-quick-where svg { flex: 0 0 auto; color: var(--clay-dark); }
.lot-quick-where b { font-weight: 600; }
/* With the keyboard up (lot.js caps the sheet at the visible part of the screen): the fine print steps aside. */
.lot-quick.keyboard .lot-quick-note, .lot-quick.keyboard .lot-anon-hint { display: none; }
.lot-quick.keyboard .pf-form { gap: 10px; }
.lot-quick-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lot-quick-kind {
  display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 64px; padding: 8px 2px 7px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink);
  font: 600 12px/1.15 var(--sans); text-align: center; cursor: pointer; overflow-wrap: anywhere;
}
.lot-quick-kind svg { color: var(--clay-dark); }
.lot-quick-kind[aria-checked="true"] { border-color: var(--clay); background: color-mix(in srgb, var(--clay) 12%, var(--paper)); }
.lot-quick-kind[aria-checked="true"] svg { color: var(--ink); }
.lot-quick-kind:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.lot-quick-picker:empty { display: none; }
.lot-quick textarea { min-height: 88px; }
.lot-quick-actions .btn { flex: 1 1 140px; }
.lot-quick-note { font-size: 14px; }
.lot-quick .pf-set-plain { padding: 0; }
.lot-quick .pf-set-plain .pf-set-text b { font-size: 16px; }
.lot-send-sheet, .lot-sheet.pf-sheet { max-height: 92dvh; overflow-y: auto; }

/* ---------- Narrow phones ---------- */
@media (max-width: 380px) {
  .lot-title { font-size: 26px; }
  .lot-card, .lot-thread { padding: 12px 12px 4px; }
  .lot-actions { margin: 0 -6px; }
  .lot-act { padding: 0 7px; }
  .lot-kinds { grid-template-columns: repeat(3, 1fr); }
  .lot-kind { min-height: 90px; padding: 10px 4px 8px; }
  .lot-quick-kind { font-size: 11.5px; padding: 8px 1px 6px; }
  .lot-c-kids { padding-left: 10px; }
  .lot-c { padding-left: 14px; }
  .lot-c-line { width: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lot-poll-fill { transition: none; }
  .lot-fab { transition: none; }
  .lot-c.pf-hilite { animation: none; background: var(--pf-tint); }
}