/* Time Zone Converter — furniture beyond the shared .ftb-tool block. */

.ftb-tool-tz .ftb-tz-inputs{display:grid;gap:var(--ftb-space-4);
	grid-template-columns:1fr;margin-bottom:var(--ftb-space-4)}
@media (min-width:600px){.ftb-tool-tz .ftb-tz-inputs{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.ftb-tool-tz .ftb-tz-inputs{grid-template-columns:repeat(4,1fr)}}
.ftb-tool-tz select,.ftb-tool-tz input[type=date],.ftb-tool-tz input[type=time]{
	min-height:var(--ftb-control-h);width:100%;
	padding:var(--ftb-space-2) var(--ftb-space-3);font-family:inherit;
	font-size:var(--ftb-text-base);color:var(--ftb-text);background:var(--ftb-bg);
	border:1px solid var(--ftb-border-strong);border-radius:var(--ftb-radius)}
.ftb-tool-tz select:focus-visible,.ftb-tool-tz input:focus-visible{
	outline:2px solid var(--ftb-primary);outline-offset:2px}
.ftb-tool-tz .ftb-tz-swap{min-height:40px;
	padding:var(--ftb-space-2) var(--ftb-space-4);font-size:var(--ftb-text-sm);
	font-weight:var(--ftb-fw-semi);font-family:inherit;color:var(--ftb-text);
	background:var(--ftb-bg);border:1px solid var(--ftb-border-strong);
	border-radius:var(--ftb-radius);cursor:pointer}
.ftb-tool-tz .ftb-tz-swap:hover{border-color:var(--ftb-primary)}
.ftb-tool-tz .ftb-tz-swap:focus-visible{outline:2px solid var(--ftb-primary);
	outline-offset:2px}

.ftb-tool-tz .ftb-tz-result{display:grid;gap:var(--ftb-space-3);
	grid-template-columns:1fr;align-items:center;margin:var(--ftb-space-5) 0;
	/* Reserved so the result never shifts the page (§10 CLS). */
	min-height:200px}
@media (min-width:768px){
	.ftb-tool-tz .ftb-tz-result{grid-template-columns:1fr auto 1fr;min-height:170px}
}
.ftb-tool-tz .ftb-tz-side{display:flex;flex-direction:column;
	gap:var(--ftb-space-1);padding:var(--ftb-space-5);text-align:center;
	background:var(--ftb-surface);border:1px solid var(--ftb-border);
	border-radius:var(--ftb-radius-lg);min-height:150px;justify-content:center}
.ftb-tool-tz .ftb-tz-side--target{border-color:var(--ftb-primary)}
.ftb-tool-tz .ftb-tz-zone{font-size:var(--ftb-text-xs);
	font-weight:var(--ftb-fw-bold);text-transform:uppercase;letter-spacing:.06em;
	color:var(--ftb-text-muted)}
.ftb-tool-tz .ftb-tz-big{font-size:var(--ftb-text-3xl);
	font-weight:var(--ftb-fw-bold);color:var(--ftb-primary);line-height:1.1;
	font-variant-numeric:tabular-nums}
.ftb-tool-tz .ftb-tz-date{font-size:var(--ftb-text-sm);color:var(--ftb-text)}
.ftb-tool-tz .ftb-tz-off{font-size:var(--ftb-text-xs);
	color:var(--ftb-text-muted);font-variant-numeric:tabular-nums}
.ftb-tool-tz .ftb-tz-arrow{font-size:var(--ftb-text-xl);
	color:var(--ftb-text-muted);text-align:center}
.ftb-tool-tz .ftb-tz-diff{margin:0 0 var(--ftb-space-4);
	font-size:var(--ftb-text-base);text-align:center;min-height:1.6em}

/* The DST warning — the differentiator, so it is styled to be read. */
.ftb-tool-tz .ftb-tz-dst{margin:0 0 var(--ftb-space-4);
	padding:var(--ftb-space-4);font-size:var(--ftb-text-sm);
	background:var(--ftb-warning-soft);border:1px solid var(--ftb-warning);
	border-radius:var(--ftb-radius);max-width:var(--ftb-maxw-prose)}

.ftb-tool-tz .ftb-tz-overlap{margin-bottom:var(--ftb-space-5)}
.ftb-tool-tz .ftb-tz-h3{margin:0 0 var(--ftb-space-2);
	font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-bold);
	text-transform:uppercase;letter-spacing:.06em;color:var(--ftb-text-muted)}
.ftb-tool-tz .ftb-tz-strip{display:grid;
	grid-template-columns:repeat(24,1fr);gap:2px;margin-top:var(--ftb-space-3)}
.ftb-tool-tz .ftb-tz-cell{padding:var(--ftb-space-2) 0;text-align:center;
	font-size:9px;font-variant-numeric:tabular-nums;
	color:var(--ftb-text-muted);background:var(--ftb-surface);
	border-radius:2px}
.ftb-tool-tz .ftb-tz-cell.is-both{background:var(--ftb-primary);
	color:var(--ftb-on-primary);font-weight:var(--ftb-fw-bold)}

/* ---- v2: UTC mode, 2026-08-25 ----------------------------------------
   The clock is kept to one compact row so the converter itself stays
   above the fold (§0). Every value from a token (§4.2). */

.ftb-tool-tz .ftb-tz-clock{display:flex;flex-wrap:wrap;align-items:baseline;
	gap:var(--ftb-space-2) var(--ftb-space-3);margin:0 0 var(--ftb-space-4);
	padding:var(--ftb-space-3) var(--ftb-space-4);
	border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);
	background:var(--ftb-surface)}
.ftb-tool-tz .ftb-tz-clocklabel{font-size:var(--ftb-text-xs);
	font-weight:var(--ftb-fw-semi);text-transform:uppercase;
	letter-spacing:.04em;color:var(--ftb-text-muted)}
/* tabular-nums stops the row jittering as the seconds tick (§10, CLS). */
.ftb-tool-tz .ftb-tz-clocktime{font-family:var(--ftb-mono);
	font-variant-numeric:tabular-nums;font-size:var(--ftb-text-lg);
	font-weight:var(--ftb-fw-semi);color:var(--ftb-text)}
.ftb-tool-tz .ftb-tz-clockdate,.ftb-tool-tz .ftb-tz-clocklocal{
	font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}
.ftb-tool-tz .ftb-tz-clocklocal{margin-left:auto}

.ftb-tool-tz .ftb-tz-abbr{display:block;font-size:var(--ftb-text-xs);
	font-weight:var(--ftb-fw-semi);letter-spacing:.04em;
	color:var(--ftb-text-muted)}

.ftb-tool-tz .ftb-tz-both{margin:var(--ftb-space-3) 0 0;
	padding:var(--ftb-space-3) var(--ftb-space-4);
	border-left:3px solid var(--ftb-primary);border-radius:var(--ftb-radius);
	background:var(--ftb-primary-soft);
	font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);
	color:var(--ftb-text)}

.ftb-tool-tz .ftb-tz-panel{margin-top:var(--ftb-space-5)}
.ftb-tool-tz .ftb-tz-table{width:100%;border-collapse:collapse;
	font-size:var(--ftb-text-sm)}
.ftb-tool-tz .ftb-tz-table th,.ftb-tool-tz .ftb-tz-table td{
	padding:var(--ftb-space-2) var(--ftb-space-3);text-align:left;
	border-bottom:1px solid var(--ftb-border)}
.ftb-tool-tz .ftb-tz-table thead th{font-weight:var(--ftb-fw-semi);
	background:var(--ftb-surface-2);white-space:nowrap;
	font-size:var(--ftb-text-xs);text-transform:uppercase;letter-spacing:.04em;
	color:var(--ftb-text-muted)}
.ftb-tool-tz .ftb-tz-table tbody th{font-weight:var(--ftb-fw-normal);
	color:var(--ftb-text)}
.ftb-tool-tz .ftb-tz-table td{font-variant-numeric:tabular-nums}
.ftb-tool-tz .ftb-tz-offcell{font-family:var(--ftb-mono);
	font-size:var(--ftb-text-xs);color:var(--ftb-text-muted);white-space:nowrap}
.ftb-tool-tz .ftb-tz-day{font-size:var(--ftb-text-xs);
	color:var(--ftb-text-muted)}

@media (max-width:480px){
	.ftb-tool-tz .ftb-tz-clocklocal{margin-left:0;flex-basis:100%}
}