/* Topic-scoped styles for /laid-off/* pages. Layered via {% block extra_head %}
 * in templates/topics/event_layoff.html on top of static/pages.css. */

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--warn);
  margin: 0 0 10px;
}

.num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.num-none { color: var(--ink-3); font-weight: 500; font-style: italic; font-family: 'Inter', sans-serif; }
.num-warn { color: var(--warn); }
.sub { font-size: 13px; color: var(--ink-3); }

/* Severance figures */
.figures { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.figure { padding: 12px 0; border-top: 1px solid var(--hair); }
.figure:first-child { border-top: none; }
.figure dt { font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.figure dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }

.sources { font-size: 12px; color: var(--ink-3); margin: 14px 0 0; word-break: break-word; }
.sources a { color: var(--ink-3); }

/* The hook: numbered checklist of first-week moves. */
.hook { border-color: oklch(85% 0.04 70); background: oklch(97% 0.02 70); }
.checklist { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: ck; }
.checklist li {
  position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--hair);
  counter-increment: ck;
}
.checklist li:first-child { border-top: none; }
.checklist li::before {
  content: counter(ck); position: absolute; left: 0; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.ck-action { display: block; font-weight: 600; font-size: 16px; margin-bottom: 3px; }
.ck-why { display: block; font-size: 14px; color: var(--ink-2); }
.ck-why .cite { white-space: nowrap; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl-item {
  position: relative; padding: 14px 0 14px 22px; border-left: 2px solid var(--hair);
}
.tl-item::before {
  content: ""; position: absolute; left: -7px; top: 18px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-panel); border: 2px solid var(--accent);
}
.tl-date { display: block; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--accent-ink); font-weight: 600; }
.tl-label { display: block; font-weight: 600; margin-top: 2px; }
.tl-note { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* WARN + destinations */
.warn-list, .land-list { margin: 0; padding-left: 18px; }
.warn-list li, .land-list li { margin-bottom: 10px; }
.warn-state { font-weight: 600; }
.land-list .sub { display: block; }

.disclaimer { font-size: 13px; color: var(--ink-3); margin-top: 28px; }

@media (min-width: 640px) {
  .figures { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .figure { border-top: 1px solid var(--hair); }
  .figure:nth-child(2) { border-top: none; }

  .timeline {
    grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
    overflow-x: auto; gap: 0; padding-bottom: 8px;
  }
  .tl-item {
    border-left: none; border-top: 2px solid var(--hair);
    padding: 22px 16px 0 0;
  }
  .tl-item::before { left: 0; top: -7px; }
}