/* Timeline roles use the chosen tile palette; the rest of Clock keeps its theme. */
:root[data-tile-scheme] .hour-cell.work{background:var(--tile-fill,var(--tile-work));color:var(--tile-work-ink)}
:root[data-tile-scheme] .hour-cell.personal{background:var(--tile-fill,var(--tile-personal));color:var(--tile-personal-ink)}
:root[data-tile-scheme] .hour-cell.night{background:var(--tile-fill,var(--tile-night));color:var(--tile-night-ink)}
.swatch.work,.scheme-sample .work{background:var(--tile-work);color:var(--tile-work-ink)}
.swatch.personal,.scheme-sample .personal{background:var(--tile-personal);color:var(--tile-personal-ink)}
.swatch.night,.scheme-sample .night{background:var(--tile-night);color:var(--tile-night-ink)}
.hour-cell.is-preview{box-shadow:0 0 0 2px var(--surface);outline-offset:2px}
.hour-cell.is-range-preview,.hour-cell.is-range-preview.is-keyboard-focus{outline:none;box-shadow:none}
.timeline{--tile-height:36px;padding:8px 0;touch-action:pan-y}
.hour-cell{height:var(--tile-height);outline:0}.hour-cell.midnight:before{display:none}
:root[data-tile-scheme] .hour-cell.day-marker-cell{background:var(--tile-date);color:var(--tile-date-ink)}
:root[data-tile-scheme] body:not(.has-time-range) .hour-cell.active{background:var(--range-active);color:var(--range-keyline);box-shadow:inset 0 0 0 1px var(--range-keyline);outline-color:var(--range-active)}
:root[data-tile-scheme] body:not(.has-time-range) .hour-cell.active.is-preview{box-shadow:inset 0 0 0 1px var(--range-keyline),0 0 0 2px var(--surface)}
.date-number{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;height:100%;width:100%;line-height:1.15;pointer-events:none;font-variant-numeric:tabular-nums}
.hour-cell.day-marker-cell{container-type:inline-size}.date-number>span{font-size:8px;font-weight:500;max-width:100%;overflow:hidden}.date-number>strong{font-size:11px;font-weight:650}
.move-handle{display:inline-flex;justify-content:center;align-items:center;width:26px;min-width:26px;height:44px;color:var(--muted);cursor:grab;touch-action:none;border-radius:6px;font-size:21px;line-height:1}
.move-handle:hover{background:var(--surface-2);color:var(--ink)}.move-handle:active{cursor:grabbing}
.place-info{gap:8px}.place-info .place-symbol{width:32px;height:32px}.place-heading{flex-wrap:wrap;gap:3px 6px}.place-heading h2{max-width:100%}
.zone-label-setting{margin-top:12px}
.zone-badge{font-size:9px;font-weight:500;color:var(--muted);white-space:nowrap;line-height:1.4}
.zone-details-trigger{padding:3px 0;text-align:left;font-size:inherit;color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.zone-details-trigger:hover{color:var(--accent)}.face-card>.move-handle{position:absolute;top:7px;left:7px}
.face-top{flex-wrap:wrap}.face-top .zone-badge{font-size:10px}
.row-dst-note{grid-column:3;grid-row:2;color:#825a22;font-size:11px;line-height:1.5;margin-top:-6px;padding-top:3px}
:root[data-theme=dark] .row-dst-note{color:#dfbc7d}
.clock-row>.place-info,.clock-row>.local-clock,.clock-row>.timeline,.clock-row>.row-menu{grid-row:1}
.location-gesture,.range-gesture{user-select:none;cursor:grabbing}
.range-gesture .hour-cell.is-preview{outline:0;box-shadow:none}
.timeline.is-range-grab,.timeline.is-range-grab .hour-cell{cursor:grab}
.range-move-gesture #clock-rows,.range-move-gesture .timeline,.range-move-gesture .timeline .hour-cell{cursor:grabbing}
.range-gesture .range-inspection:not(.is-keyboard){visibility:hidden}
.has-time-range .timeline:after{background:var(--range-active);left:var(--range-progress,var(--progress))}
.range-layer{--range-stroke:2px;--range-color:var(--range-idle);position:absolute;top:8px;height:var(--tile-height);pointer-events:none;z-index:4}
.range-band{position:absolute;inset:0;border:var(--range-stroke) solid var(--range-color);border-radius:5px;box-shadow:0 0 0 1px var(--range-keyline);opacity:1;pointer-events:none;z-index:2}
.range-layer:is(.is-hovered,.is-keyboard,.is-touch-active,.is-dragging){--range-stroke:3px;--range-color:var(--range-active)}
.range-preview-clip{position:absolute;inset:0;overflow:hidden;clip-path:inset(var(--range-stroke) round 2px);pointer-events:none;z-index:1}
.range-inspection{position:absolute;top:var(--range-stroke);bottom:var(--range-stroke);background:color-mix(in srgb,var(--ink) 9%,transparent);pointer-events:none}
.range-inspection.is-keyboard{background:color-mix(in srgb,var(--ink) 12%,transparent);box-shadow:inset 0 0 0 1px var(--range-keyline),inset 0 0 0 2.5px var(--range-active)}
.range-handle{opacity:0;pointer-events:none;position:absolute;width:15px;height:21px;min-height:0;border:2px solid var(--range-keyline);background:var(--range-active);border-radius:5px;cursor:ew-resize;padding:0;touch-action:none;box-shadow:0 0 0 1px var(--range-active);z-index:3}
.range-layer:is(.is-hovered,.is-keyboard,.is-touch-active,.is-dragging) .range-handle{opacity:1;pointer-events:auto}
.range-handle:after{content:'';width:1px;height:8px;background:var(--range-keyline);position:absolute;left:5px;top:5px}
.range-start{left:-7px;top:-11px}.range-end{right:-7px;top:calc(var(--tile-height) - 10px)}
.range-handle:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.range-drag-label{position:fixed;z-index:45;pointer-events:none;max-width:310px;background:var(--ink);color:var(--surface);padding:10px 13px;border-radius:8px;box-shadow:0 4px 16px #0002;font-size:11px}
.range-summary{margin:12px 0 20px;padding:18px 20px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);border-radius:12px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.range-summary-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;width:100%;font-size:12px}.range-summary-title>span{color:var(--accent);font-weight:600}.range-summary-title>small{font-size:11px;color:var(--muted)}
.range-summary-times{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted)}
.range-time-button{border-bottom:1px dotted var(--muted);padding:6px 0;font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.range-time-button:hover{color:var(--accent)}.range-summary-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.range-summary-actions .button{font-size:11px;min-height:36px;padding:8px 10px}
.range-summary>p{width:100%;font-size:11px}.precision-label{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted)}
.precision-label select{width:auto;min-height:36px;font-size:11px;padding:6px 9px}
.range-form-endpoints{display:grid;grid-template-columns:1fr 1fr;gap:20px}.range-form-endpoints fieldset{margin:0;padding:0;border:0;min-width:0}.range-form-endpoints legend{margin-bottom:0;color:var(--accent)}
.range-form-endpoints .field-label{margin-top:13px}.range-occurrence select{margin-top:8px;font-size:10px}
.range-local-time{font-size:20px;white-space:normal;line-height:1.5;letter-spacing:-.5px}.range-local-time>span{font-size:13px;color:var(--muted)}
.meeting-preview:not([hidden]){margin:0 0 20px}
.location-context{position:fixed;z-index:50;min-width:190px;padding:7px;border:1px solid var(--line);border-radius:11px;background:var(--surface);box-shadow:0 10px 35px #0002}
.location-context>strong{display:block;font-size:11px;color:var(--muted);padding:7px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.location-context>button{display:block;width:100%;text-align:left;padding:11px 10px;border-radius:6px;font-size:12px}
.location-context>button:hover,.location-context>button:focus-visible{background:var(--surface-2)}
.zone-tooltip{position:fixed;z-index:49;width:min(320px,calc(100vw - 20px));border:1px solid var(--line);background:var(--surface);box-shadow:0 8px 28px #0002;padding:17px 19px;border-radius:12px;color:var(--ink)}
#zone-tooltip-content{display:flex;flex-direction:column;gap:6px;font-size:12px;line-height:1.5}#zone-tooltip-content>strong{font-size:14px}#zone-tooltip-content>code{font-size:11px;color:var(--accent);overflow-wrap:anywhere}#zone-tooltip-content>small{font-size:11px;color:var(--muted)}
.tile-schemes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.scheme-card{border:1px solid var(--line);border-radius:10px;text-align:left;padding:12px;min-width:0;background:var(--surface)}
.scheme-card[aria-checked=true]{border:2px solid var(--accent);padding:11px;background:var(--accent-soft)}
.scheme-name{display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:550}
.scheme-name small{font-size:9px;color:var(--muted);font-weight:400}.scheme-sample{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;margin-top:13px}
.scheme-sample i{font-style:normal;text-align:center;font-size:7px;padding:8px 0;border-radius:2px}
.focus-mode .move-handle,.focus-mode #range-summary{display:none}
@media(max-width:980px){.place-info .place-symbol{display:none}.zone-badge{font-size:8px}.place-info{gap:5px}.range-local-time{font-size:17px}.row-dst-note{font-size:10px}}
@media(max-width:720px){.timeline{--tile-height:32px;margin-top:16px;padding:8px 0}.move-handle{min-width:28px;width:28px;height:44px;margin-left:-6px}.place-info{gap:5px}.place-heading h2{font-size:14px;white-space:normal;line-height:1.3}.zone-badge{font-size:8px}.row-dst-note{grid-column:1/-1;grid-row:3;font-size:11px;margin:8px 0 0;padding:0}.clock-row>.timeline{grid-row:2}.clock-row>.place-info{grid-row:1}.board-actions{flex-wrap:wrap;gap:6px 16px;justify-content:flex-end}.range-summary{padding:16px 14px;gap:10px;margin-top:12px}.range-summary-times{gap:4px;width:100%}.range-time-button{font-size:11px}.range-summary-actions{gap:7px}.range-summary-actions .button{font-size:10px}.range-summary>p{font-size:10px}.range-form-endpoints{gap:12px}.range-form-endpoints input{font-size:11px;padding:9px 7px}.tile-schemes{gap:8px}.scheme-card{padding:10px}.scheme-card[aria-checked=true]{padding:9px}.scheme-name{font-size:12px}.scheme-name small{font-size:9px}.range-local-time{font-size:17px}.face-card>.move-handle{min-width:22px;width:22px;left:3px}.date-number>span{font-size:7px;font-size:clamp(5px,34cqw,8px)}.date-number>strong{font-size:10px;font-size:clamp(7px,50cqw,11px)}}
@media(max-width:365px){.range-form-endpoints{grid-template-columns:1fr}.range-summary-actions .button{font-size:9px;padding:8px}.place-heading h2{font-size:13px}.move-handle{min-width:26px;width:26px}.local-clock .time-display{font-size:23px}}

.range-handle:before{content:"";position:absolute;inset:-5px -7px;border-radius:6px}

.clock-change-note{display:flex;align-items:flex-start;gap:9px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1.55}
#world-clock-changes{margin:12px 26px 0}
#planner-clock-changes{margin:0 0 14px}
.clock-change-note>svg{flex:none;width:14px;height:14px;margin-top:2px;color:var(--green)}
.clock-change-title{font-weight:600;color:var(--ink);margin:0 0 3px}
.clock-change-note ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.clock-change-note li strong{font-weight:600;color:var(--ink);margin-inline-end:4px}
.clock-change-note summary{cursor:pointer;margin-top:4px}
.focus-mode #world-clock-changes{display:none}
.suggestion-times{list-style:none;padding:0;margin-bottom:0;gap:5px 14px;font-size:11px;line-height:1.45}
.suggestion-times>li{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:6px}
.suggestion-status{display:inline-flex;align-items:center;gap:4px;font-size:10px}
.suggestion-status.night{font-weight:600;color:var(--ink)}
.suggestion-status .swatch{flex:none;margin:0}
.suggestion-reasons{display:flex;flex-wrap:wrap;gap:4px 6px;margin-bottom:6px}
.suggestion-reason{padding:2px 6px;border-radius:4px;background:var(--surface-2);color:var(--muted);font-size:10px;font-weight:600;line-height:1.45}
.suggestion-reason:is(.reason-soonest,.reason-night-free){color:var(--green)}
@media(max-width:720px){#world-clock-changes{margin:10px 12px 0}.suggestion-times{gap:5px 10px}}

#clock-rows.reordering-locations { overflow-anchor: none; }
#clock-rows.reordering-locations:not(.clock-faces) { display: flex; flex-direction: column; }
#clock-rows > .reorder-placeholder {
  background: var(--accent-soft);
  outline: 1px dashed var(--accent);
  outline-offset: -6px;
  border-radius: 10px;
}
.reorder-placeholder > * { visibility: hidden; }
#clock-rows > .reorder-keyboard { box-shadow: inset 0 0 0 2px var(--accent); z-index: 1; }
body > .reorder-lift {
  position: fixed;
  margin: 0;
  z-index: 35;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px #0003, 0 0 0 1px var(--accent);
}
body > .reorder-lift.reorder-outside { opacity: .65; box-shadow: 0 8px 24px #0003; }

/* Phone strips stay finger-sized: invisible hit zones extend each tile and the offset trigger without moving layout. */
@media(max-width:480px){.hour-cell:after{content:'';position:absolute;inset:-5px -8px;z-index:-1}.hour-cell{font-size:9px}.hour-cell.half-hour{font-size:8px}.offset{position:relative}.offset:after{content:'';position:absolute;inset:-4px -6px}}