/* Keep localized titles, native datetime controls, and long ISO results inside 320px. */
.ts-page { width: min(760px, 100%); }
.ts-page [hidden] { display: none !important; }
.ts-page .tool-title-banner { display: flex; gap: 12px; align-items: center; padding: 16px; }
.ts-title-icon { flex: 0 0 32px; font-size: 28px; }
.ts-page .tool-title-banner h1 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ts-page .ut-card, .ts-page .ut-field { min-width: 0; }
.ts-page input, .ts-page select { max-width: 100%; min-width: 0; }
.ts-page input[type="datetime-local"] { width: 100%; }
.ts-fields { margin-bottom: 12px; }
.ts-results { margin: 16px 0 0; }
.ts-result { border-top: 1px solid var(--ut-border); padding: 12px 0; }
.ts-result dt { color: var(--ut-brown-muted); font-size: 13px; margin-bottom: 5px; }
.ts-result dd { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ts-result output { flex: 1 1 150px; min-width: 0; font: 14px/1.6 ui-monospace, monospace; overflow-wrap: anywhere; }
.ts-zone { display: block; font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.ts-copy, .ts-now { border: 1px solid var(--ut-border); border-radius: 9px; padding: 9px 12px; background: #fff; color: var(--ut-brown); font: inherit; font-size: 13px; cursor: pointer; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.ts-copy.is-copied { background: var(--ut-sage-soft); }
.ts-copy:disabled { opacity: .5; cursor: default; }
.ts-copy:focus-visible, .ts-now:focus-visible { outline: 2px solid var(--ut-sage-dark); outline-offset: 2px; }
.ts-error { color: #9f1239; line-height: 1.6; }
.ts-help { font-size: 13px; line-height: 1.6; color: var(--ut-brown-muted); }
.ts-page .ut-seo-blurb p + p { margin-top: 10px; }