/* Incident log as a timeline (Jordan, 12 Nov 2026): the date on a left rail, each incident a card to its right with
   its title, a status pill (word and icon, never colour alone), then What happened, Effect and Fix. Newest first,
   by the date the fault ended. */
.pg .inc-rule { color: var(--ink-mute); margin: 0 0 var(--space-2); }
.pg .inc-summary { margin: 0 0 var(--space-4); font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent-deep); }

.inc-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.pg .inc-item { position: relative; max-width: none; }   /* list items elsewhere stop at 66ch */
.inc-item + .inc-item { margin-top: 20px; }
/* the cards run to the right edge of the page content, in line with the header (Jordan, 12 Nov 2026) */
.inc { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 32px; align-items: start; scroll-margin-top: 80px; }

/* the rail: a thin line through every date, a dot at each entry */
.inc-timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: calc(11rem + 15px); width: 2px; background: var(--line); }
.inc-date { position: relative; margin: 0; padding-top: 18px; text-align: right; }
.inc-date::after { content: ""; position: absolute; top: 22px; right: -22px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ground); border: 2px solid var(--accent); }
.inc-date .t { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; color: var(--accent-deep); }

.inc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile); padding: 18px 22px 20px; }
.inc-card h2 { font-size: 1.25rem; margin: 0 0 8px; }
.pg .inc-status { margin: 0 0 14px; }
.inc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; line-height: 1.4; border: 1px solid transparent; }
.inc-pill--fixed { background: var(--accent-soft); color: var(--accent-deep); border-color: #BCD8D2; }
.inc-pill--due { background: #FBEBD7; color: #6B4310; border-color: var(--warm-deep); }
.inc-ico { flex: none; }

/* three short labelled parts, the label above its text */
.inc-lines { margin: 0; display: grid; gap: 12px; }
.inc-lines dt { font-size: 0.82rem; font-weight: 700; color: var(--ink-mute); margin: 0 0 2px; }
.inc-lines dd { margin: 0; }
/* at desktop width the card stays wide and its text is set in two columns: What happened on the left, Effect and
   Fix on the right, so no line runs past about 75 characters (Jordan, 12 Nov 2026) */
@media (min-width: 1000px) {
  .inc-lines { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .inc-lines > div:first-child { grid-row: span 2; }
}

/* on a phone the date sits above its card, and the rail runs down the left edge */
@media (max-width: 640px) {
  .inc { grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding-left: 22px; }
  .inc-timeline::before { left: 5px; }
  .inc-date { text-align: left; padding-top: 0; }
  .inc-date::after { top: 4px; right: auto; left: -23px; }
  .inc-card { padding: 16px; }
}