/* Epoch & Unix Timestamp Converter — scoped.
   Inputs, labels, buttons and messages come from the shared .ftb-tool block in
   core.css so every tool looks like one product. */

/* ---- the live clock ---- */
.ftb-ep-now{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ftb-space-3);
	margin-bottom:var(--ftb-space-5);padding:var(--ftb-space-4);
	background:var(--ftb-surface);border:1px solid var(--ftb-border);
	border-radius:var(--ftb-radius)}
.ftb-ep-now-label{font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);
	color:var(--ftb-text-muted)}
.ftb-ep-now-value{font-family:var(--ftb-mono);font-size:var(--ftb-text-lg);
	font-weight:var(--ftb-fw-semi);color:var(--ftb-text);
	font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ftb-ep-nowcopy{min-height:var(--ftb-tap);padding:var(--ftb-space-1) var(--ftb-space-3);
	font-family:inherit;font-size:var(--ftb-text-xs);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}
.ftb-ep-nowcopy:hover{border-color:var(--ftb-primary);color:var(--ftb-primary)}
.ftb-ep-nowcopy:focus-visible{outline:2px solid var(--ftb-primary);outline-offset:2px}

/* ---- the two input directions, side by side ---- */
.ftb-ep-grid{display:grid;gap:var(--ftb-space-5);grid-template-columns:1fr;
	margin-bottom:var(--ftb-space-4)}
@media (min-width:768px){
	.ftb-ep-grid{grid-template-columns:1fr 1fr}
}
/* Mobile-first: the two fields inside each side stack until there is room for
   them. Forcing 1fr 1fr at every width overflowed a 360px screen. */
.ftb-ep-side{display:grid;gap:var(--ftb-space-4);grid-template-columns:1fr;
	align-items:end}
@media (min-width:480px){
	.ftb-ep-side{grid-template-columns:1fr 1fr}
}
.ftb-tool-epoch .ftb-ep-side .ftb-field{margin-bottom:0}
.ftb-tool-epoch input[type=text][data-ftb="ts"]{font-family:var(--ftb-mono);
	font-size:var(--ftb-text-code);font-variant-numeric:tabular-nums}

/* ---- results. Height reserved so nothing shifts (§10 CLS). ---- */
.ftb-ep-results{min-height:340px}
.ftb-ep-table{width:100%;border-collapse:collapse;font-size:var(--ftb-text-sm)}
.ftb-ep-table th,.ftb-ep-table td{padding:var(--ftb-space-3) var(--ftb-space-4);
	text-align:left;border-bottom:1px solid var(--ftb-border);vertical-align:middle;
	line-height:var(--ftb-lh-snug)}
.ftb-ep-table thead th{font-weight:var(--ftb-fw-semi);background:var(--ftb-surface-2);
	white-space:nowrap}
.ftb-ep-table tbody th{font-weight:var(--ftb-fw-medium);color:var(--ftb-text-muted);
	white-space:nowrap}
.ftb-ep-table code{font-family:var(--ftb-mono);font-size:var(--ftb-text-code);
	color:var(--ftb-text);overflow-wrap:anywhere}

.ftb-ep-copy{min-height:var(--ftb-tap);min-width:var(--ftb-tap);
	padding:var(--ftb-space-1) var(--ftb-space-3);font-family:inherit;
	font-size:var(--ftb-text-xs);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}
.ftb-ep-copy:hover{border-color:var(--ftb-primary);color:var(--ftb-primary)}
.ftb-ep-copy:focus-visible{outline:2px solid var(--ftb-primary);outline-offset:2px}