/* One shared geometry for every time tool, including empty control slots. */
:root {
  --time-height: clamp(140px, calc(100svh - 580px), 300px);
  --clock-size: min(21vw, calc(var(--time-height) * 1.02));
  --side-width: calc(var(--clock-size) * .38);
  --controls-height: 96px;
}
body { overflow-x: hidden; overflow-y: auto; }
body .app-shell { display: flex; flex-direction: column; height: 100svh; min-height: 660px; }
body .app-shell .topbar { flex: 0 0 auto; }
body .app-shell .clock-stage {
  position: relative; inset: auto; flex: 1 0 auto;
  width: 100%; min-height: calc(var(--time-height) + 268px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 12px 24px 16px; transform: none; transition: none;
}
body .app-shell .clock-stage.switching { opacity: 1; transform: none; }
body .app-shell .clock-context {
  flex: 0 0 20px; height: 20px; max-width: 90%; margin: 0 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body .app-shell .time-wrap { flex: 0 0 var(--time-height); height: var(--time-height); width: 100%; }
body .app-shell .main-time {
  --major-font: var(--clock-size);
  display: grid; grid-template-columns: var(--side-width) calc(var(--clock-size) * 2.75) var(--side-width);
  align-items: center; justify-content: center; width: max-content; max-width: 100%;
  height: var(--time-height); line-height: 1; letter-spacing: 0;
}
body .app-shell .main-time .time-major {
  grid-column: 2; grid-row: 1; display: inline-flex; justify-content: center; align-items: center;
  width: 100%; height: var(--time-height); font-size: var(--major-font); line-height: 1; letter-spacing: -.035em;
}
body .app-shell .main-time .time-minor {
  grid-column: 3; grid-row: 1; align-self: center; justify-self: start;
  display: inline-flex; align-items: center; justify-content: flex-start;
  font-size: calc(var(--clock-size) * .22); height: 1.3em; min-width: 0;
  margin: calc(var(--clock-size) * .5) 0 0 .18em; letter-spacing: 0; line-height: 1;
}
body .app-shell .time-minor.empty { visibility: hidden; }
body .app-shell .ampm {
  grid-column: 1; grid-row: 1; justify-self: end; align-self: center;
  display: block; margin: calc(var(--clock-size) * .5) .65em 0 0; font-size: clamp(9px, 1vw, 14px);
}
body .app-shell .main-time .digit:not(.split-digit) { flex: 0 0 .56em; width: .56em; text-align: center; }
body .app-shell .time-major .time-colon { flex: 0 0 .32em; width: .32em; padding: 0 0 .08em; font-size: .75em; }
body .app-shell .time-minor .time-point { width: .25em; }
body[data-skin="classic"] .app-shell .main-time { --major-font: calc(var(--clock-size) * .95); }
body[data-skin="led"] .app-shell .main-time { --major-font: calc(var(--clock-size) * .91); }
body[data-skin="flip"] .app-shell .main-time { --major-font: calc(var(--clock-size) * .82); }
body[data-skin="airport"] .app-shell .main-time { --major-font: calc(var(--clock-size) * .86); }
body[data-skin="flip"] .app-shell .time-major,
body[data-skin="airport"] .app-shell .time-major { letter-spacing: 0; }
body[data-skin="flip"] .app-shell .main-time .digit { flex-basis: .67em; width: .67em; padding: .015em 0; }
body[data-skin="flip"] .app-shell .time-minor .digit { border-radius: .07em; }
body[data-skin="airport"] .app-shell .time-major .time-colon { flex-basis: .2em; width: .2em; font-size: .65em; }
body .app-shell .main-time.long-time { --major-font: calc(var(--clock-size) * .65); }
body[data-skin="flip"] .app-shell .main-time.long-time,
body[data-skin="airport"] .app-shell .main-time.long-time { --major-font: calc(var(--clock-size) * .55); }
body[data-skin="led"] .app-shell .main-time.long-time { --major-font: calc(var(--clock-size) * .60); }
body .app-shell .subline { width: 90%; height: 22px; min-height: 22px; flex: 0 0 22px; line-height: 22px; margin: 8px 0 0; }
body .app-shell .mode-controls {
  flex: 0 0 var(--controls-height); height: var(--controls-height); width: 100%; margin: 4px 0 8px;
  display: grid; grid-template-columns: 1fr; grid-template-rows: 34px 44px; row-gap: 10px;
  align-content: center; justify-items: center;
}
body .app-shell .tool-controls { grid-column: 1; grid-row: 2; height: 44px; }
body .app-shell .timer-control-stack { grid-row: 1 / 3; display: contents; }
body .app-shell .timer-presets { grid-column: 1; grid-row: 1; height: 34px; align-items: center; }
body .app-shell .timer-control-stack .control-row { grid-column: 1; grid-row: 2; height: 44px; }
body .app-shell .primary-control,
body .app-shell .round-control { height: 44px; min-height: 44px; }
body .app-shell .mode-nav { flex: 0 0 56px; height: 56px; padding: 5px; }
body .app-shell .mode-nav button { height: 44px; min-height: 44px; }
body .app-shell .stage-accessories {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 44px; flex: 0 0 44px; width: min(600px,100%); margin-top: 8px;
}
.skin-button { grid-column: 2; grid-row: 1; height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 11px; color: #e8e7d6a8; border-radius: 9px; }
.skin-button:hover { background: #ffffff0b; }
.skin-button .icon { width: 14px; height: 14px; }
.skin-button>span:last-child .icon { width: 11px; height: 11px; opacity: .6; }
body .app-shell .laps-button { grid-column: 3; grid-row: 1; justify-self: start; min-height: 40px; margin: 0 0 0 8px; padding: 0 6px; white-space: nowrap; font-size: 10px; }
body .app-shell .bottombar {
  position: relative; inset: auto; flex: 0 0 auto; margin: 0 42px;
  padding: 6px 0 35px; min-height: 96px;
}
/* Keep the seconds marker above opaque flip cards so it stays visible. */
.activity-dial {
  position: absolute; width: min(400px, calc(var(--time-height) + 105px));
  height: min(400px, calc(var(--time-height) + 105px)); left: 50%; top: 50%;
  transform: translate(-50%,-50%); z-index: 2; pointer-events: none;
  overflow: visible; opacity: 0; transition: opacity .2s;
}
.activity-dial.visible { opacity: 1; }
.activity-track { fill: none; stroke: #edd9b83d; stroke-width: 1.2; }
.activity-remaining { fill: none; stroke: #e5c794b3; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 0; }
.activity-dial[data-mode="timer"] .activity-remaining { opacity: 1; }
.activity-dot { fill: #ffe3ae; stroke: #173543; stroke-width: 1.5; }
.activity-glow { fill: #f9d79d1c; }
.activity-dial[data-running="false"] .activity-dot { fill: #c7ccbd; }
.activity-dial[data-mode="alarm"] .activity-dot { fill: #bed6e6; }
.activity-dial[data-mode="alarm"][data-armed="true"] .activity-dot { fill: #ffe3ae; }
.activity-dial[data-mode="alarm"][data-armed="true"] .activity-glow { fill: #f9d79d30; }

/* The timeline always uses the selected city's real solar schedule. */
.solar-status { --solar-progress: 0%; --solar-color: #e0c498; flex: 0 0 57px; width: min(390px,calc(100% - 48px)); margin: 0 auto; position: relative; z-index: 1; }
.solar-endpoints { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 20px; gap: 9px; font-size: 10px; font-variant-numeric: tabular-nums; color: #f2eddeaa; }
.solar-endpoints>span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.solar-endpoints>span:last-child { justify-self: end; }
.solar-endpoints .icon { width: 13px; height: 13px; color: var(--solar-color); }
.solar-endpoints .solar-tag { font-size: 8px; color: #e8d6ada6; }
.solar-track { position: relative; height: 3px; margin: 8px 4px 10px; background: #ece7d31c; border-radius: 3px; }
.solar-fill { position: absolute; inset: 0 auto 0 0; width: var(--solar-progress); background: linear-gradient(90deg,#e0c49850,var(--solar-color)); border-radius: inherit; }
.solar-marker { position: absolute; left: var(--solar-progress); top: 50%; transform: translate(-50%,-50%); width: 6px; height: 6px; background: var(--solar-color); border-radius: 50%; box-shadow: 0 0 9px #e3c19433; }
.solar-caption { display: flex; align-items: center; justify-content: space-between; height: 16px; color: #efe6d5a8; font-size: 10px; font-variant-numeric: tabular-nums; }
.solar-caption>span:last-child { font-size: 9px; color: #e8eadb73; }
.solar-status[data-period="night"] { --solar-color: #afc4d9; }
.solar-status[data-phase="dawn"], .solar-status[data-phase="dusk"] { --solar-color: #e4bb92; }
.solar-status.unavailable .solar-marker { display: none; }

/* A discoverable picker with quiet, representative previews. */
.skin-sheet { width: 620px; }
.skin-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.skin-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 1px solid #ffffff20; background: #0a202c35; border-radius: 12px; padding: 18px 10px 14px; min-height: 112px; font-size: 11px; color: #dbe2d7; }
.skin-card.selected { border-color: #e7d1a8; background: #d4bd8610; box-shadow: inset 0 0 0 1px #e7d1a824; }
.skin-preview { display: inline-flex; align-items: center; justify-content: center; height: 48px; font-size: 39px; font-family: "Helvetica Neue",Arial,sans-serif; font-weight: 200; font-variant-numeric: tabular-nums; line-height: 1; }
.skin-preview .digit { width: .56em; }
.skin-card .skin-preview .digit:not(.split-digit) { display: inline-block; position: static; flex: 0 0 auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none; }
.skin-card .skin-preview .digit:not(.split-digit)::after { display: none; }
.skin-preview .time-colon { font-size: .72em; margin: 0 .04em .04em; }
[data-skin-preview="classic"] { font-weight: 650; }
[data-skin-preview="led"] { font-family: "Courier New",monospace; font-size: 35px; color: #e8d4a9; text-shadow: 0 0 15px #ecd5a840; }
[data-skin-preview="flip"] { font-size: 31px; gap: .04em; font-weight: 550; }
[data-skin-preview="airport"] { font-size: 31px; gap: .045em; font-weight: 600; }
.skin-card [data-skin-preview="airport"] .airport-digit { position: relative; display: inline-block; width: .67em; min-width: .67em; height: 1.13em; padding: 0; border: 1px solid #d7d7c426; border-radius: .04em; background: #141e27; box-shadow: 0 .035em .065em #0004; isolation: isolate; }
#skin-options { flex-wrap: wrap; }
#skin-options button { white-space: nowrap; padding: 0 7px; }

@media (min-width: 1800px) {
  :root { --time-height: 340px; }
  body .app-shell .bottombar { margin: 0 60px; padding-bottom: 45px; }
}
@media (max-width: 1000px) { body .app-shell .bottombar { margin: 0 28px; } }
@media (max-width: 720px) {
  :root { --time-height: clamp(115px,29vw,178px); --clock-size: 25vw; --controls-height: 96px; }
  .activity-dial { width: calc(var(--time-height) + 65px); height: calc(var(--time-height) + 65px); }
  body .app-shell { min-height: 670px; }
  body .app-shell .clock-stage { padding: 10px 17px 13px; }
  body .app-shell .clock-context { font-size: 8px; margin-bottom: 4px; }
  body .app-shell .subline { font-size: 10px; }
  body .app-shell .bottombar { margin: 0 20px; min-height: 88px; padding-bottom: 31px; }
  body .app-shell .stage-accessories { margin-top: 5px; }
  .skin-button { font-size: 10px; gap: 6px; }
  .solar-status { flex-basis: 57px; width: min(350px,calc(100% - 48px)); }
  .solar-endpoints { font-size: 9px; gap: 4px; }
  .solar-endpoints>span { gap: 4px; }
  .solar-endpoints .solar-tag { font-size: 7px; }
  .solar-caption { font-size: 9px; }
  .solar-caption>span:last-child { font-size: 8px; }
  .skin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .skin-card { min-height: 105px; padding: 13px 8px; }
  .skin-sheet { width: min(440px,calc(100vw - 32px)); }
  .celestial-track { inset: 24% 6% auto; height: 9%; }
}
@media (max-width: 720px) and (max-height: 700px) {
  :root { --time-height: 88px; --clock-size: min(24vw,96px); --controls-height: 88px; }
  body .app-shell { min-height: 568px; }
  body .app-shell .topbar { padding: 10px 14px; row-gap: 4px; }
  body .app-shell .city-button, body .app-shell .weather-button { height: 34px; }
  body .app-shell .clock-stage { min-height: calc(var(--time-height) + 248px); padding-top: 7px; padding-bottom: 6px; }
  body .app-shell .clock-context { margin-bottom: 3px; }
  body .app-shell .mode-controls { margin-bottom: 4px; row-gap: 5px; }
  body .app-shell .stage-accessories { height: 38px; flex-basis: 38px; }
  body .app-shell .bottombar { margin: 0 15px; min-height: 64px; padding-top: 0; padding-bottom: 21px; }
  body .app-shell .theme-thumbnail { height: 28px; }
  body .app-shell .weather-credit { bottom: 8px; }
  body .app-shell .mode-nav { flex-basis: 52px; height: 52px; padding: 3px; }
  .solar-status { flex-basis: 51px; }
  .solar-track { margin-top: 6px; margin-bottom: 8px; }
  .solar-caption { height: 14px; }
  .celestial-track { top: 30%; height: 5%; left: 4%; right: 4%; }
}
@media (max-width: 370px) {
  .skin-button { font-size: 9px; padding: 0 6px; gap: 5px; }
  body .app-shell .laps-button { font-size: 8px; margin-left: 2px; padding: 0 2px; }
  body .app-shell .bottombar { margin-left: 14px; margin-right: 14px; }
  .solar-status { width: calc(100% - 36px); }
  .solar-endpoints .solar-tag { max-width: 65px; overflow: hidden; }
  .skin-preview { font-size: 34px; }
  [data-skin-preview="airport"], [data-skin-preview="flip"] { font-size: 29px; }
}
@media (max-height: 630px) and (min-width: 721px) {
  :root { --time-height: 130px; --controls-height: 88px; }
  body .app-shell { min-height: 620px; }
  body .app-shell .bottombar { min-height: 74px; padding-bottom: 28px; }
}
body[data-motion="reduced"] .digit.changed,
body[data-motion="off"] .digit.changed { animation: none; }