/* Elsawhere, design 1e "Pale chip, coral badge". Tokens from BUILD_PROMPT.md;
   desktop measurements from the FeedDesktop board. */
:root {
  --sel-fill: #FFDCCD; --sel-edge: #FFC2A9; --coral: #F2774F;
  --ink: #3B1A22; --wine: #4A1526; --wine-hover: #5E1C31; --on-wine: #FFFCFA;
  --muted: #6E4F55; --reason: #8A3A50; --raspberry: #A3284A;
  --blush: #FFF2EB; --blush-line: #F7E2D9; --peach: #FFEDE5;
  --white: #FFFFFF; --paper: #FFFAF6; --row: #F4EAE5;   /* paper: the page; white: controls and inputs */ --card: #F0E3DD; --outline: #E3D2CB;
  --ok: #6BA368; --needs: #F0A55A; --bad: #E0607E; --wait: #B9A8A2;
  --serif: 'Newsreader', Georgia, serif; --sans: 'Figtree', system-ui, sans-serif;
}
* { box-sizing: border-box; }   /* so max-widths below include padding: 1384 = the board's 1320 + 2 x 32 */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--sans); }
a { color: var(--raspberry); }
a:hover { color: var(--wine); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 2px; }

/* ---- logo: HTML and CSS after design/logo.jpg ----
   Tuned to Newsreader italic 600: cap height 0.67em, x-height 0.426em, ascent
   0.735em, descent 0.265em (read from the font file). With line-height 1 the
   .logo-fix box bottom sits 0.265em below the baseline, and every offset below is
   measured from it. */
.logo {
  --brand: var(--raspberry);   /* sampled #AA2049 from design/logo.jpg; the token is within ~11 RGB units */
  --accent: var(--coral);      /* the selected-button and active-tab coral */
  display: inline-flex; align-items: baseline; gap: 0.12em;
  font-family: var(--serif); font-style: italic; font-weight: 600; line-height: 1;
  color: var(--brand); text-decoration: none; white-space: nowrap;
}
.logo:hover { color: var(--brand); }
.logo-pin { height: 0.67em; width: 0.5em; fill: currentColor; flex: none; }   /* cap height; tip on the baseline */
.logo-fix { position: relative; display: inline-block; }
.logo-fix::after {             /* the strike: centred on the e (0.216em above the baseline), 50 degrees */
  content: ""; position: absolute; left: 50%; bottom: 0.448em;
  width: 0.72em; height: 0.065em; margin-left: -0.36em;
  border-radius: 1px; background: var(--accent); transform: rotate(-50deg);
}
.logo-a {                      /* baseline level with the cap height; 1.07em in its own 0.7em size */
  position: absolute; left: 50%; bottom: 1.07em; transform: translateX(-50%);
  font-size: 0.7em; color: var(--accent);
}

/* ---- page structure ---- */
.page { min-height: 100vh; padding-bottom: 96px; }
.band { background: var(--blush); border-bottom: 1px solid var(--blush-line); padding: 24px 16px 20px; }
.band-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.band h1, .h1 { margin: 10px 0 0; font: 400 36px/1.1 var(--serif); color: var(--ink); }
.meta { font-size: 15px; color: var(--muted); }
.step { font-size: 13px; font-weight: 500; color: var(--muted); }
.kicker { margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--reason); }
.lede { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.section { padding: 22px 16px; border-bottom: 1px solid var(--row); }
.section h2 { margin: 0 0 12px; font: 400 22px/1.2 var(--serif); }
.wrap { max-width: 1384px; margin: 0 auto; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; background: var(--peach); color: var(--wine);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.back { margin-left: -12px; background: transparent; color: var(--ink); }
.desk-only, .topnav { display: none; }
.view-toggle { margin-top: 14px; }
/* Phone: Filters ends the By date / Best match row. With its label the row needs
   ~344px; below 350px of row width only the icon shows (still a 44px button named
   "Filters"), so it never wraps onto a line of its own. */
.view-toggle .filters-btn { margin-left: auto; padding: 0 12px; }
@media (max-width: 999px) {
  .view-toggle { container-type: inline-size; }
  @container (max-width: 349px) {
    .view-toggle .filters-btn { width: 44px; padding: 0; }
    .view-toggle .filters-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
}

/* ---- controls: 44px soft squares, badge first ---- */
.row-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-ctl.tight { gap: 6px; }
.ctl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px;
  border-radius: 12px; font: 500 15px var(--sans); color: var(--ink); background: var(--white);
  border: 1.5px solid var(--outline); cursor: pointer; text-decoration: none; }
.ctl.small { min-height: 38px; padding: 0 12px 0 8px; gap: 6px; border-radius: 10px; font-size: 14px; }
.ctl .badge { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--outline); flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.ctl[aria-pressed="true"], .ctl:has(input:checked) { background: var(--sel-fill); border-color: var(--sel-edge); }
.ctl[aria-pressed="true"] .badge, .ctl:has(input:checked) .badge { background: var(--coral); border-color: var(--coral); }
.ctl[aria-pressed="true"] .badge::after, .ctl:has(input:checked) .badge::after {
  content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.ctl:has(input:focus-visible) { outline: 2px solid var(--wine); outline-offset: 2px; }
.ctl.plain { padding: 0 14px; color: var(--muted); }
.ctl.plain.ink { color: var(--ink); }
.btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 12px; border: 0;
  background: var(--wine); color: var(--on-wine); font: 500 16px var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--wine-hover); color: var(--on-wine); }
.btn.ghost { background: var(--white); color: var(--ink); border: 1.5px solid var(--outline); }
.btn.small { width: auto; height: 44px; padding: 0 16px; font-size: 15px; }
form.inline { display: inline; margin: 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--raspberry); text-decoration: underline; cursor: pointer; }
.link-btn.strong, .strong-link { font: 600 14px var(--sans); color: var(--raspberry); text-decoration: underline; text-underline-offset: 3px; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label, legend { font-size: 15px; font-weight: 600; }
.input { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--outline);
  background: var(--white); font: 400 16px var(--sans); color: var(--ink); }
.input:focus { border-color: var(--ink); outline: none; }
.input[readonly] { background: var(--blush); border-color: var(--card); color: var(--muted); }
.hint { font-size: 14px; color: var(--muted); }
.error { padding: 12px 14px; border-radius: 12px; background: #FDECEF; color: #7A1F35; font-size: 15px; margin-bottom: 14px; }
.note { font: italic 400 15px/1.5 var(--serif); color: var(--muted); }
fieldset { border: 0; margin: 0 0 18px; padding: 0; }
legend { padding: 0; margin-bottom: 10px; }

/* ---- feed rows: phone has two columns, buttons under the text ---- */
.ev { padding: 20px 16px; border-bottom: 1px solid var(--row); display: grid; grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px 16px; }
.ev-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ev-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
/* Date tile, design 6e "tear-off calendar": coral month band, then weekday and day. */
.tile { display: flex; flex-direction: column; align-items: center; align-self: start; overflow: hidden;
  background: var(--blush); border: 1px solid var(--sel-fill); border-radius: 12px;
  color: var(--wine); line-height: 1.2; }
.tile .mon { align-self: stretch; text-align: center; padding: 3px 0 2px; background: var(--sel-edge);
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--wine); }
.tile .dow { margin-top: 10.25px; font-size: 10.2px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
/* line-height 1 on the day: the digits sit on the baseline and the font's descent space
   below them (0.265em) counts toward the bottom gap. Margins set so the gap above the weekday
   and below the day are equal and the tile height unchanged when the text shrank 15%
   (measured at 4x: 12.5 vs 12.5px, 70.5px tall; small tile 10.2 vs 10.0px, 59.2px). */
.tile .num { font: 400 23px/1 var(--serif); margin-bottom: 5.9px; }
.tile.small { width: 48px; border-radius: 10px; }
.tile.small .mon { font-size: 10px; padding: 2px 0 1px; }
.tile.small .dow { margin-top: 8.05px; font-size: 9.35px; }
.tile.small .num { font-size: 20.4px; margin-bottom: 3.55px; }
.ev-title { font: 400 23px/1.2 var(--serif); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ev-title:hover { color: var(--wine); }
.ev-meta { font-size: 14px; color: var(--muted); }
.ev-reason { font-size: 14px; color: var(--reason); }
.ev.hidden-row { background: var(--blush); }
.ev.going-row { box-shadow: inset 4px 0 0 var(--coral); }
p.card-foot { margin: 0; }
.cal h2 { margin: 0 0 6px; font: 400 24px/1.2 var(--serif); }
.cal .input { width: 100%; font-size: 14px; }
.cal .hint { margin: 10px 0 0; line-height: 1.45; }
.tag.different { font-size: 12px; padding: 3px 8px; border-radius: 8px; margin-right: 4px; vertical-align: 1px; }
/* Going events, collapsed to one bar at the top of the feed; opens to compact rows. */
.going-strip { border-bottom: 1px solid var(--row); background: var(--white); }
.going-strip summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 16px;
  cursor: pointer; font: 500 15px var(--sans); color: var(--ink); }
.going-strip summary::-webkit-details-marker { display: none; }
.going-strip summary:hover .going-toggle { color: var(--wine); }
.going-icon { flex: none; color: var(--coral); }
.going-sum { flex: 1; min-width: 0; }
.going-toggle { flex: none; display: inline-flex; align-items: center; gap: 6px; font: 600 14px var(--sans); color: var(--raspberry); }
.going-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); }
.going-strip[open] .going-toggle::after { transform: translateY(2px) rotate(-135deg); }
.going-strip .when-open, .going-strip[open] .when-closed { display: none; }
.going-strip[open] .when-open { display: inline; }
.going-item { padding: 10px 16px; border-top: 1px solid var(--row); display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; }
.going-item .mini-title { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.going-item .mini-title:hover { color: var(--wine); }
/* "Did you go?": above the Going strip, until each one is answered. */
.ask { border-bottom: 1px solid var(--row); background: var(--white); }
.ask-head { margin: 0; padding: 14px 16px 4px; font: 400 21px/1.2 var(--serif); }
.ask-item { padding: 10px 16px 14px; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; }
.ask-item + .ask-item { border-top: 1px solid var(--row); }
.ask-item .row-ctl, .ev-body form .row-ctl { margin-top: 6px; }
.day-head { padding: 14px 16px 6px; background: var(--blush); border-bottom: 1px solid var(--blush-line);
  font: 500 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.tail { margin: 0; padding: 20px 16px; font-size: 15px; color: var(--muted); }
.empty { padding: 32px 16px; color: var(--muted); }
.empty h2 { font: 400 26px/1.2 var(--serif); color: var(--ink); margin: 0 0 8px; }
.tag { display: inline-block; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 10px; background: var(--peach); color: var(--wine); }

/* ---- cards (desktop side columns) ---- */
.card-head { margin: 0; padding: 18px 20px; background: var(--blush); border-bottom: 1px solid var(--blush-line);
  display: flex; justify-content: space-between; align-items: baseline; font: 400 22px/1.2 var(--serif); }
.card-head h2 { margin: 0; font: 400 24px/1.2 var(--serif); }
.card-group { padding: 16px 20px; border-bottom: 1px solid var(--row); }
.card-group.last { border-bottom: 0; display: flex; flex-direction: column; gap: 2px; }
.card-group h3 { margin: 0 0 8px; font: 400 19px/1.2 var(--serif); }
.card-note { margin: 0; padding: 14px 20px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--row); }
.card-foot { display: block; padding: 14px 20px; }
.card.pad { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.card.pad h2 { margin: 0; font: 400 22px/1.2 var(--serif); }
.card.pad .hint { margin: 0; line-height: 1.45; }
.mini { padding: 14px 20px; border-bottom: 1px solid var(--row); display: grid; grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px; text-decoration: none; color: var(--ink); }
.mini:hover { color: var(--wine); }
.mini-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mini-title { font: 400 18px/1.2 var(--serif); }
.learned { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; }
.learned li, .learned-line { display: flex; gap: 10px; align-items: flex-start; }
.sign { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px var(--sans); margin-top: 1px; background: var(--white); border: 1.5px solid var(--outline); color: var(--muted); }
.sign.up { background: var(--sel-fill); border-color: var(--sel-edge); color: var(--ink); }
.learned-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }

/* ---- event detail ---- */
.facts { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px 14px; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.why { display: flex; flex-direction: column; gap: 10px; }
.why-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; }
.why-bar { height: 8px; border-radius: 4px; background: var(--peach); overflow: hidden; }
.why-bar span { display: block; height: 100%; background: var(--coral); border-radius: 4px; }
.why-word { grid-column: 2; margin-top: -6px; font-size: 13px; color: var(--muted); }
.about { font: 400 17px/1.6 var(--serif); white-space: pre-line; }
.listed { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--row); }
.merge-why { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--row); }
.merge-why .link-btn { font-size: 14px; }
.listed:has(+ .merge-why) { border-bottom: 0; }

/* ---- sources ---- */
.src { padding: 18px 16px; border-bottom: 1px solid var(--row); display: flex; flex-direction: column; gap: 4px; }
.src-name { font: 400 21px/1.2 var(--serif); }
.src-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.src-top .status { flex: none; }
.src-feeds { margin-top: 6px; }
.src-feeds summary { cursor: pointer; font: 600 14px var(--sans); color: var(--raspberry); min-height: 32px; display: inline-flex; align-items: center; }
.src-feeds ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.src-feeds li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.src-feeds .feed-name { display: block; font-size: 15px; }
.src-feeds .hint { display: block; }
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); } .dot.wait { background: var(--wait); } .dot.needs { background: var(--needs); }
table.plain { width: 100%; border-collapse: collapse; font-size: 14px; }
table.plain th, table.plain td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--row); vertical-align: top; }
.scroll { overflow-x: auto; }

/* ---- phone navigation ---- */
.nav { position: fixed; left: 0; right: 0; bottom: 0; height: 78px; padding-bottom: 8px; background: var(--paper);
  border-top: 1px solid var(--card); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); z-index: 10; }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none;
  font: 500 13px var(--sans); color: var(--muted); border-top: 3px solid transparent; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-top-color: var(--coral); }

/* ---- desktop: the FeedDesktop board ---- */
@media (min-width: 1000px) {
  .page { padding-bottom: 48px; }
  .nav, .phone-only { display: none !important; }
  .desk-only { display: block; }

  .topnav { display: block; background: var(--blush); border-bottom: 1px solid var(--blush-line); }
  /* Logo and tab labels share one text baseline. Each tab reaches down to the
     header's bottom edge, so the active underline sits on the header border
     instead of floating mid-bar; the header's height comes from that (~76px). */
  .topnav-in { max-width: 1384px; margin: 0 auto; padding: 24px 32px 0; display: flex; flex-wrap: wrap;
    align-items: baseline; gap: 12px 40px; }
  .tabs { display: flex; gap: 4px; flex-wrap: wrap; }
  .tabs a { padding: 0 14px 22px; line-height: 22px; display: flex; font: 500 15px/22px var(--sans); color: var(--muted);
    text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
  .tabs a[aria-current="page"] { font-weight: 700; color: var(--ink); border-bottom-color: var(--coral); }
  .tabs a:hover { color: var(--ink); }
  /* Search and profile stay vertically centred in the bar. The negative top margin
     cancels the bottom one, so this group never makes the row taller than the tabs. */
  .topnav-right { display: flex; align-items: center; gap: 12px; align-self: flex-end; margin: -16px 0 16px auto; }
  .search { width: 300px; max-width: 60vw; height: 44px; font-size: 15px; }

  .desk { max-width: 1384px; margin: 0 auto; padding: 32px 32px 0; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
  .card { border: 1px solid var(--card); border-radius: 24px; overflow: hidden; }
  .filters-card { flex: 1 1 240px; max-width: 290px; }
  .feed-card { flex: 999 1 560px; min-width: 0; box-shadow: 0 12px 32px rgba(74, 21, 38, 0.05); }
  .week { flex: 1 1 260px; max-width: 320px; display: flex; flex-direction: column; gap: 24px; }

  .feed-card .band { padding: 28px 28px 22px; }
  .feed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
  .feed-card .band h1 { margin: 0; font-size: 48px; line-height: 1.05; }
  .feed-card .meta { margin-top: 8px; font-size: 16px; }
  .view-toggle { margin-top: 0; }

  .feed-card .ev { padding: 20px 28px; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; align-items: center; }
  .feed-card .tile .num { font-size: 23.8px; }
  .feed-card .ev-body { gap: 5px; }
  .feed-card .ev-title { font-size: 24px; }
  .feed-card .ev-actions { grid-column: auto; justify-content: flex-end; }
  .feed-card .tail, .feed-card .empty { padding-left: 28px; padding-right: 28px; }
  .feed-card .going-strip summary, .feed-card .going-item, .feed-card .ask-head, .feed-card .ask-item {
    padding-left: 28px; padding-right: 28px; }
  .feed-card .tail { padding-top: 18px; padding-bottom: 18px; }

  /* Other pages: one centred column under the same header. */
  .narrow { max-width: 760px; margin: 32px auto 0; border: 1px solid var(--card); border-radius: 24px; overflow: hidden;
    min-height: 0; padding-bottom: 0; }
  .narrow .band { padding: 28px 32px 22px; }
  .narrow .ev, .narrow .section, .narrow .src, .narrow .tail, .narrow .day-head, .narrow .empty { padding-left: 32px; padding-right: 32px; }
  .wrap { padding: 0 32px; }
}