/* ==========================================================================
   v20-gold-mobile.css — ABSOLUTE LAST stylesheet.
   1) Gold accent palette (replaces every purple accent).
   2) Slow, readable announcement / birthday tickers.
   3) Full mobile responsiveness pass for the whole site.
   ========================================================================== */

:root{
  --gold-1:#d4af37;
  --gold-2:#f5c518;
  --gold-3:#a8801f;
  --gold-soft-1:rgba(212,175,55,.16);
  --accent-purple:#d4af37; /* legacy alias */
}

/* ---------- 1. Gold accents ------------------------------------------- */
.tt-slot.tt-assembly{ border-left-color:var(--gold-1) !important; }
.ai-speak{ background:linear-gradient(135deg,#6b4e0a,#c79a26) !important; }
.ai-open, .ai-answer h3{ color:#8a6a12 !important; }

/* ---------- 2. Slow tickers (re-enabled, gently) ----------------------- */
.bday-bar .track,
.ann-bar .track,
.ann-ticker .track{
  white-space:nowrap !important;
  animation-duration:110s !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
  animation-play-state:running !important;
}
.bday-bar .track{ animation-name:bdayScroll !important; }
.ann-bar .track, .ann-ticker .track{ animation-name:annScroll !important; }
.bday-bar:hover .track, .ann-bar:hover .track{ animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce){
  .bday-bar .track, .ann-bar .track, .ann-ticker .track{ animation:none !important; }
}

/* ---------- 3. Mobile responsiveness pass ------------------------------ */
html, body{ max-width:100%; overflow-x:hidden; }
img, video, canvas, svg, iframe{ max-width:100%; height:auto; }
table{ max-width:100%; }

@media (max-width:1024px){
  .app{ display:block !important; grid-template-columns:1fr !important; }
  .sidebar{ width:100% !important; position:static !important; }
}

@media (max-width:820px){
  .container, .wrap, .page, main{ padding-left:12px !important; padding-right:12px !important; }
  .grid, .cards, .stats, .stat-grid, .card-grid, .dash-grid,
  [class*="cols-"], [style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
  .row, .flex-row, .toolbar, .actions, .filters, .form-row{
    flex-wrap:wrap !important;
  }
  .table-wrap, .table-responsive, .card > table, .content table{
    display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  h1{ font-size:1.5rem !important; }
  h2{ font-size:1.25rem !important; }
  h3{ font-size:1.08rem !important; }
  .btn, button, input, select, textarea{ font-size:16px; } /* stops iOS zoom */
  .btn, button{ min-height:44px; }
  .ai-fab{ width:52px !important; height:52px !important; right:12px !important; }
  .modal, .ann-pop, .dialog{ width:calc(100vw - 24px) !important; max-width:none !important; }
}

@media (max-width:560px){
  .topbar, .v8-header, .site-header{ flex-wrap:wrap !important; gap:8px !important; }
  .hide-sm{ display:none !important; }
  .card, .glass-card, .panel{ padding:12px !important; border-radius:14px !important; }
  .ann-bar .item{ font-size:.82rem !important; }
  .bday-bar .item{ font-size:.82rem !important; }
  td, th{ white-space:nowrap; }
}