/* host screens (SPEC 3.2, 3.3.0 Hosting). System tokens and components live
   in ../app.css; this file only places them. app.css @imports this file
   first, so an override of a system class needs one more class to win. */

/* ---------------------------------------------------------------- shared */

/* The event name is the display line: two lines at most on a phone. */
.host-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 720px) { .host-title { -webkit-line-clamp: 2; } }


/* A folded block whose summary is a plain line of body text. */
.host-fold > summary, .host-links > summary {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; list-style: none; cursor: pointer;
  font-weight: 500; color: var(--ink);
}
.host-fold > summary::-webkit-details-marker, .host-links > summary::-webkit-details-marker { display: none; }
.host-fold > summary::after, .host-links > summary::after {
  content: ""; width: 7px; height: 7px; margin: 0 2px 3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--duration);
}
.host-fold[open] > summary::after, .host-links[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
.host-fold > .list, .host-fold > .card, .host-fold > .host-cards, .host-fold > p, .host-fold > ol { margin-top: var(--space-2); }

/* ---------------------------------------------------------------- start (3.2.0), beta (3.2.9), Hosting (3.3.0) */

.host-form .form-actions, .beta-form .form-actions { margin-top: var(--space-4); }
.host-links { margin-bottom: var(--space-2); }
.host-links > .field:first-of-type { margin-top: var(--space-2); }
.dictate { margin-top: var(--space-1); justify-self: start; }

.lv.host-plan-row { grid-template-columns: minmax(0, 1fr) auto; }
a.lv-label.host-plan-link { color: var(--ink); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv.host-plan-row .lv-value { font-weight: 400; color: var(--text-2); font-size: var(--fs-meta); }
.host-home .claim-form .field { margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------- the plan (3.2.1) */

/* Header actions: Edit brief opens its form as a popover at 1440, in place
   on a phone. Preview is a phone control; the side card shows it wide. */
.host-plan .pagehead-act { position: relative; }
.brief-edit > summary { list-style: none; cursor: pointer; min-height: 44px; }
.brief-edit > summary::-webkit-details-marker { display: none; }
.brief-edit-body {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 15;
  width: 480px; padding: var(--space-4);
  background: var(--surface); border: 0; border-radius: var(--radius-pop);
  box-shadow: var(--shadow-pop);
}
.brief-edit-body .choice-row { padding: 0; margin-bottom: var(--space-2); }
.brief-edit-body .form-actions { margin-top: var(--space-3); }

/* The title is the edit (fix round 1, 21 Oct): the name is the summary,
   underlined only under the pointer or focus; open, the form sits in place
   under it, its Save the page's one filled button while every other one
   goes outlined; the rebuild box is a plain checkbox, not a washed chip. */
.host-plan .pagehead > .host-title-edit { grid-column: 1 / -1; }
.host-title-edit > summary { display: block; min-height: 0; }
.host-title-edit > summary:focus-visible .host-title { text-decoration-style: solid; }
@media (hover: hover) { .host-title-edit > summary:hover .host-title { text-decoration-style: solid; } }
.host-title-edit > summary:focus-visible { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 4px; }
.host-title-edit .brief-edit-body { position: static; width: auto; max-width: var(--w-form); margin-top: var(--space-3); box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius-card); }
.brief-edit-body .choice-row.brief-rebuild, .brief-edit-body .choice-row.brief-rebuild:has(input:checked) { background: none; border: 0; color: var(--text-2); font-size: var(--fs-meta); min-height: 44px; }
.host-plan:has(.host-title-edit[open]) .brief-save { background: var(--accent); border-color: var(--accent); color: #fff; }
.host-plan:has(.host-title-edit[open]) .btn-primary:not(.brief-save) { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }

@media (max-width: 720px) {
  /* Edit sits on the header line, beside "Dinner · 16 seats", so the name
     has the whole width and holds one line at 375 (round 3 shared); the
     first guest stays inside the first 400 px (decision §2). Open, the
     form takes the full width. */
  .host-plan .pagehead { grid-template-columns: minmax(0, 1fr) auto; }
  .host-plan .pagehead > h1 { grid-column: 1 / -1; }
  .host-plan .pagehead > .plan-hl-clip { grid-column: 1; grid-row: 2; }
  .host-plan .pagehead-act { grid-column: 2; grid-row: 2; align-self: start; }
  .host-plan .pagehead-act:has(.brief-edit[open]) { grid-column: 1 / -1; grid-row: auto; }
  .host-plan .pagehead-act { min-width: 0; }
  .brief-edit[open] { flex: 1 1 100%; min-width: 0; }
  .brief-edit-body { position: static; width: auto; max-width: 100%; margin-top: var(--space-2); box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius-card); }
  .brief-edit-body input, .brief-edit-body textarea, .brief-edit-body select { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
}

/* The one page (decision §2): the header line under the title, Guests as
   the main column, context on the right at 1440 and after the list at 375. */
.host-plan .pagehead { row-gap: 0; }
/* The separators are each item's own ::before, set in the gap to its left;
   the row is pulled left by one gap and its wrapper clips sideways, so an
   item that starts a line hides its dot: no orphan "·" at a wrap. Clip on
   x only, so the editors' popovers still drop below. */
.plan-hl-clip { grid-column: 1 / -1; overflow-x: clip; margin-top: var(--gap-tight); }
.plan-hl {
  --hl-gap: 20px;
  display: flex; flex-wrap: wrap; align-items: center;
  row-gap: var(--space-1); margin-left: calc(-1 * var(--hl-gap));
  font-size: var(--fs-body); line-height: var(--lh-body);
}
.hl-item { position: relative; min-width: 0; padding-left: var(--hl-gap); align-self: center; }
.hl-item::before {
  content: "·"; position: absolute; left: 0; width: var(--hl-gap); top: 50%; transform: translateY(-50%);
  text-align: center; color: var(--muted);
}
.hl-edit { position: relative; }
.hl-edit > summary { list-style: none; cursor: pointer; }
.hl-edit > summary::-webkit-details-marker { display: none; }
.hl-value {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--ink); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid transparent;
}
/* A chosen value reads as plain text at rest (POLISH §0.2: a chosen value
   and an unchosen one are two treatments, not three); pointer or focus
   shows it is an editor. The unchosen .hl-ask stays a secondary chip. */
.hl-value { border-bottom: 0; }
/* One visible treatment for every editable value, kept on touch (fix
   round 2: chosen values and the title read as static text, hover does
   not exist on the phone): a muted dotted underline at rest, solid under
   the pointer or focus. Chosen values stay ink, questions accent. */
.hl-value, .host-title-edit .host-title {
  text-decoration: underline dotted; text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1.5px; text-underline-offset: 5px;
}
.host-title-edit .host-title { text-underline-offset: 8px; text-decoration-thickness: 2px; }
.hl-value.hl-ask { text-decoration-color: currentColor; }
.hl-edit > summary:focus-visible .hl-value, .hl-edit > summary.hl-value:focus-visible, a.hl-value:focus-visible { text-decoration-style: solid; text-decoration-color: currentColor; }
@media (hover: hover) { .hl-value:hover { text-decoration-style: solid; text-decoration-color: currentColor; } }
/* An unchosen value: the same text, in accent, inline (no chip). */
.hl-value.hl-ask { color: var(--accent-text); }
/* One header line at 375 too: the unchosen questions shorten to "When?"
   and "Where?" there ("Dinner · 16 seats · When? · Where?"); the long
   words stay for a screen reader. */
.hl-short { display: none; }
@media (max-width: 720px) {
  .hl-ask .hl-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hl-ask .hl-short { display: inline; }
}
.hl-form {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 15;
  display: flex; align-items: end; gap: var(--space-2);
  padding: var(--space-3); background: var(--surface);
  border: 0; border-radius: var(--radius-pop); box-shadow: var(--shadow-pop);
}
.hl-form .field { margin: 0; }
.hl-form input[type="number"] { width: 88px; }
.hl-form select { width: 168px; }
.hl-form input[type="date"] { width: 168px; }
.pagehead-meta.plan-goal { grid-column: 1 / -1; margin-top: var(--gap-tight); color: var(--text-2); font-size: var(--fs-body); line-height: var(--lh-read); }
@media (max-width: 720px) {
  .hl-item:has(> .hl-edit[open]) { flex: 1 1 100%; }
  .hl-form { position: static; flex-wrap: wrap; margin-top: var(--space-2); box-shadow: none; border: 1px solid var(--line); border-radius: var(--radius-card); }
  .hl-form .field { flex: 1 1 120px; }
  .hl-form select, .hl-form input[type="date"] { width: 100%; }
}

.plan-cols { margin-top: var(--gap-section); }
.plan-guests .section-head { margin-bottom: var(--gap-tight); }
.plan-count { margin-bottom: var(--gap-head); }
.plan-guests .section-head + .guest-list { margin-top: var(--gap-head); }

/* A guest row (decision 2 §1): line one is the name and one right slot
   (one muted fact or one outlined button); line two is one proof fact,
   then tails that drop whole when they do not fit. Never a third line;
   44 px when line two is absent. */
.gr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--space-3); row-gap: 0; min-height: var(--row-min-sm); padding: var(--pad-row-sm);
  background: var(--surface);
}
.gr-name { grid-column: 1; grid-row: 1; min-width: 0; font-weight: var(--fw-name); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.gr-name { color: var(--accent-text); }
@media (hover: hover) { a.gr-name:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } }
.gr-slot { grid-column: 2; grid-row: 1; justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); white-space: nowrap; }
.gr-slot form { display: inline-flex; align-items: center; gap: var(--space-2); }
.gr-fact { color: var(--text-3); font-size: var(--fs-meta); line-height: var(--lh-meta); white-space: nowrap; }
/* Line two: one proof fact, whole, then the role. The role carries its own
   dot and wraps whole onto a clipped second line, so when it does not fit
   it is gone, never cut mid-fact. A lead longer than plan.FactChars
   (.is-long) wraps to a second text line on the phone instead of being
   cut, and its tail drops whole. A top row's role is its last tail
   ("hosts … · co-host"), so it drops whole, never dangles alone. */
.gr-line {
  grid-column: 1 / -1; grid-row: 2; min-width: 0;
  max-height: var(--lh-row); overflow: hidden;
  font-size: var(--fs-row); line-height: var(--lh-row); color: var(--text-2);
}
/* Inline flow: each fact is unbreakable, so a tail that does not fit moves
   whole to the next (clipped) line, and the space before its dot falls
   away at the start of that line. */
.gr-lead, .gr-tail { white-space: nowrap; }
.gr-tail::before { content: " ·\00a0"; color: var(--muted); }
.gr-line.is-long .gr-lead { white-space: normal; }
/* Phone: line two is one line, ever (decision 2 §1, fix round 2: a long
   room wrapped to a third line). A lead too long for 343 px shortens its
   named event with an ellipsis and keeps the verb before it and the month
   after it (", May"); the tail drops whole. */
@media (max-width: 720px) {
  .gr-line.is-long > .gr-tail { display: none; }
  .gr-line.is-long .gr-lead { display: flex; max-width: 100%; white-space: pre; }
  .gr-line.is-long .gr-lead > .gr-strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.gr-strong { color: var(--ink); }
/* An event name on a row opens its glimpse in the panel (DECISION-4 §15): reads as the name, underlines on hover. */
a.gr-ev { color: var(--ink); text-decoration: none; }
a.gr-ev:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) { a.gr-ev:hover { text-decoration: underline; text-underline-offset: 2px; } }
.gr-addwhy { color: var(--text-3); text-decoration: none; }
@media (hover: hover) { .gr-addwhy:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } }
/* A no keeps its name in ink: the muted fact in the slot is the only
   signal (decision 2 §1: no tint carries state). */
.gr.is-muted .gr-fact { color: var(--text-3); }
/* "or ask Zach": the second choice, once Zach is a yes; 1440 only. */
.gr-or { display: none; color: var(--text-2); font-size: var(--fs-meta); }
.gr-or::before { content: "·\00a0"; color: var(--muted); }
.gr-sent [data-not-yet]::before, .gr-sent [name="reply"]::before { content: "·\00a0"; color: var(--muted); }
/* Copy, then "Sent it? · Yes · Not yet" in the same slot, never side by
   side: once app.js has run (it shows Not yet) and the question is out,
   the button steps aside; Not yet puts the question away and the button
   comes back. Without script both stay, which still works. A copy recorded
   before a reload asks at once (.is-asking). */
.gr-slot:has(> .gr-sent:not([hidden]) [data-not-yet]:not([hidden])) > [data-copy],
.gr-slot.is-asking:has(> .gr-sent:not([hidden])) > [data-copy] { display: none; }
.plan-more { margin-top: var(--space-3); text-align: center; }
.plan-picks { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-count { flex-shrink: 0; }
.plan-addwhy { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--muted); text-underline-offset: 3px; }
@media (hover: hover) { .plan-addwhy:hover { color: var(--accent-text); text-decoration-color: currentColor; } }
@media (min-width: 1101px) {
  /* One line at 1440 when it fits; a long audience takes its own line
     first (the count wraps under it) and truncates only past --w-rows (720 px). */
  .plan-picks-head { max-width: var(--w-rows); flex-wrap: wrap; column-gap: var(--space-3); }
  .plan-picks { flex-shrink: 0; max-width: 100%; }
  .plan-count { white-space: nowrap; }
  .guest-list { max-width: var(--w-rows); }
  .plan-guests .plan-more { max-width: var(--w-rows); }
  .gr-or { display: inline; }
}
.plan-guests { min-width: 0; }
@media (max-width: 720px) {
  /* Two lines at 375: the audience truncates, the count line under it. */
  .plan-picks-head { flex-direction: column; align-items: stretch; gap: 0; }
  .plan-picks { width: 100%; }
  /* The rows take the page's full 343 px (decision 2 §1: the lead fact is
     composed to fit it): a plain list between hairlines, no card inset. */
  .plan-guests .guest-list { border-left: 0; border-right: 0; border-radius: 0; background: transparent; overflow: visible; }
  .plan-guests .gr { padding: var(--space-2) 0; background: transparent; }
}

.plan-empty { color: var(--text-2); }
/* The send button is docked (find.css .dock, DECISION-4 §9). */
.plan-send { margin: 0; }
@media (max-width: 720px) { .gr { padding: var(--space-2) var(--space-3); } }
.plan-after { display: grid; justify-items: start; gap: var(--space-3); color: var(--text-2); }
.plan-after > .t-meta.plan-after-line { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
.plan-after > .list { width: 100%; }
.plan-after:empty { display: none; }

/* Her history sits under the list (DECISION-4 §9: one column, no right
   rail). */
.plan-side-sec { display: grid; gap: var(--space-1); }

/* ---------------------------------------------------------------- similar events (3.2.2) */

.host-tags { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.host-why-head { margin-bottom: var(--space-3); }
.host-room-act { margin-bottom: var(--space-2); }

/* ---------------------------------------------------------------- sponsors (CHA-755)
   The owner's column list (design-off/2026-10-29 round 3, after folk and
   Mercury): our .list surface, hairline rows, one quiet header row, no
   vertical rules or cell borders. The tab alone is 960 wide (--w-list); the
   guest list stays 640. Narrower than 760 (a phone, a laptop) each row
   stacks into lines and the header row hides; nothing scrolls sideways.
   With the company panel open the columns stay (UX review, 29 Oct): the
   panel docks beside the list from 1024 up, and the list drops "What they
   sponsor", which the panel shows. */

.find-page .find-col:has(.sp-table) { max-width: calc(var(--w-list) + 2px); }
.sponsor-list { max-width: var(--w-list); min-width: 0; }
.chips.sp-filter { margin-bottom: var(--space-3); }
.list-basis.sp-basis { margin: 0 0 var(--gap-head); }

.sp-table {
  --sp-cols: minmax(0, 1fr) minmax(0, 1.4fr) 160px 20px;
  container-type: inline-size;
}
/* Panel open: no container (the stacking below never fires), the name and
   the count. */
body:has(#who-panel.is-open) .sp-table { container-type: normal; --sp-cols: minmax(0, 1fr) 128px 20px; }
body:has(#who-panel.is-open) .sp-head, body:has(#who-panel.is-open) .sp-trow { column-gap: var(--space-3); }
body:has(#who-panel.is-open) .sp-table .sp-c2, body:has(#who-panel.is-open) .sp-table .sp-h2 { display: none; }
@media (min-width: 1024px) and (max-width: 1340px) {
  body:has(.sp-table):has(#who-panel.is-open) .content-col { padding-right: var(--w-panel); }
  /* Docked beside the table here too: the docked panel's corners, edge and
     cast shadow, and no scrim (the table beside it stays in use). */
  body:has(.sp-table) #who-panel.pn { top: 0; right: 0; bottom: 0; border: 0; border-radius: var(--radius-panel) 0 0 var(--radius-panel); box-shadow: -1px 0 0 var(--line-card), -16px 0 40px -12px rgba(27, 18, 56, .22); }
  body:has(.sp-table) #who-panel.pn .pn-bar { border-radius: var(--radius-panel) 0 0 0; }
  body:has(.sp-table):has(#who-panel.is-open) .content-col::after { content: none; }
}
/* View more: the stack gap under the table, on the table's own width. */
.sponsor-list .sp-table + .viewmore { margin-top: var(--gap-stack); padding: 0; border-top: 0; max-width: none; }
.sponsor-list .sp-table + .viewmore a::after { content: ""; position: absolute; inset: -12px -8px; }
.sp-new { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sp-new > p { margin: 0; color: var(--text-2); }
.sp-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-list); min-width: 0; overflow: hidden; }
.sp-head, .sp-trow {
  display: grid; grid-template-columns: var(--sp-cols);
  column-gap: var(--space-4); align-items: start;
  padding: 0 var(--space-4);
}
.sp-head {
  align-items: end; padding-top: var(--space-2); padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-row); line-height: var(--lh-row); color: var(--text-3); font-weight: 500;
}
.sp-trow {
  position: relative; padding-top: var(--space-3); padding-bottom: var(--space-3); min-height: var(--row-min);
  transition: background-color var(--duration);
}
.sp-trow + .sp-trow { border-top: 1px solid var(--line); }
@media (hover: hover) { .sp-trow:hover { background: var(--hover); } }
.sp-trow.is-open { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }
/* The whole row opens the company panel. */
.sp-open { position: absolute; inset: 0; z-index: 0; }
.sp-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-list); }
.sp-trow > [role="cell"] { min-width: 0; }

.sp-c1 { display: grid; gap: 2px; }
.sp-name { font-weight: var(--fw-name); color: var(--ink); overflow-wrap: anywhere; }
/* Kinds of event are chips; the topic follows as plain text, so a format
   never reads like an industry. */
.sp-c2 { display: grid; gap: var(--space-1); justify-items: start; }
.pc-chips.sp-chips { margin: 0; flex-wrap: wrap; white-space: normal; }
.pc-chips.sp-chips li { white-space: nowrap; }
/* How they most often sponsor: words, not a chip, so it never reads as one
   phrase with the format ("Paid Hackathon"). */
.sp-type { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; color: var(--ink); }
.sp-topic, .sp-city { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.sp-city { white-space: nowrap; }
.sp-c3 { display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.sp-n { font-weight: 600; color: var(--ink); }
/* "7 similar" under the column header; "7 similar events" where it hides. */
.sp-c3-narrow { display: none; }
.sp-chev { width: 20px; height: 20px; color: var(--muted); align-self: center; }

@container (max-width: 760px) {
  .sp-head { display: none; }
  .sp-trow { grid-template-columns: minmax(0, 1fr) 20px; row-gap: var(--space-1); padding: var(--pad-row); }
  .sp-trow > [role="cell"] { grid-column: 1; }
  .sp-trow > .sp-chev { grid-column: 2; grid-row: 1 / span 3; }
  /* The phone card is three lines at most: the name, the topic, the count
     and city (UX review, 1 Nov: two pill lines made it five). The type and
     the format pills stay in the side panel and the wide column. */
  .sp-c2 { display: block; min-width: 0; }
  .sp-c2 .sp-type, .sp-c2 .sp-chips, .sp-c2:not(:has(.sp-topic)) { display: none; }
  .sp-c2 .sp-topic { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sp-c3-wide { display: none; }
  .sp-c3-narrow { display: inline; }
  /* No dot after the count: it is a pill, and the dot fell inside it
     (owner, 1 Nov); the pill's edge and the gap separate the city. */
  .sp-c3 { display: flex; flex-wrap: wrap; column-gap: var(--space-2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
}

/* The company panel is the person panel's parts; a long company name in a
   section title ("Ran similar events with …") wraps rather than overflow. */
.pn-rooms > .pn-label { overflow-wrap: anywhere; }
/* The panel's two folds, "Show N more" and "Other events they sponsored":
   one text toggle, 44px tall, "Hide ▴" (or ▴) once open, as the attend
   folds do. The unlisted note shares the first one's line, in quieter ink. */
.sp-more > summary.sp-toggle, .sp-other > summary.sp-toggle {
  list-style: none; min-height: var(--control-h-touch); flex-wrap: wrap; gap: 0;
  font-size: var(--fs-meta); line-height: var(--lh-meta);
}
.sp-toggle::-webkit-details-marker { display: none; }
.sp-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-control); }
.sp-more[open] > .sp-toggle .sp-show, .sp-more:not([open]) > .sp-toggle .sp-hide,
.sp-other[open] > .sp-toggle .sp-show, .sp-other:not([open]) > .sp-toggle .sp-hide { display: none; }
@media (hover: hover) {
  .sp-toggle:hover { text-decoration: none; }
  .sp-toggle:hover .sp-show, .sp-toggle:hover .sp-hide { text-decoration: underline; text-underline-offset: 3px; }
}
.sp-toggle .sp-unlisted { color: var(--text-3); font-weight: 400; }

/* ---------------------------------------------------------------- People (3.2.3) */

.host-scope { margin-bottom: var(--space-2); }
/* Fit and Other cities: one scope per line, label · value · action, at
   meta size under the list count (critic r3), not a second card. */
.list.host-filters { margin-bottom: var(--space-4); background: none; border: 0; border-radius: 0; }
.host-filters .lv {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  min-height: 32px; padding: 0; background: none;
  font-size: var(--fs-meta); line-height: var(--lh-meta);
}
/* One line each, label · value · action (fix round 2: a two-column table
   wrapped "Near your goal" onto two lines at 375). */
.host-filters .lv-value::before, .host-filters .lv > .text-action::before { content: "·"; padding: 0 var(--space-2); color: var(--text-3); font-weight: 400; }
.host-filters .lv + .lv { border-top: 0; }
@media (hover: hover) { .host-filters .lv:hover { background: none; } }
.host-filters .lv-value { text-align: left; font-weight: 400; color: var(--ink); }
.host-filters .lv > .text-action { min-height: 32px; display: inline-flex; align-items: center; }
.host-filters .text-action[aria-pressed="true"] { font-weight: 600; }
/* Find people rows are Guests rows (.gr): the name and its LinkedIn on
   line one beside the one slot, the proof on line two. */
.who-row .gr-name > a:first-child { color: var(--accent-text); text-decoration: none; }
@media (hover: hover) { .who-row .gr-name > a:first-child:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } }
.who-row .gr-name .host-li { font-weight: 400; font-size: var(--fs-meta); white-space: nowrap; }
.who-row.is-muted .gr-name > a:first-child { color: var(--text-3); }
.who-row.is-selected { background: var(--accent-wash); box-shadow: inset 2px 0 0 var(--accent); }
.who-verdict { display: grid; gap: var(--space-1); }
.verdict .btn.is-on.who-cross { background: var(--sunk); }

.host-dl { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); }
.host-dl dt { font-weight: 500; color: var(--ink); }
.host-dl dd { margin: 0 0 var(--space-2); color: var(--text-2); }

/* ---------------------------------------------------------------- reach (3.2.4) and the ask card */

.host-cards { display: grid; gap: var(--space-4); }
.ask-card { display: grid; gap: var(--space-2); }
.ask-card.is-primary { border-color: var(--line-strong); }
.ask-card-head { display: grid; gap: 2px; }
.ask-card-head h3 { font-size: var(--fs-body); font-weight: 500; }
.ask-body { min-height: calc(6 * var(--lh-body) + 2 * var(--space-3)); }
.ask-card .btn-group { justify-content: space-between; }
.host-reach .col-main > .ask-card + .host-fold { margin-top: var(--gap-section); }
.host-channels { display: grid; gap: 0; margin-top: var(--space-2); }
.host-channels li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--line);
}
.host-channels li:first-child { border-top: 0; }
.host-channels .t-meta { grid-column: 1; }
.host-channels .text-action { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Search, like, reveal */
.search-form { margin-bottom: var(--space-2); max-width: var(--w-list); }
.search-row .pr-act { flex-wrap: wrap; }
.search-row-offgraph .pr-at { color: var(--warn); }
.reveal-card { display: grid; gap: var(--space-3); }
.host-flat { border-radius: var(--radius-list); }

/* ---------------------------------------------------------------- draws (3.2.5) */

.pr.host-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id act"; }
.pr.host-row > .host-row-act { grid-area: act; }
.pr.host-row > .host-ask { grid-column: 1 / -1; }
.host-row-act {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: var(--space-2) var(--space-3); max-width: 340px;
}
.host-row-act > .draw-name { flex: 1 1 100%; display: grid; gap: var(--space-1); justify-items: end; }
.host-row .pr-why { color: var(--text-2); }
.draw-toggle { display: inline-flex; }
.host-yes.is-on { background: var(--success-wash); border-color: var(--success); color: var(--success); }
.host-ask > summary { list-style: none; min-height: 32px; }
.host-ask > summary::-webkit-details-marker { display: none; }
.host-ask[open] > .ask-card { margin-top: var(--space-2); }
@media (max-width: 720px) {
  .pr.host-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "act"; }
  .host-row-act { justify-content: flex-start; max-width: none; }
  .host-row-act > .draw-name { justify-items: start; }
}
.titles-card .host-sub { margin-top: var(--space-4); font-weight: 500; }
.titles-copy { margin: var(--space-1) 0; }
.titles-card .lv { grid-template-columns: minmax(0, 1fr) auto; }
.titles-card .lv > span:empty { display: none; }
.titles-text { color: var(--ink); }

/* ---------------------------------------------------------------- the ask and venue sheets */

.host-sheet .pagehead-meta { margin-top: var(--space-1); }
.sheet-facts { border-radius: var(--radius-card); display: grid; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); }
.choice-links { display: grid; gap: 0; }
.choice-link {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px;
  color: var(--ink); text-decoration: none;
}
.choice-link::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--line-strong); background: var(--surface);
}
.choice-link[aria-pressed="true"] { font-weight: 500; }
.choice-link[aria-pressed="true"]::before { border: 6px solid var(--accent); }
@media (hover: hover) { .choice-link:hover { text-decoration: none; color: var(--accent-text); } }
.sheet-date { padding-top: var(--space-2); border-top: 1px solid var(--line); }
details.sheet-facts { display: block; }
details.sheet-facts[open] > .choice-links { margin-top: var(--space-1); }
.sheet-route > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-1); min-height: 44px; }
.sheet-route > summary::-webkit-details-marker { display: none; }
/* Her note on a guest (decision 2 §2b): one line closed, her words in body
   colour; open, the field. */
.sheet-note > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--space-1); min-height: 44px; }
.sheet-note > summary::-webkit-details-marker { display: none; }
.sheet-note-body { overflow-wrap: anywhere; }
.sheet-note-form { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-2); }
.sheet-note-form .field-textarea { width: 100%; }
.sheet-form { display: grid; gap: var(--space-3); }
.sheet-form .field, .sheet-form .field-textarea { margin: 0; }
.sheet-act { gap: var(--space-3); }
.sheet-sent { display: inline-flex; align-items: center; gap: var(--space-2); }
.sheet-answer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.sheet-answer .host-row-act { justify-content: flex-end; max-width: none; flex: 1 1 auto; }
.sheet-answer .draw-name { justify-items: start; }
.sheet-other { margin-top: var(--space-3); }
.sheet-clear { margin-bottom: var(--space-3); }
.venue-own { display: grid; gap: var(--space-2); justify-items: start; }
.venue-own .field { width: 100%; margin: 0; }
.venue-row .host-row-act form { display: inline-flex; }
.venue-row .venue-ask { justify-self: start; font-size: var(--fs-meta); line-height: var(--lh-meta); min-height: 32px; display: inline-flex; align-items: center; }
.sheet-date .btn-sm { margin-left: var(--space-1); }
.host-voice { margin-top: var(--space-2); }
@media (max-width: 720px) {
  .sheet-act > .btn-primary { flex: 1 1 100%; }
  .pr.host-row.venue-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id act"; }
}

/* ---------------------------------------------------------------- design (3.2.7) */

.shape-form .lv { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); }
.shape-form .host-lv-input { text-align: left; font-weight: 500; }
.host-day { margin-top: var(--space-3); }
.host-design .lv-value { white-space: normal; }
.host-words { margin-top: var(--space-2); }
.host-question .pr-why-col { justify-items: end; text-align: right; }
@media (max-width: 720px) {
  .shape-form .lv { grid-template-columns: minmax(0, 96px) minmax(0, 1fr); }
  .shape-form .lv-label { grid-column: 1; grid-row: 1; align-self: center; }
  .shape-form .host-lv-input { grid-column: 2; grid-row: 1; }
  .host-question .pr-why-col { justify-items: start; text-align: left; }
}

/* ---------------------------------------------------------------- outcome, worked (3.2.8) */

.host-outcome .choice { margin-bottom: var(--space-5); }
.host-outcome .choice > legend .t-meta { font-weight: 400; }
.host-worked .stat { margin: 0; }

/* ---------------------------------------------------------------- round 1 fixes */

/* Draft invites waits for the first person in. */
.btn.is-disabled { pointer-events: none; opacity: 0.55; }
.host-dl > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-1) 0; }
.host-dl > div > dd { margin: 0; }

/* Hosts: the said-yes mark sits under the ask it answers. */
.host-ask-yes { justify-content: flex-start; max-width: none; margin-top: var(--space-2); }
.host-said .host-row-act { justify-content: flex-end; max-width: none; }
@media (max-width: 720px) {
  /* A host row's one Ask stays beside the name; rows with a said-yes mark stack. */
  .pr.host-row:not(:has(.draw-toggle)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id act"; }
}
/* Below the side panel's width the default profile is hidden, so its row
   is not marked either. */
@media (max-width: 1100px) { .who-row.is-selected.is-default { box-shadow: none; background: none; } }

/* The voice setting: its value on the face, the editor opens in place. */
.host-setting > summary { list-style: none; cursor: pointer; }
.host-setting > summary::-webkit-details-marker { display: none; }
.host-setting .host-voice { margin: 0; padding: 0 var(--space-4) var(--space-4); }
.host-setting .lv-value { overflow-wrap: anywhere; }

/* "Sent it? · Yes · Not yet" (critic r3): the middots part the three so
   "Yes Not yet" never reads as one phrase. The one before Not yet shows
   only while Not yet does (app.js unhides it), so without script the line
   ends "Sent it? · Yes". */
.sent-sep { color: var(--muted); }
.sent-sep-ny { display: none; }
.sheet-sent:has([data-not-yet]:not([hidden])) .sent-sep-ny { display: inline; }

/* Co-hosts and speakers: an asked row's state, in full weight, the plan
   page's words ("asked today", "yes"). */
.host-row .pr-state { color: var(--ink); font-weight: 500; font-size: var(--fs-meta); line-height: var(--lh-meta); }

/* The ask sheet's subject wraps whole (critic r3: one clipped line read
   "An invitation: a dinner for 16 climate found…"); it grows with its
   words where the browser sizes fields to content. */
.host-sheet .ask-subject { min-height: 0; resize: none; field-sizing: content; padding: var(--space-2) var(--space-3); }

.plan-ctx .lv-label { white-space: nowrap; }
.plan-ctx .lv-value { min-width: 0; }
/* An answered ask (fix round 2): label·value lines, no filled button. */
.sheet-answered { padding: 0; }
.sheet-answered .lv { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.sheet-answered .lv-label { white-space: nowrap; }
.sheet-answered .lv-value { margin-right: auto; text-align: left; }
.sheet-answered .lv-select { width: auto; max-width: 100%; margin-left: auto; }

/* A picked row's slot (fix round 2): "✓ Picked", quiet, still the tap that
   unpicks; Pick stays outlined on the rows not picked yet. */
.who-verdict .who-tick.is-on { border-color: transparent; background: none; color: var(--text-2); font-weight: 500; }
@media (hover: hover) { .who-verdict .who-tick.is-on:hover { color: var(--ink); background: var(--hover); } }

/* After a copy the slot says it took, then asks (fix round 2, 21 Oct). */
.gr-sent.is-copied > .gr-fact::before { content: "Copied ·\00a0"; color: var(--text-3); }

/* A list row's name with its role, or its bio in quotes, small beside it
   (plan.RowWho, CHA-580). The name keeps its width; the role or bio takes
   what is left and is cut with an ellipsis. The bio's closing quote is a
   sibling after the cut text, so the ellipsis sits inside the quotes. */
.gr-who { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.gr-who > .gr-name { flex: 0 1 auto; max-width: 100%; }
.gr-role, .gr-bio { flex: 1 1 0; min-width: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); white-space: nowrap; }
.gr-role { overflow: hidden; text-overflow: ellipsis; }
.gr-bio { display: flex; }
.gr-bio::before { content: "\201C"; flex: none; }
.gr-bio::after { content: "\201D"; flex: none; }
.gr-bio-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* The LinkedIn mark after a name (li_mark): a 16px icon from the sprite in the
   muted grey, ink on hover, no box (owner calls, 30 Oct, CHA-955). It sits on
   the name's text centre; the tap area is 44x44 (icon + ::after's reach), and
   its left edge stays inside the gap to the name (CHA-580). */
.in-mark { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; border: 0; color: var(--text-3); text-decoration: none; }
.in-mark svg { width: 16px; height: 16px; display: block; }
.in-mark::after { content: ""; position: absolute; inset: -14px -24px -14px -4px; }
.in-mark:focus-visible { color: var(--ink); outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) { .in-mark:hover { color: var(--ink); } }

/* Editing the brief (CHA-733): what a city change does, said before saving;
   and the question after a changed brief is saved. */
.field-note { margin: var(--space-1) 0 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
.brief-changed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.brief-changed p { margin: 0; }
.brief-changed-acts { display: flex; align-items: center; gap: var(--space-2); }
.brief-changed-acts form { margin: 0; }
.brief-msg { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.brief-msg p { margin: 0; }