/* Timestamp converter: layout dual-card + righe timezone (il resto usa primitive tools-*) */

.ts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .ts-grid { grid-template-columns: 1fr 1fr; }
    .ts-card-wide { grid-column: 1 / -1; }
}

.ts-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-bottom: 0.75rem;
}
.ts-input-row .tools-field { flex: 1; min-width: 0; }

.ts-tz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ts-tz-row {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr auto;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--c-bg);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    align-items: center;
}
.ts-tz-name { font-size: 0.85rem; font-weight: 500; color: var(--c-ink); }
.ts-tz-offset { font-size: 0.7rem; font-weight: 400; color: var(--c-ink-mute); margin-left: 0.3rem; white-space: nowrap; }
.ts-tz-value { font-family: var(--font-mono); font-size: 0.82rem; color: var(--c-ink-soft); }
.ts-tz-actions { display: flex; gap: 0.3rem; }

/* Phone: the epoch field keeps its width (buttons wrap below it), and each zone
 * row puts the time on its own line, or Copy and remove ran past the screen. */
@media (max-width: 767px) {
    .ts-input-row { flex-wrap: wrap; }
    .ts-input-row .tools-field { flex-basis: 100%; }
    .ts-tz-row { grid-template-columns: minmax(0, 1fr) auto; }
    .ts-tz-value { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; }
}

.ts-tz-add { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.ts-tz-add .tools-select { flex: 1; }

/* [hidden] must beat the display set by the component class: .tools-btn-* is
 * inline-flex, which overrides the user-agent rule for the attribute, so a
 * button marked hidden shows up anyway. The natural home for this is
 * public.css, but that bundle sits 14 bytes under the 16 KB gzip budget that
 * gate check 7 enforces, and the rule costs ~40. Repeated here, in the three
 * stylesheets whose tools actually use hidden buttons, until the budget moves.
 */
[hidden] {
    display: none !important;
}