/* Colour Contrast Checker — scoped.
   Inputs, labels, buttons and messages come from the shared .ftb-tool block in
   core.css so every tool looks like one product.

   This page sells accessibility, so nothing here may carry meaning by colour
   alone (§9). Pass and fail rows get a tint AND a left border AND a worded
   badge with a symbol. Remove the colour entirely and the table still reads. */

.ftb-cc-modes{display:flex;flex-wrap:wrap;gap:var(--ftb-space-2);
	margin-bottom:var(--ftb-space-5)}
.ftb-cc-mode{min-height:var(--ftb-tap);padding:var(--ftb-space-2) var(--ftb-space-4);
	font-family:inherit;font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);
	color:var(--ftb-text);background:var(--ftb-bg);
	border:1px solid var(--ftb-border-strong);border-radius:var(--ftb-radius);
	cursor:pointer;transition:var(--ftb-transition)}
.ftb-cc-mode:hover{border-color:var(--ftb-primary);background:var(--ftb-surface)}
.ftb-cc-mode:focus-visible{outline:2px solid var(--ftb-primary);outline-offset:2px}
.ftb-cc-mode[aria-pressed="true"]{background:var(--ftb-primary);
	color:var(--ftb-on-primary);border-color:var(--ftb-primary)}

/* ---- inputs ---- */
.ftb-cc-inputs{display:grid;gap:var(--ftb-space-4);grid-template-columns:1fr;
	margin-bottom:var(--ftb-space-5)}
@media (min-width:700px){
	.ftb-cc-inputs{grid-template-columns:1fr 1fr auto;align-items:end}
}
.ftb-tool-contrast .ftb-cc-inputs .ftb-field{margin-bottom:0}
.ftb-cc-inputrow{display:flex;gap:var(--ftb-space-2);align-items:stretch}
.ftb-tool-contrast .ftb-cc-inputrow input[type=text]{flex:1 1 auto;min-width:0;
	font-family:var(--ftb-mono);font-size:var(--ftb-text-code)}
/* The swatch picker keeps the shared control height so the row lines up. */
.ftb-tool-contrast input[type=color]{flex:0 0 auto;width:var(--ftb-control-h);
	height:var(--ftb-control-h);padding:2px;background:var(--ftb-surface-2);
	border:1px solid var(--ftb-border-strong);border-radius:var(--ftb-radius);
	cursor:pointer}
.ftb-tool-contrast input[type=color]:focus-visible{outline:2px solid var(--ftb-primary);
	outline-offset:2px}
.ftb-cc-swapfield{display:flex;align-items:flex-end}
.ftb-cc-swapfield .ftb-btn{width:100%}

/* ---- the headline ratio + live preview ---- */
.ftb-cc-result{display:grid;gap:var(--ftb-space-4);grid-template-columns:1fr;
	margin-bottom:var(--ftb-space-6);
	/* Reserved so the result appearing never shifts the page (§10 CLS). */
	min-height:180px}
@media (min-width:600px){
	.ftb-cc-result{grid-template-columns:auto 1fr;align-items:stretch}
}
.ftb-cc-ratiobox{display:flex;flex-direction:column;align-items:center;
	justify-content:center;padding:var(--ftb-space-5) var(--ftb-space-8);
	background:var(--ftb-surface);border:1px solid var(--ftb-border);
	border-radius:var(--ftb-radius)}
.ftb-cc-ratio{margin:0;font-size:var(--ftb-text-3xl);font-weight:var(--ftb-fw-bold);
	line-height:1.05;color:var(--ftb-text);font-variant-numeric:tabular-nums;
	letter-spacing:var(--ftb-ls-tight)}
.ftb-cc-ratiolabel{margin:var(--ftb-space-2) 0 0;font-size:var(--ftb-text-xs);
	font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted);
	text-transform:uppercase;letter-spacing:var(--ftb-ls-wide)}

.ftb-cc-preview{display:flex;flex-direction:column;justify-content:center;
	gap:var(--ftb-space-3);padding:var(--ftb-space-5);
	border:1px solid var(--ftb-border);border-radius:var(--ftb-radius)}
.ftb-cc-prev-normal{margin:0;font-size:16px;line-height:1.5}
.ftb-cc-prev-large{margin:0;font-size:24px;font-weight:var(--ftb-fw-semi);line-height:1.3}

/* ---- verdict and pairing tables ---- */
.ftb-cc-h{margin:var(--ftb-space-8) 0 var(--ftb-space-2);font-size:var(--ftb-text-lg);
	font-weight:var(--ftb-fw-semi);letter-spacing:var(--ftb-ls-tight)}
.ftb-cc-note{margin:0 0 var(--ftb-space-4);font-size:var(--ftb-text-sm);
	color:var(--ftb-text-muted);line-height:var(--ftb-lh-snug)}

.ftb-cc-table{width:100%;border-collapse:collapse;font-size:var(--ftb-text-sm)}
.ftb-cc-table th,.ftb-cc-table td{padding:var(--ftb-space-3) var(--ftb-space-4);
	text-align:left;border-bottom:1px solid var(--ftb-border);vertical-align:top;
	line-height:var(--ftb-lh-snug)}
.ftb-cc-table thead th{font-weight:var(--ftb-fw-semi);background:var(--ftb-surface-2);
	white-space:nowrap}
.ftb-cc-table tbody th{font-weight:var(--ftb-fw-normal)}
.ftb-cc-need{font-family:var(--ftb-mono);font-variant-numeric:tabular-nums;
	white-space:nowrap}

.ftb-cc-vname{display:block;font-weight:var(--ftb-fw-semi);color:var(--ftb-text)}
.ftb-cc-vsc{display:inline-block;margin:2px 0;font-size:var(--ftb-text-xs);
	font-family:var(--ftb-mono);color:var(--ftb-text-subtle)}
.ftb-cc-vnote{display:block;font-size:var(--ftb-text-xs);color:var(--ftb-text-muted)}

/* Tint + border + worded badge. Three signals, only one of them colour. */
.ftb-cc-table tr.is-pass{background:var(--ftb-success-soft)}
.ftb-cc-table tr.is-fail{background:var(--ftb-error-soft)}
.ftb-cc-table tr.is-pass th{box-shadow:inset 3px 0 0 var(--ftb-success)}
.ftb-cc-table tr.is-fail th{box-shadow:inset 3px 0 0 var(--ftb-error)}
.ftb-cc-badge{display:inline-block;padding:2px 10px;white-space:nowrap;
	font-size:var(--ftb-text-xs);font-weight:var(--ftb-fw-bold);
	border-radius:var(--ftb-radius-full)}
.ftb-cc-table tr.is-pass .ftb-cc-badge{background:var(--ftb-success);color:var(--ftb-on-status)}
.ftb-cc-table tr.is-fail .ftb-cc-badge{background:var(--ftb-error);color:var(--ftb-on-status)}

/* ---- palette pairings ---- */
.ftb-cc-pairnames{display:flex;flex-wrap:wrap;align-items:center;
	gap:var(--ftb-space-2)}
.ftb-cc-chip{display:inline-flex;align-items:center;gap:var(--ftb-space-2)}
.ftb-cc-dot{display:inline-block;width:18px;height:18px;flex:none;
	border:1px solid var(--ftb-border-strong);border-radius:var(--ftb-radius-sm)}
.ftb-cc-chip code{font-family:var(--ftb-mono);font-size:var(--ftb-text-code)}
.ftb-cc-on{font-size:var(--ftb-text-xs);color:var(--ftb-text-muted)}
.ftb-cc-summary{margin:0 0 var(--ftb-space-4);font-size:var(--ftb-text-base);
	font-weight:var(--ftb-fw-semi);color:var(--ftb-text)}
.ftb-tool-contrast .ftb-cc-targetfield{max-width:24rem}
.ftb-tool-contrast textarea{min-height:150px;font-family:var(--ftb-mono);
	font-size:var(--ftb-text-code);line-height:1.6}

/* ---- suggestion ---- */
.ftb-cc-suggest{margin:var(--ftb-space-6) 0;padding:var(--ftb-space-5);
	background:var(--ftb-primary-soft);border-left:4px solid var(--ftb-primary);
	border-radius:var(--ftb-radius-sm)}
.ftb-cc-suggest .ftb-cc-h{margin-top:0}
.ftb-cc-suggest-line{margin:0 0 var(--ftb-space-4);font-size:var(--ftb-text-sm);
	line-height:var(--ftb-lh-snug)}

/* ---- colour-vision simulation ---- */
.ftb-cc-cvd{display:grid;gap:var(--ftb-space-4);grid-template-columns:1fr;
	margin-bottom:var(--ftb-space-4)}
@media (min-width:700px){
	.ftb-cc-cvd{grid-template-columns:repeat(3,1fr)}
}
.ftb-cc-cvdcard{margin:0;border:1px solid var(--ftb-border);
	border-radius:var(--ftb-radius);overflow:hidden}
.ftb-cc-cvdswatch{padding:var(--ftb-space-6) var(--ftb-space-4);text-align:center;
	font-size:var(--ftb-text-base);font-weight:var(--ftb-fw-semi)}
.ftb-cc-cvdcard figcaption{display:block;padding:var(--ftb-space-3) var(--ftb-space-4);
	font-size:var(--ftb-text-xs);line-height:var(--ftb-lh-snug);
	background:var(--ftb-surface)}
.ftb-cc-cvdcard figcaption strong{display:block;color:var(--ftb-text)}
.ftb-cc-cvdcard figcaption span{color:var(--ftb-text-muted)}

.ftb-cc-apca{margin:0 0 var(--ftb-space-5);padding:var(--ftb-space-4);
	font-family:var(--ftb-mono);font-size:var(--ftb-text-sm);
	background:var(--ftb-surface);border:1px solid var(--ftb-border);
	border-radius:var(--ftb-radius);overflow-wrap:anywhere}

/* ---- the compliance disclaimer (roadmap §2) ----
   Deliberately not styled as a quiet footnote. It is load-bearing: the whole
   category depends on never implying a pass here means an accessible page. */
.ftb-tool-disclaimer{margin:var(--ftb-space-6) 0 0;padding:var(--ftb-space-5);
	font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);
	color:var(--ftb-text);background:var(--ftb-warning-soft);
	border-left:4px solid var(--ftb-warning);border-radius:var(--ftb-radius-sm)}
.ftb-tool-disclaimer strong{color:var(--ftb-warning)}