/* The day/night symbol crosses a full-width lane, above every text label. */
.solar-status {
  --celestial-size: 44px;
  --celestial-lane-height: 52px;
  --celestial-arc: 4px;
  display: grid; grid-template-columns: minmax(0,1fr);
  grid-template-rows: var(--celestial-lane-height) 57px; gap: 0;
  align-items: start; width: 100%; flex: 0 0 109px; margin: 0;
}
.solar-copy { min-width: 0; width: min(390px,calc(100% - 48px)); justify-self: center; }
.solar-status .celestial-track {
  position: relative; inset: auto; width: calc(100% - 24px);
  height: var(--celestial-lane-height); margin: 0 12px;
  min-width: 0; pointer-events: none; isolation: isolate; overflow: visible;
}
.solar-status .celestial {
  position: absolute; width: var(--celestial-size); height: var(--celestial-size);
  top: calc(50% - var(--celestial-size) / 2); left: 0;
  background: none; border-radius: 0; box-shadow: none;
  transform: none; scale: 1; rotate: none; translate: none; clip-path: none; filter: none;
  transition: left 3s linear,top 3s linear,opacity .8s;
}
.solar-status .celestial svg { display: block; width: 100%; height: 100%; overflow: visible; }
.celestial-sun,.celestial-moon { opacity: 0; transition: opacity .8s; }
.celestial-sun { fill: #ffe0a0; stroke: #ffedc5; stroke-width: .8; }
.celestial-moon { fill: #fff1c2; stroke: #fff7df; stroke-width: .5; }
.celestial.sun .celestial-sun,.celestial.moon .celestial-moon { opacity: 1; }
.solar-status .celestial.sun svg { filter: drop-shadow(0 1px 2px #142e4755) drop-shadow(0 0 9px #ffd58d55); }
.solar-status .celestial.moon svg { filter: drop-shadow(0 1px 2px #06162499) drop-shadow(0 0 8px #fff2c233); }
body[data-motion="reduced"] .solar-status .celestial,
body[data-motion="off"] .solar-status .celestial { transition: none; }

/* English labels keep identical columns when the selected weight changes. */
body .app-shell .mode-nav {
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  width: min(460px,100%);
}
body .app-shell .mode-nav button { min-width: 0; padding-left: 7px; padding-right: 7px; }

/* The expanding catalogue scrolls independently of search and city selection. */
.theme-sheet { width: 820px; }
.theme-sheet[open] { display: flex; flex-direction: column; height: min(820px,calc(100svh - 48px)); max-height: calc(100svh - 48px); }
.theme-sheet .sheet-header { flex: 0 0 auto; margin-bottom: 18px; }
.theme-search {
  display: flex; align-items: center; gap: 10px; flex: 0 0 44px;
  min-height: 44px; padding: 0 13px; border: 1px solid #dfdfcb2e;
  background: #09233055; border-radius: 10px; color: #c2cecb;
}
.theme-search .icon { width: 17px; height: 17px; }
.theme-search input {
  border: 0; background: transparent; color: #f4eddc; width: 100%; min-width: 0;
  height: 42px; padding: 0; font-size: 12px; outline: none;
}
.theme-search input::placeholder { color: #b8cac2a3; }
.theme-search:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-regions {
  display: flex; align-items: center; gap: 6px; overflow-x: auto; flex: 0 0 auto;
  padding: 3px 1px; margin: 12px 0; scrollbar-width: thin;
}
.theme-regions button {
  flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: 20px;
  color: #c2d1ca; font-size: 11px; border: 1px solid #ffffff17;
}
.theme-regions button[aria-pressed="true"] { background: #e4d3af; color: #1c3a45; border-color: #e4d3af; font-weight: 600; }
.location-detection {
  display: flex; align-items: center; gap: 12px; flex: 0 0 34px;
  min-height: 34px; margin: -2px 0 7px;
}
.location-detection .inline-button {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto; min-height: 32px; margin: 0; padding: 4px 0;
  font-size: 11px; color: #eed3a5;
}
.location-detection .inline-button .icon { width: 14px; height: 14px; }
.location-detection .inline-button:disabled { opacity: .65; cursor: wait; }
.location-status {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 10px; color: #b8c9c3;
}
.theme-selection { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex: 0 0 auto; padding: 4px 1px 10px; }
.theme-selection label { font-size: 11px; color: #d9dfd2; }
.theme-selection select { max-width: 55%; min-width: 130px; }
.theme-grid {
  flex: 1 1 auto; min-height: 100px; overflow-y: auto; overscroll-behavior: contain;
  align-content: start; grid-auto-rows: max-content; margin: 4px -3px 0; padding: 3px;
  scrollbar-width: thin; scrollbar-color: #6a7a76 transparent;
}
.theme-card { min-height: 0; }
.theme-card-art { height: 100px; }
.theme-card-art svg { --window-opacity: .55; }
.theme-card:nth-child(6n+1) .theme-card-art { background: linear-gradient(155deg,#345467,#9d9c86); }
.theme-card:nth-child(6n+2) .theme-card-art { background: linear-gradient(150deg,#614b65,#c29987); }
.theme-card:nth-child(6n+3) .theme-card-art { background: linear-gradient(150deg,#304554,#a7a89a); }
.theme-card:nth-child(6n+4) .theme-card-art { background: linear-gradient(150deg,#485b5d,#a1aca3); }
.theme-card:nth-child(6n+5) .theme-card-art { background: linear-gradient(150deg,#5e5a60,#c6a494); }
.theme-card:nth-child(6n) .theme-card-art { background: linear-gradient(150deg,#347189,#b4bb9d); }
.theme-card-text strong { overflow-wrap: anywhere; }
.theme-card-text small { overflow-wrap: anywhere; line-height: 1.35; }
.theme-empty { grid-column: 1 / -1; margin: 28px 0; text-align: center; color: #b9c9c3; font-size: 12px; }

@media (max-width: 720px) {
  body .app-shell .mode-nav { width: min(360px,100%); }
  body .app-shell .mode-nav button { padding: 0 5px; font-size: 10px; gap: 5px; }
  body .app-shell .mode-nav button .icon { width: 15px; height: 15px; }
  .solar-status {
    --celestial-size: 36px; --celestial-lane-height: 44px;
    width: 100%; grid-template-rows: var(--celestial-lane-height) 51px; flex-basis: 95px;
  }
  .solar-copy { width: min(350px,calc(100% - 32px)); }
  .solar-status .celestial-track { width: calc(100% - 16px); margin: 0 8px; }
  .solar-endpoints { font-size: 9px; gap: 3px; }
  .solar-track { margin-top: 6px; margin-bottom: 8px; }
  .solar-caption { height: 14px; }
  .solar-endpoints>span { gap: 3px; }
  .solar-endpoints .icon { width: 11px; height: 11px; }
  .solar-endpoints .solar-tag { max-width: 65px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
  .solar-caption { font-size: 8px; }
  .theme-sheet .sheet-header { margin-bottom: 13px; }
  .theme-regions { gap: 5px; margin: 8px 0; }
  .theme-regions button { padding: 0 10px; font-size: 10px; }
  .location-detection { gap: 9px; margin-bottom: 4px; }
  .location-detection .inline-button { font-size: 10px; }
  .location-status { font-size: 9px; }
  .theme-selection { gap: 8px; padding-bottom: 7px; }
  .theme-selection label { font-size: 10px; }
  .theme-selection select { min-width: 100px; max-width: 52%; font-size: 11px; }
  .theme-card-art { height: 80px; }
  .theme-card-text { padding: 9px; }
  .theme-card-text strong { font-size: 11px; }
  .theme-card-text small { font-size: 8px; }
  body .app-shell .bottombar { grid-template-columns: minmax(0,1fr) auto; }
  .theme-button { max-width: 100%; min-width: 0; }
  .theme-button > span:nth-child(2) { min-width: 0; }
  .theme-button strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .theme-thumbnail { flex: 0 0 auto; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .solar-status {
    --celestial-size: 30px; --celestial-lane-height: 34px; --celestial-arc: 2px;
    grid-template-rows: var(--celestial-lane-height) 46px; flex-basis: 80px;
  }
  .solar-endpoints { height: 18px; }
  .solar-track { margin-top: 5px; margin-bottom: 6px; }
  /* Reclaim space equally in every mode; the clock and main tap targets retain their size. */
  body .app-shell .clock-stage { min-height: calc(var(--time-height) + 220px); padding-top: 5px; padding-bottom: 5px; }
  body .app-shell .clock-context { height: 18px; flex-basis: 18px; }
  body .app-shell .subline { height: 20px; min-height: 20px; flex-basis: 20px; line-height: 20px; margin-top: 6px; }
  body .app-shell .mode-controls {
    height: 78px; flex-basis: 78px; grid-template-rows: 26px 44px;
    row-gap: 8px; margin-top: 2px; margin-bottom: 2px;
  }
  body .app-shell .timer-presets { height: 26px; }
  body .app-shell .timer-presets button { height: 26px; min-height: 26px; }
  body .app-shell .stage-accessories { height: 34px; flex-basis: 34px; margin-top: 3px; }
  .skin-button { height: 34px; }
  body .app-shell .laps-button { min-height: 34px; }
}
@media (max-width: 370px) {
  .solar-copy { width: calc(100% - 32px); }
  .solar-endpoints .solar-tag { max-width: 65px; font-size: 7px; }
  body .app-shell .mode-nav button { padding: 0 2px; font-size: 9px; gap: 4px; }
  body .app-shell .mode-nav button .icon { width: 14px; height: 14px; }
  .theme-regions button { padding: 0 8px; }
}

/* The wider celestial lane fits shorter desktop windows without shrinking the clock. */
@media (min-width: 721px) and (min-height: 631px) and (max-height: 820px) {
  body .app-shell .topbar { padding-top: 15px; padding-bottom: 15px; }
}