:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --label: #6f747a;
  --count: #494949;
  --accent: #007ea6;
  --border: #8b9096;
  --input-bg: #ffffff;
  --input-text: #494949;
  --on-accent: #ffffff;
  --focus: #005f80;
  --layer-dropdown: 10;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #222222;
    --label: #898f97;
    --count: #b0b5b9;
    --border: #6b7176;
    --input-bg: #2b2b2b;
    --input-text: #b0b5b9;
    --focus: #5cc2ea;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--bg);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Avenir", "helvetica neue", helvetica, arial, sans-serif;
}

/* Time-of-day ambient light: a soft radial glow whose colour, intensity and
   position drift with the real hour. Rendered on a <canvas> (see updateAmbient)
   with the pixels dithered, so it stays ring-free in every engine. */
#ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

#app {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 100%;
  padding: 1.5rem;
}

/* These forms can grow beyond a short viewport. Keep them centred when they
   fit, but let the body expand from the top when they need to scroll. */
body.screen-setup,
body.screen-settings {
  height: auto;
  min-height: 100%;
}

/* Counter screen: break dead-centre for an editorial lower-left composition.
   Setup and settings keep the default centred layout. */
body.screen-counter {
  align-items: stretch;
  justify-content: flex-end;
}

body.screen-counter #app {
  width: 100%;
  text-align: start;
  padding: clamp(1.5rem, 6vw, 5rem) clamp(1.5rem, 8vw, 7rem)
    clamp(2.5rem, 13vh, 8rem);
}

.counter {
  display: inline-block;
  max-width: 100%;
  text-align: start;
  animation: rise 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.5em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.age-label {
  color: var(--label);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1;
  margin: 0 0 0.35rem;
  text-transform: uppercase;
}

.screen-title {
  color: var(--count);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 1rem;
  text-align: center;
  text-wrap: balance;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.count {
  color: var(--count);
  margin: 0;
  font-size: clamp(2.75rem, 13vw, 6rem);
  line-height: 1;
  font-weight: 600;
  font-family: var(--num-font, inherit);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  unicode-bidi: isolate;
  cursor: pointer;
  user-select: none;
  border-radius: 0.5rem;
}

.count:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 8px;
}

/* Discoverability hint for the click-to-cycle affordance: hidden until the
   number is hovered or focused, so it never competes with the count itself. */
.unit-hint {
  margin: 0.4rem 0 0;
  color: var(--label);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.count:hover ~ .unit-hint,
.count:focus-visible ~ .unit-hint {
  opacity: 1;
}

.unit-hint + .meta {
  margin-top: 0.6rem;
}

.count .sep {
  color: var(--accent);
}

.count .fraction {
  font-family:
    ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.4em;
  font-weight: 500;
  vertical-align: 0.82em;
  letter-spacing: 0.01em;
  color: var(--count);
}

/* Calendar-age breakdown: full-size figures with small superscript units
   (36 yr 3 mo 24 d), matching the counter's precise, tabular aesthetic. */
.count .cal-num {
  color: var(--count);
}

.count .cal-part {
  display: inline-block;
  white-space: nowrap;
}

.count .cal-part + .cal-part {
  margin-inline-start: 0.22em;
}

.count .cal-unit {
  font-size: 0.32em;
  font-weight: 500;
  vertical-align: 0.95em;
  letter-spacing: 0.02em;
  color: var(--label);
  margin-inline: 0.08em;
}

/* Keep each localized quantity intact, but let the four-part birthday readout
   reflow as a unit-aware line when a narrow canvas cannot hold it. */
.count.birthday-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(2.25rem, 11vw, 5.5rem);
  line-height: 1.08;
  row-gap: 0.18em;
}

/* Life-elapsed meter + editorial anchor line under the number. */
.meta {
  margin-top: 1.15rem;
}

.progress {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--label) 28%, transparent);
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--accent);
  border-radius: inherit;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

:dir(rtl) .progress-fill {
  transform-origin: right center;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 0.55rem;
  color: var(--label);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meta-row .pct {
  text-align: end;
  white-space: nowrap;
}

/* Optional editorial line under the meter (Settings → Display → Reflection). */
.reflection {
  margin-top: 1.1rem;
  color: var(--label);
  font-size: 0.82rem;
  font-style: italic;
  letter-spacing: 0.01em;
  max-width: 24rem;
}

label {
  display: block;
}

input,
button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.375rem 0.75rem;
  font-size: 1.5rem;
  font-family: inherit;
  appearance: none;
}

select {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

input[type="date"],
input[type="time"] {
  margin-inline-end: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background-color: var(--input-bg);
  color: var(--input-text);
}

button {
  display: block;
  cursor: pointer;
  color: var(--on-accent);
  border: none;
  border-radius: 0.25rem;
  background-color: var(--accent);
}

button:not(.gear):not(.preset):not(.switch):not(:disabled):hover {
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

button:not(.gear):not(.preset):not(.switch):not(:disabled):active {
  text-decoration-thickness: 2px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

:where(button, input, select):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

footer {
  padding-top: 0.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* Setup: the birthplace time-zone picker sits under the date/time row so the
   birth instant is anchored to where you were born, not where you are now. */
.setup-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 0.5rem;
}

.setup-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 22rem;
  margin: 1rem auto 0;
  text-align: start;
}

.setup-language {
  width: min(22rem, 100%);
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.setup-label {
  color: var(--label);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.setup-field select {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--input-text);
  background-color: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  cursor: pointer;
}

.search-select {
  width: 100%;
  min-width: 0;
}

.search-select-input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.55rem 0.75rem;
  overflow: hidden;
  color: var(--input-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
}

.search-select-input[dir="ltr"] {
  text-align: left;
  unicode-bidi: isolate;
}

.search-select-input::placeholder {
  color: var(--input-text);
  opacity: 1;
}

.search-select-input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.search-select-popup {
  position: fixed;
  inset: auto;
  z-index: var(--layer-dropdown);
  min-width: 0;
  max-width: calc(100vw - 1rem);
  margin: 0;
  padding: 0.25rem;
  overflow: hidden;
  color: var(--input-text);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0.25rem;
}

.search-select-listbox {
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-select-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.25rem;
  cursor: default;
}

.search-select-option:hover,
.search-select-option.is-active {
  background: color-mix(in srgb, var(--label) 16%, transparent);
}

.search-select-option:active {
  background: color-mix(in srgb, var(--label) 24%, transparent);
}

.search-select-option[aria-selected="true"] {
  color: var(--count);
  font-weight: 600;
}

.search-select-option-label {
  min-width: 0;
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-select-option-meta {
  flex: none;
  margin-inline-start: auto;
  color: var(--label);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.search-select-empty {
  margin: 0;
  padding: 0.75rem 0.65rem;
  color: var(--label);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: start;
}

.hint {
  margin: 0;
  color: var(--label);
  font-size: 0.8rem;
  line-height: 1.45;
}

.screen-subtitle {
  margin: -0.5rem 0 1.25rem;
  color: var(--label);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

.setup-hint {
  margin-top: 0.5rem;
  text-align: center;
}

.field-error {
  margin: 0.5rem 0 0;
  color: var(--count);
  font-size: 0.8rem;
  line-height: 1.45;
  text-align: center;
}

/* Settings */
.gear {
  position: fixed;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--label);
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.gear:hover {
  color: var(--count);
  background-color: color-mix(in srgb, var(--label) 20%, transparent);
}

.gear svg {
  display: block;
}

/* Top-right control cluster, shared by the counter and life-in-weeks screens.
   The gear keeps the exact corner; the button to its left is a same-slot toggle
   (opens the weeks view from the counter, returns from it on the weeks screen),
   so you always leave from where you entered. Buttons go static inside the
   fixed cluster. */
.corner-controls {
  position: fixed;
  top: 0.75rem;
  inset-inline-end: 0.75rem;
  display: flex;
  gap: 0.25rem;
}

.corner-controls .gear {
  position: static;
}

.settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(28rem, calc(100vw - 2rem));
  min-width: 0;
  text-align: start;
}

.settings .life-table-field {
  width: 100%;
  max-width: none;
  margin-top: 0;
}

.settings h1 {
  text-align: center;
  margin: 0 0 0.5rem;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}

.row label {
  color: var(--label);
  font-size: 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.row input[type="color"] {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background: none;
  cursor: pointer;
}

.row input[type="number"] {
  width: 5rem;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  text-align: end;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background-color: var(--input-bg);
  color: var(--input-text);
}

.row select {
  max-width: min(15rem, 58vw);
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 0.25rem;
  background-color: var(--input-bg);
  color: var(--input-text);
  cursor: pointer;
}

.settings-label {
  margin: 0.4rem 0 0;
  color: var(--label);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  width: 3.25rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.preset:hover {
  transform: translateY(-1px);
}

/* The active preset carries a persistent ring; keyboard focus overrides it
   (equal specificity, later rule wins) so focus is never masked. */
.preset.is-active {
  outline: 2px solid var(--count);
  outline-offset: 2px;
}

.preset:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.preset i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.settings-hint {
  margin: -0.35rem 0 0;
  color: var(--label);
  font-size: 0.78rem;
  line-height: 1.4;
}

.contrast-note {
  margin: -0.35rem 0 0;
  color: var(--count);
  font-size: 0.78rem;
  line-height: 1.4;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.25rem;
}

.actions button {
  font-size: 1rem;
}

.btn-secondary {
  color: var(--label);
  background: transparent;
  border: 1px solid var(--border);
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.btn-secondary:hover {
  color: var(--count);
  border-color: var(--count);
}

/* Display and sync sections share the same segmented and switch vocabulary. */
.segment {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  overflow: hidden;
}

.segment button {
  font-size: 0.9rem;
  padding: 0.3rem 0.7rem;
  color: var(--label);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.segment button[aria-pressed="true"] {
  color: var(--on-accent);
  background: var(--accent);
}

.segment button.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.segment button.grotesk {
  font-family: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}

.switch {
  position: relative;
  flex: 0 0 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.6rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--label) 18%, transparent);
  transform: translate(-50%, -50%);
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.switch[aria-checked="true"]::before {
  background: var(--accent);
  border-color: var(--accent);
}

.switch:hover::before {
  border-color: var(--count);
}

.switch::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 0.25rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  transition: inset-inline-start 0.15s ease;
}

.switch[aria-checked="true"]::after {
  inset-inline-start: calc(100% - 1.31rem);
}

.switch:active::before {
  border-color: var(--count);
}

.switch[aria-checked="true"]:active::before {
  background: color-mix(in srgb, var(--accent) 85%, var(--count));
}

.switch:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.switch:disabled::before {
  border-color: var(--border);
}

.sync-option {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sync-option .row {
  min-height: 2.75rem;
}

.sync-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
}

.sync-status {
  margin: 0;
  color: var(--label);
  font-size: 0.78rem;
  line-height: 1.4;
}

.sync-status.is-error {
  color: var(--count);
}

#retry-sync {
  flex: 0 0 auto;
  min-height: 2.75rem;
  font-size: 0.9rem;
}

:dir(rtl) #weeks-back {
  transform: scaleX(-1);
}

:is(
    :lang(ar),
    :lang(am),
    :lang(bn),
    :lang(fa),
    :lang(gu),
    :lang(he),
    :lang(hi),
    :lang(ja),
    :lang(kn),
    :lang(ko),
    :lang(ml),
    :lang(mr),
    :lang(ta),
    :lang(te),
    :lang(th),
    :lang(zh)
  )
  :is(
    .age-label,
    .unit-hint,
    .meta-row,
    .setup-label,
    .settings-label,
    .weeks-legend
  ) {
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 360px) {
  #app {
    padding-inline: 1rem;
  }

  .setup-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    max-width: 22rem;
  }

  .setup-row :is(input[type="date"], input[type="time"]) {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    margin-inline-end: 0;
    font-size: 1rem;
  }

  .row {
    gap: 0.65rem;
  }

  .segment button {
    padding-inline: 0.5rem;
  }

  .meta-row {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .meta-row .pct {
    white-space: normal;
  }

  .weeks-legend {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.5rem;
  }
}

/* Life in weeks: sequential seven-day cells in fixed 52-cell bands, with a
   restrained age gutter that does not imply an exact birthday boundary. */
body.screen-weeks {
  justify-content: flex-start;
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  padding: 2.5rem 0;
}

.weeks-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem;
  width: 100%;
}

.weeks-head {
  text-align: center;
}

.weeks-head .age-label {
  text-align: center;
}

.weeks-plot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(96vw, 660px);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.weeks-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 620px);
  align-items: center;
  gap: 0.45rem;
}

.weeks-band {
  display: grid;
  grid-template-columns: repeat(52, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1px, 0.3vw, 2px);
  min-width: 0;
}

.age-tick {
  color: color-mix(in srgb, var(--label) 66%, transparent);
  font-size: 0.58rem;
  line-height: 1;
  text-align: end;
}

.age-tick.decade-label {
  color: var(--label);
  font-weight: 600;
}

.weeks-band i {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 1px;
}

.weeks-band i.lived {
  background: color-mix(in srgb, var(--count) 62%, var(--bg));
}

.weeks-band i.now {
  background: var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 1px;
  z-index: 1;
}

.weeks-band i.future {
  background: color-mix(in srgb, var(--label) 20%, transparent);
}

.weeks-legend {
  display: flex;
  gap: 1.2rem;
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weeks-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.weeks-legend i {
  position: relative;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 1px;
}

.weeks-legend i.lived {
  background: color-mix(in srgb, var(--count) 62%, var(--bg));
}

.weeks-legend i.now {
  background: var(--accent);
}

.weeks-legend i.future {
  background: color-mix(in srgb, var(--label) 20%, transparent);
}

@media (max-width: 360px) {
  .weeks-wrap {
    padding-inline: 0.75rem;
  }

  .weeks-plot {
    width: 100%;
  }

  .weeks-row {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.3rem;
  }

  .age-tick.five-year-label {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}