/**
 * Activity — the member's own trail.
 *
 * Two surfaces share this sheet and, deliberately, its class names: the full
 * /activity page (.activity-shell, below) and the header Activity tray
 * (.activity-drawer, at the foot of this file). They are the same feed, so
 * they are the same row — a squared 32px glyph tile, a headline, a muted
 * second line, tinted and italic when the line quotes the coach's own words.
 * The page adds a timestamp and its own roomier rhythm; nothing else differs.
 *
 * The page's shell is the Notebook's and the Library's material: one elevated
 * --surface-card with a masthead band, a quiet search box, Barlow Condensed
 * labels over row groups, rows that light off a 3px teal edge. A feed has no
 * detail pane to open — every row leaves for the module or the conversation it
 * names — so it is a single reading column rather than a master-detail split.
 *
 * The typographic contract, as stated in modules/notebook.css:
 *   Frank Ruhl  = the member's voice (the masthead)
 *   Barlow      = the system's voice (row headlines, snippets, counts)
 *   Barlow Cond = wayfinding (day labels, pills, dates, actions)
 *
 * Tokens only. Every colour below flips with [data-theme="dark"], so the
 * theme needs no override block of its own — the previous one existed to
 * patch two hard-coded rgba() badges and is gone with them.
 *
 * Page rules are scoped to .activity-shell so the tray, which shares the row
 * class names, keeps its own (tighter, untimestamped) treatment untouched.
 */

/* ===== Shared by both surfaces ========================================== */

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.activity-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-row-body {
  flex: 1;
  min-width: 0;
}

/* ===== The page (/activity) ============================================= */

.activity-shell {
  max-width: var(--width-form);
  margin: 0.25rem auto 1.5rem;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

/* Entrance: the hub's motion grammar, once per session (entrance_controller
   sets data-entrance="play" on first sighting only; base.css collapses this
   under prefers-reduced-motion). */
.activity-shell[data-entrance="play"] > * {
  animation: motion-rise var(--motion-enter) var(--ease-out) backwards;
}

.activity-shell[data-entrance="play"] > :nth-child(1) { animation-delay: 0ms; }
.activity-shell[data-entrance="play"] > :nth-child(2) { animation-delay: 60ms; }
.activity-shell[data-entrance="play"] > :nth-child(3) { animation-delay: 120ms; }
.activity-shell[data-entrance="play"] > :nth-child(4) { animation-delay: 180ms; }

/* ── The masthead: just the name ─────────────────────────────────────────── */

.activity-masthead {
  padding: 1.35rem var(--card-x) 1.05rem;
  border-bottom: 1px solid var(--border-light);
}

.activity-masthead h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: calc(21px * var(--text-scale));
  color: var(--text-dark);
  margin: 0;
}

/* ── Search and date: the Notebook's quiet box, one row ──────────────────── */

.activity-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem var(--card-x) 0.9rem;
  border-bottom: 1px solid var(--border-light);
}

.activity-search-box {
  flex: 1 1 14rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0 0.65rem;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  transition: border-color var(--motion-quick) var(--ease-out);
}

/* The input keeps the app's own token ring (base.css :focus-visible); the box
   just firms its border so the control reads as one piece. */
.activity-search-box:focus-within {
  border-color: var(--teal-accent);
}

.activity-search-box .fa-magnifying-glass {
  color: var(--text-secondary);
  font-size: calc(13px * var(--text-scale));
}

.activity-search-input {
  flex: 1;
  min-width: 0;
  min-height: calc(var(--tap) - 2px);
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  /* 16px floor: anything smaller makes iOS zoom the page on focus. */
  font-size: calc(16px * var(--text-scale));
  color: var(--text-dark);
}

.activity-search-input::placeholder {
  color: var(--text-secondary);
}

.activity-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* The date field keeps its native picker — [data-theme="dark"] sets
   color-scheme, so the widget follows the theme instead of glowing white. */
.activity-date-input {
  flex: 0 1 11rem;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 0.65rem;
  border: 1px solid var(--border-light);
  background: var(--surface-card);
  font-family: var(--font-body);
  font-size: calc(16px * var(--text-scale));
  color: var(--text-dark);
  transition: border-color var(--motion-quick) var(--ease-out);
}

.activity-date-input:focus {
  border-color: var(--teal-accent);
}

.activity-filter-submit {
  min-height: var(--tap);
  padding: 0.25rem 1.1rem;
  border: 1px solid var(--teal-accent);
  background: transparent;
  color: var(--teal-ink);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12.5px * var(--text-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--motion-quick) var(--ease-out);
}

@media (hover: hover) {
  .activity-filter-submit:hover {
    background: var(--teal-light);
  }
}

.activity-filter-clear {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 0.5rem;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12.5px * var(--text-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-ink);
  text-decoration: none;
}

@media (hover: hover) {
  .activity-filter-clear:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ── The kind filter ─────────────────────────────────────────────────────── */

.activity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.85rem var(--card-x);
  border-bottom: 1px solid var(--border-light);
}

.activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: var(--tap);
  padding: 0.2rem 0.85rem;
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12.5px * var(--text-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--motion-quick) var(--ease-out),
              border-color var(--motion-quick) var(--ease-out),
              color var(--motion-quick) var(--ease-out);
}

@media (hover: hover) {
  .activity-pill:hover:not(.is-active) {
    border-color: var(--teal-accent);
    color: var(--teal-ink);
    text-decoration: none;
  }
}

/* The chosen filter wears the app's own selected treatment — a teal wash
   inside a teal edge (.values-option:has(input:checked), the selected rail
   row). A white label on a teal fill was the other option and measured worse
   in both themes. */
.activity-pill.is-active {
  border-color: var(--teal-accent);
  background: var(--teal-light);
  color: var(--teal-ink);
}

/* Each pill's own total, as data. Tracking is reset: a tabular number set on
   0.14em reads as spaced-out digits. */
.activity-pill-count {
  font-family: var(--font-body);
  font-size: calc(12px * var(--text-scale));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--text-secondary);
}

/* ── Day groups: quiet labels over row groups ────────────────────────────── */

.activity-index {
  padding-bottom: 1.25rem;
}

.activity-shell .activity-bucket {
  margin: 0;
}

.activity-bucket-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem var(--card-x) 0.45rem;
}

.activity-shell .activity-bucket-heading {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12px * var(--text-scale));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: none;
  padding: 0;
  margin: 0;
}

.activity-bucket-count {
  font-family: var(--font-body);
  font-size: calc(12px * var(--text-scale));
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Rows ────────────────────────────────────────────────────────────────── */

.activity-shell .activity-row {
  display: block;
  padding: 0;
  border: 0;
}

/* One row, one link. The left edge is transparent at rest and goes teal on
   hover, the same move the Notebook's and the Library's rails make; the left
   padding is short by its width so the text does not shift. */
.activity-shell .activity-row-link {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-height: var(--tap);
  padding: 0.7rem var(--card-x) 0.75rem calc(var(--card-x) - 3px);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background var(--motion-quick) var(--ease-out),
              border-color var(--motion-quick) var(--ease-out);
}

@media (hover: hover) {
  .activity-shell .activity-row-link:hover {
    background: var(--surface-page);
    border-left-color: var(--teal-accent);
  }

  .activity-shell .activity-row-link:hover .activity-row-label {
    color: var(--teal-ink);
  }
}

.activity-shell .activity-row-icon {
  width: 32px;
  height: 32px;
  margin-top: 1px;
  border-radius: 0;
  background: var(--surface-page);
  color: var(--text-secondary);
  font-size: calc(14px * var(--text-scale));
}

.activity-shell .activity-row-icon--quoted {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.activity-shell .activity-row-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(15.5px * var(--text-scale));
  line-height: 1.55;
  color: var(--text-dark);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  transition: color var(--motion-quick) var(--ease-out);
}

.activity-shell .activity-row-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 2px 0 0;
  white-space: normal;
}

.activity-shell .activity-row-snippet--quoted {
  font-style: italic;
}

/* When it happened, in the wayfinding face — the day heading above already
   says which day, so this is the fine grain under it. */
.activity-shell .activity-row-time {
  flex-shrink: 0;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-size: calc(11.5px * var(--text-scale));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── The foot: the honest size of the window ─────────────────────────────── */

.activity-foot {
  padding: 1rem var(--card-x) 0.1rem;
  font-family: var(--font-body);
  font-size: calc(12px * var(--text-scale));
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Empty: one flat line and the way out ────────────────────────────────── */

.activity-shell .activity-empty {
  padding: 2rem var(--card-x) 2.25rem;
  text-align: left;
}

.activity-shell .activity-empty p {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0 0 1.1rem;
}

.activity-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-height: var(--tap);
  padding: 0.25rem 1rem 0.25rem 1.2rem;
  border: 1px solid var(--teal-accent);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12.5px * var(--text-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-ink);
  text-decoration: none;
  transition: background var(--motion-quick) var(--ease-out);
}

.activity-empty-link .fa-sharp {
  font-size: 1.3em;
  transition: transform var(--motion-quick) var(--ease-out);
}

@media (hover: hover) {
  .activity-empty-link:hover {
    background: var(--teal-light);
  }

  .activity-empty-link:hover .fa-sharp {
    transform: translateX(2px);
  }
}

/* ── Narrow: the filter row stacks, the card keeps its edges ─────────────── */

@media (max-width: 600px) {
  .activity-search-box,
  .activity-date-input,
  .activity-filter-submit {
    flex: 1 1 100%;
  }

  .activity-filter-clear {
    padding-left: 0;
  }
}

/* Full-page single-conversation host (opened from Activity / Recent chats). */
.conversation-page {
  max-width: 900px;
  margin: 0 auto;
}
.conversation-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.conversation-page-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--navy-primary);
  text-decoration: none;
  font-weight: 600;
}
.conversation-page-back:hover { color: var(--teal-ink); }
.conversation-page-module-link {
  color: var(--teal-ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.conversation-page-module-link:hover { text-decoration: underline; }

/* ============================================================
   Activity tray (the header drawer) — transcribed from
   docs/design-reference/extracted/drawer-activity.html.

   The tray re-uses the /activity page's bucket/list/row class names but its
   own scale and rhythm: a squared 32px glyph tile, a 15.5px headline and a
   13.5px muted second line, rows separated by a hairline. Scoped to
   .activity-drawer so the full page keeps its own (roomier, timestamped)
   treatment.

   Literal pixel type from the capture is written calc(Npx * var(--text-scale)),
   the convention modules/hub.css established.
   ============================================================ */

.activity-drawer .activity-bucket { margin-bottom: 1.5rem; }

.activity-drawer .activity-bucket-heading {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: calc(11.5px * var(--text-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0 0 0.6rem;
}

.activity-drawer .activity-list { display: flex; flex-direction: column; }

.activity-drawer .activity-row {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--border-light);
}

.activity-drawer .activity-row:hover {
  background: none;
  margin: 0;
  padding: 0;
}

.activity-drawer .activity-row-link {
  display: flex;
  gap: 0.85rem;
  padding: 0.8rem 0;
  text-decoration: none;
  color: inherit;
}

.activity-drawer .activity-row-link:hover .activity-row-label { color: var(--teal-ink); }

.activity-drawer .activity-row-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 0;
  margin-top: 0;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: calc(14px * var(--text-scale));
}

/* Rows that quote somebody — a coach's note — are tinted and set in italic,
   as the reference does. */
.activity-drawer .activity-row-icon--quoted {
  background: var(--teal-light);
  color: var(--teal-ink);
}

.activity-drawer .activity-row-body { flex: 1; min-width: 0; }

.activity-drawer .activity-row-label {
  display: block;
  font-family: var(--font-body);
  font-size: calc(15.5px * var(--text-scale));
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-dark);
  white-space: normal;
}

.activity-drawer .activity-row-snippet {
  display: block;
  font-family: var(--font-body);
  font-size: calc(13.5px * var(--text-scale));
  line-height: 1.65;
  color: var(--text-muted);
  margin: 2px 0 0;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.activity-drawer .activity-row-snippet--quoted { font-style: italic; }

.activity-drawer .activity-empty {
  padding: 2rem 0;
  text-align: left;
}

.activity-drawer .activity-empty p {
  font-family: var(--font-body);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}