/* TAFCOP Tools - front end styles.
   Colours follow the site's active Novamira design ("Civic Clarity"):
   accent #1E40AF carries neutral instruction, safe #15803D the reader's own
   number, risk #B91C1C fraud, care #92400E verify-before-acting. Every
   coloured state also carries an icon and a text label, so colour is never
   the only signal. Tokens are declared on the block root so the plugin does
   not depend on the theme exposing them. */

.tft {
	--tft-bg: #FFFFFF;
	--tft-alt: #F4F8FE;
	--tft-ink: #10243F;
	--tft-soft: #475569;
	--tft-accent: #1E40AF;
	--tft-border: #DCE7F8;
	--tft-border-2: #BFD4F2;
	--tft-safe: #15803D;
	--tft-safe-bg: #ECFDF5;
	--tft-risk: #B91C1C;
	--tft-risk-bg: #FEF2F2;
	--tft-care: #92400E;
	--tft-care-bg: #FFFBEB;

	background: var(--tft-bg);
	border: 1px solid var(--tft-border-2);
	border-radius: 16px;
	padding: 1.5rem;
	color: var(--tft-ink);
	box-shadow: 0 2px 4px rgba(16, 36, 63, .05), 0 6px 16px rgba(16, 36, 63, .07);
}

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

.tft__tag {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: var(--tft-accent); background: #EFF6FF;
	padding: 4px 10px; border-radius: 999px; margin-bottom: 1rem;
}
.tft__title { font-size: 1.375rem; line-height: 1.3; margin: 0 0 .5rem; }
.tft__intro { color: var(--tft-soft); font-size: .9375rem; margin: 0 0 1.25rem; }
.tft__noscript { color: var(--tft-soft); font-size: .9375rem; margin: 1rem 0 0; }
.tft__vh {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tft code {
	background: var(--tft-alt); border: 1px solid var(--tft-border);
	padding: 2px 7px; border-radius: 6px; font-size: .9em; word-break: break-word;
}

/* ---- SIM limit meter ---- */
.tft__slots { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tft__slot {
	flex: 1 1 42px; min-width: 42px; height: 54px;
	display: grid; place-items: center;
	border: 2px dashed var(--tft-border-2); border-radius: 8px;
	color: var(--tft-soft);
	transition: background 280ms ease, border-color 280ms ease, color 280ms ease, transform 280ms ease;
}
.tft__slot[data-state="used"] {
	background: #EFF6FF; border-style: solid;
	border-color: var(--tft-accent); color: var(--tft-accent); transform: translateY(-2px);
}
.tft__slot[data-state="over"] {
	background: var(--tft-risk-bg); border-style: solid;
	border-color: var(--tft-risk); color: var(--tft-risk); transform: translateY(-2px);
}

.tft__ctrl { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tft__ctrl label { font-weight: 600; font-size: .9375rem; }
.tft__stepper { display: flex; align-items: center; gap: .5rem; }
.tft__stepper button {
	width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
	background: var(--tft-alt); border: 1px solid var(--tft-border-2);
	border-radius: 8px; color: var(--tft-ink); font-size: 1.375rem; line-height: 1;
	transition: background 180ms ease, transform 140ms ease;
}
.tft__stepper button:hover:not(:disabled) { background: #EFF6FF; color: var(--tft-accent); }
.tft__stepper button:active:not(:disabled) { transform: scale(.94); }
.tft__stepper button:disabled { opacity: .4; cursor: not-allowed; }
.tft__stepper output {
	min-width: 3rem; text-align: center;
	font-size: 1.625rem; font-weight: 700;
	font-variant-numeric: tabular-nums; color: var(--tft-accent);
}

.tft__regions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tft__regions button {
	cursor: pointer; font: inherit; font-size: .9375rem; font-weight: 600;
	min-height: 48px; padding: 0 1rem;
	background: var(--tft-alt); color: var(--tft-soft);
	border: 1px solid var(--tft-border); border-radius: 999px;
	transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.tft__regions button[aria-pressed="true"] {
	background: var(--tft-accent); color: #fff; border-color: var(--tft-accent);
}

.tft__verdict {
	display: flex; gap: .75rem; align-items: flex-start;
	border-radius: 12px; padding: 1rem 1.25rem; margin-top: 1.25rem;
	font-size: .9375rem; background: var(--tft-alt);
	border: 1px solid var(--tft-border);
}
.tft__verdict svg { flex-shrink: 0; margin-top: 2px; }
.tft__verdict p { margin: 0; }
.tft__verdict strong { display: block; margin-bottom: 2px; }
.tft__verdict[data-tone="safe"] { background: var(--tft-safe-bg); border-color: #86D7A8; color: var(--tft-safe); }
.tft__verdict[data-tone="care"] { background: var(--tft-care-bg); border-color: #FCD34D; color: var(--tft-care); }
.tft__verdict[data-tone="risk"] { background: var(--tft-risk-bg); border-color: #F0A8A8; color: var(--tft-risk); }
.tft__verdict[data-tone] p { color: var(--tft-ink); }

/* ---- link checker ---- */
.tft__field {
	position: relative; display: flex; align-items: center;
	background: var(--tft-bg); border: 1px solid var(--tft-border-2);
	border-radius: 12px;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}
.tft__field:focus-within { border-color: var(--tft-accent); box-shadow: 0 0 0 4px #EFF6FF; }
.tft__field svg { flex-shrink: 0; margin-inline-start: 1rem; color: var(--tft-soft); }
.tft__field input {
	flex: 1; min-width: 0; min-height: 50px;
	padding: 0 1rem; border: 0; background: transparent;
	font: inherit; font-size: 1.0625rem; color: var(--tft-ink);
}
.tft__field input:focus { outline: none; }

.tft__out {
	display: flex; gap: .75rem; align-items: flex-start;
	border-radius: 12px; padding: 1rem 1.25rem; margin-top: .75rem;
	border: 1px solid var(--tft-border); background: var(--tft-alt);
	font-size: .9375rem;
}
.tft__out[hidden] { display: none; }
.tft__out svg { flex-shrink: 0; margin-top: 2px; }
.tft__out p { margin: 0; }
.tft__out[data-tone="safe"] { background: var(--tft-safe-bg); border-color: #86D7A8; }
.tft__out[data-tone="safe"] svg { color: var(--tft-safe); }
.tft__out[data-tone="care"] { background: var(--tft-care-bg); border-color: #FCD34D; }
.tft__out[data-tone="care"] svg { color: var(--tft-care); }
.tft__out[data-tone="risk"] { background: var(--tft-risk-bg); border-color: #F0A8A8; }
.tft__out[data-tone="risk"] svg { color: var(--tft-risk); }

.tft :where(button, input):focus-visible {
	outline: 3px solid var(--tft-accent); outline-offset: 2px; border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.tft *, .tft *::before, .tft *::after { transition-duration: .01ms !important; }
}

@media (min-width: 48rem) { .tft__slots { flex-wrap: nowrap; } }