/* ==========================================================================
   dashboard.css -- styles used only by littleton_dashboard.html (Task 11).
   Loaded after css/neon-mesa.css; shared rules live there, not here.
   Phone first: everything stacks in one column under 700 px.
   ========================================================================== */

/* the Dashboard tab is .ext (orange) everywhere; lit here it inverts */
.tab.ext.on{color:#020b14;background:#ff9e3d;box-shadow:0 0 14px #ff9e3d}

/* ---------- clock card ---------- */
.clock-card{text-align:center}
#clock{
  font:900 56px/1.1 'Orbitron',sans-serif;color:#fff;
  text-shadow:0 0 10px var(--accent),0 0 24px var(--accent-glow);
  margin:6px 0;letter-spacing:.04em;
}
#date{font-size:18px;color:var(--muted)}

/* ---------- 24-hour strip: 8 slots side by side ---------- */
.strip{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin:12px 0 4px;
}
.slot{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 2px;background:#1f2630;border:1px solid var(--accent-glow);border-radius:8px;
  text-align:center;
}
.slot .hour{font:700 16px 'Orbitron',sans-serif;letter-spacing:.02em;opacity:.85;white-space:nowrap}
.slot img{width:50px;height:50px}
.slot .temp{font-weight:600;font-size:18px;color:#fff}
.slot .pop{font-size:16px;color:var(--cyan);min-height:1.3em}
.strip-note{font-size:18px;color:var(--muted);margin:4px 0 0}

/* ---------- sun and moon ---------- */
#celestial .sun-v{color:var(--gold)}
#celestial .moon-v{color:var(--cyan)}

/* ---------- the morning paper: plain links, 44 px tap targets ---------- */
.paper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.paper-link{
  display:flex;align-items:center;min-height:44px;padding:8px 12px;
  background:#1f2630;border:1px solid var(--accent-glow);border-radius:8px;
  font-weight:600;color:var(--text);text-decoration:none;
}
.paper-link:hover,.paper-link:focus-visible{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow);text-decoration:none}

/* ---------- environmental feeds ---------- */
.feeds{margin:12px 0}
.feed{padding:10px 0 10px 12px;border-left:3px solid var(--accent-glow);margin:0 0 10px}
.feed:hover{border-left-color:var(--accent)}
.feed-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:2px}
.feed-source{font:700 16px 'Orbitron',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--purple)}
.feed-date{font-size:18px;color:var(--muted)}
.feed-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--text)}
.feed-link:hover,.feed-link:focus-visible{color:var(--accent)}
.feed.warn .feed-link{color:#ff9e3d}

/* ---------- quick links: reuse .btn, keep rows tidy ---------- */
.quick .btn{font-size:16px;text-transform:none;letter-spacing:0}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
.gallery img{
  display:block;width:100%;max-height:520px;object-fit:contain;
  background:#1f2630;border:1px solid var(--accent-glow);border-radius:8px;
}

/* ---------- responsive ---------- */
@media (max-width:700px){
  #clock{font-size:44px}
  .strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .paper{grid-template-columns:1fr}
  .slot img{width:44px;height:44px}
}
@media (max-width:360px){
  .slot .hour{font-size:16px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce){.feed,.paper-link,.slot{transition:none!important;animation:none!important}}