/* ============================================================
   NORTHERN LIGHTS - fan club monthly Q&A
   Loaded after boards.css; shares its shell (.bd), rows, tags,
   composer and sheet.
   ============================================================ */

.tag--live{color:#fff;background:var(--red);border-color:var(--red)}
.tag--live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:qaPulse 1.4s ease-in-out infinite}
@keyframes qaPulse{0%,100%{opacity:1}50%{opacity:.25}}
.bd__sec--tight{margin-top:26px}
.trow--plain{grid-template-columns:1fr auto}
.trow__n svg{width:13px;height:13px}

/* ---------- the next session ---------- */
.qahero{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px 24px;padding:22px 24px;border-radius:var(--r-md);
  border:1px solid color-mix(in srgb,var(--light) 35%,var(--line));
  background:radial-gradient(110% 150% at 0% 0%,color-mix(in srgb,var(--light) 15%,transparent),transparent 60%),linear-gradient(150deg,var(--panel),var(--panel-2))}
.qahero__date{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:82px;padding:10px 12px 8px;border-radius:14px;background:rgba(0,0,0,.35);border:1px solid var(--line)}
.qahero__date span{font-family:var(--font-cond);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--light)}
.qahero__date b{font-family:var(--font-display);font-weight:400;font-size:52px;line-height:1}
.qahero__kick{font-family:var(--font-cond);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--light)}
.qahero__title{margin:6px 0 4px;font-family:var(--font-display);font-size:clamp(30px,5vw,44px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.qahero__when{color:var(--muted);font-size:15px}
.qahero__when span{color:var(--muted-2)}

/* ---------- live + replay video ---------- */
.qavid{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;overflow:clip;border:1px solid var(--line);background:#000}
.qavid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.qavid--slate{display:flex;align-items:center;justify-content:center;padding:20px;text-align:center}
.qavid--slate i{position:absolute;inset:0;background-size:cover;background-position:50% 60%;filter:grayscale(1) contrast(1.1) brightness(.4)}
.qavid--slate span{position:relative;max-width:26ch;font-family:var(--font-cond);font-size:14px;letter-spacing:.16em;text-transform:uppercase;line-height:1.5}
.qanow{margin-top:12px;padding:16px 18px;border-radius:var(--r-md);border:1px solid rgba(226,43,43,.5);
  background:radial-gradient(120% 160% at 0% 0%,rgba(226,43,43,.16),transparent 60%),var(--panel)}
.qanow p{margin:10px 0 4px;font-size:clamp(18px,3vw,22px);font-weight:600;line-height:1.3}
.qanow--idle p{font-weight:400;color:var(--muted);font-size:16px}

/* ---------- host tools ---------- */
.qahost{margin-top:14px;padding:18px 20px;border-radius:var(--r-md);border:1px dashed rgba(255,255,255,.22)}
.qahost__acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.qahost__clock{display:inline-flex;align-items:center;gap:8px;margin-right:auto;font-family:var(--font-cond);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qahost__clock svg{width:16px;height:16px;color:var(--red)}
.qahost__clock b{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:.04em;color:var(--white)}
.qahost__hint{margin-top:10px;color:var(--muted-2);font-size:13.5px}
.qahost__flags{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.qflag{padding:12px 0;border-bottom:1px solid var(--line-soft);font-size:15px;line-height:1.45}
.qflag:last-child{border-bottom:0;padding-bottom:0}
.qflag__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qcard--link{display:flex;align-items:center;gap:12px;font-size:15px}
.qcard--link svg:last-child{width:16px;height:16px;margin-left:auto;color:var(--muted)}
.qcard--link:hover{border-color:rgba(255,255,255,.3)}

/* ---------- ask + the list ---------- */
.qask{margin-top:22px}
#qaAsk .note{margin-top:22px}
.qa__listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:34px 0 4px;
  font-family:var(--font-cond);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qrow{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.qrow__main{min-width:0;padding-top:2px}
.qrow__text{font-size:17px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.qrow .trow__meta{margin-top:6px}
.qrow .who,.qline .who{font-size:13.5px}
.qrow__host{display:flex;flex-wrap:wrap;gap:2px;margin:6px 0 -6px -10px}
.qrow--now{margin:0 -14px;padding:16px 14px;border-radius:var(--r-md);border:1px solid rgba(226,43,43,.5);background:rgba(226,43,43,.08)}
.qrow--answered .qrow__text,.qrow--skipped .qrow__text{font-weight:400;color:var(--muted)}
.qrow.is-held .qrow__text{color:var(--muted)}
.qvote{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:52px;min-height:58px;padding:6px 0;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);transition:border-color .2s,color .2s,background .2s,transform .15s}
.qvote svg{width:17px;height:17px}
.qvote b{font-family:var(--font-display);font-weight:400;font-size:19px;line-height:1;letter-spacing:.02em;color:var(--white)}
.qvote:hover{border-color:rgba(255,255,255,.35)}
.qvote:active{transform:scale(.94)}
.qvote[aria-pressed="true"]{border-color:var(--light);color:var(--light);background:color-mix(in srgb,var(--light) 14%,transparent)}
.qvote[aria-pressed="true"] b{color:var(--light)}

/* ---------- replay ---------- */
.qareplay{margin-top:18px}
.qline{display:grid;grid-template-columns:86px 1fr;align-items:start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.qrest .qline{grid-template-columns:1fr}
.qstamp{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 10px;border-radius:100px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--light) 45%,transparent);background:color-mix(in srgb,var(--light) 10%,transparent);color:var(--light);
  font-family:var(--font-cond);font-weight:600;font-size:13.5px;letter-spacing:.06em;transition:background .2s}
.qstamp svg{width:10px;height:10px}
.qstamp:hover{background:color-mix(in srgb,var(--light) 22%,transparent)}
.qstamp--off{cursor:default;border-color:var(--line);background:none;color:var(--muted)}
.qrest{margin-top:22px;color:var(--muted)}
.qrest summary{padding:10px 0;cursor:pointer;font-family:var(--font-cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.qfields{display:grid;grid-template-columns:1.3fr 1fr;gap:8px}

@media (max-width:560px){
  .qahero{grid-template-columns:auto 1fr;padding:18px}
  .qahero .btn{grid-column:1 / -1;width:100%}
  .qahero__date{min-width:70px}
  .qahero__date b{font-size:44px}
  .qrow{gap:11px}
  .qvote{width:46px}
  .qline{grid-template-columns:76px 1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){.tag--live::before{animation:none}}
