/* ============================================================
   home.css: small extras on the main page (script.js "home page
   extras"): new tags, news "see all", the status line under the
   description, the mission signature, "watch" on video of the week.
   loads after styles.css, before mobile.css.
   ============================================================ */

:root{
  --home-dim:#8a9ca5;
  --home-line:#c3ced4;
  --home-new-bg:var(--accent);
}

[data-theme="dark"]{
  --home-dim:#6c7880;
  --home-line:#2f363b;
}

/* "new" tag: news items + quick click cards */
.home-new,
.news-item .home-new{
  display:inline-block;
  margin-left:5px;
  padding:0 4px;
  border-radius:6px;
  background:var(--home-new-bg);
  color:#fff;
  font-family:var(--font-pixel);
  font-weight:normal;
  font-size:11px;
  line-height:12px;
  letter-spacing:1px;
  text-decoration:none;
  vertical-align:1px;
}

.news-item span.home-new,
[data-theme="dark"] .news-item span.home-new{ display:inline-block; color:#fff; }

.module-tile .home-new-tile{
  position:absolute;
  top:4px;
  right:4px;
  z-index:2;
  margin:0;
  box-shadow:0 1px 3px rgba(40,50,90,.3);
}

/* tiny "see all" at the end of the news list */
.news-see-all{
  display:block;
  margin:2px 0 0 auto;
  padding:0;
  border:0;
  background:none;
  font-family:var(--font-pixel);
  font-size:12px;
  letter-spacing:1px;
  color:var(--accent);
  cursor:pointer;
}

.news-see-all:hover,
.news-see-all:focus-visible{ text-decoration:underline; outline:none; }

/* status line along the bottom of the description */
.p-desc:has(.home-status) .info-body{ padding-bottom:36px; }

.home-status{
  position:absolute;
  left:16px;
  right:16px;
  bottom:9px;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:2px 11px;
  padding-top:6px;
  border-top:1px dashed var(--home-line);
  font-family:var(--font-pixel);
  font-size:12px;
  letter-spacing:.5px;
  line-height:1.1;
  color:var(--home-dim);
}

.home-status span{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }

.home-status span::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  opacity:.6;
}

.home-status .home-stream.is-live{ color:#e5484d; }
.home-status .home-stream.is-live::before{ opacity:1; box-shadow:0 0 5px rgba(229,72,77,.9); animation:liveLedPulse 1.6s ease-in-out infinite; }
[data-theme="dark"] .home-status .home-stream.is-live{ color:#ff8a8e; }

.home-visits b{ font-weight:normal; color:var(--accent); font-variant-numeric:tabular-nums; }

/* mission sign-off */
.home-sig{
  display:inline-block;
  margin-left:10px;
  font-family:var(--font-pixel);
  font-size:13px;
  letter-spacing:1px;
  line-height:1;
  color:var(--accent);
  opacity:.65;
  white-space:nowrap;
}

/* video of the week: says it plays */
.module-watch{
  margin-top:3px;
  font-family:var(--font-pixel);
  font-size:12px;
  letter-spacing:1px;
  color:var(--accent);
}

@media(max-width:860px){
  .home-status{ position:static; margin:0 16px 12px; }
  .p-desc:has(.home-status) .info-body{ padding-bottom:6px; }
}

@media(prefers-reduced-motion:reduce){
  .home-status .home-stream.is-live::before{ animation:none; }
}

/* ---------- home layout: quick clicks on top, bigger reading text ----------
   same 598px column as before, boxes just swap places:
   quick clicks 21-239 · description 247-477 · mission 485-598 */
.info-panel.home-quick{ top:21px; height:218px; }
.info-panel.home-desc{ top:247px; height:230px; }
.info-panel.home-mission{ top:485px; height:113px; }

.home-desc .info-body{
  font-size:10.5px;
  line-height:1.5;
}

.home-mission .info-body{
  font-size:10.5px;
  line-height:1.5;
}

.home-quick .module-title{ font-size:10px; line-height:1.15; }
.home-quick .module-copy{ font-size:9px; line-height:1.3; }

@media(max-width:860px){
  .home-desc .info-body,
  .home-mission .info-body{ font-size:12px; }
}

/* video card: keep its note to one line so "watch" always fits */
.home-quick #videoOfWeekTile .module-copy{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}