/**
 * QDSS Account Listening Post — application styling.
 *
 * Restrained B2B intelligence desk. Cards, badges, clear hierarchy.
 * Deliberately takes over the admin canvas so it does not read as a settings page.
 */

body.qdss-lp-app #wpcontent {
	padding-left: 0;
	background: var(--qdss-canvas);
}

body.qdss-lp-app #wpbody-content {
	padding-bottom: 0;
}

body.qdss-lp-app #wpfooter {
	display: none;
}

body.qdss-lp-app .update-nag,
body.qdss-lp-app .notice:not(.qdss-keep) {
	display: none;
}

/* ------------------------------------------------------------------ Theme */

/*
 * One palette, three ways of choosing it.
 *
 * Every colour in this stylesheet is a token, and the tokens are declared here
 * and nowhere else. A theme is therefore a swap of this block — not a second
 * stylesheet, and not a `.is-dark` variant of each rule, either of which drifts
 * apart from the light one the first time a component changes.
 *
 * `:root` rather than `.qdss-app`, so the WordPress canvas behind the app is
 * themed with it. Nothing outside this plugin reads a `--qdss-` property, so
 * declaring them here changes no other page.
 *
 * Light is the base and is what an unthemed browser gets. Dark is applied by
 * two selectors that must both exist:
 *
 *   html[data-qdss-theme="dark"]                     an explicit choice
 *   @media (prefers-color-scheme: dark) :root:not([data-qdss-theme="light"])
 *                                                    "System", following the OS
 *
 * The guard on the media query is the part that is easy to get wrong: without
 * it, choosing Light on a machine set to dark would be ignored.
 */

:root {
	--qdss-canvas: #f6f7f9;
	--qdss-surface: #ffffff;
	/* Secondary surfaces: table heads, wells, the inside of a panel. */
	--qdss-surface-2: #fafbfc;
	/* Form controls. Separated from --qdss-surface because in dark a control
	   must read as recessed against the card it sits on, not level with it. */
	--qdss-input: #ffffff;
	--qdss-ink: #14181f;
	--qdss-ink-2: #4a5462;
	--qdss-ink-3: #78828f;
	--qdss-line: #e3e6ea;
	--qdss-line-strong: #cdd3da;

	--qdss-accent: #1f4b7a;
	--qdss-accent-hover: #17395c;
	--qdss-accent-soft: #eaf1f8;
	--qdss-brand-2: #2f6ea8;
	/* Text on a filled accent, green or red button. */
	--qdss-on-solid: #ffffff;

	/*
	 * Two greens, two ambers, two reds on purpose: the `-strong` one is for a
	 * 3px rule or an icon, where a text-contrast colour looks muddy, and the
	 * plain one is for text.
	 */
	--qdss-ok: #1c6b4a;
	--qdss-ok-strong: #1f7a4d;
	--qdss-ok-soft: #e6f4ed;
	--qdss-warn: #8a5a00;
	--qdss-warn-strong: #b07d1a;
	--qdss-warn-soft: #fdf3e2;
	--qdss-warn-ink: #7a5610;
	--qdss-danger: #9a2b2b;
	--qdss-danger-strong: #a3262c;
	--qdss-danger-hover: #7d2020;
	--qdss-danger-soft: #fbeceb;

	/* An article added by hand, which is neither a warning nor a status. */
	--qdss-manual-soft: #f3ecda;

	/* The collection-status dot. */
	--qdss-dot-idle: #b6bcc4;
	--qdss-dot-on: #2f8f4e;
	--qdss-dot-off: #c9852b;

	/* Behind a modal and a drawer. */
	--qdss-scrim: rgba(20, 24, 31, 0.35);
	--qdss-scrim-strong: rgba(20, 24, 31, 0.4);

	/* The select arrow is drawn by us so the control height is ours. It is a
	   token because a dark control needs a lighter arrow. */
	--qdss-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23616a75' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");

	/*
	 * Dimming, as tokens rather than literals. A fade that reads as "inactive"
	 * on white reads as "unreadable" on #0d1117, so dark lifts all three.
	 */
	--qdss-opacity-disabled: 0.55;
	--qdss-opacity-dim: 0.62;
	--qdss-opacity-skipped: 0.5;

	--qdss-radius: 10px;

	/* Native widgets — the date picker, the select popup, scrollbars — are
	   painted by the browser, not by us. This is the only way to tell it. */
	color-scheme: light;
}

/*
 * Dark. An operations console, not a night-mode filter: the same layout, the
 * same density, the same restraint about colour. Surfaces step canvas → card →
 * secondary → control, so depth comes from three flat greys rather than from
 * shadows, which read as smears on a dark ground.
 *
 * Two things are deliberately NOT inverted:
 *
 *   The accent stays QDSS blue, lifted to #4c8fd0 because #1f4b7a on #0D1117
 *   fails contrast badly — the hue is the brand, the lightness is not.
 *
 *   The status semantics stay green / amber / red. They are lifted for
 *   contrast and their soft backgrounds become dark tints of the same hue,
 *   rather than the pale washes that only work on white.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-qdss-theme="light"]) {
		--qdss-canvas: #0d1117;
		--qdss-surface: #151b23;
		--qdss-surface-2: #1c2430;
		--qdss-input: #1c2430;
		--qdss-ink: #f3f4f6;
		--qdss-ink-2: #c3c9d2;
		--qdss-ink-3: #9ca3af;
		--qdss-line: #293241;
		--qdss-line-strong: #3a4657;

		--qdss-accent: #4c8fd0;
		--qdss-accent-hover: #6ba6df;
		--qdss-accent-soft: #132234;
		--qdss-brand-2: #2f6ea8;
		--qdss-on-solid: #0d1117;

		--qdss-ok: #4ec08a;
		--qdss-ok-strong: #3fae7a;
		--qdss-ok-soft: #12291f;
		--qdss-warn: #e0a23c;
		--qdss-warn-strong: #c98a25;
		--qdss-warn-soft: #2a2114;
		--qdss-warn-ink: #e3ae55;
		--qdss-danger: #e8767b;
		--qdss-danger-strong: #dc6f75;
		--qdss-danger-hover: #b94a50;
		--qdss-danger-soft: #2d1719;

		--qdss-manual-soft: #2a2418;

		--qdss-dot-idle: #4a5665;
		--qdss-dot-on: #3fae7a;
		--qdss-dot-off: #c98a25;

		--qdss-scrim: rgba(3, 6, 10, 0.6);
		--qdss-scrim-strong: rgba(3, 6, 10, 0.7);

		--qdss-opacity-disabled: 0.7;
		--qdss-opacity-dim: 0.72;
		--qdss-opacity-skipped: 0.65;

		--qdss-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");

		color-scheme: dark;
	}
}

/*
 * The same values again under an explicit choice. Duplicated rather than
 * shared, because a media query cannot be re-entered from a selector and
 * `@media` + attribute in one block would make "System" and "Dark" the same
 * rule — which is exactly the bug that makes Light unselectable on a dark OS.
 */
:root[data-qdss-theme="dark"] {
	--qdss-canvas: #0d1117;
	--qdss-surface: #151b23;
	--qdss-surface-2: #1c2430;
	--qdss-input: #1c2430;
	--qdss-ink: #f3f4f6;
	--qdss-ink-2: #c3c9d2;
	--qdss-ink-3: #9ca3af;
	--qdss-line: #293241;
	--qdss-line-strong: #3a4657;

	--qdss-accent: #4c8fd0;
	--qdss-accent-hover: #6ba6df;
	--qdss-accent-soft: #132234;
	--qdss-brand-2: #2f6ea8;
	--qdss-on-solid: #0d1117;

	--qdss-ok: #4ec08a;
	--qdss-ok-strong: #3fae7a;
	--qdss-ok-soft: #12291f;
	--qdss-warn: #e0a23c;
	--qdss-warn-strong: #c98a25;
	--qdss-warn-soft: #2a2114;
	--qdss-warn-ink: #e3ae55;
	--qdss-danger: #e8767b;
	--qdss-danger-strong: #dc6f75;
	--qdss-danger-hover: #b94a50;
	--qdss-danger-soft: #2d1719;

	--qdss-manual-soft: #2a2418;

	--qdss-dot-idle: #4a5665;
	--qdss-dot-on: #3fae7a;
	--qdss-dot-off: #c98a25;

	--qdss-scrim: rgba(3, 6, 10, 0.6);
	--qdss-scrim-strong: rgba(3, 6, 10, 0.7);

	--qdss-opacity-disabled: 0.7;
	--qdss-opacity-dim: 0.72;
	--qdss-opacity-skipped: 0.65;

	--qdss-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%239ca3af' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");

	color-scheme: dark;
}

.qdss-app {
	box-sizing: border-box;
	min-height: calc(100vh - 32px);
	margin: 0;
	background: var(--qdss-canvas);
	color: var(--qdss-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.qdss-app *,
.qdss-app *::before,
.qdss-app *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Top bar */

.qdss-topbar {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 0 28px;
	height: 58px;
	background: var(--qdss-surface);
	border-bottom: 1px solid var(--qdss-line);
	position: sticky;
	top: 32px;
	z-index: 30;
}

.qdss-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.qdss-brand__mark {
	width: 10px;
	height: 22px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--qdss-accent) 0%, var(--qdss-brand-2) 100%);
}

.qdss-brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.qdss-brand__text strong {
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.qdss-brand__text span {
	font-size: 11px;
	color: var(--qdss-ink-3);
}

.qdss-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 1 1 auto;
	overflow-x: auto;
}

.qdss-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 11px;
	border-radius: 6px;
	color: var(--qdss-ink-2);
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
}

.qdss-nav__link:hover,
.qdss-nav__link:focus {
	background: var(--qdss-canvas);
	color: var(--qdss-ink);
}

.qdss-nav__link.is-active {
	background: var(--qdss-accent-soft);
	color: var(--qdss-accent);
	font-weight: 600;
}

.qdss-nav__badge {
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 4px;
	background: var(--qdss-line);
	color: var(--qdss-ink-3);
}

.qdss-user {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.2;
	flex: 0 0 auto;
}

.qdss-user__role {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qdss-ink-3);
}

.qdss-user__name {
	font-size: 13px;
	font-weight: 600;
}

/*
 * Appearance: three radios drawn as a segmented control.
 *
 * The radios are real and focusable — only their default rendering is hidden —
 * so the group is reachable by keyboard, announced as a radio group, and the
 * selected mode is exposed to assistive technology by :checked rather than by
 * colour alone.
 */
.qdss-theme {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 0 0 auto;
	margin: 0;
	padding: 2px;
	border: 1px solid var(--qdss-line);
	border-radius: 7px;
	background: var(--qdss-surface-2);
}

.qdss-theme__legend {
	/* Named for screen readers, not shown: the three labels say what it is. */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.qdss-theme__option {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.qdss-theme__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.qdss-theme__option span {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 550;
	letter-spacing: 0.03em;
	color: var(--qdss-ink-3);
	white-space: nowrap;
}

.qdss-theme__option input:checked + span {
	background: var(--qdss-surface);
	color: var(--qdss-ink);
	box-shadow: inset 0 0 0 1px var(--qdss-line-strong);
}

.qdss-theme__option input:hover + span {
	color: var(--qdss-ink);
}

/* The focus ring belongs on the label, because the input itself is invisible.
   Without this the group is keyboard-reachable but keyboard-invisible. */
.qdss-theme__option input:focus-visible + span {
	outline: 2px solid var(--qdss-accent);
	outline-offset: 1px;
}

/* --------------------------------------------------------------- Banners */

.qdss-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 28px;
	font-size: 13px;
	border-bottom: 1px solid var(--qdss-line);
}

.qdss-banner--handoff {
	background: var(--qdss-accent-soft);
	color: var(--qdss-accent);
}

.qdss-banner--warn {
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn);
}

.qdss-banner--info {
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
	margin-bottom: 20px;
	padding: 14px 16px;
}

.qdss-banner__note {
	color: var(--qdss-ink-3);
	font-size: 12px;
}

/* ------------------------------------------------------------------ Views */

.qdss-main {
	padding: 26px 28px 60px;
}

.qdss-view__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
}

.qdss-view h1 {
	margin: 0;
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -0.01em;
}

.qdss-view h2 {
	font-size: 14px;
	font-weight: 650;
	letter-spacing: 0.02em;
	margin: 0 0 12px;
}

.qdss-view__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.qdss-subtle {
	color: var(--qdss-ink-3);
	font-size: 12.5px;
	margin: 4px 0 0;
}

.qdss-section {
	margin-top: 30px;
}

.qdss-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 26px;
}

.qdss-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

/* ------------------------------------------------------------------ Cards */

.qdss-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
}

.qdss-cards--accounts {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.qdss-card {
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
	padding: 16px 18px;
}

.qdss-card--stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.qdss-card__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qdss-ink-3);
}

.qdss-card__value {
	font-size: 30px;
	font-weight: 650;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.qdss-card__note {
	font-size: 12px;
	color: var(--qdss-ink-3);
}

.qdss-card--account header,
.qdss-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.qdss-card--account h3 {
	margin: 0;
	font-size: 15px;
}

.qdss-card--wide {
	margin-bottom: 14px;
}

.qdss-card--wide h2 {
	margin: 0;
	font-size: 16px;
}

.qdss-metrics {
	display: flex;
	gap: 22px;
	margin: 0 0 10px;
}

.qdss-metrics div {
	display: flex;
	flex-direction: column;
}

.qdss-metrics dt {
	font-size: 11px;
	color: var(--qdss-ink-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.qdss-metrics dd {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- Buttons */

.qdss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 13px;
	border-radius: 7px;
	border: 1px solid var(--qdss-line-strong);
	background: var(--qdss-surface);
	color: var(--qdss-ink);
	font-size: 13px;
	font-weight: 550;
	cursor: pointer;
	text-decoration: none;
	transition: background 120ms ease, border-color 120ms ease;
}

.qdss-btn:hover {
	background: var(--qdss-canvas);
}

.qdss-btn--primary {
	background: var(--qdss-accent);
	border-color: var(--qdss-accent);
	color: var(--qdss-on-solid);
}

.qdss-btn--primary:hover {
	background: var(--qdss-accent-hover);
	color: var(--qdss-on-solid);
}

.qdss-btn--ghost {
	background: transparent;
}

/*
 * Destructive, and it should look it. Never the default styling of a button
 * that sits next to Save.
 */
.qdss-btn--danger {
	background: var(--qdss-danger);
	border-color: var(--qdss-danger);
	color: var(--qdss-on-solid);
}

.qdss-btn--danger:hover {
	background: var(--qdss-danger-hover);
	color: var(--qdss-on-solid);
}

/* For the filter bar and the source block, where the control is not the point. */
.qdss-btn--small {
	padding: 5px 10px;
	font-size: 12px;
	border-radius: 6px;
}

.qdss-btn[disabled] {
	opacity: var(--qdss-opacity-disabled);
	cursor: not-allowed;
}

.qdss-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--qdss-accent);
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.qdss-link--danger {
	color: var(--qdss-danger);
}

/* ---------------------------------------------------------------- Filters */

.qdss-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
	padding: 14px 16px;
	margin-bottom: 18px;
}

.qdss-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--qdss-ink-2);
	min-width: 140px;
}

.qdss-field--search {
	flex: 1 1 240px;
}

.qdss-field--inline {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.qdss-field > span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qdss-ink-3);
}

.qdss-field input[type="text"],
.qdss-field input[type="url"],
.qdss-field input[type="search"],
.qdss-field input[type="date"],
.qdss-field input[type="number"],
.qdss-field input[type="password"],
.qdss-field select,
.qdss-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var(--qdss-line-strong);
	border-radius: 7px;
	background: var(--qdss-input);
	color: var(--qdss-ink);
	font-size: 13px;
	line-height: 1.35;
	font-family: inherit;
	min-height: 38px;
}

/*
 * A control inside .qdss-field is a column flex item, so anything that sets a
 * flex-basis on it sets its HEIGHT. These stay their natural size, and the
 * dropdown is pinned to the same height as the date inputs beside it.
 */
/*
 * Direct children only. A control nested inside a .qdss-inline-group within the
 * field — the model picker in Settings — is a ROW flex item, where a flex-basis
 * is a width and is wanted.
 */
.qdss-field > input:not([type="checkbox"]):not([type="radio"]),
.qdss-field > select:not([multiple]) {
	flex: 0 0 auto;
	height: 38px;
	max-height: 38px;
}

.qdss-field select {
	/* A native arrow, drawn once, so the height is ours and not the theme's. */
	appearance: none;
	-webkit-appearance: none;
	padding-right: 28px;
	background-image: var(--qdss-select-arrow);
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 9px 6px;
	cursor: pointer;
}

.qdss-field textarea {
	resize: vertical;
	flex: 0 0 auto;
	height: auto;
	max-height: none;
	min-height: 72px;
}

.qdss-field input:focus,
.qdss-field select:focus,
.qdss-field textarea:focus {
	outline: 2px solid var(--qdss-accent);
	outline-offset: 1px;
	border-color: var(--qdss-accent);
}

.qdss-inline-group {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

/*
 * Direct children only. As a descendant selector this also matched the <select>
 * inside a .qdss-field — and .qdss-field is a COLUMN flex container, where
 * flex-basis is a height, not a width. A 260px-tall dropdown was the result.
 */
.qdss-inline-group > select {
	flex: 1 1 260px;
}

.qdss-inline-result {
	font-size: 12.5px;
	margin: 8px 0 0;
	min-height: 18px;
}

.qdss-inline-result.is-error {
	color: var(--qdss-danger);
}

.qdss-inline-result.is-ok {
	color: var(--qdss-ok);
}

/* ------------------------------------------------------------- Signal feed */

.qdss-feed {
	display: grid;
	gap: 12px;
}

.qdss-signal {
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
	padding: 16px 18px;
}

.qdss-signal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.qdss-signal__title {
	font-size: 15.5px;
	font-weight: 620;
	line-height: 1.4;
	margin: 0 0 6px;
}

.qdss-signal__title a {
	color: var(--qdss-ink);
	text-decoration: none;
}

.qdss-signal__title a:hover {
	text-decoration: underline;
}

.qdss-signal__source {
	font-size: 12px;
	color: var(--qdss-ink-3);
	margin-bottom: 10px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.qdss-signal__block {
	margin: 8px 0;
	font-size: 13px;
}

.qdss-signal__block strong {
	display: block;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qdss-ink-3);
	margin-bottom: 2px;
}

.qdss-signal__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--qdss-line);
}

.qdss-signal__flags {
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 7px;
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn);
	font-size: 12px;
}

.qdss-signal__flags ul {
	margin: 4px 0 0;
	padding-left: 18px;
}

/* ----------------------------------------------------------------- Badges */

.qdss-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	background: var(--qdss-line);
	color: var(--qdss-ink-2);
	white-space: nowrap;
}

.qdss-badge--account {
	background: var(--qdss-accent-soft);
	color: var(--qdss-accent);
	text-transform: uppercase;
}

.qdss-badge--ok,
.qdss-badge--healthy {
	background: var(--qdss-ok-soft);
	color: var(--qdss-ok);
}

.qdss-badge--degraded,
.qdss-badge--untested {
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn);
}

.qdss-badge--failing {
	background: var(--qdss-danger-soft);
	color: var(--qdss-danger);
}

.qdss-badge--muted,
.qdss-badge--not_configured,
.qdss-badge--disabled,
.qdss-badge--manual {
	background: var(--qdss-line);
	color: var(--qdss-ink-3);
}

.qdss-badge--relevance-5,
.qdss-badge--relevance-4 {
	background: var(--qdss-ok-soft);
	color: var(--qdss-ok);
}

.qdss-badge--relevance-3 {
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn);
}

.qdss-badge--relevance-2,
.qdss-badge--relevance-1,
.qdss-badge--relevance-0 {
	background: var(--qdss-line);
	color: var(--qdss-ink-3);
}

/* ------------------------------------------------- Fetch report and tests */

.qdss-fetch-report {
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
	padding: 16px 18px;
	margin-bottom: 18px;
}

.qdss-fetch-report__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.qdss-fetch-report__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}

.qdss-fetch-report__grid dt {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qdss-ink-3);
}

.qdss-fetch-report__grid dd {
	margin: 0;
	font-size: 22px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

.qdss-fetch-report__errors {
	margin-top: 14px;
	padding: 10px 12px;
	border-radius: 7px;
	background: var(--qdss-danger-soft);
	color: var(--qdss-danger);
	font-size: 12.5px;
}

.qdss-fetch-report__errors ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

.qdss-diagnostic {
	width: 100%;
	border-collapse: collapse;
	font-size: 11.5px;
	margin-top: 6px;
}

.qdss-diagnostic th {
	text-align: left;
	font-weight: 600;
	color: var(--qdss-ink-3);
	padding: 2px 8px 2px 0;
	white-space: nowrap;
	vertical-align: top;
}

.qdss-diagnostic td {
	padding: 2px 0;
	word-break: break-word;
}

.qdss-diagnostic__samples {
	margin: 8px 0 0;
	padding-left: 18px;
	font-size: 11.5px;
}

.qdss-diagnostic__samples li {
	margin-bottom: 6px;
}

.qdss-diagnostic__samples span {
	display: block;
}

.qdss-diagnostic__preview {
	margin-top: 8px;
	padding: 8px;
	background: var(--qdss-canvas);
	border: 1px solid var(--qdss-line);
	border-radius: 6px;
	font-size: 10.5px;
	white-space: pre-wrap;
	word-break: break-all;
	max-height: 140px;
	overflow: auto;
}

.qdss-row-result {
	max-width: 420px;
}

/* ----------------------------------------------------------------- Tables */

.qdss-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
	overflow: hidden;
	font-size: 13px;
}

.qdss-table th,
.qdss-table td {
	text-align: left;
	padding: 11px 14px;
	border-bottom: 1px solid var(--qdss-line);
	vertical-align: top;
}

.qdss-table thead th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qdss-ink-3);
	background: var(--qdss-surface-2);
	font-weight: 600;
}

.qdss-table tbody tr:last-child th,
.qdss-table tbody tr:last-child td {
	border-bottom: 0;
}

.qdss-table--compact th,
.qdss-table--compact td {
	padding: 8px 12px;
}

.qdss-table td strong {
	display: block;
}

.qdss-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	word-break: break-all;
}

.qdss-error-text {
	display: block;
	color: var(--qdss-danger);
	font-size: 11.5px;
	margin-top: 4px;
}

.qdss-row-actions {
	white-space: nowrap;
}

.qdss-row-actions button + button {
	margin-left: 10px;
}

.qdss-row-result {
	font-size: 11.5px;
	margin-top: 6px;
	white-space: normal;
	max-width: 260px;
}

/* ----------------------------------------------------------- Review queue */

.qdss-review-card {
	border-left: 3px solid var(--qdss-line-strong);
}

.qdss-review__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--qdss-line);
}

.qdss-review__fields textarea {
	font-size: 13px;
	line-height: 1.5;
}

.qdss-review__evidence {
	margin-top: 8px;
	font-size: 12.5px;
}

.qdss-review__evidence summary {
	cursor: pointer;
	color: var(--qdss-ink-3);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.qdss-signal__actions .qdss-inline-result {
	margin: 0;
	align-self: center;
}

/* ---------------------------------------------------------------- Tracker */

.qdss-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 8px 10px;
	border: 1px solid var(--qdss-line-strong);
	border-radius: 7px;
	background: var(--qdss-input);
}

.qdss-checkbox-group label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--qdss-ink);
}

.qdss-overdue {
	color: var(--qdss-danger);
	font-weight: 600;
}

.qdss-status-approved,
.qdss-status-sent {
	background: var(--qdss-ok-soft);
	color: var(--qdss-ok);
}

.qdss-status-blocked,
.qdss-status-changes_required {
	background: var(--qdss-danger-soft);
	color: var(--qdss-danger);
}

.qdss-status-ready_for_review,
.qdss-status-in_progress {
	background: var(--qdss-accent-soft);
	color: var(--qdss-accent);
}

/* ------------------------------------------------------------------- Tags */

.qdss-taglist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0;
}

.qdss-taglist__label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qdss-ink-3);
	margin-right: 4px;
}

.qdss-tag {
	padding: 2px 8px;
	border-radius: 5px;
	background: var(--qdss-canvas);
	border: 1px solid var(--qdss-line);
	font-size: 11.5px;
}

.qdss-note {
	background: var(--qdss-canvas);
	border-left: 3px solid var(--qdss-line-strong);
	padding: 8px 12px;
	font-size: 12.5px;
	margin: 12px 0 0;
}

.qdss-list {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	color: var(--qdss-ink-2);
}

.qdss-list li {
	margin-bottom: 5px;
}

/* --------------------------------------------------------------- Activity */

.qdss-activity {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
}

.qdss-activity li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 14px;
	border-bottom: 1px solid var(--qdss-line);
	font-size: 12.5px;
}

.qdss-activity li:last-child {
	border-bottom: 0;
}

.qdss-activity time {
	color: var(--qdss-ink-3);
	white-space: nowrap;
}

.qdss-handoff-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
}

.qdss-handoff-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--qdss-line);
	font-size: 13px;
}

.qdss-handoff-list li:last-child {
	border-bottom: 0;
}

/* ----------------------------------------------------------- Empty states */

.qdss-empty {
	background: var(--qdss-surface);
	border: 1px dashed var(--qdss-line-strong);
	border-radius: var(--qdss-radius);
	padding: 22px;
	color: var(--qdss-ink-2);
	font-size: 13.5px;
	text-align: center;
}

.qdss-empty--large {
	padding: 44px 24px;
}

.qdss-empty--large h3 {
	margin: 0 0 8px;
	font-size: 17px;
	color: var(--qdss-ink);
}

.qdss-empty--large p {
	max-width: 620px;
	margin: 0 auto 12px;
}

/* ------------------------------------------------------------- Pagination */

.qdss-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
	font-size: 12.5px;
	color: var(--qdss-ink-3);
}

/* ------------------------------------------------------- Drawer and modals */

.qdss-drawer {
	position: fixed;
	inset: 0;
	background: var(--qdss-scrim);
	z-index: 100000;
	display: flex;
	justify-content: flex-end;
}

.qdss-drawer__panel {
	width: min(620px, 100%);
	height: 100%;
	overflow-y: auto;
	background: var(--qdss-surface);
	border-left: 1px solid var(--qdss-line);
	padding: 24px 26px 60px;
	font-size: 13.5px;
}

.qdss-drawer__panel h2 {
	font-size: 17px;
	margin: 0 0 6px;
	line-height: 1.35;
}

.qdss-drawer__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 14px;
}

.qdss-drawer__section {
	border-top: 1px solid var(--qdss-line);
	padding-top: 14px;
	margin-top: 14px;
}

.qdss-drawer__section h3 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qdss-ink-3);
	margin: 0 0 8px;
}

.qdss-kv {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 6px 14px;
	font-size: 12.5px;
}

.qdss-kv dt {
	color: var(--qdss-ink-3);
}

.qdss-kv dd {
	margin: 0;
	word-break: break-word;
}

.qdss-quote {
	border-left: 3px solid var(--qdss-line-strong);
	padding: 4px 0 4px 10px;
	margin: 6px 0;
	color: var(--qdss-ink-2);
	font-size: 12.5px;
}

.qdss-modal {
	position: fixed;
	inset: 0;
	background: var(--qdss-scrim-strong);
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

/*
 * Everything the interface folds away is folded with the `hidden` attribute.
 * Any `display` declaration on the element itself beats the browser's
 * `[hidden] { display: none }`, so a panel would stay on screen while the
 * button beside it reported aria-expanded="false". Every collapsible element
 * that also sets `display` belongs in this list.
 */
.qdss-modal[hidden],
.qdss-drawer[hidden],
.qdss-filterbar[hidden],
.qdss-ai-panel__ids[hidden] {
	display: none !important;
}

.qdss-modal__panel {
	background: var(--qdss-surface);
	border-radius: 12px;
	padding: 24px;
	width: min(520px, 100%);
	max-height: 88vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.qdss-modal__panel h2 {
	margin: 0;
	font-size: 17px;
}

.qdss-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 6px;
}

.qdss-modal__message {
	font-size: 12.5px;
	min-height: 18px;
	margin: 0;
}

.qdss-modal__message.is-error {
	color: var(--qdss-danger);
}

.qdss-modal__message.is-ok {
	color: var(--qdss-ok);
}

/* ----------------------------------------------------------------- Footer */

.qdss-footer {
	padding: 16px 28px 30px;
	color: var(--qdss-ink-3);
	font-size: 11.5px;
	border-top: 1px solid var(--qdss-line);
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 960px) {
	.qdss-topbar {
		height: auto;
		flex-wrap: wrap;
		padding: 12px 18px;
		gap: 12px;
		position: static;
	}

	.qdss-main {
		padding: 18px 18px 50px;
	}

	.qdss-view__head {
		flex-direction: column;
	}

	.qdss-kv {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ panels */

.qdss-panel {
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: 10px;
	padding: 22px 24px;
	margin-top: 22px;
}

.qdss-panel > h2 {
	margin: 0 0 4px;
	font-size: 15px;
}

.qdss-panel > h3 {
	margin: 22px 0 4px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qdss-ink-3);
}

/* ------------------------------------------------------------------ triage */

/* The background discovery job, one row per client. */
.qdss-job__heading {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--qdss-ink-2);
}

/* A diagnostic table is wide by nature; it scrolls rather than squashing. */
.qdss-scroll-x {
	overflow-x: auto;
	max-width: 100%;
}

.qdss-job__beat {
	font-weight: 400;
	color: var(--qdss-ink-3);
}

.qdss-job__state {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qdss-ink-3);
}

.qdss-job__row.is-running .qdss-job__state {
	color: var(--qdss-accent);
}

.qdss-job__row.is-complete .qdss-job__state {
	color: var(--qdss-ok);
}

.qdss-tally {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	font-size: 12.5px;
}

.qdss-tally li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	border-bottom: 1px solid var(--qdss-line);
}

.qdss-tally li:last-child {
	border-bottom: 0;
}

.qdss-steps {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.qdss-steps li {
	padding: 8px 0 8px 22px;
	position: relative;
	border-bottom: 1px solid var(--qdss-line);
	font-size: 12.5px;
}

.qdss-steps li::before {
	content: "•";
	position: absolute;
	left: 4px;
	color: var(--qdss-ink-3);
}

.qdss-steps li.is-ok::before {
	content: "✓";
	color: var(--qdss-ok-strong);
}

.qdss-steps li.is-no::before {
	content: "×";
	color: var(--qdss-danger-strong);
}

.qdss-steps strong {
	display: block;
}

.qdss-verdict {
	border: 1px solid var(--qdss-line);
	border-radius: 8px;
	padding: 12px 14px;
	margin-top: 12px;
}

.qdss-verdict.is-matched {
	border-left: 3px solid var(--qdss-ok-strong);
}

.qdss-verdict.is-unmatched {
	border-left: 3px solid var(--qdss-line-strong);
}

.qdss-verdict__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}

.qdss-verdict__evidence {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	font-size: 12px;
	color: var(--qdss-ink-2);
}

.qdss-verdict__evidence li {
	padding: 3px 0 3px 12px;
	border-left: 2px solid var(--qdss-line);
	margin-bottom: 4px;
}

.qdss-fieldset {
	border: 1px solid var(--qdss-line);
	border-radius: 8px;
	padding: 14px 16px 4px;
	margin: 0 0 18px;
}

.qdss-fieldset legend {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qdss-ink-3);
	padding: 0 6px;
}

.qdss-modal__panel--tall {
	max-height: 85vh;
	overflow-y: auto;
}

.qdss-judgement {
	border-top: 1px solid var(--qdss-line);
	margin-top: 10px;
	padding-top: 10px;
}

.qdss-judgement.is-approve {
	border-top-color: var(--qdss-ok-strong);
}

.qdss-judgement.is-review {
	border-top-color: var(--qdss-warn-strong);
}

.qdss-judgement.is-reject {
	border-top-color: var(--qdss-danger-strong);
}

.qdss-judgement .qdss-kv {
	margin: 8px 0 10px;
}

.qdss-judgement p {
	margin: 6px 0;
	font-size: 12.5px;
}

/* ---------------------------------------------- manual add: the stage trail */

.qdss-progress {
	list-style: none;
	counter-reset: qdss-stage;
	margin: 18px 0 0;
	padding: 0;
	border-top: 1px solid var(--qdss-line);
}

.qdss-progress li {
	counter-increment: qdss-stage;
	position: relative;
	padding: 9px 0 9px 30px;
	border-bottom: 1px solid var(--qdss-line);
	font-size: 12.5px;
	color: var(--qdss-ink-3);
}

.qdss-progress li::before {
	content: counter(qdss-stage);
	position: absolute;
	left: 0;
	top: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--qdss-line-strong);
	text-align: center;
	line-height: 17px;
	font-size: 10px;
}

.qdss-progress li.is-running {
	color: var(--qdss-ink-2);
}

.qdss-progress li.is-running::before {
	content: "…";
	border-color: var(--qdss-ink-3);
}

.qdss-progress li.is-ok {
	color: var(--qdss-ink);
}

.qdss-progress li.is-ok::before {
	content: "✓";
	color: var(--qdss-on-solid);
	background: var(--qdss-ok-strong);
	border-color: var(--qdss-ok-strong);
}

.qdss-progress li.is-no::before {
	content: "×";
	color: var(--qdss-on-solid);
	background: var(--qdss-danger-strong);
	border-color: var(--qdss-danger-strong);
}

.qdss-progress li.is-skipped {
	opacity: var(--qdss-opacity-skipped);
}

.qdss-progress__note {
	display: block;
	margin-top: 2px;
	color: var(--qdss-ink-3);
	font-size: 12px;
}

.qdss-badge--manual {
	background: var(--qdss-manual-soft);
	color: var(--qdss-warn-ink);
}

.qdss-banner--open {
	background: var(--qdss-warn-soft);
	border-left: 3px solid var(--qdss-warn-strong);
}

/* ------------------------------------------------------------- news cards */

.qdss-account-section {
	scroll-margin-top: 20px;
}

/* ------------------------------------------------------ the client sections */

/*
 * Three clients, three unmistakable blocks. The name is the largest thing on
 * the page below the title, and the rule under it is what stops the three
 * reading as one long list of news.
 */
.qdss-jump {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 18px 0 4px;
}

.qdss-jump__label {
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--qdss-ink-3);
}

.qdss-jump__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--qdss-line-strong);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 550;
	color: var(--qdss-ink);
	text-decoration: none;
	background: var(--qdss-surface);
}

.qdss-jump__link:hover {
	background: var(--qdss-accent-soft);
	border-color: var(--qdss-accent);
	color: var(--qdss-accent);
}

.qdss-jump__count {
	min-width: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--qdss-canvas);
	color: var(--qdss-ink-3);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.qdss-client {
	scroll-margin-top: 100px;
	margin-top: 34px;
}

.qdss-client__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	padding-bottom: 8px;
	margin-bottom: 16px;
	border-bottom: 2px solid var(--qdss-ink);
}

/* h2 in the selector so this outweighs the generic `.qdss-view h2` above. */
h2.qdss-client__name {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qdss-ink);
}

.qdss-client__counts {
	margin: 0;
	font-size: 12px;
	color: var(--qdss-ink-3);
	font-variant-numeric: tabular-nums;
}

.qdss-client__items > .qdss-empty {
	margin: 0 0 4px;
	padding: 14px 16px;
	border: 1px dashed var(--qdss-line-strong);
	border-radius: 8px;
	color: var(--qdss-ink-3);
	font-size: 12.5px;
}

/* --------------------------------------------------------- the danger zone */

.qdss-danger {
	border-color: var(--qdss-danger);
	border-left: 3px solid var(--qdss-danger);
}

.qdss-danger h2 {
	color: var(--qdss-danger);
}

/* ------------------------------------------------- the account reading */

/*
 * Above the evidence, and deliberately not bigger than it. The articles are
 * still what a person decides on; this says what they add up to.
 */
.qdss-account-intel {
	margin-bottom: 18px;
}

.qdss-ai-panel {
	border: 1px solid var(--qdss-line);
	border-top: 3px solid var(--qdss-accent);
	border-radius: 0 0 9px 9px;
	background: var(--qdss-surface);
	padding: 13px 16px 14px;
}

.qdss-ai-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin-bottom: 10px;
}

.qdss-ai-panel__label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--qdss-accent);
}

.qdss-ai-panel__scope {
	font-size: 11.5px;
	color: var(--qdss-ink-3);
	margin-right: auto;
}

.qdss-ai-panel__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-bottom: 12px;
}

/* Counted in SQL. Never the model's arithmetic. */
.qdss-ai-count {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--qdss-accent-soft);
	color: var(--qdss-accent);
	font-size: 11.5px;
}

.qdss-ai-count strong {
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Awaiting classification is a queue state, not an intelligence one. */
.qdss-ai-count--pending {
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn-ink);
}

.qdss-ai-count.is-zero {
	background: var(--qdss-canvas);
	color: var(--qdss-ink-3);
}

.qdss-ai-statement {
	margin-bottom: 10px;
}

.qdss-ai-statement__label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--qdss-ink-3);
	margin-bottom: 1px;
}

.qdss-ai-statement__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--qdss-ink);
}

/* Traceability, folded away until asked for. */
.qdss-ai-panel__evidence {
	margin-top: 2px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 11px;
	color: var(--qdss-accent);
	cursor: pointer;
	text-decoration: underline;
}

.qdss-ai-panel__ids {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 3px 0 0;
	padding: 0;
	font-size: 11px;
	color: var(--qdss-ink-3);
	font-variant-numeric: tabular-nums;
}

.qdss-ai-panel__pending,
.qdss-ai-panel__foot {
	margin: 6px 0 0;
	font-size: 11.5px;
	color: var(--qdss-ink-3);
}

.qdss-themes ol {
	margin: 3px 0 0;
	padding-left: 18px;
	font-size: 12.5px;
}

.qdss-themes li {
	margin-bottom: 4px;
}

.qdss-themes__meta,
.qdss-themes__why {
	display: block;
	font-size: 11.5px;
	/* --qdss-ink-2, not ink-3: this is the sentence explaining why the theme
	   exists, and at ink-3 it measured 3.9:1 on white — below AA for text a
	   person is expected to read. */
	color: var(--qdss-ink-2);
}

.qdss-client__evidence-label {
	margin: 0 0 8px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--qdss-ink-3);
}

/* ---------------------------------------------------------- the change */

/*
 * Context for a decision, not the decision. Quieter than the two insight boxes
 * above it on purpose: a reviewer should read the headline, what moved and why
 * it matters first, and reach this to ask "and is that new?".
 */
.qdss-change {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 10px 0;
	padding: 7px 12px;
	border-left: 3px solid var(--qdss-line-strong);
	background: var(--qdss-canvas);
	border-radius: 0 7px 7px 0;
}

/*
 * Label and verdict share a line with the explanation. This is context for a
 * decision, and it must not out-shout What moved directly above it.
 */
.qdss-change__label {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--qdss-ink-3);
	flex: 0 0 auto;
}

.qdss-change__verdict {
	font-size: 12.5px;
	font-weight: 650;
	color: var(--qdss-ink);
}

.qdss-change__text {
	margin: 0;
	flex: 1 1 300px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--qdss-ink-2);
}

.qdss-change__refs {
	flex: 0 0 100%;
	margin-top: 2px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--qdss-ink-3);
}

.qdss-change__refs > span {
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.06em;
}

.qdss-change__refs ul {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
}

.qdss-change__refs li {
	margin: 1px 0;
	overflow-wrap: anywhere;
}

.qdss-change__pub {
	color: var(--qdss-ink-3);
}

/* Something actually moved. Everything else stays neutral. */
.qdss-change--milestone-progression,
.qdss-change--escalation {
	border-left-color: var(--qdss-warn);
	background: var(--qdss-warn-soft);
}

.qdss-change--reversal,
.qdss-change--de-escalation {
	border-left-color: var(--qdss-danger);
	background: var(--qdss-danger-soft);
}

.qdss-change--new-development {
	border-left-color: var(--qdss-accent);
	background: var(--qdss-accent-soft);
}

.qdss-change--repeated-coverage,
.qdss-change--no-meaningful-change {
	background: transparent;
	border-left-style: dashed;
}

/* ----------------------------------------------- the intelligence line */

.qdss-intel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	margin: 10px 0 12px;
	padding-top: 9px;
	border-top: 1px dashed var(--qdss-line);
	font-size: 12px;
	color: var(--qdss-ink-3);
}

.qdss-intel__pair em {
	font-style: normal;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.06em;
	margin-right: 5px;
}

/* What to do with it: the one thing on the line worth reading first. */
.qdss-intel__action {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: 0.02em;
	background: var(--qdss-line);
	color: var(--qdss-ink-2);
}

.qdss-intel__action--potential-outreach {
	background: var(--qdss-ok-soft);
	color: var(--qdss-ok);
}

.qdss-intel__action--research {
	background: var(--qdss-accent-soft);
	color: var(--qdss-accent);
}

.qdss-intel__action--no-action {
	background: transparent;
	color: var(--qdss-ink-3);
	border: 1px solid var(--qdss-line-strong);
}

/* ------------------------------------------------- intelligence badges */

/*
 * Signal strength is how big the event is, which relevance deliberately is
 * not — so it gets weight of its own, scaled down rather than up as it falls.
 */
.qdss-badge--strength-critical {
	background: var(--qdss-danger-soft);
	color: var(--qdss-danger);
	font-weight: 700;
}

.qdss-badge--strength-high {
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn);
	font-weight: 650;
}

.qdss-badge--strength-medium {
	background: var(--qdss-accent-soft);
	color: var(--qdss-accent);
}

.qdss-badge--strength-low {
	background: var(--qdss-canvas);
	color: var(--qdss-ink-3);
}

/*
 * Archived: a state, not a status. Deliberately quiet — it explains why an
 * article is on screen outside the queue, and must not compete with the
 * decision badges beside it.
 */
.qdss-badge--archived {
	background: var(--qdss-surface-2);
	color: var(--qdss-ink-2);
	border: 1px dashed var(--qdss-line-strong);
}

.qdss-badge--unit {
	background: var(--qdss-accent-soft);
	color: var(--qdss-accent);
	font-weight: 600;
}

.qdss-badge--noise {
	background: transparent;
	border: 1px dashed var(--qdss-line-strong);
	color: var(--qdss-ink-3);
}

/* The second filter row, folded away until it is wanted. */
.qdss-filterbar--intel {
	margin-top: 10px;
	padding: 12px 14px;
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: 8px;
}

.qdss-filterbar--intel select {
	width: 168px;
}

/* ------------------------------------------------------- the trace */

.qdss-trace {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	font-size: 12px;
	max-height: 340px;
	overflow-y: auto;
	border: 1px solid var(--qdss-line);
	border-radius: 8px;
}

.qdss-trace li {
	display: grid;
	grid-template-columns: 150px 150px 1fr;
	gap: 4px 12px;
	padding: 7px 10px;
	border-bottom: 1px solid var(--qdss-line);
}

.qdss-trace li:last-child {
	border-bottom: 0;
}

.qdss-trace__event {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	color: var(--qdss-accent);
}

.qdss-trace__at {
	color: var(--qdss-ink-3);
	font-variant-numeric: tabular-nums;
}

.qdss-trace__message {
	color: var(--qdss-ink);
	overflow-wrap: anywhere;
}

.qdss-trace__context {
	grid-column: 3;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	color: var(--qdss-ink-3);
	overflow-wrap: anywhere;
}

.qdss-trace__pair em {
	font-style: normal;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 0.05em;
	margin-right: 4px;
}

.qdss-list--urls li {
	margin-bottom: 10px;
	overflow-wrap: anywhere;
}

/* ------------------------------------------- What moved / The opener */

/*
 * Two boxes, never one. "What moved" answers what changed in the business;
 * "The opener" answers what a conversation could open on. Kept side by side at
 * a readable width and deliberately modest in height — they are meant to be
 * read at a glance on the way to a decision, not to dominate the card.
 */
.qdss-insight {
	margin: 10px 0;
	padding: 9px 12px;
	border-radius: 7px;
	border: 1px solid var(--qdss-line);
	border-left: 3px solid var(--qdss-line-strong);
	background: var(--qdss-canvas);
}

.qdss-insight--what-moved {
	border-left-color: var(--qdss-accent);
	background: var(--qdss-accent-soft);
}

.qdss-insight--opener {
	border-left-color: var(--qdss-ok);
	background: var(--qdss-ok-soft);
}

.qdss-insight__label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--qdss-ink-2);
	margin-bottom: 2px;
}

.qdss-insight__text {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--qdss-ink);
}

/* An honest gap looks like a gap, not like an answer. */
.qdss-insight.is-empty {
	background: transparent;
	border-style: dashed;
	border-left-color: var(--qdss-line-strong);
}

.qdss-insight.is-empty .qdss-insight__text {
	color: var(--qdss-ink-3);
	font-style: italic;
}

.qdss-news {
	border: 1px solid var(--qdss-line);
	border-left: 3px solid var(--qdss-line-strong);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 12px;
}

.qdss-news.is-approved {
	border-left-color: var(--qdss-ok-strong);
}

.qdss-news.is-review {
	border-left-color: var(--qdss-warn-strong);
}

.qdss-news.is-rejected {
	border-left-color: var(--qdss-danger-strong);
	opacity: var(--qdss-opacity-dim);
}

.qdss-news h3 {
	margin: 0 0 6px;
	font-size: 14.5px;
	line-height: 1.35;
}

.qdss-news p {
	margin: 6px 0;
	font-size: 12.5px;
}

.qdss-ai-line {
	display: flex;
	align-items: center;
	gap: 8px;
}

.qdss-news__decide {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--qdss-line);
}

.qdss-news__decide .qdss-btn.is-active {
	outline: 2px solid var(--qdss-ink);
	outline-offset: 1px;
}

.qdss-badge--approved {
	background: var(--qdss-ok-soft);
	color: var(--qdss-ok-strong);
}

.qdss-badge--review {
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn-ink);
}

.qdss-badge--rejected {
	background: var(--qdss-danger-soft);
	color: var(--qdss-danger-strong);
}

.qdss-desk__filters {
	margin: 22px 0 4px;
}

.qdss-desk__export {
	margin: 24px 0 40px;
	align-items: center;
	gap: 12px;
}

/* --------------------------------------------------- the collection status */

/*
 * One line. Collection runs on its own, so this reports and does not configure:
 * it must never take more room than the articles it found.
 */
.qdss-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	background: var(--qdss-surface);
	border: 1px solid var(--qdss-line);
	border-radius: 8px;
	padding: 10px 14px;
	margin-top: 16px;
	font-size: 12.5px;
	color: var(--qdss-ink-2);
	line-height: 1.4;
}

.qdss-status__title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--qdss-ink-3);
}

.qdss-status__state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--qdss-ink);
}

.qdss-status__state::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--qdss-dot-idle);
	flex: 0 0 auto;
}

.qdss-status__state.is-on::before {
	background: var(--qdss-dot-on);
}

.qdss-status__state.is-off::before {
	background: var(--qdss-dot-off);
}

.qdss-status__times {
	color: var(--qdss-ink-3);
}

/* Pushed right so the button always lands in the same place. */
.qdss-status__counts {
	margin-left: auto;
}

.qdss-status__value {
	font-size: 14px;
	font-weight: 600;
	color: var(--qdss-ink);
}

/* ------------------------------------------------------- the filter bar */

.qdss-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.qdss-filterbar__field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--qdss-ink-3);
}

.qdss-filterbar__field select,
.qdss-filterbar__field input {
	box-sizing: border-box;
	height: 38px;
	max-height: 38px;
	flex: 0 0 auto;
	padding: 8px 10px;
	border: 1px solid var(--qdss-line-strong);
	border-radius: 7px;
	background: var(--qdss-input);
	color: var(--qdss-ink);
	font-size: 13px;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.qdss-filterbar__field--view select,
.qdss-filterbar__field--show select {
	width: 200px;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 28px;
	background-image: var(--qdss-select-arrow);
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 9px 6px;
	cursor: pointer;
}

.qdss-filterbar__field input[type="date"] {
	width: 150px;
}

.qdss-filterbar__field--search input {
	width: 240px;
}

.qdss-filterbar__field select:focus,
.qdss-filterbar__field input:focus {
	outline: 2px solid var(--qdss-accent);
	outline-offset: 1px;
	border-color: var(--qdss-accent);
}

.qdss-filterbar .qdss-btn {
	height: 38px;
}

/* --------------------------------------------------- the source on a card */

/*
 * Deliberately its own block rather than a link on the headline. The whole URL
 * has to be readable before a decision is made, and copyable when it is too
 * long to read.
 */
.qdss-news__source {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 10px 0 12px;
	padding: 9px 11px;
	background: var(--qdss-canvas);
	border: 1px solid var(--qdss-line);
	border-radius: 7px;
}

.qdss-news__source-label {
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--qdss-ink-3);
	flex: 0 0 100%;
}

.qdss-news__publisher {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--qdss-ink);
}

/*
 * The text is clipped; the href and the title are not, so the whole URL is
 * always there to hover, copy or open.
 */
.qdss-news__url {
	flex: 1 1 240px;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	color: var(--qdss-ink-2);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	direction: ltr;
}

.qdss-news__source-actions {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
}

.qdss-news__source--missing {
	border-style: dashed;
}

.qdss-news__source-warning {
	font-size: 12px;
	color: var(--qdss-danger-strong);
}

/* ---------------------------------------------------------------- Sources */

/*
 * The source table. A failing row keeps its error visible rather than
 * collapsing to a red dot, because the error text is the whole diagnosis —
 * "no feed URL configured" and "403 from the publisher" need different fixes.
 */
.qdss-table-wrap {
	overflow-x: auto;
	margin-top: 16px;
	border: 1px solid var(--qdss-line);
	border-radius: var(--qdss-radius);
	background: var(--qdss-surface);
}

.qdss-table--sources {
	min-width: 900px;
}

.qdss-table--sources td {
	vertical-align: top;
}

/*
 * A query can be long and must stay readable as one string, so it wraps on
 * whitespace rather than being clipped or forced onto one line.
 */
.qdss-table__query code {
	display: block;
	max-width: 420px;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--qdss-ink-2);
}

.qdss-table__actions {
	text-align: right;
	white-space: nowrap;
}

.qdss-hint {
	color: var(--qdss-ink-3);
	font-size: 11.5px;
	margin: 4px 0 0;
	line-height: 1.5;
}

/*
 * Health states, named the same way the model names them. Every state also
 * reads as a word in the badge, so colour is never the only signal.
 */
.qdss-badge--health-healthy {
	background: var(--qdss-ok-soft);
	color: var(--qdss-ok);
}

.qdss-badge--health-degraded,
.qdss-badge--health-untested,
.qdss-badge--health-not_configured {
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn);
}

.qdss-badge--health-failing {
	background: var(--qdss-danger-soft);
	color: var(--qdss-danger);
}

.qdss-panel__body {
	padding-top: 12px;
}

.qdss-panel > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--qdss-ink);
}

/*
 * The rejection reason, asked before a rejection is taken. Folded away until
 * Reject is pressed so the card stays a card, and it sits under the buttons so
 * the question appears where the click landed.
 */
.qdss-news__reason {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--qdss-line-strong);
	border-radius: 8px;
	background: var(--qdss-surface);
	font-size: 12.5px;
	color: var(--qdss-ink-2);
}

.qdss-news__reason label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--qdss-ink);
}

.qdss-news__reason select {
	font: inherit;
	padding: 4px 8px;
	border: 1px solid var(--qdss-line-strong);
	border-radius: 6px;
	background: var(--qdss-bg);
	color: var(--qdss-ink);
}

/*
 * The Friday source check. Deliberately quiet: it sits beside the decision
 * buttons rather than competing with them, because it is a different question
 * asked on a different day.
 */
.qdss-news__check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--qdss-ink-2);
	cursor: pointer;
}

.qdss-news__check input {
	margin: 0;
}

.qdss-badge--verified {
	background: var(--qdss-ok-soft);
	color: var(--qdss-ok);
}

/* The scheduler instructions: two commands, meant to be copied exactly. */
.qdss-steps {
	margin: 8px 0 0;
	padding-left: 20px;
	font-size: 13px;
	color: var(--qdss-ink-2);
	line-height: 1.6;
}

.qdss-steps pre {
	margin: 6px 0 12px;
	padding: 10px 12px;
	overflow-x: auto;
	border: 1px solid var(--qdss-line-strong);
	border-radius: 6px;
	background: var(--qdss-surface);
}

.qdss-steps code {
	font-size: 12px;
	color: var(--qdss-ink);
	white-space: pre;
}

/*
 * Source J. A competitor move is the one badge on a card that reports a loss
 * rather than an opportunity, so it reads in the warning hue rather than the
 * neutral one — without shouting, because most of these are routine.
 */
.qdss-badge--competitor {
	background: var(--qdss-warn-soft);
	color: var(--qdss-warn);
}