/* ============================================================
   Astra Origins — Astra Newsroom (Mission Control) page styles.
   Shared shell lives in cosmos.css. This file adds the newsroom
   hero, pinned briefing, dispatch timeline, direction board,
   subscribe block, and the details modal (custom scrollbar).
   ============================================================ */

/* ── Header active state ──────────────────────────────── */
.t-tn.is-on { background: oklch(from var(--accent) l c h / 0.18); color: var(--accent); }

/* ── Hero — live transmission ─────────────────────────── */
.nr-hero {
  position: relative; overflow: hidden;
  border-radius: 14px; padding: 26px 24px; margin-bottom: 16px;
  color: white;
  background:
    radial-gradient(ellipse at 82% 18%, oklch(0.42 0.16 30 / 0.7), transparent 55%),
    radial-gradient(ellipse at 14% 88%, oklch(0.4 0.16 265 / 0.7), transparent 55%),
    linear-gradient(135deg, oklch(0.15 0.05 265), oklch(0.07 0.03 250));
}
.nr-hero-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 26%, white 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 62%, white 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 30%, white 50%, transparent 51%),
    radial-gradient(2px 2px at 68% 54%, white 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 28%, white 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 72%, white 50%, transparent 51%);
  opacity: 0.5;
}
.nr-hero-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, oklch(0.8 0.04 250 / 0.05) 0 2px, transparent 2px 4px);
  mask-image: radial-gradient(ellipse at 70% 50%, black, transparent 80%);
}
.nr-hero-body { position: relative; z-index: 1; }
.nr-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.18em;
  color: oklch(0.85 0.12 30);
  padding: 4px 10px; border-radius: 999px;
  background: oklch(0.6 0.18 30 / 0.16); border: 1px solid oklch(0.6 0.18 30 / 0.4);
}
.nr-live-dot { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.7 0.2 30); animation: nr-pulse 1.4s ease-in-out infinite; }
@keyframes nr-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 oklch(0.7 0.2 30 / 0.6); } 50% { opacity: 0.5; box-shadow: 0 0 0 5px oklch(0.7 0.2 30 / 0); } }
.nr-hero-title { font-size: 26px; font-weight: 800; letter-spacing: -0.015em; margin: 12px 0 6px; }
.nr-hero-sub { font-size: 13px; line-height: 1.55; opacity: 0.85; margin: 0 0 16px; max-width: 60ch; }
.nr-hero-strip {
  display: flex; gap: 14px; flex-wrap: nowrap; overflow: hidden;
  font-size: 9px; letter-spacing: 0.14em; color: oklch(0.8 0.05 250);
  padding-top: 12px; border-top: 1px solid oklch(0.98 0.005 250 / 0.12);
  white-space: nowrap;
}

/* ── Section header strip ─────────────────────────────── */
.nr-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.nr-sh-h { font-size: 15px; font-weight: 800; letter-spacing: -0.005em; }
.nr-sh-meta { font-size: 9px; color: var(--ink-3); letter-spacing: 0.14em; font-weight: 700; }

/* ── Pinned briefing ──────────────────────────────────── */
.nr-pinned {
  display: grid; grid-template-columns: 72px 1fr; gap: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nr-pinned:hover, .nr-pinned:focus-visible { border-color: var(--accent-line); box-shadow: 0 12px 28px oklch(0 0 0 / 0.08); outline: none; }
.nr-pinned-side {
  display: grid; place-items: center; color: white; font-size: 24px;
  background: linear-gradient(160deg, oklch(0.55 0.18 30), oklch(0.32 0.12 265));
}
.nr-pinned-body { padding: 16px 18px; }
.nr-pinned-tag { font-size: 8px; color: var(--accent); letter-spacing: 0.16em; font-weight: 800; }
.nr-pinned-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 5px 0 6px; }
.nr-pinned-desc { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin: 0 0 12px; }
.nr-pinned-foot { display: flex; align-items: center; gap: 6px; }
.nr-pill { font-size: 8px; font-weight: 800; letter-spacing: 0.12em; color: var(--ink-3); padding: 3px 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.nr-read { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); text-decoration: none; }
.nr-read:hover { gap: 8px; }

/* ── Dispatch feed (timeline) ─────────────────────────── */
.nr-feed { list-style: none; padding: 0; margin: 0; }
.nr-item { display: grid; grid-template-columns: 24px 1fr; gap: 12px; }
.nr-rail { position: relative; display: flex; justify-content: center; }
.nr-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--line); }
.nr-item:first-child .nr-rail::before { top: 18px; }
.nr-item:last-child .nr-rail::before { bottom: calc(100% - 18px); }
.nr-node { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); margin-top: 14px; }
.nr-card { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; margin-bottom: 10px; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
.nr-card:hover, .nr-card:focus-visible { border-color: var(--accent-line); transform: translateX(2px); outline: none; }
.nr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.nr-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 800; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 5px; }
.nr-cat .bi { font-size: 10px; }
.nr-cat-release   { color: oklch(0.5 0.18 250); background: oklch(0.5 0.18 250 / 0.12); }
.nr-cat-direction { color: oklch(0.5 0.16 200); background: oklch(0.5 0.16 200 / 0.12); }
.nr-cat-guideline { color: oklch(0.5 0.16 145); background: oklch(0.5 0.16 145 / 0.12); }
.nr-cat-update    { color: oklch(0.55 0.16 30);  background: oklch(0.55 0.16 30 / 0.12); }
.nr-date { font-size: 9px; color: var(--ink-3); letter-spacing: 0.1em; font-weight: 700; }
.nr-card-title { font-size: 14px; font-weight: 800; letter-spacing: -0.005em; margin: 0 0 4px; }
.nr-card-desc { font-size: 12px; color: var(--ink-2); line-height: 1.5; margin: 0; }
.nr-empty { padding: 26px; text-align: center; font-size: 11px; color: var(--ink-3); letter-spacing: 0.16em; background: var(--surface-2); border: 1px dashed var(--line); border-radius: 10px; }

/* ── Direction board ──────────────────────────────────── */
.nr-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nr-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.nr-tile-ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: white; font-size: 18px; margin-bottom: 10px; }
.nr-tile-title { font-size: 14px; font-weight: 800; margin: 0 0 4px; }
.nr-tile-desc { font-size: 11px; color: var(--ink-2); line-height: 1.5; margin: 0; }

/* ── Subscribe ────────────────────────────────────────── */
.nr-sub {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center;
  margin-top: 16px; padding: 16px 18px;
  background:
    radial-gradient(ellipse at 90% 50%, oklch(0.4 0.14 265 / 0.5), transparent 60%),
    linear-gradient(135deg, oklch(0.16 0.05 265), oklch(0.09 0.03 250));
  border: 1px solid oklch(0.3 0.05 260); border-radius: 12px; color: white;
}
.nr-sub-ic { width: 48px; height: 48px; border-radius: 11px; display: grid; place-items: center; font-size: 22px; background: oklch(0.98 0.005 250 / 0.12); }
.nr-sub-title { font-size: 15px; font-weight: 800; margin: 0 0 3px; }
.nr-sub-desc { font-size: 11px; opacity: 0.8; margin: 0; }
.nr-sub-form { display: flex; gap: 6px; }
.nr-sub-input { background: oklch(0.98 0.005 250 / 0.12); border: 1px solid oklch(0.98 0.005 250 / 0.25); border-radius: 8px; padding: 9px 12px; color: white; font-size: 12px; outline: none; min-width: 0; width: 180px; }
.nr-sub-input::placeholder { color: oklch(0.8 0.03 250 / 0.7); }
.nr-sub-btn { background: var(--accent); color: white; border-radius: 8px; padding: 9px 16px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; cursor: pointer; border: 0; }

/* ── Details modal ────────────────────────────────────── */
.nr-modal { position: fixed; inset: 0; z-index: 1300; display: none; align-items: center; justify-content: center; padding: 20px; }
.nr-modal.is-open { display: flex; }
.nr-modal-backdrop { position: absolute; inset: 0; background: oklch(0 0 0 / 0.6); backdrop-filter: blur(3px); }
.nr-modal-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 760px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 30px 70px oklch(0 0 0 / 0.4);
  animation: nr-modal-in 0.2s ease;
}
@keyframes nr-modal-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } to { opacity: 1; transform: none; } }
.nr-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.nr-modal-date { margin-left: 2px; font-size: 9px; color: var(--ink-3); letter-spacing: 0.1em; font-weight: 700; }
.nr-modal-close { margin-left: auto; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 16px; }
.nr-modal-close:hover { color: var(--ink); }

/* Scrollable body with a custom scrollbar. */
.nr-modal-scroll {
  position: relative;
  padding: 18px 20px 22px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
/* While an uploaded-HTML iframe loads, keep the skeleton covering the modal so
   the half-rendered iframe underneath never flashes. */
.nr-modal-loading.nr-loading-cover {
  position: absolute; inset: 0; z-index: 3;
  background: var(--surface);
  padding: 18px 20px 22px; overflow: hidden;
}
.nr-modal-scroll::-webkit-scrollbar { width: 9px; }
.nr-modal-scroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.nr-modal-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--surface); }
.nr-modal-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

.nr-modal-img { border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.nr-modal-img img { width: 100%; display: block; max-height: 320px; object-fit: cover; }
.nr-modal-title { font-size: 21px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 12px; }
.nr-modal-body { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); overflow-wrap: break-word; }
.nr-modal-body p { margin: 0 0 14px; }
.nr-modal-body p:last-child { margin-bottom: 0; }
.nr-modal-body ul, .nr-modal-body ol { margin: 0 0 14px; padding-left: 20px; }
.nr-modal-body li { margin-bottom: 6px; }
.nr-modal-body h1, .nr-modal-body h2, .nr-modal-body h3, .nr-modal-body h4 { font-weight: 800; color: var(--ink); margin: 18px 0 8px; line-height: 1.3; }
.nr-modal-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; }
.nr-modal-body a { color: var(--accent); }

/* Uploaded-HTML bodies (email-style layouts, fixed widths, wide tables) — keep
   everything inside the modal: no horizontal scroll, content centered. */
.nr-modal-body { margin-inline: auto; }
.nr-modal-body * { max-width: 100%; box-sizing: border-box; }
.nr-modal-body table { width: auto !important; max-width: 100% !important; margin-left: auto; margin-right: auto; table-layout: fixed; border-collapse: collapse; }
.nr-modal-body td, .nr-modal-body th { overflow-wrap: break-word; word-break: break-word; }
.nr-modal-body img, .nr-modal-body video, .nr-modal-body iframe { height: auto; }
.nr-modal-body pre { white-space: pre-wrap; word-break: break-word; }
.nr-modal-body > center, .nr-modal-body > div { margin-left: auto; margin-right: auto; }

/* Uploaded full-document HTML renders isolated in an iframe (keeps its own
   head styles/fonts). The wrapper drops its typography so it doesn't interfere. */
.nr-modal-body.is-frame { font-size: initial; line-height: initial; color: initial; margin-inline: 0; }
.nr-modal-frame { display: block; width: 100%; border: 0; background: #fff; border-radius: 8px; }

.nr-modal-ref { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-decoration: none; }
.nr-modal-ref:hover { border-color: var(--accent-line); color: var(--accent); }
.nr-modal-error { padding: 24px; text-align: center; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3); }

/* Modal skeleton */
.nr-modal-loading { display: flex; flex-direction: column; }
.nr-sk { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 6px; }
.nr-sk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.06), transparent); transform: translateX(-100%); animation: nr-shimmer 1.3s infinite; }
@keyframes nr-shimmer { to { transform: translateX(100%); } }
.nr-sk-line { height: 13px; margin-bottom: 9px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .nr-board { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .nr-hero-title { font-size: 21px; }
  .nr-pinned { grid-template-columns: 1fr; }
  .nr-pinned-side { height: 60px; }
  .nr-sub { grid-template-columns: 1fr; text-align: left; }
  .nr-sub-form { flex-direction: column; }
  .nr-sub-input { width: 100%; }
}

/* ── Card footer: reference caption (gray, not a link) + Read more ── */
.nr-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.nr-card-ref { font-size: 9px; color: var(--ink-3); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.nr-readmore { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: 0.1em; color: var(--accent); cursor: pointer; }
.nr-readmore:hover { gap: 8px; }
.nr-pinned-ref { white-space: normal; word-break: break-word; margin-bottom: 10px; border: 0; padding: 0; }

/* ── Modal reference caption under the title (gray, no redirect) ── */
.nr-modal-ref-cap { font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; margin: -4px 0 14px; word-break: break-word; }