/* Discover: search, filters, range, sort, and the event list. Stream C.
   Colours from tokens.css only. Every control is at least 44 px tall. */

.discover { display: grid; gap: 10px; min-width: 0; }
.discover .top { display: grid; gap: 8px; }
.small { font-size: .8rem; }
.offline-note { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--st-waitlisted-bg); color: var(--st-waitlisted-fg); font-size: .85rem; }
.offline-note[hidden] { display: none; }

.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 3px; background: var(--ground); border-radius: 10px; }
.tabs [role="tab"] { border: 0; background: transparent; border-radius: 8px; color: var(--muted); }
.tabs[hidden], .tabs [role="tab"][hidden] { display: none; }
.tabs [role="tab"][aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent); }

.range { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.range-head label { font-weight: 600; }
.range-out { font: 500 .9rem var(--font-mono); color: var(--accent); }
.range input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); }
.range[hidden] { display: none; }
.range-note { margin: 0; font-size: .8rem; }
.range-note button { min-height: 44px; }

.filters { border: 1px solid var(--line); border-radius: var(--radius); }
.filters summary { min-height: 44px; display: flex; align-items: center; padding: 0 12px; cursor: pointer; font-weight: 600; }
.fcount { font-weight: 400; color: var(--accent); margin-left: 6px; }
.fbody { padding: 0 12px 12px; display: grid; gap: 4px; }
.fgroup { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.fgroup[hidden] { display: none; }
.fgroup legend, .fgroup > label { display: block; padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .85rem; }
.chip-set { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px; }
.ftoggle {
  min-height: 44px; padding: 0 12px; border-radius: 22px; font-size: .85rem; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
}
.ftoggle[aria-pressed="true"], .ftoggle.on { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* A check mark, so "on" does not depend on colour. */
.ftoggle[aria-pressed="true"]::before { content: '✓'; }
.ftoggle .n { font: 500 .75rem var(--font-mono); color: var(--muted); }
.ftoggle .x { font-size: 1.1rem; line-height: 1; }
.linkish { border: 0; background: transparent; color: var(--accent); text-decoration: underline; justify-self: start; padding: 0 4px; }
.linkish[hidden] { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.active-filters[hidden], .sortrow[hidden], .filters[hidden] { display: none; }
.sortrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.count { margin: 0; color: var(--muted); font-size: .85rem; }
.sortlabel select { width: auto; }
@media (min-width: 900px) { .sortlabel select { font-size: .85rem; } }
.count-next { display: none; }
.controls[hidden] { display: none; }

/* Phone: a compact header (views/discover.js place()). The sheet at half has
   about 260 px under its handle, so the first event has to start near the top:
   search, one summary line, one row for Filters and Sort, then the list.
   The range slider lives inside Filters here. */
@media (max-width: 899px) {
  .discover { gap: 8px; }
  .count-order { display: none; }
  .count-next { display: inline; }
  .sortrow { min-height: 22px; }
  .controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .controls > .filters { grid-column: 1 / -1; grid-row: 1; border: 0; }
  .controls > .sortlabel { grid-column: 2; grid-row: 1; z-index: 1; }
  .filters summary { display: flex; width: max-content; border: 1px solid var(--line); border-radius: 22px; padding: 0 16px; }
  .filters[open] > summary { border-color: var(--accent); color: var(--accent); }
  .filters[open] .fbody { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
  .sortlabel select { border-radius: 22px; }
  .fbody .range { border: 0; padding: 0 0 8px; }
}

.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; column-gap: 4px; border-bottom: 1px solid var(--line); }
.row:hover { background: var(--accent-tint); }
.row-main { min-width: 0; display: grid; gap: 2px; align-content: center; padding: 10px 6px; color: var(--text); text-decoration: none; border-radius: 8px; }
a.row-main:focus-visible { outline-offset: -2px; }
.row-name { font-weight: 600; overflow-wrap: anywhere; }
.row-meta { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.row-deadline { font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row-deadline.urgent { color: var(--urgent); font-weight: 600; }
.row-deadline.soon { color: var(--soon); font-weight: 600; }
.row-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.row-tags:empty { display: none; }
.row-pin { grid-column: 2; grid-row: 1 / span 2; width: 44px; padding: 0; align-self: center; border-color: transparent; background: transparent; display: grid; place-items: center; color: var(--muted); }
.row-pin:hover:not(:disabled) { color: var(--accent); }
.row-pin:disabled { opacity: .35; cursor: default; }
.row-act {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--accent); text-decoration: none; font-weight: 600; font-size: .85rem;
}
.row-act:hover { border-color: var(--accent); }
.row-quiet .row-main { opacity: .9; }
/* Fit under the row's text: the score and its first reason, one tap to see all. */
.row-fit {
  grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px;
  padding: 0 6px; margin: -8px 0 2px; border: 0; border-radius: 8px; background: transparent; text-align: left;
}
.row-fit:hover { background: var(--accent-tint); }
.row-fit .pill { flex: none; }
.row-fit-why { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .85rem; }
.row-fit-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; line-height: 1.5; background: var(--st-saved-bg); color: var(--st-saved-fg); }
.pill-plain { background: var(--ground); color: var(--muted); border: 1px solid var(--line); }
.pill-saved { background: var(--st-saved-bg); color: var(--st-saved-fg); font-weight: 600; }
.pill-urgent { background: var(--st-rejected-bg); color: var(--st-rejected-fg); font-weight: 600; }
.pill-soon { background: var(--st-waitlisted-bg); color: var(--st-waitlisted-fg); font-weight: 600; }
.pill-fit { background: var(--accent-tint); color: var(--accent); font-weight: 600; }

.empty { padding: 20px 4px; }
.fm-group { margin-top: 14px; }
.fm-group h3 { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.fm-group .n { font: 500 .75rem var(--font-mono); padding: 0 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); }

/* My radar: the speaker's own list. Rows carry their buttons under the text,
   so a phone has the next step one tap away without opening the event. */
.radar-lead { margin: 0; }
.radar-strip { margin: 2px 0 4px; }
.radar-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.radar-count a {
  display: flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 0 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--text); text-decoration: none;
}
.radar-count a:hover { border-color: var(--accent); }
.radar-n { font: 500 1rem var(--font-mono); }
.radar-l { font-size: .85rem; color: var(--muted); }
.radar-hint { margin: 0 0 4px; }
.radar-group > h3 { margin-bottom: 2px; }
.row-radar { grid-template-columns: minmax(0, 1fr); }
.row-radar:hover { background: transparent; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px 12px; }
.row-actions .row-act { grid-column: auto; grid-row: auto; align-self: auto; }
.row-act-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.row-act-primary:hover { border-color: var(--accent); filter: brightness(1.08); }
.row-act:disabled { opacity: .6; }
.row-warn { font-size: .85rem; color: var(--urgent); font-weight: 600; }
.row-fit-more { margin-left: auto; flex: none; color: var(--muted); font-size: 1.25rem; line-height: 1; }
.pill-talk { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.radar-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.active-filters .active-chip { min-height: 44px; }