/* NW Event Manager */

.nw-em-archive-header .nw-em-page-title {
	margin: 0 0 0.75rem;
}

.nw-em-view-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.nw-em-view-nav .nw-em-nav-link {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: 2px;
}

.nw-em-view-nav .nw-em-nav-link.active {
	font-weight: 600;
	text-decoration: underline;
}

.nw-em-filters .form-control,
.nw-em-filters select {
	width: 100%;
}

.nw-em-event-card {
	padding: 1rem 0;
	border-bottom: 1px solid #ddd;
}

.nw-em-event-card:last-child {
	border-bottom: 0;
}

.nw-em-card-title {
	margin: 0 0 0.35rem;
	font-size: 1.125rem;
}

.nw-em-card-date {
	margin: 0 0 0.5rem;
	color: #555;
	font-size: 0.95rem;
}

.nw-em-read-more {
	font-weight: 600;
}

.nw-em-category-badge {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 2px;
	font-size: 0.875rem;
	margin: 0 0.35rem 0.35rem 0;
	background: var(--nw-em-cat-bg, #1a4d8c);
	color: var(--nw-em-cat-text, #fff);
	text-decoration: none;
}

.nw-em-category-badge:hover,
.nw-em-category-badge:focus {
	opacity: 0.9;
	text-decoration: underline;
}

.nw-em-calendar-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.nw-em-calendar-table th,
.nw-em-calendar-table td {
	vertical-align: top;
	padding: 0.5rem;
	border: 1px solid #ddd;
}

.nw-em-cal-day-num {
	font-weight: 600;
	display: block;
	margin-bottom: 0.25rem;
}

.nw-em-cal-today {
	background: #f5f5f5;
}

.nw-em-cal-event-link {
	display: block;
	font-size: 0.85rem;
	line-height: 1.35;
	margin-bottom: 0.2rem;
	word-break: break-word;
}

.nw-em-cal-empty {
	background: #fafafa;
}

.nw-em-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nw-em-dl dt {
	font-weight: 600;
	margin-top: 0.75rem;
}

.nw-em-dl dd {
	margin: 0.15rem 0 0;
}

.nw-em-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nw-em-skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 0.5rem 1rem;
	background: #111;
	color: #fff;
	display: inline-block;
}

.nw-em-event-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.nw-em-osm-map iframe {
	width: 100%;
	border: 1px solid #ddd;
}

.nw-em-pagination .page-numbers {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	margin-right: 0.25rem;
}

@media (max-width: 767px) {
	.nw-em-calendar-table {
		font-size: 0.8rem;
	}
}

/* Single event */

.nw-em-single {
	padding: 1.5rem 0 3rem;
}

.nw-em-single-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1rem;
}

.nw-em-back-link {
	margin: 0 0 1.25rem;
}

.nw-em-back-link a {
	text-decoration: none;
}

.nw-em-back-link a:hover,
.nw-em-back-link a:focus {
	text-decoration: underline;
}

.nw-em-event-header {
	margin-bottom: 1.5rem;
}

.nw-em-event-title {
	margin: 0.5rem 0 0.75rem;
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	line-height: 1.2;
}

.nw-em-event-datetime {
	margin: 0.5rem 0 0;
}

.nw-em-event-datetime strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.nw-em-event-recurrence {
	margin: 0.35rem 0 0;
	color: #555;
	font-size: 0.95rem;
}

.nw-em-event-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 2rem;
	align-items: start;
}

.nw-em-event-main {
	min-width: 0;
}

.nw-em-featured-image {
	margin: 0 0 1.5rem;
}

.nw-em-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.nw-em-event-content {
	line-height: 1.65;
}

.nw-em-event-content > :first-child {
	margin-top: 0;
}

.nw-em-event-content p,
.nw-em-event-content ul,
.nw-em-event-content ol {
	margin-bottom: 1rem;
}

.nw-em-event-content h2,
.nw-em-event-content h3,
.nw-em-event-content h4 {
	margin: 1.5rem 0 0.75rem;
	line-height: 1.3;
}

.nw-em-section {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e0e0e0;
}

.nw-em-section-title {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
}

.nw-em-venue-details {
	font-style: normal;
	line-height: 1.6;
}

.nw-em-venue-details a {
	word-break: break-word;
}

.nw-em-organiser-details strong {
	display: block;
	margin-bottom: 0.35rem;
}

.nw-em-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nw-em-contact-list li {
	margin: 0.35rem 0;
}

.nw-em-attachment-list {
	margin: 0;
	padding-left: 1.25rem;
}

.nw-em-attachment-list li {
	margin: 0.35rem 0;
}

.nw-em-event-sidebar {
	position: sticky;
	top: 1.5rem;
}

.nw-em-sidebar-card {
	background: #f7f7f7;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 1rem 1.15rem;
	margin-bottom: 1rem;
}

.nw-em-sidebar-title {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.nw-em-sidebar-datetime,
.nw-em-sidebar-venue,
.nw-em-sidebar-recurrence {
	margin: 0;
	line-height: 1.55;
}

.nw-em-sidebar-recurrence {
	margin-top: 0.35rem;
	color: #555;
	font-size: 0.9rem;
}

.nw-em-sidebar-actions {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.nw-em-btn {
	display: inline-block;
	padding: 0.6rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 3px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.nw-em-btn:hover,
.nw-em-btn:focus {
	opacity: 0.9;
	text-decoration: none;
}

.nw-em-btn-primary {
	background: #1a4d8c;
	border-color: #1a4d8c;
	color: #fff;
}

.nw-em-btn-primary:hover,
.nw-em-btn-primary:focus,
.nw-em-btn-primary:focus-visible {
	background: #153d70;
	border-color: #153d70;
	color: #fff;
	opacity: 1;
}

.nw-em-btn-secondary {
	background: #fff;
	border-color: #1a4d8c;
	color: #1a4d8c;
}

.nw-em-event-footer-mobile {
	display: none;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e0e0e0;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 900px) {
	.nw-em-event-grid {
		grid-template-columns: 1fr;
	}

	.nw-em-event-sidebar {
		display: none;
	}

	.nw-em-event-footer-mobile {
		display: flex;
	}
}

@media (max-width: 767px) {
	.nw-em-btn {
		width: 100%;
	}
}

/* Cancelled meeting notice (phase 1 item C).
   Colour is a reinforcement, never the signal: the word "cancelled" is in the
   text, and the left bar gives it weight in a monochrome print-out too. */
.nw-em-cancelled-notice {
	display: block;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #a6262b;
	border-left-width: 5px;
	border-radius: 3px;
	background: #fbeeee;
	color: #5c1417;
	line-height: 1.5;
}

.nw-em-cancelled-notice strong {
	display: block;
	font-size: 1.05em;
}

.nw-em-cancelled-reason,
.nw-em-cancelled-date {
	display: block;
	margin-top: 0.3rem;
}

.nw-em-cancelled-date {
	font-size: 0.9em;
	opacity: 0.85;
}

@media (prefers-color-scheme: dark) {
	.nw-em-cancelled-notice {
		background: #2c1719;
		color: #f4d8d8;
		border-color: #c9575b;
	}
}

/* Moved meeting notice (phase 1 item C). Amber rather than red: the meeting is
   still happening, so it must not read at a glance as a cancellation. */
.nw-em-moved-notice {
	display: block;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid #8a5a00;
	border-left-width: 5px;
	border-radius: 3px;
	background: #fcf4e6;
	color: #5a3b00;
	line-height: 1.5;
}

.nw-em-moved-notice strong { display: block; font-size: 1.05em; }
.nw-em-moved-from { display: block; margin-top: 0.3rem; }

@media (prefers-color-scheme: dark) {
	.nw-em-moved-notice {
		background: #2a2013;
		color: #f0dcb8;
		border-color: #b98a35;
	}
}

/* =========================================================================
   THE PUBLIC CALENDAR — phase 3, mockup screen 1

   FOUR COLOURS ARE THE THEME'S TO SET (14 Aug 2026)

   The calendar's chrome — date tiles, buttons, the current filter chip, the
   band's edge, today's ring — was a fixed blue, which looked imported on a
   site running the claret or forest scheme. It now reads four custom
   properties, each with the old blue as its fallback so the plugin still
   looks deliberate standing alone on a stock theme:

     --nw-em-accent        the solid fill
     --nw-em-accent-hover  its darker state
     --nw-em-accent-fg     text ON the fill — must be supplied WITH the fill,
                           since a theme picking a dark accent and leaving the
                           foreground behind is how contrast failures happen
     --nw-em-accent-tint   the light wash (quiet button hover, today's cell)

   NetWise-V3 maps these onto its own scheme tokens in inc/styles.php, where
   every pairing is checked against the theme's WCAG helpers.

   DELIBERATELY NOT TOKENISED: the type pills (meeting / community), the
   cancelled red and the agenda green. Those are semantic — they have to stay
   distinguishable FROM EACH OTHER and mean the same thing on every site, so
   letting a council's colour scheme repaint them would break the one job they
   do. A claret site still gets a red cancellation notice.
   =========================================================================

   Plain on purpose. The architecture decision splits this as "plugin owns
   data, theme owns presentation": what follows is a clean, legible fallback
   so the calendar is presentable on a stock theme, and the V3 theme will skin
   it later. Colours are literal rather than themed for the same reason — the
   plugin has no access to the theme's --nw-* tokens and inventing its own
   palette here would fight whatever it is dropped into.
   ====================================================================== */

/* The plugin's OWN visually-hidden class, not the theme's screen-reader-text.
   That class belongs to whatever theme happens to be active, and if a theme
   does not define it these labels — "Tuesday 18 August 2026" inside a date
   tile — would render VISIBLY and wreck the layout. An accessibility aid that
   depends on somebody else's stylesheet is not an aid. */
.nw-em-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* WIDTH IS THE THEME'S TO SET (14 Aug 2026)
 *
 * This was a hard 60rem, and on the live dev site the calendar sat visibly
 * indented from the page title and breadcrumb above it. The cause is that the
 * V3 theme's container is Bootstrap's RESPONSIVE one — 960px below a 1200px
 * viewport, 1140px above it — while 60rem is 960px flat. Below 1200px the two
 * happen to be identical, which is why it looked perfectly aligned on a
 * narrower window and wrong on a wide one. Coincidence, not correctness.
 *
 * The plugin cannot know a theme's container width, so it stops guessing: the
 * width is a custom property with a readable default for standing alone on a
 * stock theme, and the theme sets it to match its own container. Same split as
 * everything else here — plugin owns the data, theme owns the presentation.
 *
 * NetWise-V3 sets it in inc/styles.php. */
.nw-em-calendar__inner {
	max-width: var(--nw-em-width, 60rem);
	margin: 0 auto;
	padding: 1.5rem var(--nw-em-gutter, 1rem) 3rem;
}

.nw-em-calendar__title { margin: 0 0 1rem; }
.nw-em-calendar__lede { margin: 0 0 1.5rem; }

/* --- Next meeting band (item B) --- */

.nw-em-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid #c9cfd6;
	border-left: 5px solid var(--nw-em-accent, #1a4d8c);
	border-radius: 4px;
	background: #f6f8fa;
}

.nw-em-band.is-cancelled { border-left-color: #a3272c; }

.nw-em-band__tile,
.nw-em-row__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 4.25rem;
	min-height: 4.25rem;
	padding: 0.35rem;
	border-radius: 4px;
	background: var(--nw-em-accent, #1a4d8c);
	color: var(--nw-em-accent-fg, #fff);
	line-height: 1.1;
	text-align: center;
}

.nw-em-band__tile b,
.nw-em-row__tile b { font-size: 1.6em; font-weight: 700; }

.nw-em-band__tile span,
.nw-em-row__tile span { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.04em; }

.nw-em-band__body { flex: 1 1 16rem; }
.nw-em-band__title { margin: 0 0 0.3rem; font-size: 1.25em; }
.nw-em-band__meta { margin: 0; color: #4a5560; }
.nw-em-band__notice { margin: 0.5rem 0 0; color: #7a1f23; }
.nw-em-band__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --- Toolbar: search and chips (item A) --- */

.nw-em-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0.9rem 0;
	border-top: 1px solid #dfe3e8;
	border-bottom: 1px solid #dfe3e8;
}

.nw-em-toolbar__search { display: flex; gap: 0.4rem; flex: 1 1 16rem; }
.nw-em-toolbar__search input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 0.4rem 0.6rem; }

.nw-em-chips, .nw-em-years { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.nw-em-chip {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border: 1px solid #b9c1c9;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	font-size: 0.9em;
}

.nw-em-chip:hover, .nw-em-chip:focus-visible { border-color: var(--nw-em-accent, #1a4d8c); text-decoration: underline; }

/* The current chip is marked by weight and fill as well as colour, so it does
   not depend on hue alone — and it carries aria-current in the markup. */
.nw-em-chip.is-current {
	background: var(--nw-em-accent, #1a4d8c);
	border-color: var(--nw-em-accent, #1a4d8c);
	color: var(--nw-em-accent-fg, #fff);
	font-weight: 600;
}

.nw-em-years { margin: 0 0 1.5rem; }

/* --- Month groups --- */

.nw-em-month { margin: 0 0 2rem; }

.nw-em-month__heading {
	margin: 0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid #dfe3e8;
	font-size: 1.15em;
}

/* --- A row (items C, D, I) --- */

.nw-em-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid #eceff2;
}

.nw-em-row:last-child { border-bottom: 0; }
.nw-em-row__body { flex: 1 1 16rem; min-width: 0; }
.nw-em-row__title { margin: 0 0 0.35rem; font-size: 1.05em; }
.nw-em-row__title a { text-decoration: none; }
.nw-em-row__title a:hover, .nw-em-row__title a:focus-visible { text-decoration: underline; }

.nw-em-row__photo {
	flex: 0 0 auto;
	width: 5.5rem;
	height: 4.25rem;
	object-fit: cover;
	border-radius: 4px;
}

.nw-em-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	color: #4a5560;
	font-size: 0.92em;
}

.nw-em-row__notice { margin: 0.4rem 0 0; font-size: 0.92em; color: #7a1f23; }
.nw-em-row__notice--quiet { color: #4a5560; }
.nw-em-row__acts { display: flex; gap: 0.4rem; flex: 0 0 auto; }

.nw-em-row__papers { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.92em; }

/* Cancelled: struck through, red tile, and the word "Cancelled" in a pill —
   three signals, only one of which is colour (phase 1's rule, and WCAG 1.4.1).
   The strike-through is on the TITLE only. Striking the reason through too
   would make the one sentence a resident most needs to read the hardest one
   on the row. */
.nw-em-row.is-cancelled .nw-em-row__title a { text-decoration: line-through; }
.nw-em-row.is-cancelled .nw-em-row__tile { background: #a3272c; }

/* --- Pills --- */

.nw-em-pill {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
}

.nw-em-pill--meeting   { background: #dbe7f2; color: #123a68; }
.nw-em-pill--community { background: #f2e8d2; color: #5c4614; }
.nw-em-pill--cancelled { background: #f6dcda; color: #7a1f23; }
.nw-em-pill--ok        { background: #d9ebdc; color: #1d4d2b; }
.nw-em-pill--grey      { background: #e7eaee; color: #3f4a55; }

/* --- Buttons ---

   SCOPED to the three pages that use the BEM modifiers, because .nw-em-btn was
   already taken.

   The scope list has to include every page that uses these classes, and
   forgetting one is silent: on 14 Aug the single event page's "Add this
   meeting" rendered as plain centred link text, because phase 4 built that page
   with .nw-em-btn while the scope still only named .nw-em-calendar and
   .nw-em-band. It matched the OLD unscoped .nw-em-btn — padding and a
   transparent border, no fill, no colour — and looked like a mistake rather
   than a button. Add the page here when adding a page.

   Added .nw-em-papers on 14 Aug (phase 5) BEFORE writing that page's styles
   rather than after finding the same fault a third time.

   The original reason for scoping at all: The single event page has used
   it since before this phase, paired with .nw-em-btn-primary and
   .nw-em-btn-secondary, and the secondary one is deliberately white with a blue
   border. An unscoped rule here would sit LATER in the file at the same
   specificity and win — repainting that button solid blue on a page this phase
   is not supposed to touch.

   Scoping to the calendar pages leaves the single event page exactly as it was
   and lets both live in one stylesheet. Note the different naming too: the old
   ones are .nw-em-btn-primary (single dash), these are .nw-em-btn--quiet
   (BEM). Worth not "tidying" one into the other. */

.nw-em-calendar .nw-em-btn,
.nw-em-band .nw-em-btn,
.nw-em-single .nw-em-btn,
.nw-em-papers .nw-em-btn {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--nw-em-accent, #1a4d8c);
	border-radius: 3px;
	background: var(--nw-em-accent, #1a4d8c);
	color: var(--nw-em-accent-fg, #fff);
	text-decoration: none;
	font-size: 0.92em;
	font-weight: 400;
	white-space: nowrap;
}

.nw-em-calendar .nw-em-btn:hover, .nw-em-calendar .nw-em-btn:focus-visible,
.nw-em-band .nw-em-btn:hover, .nw-em-band .nw-em-btn:focus-visible,
.nw-em-single .nw-em-btn:hover, .nw-em-single .nw-em-btn:focus-visible,
.nw-em-papers .nw-em-btn:hover, .nw-em-papers .nw-em-btn:focus-visible { background: var(--nw-em-accent-hover, #143c6e); border-color: var(--nw-em-accent-hover, #143c6e); color: var(--nw-em-accent-fg, #fff); text-decoration: underline; opacity: 1; }
.nw-em-calendar .nw-em-btn--quiet, .nw-em-calendar .nw-em-btn--ghost,
.nw-em-band .nw-em-btn--quiet, .nw-em-band .nw-em-btn--ghost,
.nw-em-single .nw-em-btn--quiet, .nw-em-single .nw-em-btn--ghost { background: transparent; color: inherit; }
.nw-em-calendar .nw-em-btn--quiet:hover, .nw-em-calendar .nw-em-btn--quiet:focus-visible,
.nw-em-calendar .nw-em-btn--ghost:hover, .nw-em-calendar .nw-em-btn--ghost:focus-visible,
.nw-em-band .nw-em-btn--quiet:hover, .nw-em-band .nw-em-btn--ghost:hover { background: var(--nw-em-accent-tint, #e8eef5); color: inherit; }
.nw-em-calendar .nw-em-btn--small, .nw-em-band .nw-em-btn--small, .nw-em-single .nw-em-btn--small, .nw-em-papers .nw-em-btn--small { padding: 0.25rem 0.7rem; font-size: 0.88em; }

/* --- Empty states (item K) --- */

.nw-em-empty { padding: 1.5rem 0; }

.nw-em-empty--diary {
	padding: 2.5rem 1.25rem;
	border: 1px solid #dfe3e8;
	border-radius: 4px;
	background: #f8f9fa;
	text-align: center;
}

.nw-em-empty--diary h2 { margin: 0 0 0.5rem; font-size: 1.2em; }
.nw-em-empty--diary p { margin: 0 0 0.5rem; color: #4a5560; }

.nw-em-calendar__foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #dfe3e8; color: #4a5560; }

/* Focus must stay visible on every control these pages add, and WCAG 2.2 SC
   1.4.11 wants the indicator ITSELF at 3:1 against whatever is behind it.

   This was a gold #b8860b, and on the month grid it failed exactly that:
   2.94:1 over a today cell, 2.51–2.67:1 where the ring met a coloured entry.
   It passed only on plain white, and only at 3.25:1. A focus ring tuned to one
   background and failing on the others is the sort of thing that never shows up
   until somebody keyboards through the grid.

   Near-black measures 15:1 or better against every surface on these pages —
   white, the today tint, the header fill, and all three entry colours — so it
   works wherever a control happens to sit. Dark mode inverts to white for the
   same reason (11:1 or better on every dark surface). Measured, not eyeballed;
   change either value and re-measure both modes. */
.nw-em-calendar a:focus-visible,
.nw-em-calendar button:focus-visible,
.nw-em-calendar input:focus-visible,
.nw-em-calendar summary:focus-visible,
.nw-em-band a:focus-visible {
	outline: 3px solid #0b0c0c;
	outline-offset: 2px;
}

@media (max-width: 40rem) {
	.nw-em-row__acts { flex-basis: 100%; }
	.nw-em-band__acts { flex-basis: 100%; }
}

@media (prefers-color-scheme: dark) {
	.nw-em-band { background: #1c2126; border-color: #39414a; }
	.nw-em-toolbar { border-color: #39414a; }
	.nw-em-month__heading { border-color: #39414a; }
	.nw-em-row { border-color: #2b3238; }
	.nw-em-band__meta, .nw-em-row__meta, .nw-em-calendar__foot, .nw-em-empty--diary p { color: #b6bfc8; }
	.nw-em-chip { background: #1c2126; border-color: #4a545e; }
	.nw-em-chip.is-current { background: var(--nw-em-accent-hover, #4f8fd6); border-color: var(--nw-em-accent-hover, #4f8fd6); color: var(--nw-em-accent-fg, #10151a); }
	.nw-em-band__tile, .nw-em-row__tile { background: var(--nw-em-accent, #2f6fb5); }
	/* Scoped for the same reason as the light-mode rules above — the single
	   event page's buttons are not ours to repaint. */
	.nw-em-calendar .nw-em-btn, .nw-em-band .nw-em-btn, .nw-em-single .nw-em-btn, .nw-em-papers .nw-em-btn { background: var(--nw-em-accent, #2f6fb5); border-color: var(--nw-em-accent, #2f6fb5); }
	.nw-em-calendar .nw-em-btn:hover, .nw-em-calendar .nw-em-btn:focus-visible,
	.nw-em-band .nw-em-btn:hover, .nw-em-band .nw-em-btn:focus-visible { background: var(--nw-em-accent-hover, #4f8fd6); border-color: var(--nw-em-accent-hover, #4f8fd6); }
	.nw-em-calendar .nw-em-btn--quiet, .nw-em-calendar .nw-em-btn--ghost,
	.nw-em-band .nw-em-btn--quiet, .nw-em-band .nw-em-btn--ghost { background: transparent; }
	.nw-em-calendar .nw-em-btn--quiet:hover, .nw-em-calendar .nw-em-btn--ghost:hover,
	.nw-em-band .nw-em-btn--quiet:hover, .nw-em-band .nw-em-btn--ghost:hover { background: #253038; }
	.nw-em-empty--diary { background: #1c2126; border-color: #39414a; }
	.nw-em-pill--meeting   { background: #1e3550; color: #cfe2f7; }
	.nw-em-pill--community { background: #453a1e; color: #f0e0b8; }
	.nw-em-pill--cancelled { background: #4a2225; color: #f6cfcf; }
	.nw-em-pill--ok        { background: #1f3b28; color: #cfe8d6; }
	.nw-em-pill--grey      { background: #2b3238; color: #cdd5dd; }
	.nw-em-row__notice { color: #f0b6b6; }
	.nw-em-row__notice--quiet, .nw-em-band__notice { color: #b6bfc8; }
	.nw-em-band__notice { color: #f0b6b6; }
}

/* --- Subscribe menu (item H) --- */

.nw-em-subscribe { position: relative; }

.nw-em-subscribe > summary {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border: 1px solid #b9c1c9;
	border-radius: 999px;
	background: #fff;
	font-size: 0.9em;
	cursor: pointer;
	list-style: none;
}

.nw-em-subscribe > summary::-webkit-details-marker { display: none; }
.nw-em-subscribe > summary::after { content: " \25BE"; }
.nw-em-subscribe[open] > summary { border-color: var(--nw-em-accent, #1a4d8c); }

.nw-em-subscribe__panel {
	position: absolute;
	z-index: 20;
	right: 0;
	min-width: 17rem;
	margin-top: 0.4rem;
	padding: 0.85rem 1rem;
	border: 1px solid #b9c1c9;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.nw-em-subscribe__help { margin: 0 0 0.6rem; font-size: 0.85em; color: #4a5560; }
.nw-em-subscribe__panel ul { margin: 0; padding: 0; list-style: none; }
.nw-em-subscribe__panel li + li { margin-top: 0.35rem; }

/* On a narrow screen an absolutely-positioned panel can hang off the edge, so
   it becomes part of the flow instead. */
@media (max-width: 40rem) {
	.nw-em-subscribe { flex-basis: 100%; }
	.nw-em-subscribe__panel { position: static; min-width: 0; box-shadow: none; }
}

@media (prefers-color-scheme: dark) {
	.nw-em-subscribe > summary,
	.nw-em-subscribe__panel { background: #1c2126; border-color: #4a545e; }
	.nw-em-subscribe__help { color: #b6bfc8; }
}

/* -------------------------------------------------------------------------
   Heading sizes, scoped so a theme's element selectors cannot win
   -------------------------------------------------------------------------

   The V3 theme styles headings with element selectors — .site-main h3 sets
   14px — and an element selector (0,1,1) beats a bare .nw-em-row__title
   (0,1,0). Every heading below was silently rendering at the theme's size
   instead of the one set above: row titles came out at 14px, smaller than the
   body text under them, so the most important word in each row was the
   quietest thing on it.

   Nothing warns you. The rule is simply absent from the computed style, which
   is exactly how this bit the members archive — see the theme's CLAUDE.md,
   "Two CSS traps, both of which fail silently". The fix there was the fix
   here: add a scope so specificity wins, rather than reaching for !important.

   .nw-em-band is scoped on itself as well as under the calendar, because the
   band is also a shortcode and a block and can appear on any page.
   ---------------------------------------------------------------------- */

/* em, not rem, throughout this component — and that is the second half of the
   same lesson. rem resolves against the ROOT (16px), so on a theme that sets a
   larger body size the whole calendar rendered proportionally tiny beside it.
   Twenty Twenty-Five sets 22px body text via theme.json, which left row titles
   at 16.8px: the most important words in each row came out SMALLER than the
   meta line underneath them. em inherits the host theme's size, so the
   component sits at the same scale as whatever it is dropped into. On a 16px
   theme like NetWise-V3 this is arithmetically identical to what it replaced.

   Weights are stated rather than inherited for the same reason. These are
   headings, and a theme is entitled to render headings at weight 400 —
   Twenty Twenty-Five does — which left nothing at all distinguishing a row
   title from body copy. Colour is deliberately NOT stated: link colour is the
   host theme's business, and matching it is what makes the calendar look like
   part of the site rather than a panel bolted onto it. */

.nw-em-calendar .nw-em-row__title { font-size: 1.05em; line-height: 1.35; font-weight: 700; }
.nw-em-calendar .nw-em-month__heading { font-size: 1.3em; font-weight: 700; }
.nw-em-calendar .nw-em-empty--diary h2 { font-size: 1.2em; font-weight: 700; }
.nw-em-band .nw-em-band__title { font-size: 1.25em; line-height: 1.35; font-weight: 700; }
.nw-em-calendar .nw-em-calendar__title { font-size: 1.9em; font-weight: 700; }

/* A row title has to read as a link on a theme that does not colour or
   underline its own. Weight alone is a heading, not a link. */
.nw-em-calendar .nw-em-row__title a:hover,
.nw-em-calendar .nw-em-row__title a:focus-visible { text-decoration: underline; }

/* Same class of collision on the tile and the pills: a theme setting a size on
   b / strong / span inside .site-main would otherwise reshape them. */
.nw-em-calendar .nw-em-row__tile b,
.nw-em-band .nw-em-band__tile b { font-size: 1.6em; }
.nw-em-calendar .nw-em-row__tile span,
.nw-em-band .nw-em-band__tile span { font-size: 0.8em; }

/* =========================================================================
   MONTH VIEW — phase 3, mockup screen 2
   ====================================================================== */

.nw-em-monthnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.nw-em-monthnav__today { margin: 0 0 0 auto; color: #4a5560; font-size: 0.9em; }
.nw-em-calendar .nw-em-monthnav__current { margin: 0; font-size: 1.3em; }

.nw-em-grid {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.nw-em-grid th {
	padding: 0.4rem 0.5rem;
	border: 1px solid #dfe3e8;
	background: #f6f8fa;
	font-size: 0.85em;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.nw-em-grid__cell {
	height: 6.5rem;
	padding: 0.35rem;
	border: 1px solid #dfe3e8;
	vertical-align: top;
}

.nw-em-grid__cell.is-outside { background: #fafbfc; }
/* The neighbouring months' day numbers were #99a4ae, which is 2.45:1 on the
   cell behind them — a real 1.4.3 failure. They are not decorative: they say
   what date the cell is. Darkened until they pass at 4.9:1, which still reads
   as clearly secondary to the current month. */
.nw-em-grid__cell.is-outside .nw-em-grid__num { color: #64707a; }

/* Today is marked by a ring and a heavier number as well as a tint, so it does
   not rely on colour alone — and the cell carries aria-current="date". */
.nw-em-grid__cell.is-today { outline: 2px solid var(--nw-em-accent, #1a4d8c); outline-offset: -2px; background: var(--nw-em-accent-tint, #eef4fa); }
.nw-em-grid__cell.is-today .nw-em-grid__num { font-weight: 700; }

.nw-em-grid__num { display: block; margin-bottom: 0.25rem; font-size: 0.85em; color: #4a5560; }

.nw-em-grid__event {
	display: block;
	margin-bottom: 0.2rem;
	padding: 0.15rem 0.35rem;
	border-radius: 3px;
	font-size: 0.78em;
	line-height: 1.3;
	text-decoration: none;
	color: inherit;
	overflow-wrap: anywhere;
}

.nw-em-grid__event:hover, .nw-em-grid__event:focus-visible { text-decoration: underline; }
.nw-em-grid__time { font-weight: 600; margin-right: 0.2rem; }

.nw-em-grid__event--meeting   { background: #dbe7f2; color: #123a68; }
.nw-em-grid__event--community { background: #f2e8d2; color: #5c4614; }
.nw-em-grid__event--cancelled { background: #f6dcda; color: #7a1f23; }
.nw-em-grid__event--cancelled .nw-em-grid__name { text-decoration: line-through; }

.nw-em-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0.9rem 0 0;
	font-size: 0.85em;
	color: #4a5560;
}

.nw-em-legend__key {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	margin-right: 0.4rem;
	border-radius: 2px;
	vertical-align: -1px;
}

.nw-em-legend__key--meeting   { background: #dbe7f2; }
.nw-em-legend__key--community { background: #f2e8d2; }
.nw-em-legend__key--cancelled { background: #f6dcda; }

/* The mobile swap (item E). display:none on the hidden half takes it out of the
   accessibility tree as well as off the screen, so a screen reader gets one
   calendar rather than the same month twice. */
.nw-em-month-list { display: none; }

@media (max-width: 46rem) {
	.nw-em-grid-wrap { display: none; }
	.nw-em-month-list { display: block; }
}

@media (prefers-color-scheme: dark) {
	.nw-em-grid th { background: #1c2126; border-color: #39414a; }
	.nw-em-grid__cell { border-color: #39414a; }
	.nw-em-grid__cell.is-outside { background: #171b1f; }
	.nw-em-grid__cell.is-outside .nw-em-grid__num { color: #7c8791; }
	.nw-em-grid__cell.is-today { background: #1b2938; outline-color: var(--nw-em-accent-hover, #4f8fd6); }
	.nw-em-grid__num, .nw-em-legend, .nw-em-monthnav__today { color: #b6bfc8; }
	.nw-em-grid__event--meeting   { background: #1e3550; color: #cfe2f7; }
	.nw-em-grid__event--community { background: #453a1e; color: #f0e0b8; }
	.nw-em-grid__event--cancelled { background: #4a2225; color: #f6cfcf; }
	.nw-em-legend__key--meeting   { background: #1e3550; }
	.nw-em-legend__key--community { background: #453a1e; }
	.nw-em-legend__key--cancelled { background: #4a2225; }
}

/* Dark-mode focus ring — see the light-mode rule for why this is inverted
   rather than kept a single colour. */
@media (prefers-color-scheme: dark) {
	.nw-em-calendar a:focus-visible,
	.nw-em-calendar button:focus-visible,
	.nw-em-calendar input:focus-visible,
	.nw-em-calendar summary:focus-visible,
	.nw-em-band a:focus-visible {
		outline-color: #ffffff;
	}

	.nw-em-grid__cell.is-outside .nw-em-grid__num { color: #8a949e; }
}

/* Two things go wrong on a narrow screen and they compound.

   The stylesheet has had `@media (max-width: 767px) { .nw-em-btn { width:
   100% } }` since before this phase, for the single event page's stacked
   sidebar buttons. It catches the calendar's buttons too, so every "Details"
   and every month arrow stretched edge to edge.

   And the <h2> sitting between the two month arrows forces a wrap, so the two
   full-width arrows became two stacked blocks with the heading in the middle —
   three bars where there should be one line of navigation.

   Width is handed back to the content, and the month nav laid out explicitly:
   heading on its own line, the two arrows beneath it at opposite ends. The
   row and band buttons still drop to their own line, via flex-basis above,
   but at their own size rather than filling it. */
@media (max-width: 767px) {
	.nw-em-calendar .nw-em-btn,
	.nw-em-band .nw-em-btn,
	.nw-em-single .nw-em-btn,
	/* The papers page's Search button, added phase 5. Without it the button
	   filled the row and squeezed the search field it sits beside down to a
	   two-character box — the same width:100% rule described above, caught a
	   third time. This corrective list needs the same maintenance as the button
	   scope list further up: add the page to BOTH. */
	.nw-em-papers .nw-em-btn { width: auto; }
}

@media (max-width: 40rem) {
	.nw-em-monthnav {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-between;
		gap: 0.5rem;
	}

	.nw-em-calendar .nw-em-monthnav__current { grid-column: 1 / -1; order: -1; }
	.nw-em-monthnav__today { grid-column: 1 / -1; margin: 0; }
	.nw-em-monthnav .nw-em-btn { white-space: nowrap; }
}

/* =========================================================================
   SINGLE EVENT AND SERIES PAGES — phase 4, mockup screens 3 and 4

   Same token contract as the calendar: --nw-em-width / --nw-em-gutter for the
   column, --nw-em-accent and friends for the chrome, each with a standalone
   fallback. Sizes are em so the page follows a host theme's type scale.
   ====================================================================== */

.nw-em-single__inner {
	max-width: var(--nw-em-width, 60rem);
	margin: 0 auto;
	padding: 1.5rem var(--nw-em-gutter, 1rem) 3rem;
}

.nw-em-back { margin: 0 0 1.25rem; }

.nw-em-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 19rem;
	gap: 2rem;
	align-items: start;
}

.nw-em-single__main { min-width: 0; }

/* --- Hero --- */

.nw-em-hero {
	margin: 0 0 1.75rem;
	border: 1px solid #dfe3e8;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.nw-em-hero__band {
	margin: 0;
	padding: 0.5rem 1.25rem;
	background: var(--nw-em-accent, #1a4d8c);
	color: var(--nw-em-accent-fg, #fff);
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.nw-em-hero__photo { display: block; width: 100%; height: auto; }
.nw-em-hero__body { padding: 1.25rem; }
.nw-em-calendar .nw-em-hero__title,
.nw-em-single .nw-em-hero__title { margin: 0 0 0.5rem; font-size: 1.9em; font-weight: 700; line-height: 1.2; }
.nw-em-hero__intro { margin: 0 0 1rem; font-size: 1.05em; color: #3f4a55; }

/* The facts row is a <dl>, so each label/value pair is announced together. */
.nw-em-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem 2rem;
	margin: 0;
	padding: 0.9rem 0 0;
	border-top: 1px solid #eceff2;
}

.nw-em-facts__item { min-width: 0; }
.nw-em-facts dt { margin: 0 0 0.15rem; font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #5d6873; }
.nw-em-facts dd { margin: 0; font-size: 0.98em; }

/* --- Sections --- */

.nw-em-single .nw-em-section-heading {
	margin: 0 0 0.75rem;
	font-size: 1.25em;
	font-weight: 700;
}

.nw-em-participation,
.nw-em-body,
.nw-em-papers,
.nw-em-agenda,
.nw-em-previous,
.nw-em-legacy-docs { margin: 0 0 2rem; }

.nw-em-participation__body {
	padding: 1rem 1.25rem;
	border: 1px solid #dfe3e8;
	border-left: 5px solid var(--nw-em-accent, #1a4d8c);
	border-radius: 4px;
	background: #f6f8fa;
}

.nw-em-participation__body > :first-child { margin-top: 0; }
.nw-em-participation__body > :last-child { margin-bottom: 0; }

/* --- Papers timeline --- */

.nw-em-papers__pending { margin: 0; color: #4a5560; }

.nw-em-timeline {
	margin: 0;
	padding: 0.4rem 1.25rem;
	list-style: none;
	border: 1px solid #dfe3e8;
	border-radius: 4px;
	background: #fff;
	counter-reset: none;
}

.nw-em-timeline__step {
	display: flex;
	gap: 0.85rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid #eceff2;
}

.nw-em-timeline__step:last-child { border-bottom: 0; }

.nw-em-timeline__tick {
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.8em;
	line-height: 1;
}

.is-done .nw-em-timeline__tick { background: #d9ebdc; color: #1d4d2b; }
.is-waiting .nw-em-timeline__tick { background: #e7eaee; color: #5d6873; }

.nw-em-timeline__body { min-width: 0; }
.nw-em-timeline__title { margin: 0; font-weight: 600; }
.nw-em-timeline__docname { font-weight: 400; color: #4a5560; }
.nw-em-timeline__meta { margin: 0.15rem 0 0; font-size: 0.88em; color: #4a5560; }

/* A waiting step is quieter, but its text still passes AA — it is information,
   not decoration, and "usually published within 10 working days" is the single
   most useful sentence on an unminuted meeting. */
.is-waiting .nw-em-timeline__title { font-weight: 400; color: #4a5560; }

/* --- On the agenda --- */

.nw-em-agenda__list {
	margin: 0;
	padding: 1rem 1.25rem 1rem 2.6rem;
	border: 1px solid #dfe3e8;
	border-radius: 4px;
	background: #fff;
}

.nw-em-agenda__list li { margin: 0.2rem 0; }

/* --- Previous meetings / series rows --- */

.nw-em-row--series { border-bottom: 1px solid #eceff2; }
.nw-em-row__papernames { color: #4a5560; }
.nw-em-previous__all { margin: 0.75rem 0 0; }

/* --- Sidebar cards --- */

.nw-em-aside { display: flex; flex-direction: column; gap: 1rem; }

.nw-em-card {
	padding: 1rem 1.15rem;
	border: 1px solid #dfe3e8;
	border-radius: 4px;
	background: #f8f9fa;
}

.nw-em-single .nw-em-card__title {
	margin: 0 0 0.6rem;
	font-size: 0.82em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.nw-em-card__note { margin: 0.6rem 0 0; font-size: 0.88em; color: #4a5560; }
.nw-em-card__address { font-style: normal; line-height: 1.5; margin: 0; }
.nw-em-card__map { margin-top: 0.75rem; }
.nw-em-card__map iframe { display: block; width: 100%; border: 1px solid #dfe3e8; border-radius: 3px; }
.nw-em-single .nw-em-btn--block { display: block; text-align: center; }

/* --- Access / good to know --- */

.nw-em-access { margin: 0; padding: 0; list-style: none; }
.nw-em-access__item { display: flex; gap: 0.5rem; margin: 0.35rem 0; font-size: 0.92em; }
.nw-em-access__mark { flex: 0 0 auto; color: #1d4d2b; font-weight: 700; }
.nw-em-access__item.is-no .nw-em-access__mark { color: #7a1f23; }
.nw-em-access__note { display: block; color: #4a5560; font-size: 0.92em; }

.nw-em-legacy-docs__list { margin: 0; padding-left: 1.25rem; }

@media (max-width: 52rem) {
	.nw-em-single__grid { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
	.nw-em-hero, .nw-em-timeline, .nw-em-agenda__list { background: #1c2126; border-color: #39414a; }
	.nw-em-card, .nw-em-participation__body { background: #1c2126; border-color: #39414a; }
	.nw-em-facts { border-color: #2b3238; }
	.nw-em-timeline__step, .nw-em-row--series { border-color: #2b3238; }
	.nw-em-facts dt, .nw-em-hero__intro, .nw-em-card__note, .nw-em-timeline__meta,
	.nw-em-timeline__docname, .nw-em-papers__pending, .nw-em-access__note,
	.nw-em-row__papernames, .is-waiting .nw-em-timeline__title { color: #b6bfc8; }
	.is-done .nw-em-timeline__tick { background: #1f3b28; color: #cfe8d6; }
	.is-waiting .nw-em-timeline__tick { background: #2b3238; color: #cdd5dd; }
	.nw-em-access__mark { color: #8fd0a4; }
	.nw-em-access__item.is-no .nw-em-access__mark { color: #f0b6b6; }
}

/* A hero with no band and no photograph has nothing to frame — see
   event-hero.php. The border round a title and one date makes a short page
   look like a broken one. */
.nw-em-hero.is-plain { border: 0; background: none; border-radius: 0; }
.nw-em-hero.is-plain .nw-em-hero__body { padding: 0; }

@media (prefers-color-scheme: dark) {
	.nw-em-hero.is-plain { background: none; }
}

/* =========================================================================
   MEETING PAPERS ARCHIVE (phase 5, part 1)

   Scoped under .nw-em-papers throughout. The theme's base styles reach
   elements directly — `.site-main h3 { font-size: 14px }` and friends — and
   beat a bare single class on specificity, which is how the members archive
   ended up with row titles smaller than their own meta. Scoping wins without
   reaching for !important, so a theme can still override any of it.

   Colours come from the same token contract as the rest of the plugin, so the
   page re-skins with the theme's colour scheme and needs no rebuild.
   ====================================================================== */

:root { --nw-em-rule: #dde6e9; }

.nw-em-papers__inner {
	max-width: var(--nw-em-width, 60rem);
	margin: 0 auto;
	padding: 1.5rem var(--nw-em-gutter, 1rem) 3rem;
}

.nw-em-papers__title { margin: 0 0 1rem; }
.nw-em-papers__lede { margin: 0 0 1.5rem; }

/* --- Filter bar --- */

.nw-em-papers__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin: 0 0 1.75rem;
}

.nw-em-papers__filters .nw-em-years { flex: 0 1 auto; }

/* Wide enough for its own placeholder. At 13rem "Search meetings and papers…"
   was clipped to "…and pap", which reads as a broken field rather than a hint
   (Adam, on screen). flex:1 lets it take whatever the row has spare, so it
   grows further on a wide screen instead of stopping at an arbitrary width. */
.nw-em-papers__search {
	display: flex;
	gap: 0.5rem;
	flex: 1 1 22rem;
	max-width: 34rem;
}

.nw-em-papers__search input[type="search"] { flex: 1 1 auto; }

.nw-em-papers__search input[type="search"] {
	font: inherit;
	font-size: 0.94em;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--nw-nav-line, #cfd6dd);
	border-radius: 3px;
	background: #fff;
	color: inherit;
	min-width: 0;
	max-width: 100%;
}

/* --- Committee chips ---

   Their own row above the year filter, with a little more air beneath than
   between chips: these choose WHAT you are looking at, the year chips narrow
   WHEN, and running the two rows together made them read as one set of ten
   unrelated buttons. */

.nw-em-papers__committees {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

/* --- Committee group --- */

/* The TABLE is the card, not a box the table sits inside.

   It was a padded white panel wrapping the table, which inset the table by
   1.5rem on each side and left it visibly narrower than the summary strip and
   the filters above it (Adam, on screen: "fill container"). Moving the card
   treatment onto the table itself lines every edge on the page up, and loses
   nothing — the table already had the border and the radius. */
.nw-em-papers__group { margin: 0 0 1.75rem; }

.nw-em-papers__group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.85rem;
	margin: 0 0 0.9rem;
	padding-bottom: 0;
}

/* The accent rule belongs under a HEADING. On a single-committee council there
   is no heading (brief item 4), so the bar was left floating above a bare table
   with only "24 meetings" beside it, which read as an unfinished element rather
   than a divider. It now appears only when there is a title to underline. */


.nw-em-papers__group-title { margin: 0; }

.nw-em-papers__group-meta {
	font-size: 0.88em;
	opacity: 0.75;
}

/* Pushed to the far end, so it does not read as part of the count. */
.nw-em-papers__series-link {
	margin-left: auto;
	font-size: 0.9em;
	white-space: nowrap;
}

.nw-em-papers__caption {
	text-align: left;
	font-size: 0.88em;
	opacity: 0.75;
	padding-bottom: 0.5rem;
}

/* --- The summary strip ---

   Sits between the filters and the first table and states what is in view. The
   separators are real characters rather than borders so the line wraps cleanly
   on a phone, and they are aria-hidden so the facts are not read out with a
   middle dot between each. */

.nw-em-papers__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0.65rem 0.9rem;
	border-left: 3px solid var(--nw-em-accent, #1a4d8c);
	background: var(--nw-em-accent-tint, #f2f6fa);
	border-radius: 0 3px 3px 0;
	font-size: 0.92em;
}

.nw-em-papers__sep { opacity: 0.45; }

/* --- The table --- */

/* The table follows nw-councildocs' treatment, which Adam prefers and which is
   what clerks and residents on migrated sites already know: a bordered grid
   with a solid header bar, sitting on a white card. Measured off the live old
   page rather than guessed — 16px cells, 1px #dde6e9 rules, 10px radius.

   The one deliberate departure is the header colour. The old plugin hardcodes
   #0E3A47, so it is the same teal on a claret site as on a maritime one; this
   uses the scheme's own accent, which is the whole point of the token contract
   and what Adam asked for on the calendar in phase 3. */

.nw-em-papers__table {
	width: 100%;
	border-collapse: collapse;
	/* `auto` rather than `fixed`: a document title is unpredictable in length
	   and fixed layout would either clip agendas or leave the date column
	   absurdly wide on a council whose papers are all named "Agenda". */
	table-layout: auto;
	margin: 0;
	border: 1px solid var(--nw-em-rule, #dde6e9);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 2px 8px rgba(28, 43, 58, 0.06);
}

.nw-em-papers__table th,
.nw-em-papers__table td {
	text-align: left;
	vertical-align: middle;
	padding: 0.85rem 1rem;
	border-right: 1px solid var(--nw-em-rule, #dde6e9);
	border-bottom: 1px solid var(--nw-em-rule, #dde6e9);
	font-size: 0.92em;
}

.nw-em-papers__table th:last-child,
.nw-em-papers__table td:last-child { border-right: 0; }
.nw-em-papers__table tbody tr:last-child td { border-bottom: 0; }

/* The solid header bar. Sentence case and normal weight, as the old plugin has
   it — small caps at this width turned "Supporting papers" into a second line. */
.nw-em-papers__table thead th {
	background: var(--nw-em-accent, #0e3a47);
	color: var(--nw-em-accent-fg, #fff);
	font-weight: 500;
	font-size: 0.92em;
	text-transform: none;
	letter-spacing: normal;
	opacity: 1;
	white-space: nowrap;
	border-right-color: rgba(255, 255, 255, 0.15);
	border-bottom: 0;
}

/* Column widths. Left to itself the browser gave the meeting name almost all
   the width and squeezed the three document columns against the right edge —
   the columns a resident actually came for. The date takes what it needs, the
   meeting is capped, and the papers share what is left. */
.nw-em-papers__date {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	width: 7.5rem;
}

.nw-em-papers__meeting { width: 30%; }

.nw-em-papers__table td:nth-child(3),
.nw-em-papers__table td:nth-child(4) { width: 17%; }

/* Zebra striping. currentColor at 3% rather than a fixed grey, so it works on
   every one of the twelve colour schemes and in dark mode without a second
   rule — a hardcoded #fafafa disappears on the dark schemes and banding is the
   one thing that has to survive a re-skin. */
.nw-em-papers__table tbody tr:nth-child(odd) {
	background: color-mix(in srgb, currentColor 5%, transparent);
}

/* Hover after the stripe so it wins on both bands. Kept light — this is a
   public record, not an app. */
.nw-em-papers__table tbody tr:hover,
.nw-em-papers__table tbody tr:nth-child(odd):hover {
	background: var(--nw-em-accent-tint, #f2f6fa);
}

/* The date carries the row. It was the same weight as the venue line beneath
   the meeting name, so scanning twenty rows for a month meant reading every
   cell rather than glancing down one column. */
.nw-em-papers__date time {
	font-weight: 600;
	font-size: 1.02em;
}



.nw-em-papers__meeting a { font-weight: 600; }

.nw-em-papers__sub {
	margin-top: 0.15rem;
	font-size: 0.86em;
	opacity: 0.8;
}

/* Uses the pill's own red rather than a bare `color: red`, so it stays legible
   in dark mode where the pill palette is already redefined below. */
.nw-em-papers__sub--cancelled { color: #7a1f23; opacity: 1; }

/* The strike-through is on the DATE and TITLE only, never the whole row: a
   cancelled meeting's agenda may still be published and struck-through link
   text reads as "withdrawn", which would be untrue of it. */
.nw-em-papers__row.is-cancelled .nw-em-papers__date time,
.nw-em-papers__row.is-cancelled .nw-em-papers__meeting > a {
	text-decoration: line-through;
}

/* Upcoming meetings carry NO marker of their own on the row.

   Two were tried and both removed. A tinted row went first: with a year of
   dates in the diary, thirteen of fifteen rows were tinted, so the tint
   distinguished nothing. An accent edge on the date cell replaced it and failed
   the same way for the same reason — on a page where most rows are upcoming it
   drew one continuous line down the side of the table (Adam, on screen).

   The word "Upcoming" under the meeting name already says it, on exactly the
   rows it applies to, and says it in words rather than in a colour nobody has
   been given a key to. */

/* --- Document links --- */

.nw-em-papers__docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Icon, label, and the file details beneath — the old plugin's shape. */
.nw-em-papers__doc {
	display: inline-grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 0 0.4rem;
}

.nw-em-papers__icon {
	grid-row: 1 / span 2;
	align-self: center;
	flex: 0 0 auto;
	color: #6b7780;
}

/* Adobe red for a PDF. Not scheme-coloured on purpose: this describes the FILE,
   and a claret council's agenda is still a PDF. */
.nw-em-papers__icon.is-pdf { color: #c8322b; }

.nw-em-papers__docname { grid-column: 2; }

.nw-em-papers__docmeta {
	grid-column: 2;
	font-size: 0.8em;
	opacity: 0.7;
	/* Inherits the link's colour but not its underline, so the size does not
	   look like a second link. */
	text-decoration: none;
}

.nw-em-papers__more { font-size: 0.88em; }

.nw-em-papers__absent {
	font-size: 0.88em;
	opacity: 0.7;
}

.nw-em-papers__footnote {
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--nw-nav-line, #e3e7eb);
	font-size: 0.92em;
}

.nw-em-empty--papers {
	padding: 2.5rem 1.25rem;
	border: 1px solid var(--nw-nav-line, #dfe3e8);
	border-radius: 4px;
	text-align: center;
}

.nw-em-empty--papers h2 { margin: 0 0 0.5rem; }
.nw-em-empty--papers p { margin: 0 auto; max-width: 52ch; }

/* --- Phone: cards, not a squashed table (brief item 5) ---

   Below 46rem the table deliberately STOPS being a table: display:block flattens
   the roles out of the accessibility tree, and each cell prints its own label
   from data-label instead. That is the brief's requirement rather than a
   compromise — a five-column table is not a thing anyone can read on a phone,
   and a card that names each value beats a table whose headers are off screen.
   Above the breakpoint it is a real table with real headers, untouched.

   NO horizontal scrolling at any width, which is the brief's actual
   requirement — an overflow-x container would technically "work" and would
   still be a table dragged sideways on a phone. */

@media (max-width: 46rem) {

	/* display:none, NOT the visually-hidden clip technique.

	   Setting display:block on the table parts below strips the table, row and
	   cell roles from the accessibility tree — that is browser behaviour, not
	   an oversight, and it is what the brief asks for here ("the mobile card
	   view is a styled list, not a squashed table"). But once the table role is
	   gone, a merely CLIPPED thead is no longer a header row: it is five loose
	   words announced before every card. Removing it outright is what makes the
	   card a clean list item, and the per-cell labels below replace it. */
	.nw-em-papers__table thead { display: none; }

	.nw-em-papers__table,
	.nw-em-papers__table tbody,
	.nw-em-papers__table tr,
	.nw-em-papers__table td {
		display: block;
		width: auto;
	}

	.nw-em-papers__table { border: 0; border-radius: 0; background: none; box-shadow: none; }

	.nw-em-papers__row {
		margin: 0 0 1rem;
		padding: 0.9rem 1rem;
		border: 1px solid var(--nw-em-rule, #dde6e9);
		border-radius: 6px;
	}

	.nw-em-papers__table td { border-right: 0; }

	.nw-em-papers__table td {
		border-bottom: 0;
		padding: 0.3rem 0;
	}

	/* The label, in place of the column header. Generated content IS announced
	   by NVDA, JAWS and VoiceOver in current browsers, which is what this
	   relies on — the older advice that screen readers skip ::before is out of
	   date, and it matters here because with the table role gone this label is
	   the ONLY thing tying a value to its column. */
	.nw-em-papers__table td[data-label]::before {
		content: attr(data-label) ": ";
		display: block;
		font-size: 0.78em;
		text-transform: uppercase;
		letter-spacing: 0.03em;
		opacity: 0.65;
	}

	/* The date and the meeting name lead the card and do not need naming.

	   Matched through td[data-label] as well as the class, because the rule
	   above is (0,2,1) with its attribute selector and a bare class here is
	   (0,1,1) — it lost, and the cards printed "DATE:" and "MEETING:" over
	   their own values. Nothing warns you; the declaration is simply overruled. */
	.nw-em-papers__table td[data-label].nw-em-papers__date::before,
	.nw-em-papers__table td[data-label].nw-em-papers__meeting::before { content: none; }

	.nw-em-papers__date {
		width: auto;
		font-size: 0.86em;
		opacity: 0.8;
	}

	.nw-em-papers__filters { flex-direction: column; align-items: stretch; }
	.nw-em-papers__meeting,
	.nw-em-papers__table td:nth-child(3),
	.nw-em-papers__table td:nth-child(4) { width: auto; }
	.nw-em-papers__table tbody tr:hover { background: none; }
	/* Cards already have their own border; striping them reads as an error. */
	.nw-em-papers__table tbody tr:nth-child(even) { background: none; }


	.nw-em-papers__summary { margin-bottom: 1.25rem; }
	.nw-em-papers__search input[type="search"] { min-width: 0; flex: 1; }
	.nw-em-papers__series-link { margin-left: 0; }
}

@media (prefers-color-scheme: dark) {
	.nw-em-papers__search input[type="search"] {
		background: #12171c;
		border-color: #39424c;
		color: #e7ecf1;
	}

	.nw-em-papers__table th,
	.nw-em-papers__table td { border-bottom-color: #2b3238; }

	.nw-em-papers__row { border-color: #2b3238; }
	.nw-em-papers__sub--cancelled { color: #f6cfcf; }
	.nw-em-empty--papers { border-color: #2b3238; }
	.nw-em-papers__footnote { border-top-color: #2b3238; }
}

/* =========================================================================
   HOMEPAGE BLOCK (phase 5, part 2; mockup screen 5)

   Scoped under .nw-em-home. Unlike the other pages this markup is dropped
   INTO a theme's own homepage, next to that theme's cards, so it stays
   deliberately quiet: no card chrome of its own, no background, no border. It
   inherits whatever panel the theme puts it in and only lays out its contents.
   NetWise-V3 renders it inside .nw-card, which supplies the frame.
   ====================================================================== */

.nw-em-home__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.3rem 1rem;
	margin: 0 0 0.9rem;
}

.nw-em-home__title { margin: 0; }
.nw-em-home__more { font-size: 0.9em; white-space: nowrap; }

.nw-em-home__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.nw-em-home__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}

/* The typed date tile. Sized in ch/em rather than px so it grows with the
   theme's type scale — the estate runs twelve colour schemes and several type
   sizes, and a fixed 56px tile goes lopsided against a larger body font. */
.nw-em-home__tile {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 3.4em;
	padding: 0.4em 0.5em;
	border-radius: 4px;
	background: var(--nw-em-accent, #1a4d8c);
	color: var(--nw-em-accent-fg, #fff);
	line-height: 1.1;
	text-align: center;
}

.nw-em-home__tile b { font-size: 1.35em; font-weight: 700; }
.nw-em-home__tile small { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.02em; }

.nw-em-home__photo {
	flex: 0 0 auto;
	width: 4.6em;
	height: 4.6em;
	object-fit: cover;
	border-radius: 4px;
}

.nw-em-home__body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.nw-em-home__link { font-weight: 600; }
.nw-em-home__when { font-size: 0.9em; opacity: 0.85; }

.nw-em-home__type {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.65;
}

.nw-em-home__moved { align-self: flex-start; margin-top: 0.15rem; }
.nw-em-home__movedfrom { font-size: 0.85em; opacity: 0.8; }

/* --- The cancellation notice (state C) ---

   A left border rather than a filled red panel. Filled red on a parish
   homepage reads as "this website is broken"; the point is that the COUNCIL
   cancelled a meeting, which is ordinary business and needs to be legible, not
   alarming. Same restraint the calendar's cancelled rows use. */

.nw-em-home__cancelled {
	margin: 0 0 1rem;
	padding: 0.7rem 0.9rem;
	border-left: 4px solid #b3261e;
	background: rgba(179, 38, 30, 0.06);
	border-radius: 0 3px 3px 0;
}

.nw-em-home__cancelled p { margin: 0 0 0.25rem; }
.nw-em-home__cancelled p:last-child { margin-bottom: 0; }
.nw-em-home__cancelled-title { font-weight: 600; }
.nw-em-home__cancelled-reason { font-size: 0.92em; }
.nw-em-home__cancelled-more { font-size: 0.9em; }

/* --- State A --- */

.nw-em-home__empty p { margin: 0 0 0.5rem; }
.nw-em-home__empty-title { font-weight: 600; }

/* The editor-only note explaining why the block will not appear. */
.nw-em-block-placeholder {
	padding: 1rem;
	border: 1px dashed #9aa4ae;
	border-radius: 4px;
	color: #4a555f;
	font-style: italic;
}

@media (prefers-color-scheme: dark) {
	.nw-em-home__cancelled {
		border-left-color: #f6cfcf;
		background: rgba(246, 207, 207, 0.08);
	}
	.nw-em-block-placeholder { border-color: #39424c; color: #aab4be; }
}