/* Trinity/iPhone-style polish for SELAS static archive. Conservative overrides only. */
:root {
  color-scheme: dark;
  --ios-bg: #000;
  --ios-panel: rgba(28, 28, 30, .78);
  --ios-panel-strong: rgba(36, 36, 38, .94);
  --ios-text: #f5f5f7;
  --ios-muted: #8e8e93;
  --ios-line: rgba(84, 84, 88, .55);
  --ios-blue: #0a84ff;
  --ios-orange: #ff9f0a;
}
* { box-sizing: border-box; }
html { background: var(--ios-bg); }
body {
  background: radial-gradient(circle at 50% -18rem, rgba(10,132,255,.16), transparent 36rem), var(--ios-bg) !important;
  color: var(--ios-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji" !important;
}
/* iOS-like segmented navigation: one clean rounded glass strip, scrolls horizontally instead of wrapping badly. */
.topbar {
  position: sticky !important;
  top: 10px !important;
  z-index: 1000 !important;
  margin: 14px auto 0 !important;
  width: min(1120px, calc(100% - 28px)) !important;
  border: 1px solid var(--ios-line) !important;
  border-radius: 22px !important;
  background: var(--ios-panel) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
  padding: 12px 16px !important;
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;
  font-size: 1.15em !important;
}
.topbar::-webkit-scrollbar { display: none; }
.topbar a {
  color: var(--ios-text) !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  font-size: 1em !important;
}
.topbar a:hover, .topbar a:focus-visible, .topbar a.active, .topbar .active {
  color: #fff !important;
  background: color-mix(in srgb, var(--ios-blue) 18%, transparent) !important;
  outline: none !important;
}
.topbar .sep {
  color: var(--ios-muted) !important;
  opacity: .7 !important;
  flex: 0 0 auto !important;
  padding: 0 6px !important;
}
.hero {
  background: transparent !important;
  box-shadow: none !important;
  padding-top: 54px !important;
}
.hero h1, h1 {
  letter-spacing: -.06em !important;
  font-weight: 760 !important;
}
.hero-badge, .week-indicator, .stat-l, .section-stat, .card-text p, .wt-meta, .meta, .subtitle, footer {
  color: var(--ios-muted) !important;
}
.on-this-day, .card, .topic, .post, .forum-card, .album-card, .photo-card, .doc-card, .stat-card, .stat, .toolbar, .empty, table {
  border-color: var(--ios-line) !important;
}
.on-this-day, .card, .topic, .post, .forum-card, .album-card, .photo-card, .doc-card, .stat-card, .toolbar, .empty {
  background: var(--ios-panel) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.20) !important;
}
.card { min-height: 74px !important; }
.card:hover, .topic:hover, .album-card:hover, .photo-card:hover, .doc-card:hover, .forum-card:hover {
  transform: translateY(-2px) !important;
  border-color: color-mix(in srgb, var(--ios-blue) 55%, var(--ios-line)) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.30) !important;
}
.section-header { border-bottom-color: var(--ios-line) !important; }
a { color: #6bb6ff; }
.card-arrow, .arrow { color: var(--ios-muted) !important; }
.stat-n, .otd-header h2 { color: var(--ios-orange) !important; }
img { border-radius: 14px; }
.wt-rank, .tc-rank {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif !important;
}
/* Avoid missing-emoji square glyphs on headless/Linux browsers: turn old emoji icon slots into simple iOS-style dots. */
.card-icon, .section-icon {
  font-size: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.card-icon::before, .section-icon::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--ios-blue);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ios-blue) 14%, transparent);
}
/* The weekly panel is intentionally scrollable; make the clipping obvious rather than looking broken. */
.event-container { padding-right: 4px !important; }
@media (max-width: 900px) {
  .topbar { width: calc(100% - 20px) !important; top: 6px !important; border-radius: 18px !important; }
  .topbar a { padding: 10px 14px !important; font-size: 1rem !important; }
}
@media (max-width: 700px) {
  .hero { padding-top: 34px !important; }
  .grid { grid-template-columns: 1fr !important; }
  .searchrow { grid-template-columns: 1fr !important; }
  .stats { grid-template-columns: 1fr !important; }
}