/* ============================================================
   Flopay status page — visual overlay for cstate v6.0.1.

   Design direction: editorial banking dispatch.
   - Reads as a document, not a dashboard.
   - Severity expressed as small indicators, never as fullbleed banners.
   - Slate ink scale + brand purple used sparingly.
   - System fonts only (Inter / Poppins fallbacks).
   - Light mode forced — light is the only mode.
   ============================================================ */

/* 0. Reset + light mode lock ------------------------------------ */
:root { color-scheme: only light; }

@media (prefers-color-scheme: dark) {
  body, html { background: #f8fafc !important; color: #0f172a !important; }
  .summary, .system, .issue, .category, .announcement-box,
  .tag, .archive__head, .category__head,
  .incident-card, .components { background: #ffffff !important; }
  .active-incidents { background: transparent !important; }
  .tag { color: #334155 !important; }
}

/* 1. Tokens — lifted from flopay-web ---------------------------- */
:root {
  --fp-brand-500: #8b59c7;
  --fp-brand-600: #7544ad;
  --fp-brand-700: #5d3489;

  --fp-ink-900: #0f172a;
  --fp-ink-800: #1e293b;
  --fp-ink-700: #334155;
  --fp-ink-600: #475569;
  --fp-ink-500: #64748b;
  --fp-ink-400: #94a3b8;
  --fp-ink-300: #cbd5e1;
  --fp-ink-200: #e2e8f0;
  --fp-ink-100: #f1f5f9;
  --fp-ink-50:  #f8fafc;
  --fp-paper:   #ffffff;

  /* Severity — muted, banking-grade */
  --fp-ok:        #15803d;
  --fp-ok-bg:     #f0fdf4;
  --fp-ok-border: #bbf7d0;

  --fp-notice:    #1e40af;
  --fp-notice-bg: #eff6ff;
  --fp-notice-border: #bfdbfe;

  --fp-warn:      #b45309;
  --fp-warn-bg:   #fffbeb;
  --fp-warn-border: #fde68a;

  --fp-down:      #b91c1c;
  --fp-down-bg:   #fef2f2;
  --fp-down-border: #fecaca;

  --fp-radius-sm: 6px;
  --fp-radius:    10px;
  --fp-radius-lg: 14px;
  --fp-radius-pill: 9999px;

  --fp-shadow-1: 0 1px 0 rgba(15, 23, 42, 0.04);
  --fp-shadow-2: 0 1px 2px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.04);

  --fp-content-w: 880px;

  --fp-sans:    "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
  --fp-display: "Poppins", "Inter Variable", "Inter", system-ui, sans-serif;
  --fp-mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

/* 2. Typography & body ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, html { margin: 0; padding: 0; }
html, body {
  background: var(--fp-ink-50) !important;
  min-height: 100vh;
}
body {
  color: var(--fp-ink-900);
  font-family: var(--fp-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { line-height: 1.65; text-wrap: pretty; margin: 0 0 0.75em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--fp-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--fp-ink-900);
  margin: 0;
}

a { color: var(--fp-brand-700); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--fp-brand-600); }

.contain, .contain--more { max-width: var(--fp-content-w); padding: 0 24px; }

/* 3. Masthead -------------------------------------------------- */
.header {
  background: var(--fp-paper) !important;
  border-bottom: 1px solid var(--fp-ink-100);
  box-shadow: none !important;
  padding: 14px 0 !important;
}
.header h1 {
  font-family: var(--fp-display);
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fp-ink-900);
  margin: 0;
}
.header__logo { color: var(--fp-ink-900); display: inline-flex; align-items: center; gap: 8px; }
.header__logo::before {
  content: "";
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--fp-brand-500), var(--fp-brand-700));
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
}

/* 4. Editorial page intro -------------------------------------- */
.page-intro {
  margin: 56px auto 24px;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--fp-down-bg); }
  50%      { box-shadow: 0 0 0 6px var(--fp-down-bg); }
}

.page-intro__title {
  font-family: var(--fp-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fp-ink-900);
  margin: 0 0 12px;
}
.page-intro__lede {
  font-size: 16px;
  color: var(--fp-ink-600);
  max-width: 56ch;
  margin: 0;
}

/* 5. Status strip — pill on left, subscribe pill on right.
   Cstate's .summary.status-box renders a fullbleed banner by default;
   we strip that and lay out its children as a calm row. */
.summary.status-box {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 28px !important;
  color: inherit !important;
}
.summary.status-box .summary-flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px;
}

/* The .status-text element holds cstate's localised status sentence
   ("Upplever stora problem" / "Inga problem upptäckta" / etc.).
   We restyle it into the pill the design wants. */
.status-text {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: var(--fp-paper);
  border: 1px solid var(--fp-ink-200);
  padding: 7px 14px 7px 12px;
  border-radius: var(--fp-radius-pill);
  font-family: var(--fp-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-ink-700) !important;
  line-height: 1.2;
}
.status-text strong {
  font: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}
.status-text .summary__date { display: none !important; }

/* Severity dot before the pill text — coloured by body status class */
.status-text::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}
body.status-ok        .status-text::before { background: var(--fp-ok);     box-shadow: 0 0 0 3px var(--fp-ok-bg); }
body.status-disrupted .status-text::before { background: var(--fp-warn);   box-shadow: 0 0 0 3px var(--fp-warn-bg); }
body.status-down      .status-text::before { background: var(--fp-down);   box-shadow: 0 0 0 3px var(--fp-down-bg); animation: pulse 2.4s ease-in-out infinite; }
body.status-notice    .status-text::before { background: var(--fp-notice); box-shadow: 0 0 0 3px var(--fp-notice-bg); }

.subscribe-button {
  background: var(--fp-paper) !important;
  color: var(--fp-ink-900) !important;
  border: 1px solid var(--fp-ink-200) !important;
  border-radius: var(--fp-radius-pill) !important;
  padding: 8px 14px !important;
  font-family: var(--fp-sans) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.subscribe-button:hover {
  border-color: var(--fp-ink-400) !important;
  background: var(--fp-ink-50) !important;
  transform: translateY(-1px);
}

.subscribe-dropdown {
  border-radius: var(--fp-radius) !important;
  border: 1px solid var(--fp-ink-200) !important;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18) !important;
}

/* 6. Section eyebrow — used for "Aktiva incidenter" / "Tjänster" / "Historik" */
.section-eyebrow {
  font-family: var(--fp-sans);
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--fp-ink-500);
  margin: 0 0 12px !important;
  padding: 0;
  border: 0;
  background: transparent;
}

/* 7. Active incidents ----------------------------------------- */
.active-incidents { margin: 0 0 48px; }

.incident-card {
  background: var(--fp-paper);
  border: 1px solid var(--fp-ink-200);
  border-radius: var(--fp-radius);
  padding: 22px 24px;
  margin: 0 0 14px;
  position: relative;
  box-shadow: var(--fp-shadow-1);
}
.incident-card.incident-down       { border-color: var(--fp-down-border); }
.incident-card.incident-disrupted  { border-color: var(--fp-warn-border); }
.incident-card.incident-notice     { border-color: var(--fp-notice-border); }

.incident-card__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}

.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fp-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px 4px 8px;
  border-radius: var(--fp-radius-pill);
}
.severity-badge__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
}
.severity-down     { background: var(--fp-down-bg); color: var(--fp-down); }
.severity-down .severity-badge__dot     { background: var(--fp-down); }
.severity-disrupted { background: var(--fp-warn-bg); color: var(--fp-warn); }
.severity-disrupted .severity-badge__dot { background: var(--fp-warn); }
.severity-notice    { background: var(--fp-notice-bg); color: var(--fp-notice); }
.severity-notice .severity-badge__dot   { background: var(--fp-notice); }

.incident-card__title-link { color: var(--fp-ink-900); }
.incident-card__title-link:hover .incident-card__title { color: var(--fp-brand-700); }
.incident-card__title {
  font-family: var(--fp-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: inherit;
  margin: 0;
  display: inline;
}

.incident-card__affected {
  margin: 0 0 14px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  background: var(--fp-ink-100) !important;
  color: var(--fp-ink-700) !important;
  border: 0 !important;
  padding: 3px 10px !important;
  border-radius: var(--fp-radius-pill) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  text-decoration: none !important;
  transition: background 150ms ease, color 150ms ease;
}
.tag:hover {
  background: var(--fp-ink-200) !important;
  color: var(--fp-ink-900) !important;
}

.incident-card__body {
  font-size: 15px;
  color: var(--fp-ink-700);
  line-height: 1.65;
}
.incident-card__body p {
  margin: 0 0 10px;
}
.incident-card__body p:last-child { margin-bottom: 0; }
.incident-card__body em {
  font-style: normal;
  font-weight: 600;
  color: var(--fp-ink-900);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-block;
  margin-right: 4px;
  padding: 2px 6px;
  border-radius: var(--fp-radius-sm);
  background: var(--fp-ink-100);
}
.incident-card__body hr {
  border: 0;
  height: 1px;
  background: var(--fp-ink-100);
  margin: 14px 0;
}
.incident-card__body .faded {
  color: var(--fp-ink-500);
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Hide the old cstate announcement-box (we render via our override) */
.contain > .announcement-box,
.contain--more > .announcement-box { display: none; }

/* 8. Components / categories ----------------------------------- */
/* Add a section eyebrow before .categories on the homepage. */
.categories::before {
  content: "Tjänster";
  display: block;
  font-family: var(--fp-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-ink-500);
  margin: 0 0 12px;
}

.categories {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 48px !important;
}
.category {
  background: var(--fp-paper);
  border: 1px solid var(--fp-ink-100);
  border-radius: var(--fp-radius);
  margin: 0 0 12px;
  overflow: hidden;
  box-shadow: var(--fp-shadow-1);
}
.category__head {
  padding: 12px 22px !important;
  margin: 0 !important;
  font-family: var(--fp-display) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: -0.005em !important;
  color: var(--fp-ink-900) !important;
  text-transform: none !important;
  cursor: default !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fp-ink-100) !important;
  background: var(--fp-ink-50) !important;
}
.category__head:hover { background: var(--fp-ink-50) !important; }

.category__head b {
  font-weight: 700;
  font-family: var(--fp-display);
  flex: 1;
}

/* Disable category collapse: hide the chevrons + force components visible. */
.category__open-marker,
.category__closed-marker,
.hide-without-js { display: none !important; }
.category .components { display: block !important; }
.category-status { display: none !important; }

/* Hide the (?) info hint marker — noise in the row. The actual tooltip
   still works because cstate keeps `.tooltip__text` separate; we just
   hide the visible "(?)" trigger. */
.category__head .tooltip,
.component .tooltip { display: none !important; }

.components {
  background: var(--fp-paper) !important;
  border: 0 !important;
  padding: 0;
}
.component {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 22px !important;
  border: 0 !important;
  font-size: 15px;
  color: var(--fp-ink-900) !important;
  gap: 16px;
}
/* Discrete divider between component rows — only between siblings, not on the first one. */
.component + .component {
  border-top: 1px solid var(--fp-ink-100) !important;
}
.component a.no-underline {
  color: var(--fp-ink-900) !important;
  font-weight: 500;
  text-decoration: none !important;
  flex: 1;
}
.component a.no-underline:hover { color: var(--fp-brand-700) !important; }

.component-status {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  padding: 4px 10px !important;
  border-radius: var(--fp-radius-pill);
}
.component[data-status="ok"] .component-status {
  color: var(--fp-ok); background: var(--fp-ok-bg);
}
.component[data-status="ok"] .component-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fp-ok);
}
.component[data-status="disrupted"] .component-status {
  color: var(--fp-warn); background: var(--fp-warn-bg);
}
.component[data-status="disrupted"] .component-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fp-warn);
}
.component[data-status="down"] .component-status {
  color: var(--fp-down); background: var(--fp-down-bg);
}
.component[data-status="down"] .component-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fp-down);
}
.component[data-status="notice"] .component-status {
  color: var(--fp-notice); background: var(--fp-notice-bg);
}
.component[data-status="notice"] .component-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fp-notice);
}

/* When category is collapsed, the tiny status pill on the right of the
   category header — keep visible, smaller. */
.category-status {
  float: none !important;
  font-size: 12px !important;
  color: var(--fp-ink-500) !important;
  font-weight: 500;
}

/* 9. Historical incidents (below the fold) -------------------- */
.contain h2 + .issue,
.contain--more h2 + .issue {
  margin-top: 0;
}
.issue {
  display: block;
  background: var(--fp-paper);
  border: 1px solid var(--fp-ink-100);
  border-radius: var(--fp-radius);
  padding: 16px 22px !important;
  margin: 0 0 10px;
  color: var(--fp-ink-800);
  text-decoration: none !important;
  transition: border-color 150ms ease;
}
.issue:hover { border-color: var(--fp-ink-300); }
.issue .bold {
  font-weight: 600;
  color: var(--fp-ink-900);
  font-family: var(--fp-display);
  font-size: 16px;
  letter-spacing: -0.01em;
  display: inline-block;
  margin-bottom: 4px;
}
.issue .faded {
  color: var(--fp-ink-500);
  font-size: 13px;
  font-feature-settings: "tnum";
}
.date { color: var(--fp-ink-500); font-size: 13px; font-feature-settings: "tnum"; }

/* The historical section heading "Incident historik" — give it section-eyebrow look */
.contain h2,
.contain--more h2 {
  font-family: var(--fp-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--fp-ink-500) !important;
  margin: 40px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}

/* 10. Footer --------------------------------------------------- */
.footer {
  background: transparent !important;
  color: var(--fp-ink-500) !important;
  padding: 32px 0 48px !important;
  margin-top: 32px;
  border-top: 1px solid var(--fp-ink-100);
}
.footer__copyright { color: var(--fp-ink-500) !important; font-size: 13px; }
.footer a { color: var(--fp-ink-700); }
.footer a:hover { color: var(--fp-brand-700); }
.padding-s, .small-text { color: var(--fp-ink-500); font-size: 13px; }

/* Float "Tillbaka till toppen" — appears as a fixed pill bottom-right
   when the user scrolls past the fold. The link still lives in the
   footer for non-JS users; we rip it out visually on JS. */
.footer p:first-of-type a[href="#"] {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fp-paper);
  color: var(--fp-ink-700) !important;
  border: 1px solid var(--fp-ink-200);
  border-radius: var(--fp-radius-pill);
  padding: 9px 16px 9px 14px;
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  box-shadow: 0 6px 20px -8px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, border-color 150ms ease, color 150ms ease;
}
body.scrolled .footer p:first-of-type a[href="#"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.footer p:first-of-type a[href="#"]::before {
  content: "↑";
  display: inline-block;
  font-weight: 600;
  color: var(--fp-ink-500);
}
.footer p:first-of-type a[href="#"]:hover {
  color: var(--fp-ink-900) !important;
  border-color: var(--fp-ink-400);
}
.footer p:first-of-type a[href="#"]:hover::before { color: var(--fp-ink-900); }

/* Hide the bullet separator that lives next to the now-floated link */
.footer p:first-of-type {
  /* The text node "  •  " sits between strong and the anchor.
     Easiest: hide the strong's siblings except the anchor via flex order. */
  display: inline;
}
.footer p:first-of-type::after {
  /* swallow the separator bullet by overlaying nothing — the bullet is
     a literal text node so we instead hide it via font-size:0 trick on
     the anchor's previous text. JS-free this needs a wrapper, so we
     accept the bullet remaining in the static (non-JS) footer flow.
     With JS the link is fixed-positioned so the bullet next to its old
     spot is harmless. */
}

/* Hide cstate's "(?)" info markers everywhere — they were visual noise */
.tooltip { display: none !important; }

/* 11. Responsive ---------------------------------------------- */
@media (max-width: 720px) {
  .contain, .contain--more { padding: 0 18px; }
  .page-intro { margin-top: 36px; }
  .page-intro__title { font-size: clamp(32px, 9vw, 48px); }
  .incident-card { padding: 18px 18px; }
  .incident-card__title { font-size: 18px; }
  .category__head { padding: 12px 18px !important; }
  .component { padding: 12px 18px !important; }
  .issue { padding: 14px 18px !important; }
  .summary.status-box { margin-bottom: 16px !important; }
}

@media (max-width: 480px) {
  .page-intro { margin: 24px auto 20px; }
  .summary.status-box .summary-flex { flex-wrap: wrap; gap: 8px; }
  .status-text { font-size: 11px !important; padding: 6px 12px 6px 10px; }
  .incident-card__head { gap: 8px; }
  .severity-badge { font-size: 10px; padding: 3px 8px 3px 7px; }
  .component-status { font-size: 12px !important; padding: 3px 8px !important; }
}

/* 12. Print ---------------------------------------------------- */
@media print {
  body { background: white !important; }
  .summary.status-box, .header, .footer { display: none; }
  .incident-card, .category { box-shadow: none !important; border-color: var(--fp-ink-300) !important; }
}

/* ============================================================
   INCIDENT DETAIL PAGE
   Restyles /layouts/issues/single.html into a calm "dossier":
   • Breadcrumb chip → hero card with severity, title, affected,
     metadata strip → vertical timeline of updates.
   ============================================================ */
.incident-page { max-width: 760px; padding-top: 32px; padding-bottom: 56px; }

/* Back breadcrumb — small chip pulled to the page top */
.incident-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: var(--fp-paper);
  border: 1px solid var(--fp-ink-100);
  border-radius: var(--fp-radius-pill);
  color: var(--fp-ink-700) !important;
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none !important;
  margin: 0 0 28px;
  transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.incident-back:hover {
  border-color: var(--fp-ink-300);
  color: var(--fp-ink-900) !important;
  transform: translateX(-2px);
}
.incident-back__arrow { color: var(--fp-ink-500); font-weight: 600; }
.incident-back:hover .incident-back__arrow { color: var(--fp-ink-900); }

/* Hero card — front-matter of the incident */
.incident-detail {
  background: var(--fp-paper);
  border: 1px solid var(--fp-ink-200);
  border-radius: var(--fp-radius-lg);
  padding: 28px 32px 0;
  margin: 0 0 36px;
  box-shadow: var(--fp-shadow-1);
  overflow: hidden;
}
.incident-detail.incident-down       { border-color: var(--fp-down-border); }
.incident-detail.incident-disrupted  { border-color: var(--fp-warn-border); }
.incident-detail.incident-notice     { border-color: var(--fp-notice-border); }

.incident-detail__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 24px;
}
.incident-detail__head .severity-badge { /* reuses existing class from homepage */
  margin: 0;
}
.incident-detail__title {
  font-family: var(--fp-display);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--fp-ink-900);
  margin: 0;
  text-wrap: balance;
}
.incident-detail__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.incident-detail__tags li { margin: 0; padding: 0; }

/* Metadata strip — startad / status / kalender */
.incident-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 -32px;
  padding: 0;
  border-top: 1px solid var(--fp-ink-100);
}
.incident-meta__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 32px;
  border-right: 1px solid var(--fp-ink-100);
  border-bottom: 1px solid var(--fp-ink-100);
}
.incident-meta__row:nth-child(2n) { border-right: 0; }
.incident-meta__row:last-child,
.incident-meta__row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.incident-meta__row dt {
  font-family: var(--fp-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fp-ink-500);
  margin: 0;
}
.incident-meta__row dd {
  margin: 0;
  font-size: 14px;
  color: var(--fp-ink-900);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.incident-meta__hint { color: var(--fp-ink-500); font-size: 13px; }

/* Status pill in the metadata grid */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--fp-radius-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-feature-settings: normal;
}
.status-pill__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.status-pill--open    { background: var(--fp-warn-bg); color: var(--fp-warn); }
.status-pill--open .status-pill__dot { background: var(--fp-warn); animation: pulse 2.4s ease-in-out infinite; box-shadow: 0 0 0 3px var(--fp-warn-bg); }
.status-pill--resolved { background: var(--fp-ok-bg); color: var(--fp-ok); }
.status-pill--resolved .status-pill__dot { background: var(--fp-ok); }

/* Calendar download button in metadata */
.incident-meta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: var(--fp-paper);
  border: 1px solid var(--fp-ink-200);
  border-radius: var(--fp-radius-pill);
  color: var(--fp-ink-900);
  font-family: var(--fp-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease;
}
.incident-meta__btn:hover {
  border-color: var(--fp-ink-400);
  transform: translateY(-1px);
}
.incident-meta__btn svg { color: var(--fp-ink-500); }

/* TIMELINE
   The cstate markdown content is rendered inside .timeline. Each
   update is a <p>; the original report has no leading <em>; subsequent
   updates start with <em>Marker</em>. Paragraphs are separated by <hr>.
   We turn this into a vertical timeline with marker pills + a connecting
   line on the left. */
.incident-timeline { padding: 0 4px; }
.section-eyebrow + .timeline { margin-top: 14px; }

.timeline {
  position: relative;
  padding: 4px 0 4px 0;
}
/* Hide the markdown horizontal rules — we draw a continuous line ourselves */
.timeline > hr { display: none; }

/* Vertical line that connects the markers — runs the full timeline height */
.timeline::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--fp-ink-200);
}

/* Each update is a paragraph */
.timeline > p {
  position: relative;
  margin: 0;
  padding: 14px 0 22px 44px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fp-ink-700);
}
.timeline > p:last-child { padding-bottom: 4px; }

/* Marker dot — sits on the line, in front of every update */
.timeline > p::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 21px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fp-ink-300);
  box-shadow: 0 0 0 4px var(--fp-paper);
}

/* The first <p> is the original report (no <em> marker). Mark it with
   the brand-purple anchor dot. */
.timeline > p:first-of-type::before {
  background: var(--fp-brand-500);
}

/* Subsequent updates start with <em>Marker</em> — colour-code the dot
   based on the marker word using cstate's :has() support. */
.timeline > p:has(em)::before { background: var(--fp-ink-400); }

/* Inline marker pill — restyles the <em>Identifierat</em> at the start
   of each update paragraph. Same look as the homepage incident-card body. */
.timeline > p em:first-child {
  display: inline-block;
  font-style: normal;
  font-family: var(--fp-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fp-ink-700);
  background: var(--fp-ink-100);
  padding: 3px 8px;
  border-radius: var(--fp-radius-sm);
  margin: 0 8px 0 0;
  vertical-align: 1px;
}

/* Marker-specific tints. Use word-based classes via :has() — supported
   in all modern evergreen browsers. */
.timeline > p:has(em:first-child) { color: var(--fp-ink-700); }

/* The em-dash that follows the <em> marker has no class to hook onto;
   we accept the visual "Identifierat — body" and leave it. */

/* Timestamp from {{< track >}} — pull right of its line as quiet metadata. */
.timeline .track-time {
  display: inline-block;
  font-family: var(--fp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fp-ink-500);
  margin-left: 8px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* For paragraphs that lead with the marker pill, push the timestamp
   to the right side of the row. */
.timeline > p:has(em:first-child) .track-time {
  float: right;
  margin-left: 12px;
}

/* The cstate template still emits a top-level <hr> between the article
   header and content — we hide all of those inside .timeline. */
.timeline hr.clean { display: none; }

/* Back-compat: cstate also emits the .faded class on timestamps for older
   shortcode versions; keep that styled too. */
.timeline .faded {
  color: var(--fp-ink-500);
  font-size: 12px;
  font-feature-settings: "tnum";
}

/* Responsive */
@media (max-width: 720px) {
  .incident-page { padding-top: 20px; }
  .incident-detail { padding: 22px 22px 0; border-radius: var(--fp-radius); }
  .incident-detail__title { font-size: clamp(22px, 6vw, 28px); }
  .incident-meta {
    grid-template-columns: 1fr;
    margin: 0 -22px;
  }
  .incident-meta__row {
    padding: 14px 22px;
    border-right: 0;
  }
  .timeline > p { padding: 12px 0 18px 38px; }
  .timeline > p:has(em:first-child) .track-time {
    float: none;
    display: block;
    margin: 4px 0 0 0;
  }
}