/* ==========================================================================
   TaterTV — global.css
   Single stylesheet for tatertv.app. The Astro blog keeps its own.

   Load it after the font link:
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,500;0,9..40,700;0,9..40,800;1,9..40,400&family=JetBrains+Mono:wght@400;600;700;800&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/global.css">

   SECTIONS
     01  Tokens
     02  Reset & base
     03  Ambient background
     04  Layout
     05  App header (index)
     06  Content-page header
     07  Controls: pills, buttons, selects
     08  Date ribbon, week pills, calendar
     09  Show cards
     10  Loading states
     11  Toast, fixed nav, scroll-to-top
     12  Content-page prose components
     13  Blog rails (carousels above the footer)
     14  Footer  (markup mirrored by /blog/src/components/Footer.astro)
     15  Responsive
     16  Accessibility
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   The alpha ramps below are an exact inventory of what the site already uses.
   Near-duplicates are flagged; collapse them when you have time to eyeball it.
   ========================================================================== */

:root {
  /* --- Core palette ------------------------------------------------------ */
  --tt-bg:            #111111;
  --tt-bg-raised:     #1a1a1a;   /* native <option> menus */
  --tt-bg-overlay:    rgba(30,30,30,0.96);
  --tt-bg-nav:        rgba(10,10,10,0.94);
  --tt-bg-fab:        rgba(20,14,8,0.85);
  --tt-bg-fab-hover:  rgba(30,20,10,0.95);

  --tt-accent:        #d28c3c;
  --tt-accent-cream:  #f5e6d0;
  --tt-accent-rgb:    210,140,60;
  --tt-accent-deep-rgb: 180,90,40;

  --tt-text:          #f0f0f0;
  --tt-alert:         #ff8a7a;
  --tt-alert-rgb:     231,76,60;

  /* --- White alpha ramp (surfaces, borders, text) ------------------------- */
  --tt-w-005: rgba(255,255,255,0.005);
  --tt-w-02:  rgba(255,255,255,0.02);
  --tt-w-03:  rgba(255,255,255,0.03);
  --tt-w-04:  rgba(255,255,255,0.04);
  --tt-w-05:  rgba(255,255,255,0.05);
  --tt-w-06:  rgba(255,255,255,0.06);
  --tt-w-07:  rgba(255,255,255,0.07);
  --tt-w-08:  rgba(255,255,255,0.08);
  --tt-w-10:  rgba(255,255,255,0.10);
  --tt-w-12:  rgba(255,255,255,0.12);
  --tt-w-14:  rgba(255,255,255,0.14);
  --tt-w-16:  rgba(255,255,255,0.16);
  --tt-w-25:  rgba(255,255,255,0.25);
  --tt-w-30:  rgba(255,255,255,0.30);
  --tt-w-35:  rgba(255,255,255,0.35);
  --tt-w-38:  rgba(255,255,255,0.38);  /* dupe-ish of 40 */
  --tt-w-40:  rgba(255,255,255,0.40);
  --tt-w-45:  rgba(255,255,255,0.45);
  --tt-w-50:  rgba(255,255,255,0.50);
  --tt-w-55:  rgba(255,255,255,0.55);
  --tt-w-60:  rgba(255,255,255,0.60);
  --tt-w-65:  rgba(255,255,255,0.65);
  --tt-w-70:  rgba(255,255,255,0.70);
  --tt-w-75:  rgba(255,255,255,0.75);
  --tt-w-80:  rgba(255,255,255,0.80);
  --tt-w-90:  rgba(255,255,255,0.90);

  /* --- Semantic text aliases (prefer these in new code) ------------------- */
  --tt-text-strong:    var(--tt-w-90);
  --tt-text-body:      var(--tt-w-70);
  --tt-text-muted:     var(--tt-w-50);
  --tt-text-dim:       var(--tt-w-40);
  --tt-text-faint:     var(--tt-w-30);

  /* --- Accent alpha ramp -------------------------------------------------- */
  --tt-a-04:  rgba(var(--tt-accent-rgb),0.04);
  --tt-a-05:  rgba(var(--tt-accent-rgb),0.05);
  --tt-a-06:  rgba(var(--tt-accent-rgb),0.06);
  --tt-a-07:  rgba(var(--tt-accent-rgb),0.07);
  --tt-a-08:  rgba(var(--tt-accent-rgb),0.08);
  --tt-a-10:  rgba(var(--tt-accent-rgb),0.10);
  --tt-a-12:  rgba(var(--tt-accent-rgb),0.12);
  --tt-a-15:  rgba(var(--tt-accent-rgb),0.15);
  --tt-a-18:  rgba(var(--tt-accent-rgb),0.18);
  --tt-a-20:  rgba(var(--tt-accent-rgb),0.20);
  --tt-a-25:  rgba(var(--tt-accent-rgb),0.25);
  --tt-a-30:  rgba(var(--tt-accent-rgb),0.30);
  --tt-a-35:  rgba(var(--tt-accent-rgb),0.35);
  --tt-a-40:  rgba(var(--tt-accent-rgb),0.40);
  --tt-a-45:  rgba(var(--tt-accent-rgb),0.45);
  --tt-a-50:  rgba(var(--tt-accent-rgb),0.50);
  --tt-a-55:  rgba(var(--tt-accent-rgb),0.55);
  --tt-a-60:  rgba(var(--tt-accent-rgb),0.60);
  --tt-a-70:  rgba(var(--tt-accent-rgb),0.70);
  --tt-a-80:  rgba(var(--tt-accent-rgb),0.80);

  --tt-cream-65: rgba(245,230,208,0.65);
  --tt-cream-80: rgba(245,230,208,0.80);
  --tt-cream-85: rgba(245,230,208,0.85);
  --tt-cream-90: rgba(245,230,208,0.90);

  --tt-gradient-brand: linear-gradient(135deg, #f5e6d0, #d28c3c);

  /* --- Type -------------------------------------------------------------- */
  --tt-font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --tt-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tt-font-display: 'Playfair Display', Georgia, serif;

  /* --- Radii ------------------------------------------------------------- */
  --tt-r-xs:   4px;
  --tt-r-sm:   6px;
  --tt-r-md:   8px;
  --tt-r-lg:  10px;
  --tt-r-xl:  12px;
  --tt-r-2xl: 14px;
  --tt-r-pill: 20px;

  /* --- Layout ------------------------------------------------------------ */
  --tt-max-app:     900px;
  --tt-max-content: 720px;
  --tt-gutter:       20px;
  --tt-gutter-sm:    16px;

  /* --- Motion ------------------------------------------------------------ */
  --tt-t-fast: 0.2s ease;
  --tt-t-base: 0.25s ease;
  --tt-t-slow: 0.35s ease;
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tt-w-10); border-radius: 3px; }

html { scrollbar-color: var(--tt-w-10) transparent; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--tt-bg);
  color: var(--tt-text);
  font-family: var(--tt-font-sans);
  overflow-x: clip;
  overflow-clip-margin: 0px;
  padding-top: env(safe-area-inset-top);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes roll {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(180deg); }
}


/* ==========================================================================
   03  AMBIENT BACKGROUND
   Every page gets the same three-layer backdrop:
     <div class="ambient">
       <div class="ambient-orb1"></div>
       <div class="ambient-orb2"></div>
       <div class="ambient-scan"></div>
     </div>
   ========================================================================== */

.status-bar-cover {
  position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background: var(--tt-bg);
  z-index: 9999;
}

.ambient {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.ambient-orb1 {
  position: absolute; top: -18%; left: -8%;
  width: 550px; height: 550px;
  background: radial-gradient(circle, var(--tt-a-04), transparent 70%);
  filter: blur(90px);
}
.ambient-orb2 {
  position: absolute; bottom: -18%; right: -8%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(var(--tt-accent-deep-rgb),0.03), transparent 70%);
  filter: blur(90px);
}
.ambient-scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    var(--tt-w-005) 2px, var(--tt-w-005) 4px
  );
}


/* ==========================================================================
   04  LAYOUT
   .container            — app width (900px), room at the bottom for .week-nav
   .container.is-content — reading width (720px), no fixed nav
   ========================================================================== */

.container {
  position: relative;
  z-index: 1;
  max-width: var(--tt-max-app);
  margin: 0 auto;
  padding: 0 var(--tt-gutter) calc(100px + env(safe-area-inset-bottom));
}

.container.is-content {
  max-width: var(--tt-max-content);
  padding-bottom: 80px;
}


/* ==========================================================================
   05  APP HEADER (index)
   ========================================================================== */

.brand-header {
  padding: 8px var(--tt-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* A fixed compact bar that stays pinned at the top. */
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--tt-bg);
  margin-left: calc(var(--tt-gutter) * -1);
  margin-right: calc(var(--tt-gutter) * -1);
  border-bottom: 1px solid var(--tt-w-06);
}
.brand-left  { display: flex; align-items: center; gap: 14px; }
.brand-right { display: flex; flex-direction: row; align-items: center; gap: 8px; }

.brand-logo-img {
  width: 48px; height: 48px;
  min-width: 48px; min-height: 48px;
  object-fit: contain;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  flex-shrink: 0;
  background: var(--tt-bg);
  border-radius: var(--tt-r-md);
  opacity: 0;                                  /* revealed by .loaded — kills FOUC */
  transition: transform var(--tt-t-fast), opacity var(--tt-t-base);
}
.brand-logo-img.loaded { opacity: 1; }
.brand-logo-img:active { transform: scale(0.92); }

.brand-name {
  font-family: var(--tt-font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  background: var(--tt-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;                                  /* paired with .brand-logo-img */
  transition: opacity var(--tt-t-base);
}
.brand-name.loaded { opacity: 1; }

.brand-tagline {
  font-size: 10px;
  font-weight: 600;
  color: var(--tt-a-50);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: var(--tt-font-mono);
  margin-top: 2px;
}

.brand-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600;
  color: var(--tt-w-45);
  font-family: var(--tt-font-mono);
  letter-spacing: 0.5px;
}

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tt-accent);
  box-shadow: 0 0 10px var(--tt-a-50);
  animation: pulse 2s ease-in-out infinite;
  display: inline-block;
}

.tag-line {
  font-size: 11px; font-weight: 700;
  color: var(--tt-w-40);
  text-transform: uppercase; letter-spacing: 3px;
  font-family: var(--tt-font-mono);
}
.subtitle {
  font-size: 12px;
  color: var(--tt-w-38);
  font-family: var(--tt-font-mono);
}


/* ==========================================================================
   06  CONTENT-PAGE HEADER (about, terms, privacy, disclosure, blog)
   ========================================================================== */

.site-header {
  padding: 32px 0 40px;
  border-bottom: 1px solid var(--tt-w-06);
  margin-bottom: 48px;
  display: flex; align-items: center; justify-content: space-between;
}

.back-link {
  font-size: 11px;
  font-family: var(--tt-font-mono);
  color: var(--tt-a-60);
  text-decoration: none;
  letter-spacing: 0.5px;
  display: flex; align-items: center; gap: 6px;
  transition: color var(--tt-t-fast);
}
.back-link:hover { color: var(--tt-accent); }

.header-brand {
  font-family: var(--tt-font-display);
  font-size: 22px; font-weight: 900;
  background: var(--tt-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}


/* ==========================================================================
   07  CONTROLS: pills, buttons, selects
   ========================================================================== */

/* Header nav pill — also the base look for .footer-nav-primary a */
.header-nav-btn {
  padding: 6px 14px;
  border-radius: var(--tt-r-pill);
  border: 1px solid var(--tt-w-14);
  background: var(--tt-w-04);
  color: var(--tt-w-70);
  font-size: 11px; font-weight: 600;
  font-family: var(--tt-font-mono);
  letter-spacing: 0.5px;
  text-decoration: none;
  flex-shrink: 0;
  transition: all var(--tt-t-fast);
}
.header-nav-btn:hover {
  border-color: var(--tt-a-30);
  background: var(--tt-a-06);
  color: var(--tt-cream-85);
}

/* Country picker */
.country-btn {
  padding: 6px 14px;
  border-radius: var(--tt-r-pill);
  border: 1px solid var(--tt-w-14);
  background: var(--tt-w-06);
  color: var(--tt-w-55);
  font-size: 11px; font-weight: 600;
  font-family: var(--tt-font-mono);
  letter-spacing: 0.5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--tt-t-fast);
}
.country-btn:active { transform: scale(0.96); }
.country-btn.active {
  border-color: var(--tt-a-50);
  background: var(--tt-a-10);
  color: var(--tt-accent);
}

/* Bottom fixed nav buttons */
.nav-btn {
  padding: 10px 12px;
  border-radius: var(--tt-r-lg);
  border: 1px solid var(--tt-w-14);
  background: var(--tt-w-06);
  color: var(--tt-w-65);
  font-size: 11px; font-weight: 600;
  font-family: var(--tt-font-mono);
  cursor: pointer;
  transition: all var(--tt-t-fast);
}
.nav-btn:hover {
  background: var(--tt-a-08);
  color: var(--tt-w-70);
  border-color: var(--tt-a-20);
}
.nav-btn:active { transform: scale(0.97); }
.nav-btn.flex { flex: 1; }

/* Guide / Calendar / Premieres toggle */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--tt-r-xs);
  background: var(--tt-w-04);
  border: 1px solid var(--tt-w-12);
  border-radius: var(--tt-r-xl);
  padding: 4px;
}
.mode-btn {
  padding: 11px 8px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--tt-w-45);
  font-size: 11px; font-weight: 700;
  font-family: var(--tt-font-mono);
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: all var(--tt-t-fast);
}
.mode-btn:active { transform: scale(0.97); }
.mode-btn.active {
  background: var(--tt-a-15);
  color: var(--tt-accent);
  border: 1px solid var(--tt-a-25);
}
.mode-btn.full-width { grid-column: unset; }

/* Network filter select */
.network-filter-wrap { margin-bottom: 12px; position: relative; }

.network-select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  background: var(--tt-w-05);
  border: 1px solid var(--tt-w-10);
  border-radius: 11px;
  color: var(--tt-w-60);
  font-size: 12px; font-weight: 600;
  font-family: var(--tt-font-mono);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.38)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: all var(--tt-t-fast);
}
.network-select option { background: var(--tt-bg-raised); }
.network-select:focus { border-color: var(--tt-a-35); color: var(--tt-w-80); }
.network-select.active {
  border-color: var(--tt-a-45);
  background-color: var(--tt-a-07);
  color: var(--tt-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(210,140,60,0.7)' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
}


/* ==========================================================================
   08  DATE RIBBON, WEEK PILLS, CALENDAR
   .date-btn and .week-pill are the same component at two widths.
   ========================================================================== */

.date-ribbon {
  display: flex; gap: var(--tt-r-sm);
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 14px;
  scroll-behavior: smooth;

  /* Pin below the brand header once you scroll. --brand-h is the brand bar's
     live height (set from JS); the fallback covers first paint. */
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--brand-h, 60px));
  z-index: 20;
  background: var(--tt-bg);
  padding-top: 8px;
  padding-left: var(--tt-gutter);
  padding-right: var(--tt-gutter);
  margin-left: calc(var(--tt-gutter) * -1);
  margin-right: calc(var(--tt-gutter) * -1);
  border-bottom: 1px solid var(--tt-w-06);
}

.date-btn,
.week-pill {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 12px;
  border-radius: var(--tt-r-2xl);
  border: 1px solid var(--tt-w-12);
  background: var(--tt-w-05);
  position: relative;
  cursor: pointer;
  transition: all var(--tt-t-base);
}
.date-btn  { min-width: 58px; }
.week-pill { min-width: 80px; }

.date-btn:active,
.week-pill:active { transform: scale(0.96); }

.date-btn.today,
.week-pill.current {
  background: var(--tt-a-08);
  border-color: var(--tt-a-25);
}
.date-btn.selected,
.week-pill.selected {
  border-color: var(--tt-a-50);
  background: var(--tt-a-08);
}

.date-btn .day-label,
.week-pill .pill-label {
  font-size: 10px; font-weight: 700;
  color: var(--tt-w-50);
  text-transform: uppercase; letter-spacing: 1px;
  font-family: var(--tt-font-mono);
}
.date-btn.today .day-label,
.week-pill.current .pill-label { color: var(--tt-accent); }

.date-btn.selected .day-label,
.week-pill.selected .pill-label { color: var(--tt-w-70); }

.date-btn .day-num,
.week-pill .pill-num {
  font-size: 20px; font-weight: 700;
  color: var(--tt-w-70);
  font-family: var(--tt-font-sans);
}
.date-btn.selected .day-num,
.week-pill.selected .pill-num { color: var(--tt-text); }

.date-btn .day-month,
.week-pill .pill-month {
  font-size: 9px;
  color: var(--tt-w-45);
  font-family: var(--tt-font-mono);
  text-transform: uppercase;
}

.date-btn .count,
.week-pill .pill-count {
  font-size: 9px; font-weight: 700;
  color: var(--tt-accent);
  font-family: var(--tt-font-mono);
}

.date-btn .loading-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--tt-accent);
  animation: pulse 1s infinite;
  position: absolute; top: 6px; right: 6px;
}

/* Sticky date section headings */
.date-section { margin-bottom: 36px; }
.date-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
  position: sticky;
  /* Sit flush under the pinned brand bar + ribbon. The -1px overlap closes
     the transparent hairline seam between the stacked bars. */
  top: calc(env(safe-area-inset-top, 0px) + var(--brand-h, 60px) + var(--ribbon-h, 84px) - 1px);
  z-index: 10;
  background: var(--tt-bg);
  padding: 8px var(--tt-gutter);
  margin-left: calc(var(--tt-gutter) * -1);
  margin-right: calc(var(--tt-gutter) * -1);
}
.date-header h2 {
  font-size: 15px; font-weight: 700;
  font-family: var(--tt-font-sans);
  color: var(--tt-w-90);
  white-space: nowrap;
}
.date-header h2.today { color: var(--tt-accent); }
.date-header .line { flex: 1; height: 1px; background: var(--tt-a-25); }
.date-header .count {
  font-size: 11px;
  color: var(--tt-w-38);
  font-family: var(--tt-font-mono);
  white-space: nowrap;
}

/* Planner calendar */
.calendar-wrap {
  margin: 0 auto 14px;
  max-width: 240px;
}
.calendar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.calendar-month-label {
  font-size: 13px; font-weight: 700;
  color: var(--tt-w-70);
  font-family: var(--tt-font-sans);
}
.calendar-nav { display: flex; gap: var(--tt-r-sm); }
.calendar-nav button {
  width: 28px; height: 28px;
  border-radius: var(--tt-r-md);
  background: var(--tt-w-04);
  border: 1px solid var(--tt-w-08);
  color: var(--tt-w-40);
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--tt-t-fast);
}
.calendar-nav button:active { transform: scale(0.94); }
.calendar-nav button:disabled { opacity: 0.2; cursor: default; pointer-events: none; }

.calendar-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.calendar-weekdays span {
  text-align: center;
  font-size: 9px; font-weight: 700;
  color: var(--tt-w-35);
  font-family: var(--tt-font-mono);
  text-transform: uppercase;
  padding: 4px 0;
}
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendar-day {
  aspect-ratio: 1;
  border-radius: var(--tt-r-md);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  border: 1px solid transparent;
  position: relative;
  cursor: pointer;
  transition: all var(--tt-t-fast);
}
.calendar-day:active { transform: scale(0.93); }
.calendar-day.empty { cursor: default; }
.calendar-day.today    { border-color: var(--tt-a-30); background: var(--tt-a-06); }
.calendar-day.selected { border-color: var(--tt-a-60); background: var(--tt-a-12); }
.calendar-day.past:not(.selected):not(.today) { opacity: 0.45; }
.calendar-day .pday-num {
  font-size: 13px; font-weight: 600;
  color: var(--tt-w-60);
  font-family: var(--tt-font-sans);
  line-height: 1;
}
.calendar-day.today .pday-num    { color: var(--tt-accent); }
.calendar-day.selected .pday-num { color: var(--tt-text); }
.calendar-day .pday-dots {
  display: flex; gap: 2px;
  align-items: center; justify-content: center;
  min-height: 5px;
}
.calendar-day .pdot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; }


/* ==========================================================================
   09  SHOW CARDS
   ========================================================================== */

.show-list { display: grid; grid-template-columns: 1fr; gap: var(--tt-r-sm); }

.show-row {
  border-radius: var(--tt-r-xl);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--tt-w-08);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: all var(--tt-t-base);
}
.show-row:hover { border-color: var(--tt-w-16); }
.show-row .glow {
  position: absolute; top: 0; right: 0;
  width: 120px; height: 60px;
  pointer-events: none;
}

.show-row .summary {
  display: flex; align-items: center; gap: var(--tt-r-lg);
  padding: 13px 14px;
  position: relative;
  z-index: 1;
}
.show-row .summary img {
  width: 36px; height: 36px;
  object-fit: cover;
  border-radius: var(--tt-r-md);
  flex-shrink: 0;
  opacity: 0.9;
  transition: width var(--tt-t-slow), height var(--tt-t-slow), border-radius var(--tt-t-slow);
}
.show-row.expanded .summary img { width: 80px; height: 120px; border-radius: var(--tt-r-lg); }
.show-row .summary .img-placeholder {
  width: 36px; height: 36px;
  border-radius: var(--tt-r-md);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.show-row .summary .title {
  font-size: 16px; font-weight: 700;
  color: var(--tt-text);
  font-family: var(--tt-font-sans);
}
.show-row .summary .genre-pip {
  font-size: 9px; font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--tt-r-lg);
  text-transform: uppercase; letter-spacing: 0.6px;
  font-family: var(--tt-font-sans);
  flex-shrink: 0;
}
.show-row .summary .network-sm {
  font-size: 11px; font-weight: 700;
  font-family: var(--tt-font-mono);
  flex-shrink: 0;
}
.show-row .summary .premiere-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2s infinite;
}
.show-row .summary .chevron {
  font-size: 14px;
  color: var(--tt-w-35);
  flex-shrink: 0;
  transition: transform var(--tt-t-base), color var(--tt-t-base);
}
.show-row.expanded .summary .chevron { transform: rotate(180deg); color: var(--tt-a-70); }

.show-row .details {
  max-height: 0;
  overflow: hidden;
  padding: 0 14px;
  transition: max-height var(--tt-t-slow), padding var(--tt-t-slow);
}
.show-row.expanded .details { max-height: 1200px; padding: 0 14px 14px; }
.show-row .details-inner { display: flex; gap: 14px; }
.show-row .details-inner img {
  width: 56px; height: 80px;
  object-fit: cover;
  border-radius: var(--tt-r-lg);
  flex-shrink: 0;
  opacity: 0.9;
}
.show-row .details-inner .detail-info { flex: 1; min-width: 0; }

.show-row .meta {
  display: flex; align-items: center; gap: var(--tt-r-lg);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.show-row .network { font-size: 13px; font-weight: 600; font-family: var(--tt-font-mono); }
.show-row .time    { font-size: 12px; color: var(--tt-w-45); font-family: var(--tt-font-mono); }
.show-row .season-badge {
  font-size: 11px;
  color: var(--tt-w-45);
  font-family: var(--tt-font-mono);
  background: var(--tt-w-05);
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.show-row .type-label { font-size: 10px; color: var(--tt-w-38); font-family: var(--tt-font-mono); }
.show-row .ep-name {
  margin: 0 0 4px;
  color: var(--tt-w-55);
  font-size: 13px; font-style: italic;
  font-family: var(--tt-font-sans);
}
.show-row .desc {
  margin: 0 0 8px;
  color: var(--tt-w-40);
  font-size: 13px; line-height: 1.5;
  font-family: var(--tt-font-sans);
}
/* Lazy-loaded poster. The starting state used to live as an inline style in
   the JS template string; with this rule you can drop
   `style="opacity:0;transition:opacity 0.3s ease"` from that string.
   initLazyImages() still sets `img.style.opacity = "1"` on load, which is why
   a lazy poster settles at opacity 1 rather than the 0.9 above. */
.lazy-img { opacity: 0; transition: opacity 0.3s ease; }

.show-row .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.show-row .genre-tag {
  font-size: 9px; font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--tt-r-sm);
  font-family: var(--tt-font-sans);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.show-row .rating-tag {
  font-size: 9px; font-weight: 600;
  color: var(--tt-w-40);
  background: var(--tt-w-05);
  padding: 3px 10px;
  border-radius: var(--tt-r-sm);
  font-family: var(--tt-font-mono);
}
.show-row .premiere-badge {
  color: #fff;
  font-size: 8px; font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--tt-r-pill);
  text-transform: uppercase; letter-spacing: 1px;
  font-family: var(--tt-font-sans);
}

.filter-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--tt-r-xs);
  background: rgba(var(--tt-alert-rgb),0.15);
  color: var(--tt-alert);
  border: 1px solid rgba(var(--tt-alert-rgb),0.35);
  font-family: var(--tt-font-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.show-row.is-filtered {
  opacity: 0.55;
  outline: 1px dashed rgba(var(--tt-alert-rgb),0.35);
}

/* Collapsible sub-sections inside a card */
.summary-section { margin-bottom: 8px; }
.summary-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--tt-r-md);
  border: 1px solid var(--tt-w-07);
  background: var(--tt-w-03);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--tt-t-fast), border-color var(--tt-t-fast);
}
.summary-toggle:active { background: var(--tt-w-06); }
.summary-toggle .toggle-icon {
  width: 16px; height: 16px;
  border-radius: var(--tt-r-xs);
  background: var(--tt-w-06);
  border: 1px solid var(--tt-w-08);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  color: var(--tt-w-40);
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: all var(--tt-t-fast);
}
.summary-toggle .toggle-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  font-family: var(--tt-font-mono);
  color: var(--tt-w-60);
  flex: 1;
  transition: color var(--tt-t-fast);
}
.summary-section.open .toggle-icon {
  background: var(--tt-a-12);
  color: var(--tt-a-80);
  border-color: var(--tt-a-20);
  transform: rotate(0deg);
}
.summary-section.open .toggle-label  { color: var(--tt-a-70); }
.summary-section.open .summary-toggle {
  border-color: var(--tt-a-15);
  background: var(--tt-a-04);
}
.summary-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.summary-section.open .summary-body { max-height: 600px; opacity: 1; }

/* Talk-show grouping */
.talkshow-group { margin-top: 8px; }
.talkshow-toggle {
  display: flex; align-items: center; gap: var(--tt-r-lg);
  padding: 10px 14px;
  border-radius: var(--tt-r-xl);
  border: 1px solid var(--tt-w-12);
  background: var(--tt-w-05);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: all var(--tt-t-fast);
}
.talkshow-toggle:active { transform: scale(0.98); }
.talkshow-toggle:hover  { border-color: var(--tt-w-10); }
.talkshow-toggle-label {
  font-size: 12px; font-weight: 600;
  color: var(--tt-w-65);
  font-family: var(--tt-font-mono);
  letter-spacing: 0.5px;
  flex: 1;
}
.talkshow-toggle-count {
  font-size: 10px;
  color: var(--tt-w-40);
  font-family: var(--tt-font-mono);
}
.talkshow-toggle-chevron {
  font-size: 11px;
  color: var(--tt-w-45);
  transition: transform var(--tt-t-base);
}
.talkshow-group.open .talkshow-toggle-chevron { transform: rotate(180deg); color: var(--tt-a-70); }
.talkshow-group.open .talkshow-toggle {
  border-color: var(--tt-a-25);
  background: var(--tt-a-06);
}
.talkshow-group.open .talkshow-toggle-label { color: var(--tt-cream-85); }
.talkshow-group.open .talkshow-toggle-count { color: var(--tt-a-70); }
.talkshow-list { display: none; margin-top: 4px; }
.talkshow-group.open .talkshow-list { display: grid; gap: var(--tt-r-sm); margin-top: 8px; }

/* Extra-episodes collapsible */
.eps-open .eps-list    { display: flex !important; max-height: 800px !important; }
.eps-open .eps-chevron { transform: rotate(180deg) !important; }


/* ==========================================================================
   10  LOADING STATES
   ========================================================================== */

.loading-state { text-align: center; padding: 80px 20px; }
.loading-dots {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 24px;
}
.loading-dots span {
  font-size: 22px;
  display: inline-block;
  animation: roll 1s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

.loading-text {
  color: var(--tt-w-40);
  font-size: 13px;
  font-family: var(--tt-font-mono);
}

.mini-loading { display: flex; gap: 8px; justify-content: center; padding: 40px 0; }
.mini-loading span {
  font-size: 14px;
  display: inline-block;
  animation: roll 1s ease-in-out infinite;
}
.mini-loading span:nth-child(2) { animation-delay: 0.15s; }
.mini-loading span:nth-child(3) { animation-delay: 0.3s; }


/* ==========================================================================
   11  TOAST, FIXED NAV, SCROLL-TO-TOP
   ========================================================================== */

.toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--tt-bg-overlay);
  border: 1px solid var(--tt-a-25);
  color: var(--tt-w-75);
  font-size: 11px;
  font-family: var(--tt-font-mono);
  padding: 9px 16px;
  border-radius: var(--tt-r-pill);
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity var(--tt-t-base), transform var(--tt-t-base);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.week-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; gap: 8px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--tt-bg-nav);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--tt-a-08);
}

.scroll-top-btn {
  position: fixed; top: 50%; right: 16px;
  margin-top: -21px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--tt-bg-fab);
  border: 1px solid var(--tt-a-35);
  color: var(--tt-cream-90);
  font-size: 20px; line-height: 1;
  font-family: var(--tt-font-mono);
  padding: 0;
  cursor: pointer;
  z-index: 9998;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 24px var(--tt-a-08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.22s ease, transform 0.22s ease,
              background var(--tt-t-fast), border-color var(--tt-t-fast);
}
.scroll-top-btn.visible { opacity: 1; pointer-events: auto; transform: translateX(0); }
.scroll-top-btn:hover,
.scroll-top-btn:focus-visible {
  background: var(--tt-bg-fab-hover);
  border-color: var(--tt-a-60);
  color: var(--tt-accent-cream);
}
.scroll-top-btn:active { transform: translateX(0) scale(0.94); }


/* ==========================================================================
   12  CONTENT-PAGE PROSE COMPONENTS
   Used by about / terms / privacy / disclosure and by blog post bodies.
   .prose is the shared body style; .policy-body and .about-body are aliases
   kept so existing markup keeps working — prefer .prose in new pages.
   ========================================================================== */

.page-title {
  font-family: var(--tt-font-display);
  font-size: 32px; font-weight: 700;
  color: var(--tt-text);
  margin-bottom: 8px;
}
.page-title.is-solo { margin-bottom: 48px; }   /* title with no date/subtitle under it */

.page-date,
.page-subtitle {
  font-size: 11px;
  font-family: var(--tt-font-mono);
  color: var(--tt-w-30);
  letter-spacing: 0.5px;
  margin-bottom: 48px;
}

/* "The short version" callout */
.summary-box {
  background: var(--tt-a-05);
  border: 1px solid var(--tt-a-15);
  border-radius: var(--tt-r-xl);
  padding: 20px 24px;
  margin-bottom: 48px;
}
.summary-box p {
  font-size: 13px; line-height: 1.7;
  color: var(--tt-w-50);
  margin: 0;
}
.summary-box p + p { margin-top: 10px; }
.summary-box strong { color: var(--tt-w-75); font-weight: 600; }
.summary-box a { color: var(--tt-a-80); text-decoration: none; transition: color var(--tt-t-fast); }
.summary-box a:hover { color: var(--tt-accent); }

/* Table of contents */
.toc {
  background: var(--tt-w-02);
  border: 1px solid var(--tt-w-06);
  border-radius: var(--tt-r-xl);
  padding: 20px 24px;
  margin-bottom: 48px;
}
.toc-title {
  font-size: 10px;
  font-family: var(--tt-font-mono);
  color: var(--tt-w-25);
  text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 14px;
}
.toc ol { padding-left: 18px; }
.toc ol li { margin-bottom: 6px; }
.toc ol li a {
  font-size: 13px;
  color: var(--tt-a-60);
  font-family: var(--tt-font-mono);
  text-decoration: none;
  transition: color var(--tt-t-fast);
}
.toc ol li a:hover { color: var(--tt-accent); }

/* Prose body */
.prose h2,
.policy-body h2,
.about-body h2 {
  font-size: 13px; font-weight: 700;
  color: var(--tt-accent);
  text-transform: uppercase; letter-spacing: 2px;
  font-family: var(--tt-font-mono);
  margin: 40px 0 14px;
  padding-top: 40px;
  border-top: 1px solid var(--tt-w-05);
  scroll-margin-top: 24px;
}
.prose h2:first-child,
.policy-body h2:first-child,
.about-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.prose h3,
.policy-body h3,
.about-body h3 {
  font-size: 15px; font-weight: 700;
  color: var(--tt-w-80);
  margin: 28px 0 10px;
}

.prose p,
.policy-body p,
.about-body p {
  font-size: 14px; line-height: 1.75;
  color: var(--tt-w-50);
  margin-bottom: 14px;
}

.prose ul,
.policy-body ul,
.about-body ul { margin: 0 0 14px; padding-left: 20px; }

.prose ul li,
.policy-body ul li,
.about-body ul li {
  font-size: 14px; line-height: 1.75;
  color: var(--tt-w-50);
  margin-bottom: 6px;
}
.prose ul li strong,
.policy-body ul li strong,
.about-body ul li strong { color: var(--tt-w-75); font-weight: 600; }

.prose a,
.policy-body a,
.about-body a {
  color: var(--tt-a-80);
  text-decoration: none;
  transition: color var(--tt-t-fast);
}
.prose a:hover,
.policy-body a:hover,
.about-body a:hover { color: var(--tt-accent); }

/* "What TaterTV is not" — crossed list */
.not-list { margin: 0 0 14px; padding: 0; list-style: none; }
.not-list li {
  font-size: 14px; line-height: 1.75;
  color: var(--tt-w-50);
  margin-bottom: 10px;
  padding-left: 24px;
  position: relative;
}
.not-list li::before {
  content: '\2715';
  position: absolute; left: 0; top: 3px;
  font-size: 11px;
  color: var(--tt-a-40);
  font-family: var(--tt-font-mono);
}
.not-list li strong { color: var(--tt-w-70); font-weight: 600; }

/* Feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.feature-card {
  background: var(--tt-w-02);
  border: 1px solid var(--tt-w-06);
  border-radius: var(--tt-r-lg);
  padding: 16px 18px;
}
.feature-card-label {
  font-size: 10px;
  font-family: var(--tt-font-mono);
  color: var(--tt-accent);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.feature-card-desc {
  font-size: 13px; line-height: 1.6;
  color: var(--tt-w-45);
  margin: 0;
}


/* ==========================================================================
   13  BLOG RAILS
   Three horizontal carousels above the footer, one per category.
   Markup is injected by /blog-rails.js — see the skeleton in that file.

   The card borrows the blog's .post-card treatment (same border, same hover,
   same 10px thumb radius) but stacks vertically so it reads in a scroller.
   The track reuses the .date-ribbon scroll pattern already on the homepage.
   ========================================================================== */

.rails {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* Must NOT be display:none while empty — an element with no layout box never
   fires IntersectionObserver, so the lazy load could never trigger. Collapse it
   to a 1px sliver instead: invisible, but still observable. JS adds .is-hidden
   once it knows there's nothing to show. */
.rails:empty { margin-top: 0; min-height: 1px; }
.rails.is-hidden { display: none; }

/* --- Rails inside the footer (index.html only) ---------------------------
   On the guide the rails sit below the whole graphic cluster — Play badge,
   socials, nav pills — rather than above the footer. That cluster is the only
   non-text block on the page, so keeping it intact and putting it first gives
   the eye somewhere to land instead of the schedule ending straight into
   headlines. The footer centres its children; the rails opt back out. */
.footer .rails {
  text-align: left;
  margin-top: 10px;
  margin-bottom: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--tt-w-06);
}
.footer .rails:empty {
  margin: 0;
  padding: 0;
  border-top: none;
}
/* Quieter headings down here — this is footer furniture, not page content. */
.footer .rail-title { color: var(--tt-a-70); }
.footer .rail-card-title { color: var(--tt-w-80); }

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rail-title {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--tt-font-mono);
  color: var(--tt-accent);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.rail-all {
  flex-shrink: 0;          /* long category names must not squash the link */
  font-size: 10px;
  font-family: var(--tt-font-mono);
  color: var(--tt-w-35);
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--tt-t-fast);
}
.rail-all:hover { color: var(--tt-accent); }

/* --- Track ---------------------------------------------------------------
   Bleeds to the container edge so cards scroll off-screen rather than
   stopping short of it. The padding restores the gutter for the first card. */
.rail-track {
  display: flex;
  gap: var(--tt-r-lg);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--tt-gutter);
  padding: 2px var(--tt-gutter) 12px;
  margin: -2px calc(var(--tt-gutter) * -1) 0;
  scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }

/* --- Card -----------------------------------------------------------------
   Text-first: posts carry no hero images, so the card leads with the title and
   uses the description as the supporting line. An image renders as a 16:9 strip
   if one ever appears in the feed, but nothing is reserved for it. */
.rail-card {
  flex: 0 0 auto;
  width: 244px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: var(--tt-r-xl);
  border: 1px solid var(--tt-w-08);
  background: var(--tt-w-05);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--tt-t-base), background var(--tt-t-base),
              transform 0.18s ease;
}
.rail-card:hover {
  border-color: var(--tt-w-16);
  background: var(--tt-w-06);
  transform: translateY(-2px);
}
.rail-card:active { transform: translateY(0) scale(0.985); }

.rail-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  opacity: 0.9;
  background: var(--tt-w-04);
  border-bottom: 1px solid var(--tt-w-06);
}

.rail-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.rail-card-title {
  font-family: var(--tt-font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tt-text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-card-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--tt-w-45);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-card-date {
  display: block;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--tt-font-mono);
  color: var(--tt-w-35);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: auto;
  padding-top: 4px;
}
/* Revised posts read slightly warmer, so a refreshed guide is legible as
   refreshed without shouting. */
.rail-card-date.is-updated { color: var(--tt-a-55); }

/* --- Loading skeleton ---------------------------------------------------- */
.rail-card.is-skeleton {
  pointer-events: none;
  border-color: var(--tt-w-06);
}
.rail-card.is-skeleton .rail-card-title,
.rail-card.is-skeleton .rail-card-desc,
.rail-card.is-skeleton .rail-card-date {
  color: transparent;
  background: var(--tt-w-05);
  border-radius: var(--tt-r-xs);
  animation: pulse 1.6s ease-in-out infinite;
}
.rail-card.is-skeleton .rail-card-title { height: 38px; }
.rail-card.is-skeleton .rail-card-desc  { height: 34px; }
.rail-card.is-skeleton .rail-card-date  { height: 9px; width: 58%; }

@media (max-width: 480px) {
  .rails { margin-top: 44px; gap: 26px; }

  /* One card plus a 0.2 sliver of the next — the peek is the scroll
     affordance, so it's sized rather than left to chance.

       visible width  = 100vw - 16px left gutter
       1.2 x card + gap = visible
       card            = (100vw - 16px - 10px) / 1.2

     On a 375px screen that's a 291px card with 58px of the next showing. */
  .rail-card {
    width: calc(83.333vw - 22px);
  }

  /* Near-full-width cards want a firm detent; proximity feels sloppy here. */
  .rail-track {
    scroll-snap-type: x mandatory;
    padding-left: var(--tt-gutter-sm);
    padding-right: var(--tt-gutter-sm);
    margin-left: calc(var(--tt-gutter-sm) * -1);
    margin-right: calc(var(--tt-gutter-sm) * -1);
  }

  /* Cards are taller at this width — trim the description so three stacked
     rails don't run to a screen and a half. */
  .rail-card-desc { -webkit-line-clamp: 2; }
}


/* ==========================================================================
   14  FOOTER
   Styles live here. The MARKUP master copy is in index.html and is mirrored by
   hand in /blog/src/components/Footer.astro — change both together.
   ========================================================================== */

.footer {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--tt-w-06);
  text-align: center;
}
.footer p {
  font-size: 11px;
  font-family: var(--tt-font-mono);
  color: var(--tt-w-40);
  margin: 0;
}
.footer a {
  color: var(--tt-a-70);
  text-decoration: none;
  font-size: 11px;
  font-family: var(--tt-font-mono);
  transition: color var(--tt-t-fast);
}
.footer a:hover { color: var(--tt-accent); }

/* Google Play badge */
.footer-google-play {
  display: inline-block;
  line-height: 0;
  margin-bottom: 18px;
  transition: transform 0.18s ease, filter var(--tt-t-fast);
}
.footer-google-play img {
  height: 44px; width: auto;
  display: block;
  clip-path: inset(4% 2% 4% 2% round 5px);  /* hides the badge's gray border */
}
.footer-google-play:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 12px var(--tt-a-18));
}
.footer-google-play:active { transform: translateY(0) scale(0.97); }

/* Social icons */
.footer-social {
  display: flex; justify-content: center; align-items: center;
  gap: var(--tt-r-lg);
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--tt-w-10);
  background: var(--tt-w-03);
  color: var(--tt-cream-65);
  transition: border-color var(--tt-t-fast), background var(--tt-t-fast),
              color var(--tt-t-fast), transform 0.18s ease;
}
.footer-social a:hover {
  border-color: var(--tt-a-45);
  background: var(--tt-a-08);
  color: var(--tt-accent-cream);
  transform: translateY(-1px);
}
.footer-social a:active { transform: translateY(0) scale(0.94); }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }

/* Nav rows */
.footer-nav {
  display: flex; flex-wrap: wrap; gap: var(--tt-r-sm);
  justify-content: center;
}
.footer-nav a {
  padding: 5px 12px;
  border-radius: var(--tt-r-pill);
  border: 1px solid var(--tt-w-10);
  background: var(--tt-w-04);
  color: var(--tt-w-50);
  transition: all var(--tt-t-fast);
}
.footer-nav a:hover {
  border-color: var(--tt-a-30);
  background: var(--tt-a-06);
  color: var(--tt-cream-85);
}

.footer-nav-primary { margin-bottom: 18px; }
.footer-nav-primary a {
  padding: 6px 14px;
  color: var(--tt-w-70);
  border-color: var(--tt-w-14);
}

.footer-disclaimer {
  margin-bottom: 18px !important;
  color: var(--tt-w-45) !important;
  line-height: 1.6;
}

.footer-nav-legal { margin-bottom: 16px; }
.footer-nav-legal a {
  padding: 4px 11px;
  font-size: 10px !important;
  color: var(--tt-w-35);
  border-color: var(--tt-w-08);
  background: transparent;
}

.footer-attribution {
  margin-bottom: 22px !important;
  color: var(--tt-w-45) !important;
}
.footer-attribution a {
  color: var(--tt-a-55);
  border-bottom: 1px solid var(--tt-a-20);
  transition: color var(--tt-t-fast), border-color var(--tt-t-fast);
}
.footer-attribution a:hover {
  color: var(--tt-accent);
  border-bottom-color: var(--tt-accent);
}

.footer-back-top-row { margin-top: 0 !important; }
.footer-back-top {
  display: inline-block;
  padding: 7px 16px;
  border-radius: var(--tt-r-pill);
  border: 1px solid var(--tt-a-30);
  background: var(--tt-a-06);
  color: var(--tt-cream-80) !important;
  font-size: 11px;
  font-family: var(--tt-font-mono);
  text-decoration: none !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all var(--tt-t-fast);
}
.footer-back-top:hover {
  border-color: var(--tt-a-50);
  background: var(--tt-a-12);
  color: var(--tt-accent-cream) !important;
}
.footer-back-top:active { transform: scale(0.97); }


/* ==========================================================================
   15  RESPONSIVE
   ========================================================================== */

@media (max-width: 480px) {
  .container {
    padding-left: var(--tt-gutter-sm);
    padding-right: var(--tt-gutter-sm);
  }
  .container.is-content { padding-bottom: 60px; }

  .brand-name    { font-size: 28px; }
  .brand-logo-img { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
  .brand-tagline { font-size: 9px; letter-spacing: 2px; }

  .brand-header,
  .date-header,
  .date-ribbon {
    padding-left: var(--tt-gutter-sm);
    padding-right: var(--tt-gutter-sm);
    margin-left: calc(var(--tt-gutter-sm) * -1);
    margin-right: calc(var(--tt-gutter-sm) * -1);
  }

  .page-title  { font-size: 26px; }
  .feature-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   16  ACCESSIBILITY
   ========================================================================== */

:where(a, button, select, [tabindex]):focus-visible {
  outline: 2px solid var(--tt-a-60);
  outline-offset: 2px;
  border-radius: var(--tt-r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}