/* ============================================================
 * css/components/calendar-filter.css — TinkyTown calendar event-type
 * sub-tabs strip (P2.T4, 2026-05-11).
 *
 * Owns:
 *   - #calf-strip + .calf-tab (segmented sub-tabs rendered below the
 *     .cal-toolbar by /js/components/calendar-filter.js)
 *   - .calf-tz pill (Intl-resolved timezone hint)
 *   - .calf-empty (honest empty-state when a tab matches zero real
 *     events — no fabricated rows)
 *
 * Brand tokens (from /css/tokens.css):
 *   --surface-deep · --amber · --amber-strong · --green · --green-soft
 *   --text-faint · --border (fall back gracefully if undefined)
 *
 * Load order: AFTER /css/outreach.css so .cal-toolbar layout is
 * already in scope.
 * ============================================================ */

.calf-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  background: var(--surface-deep, #0d0b10);
  font-family: 'General Sans', system-ui, sans-serif;
}

.calf-tab {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--text-faint, rgba(255,255,255,0.65));
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  min-height: 44px;
}

.calf-tab:hover {
  color: #fff;
  border-color: var(--amber-soft, #f0bb6b);
}

.calf-tab:focus-visible {
  outline: 2px solid var(--amber, #e8a33d);
  outline-offset: 2px;
}

/* Active sub-tab: var(--amber) accent per task acceptance. */
.calf-tab.is-active {
  background: var(--amber, #e8a33d);
  color: #1a1208;
  border-color: var(--amber-strong, #c98620);
  font-weight: 600;
}

.calf-tz {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-faint, rgba(255,255,255,0.55));
  font-family: 'General Sans', system-ui, sans-serif;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
}

/* Empty-state shown when an active sub-tab has zero real events —
 * we never fabricate calendar rows. */
.calf-empty {
  grid-column: 1 / -1;
  margin: 14px auto;
  max-width: 480px;
  text-align: center;
  font-family: 'General Sans', system-ui, sans-serif;
  font-size: 13px;
  color: var(--text-faint, rgba(255,255,255,0.6));
  padding: 12px 16px;
  border: 1px dashed var(--border, rgba(255,255,255,0.12));
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}