/* Time Zones: a printed timetable of cities. Every city's day sits in one
   column, so a single rust cursor runs through all of them at the chosen
   instant. Drag the hours to move it. Loaded after collection-pages.css. */

.tz-app {
    --tz-cols: minmax(0, 1fr) 150px minmax(0, 2.25fr) 30px;
    --tz-gap: 26px;
    --tz-night: #d2d4cd;
    --tz-night-line: transparent;
    --tz-night-ink: #5c5f58;
    --tz-edge: #ebe6d8;
    --tz-edge-ink: #7a786d;
    --tz-work: #a8ba96;
    --tz-work-ink: #2c3725;
    --tz-hatch: rgb(41 44 42 / .13);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tz-app {
        --tz-night: #121311;
        --tz-night-line: #2d2e29;
        --tz-night-ink: #75766c;
        --tz-edge: #2c2c27;
        --tz-edge-ink: #9a988c;
        --tz-work: #687c5a;
        --tz-work-ink: #eef3e7;
        --tz-hatch: rgb(233 229 217 / .09);
    }
}
:root[data-theme="dark"] .tz-app {
    --tz-night: #121311;
    --tz-night-line: #2d2e29;
    --tz-night-ink: #75766c;
    --tz-edge: #2c2c27;
    --tz-edge-ink: #9a988c;
    --tz-work: #687c5a;
    --tz-work-ink: #eef3e7;
    --tz-hatch: rgb(233 229 217 / .09);
}


/* ------------------------------------------------------------ controls */
.tz-app .time-source { display: grid; grid-template-columns: minmax(210px, 1.5fr) minmax(150px, 1fr) minmax(128px, .8fr) auto; align-items: end; }
.tz-app .time-source label { min-width: 0; }
.tz-app .time-source :is(.zone-combo input, input[type='date'], input[type='time']) { width: 100%; }
.tz-app .time-source #repeatField { grid-column: 1 / -1; max-width: 320px; }
.tz-app .time-source #repeatField[hidden] { display: none; }
.tz-app .time-source-actions { display: flex; gap: 10px; }

.tz-app #nowButton { display: inline-flex; align-items: center; gap: 9px; padding-inline: 14px 16px; }
.tz-app .live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background-color var(--motion-settle) var(--ease-standard); }
.tz-app #nowButton[aria-pressed='true'] { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); color: var(--foreground); }
.tz-app #nowButton[aria-pressed='true'] .live-dot { background: var(--brand); }
.tz-app #nowButton[aria-pressed='true'] .live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--brand); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
    .tz-app #nowButton[aria-pressed='true'] .live-dot::after { animation: tz-live 2.4s var(--ease-standard) infinite; }
}
@keyframes tz-live { 0% { transform: scale(.5); opacity: .7; } 70%, 100% { transform: scale(1.35); opacity: 0; } }


/* --------------------------------------------------------------- board */
.tz-app .zone-board { position: relative; margin-top: 18px; --cursor: 50%; --hover: -10%; }
.tz-app .zone-board.is-idle { opacity: .5; }
.tz-app :is(.zone-ruler, .zone-row) { display: grid; grid-template-columns: var(--tz-cols); gap: 0 var(--tz-gap); padding: 0; }

/* The ruler is the starting day: hour notches, landmarks, and the cursor's pill. */
.tz-app .zone-ruler { align-items: end; }
.tz-app .zone-ruler-title { grid-column: 1 / 3; padding-bottom: 14px; }
.tz-app .zones-title { font: 400 28px/1.2 var(--font-serif); letter-spacing: -.025em; }
.tz-app .zone-ruler-hint { margin-top: 4px; color: var(--muted-foreground); font-size: 13px; }
.tz-app .zone-ruler-track {
    grid-column: 3; position: relative; height: 62px; cursor: ew-resize; touch-action: none;
    background: linear-gradient(90deg, var(--border-strong) 1px, transparent 1px) left bottom / calc((100% - 1px) / 24) 5px repeat-x,
                linear-gradient(90deg, var(--foreground) 1px, transparent 1px) left bottom / calc((100% - 1px) / 4) 9px repeat-x;
}
.tz-app .zone-ruler-track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.tz-app .zone-ruler-ticks span {
    position: absolute; top: 0; left: calc(var(--at) * 100%); transform: translateX(-50%);
    color: var(--subtle-foreground); font: 10.5px/1 var(--font-mono); letter-spacing: .02em; white-space: nowrap;
}
.tz-app .zone-ruler-ticks span:first-child { transform: none; }
.tz-app .zone-ruler-ticks span:last-child { transform: translateX(-100%); }
.tz-app .zone-pill {
    position: absolute; z-index: 3; top: 15px; left: clamp(38px, var(--cursor), calc(100% - 38px)); transform: translateX(-50%);
    display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 10px 4px;
    border-radius: 999px; background: var(--brand); color: var(--on-brand);
    font: 600 12.5px/1.1 var(--font-sans); letter-spacing: .01em; white-space: nowrap;
    box-shadow: 0 0 0 3px var(--background), 0 8px 16px -10px hsl(var(--shadow-color) / .6);
    pointer-events: none;
}
.tz-app .zone-pill .zone-period { margin: 0; color: inherit; font: 600 9.5px var(--font-sans); letter-spacing: .06em; opacity: .85; }
.tz-app .zone-ruler-track:has(input:focus-visible) .zone-pill { outline: 2px solid var(--brand); outline-offset: 3px; }
.tz-app .zone-ruler-track::after { content: ''; position: absolute; left: var(--cursor); top: 38px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--brand); }

/* Rows */
.tz-app .zone-row { position: relative; border-top: 1px solid var(--border); }
.tz-app .zone-row:last-child { border-bottom: 1px solid var(--border); }
.tz-app :is(.zone-place, .zone-time) { padding: 22px 0; min-width: 0; }
.tz-app .zone-row.is-source::before { content: ''; position: absolute; left: -18px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: var(--brand); }

.tz-app .zone-city { margin: 0 0 3px; font: 400 26px/1.15 var(--font-serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.tz-app .zone-meta { color: var(--muted-foreground); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.tz-app .zone-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 7px; font-size: 12.5px; line-height: 1.5; }
.tz-app .zone-shift, .tz-app .zone-tag { font: 11px var(--font-mono); letter-spacing: .02em; color: var(--subtle-foreground); }
.tz-app .zone-tag { color: var(--brand); }
.tz-app .zone-state { color: var(--muted-foreground); font-size: 12.5px; }
.tz-app .zone-state.working { color: var(--viz-sage-text); }
.tz-app .zone-state::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; background: var(--tz-edge); box-shadow: inset 0 0 0 1px var(--border-strong); }
.tz-app .zone-state.working::before { background: var(--tz-work); box-shadow: none; }
.tz-app .zone-state.night::before { background: var(--tz-night); box-shadow: inset 0 0 0 1px var(--border-strong); }

.tz-app .zone-clock { font: 400 36px/1.05 var(--font-serif); letter-spacing: -.035em; white-space: nowrap; }
.tz-app .zone-period { margin-left: 5px; color: var(--muted-foreground); font: 500 11.5px var(--font-sans); letter-spacing: .07em; }
.tz-app .zone-day { margin-top: 8px; color: var(--muted-foreground); font-size: 13px; white-space: nowrap; }
.tz-app .zone-offset-day { display: inline-block; margin-left: 2px; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--foreground); font: 10.5px/17px var(--font-mono); vertical-align: 1px; }

/* Hour band: 24 cells of the starting day, tinted by what each hour is locally. */
.tz-app .zone-band { position: relative; display: flex; align-items: center; padding: 22px 0; cursor: ew-resize; touch-action: none; }
.tz-app .zone-hours { position: relative; z-index: 1; flex: 1; background: var(--background); display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1px; height: 32px; }
.tz-app .zone-hours span { position: relative; display: grid; place-items: center; min-width: 0; background-color: var(--tz-edge); color: var(--tz-edge-ink); transition: background-color var(--motion-settle) var(--ease-standard); }
.tz-app .zone-hours span:first-child { border-radius: 3px 0 0 3px; }
.tz-app .zone-hours span:last-child { border-radius: 0 3px 3px 0; }
.tz-app .zone-hours b { font: 400 10px/1 var(--font-mono); letter-spacing: -.02em; white-space: nowrap; }
.tz-app .zone-hours .half b { font-size: 8.5px; }
.tz-app .zone-hours .h-night { background-color: var(--tz-night); color: var(--tz-night-ink); box-shadow: inset 0 0 0 1px var(--tz-night-line); }
.tz-app .zone-hours .h-work { background-color: var(--tz-work); color: var(--tz-work-ink); }
.tz-app .zone-hours .h-work b { font-weight: 550; }
.tz-app .zone-hours .weekend { background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--tz-hatch) 3px 4px); }
.tz-app .zone-hours .is-now { z-index: 2; box-shadow: 0 0 0 1.5px var(--brand), 0 0 0 3.5px var(--background); border-radius: 2px; }
.tz-app .zone-hours .is-now b { font-weight: 650; }
.tz-app .zone-hours .gap { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.tz-app .zone-hours .day-start::before { content: ''; position: absolute; z-index: 1; left: -1px; top: -7px; bottom: -4px; width: 1.5px; background: var(--foreground); }
.tz-app .day-tag { position: absolute; left: 3px; bottom: calc(100% + 2px); color: var(--foreground); font: 600 9.5px/1 var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

.tz-app .zone-marker { position: absolute; z-index: 0; top: -1px; bottom: 0; left: var(--cursor); width: 2px; margin-left: -1px; background: var(--brand); pointer-events: none; }
/* Hover guide: a faint line where a click would land. */
.tz-app .zone-band::before, .tz-app .zone-ruler-track::before { content: ''; position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--hover); width: 1px; background: var(--foreground); opacity: 0; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-standard); }
.tz-app .zone-ruler-track::before { top: 38px; }
.tz-app .zone-board.is-hovering:not(.is-dragging) :is(.zone-band, .zone-ruler-track)::before { opacity: .28; }
.tz-app .zone-board.is-dragging { cursor: ew-resize; user-select: none; }

.tz-app .zone-actions { display: flex; align-items: center; justify-content: flex-end; }
.tz-app #zoneBoard .zone-remove { width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--subtle-foreground); font-size: 19px; line-height: 1; }
.tz-app #zoneBoard .zone-remove:hover { background: var(--secondary); color: var(--foreground); }
.tz-app #zoneBoard .zone-make-source { min-height: 0; padding: 0; border: 0; background: none; color: var(--muted-foreground); font-size: 12.5px; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.tz-app #zoneBoard .zone-make-source:hover { color: var(--brand); text-decoration-color: currentColor; }
@media (hover: hover) {
    .tz-app #zoneBoard :is(.zone-remove, .zone-make-source) { opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
    .tz-app #zoneBoard .zone-row:is(:hover, :focus-within) :is(.zone-remove, .zone-make-source) { opacity: 1; }
}

.tz-app .zone-empty { padding: 44px 0 40px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; color: var(--muted-foreground); }
.tz-app .zone-empty-title { margin-bottom: 6px; color: var(--foreground); font: 400 24px var(--font-serif); letter-spacing: -.02em; }

/* Key */
.tz-app .hours-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; color: var(--muted-foreground); font-size: 12px; }
.tz-app .hours-key span::before { content: ''; display: inline-block; width: 14px; height: 10px; margin-right: 7px; border-radius: 2px; vertical-align: -1px; background: var(--tz-edge); }
.tz-app .hours-key .k-night::before { background: var(--tz-night); box-shadow: inset 0 0 0 1px var(--tz-night-line); }
.tz-app .hours-key .k-work::before { background: var(--tz-work); }
.tz-app .hours-key .k-weekend::before { background: var(--tz-edge) repeating-linear-gradient(135deg, transparent 0 3px, var(--tz-hatch) 3px 4px); }
.tz-app .hours-key .k-turn::before { width: 1.5px; height: 13px; margin-inline: 4px 9px; border-radius: 0; vertical-align: -2px; background: var(--foreground); }

/* Add */
.tz-app .zone-add { margin-top: 40px; padding: 0; border: 0; }
.tz-app .zone-add > label { display: block; margin-bottom: 10px; font: 400 22px/1.3 var(--font-serif); letter-spacing: -.02em; color: var(--foreground); }
.tz-app .zone-add > div:first-of-type { display: flex; flex-wrap: wrap; gap: 10px; }
.tz-app .zone-add .zone-combo { flex: 1 1 260px; min-width: 0; }
.tz-app .zone-add .zone-combo input { width: 100%; }
.tz-app #copyTimes { margin-left: auto; min-width: 118px; }
.tz-app #copyTimes.is-done { border-color: var(--viz-sage); color: var(--viz-sage-text); }
.tz-app .zone-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tz-app .zone-suggest[hidden] { display: none; }
.tz-app #zoneSuggest .zone-chip { min-height: 30px; padding: 2px 12px 2px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--muted-foreground); font-size: 13px; transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.tz-app #zoneSuggest .zone-chip span { color: var(--brand); margin-right: 2px; }
.tz-app #zoneSuggest .zone-chip:hover { border-color: var(--border-strong); color: var(--foreground); }

@media (prefers-reduced-motion: reduce) {
    .tz-app .zone-hours span { transition: none; }
}

@media (max-width: 960px) {
    .tz-app { --tz-cols: minmax(0, 1fr) 132px minmax(0, 1.9fr) 30px; --tz-gap: 20px; }
    .tz-app .zone-clock { font-size: 31px; }
    .tz-app .zone-city { font-size: 23px; }
    .tz-app .zone-hours span.minor:not(.day-start):not(.is-now) b { visibility: hidden; }
}
@media (max-width: 860px) {
    .tz-app .time-source { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .tz-app .time-source > label:first-child { grid-column: 1 / -1; }
    .tz-app .time-source-actions { grid-column: 1 / -1; }
    /* Stacked rows: city and clock on top, the full-width band beneath. */
    .tz-app { --tz-cols: minmax(0, 1fr) auto 30px; --tz-gap: 16px; }
    .tz-app .zone-ruler-title { grid-column: 1 / -1; padding-bottom: 6px; }
    .tz-app .zone-ruler-track { grid-column: 1 / -1; }
    .tz-app .zone-row { grid-template-areas: "place time actions" "band band band"; }
    .tz-app .zone-place { grid-area: place; padding-bottom: 0; }
    .tz-app .zone-time { grid-area: time; padding-bottom: 0; text-align: right; }
    .tz-app .zone-band { grid-area: band; padding: 22px 0 20px; }
    .tz-app .zone-actions { grid-area: actions; align-items: flex-start; padding-top: 18px; }
    .tz-app .zone-row .zone-marker { top: 14px; bottom: 14px; }
    .tz-app .zone-row.is-source::before { left: -12px; }
}
@media (max-width: 600px) {
    .tz-app .time-source { gap: 16px 12px; }
    .tz-app .time-source-actions > * { flex: 1; }
    .tz-app .clock-format button { flex: 1; }
    .tz-app .zone-city { font-size: 22px; }
    .tz-app .zone-clock { font-size: 28px; }
    .tz-app .zone-meta { font-size: 12px; }
    .tz-app .zone-hours { height: 28px; }
    .tz-app .zone-hours b { font-size: 9px; letter-spacing: -.04em; }
    .tz-app .zone-row.is-source::before { left: -10px; }
    .tz-app .zone-add .zone-combo { flex-basis: 100%; }
    .tz-app .zone-add > div:first-of-type > button { flex: 1; }
    .tz-app #copyTimes { margin-left: 0; }
    .tz-app .zone-ruler-hint { font-size: 12px; }
}

/* Zone picker: a paper card of suggestions under the field. */
.tz-app .zone-combo { position: relative; display: block; }
.tz-app .zone-options {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
    min-width: 280px; max-height: 336px; overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 6px; list-style: none;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--raised);
    box-shadow: 0 18px 36px -18px hsl(var(--shadow-color) / .45), 0 2px 6px -2px hsl(var(--shadow-color) / .12);
}
.tz-app .zone-options[hidden] { display: none; }
.tz-app .zone-options [role='option'] {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline;
    padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer;
}
.tz-app .zone-options [role='option'][aria-selected='true'] { background: var(--secondary); }
.tz-app .zone-options [role='option'][aria-selected='true']::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--brand); border-radius: 2px; }
.tz-app .zone-option-city { grid-column: 1; overflow: hidden; color: var(--foreground); font: 400 17px/1.3 var(--font-serif); letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.tz-app .zone-option-region { grid-column: 1; overflow: hidden; color: var(--muted-foreground); font-size: 12px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.tz-app .zone-option-offset { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--subtle-foreground); font: 11px var(--font-mono); white-space: nowrap; }
.tz-app .zone-options [role='option'][aria-selected='true'] .zone-option-offset { color: var(--brand); }
.tz-app .zone-option-empty { padding: 14px 12px; color: var(--muted-foreground); font-size: 13px; }