/* Rich-text token classes and the popup editor.
 *
 * The classes carry NO fixed colours of their own. Each component block
 * sets its palette as custom properties on its section (--sc-* for City
 * Hero, --ss-* for Stories, and so on), so the rules below map every
 * token to whichever block the marked words happen to sit in. Change the
 * Style tab and the marked words follow — that is the whole point.
 *
 * Sizes are em steps, so they multiply whatever font-size the Design tab
 * gives the element rather than replacing it.
 */

/* Sensible fallback where no block palette is in scope (should not
   normally happen — every enabled field renders inside a component). */
.sic-rt-accent  { color: var(--sic-rt-fallback-accent, #bf1304); }
.sic-rt-accent2 { color: var(--sic-rt-fallback-accent, #bf1304); }
.sic-rt-muted   { opacity: .72; }

/* Per-component palette mapping. Second accent falls back to the main
   accent where a component has no secondary colour. Muted uses the
   block's own muted slot where one exists. */
.sic-hero          .sic-rt-accent  { color: var(--sh-accent); }
.sic-about         .sic-rt-accent  { color: var(--sa-accent); }
.sic-about         .sic-rt-muted   { color: var(--sa-muted); opacity: 1; }
.sic-statsviz      .sic-rt-accent  { color: var(--ss-accent); }
.sic-stories       .sic-rt-accent  { color: var(--ss-accent); }
.sic-stories       .sic-rt-accent2 { color: var(--ss-hl, var(--ss-accent)); }
.sic-citymap       .sic-rt-accent  { color: var(--sm-active, var(--sm-dot)); }
.sic-press         .sic-rt-accent  { color: var(--sp-accent); }
.sic-resources     .sic-rt-accent  { color: var(--sr-accent); }
.sic-wheelspin     .sic-rt-accent  { color: var(--sw-accent); }
.sic-cityhero      .sic-rt-accent  { color: var(--sc-accent); }
.sic-cityhero      .sic-rt-muted   { color: var(--sc-muted); opacity: 1; }
.sic-cityabout     .sic-rt-accent  { color: var(--ca-accent); }
.sic-cityabout     .sic-rt-muted   { color: var(--ca-muted); opacity: 1; }
.sic-citystats     .sic-rt-accent  { color: var(--s2-accent); }
.sic-citystats     .sic-rt-muted   { color: var(--s2-muted); opacity: 1; }
.sic-citythemes    .sic-rt-accent  { color: var(--st-accent); }
.sic-citythemes    .sic-rt-muted   { color: var(--st-muted); opacity: 1; }
.sic-cityvoices    .sic-rt-accent  { color: var(--sv-accent); }
.sic-cityvoices    .sic-rt-muted   { color: var(--sv-muted); opacity: 1; }
.sic-citymessage   .sic-rt-accent  { color: var(--sm2-accent); }
.sic-citymessage   .sic-rt-muted   { color: var(--sm2-muted); opacity: 1; }
.sic-citypartners  .sic-rt-accent  { color: var(--sp2-accent); }
.sic-citypartners  .sic-rt-muted   { color: var(--sp2-muted); opacity: 1; }
.sic-cityresources .sic-rt-accent  { color: var(--sr2-accent); }
.sic-cityresources .sic-rt-muted   { color: var(--sr2-muted); opacity: 1; }

/* Size steps — relative on purpose. The Design tab sets the element's
   size; these scale within it, so a Design change moves everything
   together and nothing is ever "stuck at 18px". */
.sic-rt-sz-sm { font-size: .85em; }
.sic-rt-sz-lg { font-size: 1.2em; }
.sic-rt-sz-xl { font-size: 1.45em; }

/* Links inside rich fields inherit the surrounding colour rather than
   browser blue, and signal themselves with an underline. */
.sic-rt-accent a, .sic-rt-accent2 a, .sic-rt-muted a { color: inherit; }
blockquote a, .sicstories-quote a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }

/* ---------------------------------------------------------------------- */
/* Popup editor                                                            */
/* ---------------------------------------------------------------------- */

.sic-rt-open {
	display: inline-block;
	margin: 4px 0 0;
	padding: 2px 8px;
	font: 600 11px/1.6 inherit;
	letter-spacing: .02em;
	border: 1px solid rgba(0,0,0,.25);
	border-radius: 4px;
	background: #fff;
	color: #333;
	cursor: pointer;
}
.sic-rt-open:hover { border-color: rgba(0,0,0,.5); }

.sic-rt-back {
	position: fixed;
	inset: 0;
	display: none;
	z-index: 100000; /* above the editor panel */
	/* No dim, no click-catching: the page stays visible and usable, so
	   live changes can be watched while editing. */
	background: transparent;
	pointer-events: none;
}
.sic-rt-back.is-open { display: block; }

.sic-rt-dlg {
	/* Docked bottom-centre by default; dragging switches to free
	   left/top placement (.is-free). */
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	pointer-events: auto;
	width: min(560px, calc(100vw - 32px));
	max-height: min(72vh, 640px);
	overflow-y: auto;
	background: #fff;
	color: #1d2233;
	border-radius: 10px;
	box-shadow: 0 18px 60px rgba(0,0,0,.35);
	padding: 0 12px 12px;
	font-size: 14px;
}
.sic-rt-dlg.is-free {
	bottom: auto;
	transform: none;
}

.sic-rt-drag {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 -12px 8px;
	padding: 8px 10px;
	background: #f2f2f7;
	border-radius: 10px 10px 0 0;
	border-bottom: 1px solid rgba(0,0,0,.08);
	cursor: grab;
	user-select: none;
	position: sticky;
	top: 0;
	z-index: 2;
}
.sic-rt-drag:active { cursor: grabbing; }
.sic-rt-drag-dots { color: #9aa0b0; letter-spacing: -2px; font-size: 13px; }
.sic-rt-drag-title { flex: 1; font-size: 11.5px; font-weight: 600; color: #454b5e; }
.sic-rt-x {
	padding: 2px 7px;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 11px;
}

.sic-rt-bar {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	padding-bottom: 8px;
}
.sic-rt-bar button {
	min-width: 30px;
	padding: 4px 8px;
	border: 1px solid rgba(0,0,0,.18);
	border-radius: 5px;
	background: #f7f7fa;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.3;
}
.sic-rt-bar button:hover { background: #ececf2; }
.sic-rt-bar select {
	padding: 4px 6px;
	border: 1px solid rgba(0,0,0,.18);
	border-radius: 5px;
	background: #f7f7fa;
	font-size: 12px;
}
.sic-rt-gap { flex: 0 0 8px; }

.sic-rt-ce {
	/* Fixed cap, whatever the content length: a long body scrolls INSIDE
	   the box instead of growing it, so the element-style tabs below
	   stay visible without scrolling the panel. The grip on the bottom
	   edge lets it be enlarged by hand when wanted. */
	height: 140px;
	min-height: 96px;
	max-height: 60vh;
	resize: vertical;
	overflow: auto;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,.25);
	border-radius: 6px;
	line-height: 1.5;
	outline: none;
	/* The box previews tokens with neutral stand-ins; the true colours
	   are the block's own and appear in the live preview on Apply. */
	--sic-rt-fallback-accent: #bf1304;
}
.sic-rt-ce:focus { border-color: #2481a6; box-shadow: 0 0 0 2px rgba(36,129,166,.2); }
.sic-rt-ce .sic-rt-muted { opacity: .6; }
.sic-rt-ce a { color: #2481a6; }

.sic-rt-note {
	margin: 8px 2px 0;
	font-size: 11.5px;
	color: #6a7186;
}
.sic-rt-note.is-warn { color: #bf1304; }

.sic-rt-foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 10px;
}
.sic-rt-foot button {
	padding: 6px 14px;
	border-radius: 6px;
	border: 1px solid rgba(0,0,0,.2);
	background: #fff;
	cursor: pointer;
	font-size: 13px;
}
.sic-rt-apply {
	background: #021859;
	border-color: #021859;
	color: #fff;
}
.sic-rt-apply:hover { background: #06277e; }

/* ---------------------------------------------------------------------- */
/* Eyebrow dash coupling                                                   */
/* ---------------------------------------------------------------------- */
/* Every component draws the eyebrow's dash as an empty inline-block span
   before the text (Stories as ::before). When the eyebrow text carries a
   token, the dash follows it — otherwise "make the eyebrow bigger/muted"
   would move the words and leave the dash behind. The generic rules
   cover size and muted; the specific ones re-tint dashes whose default
   colour differs from the accent the token now shows. */

p[class*="-eyebrow"]:has(.sic-rt-muted) > span:not([class]):first-of-type { opacity: .72; }
p[class*="-eyebrow"]:has(.sic-rt-sz-sm) > span:not([class]):first-of-type { transform: scale(.85); transform-origin: left center; }
p[class*="-eyebrow"]:has(.sic-rt-sz-lg) > span:first-of-type { transform: scale(1.2);  transform-origin: left center; }
p[class*="-eyebrow"]:has(.sic-rt-sz-xl) > span:not([class]):first-of-type { transform: scale(1.45); transform-origin: left center; }

/* Stories draws its dash as ::before. */
.sic-stories .sicstories-eyebrow:has(.sic-rt-muted)::before  { opacity: .72; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-sz-sm)::before  { transform: scale(.85); transform-origin: left center; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-sz-lg)::before  { transform: scale(1.2);  transform-origin: left center; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-sz-xl)::before  { transform: scale(1.45); transform-origin: left center; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-accent2)::before { background: var(--ss-hl, var(--ss-accent)); }

/* Dashes whose resting colour is not the accent, so the accent token
   must re-tint them explicitly. */
.sic-citymessage .sicmsg-eyebrow:has(.sic-rt-accent) > span:not([class])     { background: var(--sm2-accent); }
.sic-citystats   .sicstats2-eyebrow:has(.sic-rt-accent) > span:not([class])  { background: var(--s2-accent); }
.sic-citythemes  .sicthemes-eyebrow:has(.sic-rt-accent) > span:not([class])  { background: var(--st-accent); }
/* Muted tokens where the block has a real muted colour: tint, not fade. */
.sic-citymessage .sicmsg-eyebrow:has(.sic-rt-muted) > span:not([class])     { background: var(--sm2-muted); opacity: 1; }
.sic-citystats   .sicstats2-eyebrow:has(.sic-rt-muted) > span:not([class])  { background: var(--s2-muted); opacity: 1; }

/* ---------------------------------------------------------------------- */
/* Document mode (About body)                                              */
/* ---------------------------------------------------------------------- */
/* Block toolbar buttons appear only when the popup is opened on a
   document-mode field. */
.sic-rt-bar .sic-rt-blocktool { display: none; }
.sic-rt-dlg.is-blocks .sic-rt-bar .sic-rt-blocktool { display: inline-block; }
.sic-rt-dlg.is-blocks .sic-rt-ce,
.sic-rt-dlg.is-pull .sic-rt-ce { height: 170px; }
.sic-rt-ce p { margin: 0 0 .8em; }
.sic-rt-ce h3 { margin: 1em 0 .4em; font-size: 1.15em; }
.sic-rt-ce ul, .sic-rt-ce ol { margin: 0 0 .8em; padding-left: 1.4em; }
.sic-rt-ce blockquote { margin: .8em 0; padding-left: .9em; border-left: 3px solid rgba(0,0,0,.2); }

/* ---------------------------------------------------------------------- */
/* Element style section + compact controls                                */
/* ---------------------------------------------------------------------- */
/* Buttons and selects are content-sized, never stretched — and pinned
   that way explicitly so a theme or editor rule making buttons
   full-width cannot reach into the popup. */
.sic-rt-dlg button, .sic-rt-dlg select {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
	display: inline-block;
	box-sizing: border-box;
}
.sic-rt-bar button { padding: 3px 7px; font-size: 12px; }
.sic-rt-bar select { max-width: 110px; }
.sic-rt-foot button { padding: 5px 12px; }
.sic-rt-open { width: auto; }

.sic-rt-el {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(0,0,0,.12);
}
.sic-rt-el-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}
.sic-rt-el-title { font-size: 12px; font-weight: 600; color: #1d2233; }
.sic-rt-devs { display: inline-flex; gap: 2px; }
.sic-rt-devs button {
	padding: 2px 8px;
	font-size: 11px;
	border: 1px solid rgba(0,0,0,.18);
	background: #f7f7fa;
	border-radius: 4px;
	cursor: pointer;
}
.sic-rt-devs button.is-on { background: #021859; border-color: #021859; color: #fff; }

.sic-rt-el-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px 8px;
}
.sic-rt-el-grid label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 10.5px;
	letter-spacing: .02em;
	color: #6a7186;
}
.sic-rt-el-grid input, .sic-rt-el-grid select {
	width: 100%;
	padding: 4px 6px;
	font-size: 12px;
	border: 1px solid rgba(0,0,0,.18);
	border-radius: 4px;
	background: #fff;
}
.sic-rt-el-note { margin: 8px 2px 0; font-size: 10.5px; color: #8a90a3; }

@media (max-width: 560px) {
	.sic-rt-el-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* r144: brand palette, element tabs                                       */
/* ---------------------------------------------------------------------- */
/* The six colours the platform uses, as word-level classes. Fixed brand
   values by design — this is the palette, not the per-block Style tab. */
.sic-rt-c1 { color: #021859; }
.sic-rt-c2 { color: #bf1304; }
.sic-rt-c3 { color: #2481a6; }
.sic-rt-c4 { color: #a64034; }
.sic-rt-c5 { color: #f2e0df; }
.sic-rt-c6 { color: #ffffff; }

.sic-rt-pal { display: inline-flex; gap: 3px; align-items: center; }
.sic-rt-pal button {
	width: 18px; height: 18px; min-width: 18px;
	padding: 0; border-radius: 50%;
	border: 1px solid rgba(0,0,0,.25);
	cursor: pointer; font-size: 11px; line-height: 1;
}
.sic-rt-pal [data-rt-pal="sic-rt-c1"] { background: #021859; }
.sic-rt-pal [data-rt-pal="sic-rt-c2"] { background: #bf1304; }
.sic-rt-pal [data-rt-pal="sic-rt-c3"] { background: #2481a6; }
.sic-rt-pal [data-rt-pal="sic-rt-c4"] { background: #a64034; }
.sic-rt-pal [data-rt-pal="sic-rt-c5"] { background: #f2e0df; }
.sic-rt-pal [data-rt-pal="sic-rt-c6"] { background: #ffffff; }
.sic-rt-pal [data-rt-pal="-"] { background: #fff; color: #666; }
.sic-rt-pal button:hover { transform: scale(1.15); }

/* Eyebrow dashes follow palette tokens too. */
p[class*="-eyebrow"]:has(.sic-rt-c1) > span:first-of-type { background: #021859; }
p[class*="-eyebrow"]:has(.sic-rt-c2) > span:first-of-type { background: #bf1304; }
p[class*="-eyebrow"]:has(.sic-rt-c3) > span:first-of-type { background: #2481a6; }
p[class*="-eyebrow"]:has(.sic-rt-c4) > span:first-of-type { background: #a64034; }
p[class*="-eyebrow"]:has(.sic-rt-c5) > span:first-of-type { background: #f2e0df; }
p[class*="-eyebrow"]:has(.sic-rt-c6) > span:first-of-type { background: #ffffff; }

/* Element section: selector + group tabs */
.sic-rt-el-head select[data-rt-part] {
	flex: 1 1 auto; min-width: 0; max-width: 200px;
	padding: 3px 6px; font-size: 12px;
	border: 1px solid rgba(0,0,0,.18); border-radius: 4px; background: #fff;
}
.sic-rt-el-tabs { display: flex; gap: 2px; margin-bottom: 8px; flex-wrap: wrap; }
.sic-rt-el-tabs button {
	padding: 3px 10px; font-size: 11.5px;
	border: 1px solid rgba(0,0,0,.15); border-bottom-width: 2px;
	background: #f2f2f6; border-radius: 5px 5px 0 0; cursor: pointer; color: #555;
}
.sic-rt-el-tabs button.is-on {
	background: #fff; color: #021859; font-weight: 600;
	border-bottom-color: #021859;
}
.sic-rt-el-grid { max-height: 168px; overflow-y: auto; padding-right: 2px; }

/* ---------------------------------------------------------------------- */
/* r145: token spans inside eyebrows must not become dashes                */
/* ---------------------------------------------------------------------- */
/* Every component styles its eyebrow dash with a bare `span` selector
   (`.sicabout-eyebrow span { width:34px; height:2px; background:… }`),
   which also caught the palette/token span around the text — turning
   formatted eyebrow words into a 34px accent bar. The dash is the only
   CLASSLESS span; token spans always carry a class, so this puts the
   token spans back to being text. */
/* .sic-eyenum is excluded: the numeral boot.js inserts is a classed
   span inside the eyebrow, so this reset was claiming it too — and
   `display: inline` here (0,2,1) outranked design.css's flex centring
   (0,2,0), which is why the figure hung below the dash instead of being
   centred on it. The numeral has its own complete treatment there. */
p[class*="-eyebrow"] span[class]:not(.sic-eyenum),
p[class*="-eyebrow"] em[class] {
	width: auto;
	height: auto;
	min-width: 0;
	background: transparent;
	display: inline;
}

/* Dash-follow rules re-anchored on the classless empty span, so they can
   never target a token span either. */
p[class*="-eyebrow"]:has(.sic-rt-c1) > span:not([class]):first-of-type { background: #021859; }
p[class*="-eyebrow"]:has(.sic-rt-c2) > span:not([class]):first-of-type { background: #bf1304; }
p[class*="-eyebrow"]:has(.sic-rt-c3) > span:not([class]):first-of-type { background: #2481a6; }
p[class*="-eyebrow"]:has(.sic-rt-c4) > span:not([class]):first-of-type { background: #a64034; }
p[class*="-eyebrow"]:has(.sic-rt-c5) > span:not([class]):first-of-type { background: #f2e0df; }
p[class*="-eyebrow"]:has(.sic-rt-c6) > span:not([class]):first-of-type { background: #ffffff; }

/* Stories' ::before dash follows the palette too. */
.sic-stories .sicstories-eyebrow:has(.sic-rt-c1)::before { background: #021859; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-c2)::before { background: #bf1304; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-c3)::before { background: #2481a6; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-c4)::before { background: #a64034; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-c5)::before { background: #f2e0df; }
.sic-stories .sicstories-eyebrow:has(.sic-rt-c6)::before { background: #ffffff; }

/* r156: repeated items carry the full editor per item; consistency comes
   from the element tabs styling the shared selector, so the r147
   element-only mode and its "Aa all" button are retired. */

/* r148: pull-quote mode, alpha, link row, unmissable Done */

/* Pull-quote mode shows only the paragraph and quote block tools. */
.sic-rt-dlg.is-pull .sic-rt-bar .sic-rt-blocktool { display: none; }
.sic-rt-dlg.is-pull .sic-rt-bar [data-rt="bq"],
.sic-rt-dlg.is-pull .sic-rt-bar [data-rt="p"] { display: inline-block; }

/* Word-level colour opacity. Applies inside the editor box too. */
.sic-rt-a75 { opacity: .75; }
.sic-rt-a50 { opacity: .5; }
.sic-rt-a25 { opacity: .25; }
/* Icon-sized, matching the 18px swatches beside it. */
.sic-rt-pal select[data-rt-alpha] {
	width: 34px; height: 18px; min-width: 0;
	padding: 0 1px; font-size: 10px; line-height: 1;
	border: 1px solid rgba(0,0,0,.25); border-radius: 9px;
	background: #f7f7fa; text-align: center;
	-webkit-appearance: none; appearance: none;
}

/* Inline link row — replaces the browser prompt. */
.sic-rt-linkrow {
	display: flex; gap: 6px; align-items: center;
	padding: 6px 0 8px;
}
.sic-rt-linkrow input {
	flex: 1; padding: 5px 8px; font-size: 12.5px;
	border: 1px solid #2481a6; border-radius: 5px;
}
.sic-rt-linkrow button {
	padding: 4px 10px; font-size: 12px;
	border: 1px solid rgba(0,0,0,.2); border-radius: 5px;
	background: #f7f7fa; cursor: pointer;
}
.sic-rt-linkrow [data-rt="linkok"] { background: #021859; border-color: #021859; color: #fff; }

/* Done in the brand red, pinned against any theme button rules — it was
   rendering white-on-white on the live editor. */
.sic-rt-back .sic-rt-dlg .sic-rt-foot .sic-rt-apply {
	background: #bf1304 !important;
	border-color: #bf1304 !important;
	color: #ffffff !important;
	min-width: 72px;
}
.sic-rt-back .sic-rt-dlg .sic-rt-foot .sic-rt-apply:hover { background: #a01003 !important; }

/* r154: click-to-edit — the jumped-to field or block flashes briefly. */
.sic-rt-jump {
	outline: 2px solid #bf1304 !important;
	outline-offset: 2px;
	border-radius: 4px;
	animation: sic-rt-jump-fade 1.6s ease forwards;
}
@keyframes sic-rt-jump-fade {
	0%, 60% { outline-color: #bf1304; }
	100%    { outline-color: transparent; }
}