/* attend screens (SPEC 3.1, 3.3.3 fork, 3.3.5 About you). System tokens and
   components live in ../app.css; this file only places them. */

/* ---------------------------------------------------------------- fork (3.3.3) */

.fork-doors {
  display: grid; grid-template-columns: repeat(2, minmax(0, 560px));
  gap: var(--gap-cols); align-items: start;
}
.fork-door { display: grid; gap: var(--space-2); }
.fork-door-head { display: flex; align-items: center; gap: var(--space-2); }
.fork-door-pill { order: 2; }
.fork-door-act { margin-top: var(--space-3); justify-self: start; }
.fork-door .claim-form { justify-self: stretch; }
.fork-door .claim-form .field { margin-bottom: 0; }
@media (max-width: 1100px) {
  .fork-doors { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* ---------------------------------------------------------------- the attend page column */

/* One column, left-aligned (SPEC 2.4): the header and tabs run the content
   width, a single-purpose list runs 720. */
.go-page > :not(.pagehead):not(.tabs):not(.cols):not(.notice) { max-width: var(--w-list); }
.go-page > .notice { max-width: var(--w-list); }
.go-cal-page > :not(.pagehead):not(.tabs) { max-width: none; }

/* The control row: the week pills · List · Calendar on one line, scrolling
   sideways at 375. It owns the block gap to what is under it. */
.go-controls {
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--space-3);
  margin-bottom: var(--gap-block);
  overflow-x: auto; scrollbar-width: none;
}
.go-controls::-webkit-scrollbar { display: none; }
.go-controls > .seg { flex: none; overflow: visible; }
.go-controls > .seg + .seg { padding-left: var(--space-3); border-left: 1px solid var(--line); }
@media (max-width: 720px) {
  /* The week pills on one line, List · Calendar on the next, both in full
     (UX review H1: in one scrolling row Calendar sat past the screen's
     edge). No divider stub on the wrapped line. */
  .go-controls { gap: var(--gap-stack) var(--space-2); flex-wrap: wrap; overflow: visible; }
  .go-controls > .seg + .seg { border-left: 0; padding-left: 0; }
  .go-controls .seg-item { padding: 0 var(--space-2); min-width: 44px; justify-content: center; }
}
/* The selections under the goal are quiet (UX review H2: the goal is the
   strongest thing on the row): a sunk fill, no ring. */
.go-controls .seg-item[aria-current="true"], .go-controls .seg-item.is-on, .go-controls .seg-item[aria-pressed="true"] {
  background: var(--sunk); border-color: transparent;
}
/* After's count is what is due there: a small badge, not a bare digit
   beside the word. */
.go-page .tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  margin-left: 2px; border-radius: var(--radius-pill); background: var(--sunk); color: var(--text-2);
  font-size: var(--fs-row); line-height: 1; vertical-align: 1px;
}
.go-stale { margin-bottom: var(--space-3); }

/* The goal picker's body */
.goalpick-add { border-top: 1px solid var(--line); margin-top: var(--space-2); }

/* ---------------------------------------------------------------- the feed (3.1.1) */

.feed-section + .feed-section, .feed-section + .feed-else { margin-top: var(--gap-section); }
.feed-section > .section-head h2 { font-size: var(--fs-heading); line-height: var(--lh-heading); }
.feed-section > .go-reading { margin-bottom: var(--space-3); }
.go-reading .why-body { list-style: none; }
.feed-more-list { margin-top: var(--space-3); }
.feed-more-list > summary { list-style: none; }
.feed-more-list > summary::-webkit-details-marker { display: none; }
.feed-more-list[open] > summary { display: none; }
.feed-more-list[open] { margin-top: 0; }

/* The list by week (CHA-887). Under the pills, only when they apply, the
   honesty lines; then "How we read this goal"; then the weeks, each a
   section with its own heading: body size, since the selected goal pill is
   the list's heading. A week to the next is a section gap, the weeks behind
   "Show N more" too. */
/* The honesty lines are the list's, not its first week's (UX review M5):
   one block a control-row gap under the pills, the block gap over the weeks. */
.go-notes { display: grid; gap: var(--space-1); margin: 0 0 var(--gap-block); }
.go-notes > p { margin: 0; }
#go-region:has(.feed-picks > .go-notes:first-child) > .go-controls { margin-bottom: var(--gap-stack); }
.wk + .wk, .feed-more-list[open] > summary + .wk { margin-top: var(--gap-section); }
.wk > .section-head h2 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
/* On a phone too the heading is one line, "This week · 29 Oct – 1 Nov · 4
   events", wrapping only when it must (UX review L1). */
@media (max-width: 720px) {
  .wk > .section-head h2 > .section-meta { display: inline; margin-top: 0; }
  .wk > .section-head h2 > .section-meta::before { content: "· "; }
}
/* A week's own "Show N more": open, its days continue the week's, a day's
   gap under the last. */
.feed-more-list.wk-more[open] { margin-top: var(--space-4); }
/* "More like this (N)": a fold under a week's matches, the page's own "Show
   N more" control with a chevron, "Hide" once open; closed while any week
   has matches (owner, 30 Oct: "the visible quality cannot degrade"). Its box
   sits a list-to-its-more gap under the list and is the 44 px tap target. */
.wk-note { margin: 0 0 var(--space-2); }
/* A week's days (owner, 30 Oct: the day grouping made visible): a small
   label over each day's rows, 4 to its rows, 24 from one day to the next,
   and the week's fold as far under its last day, so it reads as the
   week's, not the last day's (UX review M3 and LOW, day-top). */
.wk-day + .wk-day { margin-top: var(--space-5); }
.wk-day + .wk-similar { margin-top: var(--space-5); }
.ev-day-label { margin: 0 0 var(--space-1); font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 600; color: var(--text-2); }
/* "Top pick" on a row (owner, 30 Oct: "very good … should be somehow
   highlighted"): the top 25% of a goal's matches by grade (TopPickShare),
   or with no matches Luma's top_match; a small chip after the name, nothing
   else changes. Square-ish corners and a star, so it reads as a rating, not
   a selected filter (UX review M2); no left margin, so a chip wrapped at 375
   lines up with the title (the space before it is the gap). */
.ev-top {
  display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-sm);
  background: var(--accent-wash); color: var(--accent-text);
  font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 600; white-space: nowrap; vertical-align: 2px;
}
/* CHA-1049. One style for every flag, "New", "Date changed", "Place
   changed" and "Almost full", at every width (batch UX review, 1 Nov): the
   meta size, semibold, the line's grey, as .ev-entry .warn prints "Almost
   full". No chip and no link colour (violet read as a link), so it never
   competes with Top pick. .ev-new is the desktop title's; .ev-flag the
   phone time line's. */
.ev-new, .ev-flag { font-size: var(--fs-meta); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.ev-new { line-height: var(--lh-meta); }
/* "The 2 closest" in a week with no match (CHA-918): they must not look like
   matches, nor visited or broken (UX review MED). The container is
   secondary, the page's paper inside the list's hairline, no rule down the
   left; the rows keep the ink of every row. */
.ev-closest, .ev-closest > .ev { background: var(--paper); }
@media (hover: hover) { .ev-closest > .ev:hover { background: var(--hover); } }
.wk-similar { margin-top: var(--gap-stack); }
/* A week with no match and nothing open is one row (UX review HIGH 1): its
   heading at the left, "18 like this ▾" at the right, the week's own line
   under the heading; such weeks stack as an index, a hairline apart. */
.wk-solo-fold { margin-top: 0; }
.wk-solo-fold > summary.section-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: baseline; gap: var(--space-1) var(--space-3);
  height: auto; min-height: var(--control-h-touch); margin-bottom: 0; padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.wk-solo-fold > summary::-webkit-details-marker { display: none; }
.wk-solo-fold > summary > h2 { grid-column: 1; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.wk-solo-fold > summary > .wk-note { grid-column: 1; margin: 0; }
.wk-solo-fold > summary > .wk-similar-toggle { grid-column: 2; grid-row: 1; font-size: var(--fs-meta); white-space: nowrap; }
@media (max-width: 720px) {
  .wk-solo-fold > summary > h2 > .section-meta { display: inline; margin-top: 0; }
  .wk-solo-fold > summary > h2 > .section-meta::before { content: "· "; }
}
.wk-solo-fold[open] > summary { margin-bottom: var(--gap-stack); }
.wk.wk-solo + .wk.wk-solo { margin-top: 0; }
.wk.wk-solo:has(> details[open]) + .wk { margin-top: var(--gap-section); }
/* The list's line with no match anywhere (UX review HIGH 1): a short block
   in body text, then what is shown and one action; never a word alone on
   its own line (LOW). */
.go-honesty { display: grid; gap: var(--space-1); }
.go-honesty > p { margin: 0; text-wrap: balance; }
.go-honesty-line { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; color: var(--ink); }
.wk-similar > summary { list-style: none; height: var(--control-h-touch); }
.wk-similar > summary::-webkit-details-marker { display: none; }
.wk-similar[open] > summary { margin-bottom: var(--gap-stack); }
.wk-similar[open] .wk-similar-show, .wk-similar:not([open]) .wk-similar-hide { display: none; }

/* Everything else: the heading is the summary, with its own action
   ("Show 214 events", then "Hide"): a count with no list in sight read as
   a promise not kept (fix round 2 attend). */
.feed-else > summary { list-style: none; cursor: pointer; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.feed-else > summary::-webkit-details-marker { display: none; }
/* Closed, the heading has no list under it to space: the foot's own margin
   is the only gap (it stacked to 32). */
.feed-else:not([open]) > summary { margin-bottom: 0; }
/* The phone's heading margin (.go-page .feed-section > .section-head, below)
   is more specific than the rule above; this one beats it. */
.go-page .feed-else:not([open]) > .section-head { margin-bottom: 0; }
.feed-else[open] .feed-else-show, .feed-else:not([open]) .feed-else-hide { display: none; }
/* Closed, the heading is the disclosure itself: "Show 208 more events in
   the next 14 days" (fix round 1, 21 Oct: one idea, one control). */
.feed-else:not([open]) > summary h2 { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; color: var(--accent-text); }
@media (hover: hover) { .feed-else:not([open]) > summary:hover h2 { text-decoration: underline; text-underline-offset: 3px; } }
.feed-else > summary .text-action { font-size: var(--fs-meta); }
.ev-list > .feed-more { padding: var(--space-3) var(--space-4); }

.feed-foot { display: grid; gap: var(--space-1); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
.feed-foot:not(:first-child) { margin-top: var(--space-4); }

/* The event row's gutter: the day over the time. */
.ev-when-day, .ev-when-time { display: block; }
.ev-when-day { color: var(--ink); font-weight: 500; }
.ev-when-time { white-space: nowrap; }
@media (min-width: 721px) { .go-page .ev { grid-template-columns: 88px minmax(0, 1fr) auto; } }
.ev-reason { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink); }
/* The who line is the fact the row exists for (round 1 attend): body size,
   names weighted and each a link; roles and hops stay at meta size. */
.ev .ev-who { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-3); }
/* Names and "N who fit" in the link violet (fix round 2, 21 Oct): they are
   the only door to a person, and ink weight 500 read as meta. */
.ev-who a { color: var(--accent-text); font-weight: 500; text-decoration: none; }
.ev-who a.ev-who-lead { font-weight: 600; }
/* The names are the row's way to a person (the attend ruling): a 44px tap
   target, grown with inline padding so the line's type and rhythm stay put. */
.ev-who a { padding-block: 12px; }
@media (hover: hover) { .ev-who a:hover { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.ev-who a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* Names are weighted ink on a text-3 line, so they read as the row's links
   without an underline at rest (POLISH §0.4: nineteen underlines on one
   screen; Luma underlines nothing at rest). Pointer underlines one. */
/* An event's name wraps whole: never cut, never "…" (round 1 attend).
   app.css clamps .ev-title at two lines; the attend page outranks it. */
.go-page .ev .ev-title { display: block; -webkit-line-clamp: unset; overflow: visible; overflow-wrap: anywhere; }
/* The ⋯ keeps its small look and gets a 44 by 44 hit area. */
.go-page .ev .marks-more > summary { position: relative; }
.go-page .ev .marks-more > summary::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* Names only (decision 2 §2): each name moves to the next line whole, never
   cut mid-name (a nowrap block; only a name longer than the whole line is
   clipped, so the page never runs wide), " · +K" glued to the last name
   shown. Wide: three names and +(Fits-3); under 720 px the third name hides
   and +(Fits-2) rides the second, so the line holds in two. */
.ev-who-lead { white-space: nowrap; }
.ev-face { display: inline-block; max-width: 100%; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-more-narrow { display: none; }
@media (max-width: 720px) {
  .ev-face-3, .ev-more-wide { display: none; }
  .ev-more-narrow { display: inline; }
}
/* A third name too long for one line at 1440 (attend.Card.ThirdFits): two
   names and +K at every width. */
.ev-who.is-two .ev-face-3, .ev-who.is-two .ev-more-wide { display: none; }
.ev-who.is-two .ev-more-narrow { display: inline; }
.outcome-row .choice-q { margin: 0 0 var(--space-1); }
.ev-for { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
.ev-act { align-items: center; }
.ev-act .confirm-gate > summary { font-size: var(--fs-meta); }
/* The mark she set, in the slot: a muted fact, then RSVP (fix round 2). */
.ev-mark { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); font-weight: 500; white-space: nowrap; }
.ev-mark.is-going { color: var(--success); }
.ev-act .text-action.rsvp { font-size: var(--fs-meta); min-height: 44px; display: inline-flex; align-items: center; }
/* The event name opens its page: a small ↗ says it leaves the app. */
.ev-ext { color: var(--text-3); font-weight: 400; font-size: var(--fs-meta); }
.ev.is-yours .ev-act { color: var(--text-2); }
.ev.is-loading { min-height: 96px; }
.ev-act .feed-marks { gap: var(--space-1); }
.go-page .ev .marks-more > summary { width: 44px; height: 44px; margin-block: -6px; font-size: var(--fs-body); color: var(--text-2); }
.marks-more .menu-body .confirm-gate > summary { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); }
@media (max-width: 720px) {
  .ev-act { justify-content: flex-start; }
}
/* The heading's quiet jump to "Add an event you're going to" below. */
.section-head > .section-head-act { flex: none; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; }
.feed-section > .section-head { align-items: baseline; }
@media (max-width: 720px) {
  .section-head > .section-head-act { display: none; }
  /* The phone's first event under 300 px (fix round 1, 21 Oct): the top
     bar names the place ("Going · San Francisco"), so the page's h1 is
     read by a screen reader only, and the rows under it sit tighter. */
  .go-page > .pagehead:has(+ .tabs) {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* The tab row starts at the page's top padding, like every first block. */
  .go-page > .tabs { margin-top: 0; }
  .go-page .feed-section > .section-head { margin-bottom: var(--space-3); }
}

/* Add an event you're going to */
.go-add { margin-top: var(--gap-section); padding: var(--pad-card); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); display: grid; gap: var(--space-3); }
.go-add .notice { margin: 0; }

/* ---------------------------------------------------------------- start (3.1.0) */

.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.field-label-row > label { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; }
.field-label-row .text-action { font-size: var(--fs-meta); }
.about-card {
  display: grid; gap: var(--space-2);
  margin-bottom: var(--space-4); padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.about-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.about-card .row-warn { margin: 0; }
.about-edit > summary { list-style: none; width: max-content; }
.about-edit > summary::-webkit-details-marker { display: none; }
.about-edit[open] > summary { margin-bottom: var(--space-3); }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); }
.about-grid .field { margin-bottom: var(--space-3); }
.about-grid-wide { grid-column: 1 / -1; }
.about-card .choice { margin: var(--space-2) 0 0; }
@media (max-width: 720px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); }
  /* The card must not push Find events off the first phone screen. */
  .about-card { gap: var(--space-1); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
  .about-card .choice { margin-top: var(--space-1); }
  .about-card .choice > legend { margin-bottom: 0; }
  /* Fields stack --gap-stack apart here, not 16: with the card's goals open,
     16 put Find events 9 px under a 375 x 812 screen. The card keeps its
     full block gap to the button. */
  .go-start .field { margin-bottom: var(--gap-stack); }
}

/* About you in Settings */
.about-form { display: grid; }
.about-form .form-actions { margin-top: var(--space-2); }
.about-delete > summary { list-style: none; }
.about-delete > summary::-webkit-details-marker { display: none; }
.about-delete:not([open]) > :not(summary) { display: none; }
.about-delete[open] > summary { display: none; }

/* ---------------------------------------------------------------- people (3.1.3) */

.go-people-scope { margin-bottom: var(--space-3); }
.go-people-filters { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.who-showing { margin-bottom: var(--space-2); }
.pr-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pr-name a { font-weight: var(--fw-name); }
/* The event filter is one picker (critic, 20 Oct: two scrolling rows was one too many). */
.go-event-pick { justify-self: start; }
.menu.go-event-pick > summary {
  width: auto; padding: 0 var(--space-3); gap: var(--space-1); display: inline-flex; align-items: center; font-size: var(--fs-meta);
  border: 1px solid var(--line-strong); color: var(--ink); max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu.go-event-pick > .menu-body { left: 0; right: auto; max-width: min(360px, calc(100vw - 32px)); }
.go-event-pick .menu-body > a[aria-current="true"] { font-weight: 500; }
.go-event-pick .menu-body > a[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--success); }
/* Reach is the row's one action; Keep and Skip sit in its ⋯ menu, as the
   event rows' maybe and skip do (critic round 3). The menu's form is a
   column, not the inline verdict pair. */
.pr-act .menu-body > .verdict { display: flex; flex-direction: column; gap: 0; }
.pr-act .menu-body > .verdict > button {
  display: flex; align-items: center; gap: var(--space-2); width: 100%;
  min-height: 44px; padding: 0 var(--space-4);
  border: 0; border-radius: 0; background: none; text-align: left; cursor: pointer;
  color: var(--ink); font-size: var(--fs-control); font-weight: 400;
}
@media (hover: hover) { .pr-act .menu-body > .verdict > button:hover { background: var(--hover); } }
.pr-act .menu-body > .verdict > button[aria-pressed="true"] { font-weight: 500; }
.pr-act .menu-body > .verdict > button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--success); }
.pr-state { white-space: nowrap; }
/* Why sits at the end of the row's last line (SPEC 2.6.11); open, its body
   takes the full width under it. */
.pr-at-line { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); }
.pr-at-line > .pr-at { min-width: 0; }
.pr-at-line > .why[open] { flex-basis: 100%; }
.pr-at-line > .pr-at:empty { display: none; }
/* Reach and ⋯ need their own width; the why column takes the rest. */
@media (min-width: 721px) {
  .pr-list > .pr:not(.pr-host) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
}
.pr-host { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id"; }
.who-more { margin-top: var(--space-3); }
.go-page > .empty + .section, .go-page > .list + .section, .go-page > .who-more + .section { margin-top: var(--gap-section); }
@media (max-width: 720px) {
  .pr-act { align-self: start; }
  /* Reach and ⋯ fit beside the name; where and why take the line under. */
  .go-page .pr-list > .pr:not(.pr-host) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id act" "why why"; }
}
/* Goal chips can be many and long: one scrolling row whose fading right edge
   says there is more; the end padding lets the last chip scroll clear of it. */
.go-people-filters > .seg {
  padding-right: var(--space-6);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

/* ---------------------------------------------------------------- reach (3.1.4) */

/* One sheet, as the host Ask (host.css .sheet-*): Via, the note, Copy note
   filled and I've sent it outlined; the answers and extras below. */
.card.reach-via { padding: var(--space-1) var(--space-4); }
.reach-note { margin-top: 0; }
.reach-personal mark { background: var(--accent-wash); color: var(--ink); padding: 0 2px; border-radius: 2px; }
.reach-actions { flex-wrap: wrap; align-items: center; }
.reach-answer { margin-top: var(--space-3); }
.reach-answer .reach-sent-note { flex-basis: 100%; }
.reach-sent-body { white-space: pre-wrap; }
.reach-more { margin-top: var(--space-5); }
.reach-more form { margin: 0; }
.reach-notes { margin-top: var(--gap-section); }
@media (max-width: 720px) {
  .reach-actions > .btn, .reach-actions > .confirm-gate { flex: 1 1 auto; }
}

/* The note box */
.note-box { display: grid; gap: var(--space-2); }
.note-list { display: grid; gap: var(--space-2); }
.note-row { display: grid; gap: 2px; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.note-meta { display: flex; align-items: center; gap: var(--space-3); }
.note-add > summary { list-style: none; width: max-content; font-size: var(--fs-meta); }
.note-add > summary::-webkit-details-marker { display: none; }
.note-add[open] > summary { margin-bottom: var(--space-2); }
.note-add .field-textarea { margin: 0; }

/* ---------------------------------------------------------------- after (3.1.5) */

.after-list .ev { grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; }
.after-list .dateblock { margin: 0; }
.dateblock-blank { border-color: transparent; background: none; min-height: 1px; }
.after-list .ev-act { justify-content: flex-end; }
@media (max-width: 720px) {
  .after-list .ev { grid-template-columns: 56px minmax(0, 1fr); }
  .after-list .ev-act { grid-column: 2; justify-content: flex-start; }
}

.after-form .choice { margin-bottom: var(--space-5); }
.after-form .choice-inline .choice-row { border: 1px solid var(--line-strong); }
.after-met > legend { margin-bottom: var(--space-3); }
.after-met .pr { grid-template-columns: minmax(0, 1fr) minmax(0, 120px) auto; }
.after-met .row-select { min-width: 160px; }
.after-unlisted-list { margin-top: var(--space-3); }
.after-unlisted { margin-top: var(--space-3); }
.after-unlisted > summary { list-style: none; width: max-content; }
.after-unlisted > summary::-webkit-details-marker { display: none; }
.after-unlisted[open] > summary { margin-bottom: var(--space-2); }
.after-unlisted .input-action { flex-wrap: wrap; }
.after-page .sticky-bar { justify-content: flex-end; }
.after-host .lv { grid-template-columns: minmax(0, 1fr) auto; }
.after-side { display: grid; gap: var(--space-1); }
@media (max-width: 720px) {
  .after-met .pr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "why" "act"; }
  .after-met .pr-act { justify-content: flex-start; }
  .after-met .row-select { width: 100%; }
}

/* Outcomes */
.outcome-list > li + li { border-top: 1px solid var(--line); }
.outcome-row { padding: var(--space-4); }
.outcome-row .choice { margin: 0; }
.outcome-row .choice-row { border: 1px solid var(--line-strong); }

/* Tonight */
.tonight-host { margin-bottom: var(--space-5); }
.tonight-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; gap: var(--space-3); }
.tonight-row > * { grid-area: auto; }
.tonight-opener { font-weight: 500; color: var(--ink); }

/* ---------------------------------------------------------------- calendar (3.1.2) */

.cal-fits { color: var(--text-3); }
.cal-connect { margin-top: var(--gap-section); display: grid; gap: var(--space-3); justify-items: start; max-width: var(--w-list); }
.cal-connect .section-head { margin: 0; }
.cal-date-wd { display: none; }
@media (max-width: 720px) {
  .cal-date-wd { display: inline; }
  .cal-date { font-weight: 500; color: var(--ink); }
  .cal-day.is-today .cal-date { color: var(--accent-text); font-weight: 600; }
}
.tonight-page > .offline-note { margin-bottom: var(--space-3); }

/* ---------------------------------------------------------------- profile state (home, About you) */

/* One row, the same words on both screens (critic round 3). */
.go-profile-row { margin: var(--space-2) 0 var(--space-3); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.pagehead .go-profile-row { margin: var(--space-1) 0 0; }

/* ---------------------------------------------------------------- person (the attend ruling) */

/* A name on an event row opens the person (decision 2 §2): a stack of
   facts, one a line, inside --w-rows (720 px) at every width; then Ask (the one
   filled button), Keep · Set aside, LinkedIn. */
.person-stack {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-2);
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2);
}
.person-stack > li { overflow-wrap: anywhere; }
.person-stack .fact-strong { color: var(--ink); }
.person-why { color: var(--text-2); }
.person-bio summary { list-style: none; cursor: pointer; }
.person-bio summary::-webkit-details-marker { display: none; }
.person-bio-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.person-bio details[open] .person-bio-text { -webkit-line-clamp: unset; display: block; }
.person-bio-more { color: var(--accent-text); font-size: var(--fs-meta); }
.person-bio details[open] .person-bio-more { display: none; }
.person-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  margin-top: var(--space-5);
}
.person-verdict { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.person-verdict .text-action { min-height: var(--control-h-touch); font-size: var(--fs-meta); color: var(--text-2); }
.person-verdict .is-on { color: var(--ink); font-weight: 500; }
.person-verdict .who-tick.is-on::before { content: "✓"; margin-right: var(--space-1); color: var(--success); }
.person-sep { color: var(--muted); }
.person-actions .person-linkedin { margin-left: auto; }
.person-notes { max-width: var(--w-list); margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.person-notes-label { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--text-2); }
.person-notes-label::after { content: " ·"; color: var(--text-3); }
.person-notes > .note-box { flex: 1 1 200px; }
.person-notes .note-add > summary { font-size: var(--fs-body); min-height: 44px; display: flex; align-items: center; }
@media (max-width: 720px) {
  .person-actions > .btn-primary { flex: 1 1 100%; }
  .person-actions .person-linkedin { margin-left: 0; }
}

/* ---------------------------------------------------------------- the follow-up list and one event's list */

.people-at { font-size: var(--fs-heading); line-height: var(--lh-heading); }
.people-at .section-meta { white-space: nowrap; }
/* The follow-up row, the host row's anatomy (decision 2 §1-2; host.css .gr,
   copied: each door owns its file). Line one: the name, one right slot.
   Line two: the lead fact whole, then tails that drop whole when the line
   is full (the line is one line high; a tail that wraps is clipped), the
   role first since it is last; under 720 px the tails drop. --w-rows (720 px) at 1440, so the slot is never far
   from the name. */
/* width, not max-width: .go-page's list cap (960) outranks a class here. */
.fu-list, .fu-more, .person-stack { width: min(100%, var(--w-rows)); }
.fu-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--space-3); row-gap: 2px; min-height: var(--row-min-sm);
  padding: var(--pad-row-sm);
}
.fu-name { font-weight: var(--fw-name); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.fu-name { color: var(--accent-text); }
@media (hover: hover) { a.fu-name:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } }
.fu-slot { justify-self: end; max-width: 120px; text-align: right; }
.fu-fact { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); white-space: nowrap; }
.fu-line {
  grid-column: 1 / -1; margin: 0; display: flex; flex-wrap: wrap;
  max-height: var(--lh-row); overflow: hidden;
  font-size: var(--fs-row); line-height: var(--lh-row); color: var(--text-2);
}
.fu-lead { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-tail { white-space: nowrap; }
.fu-line .fact-strong { color: var(--ink); }
.fact-post { white-space: nowrap; }
/* 375: the lead prints whole (it may wrap; it is at most FactChars), the
   tails drop (decision 2 §1: "the first fact always prints whole"). */
@media (max-width: 720px) {
  /* The rows take the page's full 343 px, as the host list does (the lead
     is composed to fit it): a plain list between hairlines, no card inset. */
  .list.fu-list { border-left: 0; border-right: 0; border-radius: 0; background: transparent; }
  /* Right under the tab bar the tab's underline is the only rule. */
  .go-page > .tabs + .list.fu-list { border-top: 0; }
  .fu-row { padding: var(--space-2) 0; }
  .fu-line { max-height: none; }
  .fu-lead { white-space: normal; overflow: visible; }
  .fu-tail { display: none; }
}
.fu-more { margin-top: var(--space-3); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
.people-goal, .person-goal { color: var(--text-2); }

@media (max-width: 720px) {
  /* A card with no mark holds only ⋯: it sits beside the name, not on a
     line of its own (fix round 2, 21 Oct). */
  .go-page .feed-card:not(.is-going):not(.is-maybe):not(.is-skipped):not(.is-yours) { position: relative; }
  .go-page .feed-card:not(.is-going):not(.is-maybe):not(.is-skipped):not(.is-yours) > .ev-act { position: absolute; top: var(--space-2); right: var(--space-2); }
  .go-page .feed-card:not(.is-going):not(.is-maybe):not(.is-skipped):not(.is-yours) .ev-title { padding-right: 36px; }
}

/* ---------------------------------------------------------------- goal pills
   The host plan page's chip row (find.css .chips, .lc), for goals: all on
   screen, the current one marked, ⋯ on it. The row scrolls sideways inside
   itself on a phone; the page never does. */
.goal-chips .lc.is-paused { background: var(--hover); border-color: var(--line); color: var(--text-3); }
.goal-chips .lc-paused > .lc.is-paused { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.goal-chips .lc-inline { display: contents; }
.goal-chips .lc-resume { border-radius: 0; border-left: 0; border-right: 0; cursor: pointer; color: var(--accent-text); background: var(--surface); }
.goal-chips .lc-menu > summary { list-style: none; cursor: pointer; width: auto; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 0 var(--radius-control) var(--radius-control) 0; background: var(--chip-on); color: var(--text-3); letter-spacing: .05em; }
.goal-chips .lc-menu > summary::-webkit-details-marker { display: none; }
.goal-chips .lc-paused .lc-menu > summary { background: var(--hover); border: 1px solid var(--line); border-left: 0; }
.goal-chips .lc-menu > .menu-body { position: fixed; top: auto; right: auto; margin-top: 4px; min-width: 240px; }
.goal-chips .lc-add { flex: none; }
.goal-chips .lc-add > summary.lc { border-radius: var(--radius-control); background: var(--surface); color: var(--text-2); }
.goal-chips .menu-fact { padding: 10px var(--space-4); font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.goal-chips .menu-body form { padding: var(--space-2) var(--space-4); display: flex; gap: var(--space-2); }
.goal-chips .menu-body form > button { padding: 0; min-height: 36px; }
.goal-chips .menu-body form input[type="text"] { flex: 1; min-width: 0; }
.goal-chips .menu-body .danger { color: var(--danger, #b3261e); }
@media (max-width: 720px) {
  .goal-chips { margin-left: calc(-1 * var(--pad-page-side)); margin-right: calc(-1 * var(--pad-page-side)); padding-left: var(--pad-page-side); padding-right: var(--pad-page-side); }
  .goal-chips .lc-menu > .menu-body { left: var(--pad-page-side); right: var(--pad-page-side); width: auto; max-width: none; }
}
.goal-chips { --chip-on: #E7E0F8; }
/* the Add and rename forms: the field takes the width, the button its own */
.goal-chips .goalpick-add > button, .goal-chips .goalpick-edit-form > button { flex: none; width: auto; min-height: 36px; padding: 0 var(--space-3); justify-content: center; }
.goal-chips .goalpick-add > input[type="text"], .goal-chips .goalpick-edit-form > input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
/* a goal that isn't active: a muted pill that says why and opens its menu */
.goal-chips .lc-inactive { flex: none; }
.goal-chips .lc-inactive > summary.lc { list-style: none; cursor: pointer; border-radius: var(--radius-control); letter-spacing: normal; }
.goal-chips .lc-inactive > summary.lc::-webkit-details-marker { display: none; }
.goal-chips .lc-status { font-weight: 400; color: var(--text-3); font-size: var(--fs-meta); }
.goal-chips .lc-inline .lc-resume { border-left: 1px solid var(--line); border-radius: var(--radius-control); }
/* delete asks first */
.goal-chips .lc-confirm > summary { list-style: none; cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); font-size: var(--fs-body); }
.goal-chips .lc-confirm > summary::-webkit-details-marker { display: none; }
.goal-chips .lc-confirm-body { flex-wrap: wrap; align-items: center; }
.goal-chips .lc-confirm-body button { min-height: 36px; padding: 0 var(--space-3); background: none; border: 0; cursor: pointer; font-size: var(--fs-body); }
.go-status { margin: 0 0 var(--space-2); }
/* while a goal is being switched: one thing reads as current, the old list is gone, a line says what is loading */
#go-region[aria-busy="true"] .goal-chips .lc-menu > summary { background: none; color: transparent; border-color: transparent; }
#go-region[aria-busy="true"] #feed { display: none; }
.go-loading { margin: var(--space-3) 0; }
/* hit areas are 44 px even where the pill is drawn 34 px tall */
.goal-chips .lc, .goal-chips .lc-menu > summary { position: relative; }
.goal-chips .lc::after, .goal-chips .lc-menu > summary::after { content: ""; position: absolute; inset: -5px 0; }
/* The row scrolls sideways, so it clips: it holds the 5 px above and below
   each pill that the hit area needs (UX review M6: 38 px measured), taken
   back from its margins so nothing on screen moves. */
.goal-chips-wrap > .goal-chips { padding-top: 5px; padding-bottom: 5px; margin-top: -5px; margin-bottom: -5px; }
.goal-chips .menu-body button, .goal-chips .menu-body summary { min-height: 44px; }
@media (hover: hover) {
  .goal-chips .lc:hover { border-color: var(--text-2); }
}
/* The selected goal is the list's heading (owner, 29 Oct: "make the filter
   so prominent that the 'For CISOs' line is not required"; UX review H2):
   filled as the primary button, its ⋯ with it, its count beside its name. */
.goal-chips .lc[aria-current="true"], .goal-chips .lc-wrap > .lc-menu > summary {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.goal-chips .lc[aria-current="true"] b, .goal-chips .lc-wrap > .lc-menu > summary { color: #fff; }
.goal-chips .lc-n { font-weight: 400; }
@media (hover: hover) {
  .goal-chips .lc[aria-current="true"]:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
}
/* The pill row owns the gap to the controls under it, on Events and Calendar
   alike (find.css's .chips margin, loaded later, cancelled one on the nav). */
.goal-chips-wrap { position: relative; margin-bottom: var(--gap-stack); }
@media (max-width: 720px) {
  /* the row runs past the screen's edge: a fade at the right, so there is plainly more. An overlay,
     not a mask: a mask would clip the menus, which are fixed to the screen. */
  .goal-chips-wrap::after { content: ""; position: absolute; top: 0; right: calc(-1 * var(--pad-page-side)); bottom: 0; width: 32px; pointer-events: none;
    background: linear-gradient(to right, transparent, var(--paper)); }
  .goal-chips { scroll-padding: 0 var(--pad-page-side); }
}
.goal-chips .lc-confirm[open] > summary { display: none; }

/* The calendar's date range: a small label beside the view switch (owner
   calls, 30 Oct, CHA-955); the page title stays the city. */
.go-range { align-self: center; font-size: var(--fs-row); line-height: var(--lh-row); color: var(--text-3); font-variant-numeric: tabular-nums; }
.person-outside { flex-basis: 100%; margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }