/*
 * Financial Templates Hub by SG Group
 * Public stylesheet (v1.8 "Slim Professional UI"). Scoped under .fth-app.
 * Author: SG Group
 *
 * v1.8 = clean / compact / calm enterprise B2B SaaS. Slim slate palette
 * (#f8fafc page, #ffffff cards, #e2e8f0 borders, #0f172a text, #2563eb CTA),
 * flat cards (no default shadow; opt-in .fth-card--raised), compact tables
 * / KPI / tabs, unified 22px status pills, density classes, fixed LIGHT theme
 * (the prefers-color-scheme: dark block was REMOVED). Token NAMES are
 * unchanged for back-compat; only values were retuned.
 *
 * LIGHT, CONTAINED, THEME-SAFE design system.
 * - Page surfaces are light (#f8fafc); cards are WHITE with dark text.
 * - Navy (#0b1f3a) is used ONLY as text colour, thin 1-3px accents or small
 *   header chips. There are NO large navy background panels anywhere
 *   (hero, forms, pricing, dashboard, result and admin surfaces are light).
 * - v1.3 layout: render_view() wraps every public view in
 *     <div class="fth-app fth-page fth-page-{slug}">
 *       <div class="fth-contained [fth-wide]"> ...view inner output... </div>
 *     </div>
 *   Views output INNER content only. full-bleed is DEPRECATED and OFF — there
 *   is NO 100vw, NO margin:-50vw, NO left:50%/right:50% anywhere in this file.
 * - Everything is scoped under .fth-app. This stylesheet never touches
 *   body / html / .entry-content / .wp-site-blocks / .site-main / .content-area.
 * - High contrast, readable spacing/line-height, compact type, ~40px touch
 *   targets, mobile responsive. No external resources (no CDN, no web fonts).
 * - Minimal use of !important. There is NO prefers-color-scheme: dark block:
 *   v1.8 is a fixed light theme and never auto-switches under OS dark mode.
 */

/* ------------------------------------------------------------------ *
 * Custom properties (v1.3 light theme)
 * Brand palette mapped onto internal --fth-* tokens so existing rules
 * keep working while exposing the SG Group --sg-* palette too.
 * ------------------------------------------------------------------ */
.fth-app {
	/* Brand palette (source of truth, v1.8 "Slim Professional" slate palette).
	 * Names are unchanged for back-compat; only VALUES were retuned. */
	--sg-bg: #f8fafc;
	--sg-panel: #ffffff;
	--sg-text: #0f172a;
	--sg-text-sub: #64748b;
	--sg-heading: #0f172a;
	--sg-navy: #0b1f3a;        /* TEXT / thin accents only — never a big bg */
	--sg-gold: #d4af37;        /* kept for back-compat; usage minimised in v1.8 */
	--sg-cta: #2563eb;
	--sg-cta-hover: #1d4ed8;
	--sg-success: #047857;
	--sg-warn: #b45309;
	--sg-error: #b91c1c;
	--sg-info: #0369a1;
	--sg-purple: #7e22ce;

	/* Tinted surfaces (v1.8 status-soft) */
	--sg-info-bg: #f0f9ff;
	--sg-warn-bg: #fff7ed;
	--sg-success-bg: #ecfdf5;
	--sg-error-bg: #fef2f2;

	/* Back-compat aliases (older tokens referenced elsewhere) */
	--sg-navy-dark: #0b1f3a;
	--sg-main: var(--sg-navy);
	--sg-main-dark: var(--sg-navy);
	--sg-accent: var(--sg-gold);

	/* Surfaces */
	--fth-bg: var(--sg-bg);
	--fth-surface: var(--sg-panel);
	--fth-surface-2: #f1f5f9;        /* "surface-muted" */
	--fth-surface-3: #e2e8f0;
	--fth-border: #e2e8f0;
	--fth-border-strong: #cbd5e1;

	/* Text */
	--fth-text: var(--sg-text);
	--fth-heading: var(--sg-heading);
	--fth-text-muted: var(--sg-text-sub);
	--fth-text-faint: #94a3b8;
	--fth-text-invert: #ffffff;

	/* Navy — used only as text colour / thin accents / small chips.
	 * NOTE (v1.8): --fth-primary stays navy (text/accent). The
	 * -hover / -soft aliases now resolve to the blue CTA per spec so any
	 * "primary" interaction reads blue, not navy. A dedicated
	 * --fth-navy-soft keeps the old navy tint available where needed. */
	--fth-primary: var(--sg-navy);
	--fth-primary-hover: var(--fth-cta-hover);
	--fth-primary-active: var(--fth-cta-active);
	--fth-primary-soft: var(--fth-cta-soft);
	--fth-navy-soft: #eef2f8;

	/* CTA (blue) — primary action buttons */
	--fth-cta: var(--sg-cta);
	--fth-cta-hover: var(--sg-cta-hover);
	--fth-cta-active: #1e40af;
	--fth-cta-soft: #eff6ff;

	/* Accent (gold) — kept defined for back-compat; v1.8 minimises its use. */
	--fth-accent: var(--sg-gold);
	--fth-accent-soft: #f7eecb;
	--fth-accent-bd: #e3cd84;

	--fth-focus: var(--sg-cta);
	--fth-focus-ring: rgba(37, 99, 235, 0.30);

	/* Status hues. Colour carries verification state ONLY:
	 * green = match/confirmed, amber = needs-review/similar/manual,
	 * red = official-warning-match/fetch-error, grey = unconfirmed/
	 * out-of-scope/source-unavailable. NEVER safe/danger semantics. */
	--fth-c-green: var(--sg-success);
	--fth-c-green-bg: var(--sg-success-bg);
	--fth-c-green-bd: #a7f3d0;

	--fth-c-neutral: var(--sg-text-sub);
	--fth-c-neutral-bg: #f1f5f9;
	--fth-c-neutral-bd: #cbd5e1;

	--fth-c-amber: var(--sg-warn);
	--fth-c-amber-bg: var(--sg-warn-bg);
	--fth-c-amber-bd: #fdba74;

	--fth-c-red: var(--sg-error);
	--fth-c-red-bg: var(--sg-error-bg);
	--fth-c-red-bd: #fecaca;

	--fth-c-blue: var(--sg-info);
	--fth-c-blue-bg: var(--sg-info-bg);
	--fth-c-blue-bd: #bae6fd;

	--fth-c-gray: #64748b;
	--fth-c-gray-bg: #f1f5f9;
	--fth-c-gray-bd: #cbd5e1;

	--fth-c-purple: var(--sg-purple);
	--fth-c-purple-bg: #f6edfd;
	--fth-c-purple-bd: #ddc2f2;

	/* ---- v1.8 spec-name alias tokens (so future code can use the slim
	 * names directly; existing rules keep using the legacy names). ---- */
	--fth-surface-muted: var(--fth-surface-2);
	--fth-muted: var(--fth-text-muted);
	--fth-faint: var(--fth-text-faint);
	--fth-primary-soft: var(--fth-cta-soft);   /* re-stated: primary == blue CTA */
	--fth-success-soft: var(--fth-c-green-bg);
	--fth-warning: var(--fth-c-amber);
	--fth-warning-soft: var(--fth-c-amber-bg);
	--fth-danger: var(--fth-c-red);
	--fth-danger-soft: var(--fth-c-red-bg);
	--fth-info: var(--fth-c-blue);
	--fth-info-soft: var(--fth-c-blue-bg);

	--fth-radius: 10px;
	--fth-radius-sm: 6px;
	--fth-radius-lg: 14px;

	--fth-space-1: 4px;
	--fth-space-2: 8px;
	--fth-space-3: 12px;
	--fth-space-4: 16px;
	--fth-space-5: 24px;
	--fth-space-6: 32px;
	--fth-space-7: 48px;

	--fth-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--fth-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.06);
	--fth-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10);

	--fth-touch: 48px;

	box-sizing: border-box;
	color: var(--fth-text);
	font-size: 16px;
	line-height: 1.65;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
}

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

.fth-app img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ *
 * v1.3 contained layout
 * render_view() wraps views in .fth-app > .fth-contained. Nothing
 * here breaks out of the theme content column.
 * ------------------------------------------------------------------ */
.fth-app .fth-contained {
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	box-sizing: border-box;
	padding-top: var(--fth-space-6);
	padding-bottom: var(--fth-space-7);
}

.fth-app .fth-contained.fth-wide {
	max-width: 1180px;
}

.fth-app .fth-contained > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-contained > section {
	margin: 0 0 var(--fth-space-6);
}

.fth-app .fth-contained > section:last-child {
	margin-bottom: 0;
}

/* Page-scoped width tweaks (no viewport breakout). */
.fth-app.fth-page-free .fth-contained {
	padding-top: var(--fth-space-5);
}

.fth-app.fth-page-login .fth-contained {
	max-width: 520px;
}

/*
 * full-bleed is DEPRECATED in v1.3. The class may still appear in markup,
 * but it MUST NOT break out of the content column. This is a harmless
 * no-op: it never sets width:100vw or negative viewport margins.
 */
.fth-app.fth-full-bleed,
.fth-app .fth-full-bleed {
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	left: auto;
	right: auto;
}

/* ------------------------------------------------------------------ *
 * Type scale
 * h1 32-44px, h2 24-32px, body >=16px, line-height 1.55-1.75.
 * ------------------------------------------------------------------ */
.fth-app h1,
.fth-app h2,
.fth-app h3,
.fth-app h4,
.fth-app h5,
.fth-app h6 {
	color: var(--fth-heading);
	line-height: 1.2;
	margin: 0 0 var(--fth-space-4);
	font-weight: 800;
	letter-spacing: -0.015em;
}

.fth-app h1 {
	font-size: clamp(32px, 4.4vw, 44px);
}

.fth-app h2 {
	font-size: clamp(24px, 3vw, 32px);
}

.fth-app h3 {
	font-size: clamp(19px, 2vw, 23px);
	font-weight: 700;
}

.fth-app h4 {
	font-size: 17px;
	font-weight: 700;
}

.fth-app p {
	margin: 0 0 var(--fth-space-4);
	line-height: 1.7;
}

.fth-app a {
	color: var(--fth-cta);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fth-app a:hover {
	color: var(--fth-cta-hover);
}

.fth-app :focus-visible {
	outline: 3px solid var(--fth-focus);
	outline-offset: 2px;
	border-radius: var(--fth-radius-sm);
}

.fth-app code,
.fth-app kbd,
.fth-app samp {
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, Monaco, "Courier New", monospace;
}

/* ------------------------------------------------------------------ *
 * Hero — LIGHT, compact (v1.8). White / very light tint, dark heading
 * TEXT, and a thin neutral→blue accent line (no navy block, no gold).
 * ------------------------------------------------------------------ */
/* Hero (v1.8 slim): compact vertical rhythm, light white→pale gradient,
 * smaller title, a thin neutral→blue accent line (gold removed). */
.fth-app .fth-hero {
	position: relative;
	background: linear-gradient(180deg, #ffffff 0%, var(--fth-cta-soft) 100%);
	color: var(--fth-text);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-lg);
	padding: clamp(20px, 3.2vw, 36px);
	margin: 0 0 var(--fth-space-5);
	overflow: hidden;
}

.fth-app .fth-hero::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, var(--fth-cta), var(--fth-border-strong) 80%, transparent);
}

.fth-app .fth-hero h1,
.fth-app .fth-hero h2,
.fth-app .fth-hero h3,
.fth-app .fth-hero .fth-hero__title {
	color: var(--fth-heading);
}

.fth-app .fth-hero p,
.fth-app .fth-hero .fth-hero__sub {
	color: var(--fth-text-muted);
}

.fth-app .fth-hero__title {
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 var(--fth-space-3);
	max-width: 24ch;
}

.fth-app .fth-hero__sub {
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.6;
	margin: 0 0 var(--fth-space-4);
	max-width: 64ch;
}

/* ------------------------------------------------------------------ *
 * v2.4.37: honor the `hidden` attribute authoritatively. Author rules
 * like `.fth-app .fth-btn{display:inline-flex}` (specificity 0,2,0)
 * otherwise beat the UA `[hidden]{display:none}` (0,1,0), leaving a
 * hidden element (e.g. the locked-detail modebar "Use" button that
 * templates.js hides on the Free surface) visible-but-inert. This makes
 * the `hidden` attribute win everywhere inside the app shell.
 * ------------------------------------------------------------------ */
.fth-app [hidden] { display: none !important; }

/* ------------------------------------------------------------------ *
 * Buttons
 * High specificity (.fth-app .fth-btn) so theme CSS does not win.
 * Primary = blue CTA. Ghost = white surface + neutral border.
 * ------------------------------------------------------------------ */
/* Buttons (v1.8 slim): ~40px tall, 14px text, 1px border, sm radius. */
.fth-app .fth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fth-space-2);
	min-height: 40px;
	padding: 8px 16px;
	margin: 0;
	border: 1px solid var(--fth-border-strong);
	border-radius: var(--fth-radius-sm);
	background: var(--fth-surface);
	color: var(--fth-text);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
	-webkit-appearance: none;
	appearance: none;
}

.fth-app .fth-btn:hover {
	background: var(--fth-surface-2);
	border-color: var(--fth-border-strong);
	color: var(--fth-text);
	text-decoration: none;
}

.fth-app .fth-btn:active {
	transform: translateY(1px);
}

.fth-app .fth-btn:focus-visible {
	outline: 2px solid var(--fth-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 3px var(--fth-focus-ring);
}

.fth-app .fth-btn[disabled],
.fth-app .fth-btn:disabled,
.fth-app .fth-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
	box-shadow: none;
	transform: none;
}

/* Primary (blue CTA, white text) — flat, no shadow */
.fth-app .fth-btn--primary {
	background: var(--fth-cta);
	border-color: var(--fth-cta);
	color: var(--fth-text-invert);
}

.fth-app .fth-btn--primary:hover {
	background: var(--fth-cta-hover);
	border-color: var(--fth-cta-hover);
	color: var(--fth-text-invert);
}

.fth-app .fth-btn--primary:active {
	background: var(--fth-cta-active);
	border-color: var(--fth-cta-active);
}

/* Ghost (white surface, neutral border, dark text) */
.fth-app .fth-btn--ghost {
	background: var(--fth-surface);
	border-color: var(--fth-border-strong);
	color: var(--fth-text);
}

.fth-app .fth-btn--ghost:hover {
	background: var(--fth-surface-2);
	border-color: var(--fth-border-strong);
	color: var(--fth-text);
}

/* Secondary = neutral light button (alias of ghost styling). */
.fth-app .fth-btn--secondary {
	background: var(--fth-surface);
	border-color: var(--fth-border-strong);
	color: var(--fth-text);
}

.fth-app .fth-btn--secondary:hover {
	background: var(--fth-surface-2);
	border-color: var(--fth-border-strong);
	color: var(--fth-text);
}

/* Sizes / width */
.fth-app .fth-btn--lg {
	min-height: 44px;
	padding: 11px 22px;
	font-size: 15px;
	border-radius: var(--fth-radius-sm);
}

.fth-app .fth-btn--sm {
	min-height: auto;
	height: auto;
	padding: 4px 10px;
	font-size: 13px;
}

.fth-app .fth-btn--block {
	display: flex;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Cards (white, dark text)
 * ------------------------------------------------------------------ */
/* Cards (v1.8 slim): white, 1px border, NO default shadow, modest padding.
 * Opt into elevation with .fth-card--raised. */
.fth-app .fth-card {
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	box-shadow: none;
	padding: var(--fth-space-4);
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-card--raised {
	box-shadow: var(--fth-shadow-sm);
}

.fth-app .fth-card__title {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 var(--fth-space-3);
	color: var(--fth-heading);
}

.fth-app .fth-card__body {
	color: var(--fth-text);
}

.fth-app .fth-card__body > *:last-child {
	margin-bottom: 0;
}

/*
 * Emphasis card variant — v1.3: stays LIGHT (no navy panel). A white card
 * with a thin navy left accent and a light tinted background.
 */
.fth-app .fth-card--emphasis {
	background: var(--sg-info-bg);
	border-color: var(--fth-c-blue-bd);
	border-left: 3px solid var(--sg-navy);
	color: var(--fth-text);
}

.fth-app .fth-card--emphasis .fth-card__title,
.fth-app .fth-card--emphasis h1,
.fth-app .fth-card--emphasis h2,
.fth-app .fth-card--emphasis h3 {
	color: var(--sg-navy);
}

.fth-app .fth-card--emphasis .fth-card__body,
.fth-app .fth-card--emphasis p {
	color: var(--fth-text);
}

/* ------------------------------------------------------------------ *
 * Grid
 * ------------------------------------------------------------------ */
.fth-app .fth-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--fth-space-5);
}

.fth-app .fth-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fth-app .fth-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.fth-app .fth-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.fth-app .fth-grid--2,
	.fth-app .fth-grid--3 {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ *
 * Status badges
 * Distinct hues for verification state only. No safety semantics.
 * ------------------------------------------------------------------ */
.fth-app .fth-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border: 1px solid var(--fth-border-strong);
	border-radius: 999px;
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
}

.fth-app .fth-badge--match {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

.fth-app .fth-badge--nomatch {
	background: var(--fth-c-neutral-bg);
	border-color: var(--fth-c-neutral-bd);
	color: var(--fth-c-neutral);
}

.fth-app .fth-badge--warning {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-badge--mismatch {
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	color: var(--fth-c-red);
}

.fth-app .fth-badge--manual {
	background: var(--fth-c-blue-bg);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-c-blue);
}

.fth-app .fth-badge--unavailable {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	color: var(--fth-c-gray);
}

/* v1.4 source-tier badges. Colour is presentational only, never a verdict. */
.fth-app .fth-badge--review {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-badge--restricted {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-badge--notpublic {
	background: var(--fth-c-neutral-bg);
	border-color: var(--fth-c-neutral-bd);
	color: var(--fth-c-neutral);
}

/* v1.4 result statuses --------------------------------------------- *
 * review     = possible_match_manual_review (amber)
 * restricted = source_restricted (amber / brown text)
 * notpublic  = not_public (grey)
 * Colour carries verification state only; never safe/danger semantics.
 * ------------------------------------------------------------------ */
.fth-app .fth-badge--review {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-badge--restricted {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: #7c4a14; /* amber / brown — distinct from plain amber */
}

.fth-app .fth-badge--notpublic {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	color: var(--fth-c-gray);
}

/* ------------------------------------------------------------------ *
 * Diff badges / inline diff markers
 * ------------------------------------------------------------------ */
.fth-app .fth-diff--added,
.fth-app .fth-diff--removed,
.fth-app .fth-diff--changed,
.fth-app .fth-diff--rawonly,
.fth-app .fth-diff--parser,
.fth-app .fth-diff--unavailable {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid transparent;
	border-radius: var(--fth-radius-sm);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.fth-app .fth-diff--added {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

.fth-app .fth-diff--removed {
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	color: var(--fth-c-red);
	text-decoration: line-through;
}

.fth-app .fth-diff--changed {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-diff--rawonly {
	background: var(--fth-c-blue-bg);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-c-blue);
}

.fth-app .fth-diff--parser {
	background: var(--fth-c-purple-bg);
	border-color: var(--fth-c-purple-bd);
	color: var(--fth-c-purple);
}

.fth-app .fth-diff--unavailable {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	color: var(--fth-c-gray);
}

/* ------------------------------------------------------------------ *
 * Forms (white bg, dark text, visible border; 44px+ controls)
 * ------------------------------------------------------------------ */
.fth-app .fth-field {
	display: block;
	margin: 0 0 var(--fth-space-5);
}

.fth-app .fth-label {
	display: block;
	margin: 0 0 var(--fth-space-2);
	font-size: 13px;
	font-weight: 600;
	color: var(--fth-text);
}

/* Inputs (v1.8 slim): ~40px tall, 1px strong border, sm radius. font stays
 * >=16px on touch to avoid iOS auto-zoom; desktop perceives a compact field. */
.fth-app .fth-input,
.fth-app .fth-select,
.fth-app .fth-textarea {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--fth-border-strong);
	border-radius: var(--fth-radius-sm);
	background: var(--fth-surface);
	color: var(--fth-text);
	font-family: inherit;
	font-size: 16px; /* >=16px to prevent iOS zoom */
	line-height: 1.45;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fth-app .fth-select {
	background-image: linear-gradient(45deg, transparent 50%, var(--fth-text-muted) 50%),
		linear-gradient(135deg, var(--fth-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.fth-app .fth-textarea {
	min-height: 120px;
	resize: vertical;
}

.fth-app .fth-input::placeholder,
.fth-app .fth-textarea::placeholder {
	color: var(--fth-text-faint);
	opacity: 1;
}

.fth-app .fth-input:focus,
.fth-app .fth-select:focus,
.fth-app .fth-textarea:focus {
	border-color: var(--fth-cta);
	outline: none;
	box-shadow: 0 0 0 2px var(--fth-focus-ring);
}

.fth-app .fth-help {
	display: block;
	margin-top: var(--fth-space-2);
	font-size: 14px;
	line-height: 1.6;
	color: var(--fth-text-muted);
}

/* ------------------------------------------------------------------ *
 * Pricing (.fth-pricing + .fth-pricing-grid)
 * White cards, large price, CTA pinned to the bottom of each card.
 * Recommended plan (Pro) = highlighted thin border + small gold chip.
 * ------------------------------------------------------------------ */
.fth-app .fth-pricing,
.fth-app .fth-pricing-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	align-items: stretch;
}

.fth-app .fth-plan {
	display: flex;
	flex-direction: column;
	min-width: 280px;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-lg);
	box-shadow: none;
	padding: var(--fth-space-5);
}

/* Recommended plan: highlighted thin BLUE border + blue top accent
 * (v1.8 minimises gold; the "recommended" cue is now a subtle blue). */
.fth-app .fth-plan--recommended {
	border-color: var(--fth-cta);
	box-shadow: 0 0 0 1px var(--fth-cta) inset;
	position: relative;
	overflow: hidden;
}

.fth-app .fth-plan--recommended::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--fth-cta);
}

.fth-app .fth-plan__name {
	font-size: 18px;
	font-weight: 800;
	color: var(--fth-heading);
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-plan__price {
	font-size: 36px;
	font-weight: 800;
	color: var(--fth-heading);
	margin: var(--fth-space-2) 0 var(--fth-space-5);
	line-height: 1.1;
}

.fth-app .fth-plan__price small {
	display: inline;
	font-size: 15px;
	font-weight: 600;
	color: var(--fth-text-muted);
}

.fth-app .fth-plan__feat {
	list-style: none;
	margin: 0 0 var(--fth-space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-3);
	flex: 1 1 auto;
}

.fth-app .fth-plan__feat li {
	position: relative;
	padding-left: 28px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--fth-text);
}

.fth-app .fth-plan__feat li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.45em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--fth-cta);
	border-bottom: 2px solid var(--fth-cta);
	transform: rotate(-45deg);
}

.fth-app .fth-plan--recommended .fth-plan__feat li::before {
	border-color: var(--fth-cta);
}

/* CTA pinned to the bottom of each plan card (flex column + margin-top:auto). */
.fth-app .fth-plan__cta,
.fth-app .fth-plan > .fth-btn:last-child {
	margin-top: auto;
}

/* Recommended / "推奨プラン" chip on the Pro plan — v1.8 subtle blue
 * (replaces the previous gold chip). */
.fth-app .fth-plan__badge {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	padding: 2px 10px;
	margin: 0 0 var(--fth-space-3);
	border-radius: 999px;
	background: var(--fth-cta-soft);
	border: 1px solid var(--fth-c-blue-bd);
	color: var(--fth-cta);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* Multi-currency / interval price spans: JS toggles visibility. */
.fth-app .fth-price {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Consent
 * ------------------------------------------------------------------ */
.fth-app .fth-consent-block {
	margin: var(--fth-space-4) 0;
	padding: var(--fth-space-5);
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
}

.fth-app .fth-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--fth-space-3);
	margin: 0 0 var(--fth-space-3);
	font-size: 15px;
	line-height: 1.6;
	color: var(--fth-text);
	cursor: pointer;
}

.fth-app .fth-consent:last-child {
	margin-bottom: 0;
}

.fth-app .fth-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 1px 0 0;
	accent-color: var(--fth-cta);
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Notices / disclaimer / status pill
 * ------------------------------------------------------------------ */
.fth-app .fth-notice {
	padding: var(--fth-space-4);
	border: 1px solid var(--fth-border-strong);
	border-left-width: 4px;
	border-radius: var(--fth-radius);
	background: var(--fth-surface-2);
	color: var(--fth-text);
	margin: 0 0 var(--fth-space-4);
	font-size: 15px;
	line-height: 1.65;
}

.fth-app .fth-notice > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-notice--info {
	background: var(--fth-c-blue-bg);
	border-color: var(--fth-c-blue-bd);
	border-left-color: var(--fth-c-blue);
	color: var(--fth-c-blue);
}

.fth-app .fth-notice--warn {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	border-left-color: var(--fth-c-amber);
	color: var(--fth-c-amber);
}

.fth-app .fth-notice--success {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	border-left-color: var(--fth-c-green);
	color: var(--fth-c-green);
}

.fth-app .fth-disclaimer {
	padding: var(--fth-space-3) var(--fth-space-4);
	background: var(--fth-surface-2);
	border: 1px dashed var(--fth-border-strong);
	border-radius: var(--fth-radius);
	color: var(--fth-text-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: var(--fth-space-4) 0 0;
}

.fth-app .fth-disclaimer > *:last-child {
	margin-bottom: 0;
}

/* Status pills (v1.8 slim): unified 22px height, 12px/600 text, light
 * tinted background + coloured text + 1px border, pill radius. The leading
 * dot is kept small. Light backgrounds only (never solid saturated fills). */
.fth-app .fth-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--fth-c-gray-bd);
	background: var(--fth-c-gray-bg);
	color: var(--fth-c-gray);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.fth-app .fth-status-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * Search result status cards (v1.3)
 * White card with a 4px coloured left border. Colour = verification
 * state only: green=match-confirmed, amber=needs-review/similar/manual,
 * red=official-warning-match/fetch-error, grey=unconfirmed/out-of-scope/
 * source-unavailable. Never safe/danger.
 * ------------------------------------------------------------------ */
.fth-app .fth-result-card {
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-left: 4px solid var(--fth-c-gray);
	border-radius: var(--fth-radius);
	box-shadow: none;
	padding: var(--fth-space-4);
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-result-card > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-result-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fth-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--fth-space-3);
}

.fth-app .fth-result-card__title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-result-card__meta {
	font-size: 14px;
	color: var(--fth-text-muted);
}

/* Match / confirmed (green) */
.fth-app .fth-result--match {
	border-left-color: var(--fth-c-green);
}

/* Needs review / similar / manual (amber) */
.fth-app .fth-result--review {
	border-left-color: var(--fth-c-amber);
}

/* Official-warning match / fetch error (red) */
.fth-app .fth-result--warning {
	border-left-color: var(--fth-c-red);
}

/* Unconfirmed / out-of-scope / source-unavailable (grey) */
.fth-app .fth-result--unconfirmed {
	border-left-color: var(--fth-c-gray);
}

/* v1.4: manual review target — not auto-checked (grey) */
.fth-app .fth-result--manual {
	border-left-color: var(--fth-c-gray);
}

/* v1.4: source not auto-checked, restricted (amber/grey) */
.fth-app .fth-result--restricted {
	border-left-color: var(--fth-c-amber);
}

/* v1.4: no public register to auto-check (grey) */
.fth-app .fth-result--notpublic {
	border-left-color: var(--fth-c-gray);
}

/* v1.4 source-tier UI: grouped result sections + tier pill. */
.fth-app .fth-result-section {
	margin: 0 0 var(--fth-space-5);
}

.fth-app .fth-result-section__title {
	margin: 0 0 var(--fth-space-2);
	font-size: 15px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-result-section__note {
	margin: 0 0 var(--fth-space-3);
}

.fth-app .fth-result-card__tier {
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-status-pill--auto {
	color: var(--fth-c-blue);
	border-color: var(--fth-c-blue-bd);
	background: var(--fth-c-blue-bg);
}

.fth-app .fth-status-pill--manual {
	color: var(--fth-c-gray);
	border-color: var(--fth-c-gray-bd);
	background: var(--fth-c-gray-bg);
}

.fth-app .fth-result-card__list--caveats {
	margin-top: var(--fth-space-2);
}

/* ------------------------------------------------------------------ *
 * v1.4 result status cards — full set
 * Left-border 4px + a light tinted background that matches the palette.
 * Colour carries verification state ONLY (never safe/danger semantics):
 *   green  = match-confirmed
 *   red    = official-warning match / fetch error
 *   amber  = needs-review / similar / source-restricted
 *   grey   = unconfirmed / manual-review-only / not-public
 * These augment the border-only rules above with a tinted surface so the
 * whole card reads at a glance. All surfaces stay LIGHT (no navy blocks).
 * ------------------------------------------------------------------ */
.fth-app .fth-result--match {
	border-left-color: var(--fth-c-green);
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	border-left-color: var(--fth-c-green);
}

.fth-app .fth-result--warning {
	border-left-color: var(--fth-c-red);
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	border-left-color: var(--fth-c-red);
}

.fth-app .fth-result--review {
	border-left-color: var(--fth-c-amber);
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	border-left-color: var(--fth-c-amber);
}

.fth-app .fth-result--unconfirmed {
	border-left-color: var(--fth-c-gray);
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	border-left-color: var(--fth-c-gray);
}

/* Manual-review-only (grey) — possible_match_manual_review / manual_review_required */
.fth-app .fth-result--manual {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	border-left-color: var(--fth-c-gray);
}

/* Source restricted (amber) — login/captcha/ToS-limited register */
.fth-app .fth-result--restricted {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	border-left-color: var(--fth-c-amber);
}

/* Not public (grey) — no public register to query */
.fth-app .fth-result--notpublic {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	border-left-color: var(--fth-c-gray);
}

/* Keep the meta line readable on the tinted surfaces. */
.fth-app .fth-result--match .fth-result-card__meta,
.fth-app .fth-result--warning .fth-result-card__meta,
.fth-app .fth-result--review .fth-result-card__meta,
.fth-app .fth-result--unconfirmed .fth-result-card__meta,
.fth-app .fth-result--manual .fth-result-card__meta,
.fth-app .fth-result--restricted .fth-result-card__meta,
.fth-app .fth-result--notpublic .fth-result-card__meta {
	color: var(--fth-text-muted);
}

/* ------------------------------------------------------------------ *
 * v1.4 result group header — section title above a list of result cards
 * (e.g. "照合した情報源 / Sources searched"). Light, thin gold accent.
 * ------------------------------------------------------------------ */
.fth-app .fth-result-group__title {
	display: flex;
	align-items: center;
	gap: var(--fth-space-2);
	margin: var(--fth-space-5) 0 var(--fth-space-3);
	padding: 0 0 var(--fth-space-2);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--fth-heading);
	border-bottom: 2px solid var(--fth-border);
}

.fth-app .fth-result-group__title::before {
	content: "";
	flex: 0 0 auto;
	width: 3px;
	height: 16px;
	border-radius: 2px;
	background: var(--fth-cta);
}

.fth-app .fth-result-group__title:first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------ *
 * Timeline (ordered list of verification checks)
 * ------------------------------------------------------------------ */
.fth-app .fth-timeline {
	list-style: none;
	margin: var(--fth-space-3) 0 0;
	padding: 0 0 0 var(--fth-space-5);
	position: relative;
	counter-reset: fth-tl;
}

.fth-app .fth-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--fth-border-strong);
}

.fth-app .fth-timeline > li {
	position: relative;
	margin: 0 0 var(--fth-space-4);
	padding: 0 0 0 var(--fth-space-4);
}

.fth-app .fth-timeline > li:last-child {
	margin-bottom: 0;
}

.fth-app .fth-timeline > li::before {
	content: "";
	position: absolute;
	left: -22px;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fth-surface);
	border: 3px solid var(--fth-primary);
	box-sizing: border-box;
}

.fth-app .fth-timeline time {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--fth-text-muted);
	margin-bottom: var(--fth-space-1);
}

/* ------------------------------------------------------------------ *
 * Audit timeline (signed ledger events)
 * ------------------------------------------------------------------ */
.fth-app .fth-audit-timeline {
	list-style: none;
	margin: var(--fth-space-3) 0 0;
	padding: 0 0 0 var(--fth-space-5);
	position: relative;
}

.fth-app .fth-audit-timeline::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(var(--fth-primary), var(--fth-border-strong));
}

.fth-app .fth-audit-timeline > li {
	position: relative;
	margin: 0 0 var(--fth-space-3);
	padding: var(--fth-space-3) var(--fth-space-4);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	box-shadow: none;
}

.fth-app .fth-audit-timeline > li:last-child {
	margin-bottom: 0;
}

.fth-app .fth-audit-timeline > li::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 18px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--fth-surface);
	border: 3px solid var(--fth-primary);
}

.fth-app .fth-audit-timeline > li.is-break::before {
	border-color: var(--fth-c-red);
}

.fth-app .fth-audit-timeline time,
.fth-app .fth-audit-timeline .fth-audit-timeline__meta {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--fth-text-muted);
	margin-bottom: var(--fth-space-1);
}

.fth-app .fth-audit-timeline code {
	font-size: 12px;
	color: var(--fth-text-faint);
	word-break: break-all;
}

/* ------------------------------------------------------------------ *
 * Key / value rows
 * ------------------------------------------------------------------ */
.fth-app .fth-kv {
	display: grid;
	grid-template-columns: minmax(120px, max-content) 1fr;
	gap: var(--fth-space-2) var(--fth-space-4);
	margin: 0;
	font-size: 15px;
}

.fth-app .fth-kv > dt,
.fth-app .fth-kv__key {
	color: var(--fth-text-muted);
	font-weight: 700;
	margin: 0;
}

.fth-app .fth-kv > dd,
.fth-app .fth-kv__val {
	margin: 0;
	color: var(--fth-text);
	word-break: break-word;
}

.fth-app .fth-kv > dt + dd,
.fth-app .fth-kv__key + .fth-kv__val {
	border: 0;
}

.fth-app .fth-kv--bordered > dt,
.fth-app .fth-kv--bordered > dd {
	padding-bottom: var(--fth-space-2);
	border-bottom: 1px solid var(--fth-border);
}

/* ------------------------------------------------------------------ *
 * Table
 * ------------------------------------------------------------------ */
/* Table (v1.8 slim): white, surface-2 header, 1px borders, compact rows
 * (~46px via 10px/12px padding), 14px text, row hover = surface-2. Status
 * is shown with pills, never a solid colour cell fill. */
.fth-app .fth-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	overflow: hidden;
	font-size: 14px;
}

.fth-app .fth-table th,
.fth-app .fth-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--fth-border);
	vertical-align: top;
}

.fth-app .fth-table thead th {
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
}

.fth-app .fth-table tbody tr:last-child th,
.fth-app .fth-table tbody tr:last-child td {
	border-bottom: none;
}

.fth-app .fth-table tbody tr:hover td {
	background: var(--fth-surface-2);
}

@media (max-width: 640px) {
	.fth-app .fth-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ------------------------------------------------------------------ *
 * Jurisdiction matrix table (v1.3) — plan/feature x jurisdiction grid
 * ------------------------------------------------------------------ */
.fth-app .fth-jurmatrix {
	width: 100%;
	border-collapse: collapse;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	overflow: hidden;
	font-size: 15px;
}

.fth-app .fth-jurmatrix th,
.fth-app .fth-jurmatrix td {
	padding: var(--fth-space-3) var(--fth-space-4);
	text-align: left;
	border-bottom: 1px solid var(--fth-border);
	border-right: 1px solid var(--fth-border);
	vertical-align: top;
}

.fth-app .fth-jurmatrix th:last-child,
.fth-app .fth-jurmatrix td:last-child {
	border-right: none;
}

.fth-app .fth-jurmatrix thead th {
	background: var(--fth-surface-2);
	color: var(--fth-heading);
	font-weight: 700;
	white-space: nowrap;
	border-bottom: 2px solid var(--fth-border-strong);
}

/* Row-label column: thin navy left accent (text-weight only). */
.fth-app .fth-jurmatrix tbody th[scope="row"],
.fth-app .fth-jurmatrix tbody th {
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-weight: 700;
	border-left: 3px solid var(--sg-navy);
}

.fth-app .fth-jurmatrix tbody tr:last-child th,
.fth-app .fth-jurmatrix tbody tr:last-child td {
	border-bottom: none;
}

.fth-app .fth-jurmatrix tbody tr:nth-child(even) td {
	background: var(--fth-surface-2);
}

.fth-app .fth-jurmatrix .fth-jurmatrix__yes {
	color: var(--fth-c-green);
	font-weight: 700;
}

.fth-app .fth-jurmatrix .fth-jurmatrix__no {
	color: var(--fth-text-faint);
}

@media (max-width: 720px) {
	.fth-app .fth-jurmatrix {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ------------------------------------------------------------------ *
 * Export summary card (v1.3) — evidence-package / repository output recap
 * ------------------------------------------------------------------ */
.fth-app .fth-export-summary {
	background: var(--sg-success-bg);
	border: 1px solid var(--fth-c-green-bd);
	border-left: 4px solid var(--fth-c-green);
	border-radius: var(--fth-radius);
	padding: var(--fth-space-5);
	margin: 0 0 var(--fth-space-4);
	color: var(--fth-text);
}

.fth-app .fth-export-summary > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-export-summary__title {
	margin: 0 0 var(--fth-space-3);
	font-size: 17px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-export-summary code {
	font-size: 13px;
	color: var(--fth-text);
	word-break: break-all;
}

.fth-app .fth-export-summary .fth-kv {
	font-size: 14px;
}

/* ------------------------------------------------------------------ *
 * Source card
 * ------------------------------------------------------------------ */
.fth-app .fth-source-card {
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	box-shadow: none;
	padding: var(--fth-space-4);
	margin: 0 0 var(--fth-space-3);
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
}

.fth-app .fth-source-card header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fth-space-3);
	flex-wrap: wrap;
}

.fth-app .fth-source-card h3,
.fth-app .fth-source-card h4 {
	margin: 0;
	font-size: 16px;
}

.fth-app .fth-source-card dl {
	margin: 0;
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 4px var(--fth-space-3);
	font-size: 14px;
}

.fth-app .fth-source-card dt {
	color: var(--fth-text-muted);
	font-weight: 700;
}

.fth-app .fth-source-card dd {
	margin: 0;
	color: var(--fth-text);
	word-break: break-word;
}

/* ------------------------------------------------------------------ *
 * Evidence Repository panel + state badge
 * (Internal class names unchanged; visible labels are set in the views.)
 * ------------------------------------------------------------------ */
.fth-app .fth-vault {
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-lg);
	box-shadow: none;
	padding: var(--fth-space-5);
	margin: 0 0 var(--fth-space-4);
	position: relative;
}

.fth-app .fth-vault::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: var(--fth-radius-lg) 0 0 var(--fth-radius-lg);
	background: var(--fth-primary);
}

.fth-app .fth-vault > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fth-space-3);
	flex-wrap: wrap;
	margin-bottom: var(--fth-space-3);
}

.fth-app .fth-vault__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--fth-heading);
}

/* Evidence Repository state badge */
.fth-app .fth-vault-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid var(--fth-border-strong);
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.fth-app .fth-vault-state::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.fth-app .fth-vault-state--ok {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

.fth-app .fth-vault-state--locked {
	background: var(--fth-c-blue-bg);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-c-blue);
}

.fth-app .fth-vault-state--keymissing {
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	color: var(--fth-c-red);
}

.fth-app .fth-vault-state--syncpending {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-vault-state--incomplete {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-vault-state--tamper {
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	color: var(--fth-c-red);
}

/* ------------------------------------------------------------------ *
 * TSA status pill
 * ------------------------------------------------------------------ */
.fth-app .fth-tsa {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: 999px;
	border: 1px solid var(--fth-border-strong);
	background: var(--fth-surface-2);
	color: var(--fth-text-muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.fth-app .fth-tsa::before {
	content: "TSA";
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 1px 5px;
	border-radius: 4px;
	background: currentColor;
	color: var(--fth-surface);
}

.fth-app .fth-tsa--valid {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

.fth-app .fth-tsa--missing {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-tsa--invalid {
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	color: var(--fth-c-red);
}

/* ------------------------------------------------------------------ *
 * Modal (centered overlay that blocks the background)
 * ------------------------------------------------------------------ */
.fth-app .fth-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--fth-space-4);
}

.fth-app .fth-modal[hidden] {
	display: none;
}

.fth-app .fth-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.fth-app .fth-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 2 * var(--fth-space-5));
	overflow-y: auto;
	background: var(--fth-surface);
	color: var(--fth-text);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-lg);
	box-shadow: var(--fth-shadow-lg);
	padding: var(--fth-space-5);
}

.fth-app .fth-modal__panel > header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fth-space-3);
	margin-bottom: var(--fth-space-4);
}

.fth-app .fth-modal__panel h2,
.fth-app .fth-modal__panel h3 {
	margin: 0;
	font-size: 20px;
}

.fth-app .fth-modal__panel > footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-2);
	justify-content: flex-end;
	margin-top: var(--fth-space-5);
}

@media (max-width: 640px) {
	.fth-app .fth-modal__panel > footer {
		flex-direction: column-reverse;
	}

	.fth-app .fth-modal__panel > footer .fth-btn {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Stepper (multi-step flows: evidence package create, export, etc.)
 * ------------------------------------------------------------------ */
.fth-app .fth-stepper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-2);
	list-style: none;
	margin: 0 0 var(--fth-space-5);
	padding: 0;
	counter-reset: fth-step;
}

.fth-app .fth-stepper > li {
	display: flex;
	align-items: center;
	gap: var(--fth-space-2);
	flex: 1 1 auto;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--fth-text-faint);
}

.fth-app .fth-stepper > li::before {
	counter-increment: fth-step;
	content: counter(fth-step);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--fth-border-strong);
	background: var(--fth-surface);
	color: var(--fth-text-faint);
	font-size: 13px;
}

.fth-app .fth-stepper > li::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	min-width: 12px;
	background: var(--fth-border-strong);
}

.fth-app .fth-stepper > li:last-child::after {
	display: none;
}

.fth-app .fth-stepper > li.is-active {
	color: var(--fth-primary);
}

.fth-app .fth-stepper > li.is-active::before {
	border-color: var(--fth-primary);
	background: var(--fth-primary);
	color: var(--fth-text-invert);
}

.fth-app .fth-stepper > li.is-done {
	color: var(--fth-c-green);
}

.fth-app .fth-stepper > li.is-done::before {
	border-color: var(--fth-c-green);
	background: var(--fth-c-green);
	color: var(--fth-text-invert);
	content: "\2713";
}

.fth-app .fth-stepper > li.is-done::after {
	background: var(--fth-c-green);
}

/* ------------------------------------------------------------------ *
 * Progress steps (v1.3) — vertical/inline labelled step list
 * ------------------------------------------------------------------ */
.fth-app .fth-stepsteps {
	list-style: none;
	margin: 0 0 var(--fth-space-5);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
	counter-reset: fth-ss;
}

.fth-app .fth-stepsteps > li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--fth-space-3);
	padding: var(--fth-space-3) var(--fth-space-4);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	font-size: 15px;
	line-height: 1.5;
	color: var(--fth-text);
}

.fth-app .fth-stepsteps > li::before {
	counter-increment: fth-ss;
	content: counter(fth-ss);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--fth-border-strong);
	background: var(--fth-surface-2);
	color: var(--fth-text-muted);
	font-size: 13px;
	font-weight: 800;
}

.fth-app .fth-stepsteps > li.is-active {
	border-color: var(--fth-cta);
	box-shadow: 0 0 0 1px var(--fth-cta) inset;
}

.fth-app .fth-stepsteps > li.is-active::before {
	border-color: var(--fth-cta);
	background: var(--fth-cta);
	color: var(--fth-text-invert);
}

.fth-app .fth-stepsteps > li.is-done::before {
	content: "\2713";
	border-color: var(--fth-c-green);
	background: var(--fth-c-green);
	color: var(--fth-text-invert);
}

.fth-app .fth-stepsteps__label {
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-stepsteps__desc {
	display: block;
	margin-top: var(--fth-space-1);
	font-size: 14px;
	color: var(--fth-text-muted);
}

/* ------------------------------------------------------------------ *
 * Bulk (textarea + preview table)
 * ------------------------------------------------------------------ */
.fth-app .fth-bulk {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-4);
}

.fth-app .fth-bulk__input {
	display: block;
	width: 100%;
	min-height: 160px;
	padding: var(--fth-space-3) var(--fth-space-4);
	border: 2px solid var(--fth-border-strong);
	border-radius: var(--fth-radius);
	background: var(--fth-surface);
	color: var(--fth-text);
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, Monaco, "Courier New", monospace;
	font-size: 14px;
	line-height: 1.6;
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fth-app .fth-bulk__input:focus {
	border-color: var(--fth-focus);
	outline: none;
	box-shadow: 0 0 0 4px var(--fth-focus-ring);
}

.fth-app .fth-bulk__preview {
	width: 100%;
	border-collapse: collapse;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	overflow: hidden;
	font-size: 14px;
}

.fth-app .fth-bulk__preview th,
.fth-app .fth-bulk__preview td {
	padding: var(--fth-space-2) var(--fth-space-3);
	text-align: left;
	border-bottom: 1px solid var(--fth-border);
	vertical-align: top;
}

.fth-app .fth-bulk__preview thead th {
	background: var(--fth-surface-2);
	font-weight: 700;
	white-space: nowrap;
}

.fth-app .fth-bulk__preview tbody tr:last-child td {
	border-bottom: none;
}

.fth-app .fth-bulk__count {
	font-size: 14px;
	font-weight: 700;
	color: var(--fth-text-muted);
}

@media (max-width: 640px) {
	.fth-app .fth-bulk__preview {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ------------------------------------------------------------------ *
 * Progress bar
 * ------------------------------------------------------------------ */
.fth-app .fth-progress {
	display: block;
	width: 100%;
	height: 12px;
	border-radius: 999px;
	background: var(--fth-surface-3);
	border: 1px solid var(--fth-border);
	overflow: hidden;
}

.fth-app .fth-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--fth-cta);
	border-radius: inherit;
	transition: width 0.3s ease;
}

.fth-app .fth-progress__bar--accent {
	background: var(--fth-cta);
}

.fth-app .fth-progress__label {
	display: block;
	margin-top: var(--fth-space-2);
	font-size: 13px;
	font-weight: 700;
	color: var(--fth-text-muted);
}

/* ------------------------------------------------------------------ *
 * Tabs — dashboard / account section switching
 * ------------------------------------------------------------------ */
/* Tabs (v1.8 slim): compact; the tab list scrolls horizontally on narrow
 * screens instead of wrapping. */
.fth-app .fth-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--fth-space-1);
	margin: 0 0 var(--fth-space-4);
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--fth-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.fth-app .fth-tab {
	display: inline-flex;
	align-items: center;
	gap: var(--fth-space-2);
	min-height: 38px;
	padding: 8px 12px;
	margin: 0 0 -1px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--fth-text-muted);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.fth-app .fth-tab:hover {
	color: var(--fth-text);
	background: var(--fth-surface-2);
	text-decoration: none;
}

.fth-app .fth-tab:focus-visible {
	outline: 3px solid var(--fth-focus);
	outline-offset: 2px;
}

.fth-app .fth-tab--active,
.fth-app .fth-tab[aria-selected="true"] {
	color: var(--fth-cta);
	border-bottom-color: var(--fth-cta);
}

.fth-app .fth-tabpanel {
	margin: 0;
}

.fth-app .fth-tabpanel[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * KPI cards — dashboard summary stats
 * ------------------------------------------------------------------ */
/* KPI (v1.8 slim): small white card, value ~24px, muted 12px label,
 * total height target <= ~80px, no shadow by default. */
.fth-app .fth-kpi {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	box-shadow: none;
	padding: var(--fth-space-3);
}

.fth-app .fth-kpi__value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fth-heading);
}

.fth-app .fth-kpi__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--fth-text-muted);
}

/* KPI accent (v1.8): thin BLUE accent instead of gold. */
.fth-app .fth-kpi--accent {
	border-color: var(--fth-c-blue-bd);
	box-shadow: 0 0 0 1px var(--fth-c-blue-bd) inset;
}

.fth-app .fth-kpi--accent .fth-kpi__value {
	color: var(--fth-cta);
}

/* Tight KPI wrap/grid of small cards. */
.fth-app .fth-dashboard__kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--fth-space-3);
	margin: 0 0 var(--fth-space-4);
}

/* ------------------------------------------------------------------ *
 * Team table + role pill
 * Drives DOM from assets/js/team.js ([data-fth="team-rows"], etc.)
 * ------------------------------------------------------------------ */
.fth-app .fth-team-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	overflow: hidden;
	font-size: 15px;
}

.fth-app .fth-team-table th,
.fth-app .fth-team-table td {
	padding: var(--fth-space-3) var(--fth-space-4);
	text-align: left;
	border-bottom: 1px solid var(--fth-border);
	vertical-align: middle;
}

.fth-app .fth-team-table thead th {
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-weight: 700;
	white-space: nowrap;
}

.fth-app .fth-team-table tbody tr:last-child th,
.fth-app .fth-team-table tbody tr:last-child td {
	border-bottom: none;
}

.fth-app .fth-team-table .fth-select {
	min-height: 40px;
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 14px;
}

.fth-app .fth-team-table td .fth-btn {
	min-height: 40px;
	padding: 8px 14px;
	font-size: 14px;
}

@media (max-width: 720px) {
	.fth-app .fth-team-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Role pill (owner/admin/analyst/viewer/billing). Distinct hues only. */
.fth-app .fth-role-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	border-radius: 999px;
	border: 1px solid var(--fth-border-strong);
	background: var(--fth-surface-2);
	color: var(--fth-text-muted);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
}

.fth-app .fth-role-pill--owner {
	background: var(--fth-c-purple-bg);
	border-color: var(--fth-c-purple-bd);
	color: var(--fth-c-purple);
}

.fth-app .fth-role-pill--admin {
	background: var(--fth-c-blue-bg);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-c-blue);
}

.fth-app .fth-role-pill--analyst {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

.fth-app .fth-role-pill--viewer {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	color: var(--fth-c-gray);
}

.fth-app .fth-role-pill--billing {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

/* Member status pill (invited / active / suspended). */
.fth-app .fth-role-pill--status-invited {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-role-pill--status-active {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

.fth-app .fth-role-pill--status-suspended {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	color: var(--fth-c-gray);
}

/* ------------------------------------------------------------------ *
 * Accordion — collapsible FAQ / detail sections
 * ------------------------------------------------------------------ */
.fth-app .fth-accordion {
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	background: var(--fth-surface);
	overflow: hidden;
	margin: 0 0 var(--fth-space-3);
}

.fth-app .fth-accordion__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fth-space-3);
	width: 100%;
	min-height: 52px;
	padding: var(--fth-space-4) var(--fth-space-5);
	border: 0;
	background: var(--fth-surface);
	color: var(--fth-text);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease;
}

.fth-app .fth-accordion__head:hover {
	background: var(--fth-surface-2);
}

.fth-app .fth-accordion__head:focus-visible {
	outline: 3px solid var(--fth-focus);
	outline-offset: -3px;
}

.fth-app .fth-accordion__head::after {
	content: "";
	flex: 0 0 auto;
	width: 11px;
	height: 11px;
	border-right: 2px solid var(--fth-text-muted);
	border-bottom: 2px solid var(--fth-text-muted);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.fth-app .fth-accordion__head[aria-expanded="true"]::after,
.fth-app .fth-accordion.is-open .fth-accordion__head::after {
	transform: rotate(-135deg);
}

.fth-app .fth-accordion__body {
	padding: var(--fth-space-4) var(--fth-space-5) var(--fth-space-5);
	color: var(--fth-text);
	font-size: 15px;
	line-height: 1.7;
	border-top: 1px solid var(--fth-border);
}

.fth-app .fth-accordion__body > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-accordion__body[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Fields helper (generic labelled field list, used by result views)
 * ------------------------------------------------------------------ */
.fth-app .fth-fields {
	display: grid;
	grid-template-columns: minmax(120px, max-content) 1fr;
	gap: var(--fth-space-2) var(--fth-space-4);
	margin: 0;
	font-size: 15px;
}

.fth-app .fth-fields > dt {
	color: var(--fth-text-muted);
	font-weight: 700;
	margin: 0;
}

.fth-app .fth-fields > dd {
	margin: 0;
	color: var(--fth-text);
	word-break: break-word;
}

/* ------------------------------------------------------------------ *
 * Small helpers
 * ------------------------------------------------------------------ */
.fth-app [data-fth="search-remaining"] {
	font-weight: 700;
	color: var(--fth-text-muted);
}

.fth-app .fth-is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Stack action buttons full-width on phones. */
@media (max-width: 640px) {
	.fth-app .fth-btn {
		width: 100%;
	}

	.fth-app .fth-btn.fth-btn--auto {
		width: auto;
	}

	.fth-app .fth-card,
	.fth-app .fth-plan,
	.fth-app .fth-vault,
	.fth-app .fth-result-card,
	.fth-app .fth-export-summary,
	.fth-app .fth-kpi {
		padding: var(--fth-space-4);
	}
}

/* ------------------------------------------------------------------ *
 * Reduced motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.fth-app * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ================================================================== *
 * v1.5 Review operations (kanban / table / detail) — front-end
 * Renders inside the customer dashboard under
 *   [data-fth="reviews"] (itself inside .fth-app).
 * Everything stays LIGHT and scoped under .fth-app. Colour on review
 * cards / status pills / tier pills carries WORKFLOW PRIORITY and
 * WORKFLOW STATE only — never a safety / quality / risk judgement about
 * a broker. Tier pills describe HOW a source is accessed (automated /
 * assisted review / restricted / not public), never a verdict.
 * No external resources; uses the existing --fth-* tokens so the dark
 * override below applies automatically.
 * ================================================================== */

/* Review workspace shell ------------------------------------------- */
.fth-app .fth-reviews {
	display: block;
	margin: 0 0 var(--fth-space-5);
}

.fth-app .fth-reviews__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fth-space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-reviews__title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--fth-heading);
}

/* Toolbar: view toggle + filters ----------------------------------- */
.fth-app .fth-reviews__toolbar {
	display: flex;
	align-items: flex-end;
	gap: var(--fth-space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--fth-space-4);
	padding: var(--fth-space-3) var(--fth-space-4);
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
}

.fth-app .fth-reviews__filters {
	display: flex;
	align-items: flex-end;
	gap: var(--fth-space-3);
	flex-wrap: wrap;
}

.fth-app .fth-reviews__filter {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-1);
	min-width: 150px;
}

.fth-app .fth-reviews__filter > label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--fth-text-muted);
}

.fth-app .fth-reviews__filter .fth-select {
	min-height: 40px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 14px;
}

/* View toggle (kanban / table) ------------------------------------- */
.fth-app .fth-view-toggle {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--fth-surface-3);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	margin-left: auto;
}

.fth-app .fth-view-toggle__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid transparent;
	border-radius: var(--fth-radius-sm);
	background: transparent;
	color: var(--fth-text-muted);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease,
		border-color 0.15s ease;
}

.fth-app .fth-view-toggle__btn:hover {
	color: var(--fth-text);
}

.fth-app .fth-view-toggle__btn.is-active,
.fth-app .fth-view-toggle__btn[aria-pressed="true"] {
	background: var(--fth-surface);
	border-color: var(--fth-border-strong);
	color: var(--fth-cta);
	box-shadow: none;
}

.fth-app .fth-view-toggle__btn:focus-visible {
	outline: 3px solid var(--fth-focus);
	outline-offset: 1px;
}

/* KPI strip --------------------------------------------------------- */
.fth-app .fth-review-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--fth-space-3);
	margin: 0 0 var(--fth-space-5);
}

.fth-app .fth-review-kpi {
	position: relative;
	overflow: hidden;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	box-shadow: none;
	padding: var(--fth-space-3) var(--fth-space-4);
}

/* Thin left accent — neutral by default. Modifiers carry workflow
 * priority only (amber=attention, red=urgent/overdue), never safety. */
.fth-app .fth-review-kpi::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--fth-border-strong);
}

.fth-app .fth-review-kpi--attention::before {
	background: var(--fth-c-amber);
}

.fth-app .fth-review-kpi--urgent::before {
	background: var(--fth-c-red);
}

.fth-app .fth-review-kpi--info::before {
	background: var(--fth-c-blue);
}

.fth-app .fth-review-kpi__label {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--fth-text-muted);
}

.fth-app .fth-review-kpi__value {
	margin: 0;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--fth-heading);
	font-variant-numeric: tabular-nums;
}

.fth-app .fth-review-kpi__sub {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--fth-text-faint);
}

/* Kanban board ----------------------------------------------------- */
.fth-app .fth-kanban {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 var(--fth-space-3);
	margin: 0 0 var(--fth-space-4);
	align-items: flex-start;
}

.fth-app .fth-kanban__col {
	flex: 0 0 auto;
	min-width: 240px;
	width: 260px;
	background: #f7f9fc;
	border: 1px solid #d8e0ea;
	border-radius: 8px;
	padding: 10px;
}

.fth-app .fth-kanban__col-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-3);
	padding: 0 0 var(--fth-space-2);
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--fth-heading);
	border-bottom: 2px solid var(--fth-border);
}

.fth-app .fth-kanban__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--fth-surface-3);
	color: var(--fth-text-muted);
	font-size: 11.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.fth-app .fth-kanban__body {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-3);
	min-height: 24px;
}

.fth-app .fth-kanban__empty {
	padding: var(--fth-space-4) var(--fth-space-2);
	font-size: 13px;
	color: var(--fth-text-faint);
	text-align: center;
}

/* Review card (white card, 4px left priority accent) ---------------- *
 * Modifiers carry WORKFLOW PRIORITY only — never safety semantics:
 *   --normal    grey   (routine)
 *   --attention amber  (needs attention soon)
 *   --urgent    red    (urgent / overdue)
 * ------------------------------------------------------------------ */
.fth-app .fth-review-card {
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-left: 4px solid var(--fth-c-gray);
	border-radius: var(--fth-radius-sm);
	box-shadow: none;
	padding: var(--fth-space-3) var(--fth-space-4);
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.05s ease,
		border-color 0.15s ease;
}

/* Interactive card: subtle elevation on hover only (slim affordance). */
.fth-app .fth-review-card:hover {
	box-shadow: var(--fth-shadow-sm);
	border-color: var(--fth-border-strong);
}

.fth-app .fth-review-card:active {
	transform: translateY(1px);
}

.fth-app .fth-review-card:focus-visible {
	outline: 3px solid var(--fth-focus);
	outline-offset: 2px;
}

.fth-app .fth-review-card--normal {
	border-left-color: var(--fth-c-gray);
}

.fth-app .fth-review-card--attention {
	border-left-color: var(--fth-c-amber);
}

.fth-app .fth-review-card--urgent {
	border-left-color: var(--fth-c-red);
}

.fth-app .fth-review-card__title {
	margin: 0 0 var(--fth-space-2);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fth-heading);
	word-break: break-word;
}

.fth-app .fth-review-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-review-card__meta:last-child {
	margin-bottom: 0;
}

.fth-app .fth-review-card__due {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--fth-text-muted);
}

.fth-app .fth-review-card__due--over {
	color: var(--fth-c-red);
}

.fth-app .fth-review-card__assignee {
	font-size: 12.5px;
	color: var(--fth-text-faint);
}

/* Status pill — neutral colour per kanban column ------------------- *
 * open=grey, in_progress=info(blue), pending_approval=amber,
 * approved=green, rejected=red, overdue=red. Workflow state only.
 * ------------------------------------------------------------------ */
.fth-app .fth-review-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border: 1px solid var(--fth-border-strong);
	border-radius: 999px;
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
}

.fth-app .fth-review-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.fth-app .fth-review-status--open {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	color: var(--fth-c-gray);
}

.fth-app .fth-review-status--in_progress {
	background: var(--fth-c-blue-bg);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-c-blue);
}

.fth-app .fth-review-status--pending_approval {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-review-status--approved {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

.fth-app .fth-review-status--rejected {
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	color: var(--fth-c-red);
}

.fth-app .fth-review-status--overdue {
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	color: var(--fth-c-red);
}

/* Tier pill — describes the source ACCESS MODE only ---------------- *
 * automated     = info/green (auto-monitorable)
 * assisted      = grey (assisted manual review)
 * restricted    = amber (login/captcha/ToS-limited)
 * notpublic     = grey (no public register)
 * Never a safety / quality verdict.
 * ------------------------------------------------------------------ */
.fth-app .fth-tier-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border: 1px solid var(--fth-border-strong);
	border-radius: 999px;
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: middle;
}

.fth-app .fth-tier-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.fth-app .fth-tier-pill--automated {
	background: var(--fth-c-blue-bg);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-c-blue);
}

.fth-app .fth-tier-pill--assisted {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	color: var(--fth-c-gray);
}

.fth-app .fth-tier-pill--restricted {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

.fth-app .fth-tier-pill--notpublic {
	background: var(--fth-c-gray-bg);
	border-color: var(--fth-c-gray-bd);
	color: var(--fth-c-gray);
}

/* Table view ------------------------------------------------------- */
.fth-app .fth-review-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-review-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	overflow: hidden;
	font-size: 14.5px;
}

.fth-app .fth-review-table th,
.fth-app .fth-review-table td {
	padding: var(--fth-space-3) var(--fth-space-4);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--fth-border);
}

.fth-app .fth-review-table thead th {
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-weight: 700;
	white-space: nowrap;
}

.fth-app .fth-review-table tbody tr:last-child td {
	border-bottom: none;
}

.fth-app .fth-review-table tbody tr {
	cursor: pointer;
}

.fth-app .fth-review-table tbody tr:hover td {
	background: var(--fth-surface-2);
}

.fth-app .fth-review-table tbody tr:focus-within td {
	background: var(--fth-primary-soft);
}

/* Detail panel ----------------------------------------------------- */
.fth-app .fth-review-detail {
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-lg);
	box-shadow: var(--fth-shadow-sm);
	padding: var(--fth-space-5);
	margin: var(--fth-space-4) 0 0;
}

.fth-app .fth-review-detail:empty {
	display: none;
}

.fth-app .fth-review-detail__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fth-space-3);
	flex-wrap: wrap;
	margin: 0 0 var(--fth-space-4);
	padding: 0 0 var(--fth-space-3);
	border-bottom: 2px solid var(--fth-border);
}

.fth-app .fth-review-detail__title {
	margin: 0 0 var(--fth-space-2);
	font-size: 19px;
	font-weight: 800;
	color: var(--fth-heading);
}

.fth-app .fth-review-detail__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-2);
}

.fth-app .fth-review-detail__section {
	margin: 0 0 var(--fth-space-5);
}

.fth-app .fth-review-detail__section:last-child {
	margin-bottom: 0;
}

.fth-app .fth-review-detail__section-title {
	margin: 0 0 var(--fth-space-3);
	font-size: 14.5px;
	font-weight: 800;
	color: var(--fth-heading);
}

.fth-app .fth-review-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-2);
	align-items: center;
}

/* Checklist -------------------------------------------------------- */
.fth-app .fth-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
}

.fth-app .fth-checklist > li {
	display: flex;
	align-items: flex-start;
	gap: var(--fth-space-3);
	padding: var(--fth-space-3);
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-sm);
}

.fth-app .fth-checklist__cb {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--fth-cta);
	cursor: pointer;
}

.fth-app .fth-checklist__label {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fth-text);
	cursor: pointer;
}

.fth-app .fth-checklist__item.is-checked .fth-checklist__label {
	color: var(--fth-text-faint);
	text-decoration: line-through;
}

/* Footnote / scope note (monitoring + pricing disclaimer) ----------- */
.fth-app .fth-review-footnote {
	margin: var(--fth-space-4) 0 0;
	padding: var(--fth-space-3) var(--fth-space-4);
	background: var(--fth-c-blue-bg);
	border: 1px solid var(--fth-c-blue-bd);
	border-radius: var(--fth-radius-sm);
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--fth-text-muted);
}

/* Responsive ------------------------------------------------------- */
@media (max-width: 640px) {
	.fth-app .fth-reviews__toolbar {
		align-items: stretch;
	}

	.fth-app .fth-view-toggle {
		margin-left: 0;
	}

	.fth-app .fth-reviews__filter {
		min-width: 0;
		flex: 1 1 140px;
	}

	.fth-app .fth-kanban__col {
		width: 84vw;
		max-width: 320px;
	}
}

/* ------------------------------------------------------------------ *
 * v1.7 paid-required card
 * Shown when a paid feature is opened without an active paid plan.
 * White card, centred, comfortable padding, subtle border. Light only —
 * no dark surface, no full-bleed.
 * ------------------------------------------------------------------ */
.fth-app .fth-paid-required {
	box-sizing: border-box;
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--fth-space-5);
	margin-bottom: var(--fth-space-5);
	padding: var(--fth-space-5);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-lg);
	box-shadow: var(--fth-shadow-sm);
}

.fth-app .fth-paid-required > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-paid-required__title {
	margin: 0 0 var(--fth-space-3);
	font-size: 20px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-paid-required__lead {
	margin: 0 0 var(--fth-space-4);
	font-size: 16px;
	line-height: 1.7;
	color: var(--fth-text);
}

.fth-app .fth-paid-required__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-3);
	margin: var(--fth-space-4) 0 0;
}

.fth-app .fth-paid-required__admin-warn {
	display: inline-flex;
	align-items: center;
	gap: var(--fth-space-2);
	margin: var(--fth-space-3) 0 0;
	padding: var(--fth-space-2) var(--fth-space-3);
	background: var(--fth-c-amber-bg);
	border: 1px solid var(--fth-c-amber-bd);
	border-radius: var(--fth-radius-sm);
	font-size: 13px;
	line-height: 1.5;
	color: var(--fth-c-amber);
}

@media (max-width: 640px) {
	.fth-app .fth-paid-required {
		padding: var(--fth-space-5);
	}

	.fth-app .fth-paid-required__actions {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ------------------------------------------------------------------ *
 * v1.7 dashboard plan line
 * A single inline row in the dashboard header showing the effective plan
 * (reusing .fth-status-pill) plus an optional preview badge / note.
 * ------------------------------------------------------------------ */
.fth-app .fth-dashboard__planline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-dashboard__preview-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 12px;
	border-radius: 999px;
	border: 1px solid var(--fth-c-blue-bd);
	background: var(--fth-c-blue-bg);
	color: var(--fth-c-blue);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.fth-app .fth-dashboard__preview-note {
	font-size: 13px;
	line-height: 1.5;
	color: var(--fth-text-muted);
}

/* Status-pill colour variants (v1.8 full set). Light tinted bg + coloured
 * text + 1px tinted border. Never a large/dark/saturated fill. Synonym
 * classes are grouped so the markup can use either spelling. */
.fth-app .fth-status-pill--ok,
.fth-app .fth-status-pill--success {
	color: var(--fth-c-green);
	border-color: var(--fth-c-green-bd);
	background: var(--fth-c-green-bg);
}

.fth-app .fth-status-pill--info {
	color: var(--fth-c-blue);
	border-color: var(--fth-c-blue-bd);
	background: var(--fth-c-blue-bg);
}

.fth-app .fth-status-pill--warn,
.fth-app .fth-status-pill--warning {
	color: var(--fth-c-amber);
	border-color: var(--fth-c-amber-bd);
	background: var(--fth-c-amber-bg);
}

.fth-app .fth-status-pill--danger,
.fth-app .fth-status-pill--error {
	color: var(--fth-c-red);
	border-color: var(--fth-c-red-bd);
	background: var(--fth-c-red-bg);
}

.fth-app .fth-status-pill--muted,
.fth-app .fth-status-pill--neutral {
	color: var(--fth-c-gray);
	border-color: var(--fth-c-gray-bd);
	background: var(--fth-c-gray-bg);
}

/* ------------------------------------------------------------------ *
 * v1.7 contextual template CTAs / next-actions
 * Light card (free post-checklist) and light tinted panel (paid
 * post-review next-actions). Normal flow, clear border, dismissable.
 * Light only — no dark block, no full-bleed.
 * ------------------------------------------------------------------ */
.fth-app .fth-template-cta {
	position: relative;
	margin: var(--fth-space-4) 0 0;
	padding: var(--fth-space-4);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-left: 3px solid var(--fth-cta);
	border-radius: var(--fth-radius);
	box-shadow: none;
}

.fth-app .fth-template-cta > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-template-cta__title {
	margin: 0 0 var(--fth-space-2);
	font-size: 16px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-template-cta__text {
	margin: 0 0 var(--fth-space-3);
	font-size: 15px;
	line-height: 1.65;
	color: var(--fth-text);
}

.fth-app .fth-next-actions {
	position: relative;
	margin: var(--fth-space-5) 0 0;
	padding: var(--fth-space-5);
	background: var(--fth-c-blue-bg);
	border: 1px solid var(--fth-c-blue-bd);
	border-radius: var(--fth-radius);
}

.fth-app .fth-next-actions > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-next-actions__title {
	margin: 0 0 var(--fth-space-3);
	font-size: 16px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-next-actions__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
}

.fth-app .fth-next-actions__item {
	display: flex;
	align-items: flex-start;
	gap: var(--fth-space-2);
	padding: var(--fth-space-2) var(--fth-space-3);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-sm);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--fth-text);
}

/* Dismiss control shared by both CTA panels. */
.fth-app .fth-template-cta__dismiss,
.fth-app .fth-next-actions__dismiss {
	position: absolute;
	top: var(--fth-space-3);
	right: var(--fth-space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--fth-radius-sm);
	color: var(--fth-text-muted);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.fth-app .fth-template-cta__dismiss:hover,
.fth-app .fth-next-actions__dismiss:hover {
	background: var(--fth-surface-2);
	border-color: var(--fth-border);
	color: var(--fth-text);
}

.fth-app .fth-template-cta__dismiss:focus-visible,
.fth-app .fth-next-actions__dismiss:focus-visible {
	outline: 2px solid var(--fth-focus);
	outline-offset: 1px;
}

/* ==================================================================== *
 * v1.8 "Slim Professional UI" — new front-end classes
 * Light only. Scoped under .fth-app. No full-bleed / breakout / dark.
 * ==================================================================== */

/* Slim pricing wrapper (no grid) — a single compact column for the
 * Free/min-CTA pages. Use instead of .fth-pricing-grid where only a
 * trimmed plan/CTA is needed. */
.fth-app .fth-pricing--mini {
	display: block;
	max-width: 560px;
	margin: 0 auto;
}

.fth-app .fth-pricing--mini .fth-plan {
	min-width: 0;
}

/* Small centred CTA row (Free page minimal CTA). */
.fth-app .fth-free-mincta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--fth-space-3);
	margin: var(--fth-space-4) 0 0;
	text-align: center;
}

.fth-app .fth-free-mincta > p {
	width: 100%;
	margin: 0 0 var(--fth-space-2);
	font-size: 14px;
	color: var(--fth-text-muted);
}

/* "More business details" disclosure on the Free page — wraps an
 * .fth-accordion; keep it readable and not heavy. */
.fth-app .fth-free-biz__more {
	margin: var(--fth-space-4) 0 0;
}

.fth-app .fth-free-biz__more .fth-accordion {
	margin-bottom: 0;
}

.fth-app .fth-free-biz__more .fth-accordion__head {
	min-height: 44px;
	padding: var(--fth-space-3) var(--fth-space-4);
	font-size: 14px;
}

.fth-app .fth-free-biz__more .fth-accordion__body {
	padding: var(--fth-space-3) var(--fth-space-4) var(--fth-space-4);
	font-size: 14px;
}

/* Dashboard header helper line (muted) + compact action row. */
.fth-app .fth-dashboard__head-lead {
	margin: 0 0 var(--fth-space-3);
	font-size: 14px;
	line-height: 1.6;
	color: var(--fth-text-muted);
}

.fth-app .fth-dashboard__head-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-4);
}

/* ==================================================================== *
 * v1.8 density classes — the front dashboard root gets one of:
 *   .fth-density-comfortable | .fth-density-compact | .fth-density-dense
 * They retune the heavy elements (tables, KPI, card padding) only.
 * .fth-density-compact matches the slim defaults above.
 * ==================================================================== */

/* Comfortable — roomier. */
.fth-app.fth-density-comfortable .fth-table th,
.fth-app.fth-density-comfortable .fth-table td {
	padding: 14px 16px;
}

.fth-app.fth-density-comfortable .fth-kpi {
	padding: 16px;
}

.fth-app.fth-density-comfortable .fth-card {
	padding: var(--fth-space-5);
}

/* Compact — the slim default. */
.fth-app.fth-density-compact .fth-table th,
.fth-app.fth-density-compact .fth-table td {
	padding: 10px 12px;
}

.fth-app.fth-density-compact .fth-kpi {
	padding: 12px;
}

.fth-app.fth-density-compact .fth-card {
	padding: var(--fth-space-4);
}

/* Dense — tight, slightly smaller type. */
.fth-app.fth-density-dense .fth-table {
	font-size: 13px;
}

.fth-app.fth-density-dense .fth-table th,
.fth-app.fth-density-dense .fth-table td {
	padding: 6px 10px;
}

.fth-app.fth-density-dense .fth-kpi {
	padding: 8px 10px;
}

.fth-app.fth-density-dense .fth-kpi__value {
	font-size: 22px;
}

.fth-app.fth-density-dense .fth-card {
	padding: var(--fth-space-3);
}

/* ------------------------------------------------------------------ *
 * OS dark-mode handling (v1.8) — REMOVED.
 * v1.8 ships a FIXED LIGHT theme. There is intentionally NO
 * @media (prefers-color-scheme: dark) block: the plugin must never auto-
 * switch to dark under OS dark mode, and no dark surface tokens are
 * reachable. Cards stay white, navy remains a text/accent colour only.
 * (Earlier versions carried a neutralised dark media query here; it has
 * been deleted entirely so OS dark mode has no effect on this UI.)
 * ------------------------------------------------------------------ */

/* ==================================================================== *
 * v1.9 "Review workspace" front-end components
 * Light only. Scoped under .fth-app. No full-bleed / 100vw / -50vw /
 * dark large backgrounds. Reuses the existing --fth-* tokens, status
 * pills (.fth-status-pill + --ok/--info/--warn/--danger/--muted),
 * .fth-table (so density classes apply automatically) and the slim
 * card / button language.
 *
 * COMPLIANCE: none of these classes carry a safety / risk / trust verdict.
 * Readiness is a DOCUMENT-COMPLETION progress meter; the readiness note
 * always restates that it reflects work progress only. Open-item "blocking"
 * is a "confirm-before-report" workflow flag (label レポート前に確認), never
 * a danger signal about the entity. Demo data is marked SAMPLE / 架空データ.
 * ==================================================================== */

/* ------------------------------------------------------------------ *
 * Review session stepper (horizontal, wraps on mobile)
 * Small step pills with light tints. .is-active / .is-done never use a
 * dark fill — they read as a tinted chip + coloured border.
 * ------------------------------------------------------------------ */
.fth-app .fth-session-stepper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	list-style: none;
	margin: 0 0 var(--fth-space-4);
	padding: 0;
}

.fth-app .fth-session-stepper__step {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--fth-border-strong);
	border-radius: 999px;
	background: var(--fth-surface);
	color: var(--fth-text-muted);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

/* Small numeric index bubble inside each step pill. */
.fth-app .fth-session-stepper__step::before {
	content: "";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border-strong);
	color: var(--fth-text-muted);
	font-size: 11px;
	font-weight: 800;
	flex: 0 0 auto;
}

/* Active step — light blue tint + blue text/border (NOT a dark fill). */
.fth-app .fth-session-stepper__step.is-active {
	background: var(--fth-c-blue-bg);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-c-blue);
}

.fth-app .fth-session-stepper__step.is-active::before {
	background: var(--fth-surface);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-c-blue);
}

/* Done step — light green tint + green check (NOT a dark fill). */
.fth-app .fth-session-stepper__step.is-done {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

.fth-app .fth-session-stepper__step.is-done::before {
	content: "\2713";
	background: var(--fth-surface);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

/* Step body — the active step's form / fields panel. */
.fth-app .fth-session-step-body {
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	padding: var(--fth-space-4);
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-session-step-body > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-session-step-body__title {
	margin: 0 0 var(--fth-space-3);
	font-size: 15px;
	font-weight: 700;
	color: var(--fth-heading);
}

/* Footer actions row (戻る / 一時保存 / 次へ etc.). */
.fth-app .fth-session-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin: var(--fth-space-4) 0 0;
	padding: var(--fth-space-3) 0 0;
	border-top: 1px solid var(--fth-border);
}

/* Push the primary (next/complete) action to the right. */
.fth-app .fth-session-footer__spacer {
	margin-left: auto;
}

@media (max-width: 640px) {
	.fth-app .fth-session-footer {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.fth-app .fth-session-footer__spacer {
		margin-left: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Review Readiness bar (DOCUMENT-COMPLETION / work-progress meter)
 * A thin horizontal PROGRESS bar — light track + blue fill. Width is set
 * inline by JS. This is intentionally a progress bar, NOT a gauge / dial /
 * score: it shows資料準備の進捗 only, never a safety or trust score.
 * ------------------------------------------------------------------ */
.fth-app .fth-readiness {
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-readiness__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-readiness__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--fth-text);
}

.fth-app .fth-readiness__pct {
	font-size: 13px;
	font-weight: 800;
	color: var(--fth-cta);
	font-variant-numeric: tabular-nums;
}

.fth-app .fth-readiness-bar {
	display: block;
	width: 100%;
	height: 8px;
	border-radius: 999px;
	background: var(--fth-surface-3);
	border: 1px solid var(--fth-border);
	overflow: hidden;
}

.fth-app .fth-readiness-bar__fill {
	display: block;
	height: 100%;
	width: 0;            /* width set inline by JS */
	max-width: 100%;
	background: var(--fth-cta);
	border-radius: inherit;
	transition: width 0.3s ease;
}

/* Mandatory disclaimer note — muted, small. The view always renders the
 * full sentence; this just styles it consistently. */
.fth-app .fth-readiness-note {
	margin: var(--fth-space-2) 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--fth-text-muted);
}

/* ------------------------------------------------------------------ *
 * Source Launchpad — compact rows of regulator targets
 * Each row: regulator name + tier pill + open / copy buttons. Light card,
 * thin borders. Tier pill reuses .fth-tier-pill (access-mode only).
 * ------------------------------------------------------------------ */
.fth-app .fth-launchpad {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-4);
	list-style: none;
	padding: 0;
}

.fth-app .fth-launchpad__target {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2) var(--fth-space-3);
	padding: var(--fth-space-3);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-sm);
}

.fth-app .fth-launchpad__name {
	flex: 1 1 200px;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--fth-heading);
	word-break: break-word;
}

.fth-app .fth-launchpad__sub {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 500;
	color: var(--fth-text-muted);
}

/* Right-aligned cluster: tier pill + actions. */
.fth-app .fth-launchpad__meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin-left: auto;
}

/* Small open / copy buttons (slimmer than .fth-btn--sm baseline). */
.fth-app .fth-launchpad__btn {
	min-height: 30px;
	padding: 3px 10px;
	font-size: 12.5px;
	border-radius: var(--fth-radius-sm);
}

.fth-app .fth-launchpad__btn--copy {
	background: var(--fth-surface);
	border-color: var(--fth-border-strong);
	color: var(--fth-text);
}

.fth-app .fth-launchpad__btn--copy:hover {
	background: var(--fth-surface-2);
}

/* Transient "コピーしました" confirmation on a copy button. */
.fth-app .fth-launchpad__btn.is-copied {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

@media (max-width: 640px) {
	.fth-app .fth-launchpad__meta {
		margin-left: 0;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ *
 * Open Items — severity pills reuse .fth-status-pill
 * --warn  = attention (要対応)
 * --danger = blocking, BUT the visible label is "レポート前に確認"
 *            (confirm-before-report), NEVER a danger/scam verdict.
 * --muted = informational / resolved
 * These only ensure the pills stay small + scoped; colour variants come
 * from the shared .fth-status-pill--* rules above.
 * ------------------------------------------------------------------ */
.fth-app .fth-openitems {
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-openitems__kpis {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-3);
}

/* Keep open-item severity pills compact (height already 22px from the
 * shared pill rule; this guards size if the markup adds inline content). */
.fth-app .fth-openitems .fth-status-pill {
	font-size: 11.5px;
	font-weight: 700;
}

/* Row-level severity accent for the open-items table (left border only;
 * light tint, never a dark fill). Workflow flag, not a verdict. */
.fth-app .fth-openitems__row--warn td:first-child {
	box-shadow: inset 3px 0 0 var(--fth-c-amber);
}

.fth-app .fth-openitems__row--blocking td:first-child {
	box-shadow: inset 3px 0 0 var(--fth-c-red);
}

.fth-app .fth-openitems__row--muted td:first-child {
	box-shadow: inset 3px 0 0 var(--fth-border-strong);
}

/* ------------------------------------------------------------------ *
 * Calendar list (table-ish list of dated events) + feed URL field
 * ------------------------------------------------------------------ */
.fth-app .fth-calendar-list {
	list-style: none;
	margin: 0 0 var(--fth-space-4);
	padding: 0;
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	overflow: hidden;
	background: var(--fth-surface);
}

.fth-app .fth-calendar-list__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2) var(--fth-space-3);
	padding: 10px 12px;
	border-bottom: 1px solid var(--fth-border);
	font-size: 13.5px;
}

.fth-app .fth-calendar-list__item:last-child {
	border-bottom: none;
}

.fth-app .fth-calendar-list__item:hover {
	background: var(--fth-surface-2);
}

/* Fixed-width monospace date column for tidy alignment. */
.fth-app .fth-calendar-list__date {
	flex: 0 0 auto;
	min-width: 96px;
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, Monaco, "Courier New", monospace;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--fth-text-muted);
	font-variant-numeric: tabular-nums;
}

.fth-app .fth-calendar-list__title {
	flex: 1 1 200px;
	min-width: 0;
	color: var(--fth-text);
	word-break: break-word;
}

/* Overdue date emphasis = workflow priority (red text), not a verdict. */
.fth-app .fth-calendar-list__date--over {
	color: var(--fth-c-red);
}

/* Read-only subscribe URL — monospace, small, selectable. */
.fth-app .fth-feed-url {
	display: block;
	width: 100%;
	min-height: 36px;
	padding: 6px 10px;
	border: 1px solid var(--fth-border-strong);
	border-radius: var(--fth-radius-sm);
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, Monaco, "Courier New", monospace;
	font-size: 12.5px;
	line-height: 1.5;
	word-break: break-all;
}

.fth-app .fth-feed-url:focus {
	border-color: var(--fth-cta);
	outline: none;
	box-shadow: 0 0 0 2px var(--fth-focus-ring);
}

/* ------------------------------------------------------------------ *
 * Digest — slim typographic recap block (latest digest HTML)
 * ------------------------------------------------------------------ */
.fth-app .fth-digest {
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	padding: var(--fth-space-4);
	margin: 0 0 var(--fth-space-4);
	font-size: 14px;
	line-height: 1.7;
	color: var(--fth-text);
}

.fth-app .fth-digest > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-digest h3,
.fth-app .fth-digest h4 {
	margin: var(--fth-space-4) 0 var(--fth-space-2);
	font-size: 15px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-digest h3:first-child,
.fth-app .fth-digest h4:first-child {
	margin-top: 0;
}

.fth-app .fth-digest ul,
.fth-app .fth-digest ol {
	margin: 0 0 var(--fth-space-3);
	padding-left: var(--fth-space-5);
}

.fth-app .fth-digest li {
	margin: 0 0 var(--fth-space-1);
}

.fth-app .fth-digest__meta {
	margin: 0 0 var(--fth-space-3);
	font-size: 12px;
	color: var(--fth-text-muted);
}

/* ------------------------------------------------------------------ *
 * Demo / SAMPLE markers — "SAMPLE / 架空データ"
 * A small amber pill on screen, plus a light print watermark. Demo data
 * is never treated as real evidence. The watermark uses a faint diagonal
 * repeating gradient — NOT a dark large background.
 * ------------------------------------------------------------------ */
.fth-app .fth-demo-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--fth-c-amber-bd);
	background: var(--fth-c-amber-bg);
	color: var(--fth-c-amber);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.4;
	white-space: nowrap;
	vertical-align: middle;
}

.fth-app .fth-demo-badge::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

/* Light diagonal "SAMPLE" watermark for demo panels / print. Uses a very
 * faint repeating amber stripe; the surface stays light. Apply on a
 * positioned container that holds demo content. */
.fth-app .fth-watermark {
	position: relative;
}

.fth-app .fth-watermark::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(180, 83, 9, 0.06) 0,
		rgba(180, 83, 9, 0.06) 2px,
		transparent 2px,
		transparent 16px
	);
	border-radius: inherit;
}

@media print {
	.fth-app .fth-watermark::after {
		background-image: repeating-linear-gradient(
			-45deg,
			rgba(180, 83, 9, 0.10) 0,
			rgba(180, 83, 9, 0.10) 2px,
			transparent 2px,
			transparent 18px
		);
	}
}

/* ------------------------------------------------------------------ *
 * Client-safe summary preview — white A4-ish, light, scrollable panel.
 * Shown inside the existing .fth-modal shell (or inline). Light only.
 * ------------------------------------------------------------------ */
.fth-app .fth-cs-preview {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--fth-surface);
	color: var(--fth-text);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	box-shadow: var(--fth-shadow-sm);
	padding: var(--fth-space-5);
	font-size: 14px;
	line-height: 1.7;
}

.fth-app .fth-cs-preview > *:last-child {
	margin-bottom: 0;
}

.fth-app .fth-cs-preview h1,
.fth-app .fth-cs-preview h2,
.fth-app .fth-cs-preview h3 {
	color: var(--fth-heading);
}

.fth-app .fth-cs-preview h2 {
	font-size: 18px;
	margin: 0 0 var(--fth-space-3);
}

.fth-app .fth-cs-preview h3 {
	font-size: 15px;
	margin: var(--fth-space-4) 0 var(--fth-space-2);
}

/* Output hash / metadata footer line in the preview. */
.fth-app .fth-cs-preview__hash {
	margin: var(--fth-space-4) 0 0;
	padding: var(--fth-space-2) var(--fth-space-3);
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-sm);
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, Monaco, "Courier New", monospace;
	font-size: 11.5px;
	color: var(--fth-text-muted);
	word-break: break-all;
}

/* Redaction options list inside the client-safe builder. */
.fth-app .fth-cs-redactions {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-4);
	padding: 0;
	list-style: none;
}

.fth-app .fth-cs-redactions__item {
	display: flex;
	align-items: flex-start;
	gap: var(--fth-space-2);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fth-text);
}

.fth-app .fth-cs-redactions__item input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--fth-cta);
	cursor: pointer;
}

/* ------------------------------------------------------------------ *
 * Review packets — compact list of preset packets (preview/CTA on free).
 * Reuses card language; light only.
 * ------------------------------------------------------------------ */
.fth-app .fth-packets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--fth-space-3);
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-packet {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
	padding: var(--fth-space-4);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
}

.fth-app .fth-packet__name {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-packet__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--fth-text-muted);
}

.fth-app .fth-packet__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin-top: auto;
	padding-top: var(--fth-space-2);
}

/* Locked (plan-gated / preview-only) packet — slightly dimmed, light. */
.fth-app .fth-packet--locked {
	background: var(--fth-surface-2);
	border-style: dashed;
}

.fth-app .fth-packet--locked .fth-packet__name {
	color: var(--fth-text-muted);
}

/* ------------------------------------------------------------------ *
 * Operational-gate retry notice (shown on a 428 gate_required response)
 * Light amber notice telling the user to complete the pre-action
 * confirmation, then retry. Workflow gate, not a verdict.
 * ------------------------------------------------------------------ */
.fth-app .fth-opgate-notice {
	margin: var(--fth-space-3) 0 0;
	padding: var(--fth-space-3) var(--fth-space-4);
	background: var(--fth-c-amber-bg);
	border: 1px solid var(--fth-c-amber-bd);
	border-left-width: 4px;
	border-radius: var(--fth-radius-sm);
	font-size: 13px;
	line-height: 1.6;
	color: var(--fth-c-amber);
}

/* ------------------------------------------------------------------ *
 * v1.9 Review Session — layout wrappers for the classes the component
 * + review-session.js actually emit (.fth-review-session__*). The
 * step skeleton (.fth-stepper / .fth-progress / .fth-status-pill /
 * .fth-table / .fth-checklist / .fth-modal) is already styled
 * above; these add only the slim flex/grid spacing. Light only.
 * ------------------------------------------------------------------ */
.fth-app .fth-review-session__launcher {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--fth-space-3);
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-review-session__header-row,
.fth-app .fth-review-session__readiness-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2) var(--fth-space-3);
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-review-session__readiness-pct {
	font-weight: 700;
	color: var(--fth-text);
}

.fth-app .fth-review-session__readiness-note,
.fth-app .fth-review-session__reg-name {
	font-size: 12.5px;
	color: var(--fth-text-muted);
	line-height: 1.55;
}

.fth-app .fth-review-session__step-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--fth-heading);
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-review-session__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--fth-space-2);
	margin-top: var(--fth-space-4);
	padding-top: var(--fth-space-3);
	border-top: 1px solid var(--fth-border);
}

.fth-app .fth-review-session__footer-left,
.fth-app .fth-review-session__footer-right,
.fth-app .fth-review-session__target-actions,
.fth-app .fth-review-session__inline-actions,
.fth-app .fth-review-session__copybar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
}

.fth-app .fth-review-session__outputs,
.fth-app .fth-review-session__form,
.fth-app .fth-calendar__feed,
.fth-app .fth-openitems__form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--fth-space-3);
	margin: var(--fth-space-2) 0 var(--fth-space-4);
}

.fth-app .fth-review-session__launchpad,
.fth-app .fth-review-session__openitems,
.fth-app .fth-review-session__targets,
.fth-app .fth-review-session__approval,
.fth-app .fth-calendar__week {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-3);
}

.fth-app .fth-review-session__summary-html {
	max-height: 60vh;
	overflow: auto;
	padding: var(--fth-space-4);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-sm);
}

/* ================================================================== *
 * v2.1 Template Hub
 * ------------------------------------------------------------------ *
 * Front (.fth-app) styles for the template marketplace, cards,
 * detail panel, variable form, output area, QA panel, builder,
 * version diff, packs, output-history, custom-request form and the
 * update-notice banner. Slim Professional style: flat light surfaces,
 * existing tokens only, small accent badges (no large fills).
 * APPEND-ONLY block — do not edit rules above this line.
 * ================================================================== */

/* --- Marketplace shell + intro ------------------------------------ */
.fth-app .fth-tpl-marketplace {
	margin: 0 0 var(--fth-space-5);
}

.fth-app .fth-tpl-marketplace__intro {
	margin: 0 0 var(--fth-space-4);
}

/* --- Toolbar: search + facet selects + sort + view toggle --------- */
.fth-app .fth-tpl-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--fth-space-3);
	padding: var(--fth-space-3) var(--fth-space-4);
	margin: 0 0 var(--fth-space-4);
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
}

.fth-app .fth-tpl-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--fth-space-3);
	width: 100%;
}

/* Reset the field bottom-margin inside the compact toolbar. */
.fth-app .fth-tpl-toolbar .fth-field {
	margin: 0;
}

.fth-app .fth-tpl-search {
	flex: 1 1 240px;
	min-width: 200px;
}

.fth-app .fth-tpl-facet {
	flex: 1 1 150px;
	min-width: 130px;
}

.fth-app .fth-tpl-sort {
	flex: 0 1 180px;
	min-width: 150px;
}

/* Toolbar labels: tiny, muted, uppercase to keep rows shallow. */
.fth-app .fth-tpl-toolbar .fth-field > .fth-label {
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--fth-text-muted);
}

/* Slim toolbar controls (shorter than the 40px form default). */
.fth-app .fth-tpl-toolbar .fth-input,
.fth-app .fth-tpl-toolbar .fth-select {
	min-height: 36px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.fth-app .fth-tpl-toolbar .fth-view-toggle {
	margin-left: auto;
}

/* Result count line. */
.fth-app .fth-tpl-count {
	margin: 0 0 var(--fth-space-3);
}

/* --- Card grid + cards ------------------------------------------- */
.fth-app .fth-tpl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--fth-space-3);
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-tpl-card {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
	padding: var(--fth-space-4);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	box-shadow: var(--fth-shadow-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fth-app .fth-tpl-card:hover {
	border-color: var(--fth-border-strong);
	box-shadow: var(--fth-shadow-md);
}

.fth-app .fth-tpl-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
}

.fth-app .fth-tpl-card__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--fth-heading);
}

.fth-app .fth-tpl-card__subtitle {
	margin: 0;
	font-size: 13px;
	color: var(--fth-text-muted);
}

.fth-app .fth-tpl-card__desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fth-text);
}

.fth-app .fth-tpl-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
	margin-top: auto;
}

.fth-app .fth-tpl-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin-top: var(--fth-space-2);
	padding-top: var(--fth-space-2);
	border-top: 1px solid var(--fth-border);
}

/* "Owned" card variant — subtle blue accent border, no fill. */
.fth-app .fth-tpl-card--owned {
	border-left: 3px solid var(--fth-cta);
}

.fth-app .fth-tpl-more-wrap {
	margin: var(--fth-space-3) 0 0;
	text-align: center;
}
.fth-app .fth-tpl-more {
	min-width: 220px;
}

/* --- Value chips (small soft pills, used on cards/packs) ---------- */
.fth-app .fth-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border: 1px solid var(--fth-border-strong);
	border-radius: 999px;
	background: var(--fth-surface-2);
	color: var(--fth-text-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.fth-app .fth-chip--accent {
	background: var(--fth-cta-soft);
	border-color: var(--fth-c-blue-bd);
	color: var(--fth-cta);
}

/* --- Detail tags (category / audience / plan pills) -------------- */
.fth-app .fth-tpl-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 9px;
	border: 1px solid var(--fth-border-strong);
	border-radius: 999px;
	background: var(--fth-surface-2);
	color: var(--fth-text-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.fth-app .fth-tpl-tag--plan {
	background: var(--fth-accent-soft);
	border-color: var(--fth-accent-bd);
	color: #7c5e16;
}

/* --- Table view variant ------------------------------------------ */
.fth-app .fth-tpl-table {
	width: 100%;
}

.fth-app .fth-table--slim th,
.fth-app .fth-table--slim td {
	padding: 6px 10px;
	font-size: 13.5px;
}

.fth-app .fth-tpl-table .fth-tpl-card__title {
	font-size: 14px;
}

.fth-app .fth-row-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
	justify-content: flex-end;
}

/* --- Detail panel / modal ---------------------------------------- */
.fth-app .fth-tpl-detail .fth-modal__panel,
.fth-app .fth-modal--tpl-detail .fth-modal__panel {
	max-width: 720px;
}

.fth-app .fth-tpl-detail__title {
	margin: 0;
	font-size: 19px;
	line-height: 1.3;
	color: var(--fth-heading);
}

.fth-app .fth-tpl-detail__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
	margin: var(--fth-space-2) 0 var(--fth-space-3);
}

.fth-app .fth-tpl-detail__section {
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-tpl-detail__section-title {
	margin: 0 0 var(--fth-space-2);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fth-text-muted);
}

.fth-app .fth-tpl-detail__desc {
	margin: 0 0 var(--fth-space-3);
	font-size: 14px;
	line-height: 1.6;
	color: var(--fth-text);
}

.fth-app .fth-tpl-list {
	margin: 0 0 var(--fth-space-3);
	padding-left: 1.25em;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--fth-text);
}

.fth-app .fth-tpl-list--vars,
.fth-app .fth-tpl-list--related {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-1);
}

.fth-app .fth-tpl-list--vars > li,
.fth-app .fth-tpl-list--related > li {
	padding: 6px 10px;
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-sm);
}

/* --- Variable input form ----------------------------------------- */
.fth-app .fth-tpl-varform {
	margin: 0 0 var(--fth-space-4);
	padding: var(--fth-space-4);
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
}

.fth-app .fth-tpl-varform__title {
	margin: 0 0 var(--fth-space-3);
	font-size: 14px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-tpl-varform .fth-field {
	margin-bottom: var(--fth-space-3);
}

/* Inline field rows: wrap fields side-by-side on wider viewports. */
.fth-app .fth-field--inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-3);
}

.fth-app .fth-field--inline > .fth-field {
	flex: 1 1 160px;
	min-width: 140px;
	margin-bottom: 0;
}

.fth-app .fth-tpl-varform__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-2);
	margin-top: var(--fth-space-3);
}

/* --- Output area + copy/download/print buttons ------------------- */
.fth-app .fth-tpl-output {
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-tpl-output__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-tpl-output__title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fth-text-muted);
}

.fth-app .fth-tpl-output__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
	margin-left: auto;
}

.fth-app .fth-tpl-output__body {
	max-height: 50vh;
	overflow: auto;
	padding: var(--fth-space-4);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border-strong);
	border-radius: var(--fth-radius-sm);
	color: var(--fth-text);
	font-size: 14px;
	line-height: 1.65;
	white-space: pre-wrap;
	word-break: break-word;
}

.fth-app .fth-tpl-output__body:empty {
	display: none;
}

/* --- QA panel with status pills (small badges, no large fills) ---- */
.fth-app .fth-qa-panel {
	margin: 0 0 var(--fth-space-4);
	padding: var(--fth-space-3) var(--fth-space-4);
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
}

.fth-app .fth-qa-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-qa-panel__title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fth-text-muted);
}

/* Status pill base — small, pill-shaped, soft tint + matching border. */
.fth-app .fth-qa-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border: 1px solid var(--fth-border-strong);
	border-radius: 999px;
	background: var(--fth-surface-2);
	color: var(--fth-text);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	white-space: nowrap;
}

/* ok = green */
.fth-app .fth-qa-pill--ok {
	background: var(--fth-c-green-bg);
	border-color: var(--fth-c-green-bd);
	color: var(--fth-c-green);
}

/* review = amber */
.fth-app .fth-qa-pill--review {
	background: var(--fth-c-amber-bg);
	border-color: var(--fth-c-amber-bd);
	color: var(--fth-c-amber);
}

/* confirm = orange (distinct amber/brown text vs. review) */
.fth-app .fth-qa-pill--confirm {
	background: var(--fth-c-amber-bg);
	border-color: #f59e0b;
	color: #b45309;
}

/* block = red */
.fth-app .fth-qa-pill--block {
	background: var(--fth-c-red-bg);
	border-color: var(--fth-c-red-bd);
	color: var(--fth-c-red);
}

/* QA item list. */
.fth-app .fth-qa-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-1);
}

.fth-app .fth-qa-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--fth-space-2);
	padding: 6px 10px;
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-left-width: 3px;
	border-left-color: var(--fth-border-strong);
	border-radius: var(--fth-radius-sm);
	font-size: 13px;
	line-height: 1.5;
}

.fth-app .fth-qa-item--ok {
	border-left-color: var(--fth-c-green);
}

.fth-app .fth-qa-item__level {
	flex: 0 0 auto;
	padding: 1px 7px;
	border: 1px solid var(--fth-border-strong);
	border-radius: 999px;
	background: var(--fth-surface-2);
	color: var(--fth-text-muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.fth-app .fth-qa-item__msg {
	flex: 1 1 auto;
	color: var(--fth-text);
}

.fth-app .fth-qa-item__where {
	flex: 0 0 auto;
}

/* --- Builder block list ------------------------------------------ */
.fth-app .fth-tpl-block-list {
	list-style: none;
	margin: 0 0 var(--fth-space-3);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
}

.fth-app .fth-tpl-block {
	padding: var(--fth-space-3);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
}

.fth-app .fth-tpl-block__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin: 0 0 var(--fth-space-2);
}

.fth-app .fth-tpl-block__handle {
	flex: 0 0 auto;
	color: var(--fth-text-faint);
	cursor: grab;
	user-select: none;
}

.fth-app .fth-tpl-block__title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-tpl-block__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
	margin-left: auto;
}

.fth-app .fth-tpl-block__body {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
}

.fth-app .fth-tpl-block .fth-field {
	margin-bottom: 0;
}

/* --- Version diff ------------------------------------------------- */
.fth-app .fth-tpl-version-list {
	list-style: none;
	margin: 0 0 var(--fth-space-3);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-1);
}

.fth-app .fth-tpl-version {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	padding: 6px 10px;
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-sm);
	font-size: 13px;
}

.fth-app .fth-tpl-version__label {
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-tpl-version__actions {
	margin-left: auto;
}

.fth-app .fth-tpl-diff-view {
	margin: 0 0 var(--fth-space-3);
}

.fth-app .fth-tpl-diff-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	line-height: 1.55;
}

.fth-app .fth-tpl-diff-item {
	display: flex;
	align-items: baseline;
	gap: var(--fth-space-2);
	padding: 4px 10px;
	border: 1px solid var(--fth-border);
	border-left-width: 3px;
	border-left-color: var(--fth-border-strong);
	border-radius: var(--fth-radius-sm);
	background: var(--fth-surface);
}

.fth-app .fth-tpl-diff-item.is-add {
	background: var(--fth-c-green-bg);
	border-left-color: var(--fth-c-green);
}

.fth-app .fth-tpl-diff-item.is-remove {
	background: var(--fth-c-red-bg);
	border-left-color: var(--fth-c-red);
}

.fth-app .fth-tpl-diff-item.is-change {
	background: var(--fth-c-amber-bg);
	border-left-color: var(--fth-c-amber);
}

.fth-app .fth-tpl-diff-item__sign {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--fth-text-muted);
}

.fth-app .fth-tpl-diff-item.is-add .fth-tpl-diff-item__sign {
	color: var(--fth-c-green);
}

.fth-app .fth-tpl-diff-item.is-remove .fth-tpl-diff-item__sign {
	color: var(--fth-c-red);
}

.fth-app .fth-tpl-diff-item.is-change .fth-tpl-diff-item__sign {
	color: var(--fth-c-amber);
}

.fth-app .fth-tpl-diff-item__where {
	flex: 0 0 auto;
}

.fth-app .fth-tpl-diff-item__text {
	flex: 1 1 auto;
	color: var(--fth-text);
}

/* --- Packs cards -------------------------------------------------- */
.fth-app .fth-tpl-pack-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--fth-space-3);
	margin: 0 0 var(--fth-space-4);
}

.fth-app .fth-tpl-pack-card {
	display: flex;
	flex-direction: column;
	gap: var(--fth-space-2);
	padding: var(--fth-space-4);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
	box-shadow: var(--fth-shadow-sm);
}

.fth-app .fth-tpl-pack-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
}

.fth-app .fth-tpl-pack-card__title {
	margin: 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-tpl-pack-card__subtitle {
	margin: 0;
	font-size: 13px;
	color: var(--fth-text-muted);
}

.fth-app .fth-tpl-pack-card__desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--fth-text);
}

.fth-app .fth-tpl-pack-card__items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
}

.fth-app .fth-tpl-pack-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
	margin-top: auto;
}

.fth-app .fth-tpl-pack-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-2);
	margin-top: var(--fth-space-2);
	padding-top: var(--fth-space-2);
	border-top: 1px solid var(--fth-border);
}

/* Locked pack — small amber accent rail, no large fill. */
.fth-app .fth-tpl-pack-card--locked {
	border-left: 3px solid var(--fth-c-amber-bd);
}

/* --- Output-history table ---------------------------------------- */
.fth-app .fth-tpl-history {
	margin: 0 0 var(--fth-space-5);
}

.fth-app .fth-tpl-history__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--fth-space-3);
	margin: 0 0 var(--fth-space-3);
}

.fth-app .fth-tpl-history__filters .fth-field {
	margin: 0;
	flex: 1 1 160px;
	min-width: 140px;
}

.fth-app .fth-tpl-history__table {
	width: 100%;
}

.fth-app .fth-tpl-history__table td {
	vertical-align: top;
}

.fth-app .fth-tpl-history__title {
	font-weight: 700;
	color: var(--fth-heading);
}

.fth-app .fth-tpl-history__when {
	white-space: nowrap;
	color: var(--fth-text-muted);
}

.fth-app .fth-tpl-history__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-1);
	justify-content: flex-end;
}

/* --- Custom-request form ----------------------------------------- */
.fth-app .fth-tpl-custom-request {
	margin: 0 0 var(--fth-space-5);
}

.fth-app .fth-tpl-custom-form {
	max-width: 720px;
	padding: var(--fth-space-5);
	background: var(--fth-surface);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius);
}

.fth-app .fth-tpl-custom-form__section {
	margin: 0 0 var(--fth-space-5);
	padding: 0 0 var(--fth-space-4);
	border-bottom: 1px solid var(--fth-border);
}

.fth-app .fth-tpl-custom-form__section:last-of-type {
	border-bottom: 0;
	padding-bottom: 0;
}

.fth-app .fth-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.fth-app .fth-fieldset > legend {
	margin: 0 0 var(--fth-space-2);
	padding: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--fth-text);
}

.fth-app .fth-checkbox-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--fth-space-2);
}

.fth-app .fth-checkbox {
	display: flex;
	align-items: center;
	gap: var(--fth-space-2);
	padding: 6px 10px;
	background: var(--fth-surface-2);
	border: 1px solid var(--fth-border);
	border-radius: var(--fth-radius-sm);
	font-size: 13.5px;
	line-height: 1.4;
	cursor: pointer;
}

.fth-app .fth-checkbox > input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
}

.fth-app .fth-turnstile {
	margin: var(--fth-space-2) 0;
}

.fth-app .fth-tpl-custom-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-3);
	margin-top: var(--fth-space-4);
}

/* --- Update-notice banner (slim, light info accent) -------------- */
.fth-app .fth-tpl-update-notice {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fth-space-3);
	padding: var(--fth-space-3) var(--fth-space-4);
	margin: 0 0 var(--fth-space-4);
	background: var(--fth-c-blue-bg);
	border: 1px solid var(--fth-c-blue-bd);
	border-left-width: 4px;
	border-left-color: var(--fth-c-blue);
	border-radius: var(--fth-radius);
	color: var(--fth-c-blue);
	font-size: 13.5px;
	line-height: 1.5;
}

.fth-app .fth-tpl-update-notice__body {
	flex: 1 1 220px;
}

.fth-app .fth-tpl-update-notice__title {
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 700;
}

.fth-app .fth-tpl-update-notice__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fth-space-2);
	margin-left: auto;
}

/* --- Responsive: stack toolbar / inline rows on narrow viewports -- */
@media (max-width: 640px) {
	.fth-app .fth-tpl-toolbar__row {
		flex-direction: column;
		align-items: stretch;
	}

	.fth-app .fth-tpl-search,
	.fth-app .fth-tpl-facet,
	.fth-app .fth-tpl-sort {
		flex-basis: auto;
		min-width: 0;
	}

	.fth-app .fth-tpl-toolbar .fth-view-toggle {
		margin-left: 0;
	}

	.fth-app .fth-field--inline {
		flex-direction: column;
		gap: var(--fth-space-3);
	}

	.fth-app .fth-tpl-output__actions,
	.fth-app .fth-tpl-update-notice__actions {
		margin-left: 0;
		width: 100%;
	}
}
/* === end v2.1 Template Hub ======================================== */

/* === v2.2 Multilingual output (RTL-aware, theme-safe) ============= *
 * Light surfaces only. NO full-bleed, NO 100vw, NO -50vw, NO large
 * dark backgrounds. Web fonts are NOT bundled — system stacks only.
 * ------------------------------------------------------------------ */

.fth-app .fth-ml-doc {
	color: #0f172a;
}

/* Script-aware system font stacks (no font files shipped). */
.fth-app .fth-ml-lang[lang|="ar"],
.fth-app .fth-ml-lang[lang|="ur"] {
	font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}
.fth-app .fth-ml-lang[lang|="zh"] {
	font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.fth-app .fth-ml-lang[lang|="hi"],
.fth-app .fth-ml-lang[lang|="bn"] {
	font-family: "Noto Sans Devanagari", "Noto Sans Bengali", "Nirmala UI", sans-serif;
}

/* RTL: right-align within OUR scope only. */
.fth-app [dir="rtl"],
.fth-app .fth-ml-lang[dir="rtl"] {
	text-align: right;
}
.fth-app [dir="rtl"] .fth-ml-block,
.fth-app .fth-ml-lang[dir="rtl"] .fth-ml-block {
	text-align: right;
}

/* Isolate bidi so RTL/LTR mixing (numbers, URLs, English names) stays correct. */
.fth-app .fth-ml-lang,
.fth-app .fth-ml-doc bdi,
.fth-app .fth-ml-disclaimer p {
	unicode-bidi: isolate;
}

/* Side-by-side (max 2 languages): contained columns, NEVER viewport width. */
.fth-app .fth-ml-sbs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.fth-app .fth-ml-col {
	flex: 1 1 320px;
	min-width: 280px;
	max-width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 12px 14px;
	background: #ffffff;
}

/* Multilingual table. */
.fth-app .fth-ml-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.fth-app .fth-ml-table th,
.fth-app .fth-ml-table td {
	border: 1px solid #d8e0ea;
	padding: 6px 9px;
	text-align: start;
	vertical-align: top;
}
.fth-app .fth-ml-table th {
	background: #f7f9fc;
}

/* Language + translation-status badges (light only). */
.fth-app .fth-lang-badge,
.fth-app .fth-tstatus-badge {
	display: inline-block;
	font-size: 11px;
	line-height: 1.4;
	padding: 1px 8px;
	border-radius: 10px;
	border: 1px solid #cbd5e1;
	background: #f7f9fc;
	color: #0b1f3a;
	margin: 0 4px 4px 0;
}
.fth-app .fth-tstatus-badge--review { border-color: #f59e0b; color: #92400e; background: #fff7ed; }
.fth-app .fth-tstatus-badge--draft  { border-color: #cbd5e1; color: #475569; }
.fth-app .fth-tstatus-badge--ok     { border-color: #34d399; color: #047857; background: #ecfdf5; }
.fth-app .fth-ml-fallback {
	font-size: 10px;
	color: #b45309;
}
.fth-app .fth-ml-rtl-warning {
	border: 1px dashed #f59e0b;
	background: #fff7ed;
	color: #92400e;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 12px;
}
/* === end v2.2 Multilingual ======================================== */

/* =====================================================================
 * v2.4.7 Beginner-friendly DETAIL visualization + plan badges.
 * White cards, a numbered step flow, chips — calm, no heavy decoration.
 * ===================================================================== */

/* Plan / status badge variants (previously fell back to the base badge). */
.fth-app .fth-badge--ok     { border-color: #34d399; color: #047857; background: #ecfdf5; }
.fth-app .fth-badge--lock   { border-color: #cbd5e1; color: #475569; background: #f8fafc; }
.fth-app .fth-badge--muted  { border-color: #e2e8f0; color: #64748b; background: #f8fafc; }
.fth-app .fth-badge--paid   { border-color: #c7b8e6; color: #6d28d9; background: #f5f3ff; }
.fth-app .fth-badge--req    { border-color: #fca5a5; color: #b91c1c; background: #fef2f2; }

/* Section heading with a small leading icon. */
.fth-app .fth-viz__h {
	display: flex;
	align-items: center;
	gap: 8px;
}
.fth-app .fth-viz__icon {
	font-size: 16px;
	line-height: 1;
}

/* "What is this template" lead paragraph. */
.fth-app .fth-viz-what__text {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--fth-text);
}

/* When-to-use chips. */
.fth-app .fth-viz-chips {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.fth-app .fth-viz-chip {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--fth-border);
	border-radius: 999px;
	background: #fff;
	font-size: 12px;
	color: var(--fth-text);
}
.fth-app .fth-viz-chip--tag {
	color: var(--fth-text-muted);
	background: var(--fth-surface-2);
}

/* What-you-can-do numbered cards. */
.fth-app .fth-viz-cards {
	list-style: none;
	counter-reset: fthviz;
	margin: 8px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.fth-app .fth-viz-card {
	position: relative;
	counter-increment: fthviz;
	border: 1px solid var(--fth-border);
	border-radius: 10px;
	background: #fff;
	padding: 10px 12px 10px 38px;
	font-size: 13px;
	line-height: 1.6;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.fth-app .fth-viz-card::before {
	content: counter(fthviz);
	position: absolute;
	left: 10px;
	top: 10px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fth-cta-soft);
	color: var(--fth-cta);
	font-weight: 700;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* How-to step flow (Step 1-4). */
.fth-app .fth-viz-steps {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.fth-app .fth-viz-step {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 0 0 14px 0;
}
.fth-app .fth-viz-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 13px;
	top: 28px;
	bottom: 0;
	width: 2px;
	background: var(--fth-border);
}
.fth-app .fth-viz-step__num {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--fth-cta);
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.fth-app .fth-viz-step__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 2px;
}
.fth-app .fth-viz-step__title {
	font-weight: 600;
	font-size: 14px;
	color: var(--fth-heading);
}
.fth-app .fth-viz-step__desc {
	font-size: 12px;
	color: var(--fth-text-muted);
	line-height: 1.6;
}

/* Input items (required / optional + hint). */
.fth-app .fth-viz-inputs__list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fth-app .fth-viz-input {
	border: 1px solid var(--fth-border);
	border-radius: 8px;
	background: #fff;
	padding: 8px 10px;
}
.fth-app .fth-viz-input__head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.fth-app .fth-viz-input__label {
	font-weight: 600;
	font-size: 13px;
}
.fth-app .fth-viz-input__hint {
	margin: 4px 0 0;
	font-size: 12px;
	color: var(--fth-text-muted);
}

/* Output preview skeleton. */
.fth-app .fth-viz-sample__body {
	margin: 8px 0 0;
	border: 1px dashed var(--fth-border-strong);
	border-radius: 8px;
	background: var(--fth-surface-2);
	padding: 12px;
	font-size: 12px;
	line-height: 1.7;
	white-space: pre-wrap;
	color: var(--fth-text);
	max-height: 240px;
	overflow: auto;
}

/* Cautions. */
.fth-app .fth-viz-caution__list {
	list-style: disc;
	margin: 8px 0 0;
	padding-left: 18px;
}
.fth-app .fth-viz-caution__item {
	font-size: 12px;
	color: var(--fth-text-muted);
	line-height: 1.6;
	margin-bottom: 4px;
}

/* Related templates. */
.fth-app .fth-viz-related__list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* CTA row. */
.fth-app .fth-viz-cta__row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

@media ( max-width: 640px ) {
	.fth-app .fth-viz-cards { grid-template-columns: 1fr; }
}
/* === end v2.4.7 beginner visualization ============================ */

/* =====================================================================
 * v2.4.10 — Use-modal cleanup: top-right 閉じる button, title lead,
 * larger mode buttons, integrated language chips. White-based, calm.
 * ===================================================================== */

/* Header: title block + top-right close button. */
.fth-app .fth-tpl-detail__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.fth-app .fth-tpl-detail__lead {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--fth-text-muted);
}
.fth-app .fth-tpl-detail__close {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Mode buttons (詳細を見る / このテンプレートを使う) — larger, clearer. */
.fth-app .fth-tpl-detail__modebar {
	display: flex;
	gap: 8px;
	margin: 4px 0 14px;
	flex-wrap: wrap;
}
.fth-app .fth-tpl-detail__modebtn {
	font-size: 14px;
	padding: 9px 18px;
	border-radius: 8px;
}
.fth-app .fth-tpl-detail__modebtn--detail {
	border: 1px solid var(--fth-border-strong);
	background: #fff;
	color: var(--fth-heading);
	font-weight: 600;
}
.fth-app .fth-tpl-detail__modebtn--detail.is-active {
	background: var(--fth-surface-2);
	border-color: var(--fth-cta);
	color: var(--fth-cta);
}

/* Integrated language control: compact 12-language chips (paid, on "custom"). */
.fth-app .fth-tpl-langchips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
}
.fth-app .fth-tpl-langchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--fth-border);
	border-radius: 999px;
	background: #fff;
	padding: 4px 10px;
	font-size: 12px;
	color: var(--fth-text);
	cursor: pointer;
}
.fth-app .fth-tpl-langchip input {
	margin: 0;
}
.fth-app .fth-tpl-langrtl {
	margin: 6px 0 0;
	color: #92400e;
}
/* === end v2.4.10 use-modal cleanup ================================ */


/* ============================================================
   v2.4.32 Paid Dashboard Grand Menu (left-nav app shell)
   Light surfaces only. No full-bleed / 100vw / -50vw / dark fill.
   ============================================================ */
.fth-dashboard-shell{--fthd-sidebar-w:224px;color:var(--fth-text);font:14px/1.6 -apple-system,Segoe UI,Roboto,sans-serif;max-width:1120px;box-sizing:border-box}
.fth-dashboard-shell *{box-sizing:border-box}
.fth-dashboard-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;border:1px solid var(--fth-border);background:var(--fth-surface);border-radius:12px;padding:12px 16px;margin:0 0 12px;box-shadow:0 1px 2px rgba(15,23,42,.04);max-width:100%}
.fth-dashboard-topbar__id{min-width:200px}
.fth-dashboard-topbar__title{margin:0;font-size:18px;font-weight:700;color:var(--fth-heading)}
.fth-dashboard-topbar__sub{margin:2px 0 0;font-size:12px;color:var(--fth-text-muted)}
.fth-dashboard-topbar__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fth-dashboard-chip{display:inline-block;font-size:11px;padding:2px 9px;border-radius:10px;border:1px solid var(--fth-border-strong);background:var(--fth-surface-2);color:var(--fth-heading)}
.fth-dashboard-topbar__actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.fth-dashboard-layout{display:flex;align-items:flex-start;gap:14px}
.fth-dashboard-sidebar{flex:0 0 var(--fthd-sidebar-w);width:var(--fthd-sidebar-w);position:sticky;top:16px;align-self:flex-start}
.fth-dashboard-menu-select{display:none;width:100%;box-sizing:border-box;border:1px solid var(--fth-border-strong);border-radius:8px;padding:9px 10px;font-size:14px;background:var(--fth-surface);color:var(--fth-text)}
.fth-dashboard-menu{list-style:none;margin:0;padding:6px 0;border:1px solid var(--fth-border);background:var(--fth-surface);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.fth-dashboard-menu__group{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--fth-text-faint);padding:10px 14px 4px;margin:0}
.fth-dashboard-menu__item{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;text-align:left;border:0;border-left:3px solid transparent;background:transparent;color:var(--fth-text);font:inherit;font-size:13.5px;line-height:1.4;padding:9px 14px;cursor:pointer}
.fth-dashboard-menu__item:hover{background:var(--fth-surface-2)}
.fth-dashboard-menu__item:focus-visible{outline:2px solid var(--fth-focus);outline-offset:-2px}
.fth-dashboard-menu__item[aria-selected="true"]{background:var(--fth-cta-soft);border-left-color:var(--fth-cta);color:var(--fth-cta-active);font-weight:600}
.fth-dashboard-menu__item[data-locked="1"]{color:var(--fth-text-muted)}
.fth-dashboard-menu__label{flex:1 1 auto;min-width:0}
.fth-dashboard-menu__badge{font-size:10px;padding:1px 6px;border-radius:8px;background:var(--fth-surface-3);color:var(--fth-text-muted);white-space:nowrap}
.fth-dashboard-menu__lock{font-size:11px;color:var(--fth-text-faint)}
.fth-dashboard-content{flex:1 1 auto;min-width:0;max-width:100%}
.fth-dashboard-panel{border:1px solid var(--fth-border);background:var(--fth-surface);border-radius:12px;padding:16px 18px;box-shadow:0 1px 2px rgba(15,23,42,.04);max-width:100%;overflow-x:auto}
.fth-dashboard-panel:focus{outline:none}
.fth-dashboard-panel[hidden]{display:none}
.fth-dashboard-panel__title{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--fth-heading)}
.fth-dashboard-panel__lead{margin:0 0 12px;font-size:12.5px;color:var(--fth-text-muted);line-height:1.7}
.fth-dashboard-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.fth-dashboard-kpis{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.fth-dashboard-kpi{flex:1 1 140px;min-width:130px;border:1px solid var(--fth-border);background:var(--fth-surface-2);border-radius:10px;padding:12px 14px}
.fth-dashboard-kpi__k{font-size:12px;color:var(--fth-text-muted)}
.fth-dashboard-kpi__v{font-size:22px;font-weight:700;color:var(--fth-heading)}
.fth-dashboard-action{display:block;border:1px solid var(--fth-border);background:var(--fth-surface);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--fth-text)}
.fth-dashboard-action:hover{border-color:var(--fth-border-strong);background:var(--fth-surface-2)}
.fth-dashboard-action strong{color:var(--fth-heading)}
.fth-dashboard-lock-panel{border:1px dashed var(--fth-border-strong);background:var(--fth-surface-2);border-radius:10px;padding:16px 18px}
.fth-dashboard-empty{color:var(--fth-text-muted);font-size:13px;padding:8px 0}
.fth-dashboard-drawer>summary{cursor:pointer;color:var(--fth-cta-active);font-weight:600;font-size:13px;margin-top:6px}
@media (max-width:820px){
	.fth-dashboard-layout{flex-direction:column}
	.fth-dashboard-sidebar{position:static;width:100%;flex-basis:auto}
	.fth-dashboard-menu{display:none}
	.fth-dashboard-menu-select{display:block}
	.fth-dashboard-topbar__actions{margin-left:0;width:100%}
}
@media print{
	.fth-dashboard-sidebar,.fth-dashboard-menu-select,.fth-dashboard-topbar__actions{display:none!important}
	.fth-dashboard-panel[hidden]{display:block!important}
	.fth-dashboard-panel{border:0;box-shadow:none;padding:8px 0}
}


/* ================================================================== *
 * v2.4.38 UI modernization (zero behavior change, light surfaces)
 * ------------------------------------------------------------------ *
 * 1) .fth-pm-* — Premium dashboard card controls. Each rule carries
 *    EXACTLY the declarations that dashboard.php used to emit as
 *    inline style="..." strings ($pm_input / $pm_ta / $pm_btn /
 *    $pm_btn2 / $pm_lbl / $pm_sum / $pm_status), so the rendered look
 *    is pixel-identical. Scoped under .fth-app (0,2,0) so they win
 *    over theme element rules the way the inline styles did. JS binds
 *    only to data-fth attributes — these classes are style-only.
 *    Note: textareas use class="fth-pm-input fth-pm-ta" (the old
 *    $pm_ta string was $pm_input + min-height/font-family).
 * ================================================================== */
.fth-app .fth-pm-input {
	width: 100%;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	padding: 6px 8px;
	font-size: 12px;
	box-sizing: border-box;
}

.fth-app .fth-pm-ta {
	min-height: 64px;
	font-family: inherit;
}

.fth-app .fth-pm-btn {
	border: 1px solid #2563eb;
	background: #2563eb;
	color: #fff;
	border-radius: 6px;
	padding: 6px 14px;
	font-size: 12px;
	cursor: pointer;
}

.fth-app .fth-pm-btn2 {
	border: 1px solid #cbd5e1;
	background: #fff;
	color: #334155;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 12px;
	cursor: pointer;
}

.fth-app .fth-pm-lbl {
	display: block;
	font-size: 11.5px;
	color: #475569;
	margin: 6px 0 2px;
}

.fth-app .fth-pm-sum {
	cursor: pointer;
	color: #1d4ed8;
	font-size: 12.5px;
	font-weight: 600;
}

.fth-app .fth-pm-status {
	font-size: 12px;
	margin-left: 8px;
}

/* ------------------------------------------------------------------ *
 * 2) Free-hub marketplace toolbar: sticky INSIDE its container.
 *    The base rule (see "Toolbar: search + facet selects...") already
 *    gives it an opaque background (var(--fth-surface-2)) and border,
 *    so content scrolls cleanly underneath. Sticky within the page
 *    scroll container — no full-bleed, no overlap of page chrome.
 * ------------------------------------------------------------------ */
.fth-app .fth-tpl-toolbar {
	position: sticky;
	top: 0;
	z-index: 5;
}

/* Keep the stuck toolbar below the fixed admin bar for logged-in users. */
body.admin-bar .fth-app .fth-tpl-toolbar {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .fth-app .fth-tpl-toolbar {
		top: 46px;
	}
}
/* === end v2.4.38 UI modernization ================================= */

/* ================================================================== *
 * v2.4.39 Paid-dashboard modernization.
 * Status summary strip, B2B work-pack cards, document-flow strip and
 * drawer-summary state chips. Light tokens (--fth-*) only — no
 * full-bleed / 100vw / dark-navy fills; single column under 720px.
 * ================================================================== */

/* ---- Status summary strip (one line; wraps on mobile) ---- */
.fth-app .fth-dash-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--fth-border);
	background: var(--fth-surface-2);
	border-radius: 10px;
	padding: 8px 12px;
	margin: 12px 0 0;
}
.fth-app .fth-dash-summary__stat {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	border: 1px solid var(--fth-border);
	background: var(--fth-surface);
	border-radius: 8px;
	padding: 4px 10px;
	min-width: 0;
}
.fth-app .fth-dash-summary__k {
	font-size: 11.5px;
	color: var(--fth-text-muted);
}
.fth-app .fth-dash-summary__v {
	font-size: 13px;
	font-weight: 700;
	color: var(--fth-heading);
}
.fth-app .fth-dash-summary__note {
	font-size: 11px;
	color: var(--fth-text-faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 180px;
}

/* ---- Work-pack cards ---- */
.fth-app .fth-dash-packs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
}
.fth-app .fth-dash-pack {
	border: 1px solid var(--fth-border);
	background: var(--fth-surface);
	border-radius: 10px;
	padding: 12px 14px;
	min-width: 0;
}
.fth-app .fth-dash-pack--locked {
	border-style: dashed;
	border-color: var(--fth-border-strong);
	background: var(--fth-surface-2);
}
.fth-app .fth-dash-pack__title {
	display: inline-block;
	color: var(--fth-heading);
	font-size: 13px;
	line-height: 1.5;
}
.fth-app .fth-dash-pack__purpose {
	color: var(--fth-text-muted);
	font-size: 12px;
	line-height: 1.7;
	margin-top: 4px;
}
.fth-app .fth-dash-pack__sec {
	margin-top: 8px;
}
.fth-app .fth-dash-pack__list {
	margin: 6px 0 2px;
	padding-left: 18px;
	color: var(--fth-text-muted);
	font-size: 12px;
	line-height: 1.7;
}
.fth-app .fth-dash-pack__tpls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}
.fth-app .fth-dash-pack__k {
	font-size: 11.5px;
	color: var(--fth-text-muted);
	font-weight: 600;
}
.fth-app .fth-dash-pack__tpl {
	display: inline-block;
	max-width: 100%;
	border: 1px solid var(--fth-border);
	background: var(--fth-surface-2);
	border-radius: 999px;
	padding: 1px 10px;
	font-size: 11.5px;
	color: var(--fth-link, #1d4ed8);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fth-app .fth-dash-pack__tpl:hover {
	border-color: var(--fth-border-strong);
	text-decoration: underline;
}
.fth-app .fth-dash-pack__more {
	font-size: 11.5px;
	color: var(--fth-text-faint);
}
.fth-app .fth-dash-pack__presets {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.fth-app .fth-dash-pack__preset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--fth-border);
	background: var(--fth-surface-2);
	border-radius: 8px;
	padding: 3px 8px;
	font-size: 12px;
	color: var(--fth-heading);
}
.fth-app .fth-dash-pack__cc {
	margin-top: 8px;
}
.fth-app .fth-dash-pack__ccbody {
	margin-top: 2px;
}
.fth-app .fth-dash-pack__notes {
	margin-top: 8px;
	border-top: 1px solid var(--fth-border);
	padding-top: 6px;
	color: var(--fth-text-faint);
	font-size: 11px;
	line-height: 1.6;
}
.fth-app .fth-dash-pack__cta {
	display: inline-block;
	margin-top: 8px;
	border: 1px solid var(--fth-cta, #2563eb);
	background: var(--fth-surface);
	color: var(--fth-link, #1d4ed8);
	border-radius: 8px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}

/* ---- Document-flow strip (overview) ---- */
.fth-app .fth-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 2px 0 12px;
}
.fth-app .fth-flow__step {
	border: 1px solid var(--fth-border-strong);
	background: var(--fth-surface-2);
	color: var(--fth-heading);
	border-radius: 999px;
	padding: 3px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}
.fth-app .fth-flow__arrow {
	color: var(--fth-text-faint);
	font-size: 12px;
}

/* ---- Drawer-summary state chips (settings <details>) ---- */
.fth-app .fth-drawer-chip {
	display: inline-block;
	border: 1px solid var(--fth-border);
	background: var(--fth-surface-2);
	color: var(--fth-text-muted);
	border-radius: 999px;
	padding: 0 8px;
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.7;
	margin-left: 6px;
	vertical-align: middle;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fth-app .fth-drawer-chip--set {
	border-color: #bbe3c5;
	background: #f0faf2;
	color: #15803d;
}

/* ---- Mobile: single column, summary wraps ---- */
@media (max-width: 720px) {
	.fth-app .fth-dash-packs {
		grid-template-columns: 1fr;
	}
	.fth-app .fth-dash-summary__stat {
		flex: 1 1 100%;
	}
}
/* === end v2.4.39 dashboard modernization ========================== */