/* Live coverage on the story page (includes/live.php). Monochrome with plum only for the live dot and flag, links and focus. */
.civilian-live-status { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin: 0 0 1.5rem; padding: 0 0 .75rem; border-bottom: 1px solid var(--wp--preset--color--rule, #e5e5e5); font-size: var(--wp--preset--font-size--small, .875rem); color: var(--wp--preset--color--muted, #5c5c5c); }
.civilian-live-status p { margin: 0; }
.civilian-live-status__flag { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-stretch: 85%; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink, #191919); }
.civilian-live-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--wp--preset--color--control, #767676); }
/* While live, the flag is reversed out of ink so it reads before the time beside it; the dot turns white inside it. */
.civilian-live[data-live-state="live"] .civilian-live-status__flag { padding: .2rem .55rem .2rem .5rem; border-radius: 2px; background: var(--wp--preset--color--ink, #191919); color: #fff; animation: civilian-live-breathe 2.5s ease-in-out 12; }
/* The flag breathes from ink to plum and back (user decision 2026-11-05, an approved exception to "plum is never a
   surface"), for 30 seconds, then rests on ink; live.js renews it for four breaths when a new update arrives. White on
   plum is 11.7:1. Motion pauses after 30 seconds, as WCAG 2.2.2 asks, and never runs with reduced motion. */
.civilian-live[data-live-state="live"] .civilian-live-status__flag.is-renewed { animation: civilian-live-breathe-again 2.5s ease-in-out 4; }
@keyframes civilian-live-breathe { 50% { background-color: var(--wp--preset--color--plum, #4d2f63); } }
@keyframes civilian-live-breathe-again { 50% { background-color: var(--wp--preset--color--plum, #4d2f63); } }
.civilian-live[data-live-state="live"] .civilian-live-dot { background: var(--wp--preset--color--plum, #4d2f63); animation: civilian-live-pulse 2s ease-in-out 15; }
.civilian-live[data-live-state="live"] .civilian-live-status__flag .civilian-live-dot { background: #fff; animation: none; } /* Only inside the reversed flag (which moves itself); the homepage strip keeps its plum dot, pulsing for 30 seconds. */
.civilian-live-status__jump { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; margin-block: -.75rem; font-weight: 700; color: var(--wp--preset--color--plum, #4d2f63); text-decoration: underline; text-decoration-color: var(--wp--preset--color--plum-tint, #9b8ba8); text-underline-offset: .2em; }
.civilian-live-status__jump:hover { text-decoration-color: currentColor; }
.civilian-live-status__jump[hidden] { display: none; }
@keyframes civilian-live-pulse { 50% { opacity: .25; } }

.civilian-live-h { margin: 0 0 .75rem; padding-top: .75rem; border-top: 2px solid var(--wp--preset--color--ink, #191919); font-size: .8125rem; font-weight: 800; font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--ink, #191919); }
/* Both start below an inset opening photo floated beside the introduction (2026-11-05: otherwise the heading sat beside
   it and the list dropped below). Clearing a float swallows a top margin, so the space above them is padding. */
.civilian-live-highlights, .civilian-live-feed { clear: both; }
.civilian-live-highlights { margin: 0 0 2.5rem; padding-top: 2rem; }
.civilian-live-highlights[hidden] + .civilian-live-feed { margin-top: 0; padding-top: 2rem; }

.civilian-live-highlights ol { list-style: none; margin: 0; padding: 0; }
.civilian-live-highlights.is-trimmed li:nth-last-child(n+5) { display: none; } /* The latest four; live.js offers the rest. */
.civilian-live-hl-more { display: block; min-height: 44px; margin: -.5rem 0 0; padding: 0; border: 0; border-bottom: 1px solid var(--wp--preset--color--rule, #e5e5e5); width: 100%; background: none; font: inherit; font-size: .9375rem; font-weight: 700; text-align: left; color: var(--wp--preset--color--ink, #191919); cursor: pointer; }
.civilian-live-hl-more:hover { color: var(--wp--preset--color--plum, #4d2f63); text-decoration: underline; }
.civilian-live-hl-more[hidden] { display: none; }
.civilian-live-highlights li { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--wp--preset--color--rule, #e5e5e5); font-size: 1rem; line-height: 1.45; }
.civilian-live-highlights a { font-weight: 800; font-stretch: 85%; color: var(--wp--preset--color--ink, #191919); text-decoration: none; }
.civilian-live-highlights a:hover { color: var(--wp--preset--color--plum, #4d2f63); text-decoration: underline; }
/* Highlights as a soft-grey box (user decision 2026-11-05: the summary must not look like the feed below it). The grey
   is painted inside the padding only, so the clear-safe space above stays white; the 2px ink rule tops the box. */
.civilian-live-highlights { background: var(--wp--preset--color--soft, #f5f5f5); background-clip: content-box; }
.civilian-live-highlights > .civilian-live-h { margin-bottom: 0; padding: .75rem 1.25rem .5rem; }
.civilian-live-highlights > .civilian-live-hl-more { margin: 0; padding-inline: 1.25rem; width: 100%; }
.civilian-live-highlights > ol { padding: 0 1.25rem .5rem; }
.civilian-live-highlights li:last-child { border-bottom: 0; }
@media (max-width: 39.99rem) {
  .civilian-live-highlights > .civilian-live-h, .civilian-live-highlights > .civilian-live-hl-more, .civilian-live-highlights > ol { padding-inline: 1rem; }
}
.civilian-live-feed { margin-top: 2rem; }
.civilian-live-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; padding: .75rem 0 .6rem; border-top: 2px solid var(--wp--preset--color--ink, #191919); border-bottom: 1px solid var(--wp--preset--color--rule, #e5e5e5); background: var(--wp--preset--color--paper, #fff); }
.civilian-live-bar .civilian-live-h { margin: 0; padding: 0; border: 0; }
.civilian-live-new { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1.1rem; border: 0; border-radius: 2px; background: var(--wp--preset--color--ink, #191919); color: #fff; font: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer; }
.civilian-live-new:hover { background: var(--wp--preset--color--plum, #4d2f63); }
.civilian-live-new[hidden] { display: none; }
.civilian-live-order { margin-left: auto; display: inline-flex; border: 1px solid var(--wp--preset--color--control, #767676); border-radius: 2px; }
.civilian-live-new:not([hidden]) + .civilian-live-order { margin-left: 0; }
.civilian-live-order[hidden] { display: none; }
.civilian-live-order button { min-height: 44px; padding: .4rem .8rem; border: 0; background: transparent; font: inherit; font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--muted, #5c5c5c); cursor: pointer; }
.civilian-live-order button + button { border-left: 1px solid var(--wp--preset--color--control, #767676); }
.civilian-live-order button[aria-pressed="true"] { background: var(--wp--preset--color--ink, #191919); color: #fff; }

.civilian-live-entry { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: .25rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--wp--preset--color--rule, #e5e5e5); scroll-margin-top: 5rem; transition: background-color 1.6s ease; }
.civilian-live-entry.is-new, .civilian-live-entry:target { background: var(--wp--preset--color--soft, #f5f5f5); }
.civilian-live-entry.is-new { transition: none; }
.civilian-live-entry__meta { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding-top: .15rem; }
.civilian-live-entry__time { font-weight: 800; font-stretch: 85%; font-size: 1.0625rem; color: var(--wp--preset--color--ink, #191919); text-decoration: none; }
.civilian-live-entry__time:hover { color: var(--wp--preset--color--plum, #4d2f63); text-decoration: underline; }
.civilian-live-entry__tag { font-size: .6875rem; font-weight: 700; font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted, #5c5c5c); }
.civilian-live-entry__body > p { margin: 0 0 .75rem; max-width: none; }
.civilian-live-entry__body > p:last-of-type { margin-bottom: 0; }
.civilian-live-entry__body > p::after { content: none !important; } /* No end mark inside updates. */
.civilian-live-entry__photo { margin: .75rem 0 0; }
.civilian-live-entry__photo img { display: block; width: 100%; height: auto; }
.civilian-live-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Copy link: a small icon beside the time, faded until the reader points at the update (always faint on touch). */
.civilian-live-entry__copy { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -.55rem 0 -.55rem -.85rem; padding: 0; border: 0; background: none; color: var(--wp--preset--color--muted, #5c5c5c); opacity: .45; cursor: pointer; transition: opacity .15s ease, color .15s ease; }
.civilian-live-entry__copy svg { width: 1rem; height: 1rem; }
.civilian-live-entry:hover .civilian-live-entry__copy, .civilian-live-entry:focus-within .civilian-live-entry__copy { opacity: 1; }
.civilian-live-entry__copy:hover { color: var(--wp--preset--color--plum, #4d2f63); }
.civilian-live-entry__copied { font-size: .75rem; color: var(--wp--preset--color--muted, #5c5c5c); }
.civilian-live-entry__copied:empty { display: none; }

.civilian-live-poll__q { margin: 0 0 .75rem; font-weight: 700; color: var(--wp--preset--color--ink, #191919); }
.civilian-live-poll__options { display: grid; gap: .5rem; }
.civilian-live-poll__options button { min-height: 48px; padding: .6rem 1rem; border: 1px solid var(--wp--preset--color--control, #767676); border-radius: 2px; background: #fff; font: inherit; font-weight: 600; color: var(--wp--preset--color--ink, #191919); text-align: left; cursor: pointer; }
.civilian-live-poll__options button:hover { border-color: var(--wp--preset--color--plum, #4d2f63); color: var(--wp--preset--color--plum, #4d2f63); background: var(--wp--preset--color--soft, #f5f5f5); }
.civilian-live-poll__options button:disabled { opacity: .6; cursor: progress; }
.civilian-live-poll__results { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.civilian-live-poll__results:focus { outline: none; }
.civilian-live-poll__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 1rem; color: var(--wp--preset--color--ink, #191919); }
.civilian-live-poll__pct { font-weight: 800; font-variant-numeric: tabular-nums; }
.civilian-live-poll__mine { margin-left: .4rem; font-size: .6875rem; font-weight: 700; font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted, #5c5c5c); }
.civilian-live-poll__bar { height: .5rem; margin-top: .3rem; background: var(--wp--preset--color--soft, #f5f5f5); }
.civilian-live-poll__bar span { display: block; height: 100%; background: var(--wp--preset--color--control, #767676); transition: width .6s ease; }
.civilian-live-poll .is-mine .civilian-live-poll__bar span { background: var(--wp--preset--color--ink, #191919); }
.civilian-live-poll__note { margin: .75rem 0 0; font-size: .875rem; color: var(--wp--preset--color--muted, #5c5c5c); }
.civilian-live-poll__status { margin: 0; font-size: .875rem; color: var(--wp--preset--color--ink, #191919); }
.civilian-live-poll__status:empty { display: none; }

.civilian-live-new:focus-visible, .civilian-live-order button:focus-visible, .civilian-live-entry__copy:focus-visible, .civilian-live-entry__time:focus-visible, .civilian-live-poll__options button:focus-visible, .civilian-live-highlights a:focus-visible, .civilian-live-hl-more:focus-visible, .civilian-live-status__jump:focus-visible { outline: 3px solid var(--wp--preset--color--plum, #4d2f63); outline-offset: 3px; }

@media (max-width: 40rem) {
	.civilian-live-wide { display: none; }
	.civilian-live-bar .civilian-live-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.civilian-live-order { margin-left: 0; }
	.civilian-live-new { order: 2; }
	.civilian-live-entry, .civilian-live-highlights li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
	.civilian-live-entry__meta { flex-direction: row; align-items: center; gap: .6rem; }
	.civilian-live-entry__copy { margin: -.6rem -.6rem -.6rem -.4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.civilian-live[data-live-state="live"] .civilian-live-dot, .civilian-live[data-live-state="live"] .civilian-live-status__flag { animation: none; }
	.civilian-live-entry, .civilian-live-poll__bar span, .civilian-live-entry__copy { transition: none; }
}

/* Homepage "Live now" strip. */
.civilian-live-now ul { list-style: none; margin: 0 0 var(--wp--preset--spacing--40, 1.5rem); padding: 0; border-top: 2px solid var(--wp--preset--color--ink, #191919); border-bottom: 1px solid var(--wp--preset--color--rule, #e5e5e5); }
.civilian-live-now li + li { border-top: 1px solid var(--wp--preset--color--rule, #e5e5e5); }
.civilian-live-now a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; min-height: 44px; padding: .7rem 0; color: var(--wp--preset--color--ink, #191919); text-decoration: none; }
.civilian-live-now a:hover .civilian-live-now__title { color: var(--wp--preset--color--plum, #4d2f63); text-decoration: underline; }
.civilian-live-now a:focus-visible { outline: 3px solid var(--wp--preset--color--plum, #4d2f63); outline-offset: 3px; }
.civilian-live-now__flag { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-stretch: 85%; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; }
.civilian-live-now__title { font-weight: 800; font-stretch: 85%; font-size: clamp(1.1875rem, 1vw + 1rem, 1.375rem); line-height: 1.2; }
.civilian-live-now__time { font-size: var(--wp--preset--font-size--small, .875rem); color: var(--wp--preset--color--muted, #5c5c5c); }

/* A preview card for another Civilian story an update links to. */
.civilian-live-card { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; align-items: start; margin: .9rem 0 0; padding: .75rem; border: 1px solid var(--wp--preset--color--rule, #e5e5e5); color: var(--wp--preset--color--ink, #191919); text-decoration: none; }
.civilian-live-card--text { grid-template-columns: minmax(0, 1fr); }
.civilian-live-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.civilian-live-card__text { display: flex; flex-direction: column; gap: .3rem; }
.civilian-live-card__kicker { font-size: .6875rem; font-weight: 700; font-stretch: 85%; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted, #5c5c5c); }
.civilian-live-card__title { font-weight: 800; font-stretch: 85%; font-size: 1.0625rem; line-height: 1.25; }
.civilian-live-card__deck { font-size: .9375rem; line-height: 1.45; color: var(--wp--preset--color--muted, #5c5c5c); }
.civilian-live-card:hover { border-color: var(--wp--preset--color--control, #767676); }
.civilian-live-card:hover .civilian-live-card__title { color: var(--wp--preset--color--plum, #4d2f63); text-decoration: underline; }
.civilian-live-card:focus-visible { outline: 3px solid var(--wp--preset--color--plum, #4d2f63); outline-offset: 3px; }
@media (max-width: 40rem) { .civilian-live-card { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; } .civilian-live-card--text { grid-template-columns: minmax(0, 1fr); } }