:root {
  --ink: #12100d;
  --ink-raised: #1b1814;
  --line: #2e2a24;
  --paper: #f1e9da;
  --muted: #8f8676;
  --accent: #ff5a36;
  --glow: #2a2118;
  --night: #23201b;
  --dusk: #6b4a2b;
  --noon: #c9a36a;
  --grain: 0.06;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}

/* Temas: só trocam as cores, o desenho é o mesmo */
:root[data-theme="papel"] {
  --ink: #f3ede2;
  --ink-raised: #e9e0d0;
  --line: #d3c8b5;
  --paper: #1c1915;
  --muted: #675e52;
  --accent: #c2391a;
  --glow: #fffaf1;
  --night: #b6a991;
  --dusk: #b98a55;
  --noon: #e9c98f;
  --grain: 0.04;
  color-scheme: light;
}

:root[data-theme="oceano"] {
  --ink: #0b1420;
  --ink-raised: #12202f;
  --line: #22344a;
  --paper: #e4edf4;
  --muted: #8aa0b4;
  --accent: #5fd8bd;
  --glow: #13304a;
  --night: #15263a;
  --dusk: #2e5b7a;
  --noon: #8fc6d8;
}

/* Alto contraste: vale por cima de qualquer tema */
:root[data-contrast="alto"] {
  --ink: #000;
  --ink-raised: #1a1a1a;
  --line: #fff;
  --paper: #fff;
  --muted: #fff;
  --accent: #ffd400;
  --glow: #000;
  --night: #444;
  --dusk: #999;
  --noon: #fff;
  --grain: 0;
  color-scheme: dark;
}

/* Tamanho do texto: tudo abaixo é em rem, então escala junto */
html {
  font-size: 100%;
}

:root[data-text="grande"] {
  font-size: 118.75%;
}

:root[data-text="enorme"],
:root[data-contrast="alto"][data-text="grande"] {
  font-size: 137.5%;
}

:root[data-contrast="alto"][data-text="normal"] {
  font-size: 118.75%;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 80% at 70% 0%, var(--glow) 0%, transparent 60%),
    var(--ink);
  background-attachment: fixed;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.875rem;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Grão sutil por cima de tudo */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 500;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

a {
  color: inherit;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

/* Cabeçalho */
.masthead {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
  color: var(--muted);
}

.brand {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.375rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
}

.masthead-meta {
  margin-left: auto;
}

.settings-toggle {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.settings-toggle:hover,
.settings-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

/* Painel de ajustes */
.settings {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 20px 48px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--line);
}

.settings[hidden] {
  display: none;
}

.setting {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.setting legend {
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.choice input,
.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.choice span {
  display: inline-block;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  cursor: pointer;
}

.choice span:hover {
  border-color: var(--muted);
}

.choice input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--ink);
}

.choice input:focus-visible + span,
.switch input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.switch span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  cursor: pointer;
}

/* O "trilho" do interruptor */
.switch span::before {
  content: "";
  flex: none;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  border: 1px solid var(--muted);
  background:
    radial-gradient(circle at 9px 50%, var(--muted) 5px, transparent 5.5px);
  transition: background 0.2s ease;
}

.switch input:checked + span::before {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 24px 50%, var(--ink) 5px, transparent 5.5px),
    var(--accent);
}

.setting-help {
  max-width: 34ch;
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Destaque principal */
.hero {
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding: clamp(40px, 8vh, 88px) 0;
}

.dial svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tick {
  stroke: var(--muted);
  stroke-width: 1;
}

.tick.major {
  stroke: var(--paper);
  stroke-width: 2.5;
}

.hand {
  stroke-linecap: round;
}

.hand-hour {
  stroke: var(--paper);
  stroke-width: 5;
}

.hand-minute {
  stroke: var(--paper);
  stroke-width: 3;
}

.hand-second {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.pivot {
  fill: var(--accent);
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--muted);
}

#city-name {
  color: var(--accent);
}

.dot {
  margin: 0 6px;
}

/* Hora + clima lado a lado; o clima desce quando falta espaço */
.now {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px clamp(20px, 3vw, 40px);
}

.time {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(88px, 15vw, 196px);
  line-height: 0.85;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.seconds {
  font-style: italic;
  color: var(--muted);
  font-size: 0.42em;
  letter-spacing: 0;
  margin-left: 0.08em;
}

.weather {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 4px 0 6px clamp(16px, 2vw, 24px);
  border-left: 1px solid var(--line);
  flex: 0 1 15rem;
  min-width: 11rem;
}

.weather[hidden] {
  display: none;
}

.weather-icon {
  grid-row: 1;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--accent);
}

.weather-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.weather-temp {
  grid-row: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: 3.5rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.weather-desc,
.weather-extra {
  grid-column: 1 / -1;
  margin: 0;
}

.weather-desc {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
}

.weather-desc::first-letter {
  text-transform: uppercase;
}

.weather-extra {
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.weather[data-state="loading"] .weather-temp,
.weather[data-state="error"] .weather-temp {
  color: var(--muted);
}

.date {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: var(--paper);
  opacity: 0.85;
}

.date::first-letter {
  text-transform: uppercase;
}

.speak {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.speak[hidden] {
  display: none;
}

.speak:hover {
  border-color: var(--accent);
}

.speak svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Lista de fusos */
.zones-title {
  margin: 0 0 12px;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.zones-title:focus {
  outline: none;
}

.zone-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.zone {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1.5fr 5rem auto;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 16px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.zone:hover {
  background: var(--ink-raised);
}

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

.zone[aria-checked="true"] {
  background: var(--ink-raised);
  box-shadow: inset 3px 0 0 var(--accent);
}

.zone-city {
  font-family: var(--serif);
  font-size: 1.625rem;
  line-height: 1;
}

.zone-offset {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

/* Faixa de 24h: mostra onde o dia está naquele fuso */
.zone-day {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--night) 0%,
    var(--night) 22%,
    var(--dusk) 27%,
    var(--noon) 50%,
    var(--dusk) 73%,
    var(--night) 78%,
    var(--night) 100%
  );
}

.zone-day::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--pos, 0%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--ink);
}

.zone[aria-checked="true"] .zone-day::after {
  background: var(--accent);
}

.zone-temp {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.zone-temp svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zone-time {
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
  min-width: 11ch;
  text-align: right;
}

.zone-diff {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted);
}

.credit {
  margin: 28px 0 0;
  font-size: 0.6875rem;
  color: var(--muted);
}

/* Reforços do alto contraste */
:root[data-contrast="alto"] body {
  background: #000;
}

:root[data-contrast="alto"] :focus-visible,
:root[data-contrast="alto"] .choice input:focus-visible + span,
:root[data-contrast="alto"] .switch input:focus-visible + span {
  outline: 4px solid var(--accent);
  outline-offset: 4px;
}

:root[data-contrast="alto"] .zone:focus-visible {
  outline-offset: -4px;
}

:root[data-contrast="alto"] .seconds,
:root[data-contrast="alto"] .date {
  color: var(--paper);
  opacity: 1;
}

:root[data-contrast="alto"] .hand-hour { stroke-width: 7; }
:root[data-contrast="alto"] .hand-minute { stroke-width: 5; }
:root[data-contrast="alto"] .hand-second { stroke-width: 3; }
:root[data-contrast="alto"] .tick { stroke-width: 2; }
:root[data-contrast="alto"] .tick.major { stroke-width: 4; }

:root[data-contrast="alto"] .zone[aria-checked="true"] {
  box-shadow: inset 6px 0 0 var(--accent);
}

:root[data-contrast="alto"] .zone[aria-checked="true"] .zone-city {
  color: var(--accent);
}

:root[data-contrast="alto"] .weather-icon svg,
:root[data-contrast="alto"] .zone-temp svg {
  stroke-width: 2.2;
}

/* Celular */
@media (max-width: 720px) {
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .masthead {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .masthead-meta {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
  }

  .settings-toggle {
    margin-left: auto;
  }

  .settings {
    grid-template-columns: 1fr;
  }

  .hero {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .dial {
    width: 140px;
  }

  .time {
    font-size: clamp(64px, 24vw, 120px);
  }

  .weather {
    flex-basis: 100%;
    padding-left: 0;
    padding-top: 14px;
    border-left: 0;
    border-top: 1px solid var(--line);
    width: 100%;
  }

  .zone {
    grid-template-columns: 1fr auto;
    row-gap: 10px;
  }

  .zone-offset {
    grid-column: 1;
    grid-row: 2;
  }

  .zone-day {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .zone-temp {
    grid-column: 2;
    grid-row: 2;
  }

  .zone-time {
    grid-column: 2;
    grid-row: 1;
  }

  .zone-diff {
    display: inline;
    margin-left: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body,
  .zone,
  .switch span::before {
    transition: none;
  }
}

:root[data-contrast="alto"] * {
  transition: none !important;
}