/* Time zone converter. Builds on site.css tokens: clay marks the first clock, a deep slate the second.
   Layout: two dials facing each other across the gap readout, then the day planner, then the share line. */

.tz {
    /* One hue per place, in order. Soft versions mark the shoulder hours in the planner. */
    --tz-h0: var(--clay-deep);  --tz-h0-soft: #EBC7B4;
    --tz-h1: #33566E;           --tz-h1-soft: #BFCFDB;
    --tz-h2: #6B4C8A;           --tz-h2-soft: #D6C8E3;
    --tz-h3: #5A6B24;           --tz-h3-soft: #D3DAB8;
    --tz-h4: #1F6F78;           --tz-h4-soft: #BCDCDF;
    --tz-h5: #A33D5C;           --tz-h5-soft: #EBC3CF;
    --tz-good: #2E7D55;
    --tz-warn: #9A5B00;
    --tz-night-band: var(--paper-deep);
    --tz-night-ink: #ECEBF5;
    --tz-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    display: grid;
    gap: 1.25rem;
    min-width: 0;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.tz button { font: 600 0.9rem var(--sans); color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 0.6rem 0.9rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, transform 0.15s var(--ease), background-color 0.15s; }
.tz button:hover { border-color: var(--ink); }
.tz button:active { transform: scale(0.96); }

.tz-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.tz-top__hint { font-size: 0.92rem; color: var(--muted); }
.tz-top__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tz .tz-add { background: var(--ink); color: #F6F2EC; border-color: var(--ink); }
.tz .tz-add:hover { background: var(--ink-soft); }
.tz .tz-add:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ---------- Clocks ---------- */
.tz-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: 1rem; }
/* From tablet width up, clocks sit in one sliding row: up to three across, and from the fourth on
   the next card peeks in at the edge. The row bleeds a little so card shadows are not clipped. */
@media (min-width: 601px) {
    .tz-board {
        --per: 3;
        --gap: 1.25rem;
        grid-template-columns: none; grid-auto-flow: column; gap: var(--gap);
        grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
        margin: -0.75rem -1.5rem -1.25rem; padding: 0.75rem 1.5rem 2.75rem; scroll-padding-inline: 1.5rem;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
    }
    .tz-board::-webkit-scrollbar { display: none; }
    /* Fade whichever edge has more clocks beyond it (classes set by app.js). */
    .tz-board.has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent); }
    .tz-board.has-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 4rem), transparent); }
    .tz-board.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent); }
    .tz-board[data-count="2"] { --per: 2; }
    .tz-board:not([data-count="2"]):not([data-count="3"]) { --per: 3.2; }
    .tz-clock { scroll-snap-align: start; }
}
@media (min-width: 601px) and (max-width: 899px) {
    .tz-board, .tz-board[data-count="2"] { --per: 2; }
    .tz-board:not([data-count="2"]) { --per: 2.2; }
}
.tz-clock {
    --hue: var(--tz-h0);
    animation: tz-rise 450ms var(--ease) backwards;
    position: relative; min-width: 0;
    display: grid; align-content: start; gap: 0.9rem; padding: 1.1rem 1.1rem 1rem;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
@keyframes tz-rise { from { transform: translateY(8px) scale(0.98); } }
.tz-clock.is-pulsing { animation: tz-pulse 700ms var(--ease); }
/* Reordering (sort.js): the held card lifts and follows the pointer while the others slide aside. */
.tz-clock { -webkit-touch-callout: none; }
.tz-board.is-sorting { scroll-snap-type: none; scroll-behavior: auto; -webkit-user-select: none; user-select: none; }
.tz-board.is-sorting .tz-clock { transition: transform 220ms var(--ease); }
.tz-board.is-sorting .tz-clock.is-lifted { z-index: 2; cursor: grabbing; transition: none; box-shadow: 0 30px 60px -24px rgba(26, 23, 20, 0.5); }
.tz-board.is-sorting .tz-clock.is-settling { transition: transform 180ms var(--ease); }
.tz-board.is-reordering, .tz-board.is-reordering * { transition: none !important; }
@keyframes tz-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hue) 70%, transparent), var(--shadow); }
    100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--hue) 0%, transparent), var(--shadow); }
}

.tz-zone { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.tz .tz-grip { flex: none; display: grid; place-items: center; width: 1.5rem; height: 2.2rem; margin-left: -0.4rem; padding: 0; color: var(--hue); background: transparent; border-color: transparent; border-radius: 8px; cursor: grab; touch-action: none; }
.tz .tz-grip:hover { border-color: var(--line); }
.tz .tz-grip:active { transform: none; cursor: grabbing; }
.tz .tz-grip:focus-visible { outline: 2px solid var(--hue); outline-offset: 1px; }
.tz-grip svg { width: 10px; height: 16px; fill: currentColor; }
.tz-offset { flex: none; font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted); }

.tz-pick { position: relative; flex: 1; min-width: 0; }
.tz-pick__input {
    width: 100%; min-width: 0; padding: 0.5rem 0.6rem 0.5rem 2.1rem;
    font: 700 1.2rem var(--serif); letter-spacing: -0.01em; color: var(--ink);
    background: transparent; border: 1.5px solid transparent; border-radius: 12px;
    text-overflow: ellipsis; transition: border-color 0.15s, background-color 0.15s;
}
.tz-pick__input:hover { border-color: var(--line); }
.tz-pick__input:focus { outline: none; border-color: var(--hue); background: var(--paper); font: 500 1rem var(--sans); }
.tz-pick__input::placeholder { color: var(--faint); }
.tz-pick__icon { position: absolute; left: 0.6rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.tz-pick__list {
    /* Fixed to the screen and placed under the input by app.js, so the sliding row cannot clip it. */
    position: fixed; z-index: 40; width: min(22rem, calc(100vw - 2rem)); max-height: min(19rem, 50vh); overflow-y: auto;
    padding: 0.35rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
    box-shadow: 0 24px 50px -20px rgba(26, 23, 20, 0.45);
    animation: tz-drop 180ms var(--ease);
}
@keyframes tz-drop { from { opacity: 0; transform: translateY(-4px); } }
.tz-pick__list li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0.65rem; border-radius: 9px; cursor: pointer; }
.tz-pick__list li[aria-selected="true"] { background: var(--paper); }
.tz-opt__name { font-weight: 700; }
.tz-opt__country { font-size: 0.85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-opt__offset { font-size: 0.75rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.tz-pick__list .tz-opt--empty { display: block; color: var(--muted); cursor: default; }

/* Dial */
.tz-dial { width: 100%; max-width: 260px; aspect-ratio: 1; justify-self: center; touch-action: none; cursor: grab; overflow: visible; }
.tz-dial.is-dragging { cursor: grabbing; }
.tz-bezel { fill: none; stroke: var(--line); }
.tz-sky { transition: opacity 600ms var(--ease); }
.tz-stars { fill: var(--tz-night-ink); opacity: 0.7; }
.tz-tick { stroke: var(--faint); transition: stroke 600ms; }
.tz-num { font: 600 13px var(--serif); fill: var(--ink); text-anchor: middle; dominant-baseline: central; transition: fill 600ms; }
.tz-period { font: 700 9px var(--sans); fill: var(--muted); text-anchor: middle; letter-spacing: 0.16em; text-transform: uppercase; }
.tz-dial.is-night .tz-tick { stroke: rgba(236, 235, 245, 0.5); }
.tz-dial.is-night .tz-num, .tz-dial.is-night .tz-period { fill: var(--tz-night-ink); }
.tz-hands { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2)); }
.tz-hand { transform-box: view-box; transform-origin: 100px 100px; transition: transform 420ms var(--tz-spring); }
.tz-dial.is-dragging .tz-hand { transition: transform 120ms linear; }
.tz-hand--h path { fill: var(--ink); transition: fill 600ms; }
.tz-dial.is-night .tz-hand--h path { fill: var(--tz-night-ink); }
.tz-hand--m path, .tz-hub { fill: var(--hue); }
.tz-hub-in { fill: var(--card); }
.tz-celestial { transform-box: view-box; transform-origin: 100px 100px; transition: transform 600ms var(--ease); }
.tz-sun { fill: #E9A23B; transition: opacity 400ms; }
.tz-moon { fill: var(--tz-night-ink); transition: opacity 400ms; }

/* Readout */
.tz-readout { display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.tz-big { display: flex; overflow: hidden; font: 700 clamp(2rem, 1.4rem + 2.2vw, 2.7rem)/1.1 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tz-big span { display: inline-block; white-space: pre; }
.tz-big .is-rolling { animation: tz-roll 380ms var(--ease) both; }
@keyframes tz-roll { from { transform: translateY(60%); opacity: 0; } }
.tz-day { font-size: 0.92rem; color: var(--muted); }
.tz-chip { padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s, background-color 0.3s; }
.tz-chip--good { color: var(--tz-good); background: rgba(46, 125, 85, 0.12); }
.tz-chip--warn { color: var(--tz-warn); background: rgba(154, 91, 0, 0.12); }

.tz-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); gap: 0.5rem; }
/* iOS Safari gives date and time inputs an intrinsic width that ignores min-width, so its native styling is turned off. */
.tz-inputs input { display: block; -webkit-appearance: none; appearance: none; width: 100%; max-width: 100%; min-height: 2.6rem; min-width: 0; padding: 0.6rem; font: 500 0.92rem var(--sans); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; }
.tz-inputs input::-webkit-date-and-time-value { text-align: left; }
.tz-nudge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.tz .tz-nudge button { padding: 0.55rem 0.2rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.tz .tz-nudge button:hover { border-color: var(--hue); color: var(--hue); }

/* How far each place is from the main one */
.tz-rel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); }
.tz-rel__text { font: 700 1rem/1.3 var(--serif); color: var(--hue); }
.tz .tz-main { padding: 0.35rem 0.7rem; font-size: 0.8rem; border-radius: 999px; }
.tz .tz-remove { flex: none; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; font-size: 1.2rem; line-height: 1; color: var(--muted); }
.tz .tz-remove:hover { border-color: #B23A2B; color: #B23A2B; }

/* ---------- Day planner ---------- */
.tz-planner { display: grid; gap: 0.9rem; padding: 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.tz-planner__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; }
.tz-planner h2 { font: 700 1.25rem var(--serif); letter-spacing: -0.01em; }
.tz-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8rem; color: var(--muted); }
.tz-legend i { display: inline-block; width: 18px; height: 8px; margin-right: 0.4rem; border-radius: 3px; vertical-align: middle; }
.tz-lanes { display: grid; gap: 0.35rem; }
.tz-track { position: relative; display: grid; padding-block: 0.3rem; border-radius: 10px; touch-action: none; cursor: ew-resize; }
.tz-track:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 4px; }
.tz-lane { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: 0.6rem; }
.tz-lane__name { overflow: hidden; font-size: 0.78rem; font-weight: 700; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.tz-bar { height: 26px; border-radius: 7px; transition: background 0.4s; }
.tz-bar--both { height: 10px; }
.tz-hours { position: relative; height: 14px; overflow: hidden; }
.tz-hours span { position: absolute; transform: translateX(-50%); font-size: 0.66rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tz-marker { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; transition: left 300ms var(--ease); }
.tz-track.is-dragging .tz-marker { transition: none; }
.tz-marker::before { content: ''; position: absolute; top: -4px; bottom: -4px; left: -1px; width: 2px; border-radius: 2px; background: var(--ink); }
.tz-marker::after { content: ''; position: absolute; top: -9px; left: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--card); }
.tz-planner__hint { font-size: 0.85rem; color: var(--muted); }

/* ---------- Share line ---------- */
.tz-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-sm); background: var(--ink); color: #F6F2EC; }
.tz-share__label { width: 100%; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clay-soft); }
.tz-share__text { flex: 1; min-width: 0; font-size: 1.05rem; line-height: 1.5; user-select: all; overflow-wrap: anywhere; }
.tz .tz-share button { min-width: 6rem; background: #F6F2EC; border-color: transparent; }
.tz .tz-share button:hover { background: #fff; }
.tz-foot { font-size: 0.88rem; color: var(--muted); }

/* ---------- Page-load: ticks fade in around the dial, hands sweep from 12 ---------- */
.is-intro .tz-tick { animation: tz-tick-in 500ms var(--ease) both; animation-delay: calc(var(--i) * 9ms); }
@keyframes tz-tick-in { from { opacity: 0; } }
.is-intro .tz-hand { transition: transform 1100ms var(--ease); }

/* ---------- Content below the tool ---------- */
.tz-guide { display: grid; gap: 2.5rem; max-width: 46rem; }
.tz-guide h2 { margin-bottom: 0.8rem; }
.tz-guide ol { display: grid; gap: 0.6rem; padding-left: 1.3rem; list-style: decimal; }
.tz-pairs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tz-pairs th, .tz-pairs td { padding: 0.7rem 0.6rem; text-align: left; border-bottom: 1px solid var(--line); }
.tz-pairs th { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tz-table-wrap { overflow-x: auto; }

/* Swipe hint, only shown on phones with three or more places. */
.tz-slide { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: -0.6rem; }
.tz-slide[hidden] { display: none; }
.tz-swipe { font-size: 0.85rem; color: var(--muted); }
.tz-pager { display: flex; gap: 0.4rem; }
.tz .tz-pager button { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; }
.tz .tz-pager button:disabled { opacity: 0.35; cursor: default; transform: none; border-color: var(--line); }

/* Phones: clocks become a swipeable row, two cards per screen, so times compare at a glance.
   With three or more places the next card peeks in from the edge. The row bleeds to the
   screen edges so cards slide out of view instead of being clipped at the gutter.
   Inputs stay at 16px so iOS does not zoom on focus. */
@media (max-width: 600px) {
    .tz-top__hint { font-size: 0.85rem; }
    .tz-top__actions { width: 100%; }
    .tz-top__actions button { flex: 1; }
    .tz-board {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 0.6rem) / 2); gap: 0.6rem;
        margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 1.25rem; scroll-padding-inline: var(--gutter);
        overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    }
    .tz-board::-webkit-scrollbar { display: none; }
    .tz-board:not([data-count="2"]) { grid-auto-columns: 44%; }
    .tz-slide { justify-content: center; margin-top: -0.9rem; }
    .tz-swipe { font-size: 0.8rem; }
    .tz-pager { display: none; }
    .tz-clock { scroll-snap-align: start; gap: 0.6rem; padding: 0.75rem 0.65rem 0.8rem; border-radius: 18px; }
    .tz-zone { gap: 0.3rem; }
    .tz-offset { display: none; }
    .tz .tz-grip { width: 1.2rem; margin-left: -0.3rem; }
    .tz-pick__input { padding: 0.4rem 0.3rem 0.4rem 1.55rem; font-size: 1.05rem; }
    .tz-pick__input:focus { font-size: 1rem; }
    .tz-pick__icon { left: 0.4rem; width: 14px; height: 14px; }
    .tz .tz-remove { width: 1.7rem; height: 1.7rem; font-size: 1rem; }
    /* Placed under the input by app.js, spanning the screen rather than the half-width card. */
    .tz-pick__list { width: auto; left: var(--gutter); right: var(--gutter); }
    .tz-dial { max-width: 150px; }
    .tz-big { font-size: 1.6rem; }
    .tz-day { font-size: 0.78rem; }
    .tz-chip { padding: 0.2rem 0.5rem; font-size: 0.58rem; letter-spacing: 0.05em; }
    .tz-inputs { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
    .tz-inputs input { padding: 0.4rem 0.45rem; font-size: 1rem; }
    .tz-nudge { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; }
    .tz .tz-nudge button { padding: 0.45rem 0.2rem; font-size: 0.8rem; }
    .tz-rel { flex-direction: column; align-items: stretch; gap: 0.4rem; padding-top: 0.6rem; }
    .tz-rel__text { font-size: 0.85rem; }
    .tz .tz-main { font-size: 0.75rem; }
    .tz-planner { padding: 0.9rem 0.75rem; }
    .tz-lane { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 0.4rem; }
    .tz-lane__name { font-size: 0.7rem; }
    .tz-hours span { font-size: 0.6rem; }
    .tz-share { padding: 1rem; }
    .tz .tz-share button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .tz *, .tz *::before, .tz *::after { animation: none !important; transition: none !important; }
}