/* The clock face, at twice the panel's 480x320. Everything inside #stage is
   positioned in literal pixels against that fixed box and the whole box is
   scaled to fit the viewport, so the layout is identical on a phone, a tablet
   and a desktop and there are no responsive edge cases to chase. */

:root {
  --font: 'Rubik', 'Heebo', 'Segoe UI', 'Noto Sans Hebrew', system-ui, Arial, sans-serif;

  /* Day palette, straight from src/ui_main.cpp. */
  --bg: #0b0b0b;
  --big: #5dcaa5;
  --fill: #1d9e75;
  --track: #2c2c2a;
  --tick: #fac775;
  --text: #d3d1c7;
  --secondary: #888780;
  --muted: #5f5e5a;
}

/* The panel is the brightest thing in the room at night, so the whole scheme
   cools and darkens at shkia rather than merely dimming. */
:root.night {
  --bg: #07070a;
  --big: #85b7eb;
  --fill: #185fa5;
  --track: #1a1a22;
  --tick: #ba7517;
  --text: #b4b2a9;
  --secondary: #5f5e5a;
  --muted: #5f5e5a;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  transition: background 600ms ease;
  -webkit-font-smoothing: antialiased;
  /* A clock is looked at, not selected or long-press-searched. */
  -webkit-touch-callout: none;
  user-select: none;
}

#fit {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Centred by transform rather than by layout. The stage is 960 px wide whatever
   the viewport is, so on any window narrower than that it overflows its parent
   — and an overflowing grid item is not reliably centred, which clipped the
   right-hand edge on every window that was not exactly 3:2. Anchoring the box
   at the centre and pulling it back by half its own size cannot do that,
   because the percentages are of the element and not of the container. */
#stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 960px;
  height: 640px;
  transform-origin: center center;
  /* JS sets --scale from the viewport on load and on resize. */
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  background: var(--bg);
  transition: background 600ms ease;
}

/* --- top bar ------------------------------------------------------------- */

.top {
  position: absolute;
  top: 16px;
  font-size: 32px;
  line-height: 36px;
  color: var(--muted);
  white-space: nowrap;
}
#top-place {
  right: 20px;
}
#top-date {
  left: 50%;
  transform: translateX(-50%);
}
#top-civil {
  left: 20px;
  font-variant-numeric: tabular-nums;
}

/* --- centre: the reading -------------------------------------------------- */

#big {
  position: absolute;
  top: 88px;
  right: 40px;
  font-size: 288px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -12px;
  color: var(--big);
  /* Without this the whole number shifts every time a digit changes width. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Sits on one line under the number rather than stacked beside it: beside it
   it runs into the stats column, because the number's width changes with its
   content and nothing on the left can then be placed safely. JS centres this
   on the number's own centre. */
#subline {
  position: absolute;
  top: 392px;
  font-size: 32px;
  line-height: 36px;
  white-space: nowrap;
  display: flex;
  gap: 40px;
}
#from {
  color: var(--text);
}
#ordinal {
  color: var(--secondary);
}

/* --- left column: three stacked stats ------------------------------------- */

.stat {
  position: absolute;
  left: 28px;
  text-align: left;
}
.stat-label {
  font-size: 32px;
  line-height: 36px;
  color: var(--muted);
  white-space: nowrap;
}
.stat-value {
  font-size: 32px;
  line-height: 36px;
  margin-top: 4px;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- timeline ------------------------------------------------------------- */

/* Right to left: netz at the right edge, shkia at the left. */
#timeline {
  position: absolute;
  top: 436px;
  left: 0;
  width: 960px;
  height: 204px;
}

#track,
#fill {
  position: absolute;
  top: 76px;
  height: 40px;
}
#track {
  left: 16px;
  width: 928px;
  background: var(--track);
}
#fill {
  background: var(--fill);
}

#hours .hour {
  position: absolute;
  top: 81px;
  font-size: 26px;
  line-height: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#dividers .divider {
  position: absolute;
  top: 76px;
  width: 4px;
  height: 40px;
}

#tick {
  position: absolute;
  top: 72px;
  width: 4px;
  height: 48px;
  background: var(--tick);
}

.marker {
  position: absolute;
  font-size: 30px;
  line-height: 36px;
  white-space: nowrap;
}
.marker.name {
  color: var(--secondary);
}
.marker.time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- settings ------------------------------------------------------------- */

#gear {
  position: absolute;
  left: 10px;
  bottom: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 200ms ease;
}
#gear:hover,
#gear:focus-visible {
  opacity: 1;
}

#settings {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000000cc;
  backdrop-filter: blur(4px);
  z-index: 10;
  font-size: 17px;
}
#settings[hidden] {
  display: none;
}

/* The settings palette is the device's own: kBg, kCard, kText, kMuted, kAccent
   from src/ui_settings.cpp. It deliberately does not follow the day/night swap,
   so opening it never looks like the clock changed mode. */
#settings .panel {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #101014;
  border: 1px solid #1c1c22;
  border-radius: 14px;
  padding: 22px;
  color: #d3d1c7;
}
#settings h1 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
}
#settings .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  background: #1c1c22;
  border: 0;
  border-radius: 8px;
  padding: 13px 15px;
  margin-bottom: 10px;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
}
#settings select {
  background: #101014;
  color: #d3d1c7;
  border: 1px solid #33333c;
  border-radius: 6px;
  padding: 7px 10px;
  font: inherit;
  min-width: 170px;
}
#settings input[type='checkbox'] {
  width: 22px;
  height: 22px;
  accent-color: #5dcaa5;
  cursor: pointer;
}
#settings .hint {
  color: #888780;
  font-size: 14px;
}
#settings .slider {
  display: flex;
  align-items: center;
  gap: 10px;
}
#settings input[type='range'] {
  width: 150px;
  accent-color: #5dcaa5;
  cursor: pointer;
}
#settings .slider .hint {
  min-width: 3.5ch;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
#settings .note {
  color: #888780;
  font-size: 13px;
  line-height: 1.6;
  margin: 14px 2px;
  min-height: 1.6em;
}
#settings .close {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 13px;
  background: #5dcaa5;
  color: #0b0b0b;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}