/**
 * Citolume — admin styles for the plugin's own screens.
 *
 * These screens now carry the platform's palette (ticket 123), not WordPress
 * core greys. The tokens below are copied value-for-value from the Worker's
 * `src/account/ui.ts`, so a site owner moving between app.citolume.com and
 * wp-admin sees one product rather than two. The reasoning behind each value
 * lives in that file's comments and is not repeated here; the rules that
 * matter when editing this one:
 *
 * - Cited is the accent navy, not green. Being cited is the product's good
 *   outcome and the product's colour says so. Nothing is lost to
 *   colour-blindness because every badge pairs its colour with a glyph
 *   (✓ ❝ ✗ ! –) — see citolume_question_cell(). Never ship a badge that is
 *   colour alone, or this palette stops being accessible.
 * - --cit-faint is tuned against the darkest ground it lands on (--cit-bg),
 *   not white. Do not lighten it to restore contrast with --cit-ink-3; that
 *   gap was the bug, and the quiet roles separate by size and weight instead.
 * - --cit-attn (orange) is a thing to go and fix. --cit-miss (red) is a
 *   measurement: the engine did not cite you. Keeping them apart is the
 *   difference between a to-do and a verdict.
 *
 * Two deliberate departures from the platform:
 *
 * - The tokens are prefixed --cit-*. The platform owns its whole page and can
 *   call them --accent; here we are a guest in wp-admin beside other plugins,
 *   so the names are namespaced even though their values are not.
 * - No Geist Mono. The platform loads it as a webfont; a wordpress.org plugin
 *   may not fetch assets from a CDN, and bundling a face for five badges is
 *   not worth the kilobytes. The mono stack is the platform's own fallback
 *   chain with the first entry removed.
 *
 * WordPress's own chrome is left alone on purpose: core page titles, core
 * notices and core form controls still look like WordPress, because those are
 * the parts a site owner has already learned. Only our content is ours.
 */

:root {
	--cit-bg: #f7f8fa;
	--cit-card: #fff;
	--cit-line: #e2e5ea;
	--cit-line-2: #ccd2db;

	--cit-ink: #14181f;
	--cit-ink-2: #4b5563;
	--cit-ink-3: #6b7280;
	--cit-faint: #666e7d;

	--cit-brand-ink: #1b3a5c;
	--cit-accent: #1b3a5c;
	--cit-accent-hover: #132b45;
	--cit-nav-on: #eef3f8;

	--cit-cited: #1b3a5c;
	--cit-cited-bg: #e8eef5;
	--cit-cited-line: #c3d3e4;

	--cit-mention: #456e96;
	--cit-mention-bg: #eaf1f8;
	--cit-mention-line: #c3d3e4;

	--cit-miss: #b91c1c;
	--cit-miss-bg: #fef2f2;
	--cit-miss-line: #f3caca;

	--cit-warn-ink: #996800;
	--cit-warn-bg: #fffbeb;
	--cit-warn-line: #f3e3b0;

	--cit-attn: #c2410c;
	--cit-attn-bg: #fdede4;
	--cit-attn-line: #f3c9b0;
	--cit-attn-ground: #fff9f5;
	--cit-attn-ground-line: #f3e3d9;

	--cit-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*
 * The three places we reach outside our own wrapper. All of them are gated on
 * .citolume-screen, which inc/screens.php adds to the body on our screens and
 * nowhere else — a plugin restyling buttons on somebody else's page is the
 * admin-hijacking the directory rejects (guideline 11), and it would be rude
 * regardless of the rules.
 */

/* 1. The ground the cards sit on. wp-admin's own #f0f0f1 is close but cooler;
      #f7f8fa is what the card hairlines were tuned against, and the two
      together are what makes a card read as a card rather than a panel. */
body.citolume-screen #wpcontent,
body.citolume-screen #wpbody-content {
	background: var(--cit-bg);
}

/* 2. Core's primary button. The shape, size and states stay WordPress's —
      only the blue becomes the brand's navy, because a WP-blue Save beside a
      navy score reads as two products in one screen. */
body.citolume-screen .button-primary {
	background: var(--cit-accent);
	border-color: var(--cit-accent);
	color: #fff;
	text-shadow: none;
	box-shadow: none;
}

body.citolume-screen .button-primary:hover,
body.citolume-screen .button-primary:focus {
	background: var(--cit-accent-hover);
	border-color: var(--cit-accent-hover);
	color: #fff;
}

body.citolume-screen .button-primary:focus {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--cit-accent);
}

body.citolume-screen .button-primary:disabled,
body.citolume-screen .button-primary.disabled {
	background: var(--cit-line-2) !important;
	border-color: var(--cit-line-2) !important;
	color: #fff !important;
}

/* 3. Focus and selection inside our screens. Core's ring is WP blue; ours is
      the accent, so the keyboard path through a form stays one colour. */
body.citolume-screen .citolume-wrap :focus-visible,
body.citolume-screen .citolume-wizard-wrap :focus-visible {
	outline: 2px solid var(--cit-accent);
	outline-offset: 2px;
	box-shadow: none;
}

body.citolume-screen .citolume-wrap input:focus,
body.citolume-screen .citolume-wrap textarea:focus,
body.citolume-screen .citolume-wrap select:focus,
body.citolume-screen .citolume-wizard-wrap input:focus,
body.citolume-screen .citolume-wizard-wrap textarea:focus {
	border-color: var(--cit-accent);
	box-shadow: 0 0 0 1px var(--cit-accent);
}

.citolume-wrap,
.citolume-wizard-wrap {
	color: var(--cit-ink-2);
}

/* Links inside our content only. The admin menu and toolbar sit outside both
   wrappers and keep whatever colour scheme the user chose. */
.citolume-wrap a,
.citolume-wizard-wrap a {
	color: var(--cit-accent);
	text-underline-offset: 0.18em;
}

.citolume-wrap a:hover,
.citolume-wizard-wrap a:hover {
	color: var(--cit-accent-hover);
}

/* The "Upgrade" control beside the page title. Core styles it through
   `.wrap .page-title-action` (two classes), so the plain link rule above
   loses to it and the one brand-coloured control on the Overview screen
   stayed WordPress blue. Matched specificity rather than !important. */
.citolume-wrap .page-title-action,
.citolume-wrap .page-title-action:active {
	color: var(--cit-accent);
	border-color: var(--cit-line-2);
	background: var(--cit-card);
}

.citolume-wrap .page-title-action:hover,
.citolume-wrap .page-title-action:focus {
	color: #fff;
	background: var(--cit-accent);
	border-color: var(--cit-accent);
}

.citolume-wrap h1,
.citolume-wrap h2,
.citolume-wrap h3 {
	color: var(--cit-ink);
}

.citolume-wrap ::selection,
.citolume-wizard-wrap ::selection {
	background: #d3dfec;
	color: var(--cit-ink);
}

/* Figures that change between scans. Text faces ship proportional numerals,
   so a score moving 41 → 11 visibly shrinks and table columns jitter. Applied
   to the numbers that move, never to prose. */
.citolume-score__value,
.citolume-funnel__value,
.citolume-pill,
.citolume-score__delta,
.citolume-owners__count,
.citolume-num,
.citolume-questions td,
.citolume-questions th,
.citolume-crawlers td,
.citolume-crawlers th {
	font-variant-numeric: tabular-nums;
}

.citolume-wrap .citolume-card {
	background: var(--cit-card);
	border: 1px solid var(--cit-line);
	border-radius: 10px;
	padding: 20px 22px;
	margin: 18px 0;
	box-sizing: border-box;
}

.citolume-plan-status {
	font-size: 13px;
	font-weight: 400;
	color: var(--cit-ink-3);
	margin-left: 8px;
	vertical-align: middle;
}

.citolume-upgrade {
	float: right;
}

.citolume-muted {
	color: var(--cit-ink-3);
}


/* --- First citation banner --- */

/* The product's good outcome, so it is the product's colour. */
.citolume-first-citation {
	border-left: 4px solid var(--cit-accent);
	background: var(--cit-cited-bg);
	border-color: var(--cit-cited-line);
	border-left-color: var(--cit-accent);
}

.citolume-first-citation a {
	margin-left: 6px;
}

/* --- Coverage gaps on the Questions screen --- */

/* One icon beside the question text, nothing more: the expanded row
   already tells the whole story. A lightbulb, because a gap is an
   opportunity — deliberately not a warning glyph ("!" already means
   engine failure in the cells), and not the design's bare ○, which
   read as nothing. (Iterated 16 Sep 2026.)

   Orange, not red: a gap is a thing to go and write, not a verdict. */
.citolume-gap-mark {
	color: var(--cit-attn);
	cursor: help;
}

.citolume-gap-mark .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
}

.citolume-questions__q .citolume-gap-mark {
	margin-left: 4px;
}

.citolume-detail-grid {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 22px;
}

@media (max-width: 960px) {
	.citolume-detail-grid {
		grid-template-columns: 1fr;
	}
}

.citolume-diagnosis__title {
	margin: 0 0 5px;
	font-size: 13px;
	font-weight: 600;
}

.citolume-diagnosis.is-gap .citolume-diagnosis__title {
	color: var(--cit-attn);
}

.citolume-diagnosis.is-lowwin .citolume-diagnosis__title {
	color: var(--cit-accent);
}

.citolume-diagnosis.is-mention .citolume-diagnosis__title {
	color: var(--cit-mention);
}

.citolume-diagnosis.is-others .citolume-diagnosis__title {
	color: var(--cit-faint);
}

.citolume-diagnosis__body {
	margin: 0;
	font-size: 12.5px;
	color: var(--cit-ink-2);
	line-height: 1.6;
}

/* --- Coverage gaps --- */

.citolume-gaps {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.citolume-gap {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	border: 1px solid var(--cit-attn-ground-line);
	background: var(--cit-attn-ground);
	border-radius: 8px;
	padding: 11px 14px;
}

.citolume-gap__pill {
	font-family: var(--cit-mono);
	font-size: 11px;
	font-weight: 600;
	color: var(--cit-attn);
	background: var(--cit-attn-bg);
	border: 1px solid var(--cit-attn-line);
	border-radius: 11px;
	padding: 3px 9px;
	flex: none;
	white-space: nowrap;
}

.citolume-gap__q {
	flex: 1;
	font-size: 13px;
	color: var(--cit-ink);
	min-width: 200px;
}

.citolume-gap__note {
	font-size: 12px;
	color: var(--cit-ink-3);
	flex: none;
}

/* --- The visibility score: the funnel card's leading row (design 3b') --- */

.citolume-score {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--cit-line);
	margin-bottom: 16px;
	padding-bottom: 16px;
}

.citolume-score__label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
	font-weight: 600;
}

.citolume-score__value {
	font-size: 38px;
	font-weight: 600;
	line-height: 1;
	color: var(--cit-ink);
}

.citolume-score__delta {
	font-size: 12.5px;
	color: var(--cit-ink-3);
}

.citolume-score__delta.is-up {
	color: var(--cit-cited);
	font-weight: 600;
}

.citolume-score__delta.is-scanning {
	color: var(--cit-accent);
}

.citolume-score__how {
	margin-left: auto;
	font-size: 12px;
}

/* A real modal, because an inline expansion reflowed the score row: the
   dialog floats over a dimmed page and moves nothing underneath. */
.citolume-dialog {
	width: 520px;
	max-width: calc(100vw - 48px);
	border: 1px solid var(--cit-line);
	border-radius: 10px;
	padding: 20px 24px;
	box-shadow: 0 10px 34px rgba(20, 24, 31, 0.18);
	color: var(--cit-ink-2);
	font-size: 13px;
	line-height: 1.6;
}

.citolume-dialog::backdrop {
	background: rgba(20, 24, 31, 0.45);
}

.citolume-dialog__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
}

.citolume-dialog__head h2 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--cit-ink);
}

.citolume-dialog__close {
	font-size: 16px;
	line-height: 1;
	color: var(--cit-ink-3);
	text-decoration: none;
}

.citolume-dialog p {
	margin: 0 0 10px;
}

.citolume-dialog p:last-child {
	margin-bottom: 0;
}

.citolume-dialog ul {
	list-style: disc;
	margin: 0 0 10px 18px;
}

/* --- The funnel --- */

.citolume-funnel {
	display: flex;
	align-items: stretch;
	gap: 12px;
	flex-wrap: wrap;
}

.citolume-funnel__stage {
	flex: 1 1 180px;
	min-width: 160px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.citolume-funnel__arrow {
	align-self: center;
	color: var(--cit-line-2);
	font-size: 18px;
}

.citolume-funnel__label {
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cit-faint);
	font-weight: 600;
}

.citolume-here {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border: 1px solid var(--cit-attn-line);
	border-radius: 10px;
	background: var(--cit-attn-bg);
	color: var(--cit-attn);
	font-size: 10px;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 600;
}

.citolume-funnel__value {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cit-ink);
}

.citolume-funnel__value.is-checking {
	color: var(--cit-faint);
	font-weight: 400;
}

/* --- First scan in progress (design: overview-scanning) --- */

.citolume-scanning {
	display: flex;
	gap: 12px;
	align-items: baseline;
	background: var(--cit-cited-bg);
	border: 1px solid var(--cit-cited-line);
	font-size: 13.5px;
	line-height: 1.5;
}

.citolume-scanning__spinner {
	display: inline-block;
	color: var(--cit-accent);
	font-size: 14px;
	animation: citolume-spin 1.6s linear infinite;
}

@keyframes citolume-spin {
	to {
		transform: rotate(360deg);
	}
}

/* The spinner is what says "working", so reduced motion keeps it and stops
   it turning rather than hiding it. */
@media (prefers-reduced-motion: reduce) {
	.citolume-scanning__spinner {
		animation: none;
	}
}

.citolume-funnel__value.is-good {
	color: var(--cit-cited);
}

.citolume-funnel__caption {
	font-size: 12.5px;
	color: var(--cit-ink-3);
	max-width: 220px;
}

.citolume-funnel__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	border-top: 1px solid var(--cit-line);
	margin-top: 14px;
	padding-top: 10px;
	font-size: 12.5px;
	color: var(--cit-ink-3);
}

.citolume-foot-warn {
	color: var(--cit-warn-ink);
}

.citolume-chiplet {
	display: inline-block;
	border: 1px solid var(--cit-line);
	background: var(--cit-card);
	border-radius: 14px;
	padding: 3px 10px;
	margin-right: 6px;
	font-size: 12px;
	color: var(--cit-ink-2);
}

/* --- Who owns your questions --- */

.citolume-who-owns h2 {
	margin: 0 0 4px;
	font-size: 15px;
}

.citolume-owners {
	margin: 12px 0 0;
	max-width: 700px;
}

.citolume-owners li {
	display: grid;
	/* minmax(0,…) on the host, so a long domain ellipsizes instead of
	   wrapping to two lines and pushing the bar out of alignment with the
	   rows above it. */
	grid-template-columns: minmax(0, 180px) 1fr auto;
	gap: 14px;
	align-items: center;
	margin-bottom: 8px;
}

.citolume-owners__host {
	font-size: 13.5px;
	font-weight: 400;
	color: var(--cit-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.citolume-owners__bar {
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 4px;
	height: 12px;
	overflow: hidden;
}

/* Navy, as on the platform. It was the lighter --cit-mention, which reads as
   "mentioned" everywhere else on this screen and said the wrong thing here. */
.citolume-owners__bar span {
	display: block;
	height: 100%;
	background: var(--cit-accent);
	border-radius: 3px;
}

.citolume-owners__count {
	font-size: 12.5px;
	color: var(--cit-ink-3);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* The track the bar runs in. Light, so the navy fill is the figure. */
.citolume-owners__bar {
	min-width: 0;
}

/* --- Next step --- */

/* The platform's card, not a row: heading, the thing to do, the way to do
   it. It was a flex row with an uppercase chip label, which worked when this
   sat full-width under the funnel and stopped working the moment it moved
   into the right column beside the evidence for it. */
.citolume-next-step h2.citolume-next-step__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--cit-ink);
	margin: 0 0 4px;
	letter-spacing: 0;
	text-transform: none;
}

.citolume-next-step p {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cit-ink-2);
}

.citolume-account__label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
	font-weight: 600;
	white-space: nowrap;
}

/* --- Account attachment --- */

.citolume-account {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.citolume-account p {
	flex: 1 1 400px;
	margin: 0;
}

/* --- Questions screen --- */

.citolume-questions-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 16px 0 0;
}

.citolume-questions-bar__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

.citolume-add-question {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}


/* The add form is always visible, as the platform's is. It used to hide
   behind a "+ Add question" toggle, which left the card holding nothing but
   a button and made adding the first question a two-click job. */

.citolume-add-question input[type="text"] {
	min-width: 320px;
}

.citolume-limit-prompt {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	border-left: 4px solid var(--cit-accent);
	background: var(--cit-nav-on);
	border-color: var(--cit-cited-line);
	border-left-color: var(--cit-accent);
}

.citolume-limit-prompt p {
	flex: 1 1 420px;
	margin: 0;
}

/* The engine badge. Mono, because these cells are read as a column of values
   and a proportional face makes "3/4" and "1/4" different widths.

   This block was lost when the Questions CSS was rewritten in 128 — the
   markup kept emitting `.citolume-pill` and every badge rendered as bare
   text for two days. Caught from a screenshot, not from a render count.

   Colour never travels alone: each state pairs its tint with a glyph
   (✓ ❝ ✗ ? !) in citolume_question_cell(). */
.citolume-pill {
	display: inline-block;
	font-family: var(--cit-mono);
	font-size: 11px;
	font-weight: 600;
	border: 1px solid transparent;
	border-radius: 11px;
	padding: 3px 9px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.citolume-pill.is-cited {
	color: var(--cit-cited);
	background: var(--cit-cited-bg);
	border-color: var(--cit-cited-line);
}

.citolume-pill.is-mentioned {
	color: var(--cit-mention);
	background: var(--cit-mention-bg);
	border-color: var(--cit-mention-line);
}

.citolume-pill.is-none {
	color: var(--cit-miss);
	background: var(--cit-miss-bg);
	border-color: var(--cit-miss-line);
}

/* "? unknown" and "! check failed" — our own failure or an engine that did
   not look. Neither is a verdict about the site, so neither is red. */
.citolume-pill.is-unsearched,
.citolume-pill.is-absent {
	color: var(--cit-faint);
	background: var(--cit-bg);
	border-color: var(--cit-line);
}

.citolume-pill.is-failed {
	color: var(--cit-warn-ink);
	background: var(--cit-warn-bg);
	border-color: var(--cit-warn-line);
}

/* --- Questions: cards, not table rows (ticket 128) ---
   The platform's "Questions Screen" shape, ported. Each card carries the
   question, a one-line verdict under it, the per-engine badges and a chevron;
   opening it reads verdict → diagnosis → engine tabs → excerpt → sources.

   The header and the cards are separate elements that must line up, and they
   cannot share a grid — each card is its own <details> and subgrid does not
   reach across them. So they share the numbers below instead. Change a column
   once, here.

   --cit-qcol is 116px because that is the widest badge an engine cell can
   hold: "! no answer" at 11px mono plus the badge's padding and border. Sizing
   to a shorter string leaves the same overflow waiting in a rarer state. */

.citolume-qlist {
	--cit-qcol: 116px;
	--cit-qgap: 16px;
	--cit-qpad: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.citolume-qhead {
	display: flex;
	align-items: center;
	gap: var(--cit-qgap);
	padding: 0 var(--cit-qpad);
}

.citolume-qh {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
}

.citolume-qh--q {
	flex: 1;
	min-width: 0;
}

.citolume-qh--e {
	width: var(--cit-qcol);
	flex: none;
}

.citolume-qh--c {
	width: 32px;
	flex: none;
}

details.citolume-qrow {
	border: 1px solid #dbe0e7;
	border-radius: 10px;
	background: var(--cit-card);
	box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
}

details.citolume-qrow > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--cit-qgap);
	padding: 16px var(--cit-qpad);
	border-radius: 10px;
}

details.citolume-qrow > summary::-webkit-details-marker {
	display: none;
}

details.citolume-qrow > summary:hover {
	background: #fbfcfd;
}

details.citolume-qrow[open] > summary {
	background: var(--cit-nav-on);
	border-radius: 10px 10px 0 0;
}

.citolume-qtext {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.citolume-qtext b {
	font-size: 14.5px;
	color: var(--cit-ink);
	font-weight: 500;
}

.citolume-qsummary {
	font-size: 12.5px;
	color: var(--cit-ink-3);
	font-weight: 400;
}

.citolume-qbadges {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--cit-qgap);
}

/* flex:none, not a bare width: a shrinkable cell lets the widest badge spill
   into its neighbour, which is how "no scan yet" came to sit against the
   column beside it on the platform. */
.citolume-qbadges .citolume-cell {
	width: var(--cit-qcol);
	flex: none;
	text-align: left;
}

/* Each verdict's engine name. The column header carries it while the columns
   line up; the phone layout reveals it per cell instead. */
.citolume-cellname {
	display: none;
}

.citolume-offplan {
	font-family: var(--cit-mono);
	font-size: 11px;
	color: #9aa1ac;
}

/* A column placeholder on a card no scan has reached. The summary line says
   it once; repeating a pill per engine was the noise. */
.citolume-cellnone {
	font-family: var(--cit-mono);
	font-size: 12px;
	color: #c3c9d4;
}

/* A coverage gap is an opening, not four failures. */
.citolume-gappill {
	display: inline-block;
	font-family: var(--cit-mono);
	font-size: 11px;
	font-weight: 600;
	border-radius: 11px;
	padding: 3px 9px;
	white-space: nowrap;
	color: var(--cit-mention);
	background: var(--cit-mention-bg);
	border: 1px solid var(--cit-mention-line);
}

.citolume-qchev {
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid #dbe0e7;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cit-accent);
	font-size: 16px;
	line-height: 1;
	background: var(--cit-card);
	transition: transform 0.15s ease;
}

details.citolume-qrow[open] .citolume-qchev {
	transform: rotate(180deg);
}

.citolume-qpanel {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-top: 1px solid var(--cit-line);
}

.citolume-qverdict {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.citolume-qverdict b {
	font-size: 14px;
	font-weight: 600;
	color: var(--cit-ink);
}

.citolume-qverdict span {
	font-size: 13.5px;
	color: var(--cit-ink-2);
}

.citolume-qverdict.is-cited b {
	color: var(--cit-cited);
}

.citolume-qverdict.is-mention b,
.citolume-qverdict.is-gap b {
	color: var(--cit-mention);
}

.citolume-qverdict.is-miss b {
	color: var(--cit-miss);
}

.citolume-gapnote {
	margin: 0;
	font-size: 13px;
	color: var(--cit-warn-ink);
}

.citolume-gapnote b {
	color: var(--cit-warn-ink);
}

.citolume-qfoot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	color: var(--cit-ink-3);
}

.citolume-qfoot form {
	margin: 0;
}

.citolume-removebtn {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--cit-miss);
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Why it's missing --- */

details.citolume-diag {
	border: 1px solid var(--cit-line);
	border-radius: 10px;
}

details.citolume-diag > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	flex-wrap: wrap;
	border-radius: 10px;
}

details.citolume-diag > summary::-webkit-details-marker {
	display: none;
}

details.citolume-diag > summary:hover {
	background: #fbfcfd;
}

.citolume-diag__k {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
}

.citolume-diag__t {
	flex: 1;
	min-width: 180px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cit-ink);
}

.citolume-diag__more {
	font-size: 13px;
	color: var(--cit-accent);
	font-weight: 600;
}

.citolume-diag__body {
	border-top: 1px solid #eceef1;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.citolume-diag__body p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cit-ink-2);
}

/* Necessary, not sufficient — said before the checklist is read, not after
   someone has worked through it and stayed uncited. */
.citolume-diag__limits {
	font-size: 12.5px !important;
	line-height: 1.55;
	color: var(--cit-faint) !important;
	background: #fafbfc;
	border: 1px solid #eceef1;
	border-radius: 7px;
	padding: 9px 12px;
}

.citolume-diag__limits b {
	color: var(--cit-ink-2);
}

/* --- The engines' own words (126, restyled 128) --- */

.citolume-acard {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.citolume-atabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.citolume-atab {
	border: 1px solid var(--cit-line);
	background: var(--cit-card);
	color: var(--cit-ink-2);
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 12.5px;
	cursor: pointer;
}

.citolume-atab.is-on {
	background: var(--cit-nav-on);
	border-color: var(--cit-cited-line);
	color: var(--cit-accent);
	font-weight: 600;
}

.citolume-apanel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The answer. 15px/1.7 at 68ch is the platform's reading measure — this is
   prose, and a 200-character line is skimmed past, not read. */
.citolume-excerpt {
	font-size: 15px;
	line-height: 1.7;
	color: var(--cit-ink-2);
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 68ch;
}

.citolume-excerpt p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* Where the site was named. Amber, not the accent: this marks a position in
   someone else's prose, and the accent means "cited" everywhere else. */
.citolume-excerpt mark {
	background: #fef3c7;
	color: inherit;
	border-radius: 3px;
	padding: 0 2px;
}

.citolume-excerpt code {
	font-family: var(--cit-mono);
	font-size: 13px;
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 4px;
	padding: 1px 5px;
}

.citolume-readfull {
	display: flex;
	align-items: center;
	gap: 14px;
}

.citolume-readfull a {
	color: var(--cit-accent);
	font-weight: 600;
	font-size: 13.5px;
}

.citolume-expired {
	border: 1px dashed var(--cit-line-2);
	border-radius: 8px;
	background: #fafbfc;
	padding: 18px;
	font-size: 13.5px;
	color: var(--cit-ink-2);
}

/* One ranked list, your pages first. Two blocks — yours, then everyone
   else's — split one ranking in half and made the comparison the screen
   exists for into arithmetic. */
.citolume-asources {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.citolume-srcgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px 16px;
}

.citolume-src {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 6px;
}

.citolume-src.is-you {
	background: var(--cit-nav-on);
}

.citolume-src__n {
	width: 16px;
	font-family: var(--cit-mono);
	font-size: 11px;
	color: #9aa1ac;
	font-variant-numeric: tabular-nums;
}

.citolume-src__i {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	background: #eef0f3;
	color: var(--cit-ink-2);
}

.citolume-src.is-you .citolume-src__i {
	background: var(--cit-accent);
	color: #fff;
}

.citolume-src__h {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	color: var(--cit-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.citolume-src.is-you .citolume-src__h {
	font-weight: 600;
}

.citolume-src__t {
	font-family: var(--cit-mono);
	font-size: 11px;
	color: var(--cit-accent);
	font-weight: 600;
}

/* --- The full answer, in an overlay ---
   Opened by :target — a real link to a real element — so it works with
   scripting off, which a <dialog> does not. The scrim is a link back to the
   card, so clicking outside closes it the way people expect, and Esc is the
   one job left for the script. */

.citolume-answerfull {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.citolume-answerfull:target {
	display: flex;
}

.citolume-answerfull__scrim {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
}

.citolume-answerfull__box {
	position: relative;
	width: min(960px, 100%);
	max-height: calc(100vh - 64px);
	background: var(--cit-card);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.citolume-answerfull__head {
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--cit-line);
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.citolume-answerfull__head > div {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.citolume-answerfull__q {
	font-size: 18px;
	font-weight: 600;
	color: var(--cit-ink);
	line-height: 1.35;
	margin: 0;
}

.citolume-answerfull__x {
	font-size: 16px;
	color: var(--cit-ink-3);
	padding: 4px 8px;
	border-radius: 6px;
	text-decoration: none;
}

.citolume-answerfull__x:hover {
	background: #f2f4f8;
	text-decoration: none;
}

.citolume-answerfull .citolume-runs {
	padding: 12px 24px 0;
	margin: 0;
}

/* Answer left, the sources it grounded on right — the platform's two-column
   overlay. Reading the answer without the list leaves the one question the
   overlay exists to settle unanswered on the screen showing the evidence. */
.citolume-answerfull__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	min-height: 0;
	flex: 1;
}

.citolume-answerfull__text {
	overflow-y: auto;
	padding: 20px 24px 28px;
	scrollbar-width: thin;
	scrollbar-color: var(--cit-line-2) transparent;
}

.citolume-answerfull__side {
	border-left: 1px solid var(--cit-line);
	background: #fbfcfd;
	padding: 18px 16px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--cit-line-2) transparent;
}

/* One column in the side panel: 260px cannot hold the two the panel grid
   below the cards uses. */
.citolume-answerfull__side .citolume-srcgrid {
	grid-template-columns: 1fr;
}

.citolume-answerfull__note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
}

/* Under ~800px the side column stops being a column and follows the answer. */
@media (max-width: 860px) {
	.citolume-answerfull__cols {
		grid-template-columns: 1fr;
		overflow-y: auto;
	}

	.citolume-answerfull__side {
		border-left: 0;
		border-top: 1px solid var(--cit-line);
	}
}

/* An engine this plan does not ask. Not a button — there is nothing behind
   it — so it reads as a label that names the plan which would. */
.citolume-atab.is-off {
	font-family: var(--cit-mono);
	font-size: 11px;
	color: #9aa1ac;
	background: transparent;
	border-color: transparent;
	cursor: default;
	align-self: center;
	padding: 5px 4px;
}

.citolume-answerfull__text .citolume-excerpt {
	font-size: 15.5px;
	line-height: 1.75;
	max-width: 66ch;
}

.citolume-answerfull__foot {
	padding: 12px 24px;
	border-top: 1px solid var(--cit-line);
	font-size: 12.5px;
	color: var(--cit-ink-3);
}

.citolume-runs {
	display: flex;
	align-items: center;
	gap: 6px;
}

.citolume-runs__label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
	font-weight: 600;
}

.citolume-runbtn {
	border: 1px solid var(--cit-line);
	background: var(--cit-card);
	color: var(--cit-ink-2);
	border-radius: 50%;
	width: 26px;
	height: 26px;
	padding: 0;
	line-height: 1;
	font-size: 12.5px;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.citolume-runbtn.is-on {
	background: var(--cit-nav-on);
	border-color: var(--cit-cited-line);
	color: var(--cit-accent);
	font-weight: 600;
}

/* Phones: the badge columns stop pretending to be columns and each cell
   names its own engine, because a 116px grid does not fit. */
@media (max-width: 782px) {
	.citolume-qhead {
		display: none;
	}

	details.citolume-qrow > summary {
		flex-wrap: wrap;
	}

	.citolume-qbadges {
		flex-wrap: wrap;
		gap: 6px;
	}

	.citolume-qbadges .citolume-cell {
		width: auto;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.citolume-cellname {
		display: inline;
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--cit-faint);
	}
}

.citolume-legend {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 14px 0 0;
	padding: 0 var(--cit-qpad, 20px);
	font-size: 12px;
	color: var(--cit-ink-3);
}

.citolume-legend__note {
	margin-left: auto;
}

/* --- llms.txt screen --- */

/* Card titles are 15/600 across the product (platform tokens). */
.citolume-wrap .citolume-card h2 {
	font-size: 15px;
	font-weight: 600;
	color: var(--cit-ink);
	margin: 0 0 4px;
}

.citolume-llms-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 16px 0 0;
}

.citolume-llms-bar__file {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12.5px;
}

.citolume-llms-bar__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Something to go and fix, so orange rather than red. */
.citolume-llms-attention {
	background: var(--cit-attn-ground);
	border: 1px solid var(--cit-attn-ground-line);
	border-left: 4px solid var(--cit-attn);
	border-radius: 0 8px 8px 0;
	padding: 13px 16px;
	margin: 18px 0;
}

.citolume-llms-attention p {
	margin: 3px 0 0;
	font-size: 12.5px;
	color: var(--cit-ink-2);
}

.citolume-llms-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.citolume-llms-row > div {
	flex: 1 1 400px;
}

.citolume-llms-row .citolume-muted,
.citolume-llms-edit-head + .citolume-muted {
	margin: 0;
}

/* The forms hide behind their buttons where JS runs; without JS they show. */
body.js .citolume-llms-form:not(.is-open) {
	display: none;
}

.citolume-llms-form {
	flex-basis: 100%;
	margin-top: 8px;
}

.citolume-llms-form textarea {
	width: 100%;
	max-width: 760px;
}

.citolume-llms-edit-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.citolume-automatic-pill {
	font-family: var(--cit-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	font-weight: 600;
	color: var(--cit-accent);
	background: var(--cit-nav-on);
	border: 1px solid var(--cit-cited-line);
	border-radius: 10px;
	padding: 3px 9px;
}

.citolume-llms-preview {
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 14px 18px;
	font-family: var(--cit-mono);
	font-size: 12px;
	line-height: 2;
	color: var(--cit-ink-2);
	white-space: pre-wrap;
	overflow-x: auto;
	margin: 10px 0 0;
	scrollbar-width: thin;
	scrollbar-color: var(--cit-line-2) transparent;
}

.citolume-llms-how {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-top: 14px;
}

.citolume-llms-how > div {
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 13px 14px;
}

.citolume-llms-how strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cit-accent);
	margin-bottom: 5px;
}

.citolume-llms-how p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--cit-ink-2);
}

@media (max-width: 960px) {
	.citolume-llms-how {
		grid-template-columns: 1fr;
	}
}

/* --- Settings screen --- */

.citolume-kv th {
	text-align: left;
	font-weight: 400;
	color: var(--cit-ink-3);
	padding: 4px 24px 4px 0;
	width: 120px;
	vertical-align: top;
}

.citolume-kv td {
	padding: 4px 0;
	color: var(--cit-ink);
}

.citolume-state-good {
	color: var(--cit-cited);
	font-weight: 600;
}

.citolume-state-warn {
	color: var(--cit-warn-ink);
}

.citolume-key-form {
	margin-top: 12px;
}

.citolume-key-form input[type="text"] {
	min-width: 300px;
	margin: 0 6px;
}

.citolume-uninstall-note {
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 11px 14px;
	color: var(--cit-ink-2);
	max-width: 760px;
}

/* --- Setup wizard --- */

.citolume-wizard-wrap {
	max-width: 720px;
	margin: 40px auto;
}

.citolume-wizard-steps {
	display: flex;
	gap: 24px;
	justify-content: center;
	margin: 0 0 24px;
	color: var(--cit-faint);
}

.citolume-wizard-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.citolume-wizard-steps__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--cit-line-2);
	background: var(--cit-card);
	font-size: 12px;
}

.citolume-wizard-steps li.is-current {
	color: var(--cit-ink);
	font-weight: 600;
}

.citolume-wizard-steps li.is-current .citolume-wizard-steps__dot {
	background: var(--cit-accent);
	border-color: var(--cit-accent);
	color: #fff;
}

.citolume-wizard-steps li.is-done {
	color: var(--cit-ink-2);
}

.citolume-wizard-steps li.is-done .citolume-wizard-steps__dot {
	color: var(--cit-accent);
	border-color: var(--cit-cited-line);
	background: var(--cit-cited-bg);
}

.citolume-wizard-card {
	padding: 28px 32px;
}

.citolume-wizard-card h1 {
	margin-top: 0;
	color: var(--cit-ink);
}

.citolume-disclosure {
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 13px 16px;
	margin: 18px 0;
}

.citolume-disclosure p {
	margin: 6px 0 0;
}

.citolume-wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
}

.citolume-wizard-connect {
	text-align: center;
	margin: 24px 0 12px;
}

.citolume-wizard-alt {
	text-align: center;
}

.citolume-wizard-questions {
	margin: 16px 0;
}

.citolume-wizard-questions > li {
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 11px 14px;
	margin-bottom: 8px;
}

.citolume-wizard-questions .citolume-hard-to-win {
	margin: 8px 0 0 24px;
}

.citolume-wizard-custom input[type="text"] {
	width: 100%;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* --- Crawlers screen --- */

.citolume-banner-good {
	border-left: 4px solid var(--cit-accent);
}

.citolume-banner-warn {
	border-left: 4px solid var(--cit-attn);
}

.citolume-crawlers {
	width: 100%;
	border-collapse: collapse;
}

.citolume-crawlers th,
.citolume-crawlers td {
	text-align: left;
	padding: 9px 12px;
}

.citolume-crawlers thead th {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
	border-bottom: 1px solid var(--cit-line);
}

.citolume-crawlers tbody td {
	border-top: 1px solid var(--cit-line);
}

.citolume-num {
	text-align: right !important;
	white-space: nowrap;
}

.citolume-verdict.is-allowed {
	color: var(--cit-cited);
	font-weight: 600;
}

.citolume-verdict.is-blocked {
	color: var(--cit-miss);
	font-weight: 600;
}

.citolume-verdict.is-norule {
	color: var(--cit-faint);
}

.citolume-verdict.is-unknown {
	color: var(--cit-warn-ink);
}

.citolume-crawlers-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 18px;
}

.citolume-crawlers-grid .citolume-card {
	margin: 0;
	max-width: none;
}

.citolume-crawlers-grid h2 {
	margin: 0 0 10px;
	font-size: 15px;
}

.citolume-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 120px;
	margin-bottom: 8px;
}

.citolume-bars span {
	flex: 1;
	background: var(--cit-accent);
	border-radius: 3px 3px 0 0;
	min-width: 4px;
}

.citolume-cache-note {
	border-left: 3px solid var(--cit-attn-line);
	background: var(--cit-attn-ground);
	border-radius: 0 6px 6px 0;
	padding: 9px 12px;
	color: var(--cit-ink-2);
}

.citolume-toppaths {
	width: 100%;
}

.citolume-toppaths td {
	padding: 7px 0;
	border-top: 1px solid var(--cit-line);
	overflow-wrap: anywhere;
}

@media (max-width: 960px) {
	.citolume-crawlers-grid {
		grid-template-columns: 1fr;
	}
}

.citolume-claim-block {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cit-line);
}

.citolume-claim-code {
	font-family: var(--cit-mono);
	font-size: 16px;
	letter-spacing: 0.12em;
	padding: 3px 8px;
}

/* --- AI readiness (125, matched to the platform in 135) --- */

/* The score band: how many pass, the headline, a pip per check, and the
   re-check control. The pips are in the page's own reading order — findings
   first, then the passing groups — because a progress bar whose segments do
   not correspond to anything visible is decoration. */
.citolume-hscore {
	background: var(--cit-card);
	border: 1px solid var(--cit-line);
	border-radius: 10px;
	padding: 22px 24px;
	margin: 16px 0 14px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
}

.citolume-hscore__n {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-variant-numeric: tabular-nums;
}

.citolume-hscore__n b {
	font-size: 44px;
	font-weight: 700;
	color: var(--cit-ink);
	letter-spacing: -0.03em;
	line-height: 1;
}

.citolume-hscore__n span {
	font-size: 20px;
	color: #9aa1ac;
	font-weight: 500;
}

.citolume-hscore__mid {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.citolume-hscore__head {
	font-size: 15px;
	font-weight: 600;
	color: var(--cit-ink);
}

.citolume-hscore__when {
	font-family: var(--cit-mono);
	font-size: 11.5px;
	color: var(--cit-faint);
}

.citolume-hscore__act {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}

.citolume-hscore__act form {
	margin: 0;
}

.citolume-hscore__note {
	font-size: 11.5px;
	color: var(--cit-faint);
	max-width: 230px;
	text-align: right;
}

.citolume-hpips {
	display: grid;
	gap: 4px;
}

.citolume-hpip {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: var(--cit-accent);
	position: relative;
}

.citolume-hpip:hover {
	opacity: 0.75;
}

/* A 6px target is not a target. The pseudo-element gives it a real one
   without changing the bar's height. */
.citolume-hpip::after {
	content: '';
	position: absolute;
	inset: -7px 0;
}

.citolume-hpip:focus-visible {
	outline: 2px solid var(--cit-accent);
	outline-offset: 3px;
}

.citolume-hpip.is-bad {
	background: var(--cit-attn);
}

.citolume-hpip.is-unknown {
	background: #d6dae1;
}

@media (max-width: 782px) {
	.citolume-hscore {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.citolume-hscore__act {
		align-items: flex-start;
	}

	.citolume-hscore__note {
		text-align: left;
		max-width: none;
	}
}

.citolume-subhead {
	margin: 22px 0 10px;
}

.citolume-subhead h2 {
	font-size: 15px;
	font-weight: 600;
	color: var(--cit-ink);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.citolume-subhead h2 span {
	font-family: var(--cit-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--cit-faint);
	font-variant-numeric: tabular-nums;
}

.citolume-hgrouphead {
	margin: 0 0 8px;
}

.citolume-eyebrow {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
	font-weight: 600;
}

/* Each check is its own card, not a row in a list — the 8 October shape.
   One shape for pass, finding and "could not tell"; the mark and the chip
   carry the difference. */
.citolume-hrows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 22px;
}

.citolume-hrow {
	background: var(--cit-card);
	border: 1px solid var(--cit-line);
	border-radius: 10px;
	overflow: hidden;
}

.citolume-hrow.is-bad {
	border-color: var(--cit-attn-line);
}

/* A pip's link lands here. */
.citolume-hrow:target {
	box-shadow: 0 0 0 2px var(--cit-nav-on);
}

.citolume-hrow.is-bad:target {
	box-shadow: 0 0 0 2px var(--cit-attn-bg);
}

.citolume-hrow > summary,
.citolume-hrow.is-flat {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 13px 18px;
	list-style: none;
}

.citolume-hrow > summary {
	cursor: pointer;
}

.citolume-hrow > summary::-webkit-details-marker {
	display: none;
}

.citolume-hrow > summary:hover {
	background: #fafbfc;
}

.citolume-hrow.is-bad > summary:hover {
	background: var(--cit-attn-ground);
}

.citolume-hrow > summary:focus-visible {
	outline: 2px solid var(--cit-accent);
	outline-offset: -2px;
}

/* Orange on a finding, not red: this is a thing to go and fix, not a
   measurement that went against you. */
.citolume-hrow__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	font-weight: 700;
	font-size: 13px;
	background: var(--cit-cited-bg);
	color: var(--cit-cited);
}

.citolume-hrow.is-bad .citolume-hrow__mark {
	background: var(--cit-attn-bg);
	color: var(--cit-attn);
}

.citolume-hrow.is-unknown .citolume-hrow__mark {
	background: var(--cit-bg);
	color: var(--cit-faint);
}

.citolume-hrow__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.citolume-hrow__head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.citolume-hrow__head b {
	font-size: 14px;
	font-weight: 600;
	color: var(--cit-ink);
}

.citolume-hrow__tag {
	font-family: var(--cit-mono);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cit-attn);
	background: var(--cit-attn-bg);
	border-radius: 10px;
	padding: 1px 8px;
}

.citolume-hrow.is-unknown .citolume-hrow__tag {
	color: var(--cit-faint);
	background: var(--cit-bg);
}

.citolume-hrow__body p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--cit-ink-2);
}

.citolume-hrow__chev {
	flex: none;
	width: 24px;
	height: 24px;
	border: 1px solid var(--cit-line);
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cit-ink-3);
	font-size: 13px;
	line-height: 1;
	background: var(--cit-card);
	transition: transform 0.15s ease;
}

.citolume-hrow.is-bad .citolume-hrow__chev {
	border-color: var(--cit-attn-line);
	color: var(--cit-attn);
}

.citolume-hrow[open] .citolume-hrow__chev {
	transform: rotate(180deg);
}

.citolume-hrow__panel {
	padding: 0 18px 14px 56px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.citolume-hrow__panel p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cit-ink-2);
	max-width: 70ch;
}

.citolume-hrow__ev {
	font-size: 12.5px;
	color: var(--cit-accent);
	font-weight: 500;
	font-family: var(--cit-mono);
}

/* The fix, as something to paste. On its own tinted band so it reads as the
   answer rather than another paragraph. */
.citolume-hrow__snip {
	border-top: 1px solid var(--cit-attn-ground-line);
	background: var(--cit-attn-ground);
	padding: 12px 18px 14px 56px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.citolume-hrow__snip .k {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--cit-ink-2);
}

.citolume-hrow__snip code {
	display: block;
	font-family: var(--cit-mono);
	font-size: 12px;
	color: var(--cit-ink);
	background: var(--cit-card);
	border: 1px solid #eceef1;
	border-radius: 6px;
	padding: 9px 12px;
	overflow: auto;
	white-space: pre;
}

.citolume-hchips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.citolume-hchip {
	font-family: var(--cit-mono);
	font-size: 10.5px;
	color: var(--cit-accent);
	background: var(--cit-nav-on);
	border-radius: 4px;
	padding: 1px 6px;
}

/* --- Questions: cards, not table rows (ticket 128) ---
   The platform's "Questions Screen" shape, ported. Each card carries the
   question, a one-line verdict under it, the per-engine badges and a chevron;
   opening it reads verdict → diagnosis → engine tabs → excerpt → sources.

   The header and the cards are separate elements that must line up, and they
   cannot share a grid — each card is its own <details> and subgrid does not
   reach across them. So they share the numbers below instead. Change a column
   once, here.

   --cit-qcol is 116px because that is the widest badge an engine cell can
   hold: "! no answer" at 11px mono plus the badge's padding and border. Sizing
   to a shorter string leaves the same overflow waiting in a rarer state. */

.citolume-qlist {
	--cit-qcol: 116px;
	--cit-qgap: 16px;
	--cit-qpad: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 16px;
}

.citolume-qhead {
	display: flex;
	align-items: center;
	gap: var(--cit-qgap);
	padding: 0 var(--cit-qpad);
}

.citolume-qh {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
}

.citolume-qh--q {
	flex: 1;
	min-width: 0;
}

.citolume-qh--e {
	width: var(--cit-qcol);
	flex: none;
}

.citolume-qh--c {
	width: 32px;
	flex: none;
}

details.citolume-qrow {
	border: 1px solid #dbe0e7;
	border-radius: 10px;
	background: var(--cit-card);
	box-shadow: 0 1px 2px rgba(20, 24, 31, 0.04);
}

details.citolume-qrow > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: var(--cit-qgap);
	padding: 16px var(--cit-qpad);
	border-radius: 10px;
}

details.citolume-qrow > summary::-webkit-details-marker {
	display: none;
}

details.citolume-qrow > summary:hover {
	background: #fbfcfd;
}

details.citolume-qrow[open] > summary {
	background: var(--cit-nav-on);
	border-radius: 10px 10px 0 0;
}

.citolume-qtext {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.citolume-qtext b {
	font-size: 14.5px;
	color: var(--cit-ink);
	font-weight: 500;
}

.citolume-qsummary {
	font-size: 12.5px;
	color: var(--cit-ink-3);
	font-weight: 400;
}

.citolume-qbadges {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--cit-qgap);
}

/* flex:none, not a bare width: a shrinkable cell lets the widest badge spill
   into its neighbour, which is how "no scan yet" came to sit against the
   column beside it on the platform. */
.citolume-qbadges .citolume-cell {
	width: var(--cit-qcol);
	flex: none;
	text-align: left;
}

/* Each verdict's engine name. The column header carries it while the columns
   line up; the phone layout reveals it per cell instead. */
.citolume-cellname {
	display: none;
}

.citolume-offplan {
	font-family: var(--cit-mono);
	font-size: 11px;
	color: #9aa1ac;
}

/* A column placeholder on a card no scan has reached. The summary line says
   it once; repeating a pill per engine was the noise. */
.citolume-cellnone {
	font-family: var(--cit-mono);
	font-size: 12px;
	color: #c3c9d4;
}

/* A coverage gap is an opening, not four failures. */
.citolume-gappill {
	display: inline-block;
	font-family: var(--cit-mono);
	font-size: 11px;
	font-weight: 600;
	border-radius: 11px;
	padding: 3px 9px;
	white-space: nowrap;
	color: var(--cit-mention);
	background: var(--cit-mention-bg);
	border: 1px solid var(--cit-mention-line);
}

.citolume-qchev {
	width: 32px;
	height: 32px;
	flex: none;
	border: 1px solid #dbe0e7;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cit-accent);
	font-size: 16px;
	line-height: 1;
	background: var(--cit-card);
	transition: transform 0.15s ease;
}

details.citolume-qrow[open] .citolume-qchev {
	transform: rotate(180deg);
}

.citolume-qpanel {
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-top: 1px solid var(--cit-line);
}

.citolume-qverdict {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.citolume-qverdict b {
	font-size: 14px;
	font-weight: 600;
	color: var(--cit-ink);
}

.citolume-qverdict span {
	font-size: 13.5px;
	color: var(--cit-ink-2);
}

.citolume-qverdict.is-cited b {
	color: var(--cit-cited);
}

.citolume-qverdict.is-mention b,
.citolume-qverdict.is-gap b {
	color: var(--cit-mention);
}

.citolume-qverdict.is-miss b {
	color: var(--cit-miss);
}

.citolume-gapnote {
	margin: 0;
	font-size: 13px;
	color: var(--cit-warn-ink);
}

.citolume-gapnote b {
	color: var(--cit-warn-ink);
}

.citolume-qfoot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	color: var(--cit-ink-3);
}

.citolume-qfoot form {
	margin: 0;
}

.citolume-removebtn {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--cit-miss);
	font-size: 12.5px;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* --- Why it's missing --- */

details.citolume-diag {
	border: 1px solid var(--cit-line);
	border-radius: 10px;
}

details.citolume-diag > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	flex-wrap: wrap;
	border-radius: 10px;
}

details.citolume-diag > summary::-webkit-details-marker {
	display: none;
}

details.citolume-diag > summary:hover {
	background: #fbfcfd;
}

.citolume-diag__k {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
}

.citolume-diag__t {
	flex: 1;
	min-width: 180px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cit-ink);
}

.citolume-diag__more {
	font-size: 13px;
	color: var(--cit-accent);
	font-weight: 600;
}

.citolume-diag__body {
	border-top: 1px solid #eceef1;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.citolume-diag__body p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cit-ink-2);
}

/* Necessary, not sufficient — said before the checklist is read, not after
   someone has worked through it and stayed uncited. */
.citolume-diag__limits {
	font-size: 12.5px !important;
	line-height: 1.55;
	color: var(--cit-faint) !important;
	background: #fafbfc;
	border: 1px solid #eceef1;
	border-radius: 7px;
	padding: 9px 12px;
}

.citolume-diag__limits b {
	color: var(--cit-ink-2);
}

/* --- The engines' own words (126, restyled 128) --- */

.citolume-acard {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.citolume-atabs {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

.citolume-atab {
	border: 1px solid var(--cit-line);
	background: var(--cit-card);
	color: var(--cit-ink-2);
	border-radius: 8px;
	padding: 5px 12px;
	font-size: 12.5px;
	cursor: pointer;
}

.citolume-atab.is-on {
	background: var(--cit-nav-on);
	border-color: var(--cit-cited-line);
	color: var(--cit-accent);
	font-weight: 600;
}

.citolume-apanel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The answer. 15px/1.7 at 68ch is the platform's reading measure — this is
   prose, and a 200-character line is skimmed past, not read. */
.citolume-excerpt {
	font-size: 15px;
	line-height: 1.7;
	color: var(--cit-ink-2);
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 68ch;
}

.citolume-excerpt p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

/* Where the site was named. Amber, not the accent: this marks a position in
   someone else's prose, and the accent means "cited" everywhere else. */
.citolume-excerpt mark {
	background: #fef3c7;
	color: inherit;
	border-radius: 3px;
	padding: 0 2px;
}

.citolume-excerpt code {
	font-family: var(--cit-mono);
	font-size: 13px;
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 4px;
	padding: 1px 5px;
}

.citolume-readfull {
	display: flex;
	align-items: center;
	gap: 14px;
}

.citolume-readfull a {
	color: var(--cit-accent);
	font-weight: 600;
	font-size: 13.5px;
}

.citolume-expired {
	border: 1px dashed var(--cit-line-2);
	border-radius: 8px;
	background: #fafbfc;
	padding: 18px;
	font-size: 13.5px;
	color: var(--cit-ink-2);
}

/* One ranked list, your pages first. Two blocks — yours, then everyone
   else's — split one ranking in half and made the comparison the screen
   exists for into arithmetic. */
.citolume-asources {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.citolume-srcgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 6px 16px;
}

.citolume-src {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 6px;
}

.citolume-src.is-you {
	background: var(--cit-nav-on);
}

.citolume-src__n {
	width: 16px;
	font-family: var(--cit-mono);
	font-size: 11px;
	color: #9aa1ac;
	font-variant-numeric: tabular-nums;
}

.citolume-src__i {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	background: #eef0f3;
	color: var(--cit-ink-2);
}

.citolume-src.is-you .citolume-src__i {
	background: var(--cit-accent);
	color: #fff;
}

.citolume-src__h {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	color: var(--cit-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.citolume-src.is-you .citolume-src__h {
	font-weight: 600;
}

.citolume-src__t {
	font-family: var(--cit-mono);
	font-size: 11px;
	color: var(--cit-accent);
	font-weight: 600;
}

/* --- The full answer, in an overlay ---
   Opened by :target — a real link to a real element — so it works with
   scripting off, which a <dialog> does not. The scrim is a link back to the
   card, so clicking outside closes it the way people expect, and Esc is the
   one job left for the script. */

.citolume-answerfull {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 32px;
}

.citolume-answerfull:target {
	display: flex;
}

.citolume-answerfull__scrim {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
}

.citolume-answerfull__box {
	position: relative;
	width: min(960px, 100%);
	max-height: calc(100vh - 64px);
	background: var(--cit-card);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.citolume-answerfull__head {
	padding: 20px 24px 16px;
	border-bottom: 1px solid var(--cit-line);
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.citolume-answerfull__head > div {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.citolume-answerfull__q {
	font-size: 18px;
	font-weight: 600;
	color: var(--cit-ink);
	line-height: 1.35;
	margin: 0;
}

.citolume-answerfull__x {
	font-size: 16px;
	color: var(--cit-ink-3);
	padding: 4px 8px;
	border-radius: 6px;
	text-decoration: none;
}

.citolume-answerfull__x:hover {
	background: #f2f4f8;
	text-decoration: none;
}

.citolume-answerfull .citolume-runs {
	padding: 12px 24px 0;
	margin: 0;
}

/* Answer left, the sources it grounded on right — the platform's two-column
   overlay. Reading the answer without the list leaves the one question the
   overlay exists to settle unanswered on the screen showing the evidence. */
.citolume-answerfull__cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	min-height: 0;
	flex: 1;
}

.citolume-answerfull__text {
	overflow-y: auto;
	padding: 20px 24px 28px;
	scrollbar-width: thin;
	scrollbar-color: var(--cit-line-2) transparent;
}

.citolume-answerfull__side {
	border-left: 1px solid var(--cit-line);
	background: #fbfcfd;
	padding: 18px 16px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--cit-line-2) transparent;
}

/* One column in the side panel: 260px cannot hold the two the panel grid
   below the cards uses. */
.citolume-answerfull__side .citolume-srcgrid {
	grid-template-columns: 1fr;
}

.citolume-answerfull__note {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
}

/* Under ~800px the side column stops being a column and follows the answer. */
@media (max-width: 860px) {
	.citolume-answerfull__cols {
		grid-template-columns: 1fr;
		overflow-y: auto;
	}

	.citolume-answerfull__side {
		border-left: 0;
		border-top: 1px solid var(--cit-line);
	}
}

/* An engine this plan does not ask. Not a button — there is nothing behind
   it — so it reads as a label that names the plan which would. */
.citolume-atab.is-off {
	font-family: var(--cit-mono);
	font-size: 11px;
	color: #9aa1ac;
	background: transparent;
	border-color: transparent;
	cursor: default;
	align-self: center;
	padding: 5px 4px;
}

.citolume-answerfull__text .citolume-excerpt {
	font-size: 15.5px;
	line-height: 1.75;
	max-width: 66ch;
}

.citolume-answerfull__foot {
	padding: 12px 24px;
	border-top: 1px solid var(--cit-line);
	font-size: 12.5px;
	color: var(--cit-ink-3);
}

.citolume-runs {
	display: flex;
	align-items: center;
	gap: 6px;
}

.citolume-runs__label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
	font-weight: 600;
}

.citolume-runbtn {
	border: 1px solid var(--cit-line);
	background: var(--cit-card);
	color: var(--cit-ink-2);
	border-radius: 50%;
	width: 26px;
	height: 26px;
	padding: 0;
	line-height: 1;
	font-size: 12.5px;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.citolume-runbtn.is-on {
	background: var(--cit-nav-on);
	border-color: var(--cit-cited-line);
	color: var(--cit-accent);
	font-weight: 600;
}

/* Phones: the badge columns stop pretending to be columns and each cell
   names its own engine, because a 116px grid does not fit. */
@media (max-width: 782px) {
	.citolume-qhead {
		display: none;
	}

	details.citolume-qrow > summary {
		flex-wrap: wrap;
	}

	.citolume-qbadges {
		flex-wrap: wrap;
		gap: 6px;
	}

	.citolume-qbadges .citolume-cell {
		width: auto;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.citolume-cellname {
		display: inline;
		font-size: 11px;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--cit-faint);
	}
}

.citolume-legend {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 14px 0 0;
	padding: 0 var(--cit-qpad, 20px);
	font-size: 12px;
	color: var(--cit-ink-3);
}

.citolume-legend__note {
	margin-left: auto;
}

/* --- llms.txt screen --- */

/* Card titles are 15/600 across the product (platform tokens). */
.citolume-wrap .citolume-card h2 {
	font-size: 15px;
	font-weight: 600;
	color: var(--cit-ink);
	margin: 0 0 4px;
}

.citolume-llms-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 16px 0 0;
}

.citolume-llms-bar__file {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 12.5px;
}

.citolume-llms-bar__actions {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* Something to go and fix, so orange rather than red. */
.citolume-llms-attention {
	background: var(--cit-attn-ground);
	border: 1px solid var(--cit-attn-ground-line);
	border-left: 4px solid var(--cit-attn);
	border-radius: 0 8px 8px 0;
	padding: 13px 16px;
	margin: 18px 0;
}

.citolume-llms-attention p {
	margin: 3px 0 0;
	font-size: 12.5px;
	color: var(--cit-ink-2);
}

.citolume-llms-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.citolume-llms-row > div {
	flex: 1 1 400px;
}

.citolume-llms-row .citolume-muted,
.citolume-llms-edit-head + .citolume-muted {
	margin: 0;
}

/* The forms hide behind their buttons where JS runs; without JS they show. */
body.js .citolume-llms-form:not(.is-open) {
	display: none;
}

.citolume-llms-form {
	flex-basis: 100%;
	margin-top: 8px;
}

.citolume-llms-form textarea {
	width: 100%;
	max-width: 760px;
}

.citolume-llms-edit-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.citolume-automatic-pill {
	font-family: var(--cit-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	font-weight: 600;
	color: var(--cit-accent);
	background: var(--cit-nav-on);
	border: 1px solid var(--cit-cited-line);
	border-radius: 10px;
	padding: 3px 9px;
}

.citolume-llms-preview {
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 14px 18px;
	font-family: var(--cit-mono);
	font-size: 12px;
	line-height: 2;
	color: var(--cit-ink-2);
	white-space: pre-wrap;
	overflow-x: auto;
	margin: 10px 0 0;
	scrollbar-width: thin;
	scrollbar-color: var(--cit-line-2) transparent;
}

.citolume-llms-how {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	margin-top: 14px;
}

.citolume-llms-how > div {
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 13px 14px;
}

.citolume-llms-how strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cit-accent);
	margin-bottom: 5px;
}

.citolume-llms-how p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--cit-ink-2);
}

@media (max-width: 960px) {
	.citolume-llms-how {
		grid-template-columns: 1fr;
	}
}

/* --- Settings screen --- */

.citolume-kv th {
	text-align: left;
	font-weight: 400;
	color: var(--cit-ink-3);
	padding: 4px 24px 4px 0;
	width: 120px;
	vertical-align: top;
}

.citolume-kv td {
	padding: 4px 0;
	color: var(--cit-ink);
}

.citolume-state-good {
	color: var(--cit-cited);
	font-weight: 600;
}

.citolume-state-warn {
	color: var(--cit-warn-ink);
}

.citolume-key-form {
	margin-top: 12px;
}

.citolume-key-form input[type="text"] {
	min-width: 300px;
	margin: 0 6px;
}

.citolume-uninstall-note {
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 11px 14px;
	color: var(--cit-ink-2);
	max-width: 760px;
}

/* --- Setup wizard --- */

.citolume-wizard-wrap {
	max-width: 720px;
	margin: 40px auto;
}

.citolume-wizard-steps {
	display: flex;
	gap: 24px;
	justify-content: center;
	margin: 0 0 24px;
	color: var(--cit-faint);
}

.citolume-wizard-steps li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.citolume-wizard-steps__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--cit-line-2);
	background: var(--cit-card);
	font-size: 12px;
}

.citolume-wizard-steps li.is-current {
	color: var(--cit-ink);
	font-weight: 600;
}

.citolume-wizard-steps li.is-current .citolume-wizard-steps__dot {
	background: var(--cit-accent);
	border-color: var(--cit-accent);
	color: #fff;
}

.citolume-wizard-steps li.is-done {
	color: var(--cit-ink-2);
}

.citolume-wizard-steps li.is-done .citolume-wizard-steps__dot {
	color: var(--cit-accent);
	border-color: var(--cit-cited-line);
	background: var(--cit-cited-bg);
}

.citolume-wizard-card {
	padding: 28px 32px;
}

.citolume-wizard-card h1 {
	margin-top: 0;
	color: var(--cit-ink);
}

.citolume-disclosure {
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 13px 16px;
	margin: 18px 0;
}

.citolume-disclosure p {
	margin: 6px 0 0;
}

.citolume-wizard-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24px;
}

.citolume-wizard-connect {
	text-align: center;
	margin: 24px 0 12px;
}

.citolume-wizard-alt {
	text-align: center;
}

.citolume-wizard-questions {
	margin: 16px 0;
}

.citolume-wizard-questions > li {
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	padding: 11px 14px;
	margin-bottom: 8px;
}

.citolume-wizard-questions .citolume-hard-to-win {
	margin: 8px 0 0 24px;
}

.citolume-wizard-custom input[type="text"] {
	width: 100%;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* --- Crawlers screen --- */

.citolume-banner-good {
	border-left: 4px solid var(--cit-accent);
}

.citolume-banner-warn {
	border-left: 4px solid var(--cit-attn);
}

.citolume-crawlers {
	width: 100%;
	border-collapse: collapse;
}

.citolume-crawlers th,
.citolume-crawlers td {
	text-align: left;
	padding: 9px 12px;
}

.citolume-crawlers thead th {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
	border-bottom: 1px solid var(--cit-line);
}

.citolume-crawlers tbody td {
	border-top: 1px solid var(--cit-line);
}

.citolume-num {
	text-align: right !important;
	white-space: nowrap;
}

.citolume-verdict.is-allowed {
	color: var(--cit-cited);
	font-weight: 600;
}

.citolume-verdict.is-blocked {
	color: var(--cit-miss);
	font-weight: 600;
}

.citolume-verdict.is-norule {
	color: var(--cit-faint);
}

.citolume-verdict.is-unknown {
	color: var(--cit-warn-ink);
}

.citolume-crawlers-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 18px;
}

.citolume-crawlers-grid .citolume-card {
	margin: 0;
	max-width: none;
}

.citolume-crawlers-grid h2 {
	margin: 0 0 10px;
	font-size: 15px;
}

.citolume-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 120px;
	margin-bottom: 8px;
}

.citolume-bars span {
	flex: 1;
	background: var(--cit-accent);
	border-radius: 3px 3px 0 0;
	min-width: 4px;
}

.citolume-cache-note {
	border-left: 3px solid var(--cit-attn-line);
	background: var(--cit-attn-ground);
	border-radius: 0 6px 6px 0;
	padding: 9px 12px;
	color: var(--cit-ink-2);
}

.citolume-toppaths {
	width: 100%;
}

.citolume-toppaths td {
	padding: 7px 0;
	border-top: 1px solid var(--cit-line);
	overflow-wrap: anywhere;
}

@media (max-width: 960px) {
	.citolume-crawlers-grid {
		grid-template-columns: 1fr;
	}
}

.citolume-claim-block {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cit-line);
}

.citolume-claim-code {
	font-family: var(--cit-mono);
	font-size: 16px;
	letter-spacing: 0.12em;
	padding: 3px 8px;
}

/* --- The Credits balance band ---
   Named `hhead` because it began life on AI readiness; that screen moved
   to the platform's `hscore` in 135 and this is now the Credits screen's
   alone. */

.citolume-hhead {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	flex-wrap: wrap;
}

.citolume-hhead__score {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--cit-ink);
	margin: 2px 0;
	font-variant-numeric: tabular-nums;
}

.citolume-hhead__line {
	margin: 0 0 4px;
	font-size: 13.5px;
	color: var(--cit-ink-2);
}

/* Run panes inside the overlay. All of them render in sequence with
   scripting off; questions.js hides all but the first once it runs. */
.citolume-runpane + .citolume-runpane {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed var(--cit-line);
}

/* A thematic break the engine wrote. Engines emit "---" between sections and
   it reads as line noise left as text; drawn, it does the job it was for. */
.citolume-excerpt hr {
	border: 0;
	border-top: 1px solid var(--cit-line);
	margin: 4px 0;
}

/* --- The wizard's account field (ticket 124) --- */

.citolume-owner {
	display: flex;
	flex-direction: column;
	gap: 5px;
	align-items: flex-start;
	margin: 18px 0 4px;
	text-align: left;
}

.citolume-owner label {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
	font-weight: 600;
}

.citolume-owner input[type="email"] {
	width: 100%;
	max-width: 420px;
}

/* Why we want it, beside the field rather than in a tooltip: this is the one
   moment the person decides whether to hand us an address. */
.citolume-owner__why {
	text-align: left;
	max-width: 56ch;
	margin: 0 0 18px;
}

/* --- Credits (ticket 130) --- */

.citolume-grants {
	margin: 10px 0 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 420px;
}

.citolume-grants li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	background: var(--cit-bg);
}

.citolume-grants__plan {
	font-weight: 600;
	color: var(--cit-ink);
	font-size: 13.5px;
}

.citolume-grants__n {
	font-family: var(--cit-mono);
	font-size: 12px;
	color: var(--cit-accent);
	font-weight: 600;
}

/* A ledger line's sign. Spending is not a failure, so it is quiet grey
   rather than the red that means "the engine did not cite you". */
.citolume-delta {
	font-family: var(--cit-mono);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.citolume-delta.is-up {
	color: var(--cit-cited);
}

.citolume-delta.is-down {
	color: var(--cit-ink-3);
}

/* --- Re-check selected (ticket 130) --- */

.citolume-recheck {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 16px 0 0;
	padding: 0 var(--cit-qpad, 20px);
	font-size: 12.5px;
}

/* The selection column. Width is fixed so the header's box sits over the
   cards' boxes, the same way the engine columns line up. */
.citolume-qsel {
	width: 22px;
	flex: none;
	display: inline-flex;
	align-items: center;
}

.citolume-qsel input[type="checkbox"] {
	margin: 0;
}

/* --- The home screen, in the dashboard's shape (ticket 131) --- */

.citolume-pagehead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 4px;
}

.citolume-pagehead h1 {
	margin: 0;
	padding: 0;
	font-size: 23px;
	font-weight: 400;
	color: var(--cit-ink);
	overflow-wrap: anywhere;
}

.citolume-pagehead__mark {
	color: var(--cit-brand-ink);
	vertical-align: -5px;
	margin-right: 8px;
	flex: none;
}

/* Plan, question count, rhythm, freshness — everything the dashboard says
   about *this* site beside its name, quietly. */
.citolume-pagehead__meta {
	font-size: 13px;
	color: var(--cit-ink-3);
	font-weight: 400;
	margin-left: 8px;
}

.citolume-pagehead__right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 12.5px;
}

/* The upgrade control sits in the head now, so its float is wrong. */
.citolume-pagehead .citolume-upgrade {
	float: none;
}

/* Evidence on the left, what to do about it on the right. One column once
   there is no room for two — a 300px "who owns your questions" bar chart
   says nothing. */
.citolume-grid2 {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 0 18px;
	align-items: start;
}

@media (max-width: 1100px) {
	.citolume-grid2 {
		grid-template-columns: 1fr;
	}
}

.citolume-sidenote h2 {
	font-size: 15px;
}

.citolume-sidenote p {
	font-size: 12.5px;
	line-height: 1.65;
	margin: 0 0 8px;
}

/* --- Dashboard parity with the platform (ticket 136) --- */

/* The promise that a formula change never rewrites a past score, in the row
   with the number rather than buried in the dialog. Mono, because it carries
   a version. */
.citolume-score__ver {
	font-family: var(--cit-mono);
	font-size: 11.5px;
	color: var(--cit-faint);
}

/* "How it's calculated" sits at the far right of the score row. */
.citolume-score__how {
	margin-left: auto;
}

/* A card's one-line subtitle, under its heading. */
.citolume-card__sub {
	font-size: 13px;
	color: var(--cit-ink-3);
	margin: 0 0 14px;
}

/* The engine chips and the asks note share the funnel's foot row. */
.citolume-funnel__engines {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.citolume-funnel__freshness {
	margin-left: auto;
	text-align: right;
}

/* The platform's ghost button — navy border, navy text, card fill. Used where
   the platform uses `btn btn--ghost`: the "one thing to do this week" action,
   which is a suggestion rather than the screen's primary act, so a filled
   primary overstated it. */
body.citolume-screen .citolume-wrap .button.citolume-ghost {
	color: var(--cit-accent);
	border-color: var(--cit-accent);
	background: var(--cit-card);
	font-weight: 600;
}

body.citolume-screen .citolume-wrap .button.citolume-ghost:hover,
body.citolume-screen .citolume-wrap .button.citolume-ghost:focus {
	background: var(--cit-nav-on);
	color: var(--cit-accent);
	border-color: var(--cit-accent);
}

/* --- The plan and credit pills, on every screen (ticket 137) ---
   The platform carries these in its top bar. A plugin cannot put anything in
   wp-admin's own bar and should not try, so the same strip sits at the top of
   each of our pages. Values and shapes are the platform's. */

.citolume-planpill {
	font-family: var(--cit-mono);
	font-size: 11px;
	color: var(--cit-ink-2);
	background: #f2f4f7;
	border: 1px solid var(--cit-line);
	border-radius: 10px;
	padding: 2px 8px;
	line-height: 1.5;
}

/* Rendered whenever the site is connected, **including at zero**. Hiding it
   at zero meant the one person who most needed to learn credits exist was the
   only one never told. */
.citolume-creditpill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--cit-mono);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--cit-ink-3);
	background: var(--cit-card);
	border: 1px solid var(--cit-line-2);
	border-radius: 11px;
	padding: 3px 9px;
	line-height: 1.5;
	text-decoration: none;
}

.citolume-creditpill svg {
	width: 9px;
	height: 11px;
	flex: none;
}

/* Filled once there is a balance — the pill is the product's colour when it
   has something to spend. */
.citolume-creditpill.has {
	color: #fff;
	background: var(--cit-accent);
	border-color: var(--cit-accent);
}

.citolume-wrap a.citolume-creditpill,
.citolume-wrap a.citolume-creditpill:hover {
	text-decoration: none;
}

.citolume-wrap a.citolume-creditpill.has,
.citolume-wrap a.citolume-creditpill.has:hover {
	color: #fff;
}

/* The quiet line at the right of the head row — "Weekly · next scan Mon 26
   Oct". Pushed left of the pills so the pills stay together as a group. */
.citolume-pagehead__aside {
	font-size: 12.5px;
	margin-right: 4px;
}

/* The add card: input left and wide, a filled Add beside it, the example
   chips under them — the platform's layout. It used to push everything to the
   right, which left the card looking like a toolbar. */
.citolume-wrap .citolume-card.citolume-questions-bar {
	display: block;
	margin: 16px 0 0;
	padding: 16px 18px;
}

.citolume-questions-bar__actions {
	display: block;
}

.citolume-wrap .citolume-add-question {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.citolume-wrap .citolume-add-question input[type="text"] {
	flex: 1 1 320px;
	min-width: 240px;
	max-width: 440px;
}


/* The scan control is its own card below the add card. */
.citolume-wrap .citolume-card.citolume-recheck {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 12px 0 0;
	padding: 14px 18px;
}

/* Glyphs in the legend are text, not pills — the platform's shape. */
.citolume-legend span {
	white-space: nowrap;
}

/* --- Suggestions read off the site (ticket 139) --- */

.citolume-suggested {
	margin: 12px 0 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.citolume-suggested b {
	color: var(--cit-ink-3);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}

/* One row per suggestion: the question, and the one thing to do with it. */
.citolume-suggest {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 8px 12px;
	border: 1px solid var(--cit-line);
	border-radius: 8px;
	background: var(--cit-bg);
	font-size: 13px;
	color: var(--cit-ink);
}

.citolume-linklike {
	flex: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--cit-accent);
	font-weight: 600;
	font-size: 12.5px;
}

.citolume-linklike:hover {
	text-decoration: underline;
}

.citolume-suggest-run {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 12px 0 0;
	font-size: 12.5px;
}

.citolume-suggest-none {
	margin: 10px 0 0;
	font-size: 12.5px;
}

/* --- llms.txt review (ticket 140) --- */

.citolume-llms-review h2 {
	margin-bottom: 10px;
}

/* One finding per row: its level, then what to do. Two levels only —
   "Problem" is the file failing the standard, "Suggestion" is it working but
   diluted. */
.citolume-finding {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid var(--cit-line);
	font-size: 13px;
	line-height: 1.6;
	color: var(--cit-ink-2);
}

.citolume-finding:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.citolume-lvl {
	flex: none;
	font-family: var(--cit-mono);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 10px;
	padding: 2px 8px;
	margin-top: 1px;
}

/* Orange, not red: both of these are things to go and fix, and red on this
   product means "the engine did not cite you". */
.citolume-lvl.is-problem {
	color: var(--cit-attn);
	background: var(--cit-attn-bg);
	border: 1px solid var(--cit-attn-line);
}

.citolume-lvl.is-suggestion {
	color: var(--cit-faint);
	background: var(--cit-bg);
	border: 1px solid var(--cit-line);
}

.citolume-llms-review__how {
	margin: 10px 0 0;
	font-size: 12.5px;
}

/* The score dialog's closing line, and the card-level empty states. Both
   were emitted with no rule at all — found by auditing every class the PHP
   writes against the stylesheet, after a whole stale block turned out to be
   overriding the readiness rows (ticket 141). */
.citolume-score__disclaimer {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--cit-line);
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--cit-ink-3);
}

.citolume-card.citolume-empty p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cit-ink-2);
}

.citolume-card.citolume-coverage-gaps h2 {
	margin-bottom: 4px;
}

/* AI readiness before its first run: what will be checked, in the same three
   groups the results use, so the empty card previews the finished screen. */
.citolume-hpreview__groups {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 18px;
}

.citolume-hpreview__group {
	padding: 12px 14px;
	border: 1px solid var(--cit-line);
	border-radius: 6px;
	background: var(--cit-bg);
}

.citolume-hpreview__group h3 {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cit-ink-3);
}

.citolume-hpreview__group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.citolume-hpreview__group li {
	position: relative;
	margin: 0;
	padding: 3px 0 3px 18px;
	font-size: 13px;
	color: var(--cit-ink-2);
}

/* Hollow: not checked yet, rather than passed or failed. */
.citolume-hpreview__group li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border: 1.5px solid var(--cit-line-2);
	border-radius: 50%;
}

.citolume-hpreview__run {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.citolume-hpreview__run .citolume-muted {
	font-size: 12.5px;
}

@media (max-width: 782px) {
	.citolume-hpreview__groups {
		grid-template-columns: 1fr;
	}
}

/* --- What's weak on this page (ticket 147, the platform's diagnosis) --- */

.citolume-pdiag-ask {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 12px;
}

.citolume-pdiag-run {
	display: inline;
	margin: 0;
}

details.citolume-pdiag {
	margin: 0 0 12px;
}

.citolume-pdiag__n {
	font-size: 12.5px;
	color: var(--cit-miss, #b42318);
	font-weight: 600;
}

.citolume-pchecks {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.citolume-pcheck {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	padding: 8px 10px;
	border: 1px solid #eceef1;
	border-radius: 7px;
}

.citolume-pcheck.is-pass {
	border-color: transparent;
	padding: 2px 10px;
}

.citolume-pcheck__l i {
	font-style: normal;
	font-weight: 700;
	display: inline-block;
	width: 18px;
}

.citolume-pcheck.is-pass .citolume-pcheck__l i {
	color: var(--cit-cited);
}

.citolume-pcheck.is-bad .citolume-pcheck__l i {
	color: var(--cit-miss, #b42318);
}

.citolume-pcheck.is-unknown .citolume-pcheck__l i {
	color: var(--cit-faint);
}

.citolume-pcheck__fix {
	color: var(--cit-ink-2);
	padding-left: 18px;
}

details.citolume-howto {
	padding-left: 18px;
}

details.citolume-howto > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--cit-accent);
}

details.citolume-howto ol {
	margin: 8px 0 8px 18px;
}

.citolume-howto__k {
	display: block;
	margin: 8px 0 4px;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cit-faint);
}

.citolume-howto__code {
	display: block;
	white-space: pre-wrap;
	padding: 8px 10px;
	background: #f6f7f7;
	border-radius: 6px;
	font-size: 12px;
}

.citolume-pdiag__foot {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
}

/* --- Paused questions and the change allowance (ticket 147) --- */

.citolume-paused p {
	margin: 0 0 6px;
}

.citolume-paused ul {
	margin: 0 0 0 18px;
	list-style: disc;
}

.citolume-allowance {
	margin: 0 0 12px;
}