/* Today In Space — homepage widget.
 *
 * Every rule is scoped under .tis-today. This markup gets injected into a
 * Squarespace page whose stylesheet is not ours and will happily restyle a
 * bare <a> or <ul>; scoping plus the targeted resets below are what stop the
 * host theme and this widget from fighting. Nothing here leaks outward
 * either — no element, :root, or body selectors.
 *
 * PROTO, adjusted for where it lives: crimson signal, HUD corner brackets,
 * tracked uppercase labels. The faces are the site's own Oswald and Space
 * Grotesk rather than Orbitron and Share Tech Mono — a widget that imported
 * its own display face would read as a third-party embed bolted onto the
 * page, which is the one thing it must not look like.
 */

.tis-today {
  --tis-void: #000;
  --tis-surface: #0a0a0a;
  --tis-raised: #141414;
  --tis-line: #1f1f1f;
  --tis-crimson: #cc1f1f;
  --tis-signal: #ff3a44;
  --tis-text: #e8e8e8;
  --tis-muted: #6b6b6b;
  /* Secondary prose that still has to be READ — the blurb and the AI
   * disclosure. --muted is a label colour: at 3.6:1 on this background it
   * fails WCAG AA for body text, which is the wrong place to be economical
   * when the sentence is the one telling people the AI can be wrong. This
   * clears 7:1. */
  --tis-soft: #a0a0a0;
  --tis-ok: #3fa34d;
  --tis-warn: #d9a520;
  --tis-display: 'Oswald', 'Bebas Neue', Impact, sans-serif;
  --tis-body: 'Space Grotesk', ui-monospace, 'SF Mono', Menlo, monospace;

  position: relative;
  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 34px 30px 26px;
  background: var(--tis-surface);
  border: 1px solid var(--tis-line);
  color: var(--tis-text);
  font-family: var(--tis-body);
  font-size: 15px;
  line-height: 1.55;
  text-align: left;
}

.tis-today *,
.tis-today *::before,
.tis-today *::after { box-sizing: border-box; }

/* Host-theme defences. Squarespace styles descendants generically.
 *
 * NOTE the specificity trap these create: `.tis-today a` is (0,1,1), which
 * beats a bare `.tis-credit` at (0,1,0). Any rule below that sets colour on a
 * link, or margin/padding/border on a <p>, MUST be written as
 * `.tis-today .tis-thing` or it loses to the reset and fails silently — the
 * element just inherits and looks almost right, which is how it goes
 * unnoticed. */
.tis-today a { color: inherit; text-decoration: none; background: none; }
.tis-today p,
.tis-today h2,
.tis-today h3,
.tis-today ul,
.tis-today li { margin: 0; padding: 0; border: 0; list-style: none; }

/* HUD corner brackets. The gap is the point — never close the rectangle. */
.tis-today::before,
.tis-today::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid var(--tis-crimson);
  pointer-events: none;
}
.tis-today::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.tis-today::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* ─── header ─────────────────────────────────────────────────────────────── */

.tis-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--tis-line);
}

.tis-head h2 {
  font-family: var(--tis-display);
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--tis-text);
}

.tis-head h2 em {
  font-style: normal;
  color: var(--tis-crimson);
}

.tis-stamp {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tis-muted);
  font-variant-numeric: tabular-nums;
}

/* Only shown when the feed is old enough that a reader would be misled. */
.tis-stamp[data-stale='true'] { color: var(--tis-warn); }

.tis-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tis-ok);
}
.tis-live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ─── intro and disclosure ───────────────────────────────────────────────── */

.tis-intro { margin-bottom: 26px; }

.tis-today .tis-blurb {
  /* Measure, not width — past about 75 characters the eye loses the line
     start on the way back, and this panel can be 1100px wide. */
  max-width: 72ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tis-soft);
}

.tis-today .tis-blurb em {
  font-style: italic;
  color: var(--tis-text);
}

.tis-today .tis-inline-link {
  color: var(--tis-crimson);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.tis-today .tis-inline-link:hover {
  color: var(--tis-signal);
  border-bottom-color: var(--tis-signal);
}

/* Marked with a crimson rule rather than a box or an icon. It has to read as
   a standing notice, not as an error the page is currently having. */
.tis-today .tis-disclosure {
  max-width: 72ch;
  margin-top: 14px;
  padding-left: 13px;
  border-left: 1px solid var(--tis-crimson);
  font-size: 13px;
  line-height: 1.6;
  color: var(--tis-soft);
}

/* ─── layout ─────────────────────────────────────────────────────────────── */

.tis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 34px;
}

@media (max-width: 760px) {
  .tis-today { padding: 28px 18px 22px; }
  .tis-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

.tis-label {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tis-muted);
}

.tis-col + .tis-col { min-width: 0; }
.tis-section + .tis-section { margin-top: 28px; }

/* ─── stories ────────────────────────────────────────────────────────────── */

.tis-story {
  display: block;
  padding: 11px 0 12px;
  border-top: 1px solid var(--tis-line);
  transition: border-color .15s;
}
.tis-story:first-of-type { border-top: 0; padding-top: 0; }
.tis-story:hover { border-color: var(--tis-signal); }

.tis-story-title {
  display: block;
  font-size: 16px;
  line-height: 1.4;
  color: var(--tis-text);
  transition: color .15s;
}
.tis-story:hover .tis-story-title { color: var(--tis-signal); }

.tis-story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--tis-muted);
}

.tis-shelf {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 10px;
  color: var(--tis-crimson);
}

.tis-breaking {
  padding: 1px 6px;
  border: 1px solid var(--tis-signal);
  color: var(--tis-signal);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Dimmed rather than hidden when a topic filter is on, so the list keeps its
 * shape and the filter reads as an emphasis instead of a page change. */
.tis-story[data-dim='true'] { opacity: 0.28; }

/* ─── topics ─────────────────────────────────────────────────────────────── */

.tis-topic {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 7px 8px 7px 10px;
  margin-left: -10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}
.tis-topic:hover { background: var(--tis-raised); }
.tis-topic[aria-pressed='true'] {
  background: var(--tis-raised);
  box-shadow: inset 2px 0 0 var(--tis-crimson);
}

.tis-topic-term { flex: 1; min-width: 0; }

.tis-topic-count {
  font-size: 13px;
  color: var(--tis-muted);
  font-variant-numeric: tabular-nums;
}

.tis-arrow { font-size: 12px; width: 1.2em; text-align: center; }
.tis-arrow[data-dir='up'] { color: var(--tis-ok); }
.tis-arrow[data-dir='down'] { color: var(--tis-muted); }
.tis-arrow[data-dir='steady'] { color: var(--tis-muted); }
.tis-arrow[data-dir='new'] { color: var(--tis-signal); }

/* ─── launches ───────────────────────────────────────────────────────────── */

.tis-launch {
  display: block;
  padding: 10px 0;
  border-top: 1px solid var(--tis-line);
}
.tis-launch:first-of-type { border-top: 0; padding-top: 0; }

.tis-clock {
  font-family: var(--tis-display);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--tis-crimson);
  font-variant-numeric: tabular-nums;
}
.tis-clock[data-live='true'] { color: var(--tis-signal); }

.tis-launch-name {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
}

.tis-launch-meta {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tis-muted);
}

/* Scoped: loses to the `.tis-today a` reset otherwise, which is why watch-live
   links were inheriting body colour instead of reading as links. */
.tis-today .tis-watch { color: var(--tis-crimson); transition: color .15s; }
.tis-today .tis-watch:hover { color: var(--tis-signal); }

/* ─── footer ─────────────────────────────────────────────────────────────── */

.tis-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--tis-line);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tis-muted);
}

.tis-dot { color: var(--tis-line); }

/* Sits with the Skye credit, not with the controls — it is a byline, so it
 * reads as part of the same sentence rather than as something to click. */
.tis-today .tis-credit {
  color: var(--tis-muted);
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.tis-today .tis-credit:hover {
  color: var(--tis-crimson);
  border-bottom-color: var(--tis-crimson);
}

.tis-clear {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--tis-crimson);
  font: inherit;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.tis-clear:hover { color: var(--tis-signal); }
.tis-clear[hidden] { display: none; }

.tis-empty { color: var(--tis-muted); font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
  .tis-today * { transition: none !important; }
}