/* ==========================================================================
   meldtregn.no — design system (open-base)
   Ultra-minimal: light neutral background, white borderless surfaces, pills,
   near-monochrome. Geist for content, Geist Mono for numbers and micro labels.
   The accent color is reserved for alarm/critical states only.
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMono-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --surface-2: #f4f4f2;
  --surface-3: #e9e9e6;
  --text: #171717;
  --text-2: #666666;
  --text-3: #6f6f6f;
  --border: rgba(0, 0, 0, 0.05);
  --border-strong: rgba(0, 0, 0, 0.1);

  --accent: #d92d20;
  --accent-soft: rgba(217, 45, 32, 0.08);

  --ok: #157f3d;

  --inverse-bg: #171717;
  --inverse-text: #fafafa;

  --ring: rgba(0, 0, 0, 0.1);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.04), 0 24px 60px rgba(0, 0, 0, 0.1);

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e0e0e;
  --surface: #191919;
  --surface-2: #0e0e0e;
  --surface-3: #262626;
  --text: #ededed;
  --text-2: #a3a3a3;
  --text-3: #9a9a9a;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  --accent: #f4645a;
  --accent-soft: rgba(244, 100, 90, 0.12);

  --ok: #6ccb8b;

  --inverse-bg: #fafafa;
  --inverse-text: #171717;

  --ring: rgba(255, 255, 255, 0.16);
  --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);

  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* System dark mode applies unless the user explicitly chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0e0e;
    --surface: #191919;
    --surface-2: #0e0e0e;
    --surface-3: #262626;
    --text: #ededed;
    --text-2: #a3a3a3;
    --text-3: #9a9a9a;
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.14);

    --accent: #f4645a;
    --accent-soft: rgba(244, 100, 90, 0.12);

    --ok: #6ccb8b;

    --inverse-bg: #fafafa;
    --inverse-text: #171717;

    --ring: rgba(255, 255, 255, 0.16);
    --shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.55);

    --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    color-scheme: dark;
  }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Numbers and data: mono with tabular digits so nothing jumps */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.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;
}

.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
  border-radius: 6px;
}

::selection { background: var(--surface-3); }

/* UI chrome must not be text-selectable (iOS long-press etc.).
   Real content/data the user may want to copy stays selectable. */
button, .site-header, .site-footer, .menu, .toast {
  -webkit-user-select: none;
  user-select: none;
}

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

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header { background: transparent; }

.header-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-tld { color: var(--text-3); font-weight: 500; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  background: var(--surface);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

@media (hover: hover) { .icon-btn:hover { background: var(--surface-3); } }
.icon-btn:active { transform: scale(0.94); }

.icon-btn.open { background: var(--inverse-bg); color: var(--inverse-text); }

/* Toggle buttons (on/off states) invert when active */
.toggle-btn.on { background: var(--inverse-bg); color: var(--inverse-text); }
@media (hover: hover) { .toggle-btn.on:hover { opacity: 0.85; background: var(--inverse-bg); } }

.pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, opacity 0.15s ease;
}

.pill-btn:active { transform: scale(0.97); }

.pill-btn.primary { background: var(--inverse-bg); color: var(--inverse-text); }
@media (hover: hover) { .pill-btn.primary:hover { opacity: 0.85; } }

.pill-btn.ghost {
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

@media (hover: hover) { .pill-btn.ghost:hover { background: var(--surface-2); } }
.pill-btn[disabled] { opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------------------
   Settings menu
   -------------------------------------------------------------------------- */

.settings-wrap { position: relative; }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 296px;
  max-height: min(560px, calc(100dvh - 90px));
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-overlay);
  padding: 20px;
  z-index: 60;
  transform-origin: top right;
  animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes menu-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.menu-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 10px;
}

/* Options share the row evenly when they fit; locales with long words
   («Pantalla completa», «Бегущая строка») wrap to their own row rather
   than wrapping inside the button. gap applies both ways, so the spacing
   between wrapped rows equals the spacing within a row */
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.menu-grid .opt-btn { flex: 1 1 auto; white-space: nowrap; }

.menu-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background-color: var(--surface-2);
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px;
  border: none;
  border-radius: 12px;
  padding: 11px 44px 11px 14px;
  cursor: pointer;
}

.opt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border: none;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  color: var(--text-2);
  transition: background-color 0.13s ease, color 0.13s ease, transform 0.13s ease;
}

.opt-btn .icon { width: 14px; height: 14px; }

@media (hover: hover) { .opt-btn:hover { background: var(--surface-3); color: var(--text); } }
.opt-btn:active { transform: scale(0.97); }

.opt-btn.active {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-weight: 600;
}

.opt-btn.wide { width: 100%; }
.opt-btn.copied { background: var(--ok); color: #fff; }

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 18px -20px;
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 40px;
  height: 23px;
  border-radius: 999px;
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  transition: background-color 0.18s ease;
  margin: 0;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.18s ease;
}

.switch:checked { background: var(--inverse-bg); }
.switch:checked::after { transform: translateX(17px); background: var(--inverse-text); }

.menu-info {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--text-3);
}

.menu-info a { color: var(--text-2); text-decoration: none; }
@media (hover: hover) { .menu-info a:hover { text-decoration: underline; } }

.menu-data { margin-top: 10px; }
.menu-year { margin-top: 6px; }

/* --------------------------------------------------------------------------
   THE TOOL — meldtregn.no
   One question, one answer. The surface: question, search + day, the card.
   -------------------------------------------------------------------------- */

/* Behind everything, above the page background (a negative z-index keeps
   every other stacking context untouched) */
.rain-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.container {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 20px 0;
  flex: 1;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.question {
  margin: 20px 0 24px;
  font-size: clamp(28px, 6.4vw, 40px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.12;
  text-align: center;
}

/* Search row: the field with the locate button inside, the day picker beside */

.search {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 8px 0 18px;
  background: var(--surface);
  border-radius: 999px;
  transition: box-shadow 0.15s ease, background-color 0.25s ease;
}

.search-box:focus-within { box-shadow: 0 0 0 2px var(--ring); }

.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  border-radius: 50%;
  color: var(--text-3);
  transition: color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) { .search-btn:hover { color: var(--text); background: var(--surface-2); } }

#placeInput {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 17px;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

#placeInput::placeholder { color: var(--text-3); }
#placeInput::-webkit-search-cancel-button,
#placeInput::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Place suggestions: a small list under the field, same shape as the menu */

.ac-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-overlay);
  z-index: 50;
  transform-origin: top center;
  animation: menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.ac-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

@media (hover: hover) { .ac-list li:hover { background: var(--surface-2); } }
.ac-list li.active { background: var(--surface-2); }

.ac-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-where {
  flex-shrink: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.locate-btn { background: var(--surface-2); }
@media (hover: hover) { .locate-btn:hover { background: var(--surface-3); } }

.locate-btn.busy .icon { animation: locate-pulse 0.9s ease-in-out infinite; }

@keyframes locate-pulse {
  50% { opacity: 0.3; }
}

.day-select {
  flex: 0 0 auto;
  width: auto;
  height: 56px;
  padding: 0 42px 0 20px;
  border-radius: 999px;
  background-color: var(--surface);
  font-weight: 500;
}

.day-select:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 999px; }

.hint,
.loading {
  margin: 30px 0 0;
  text-align: center;
  color: var(--text-2);
  font-size: 15px;
}

.loading {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
  animation: loading-pulse 1.2s ease-in-out infinite;
}

@keyframes loading-pulse {
  50% { opacity: 0.4; }
}

/* The answer card */

.result {
  margin: 22px 0 8px;
  padding: 32px 32px 26px;
  background: var(--surface);
  border-radius: 24px;
  text-align: center;
  transition: opacity 0.2s ease;
  animation: card-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) backwards;
}

.result.stale { opacity: 0.45; }

/* opacity starts at 0.01, never 0 – an element at 0 is never «painted» and
   Lighthouse charges the fade to LCP */
@keyframes card-in {
  from { opacity: 0.01; transform: translateY(6px); }
}

.eyebrow {
  display: block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

#where span { white-space: nowrap; }

.answer {
  margin: 10px 0 8px;
  font-size: clamp(96px, 26vw, 148px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.status {
  max-width: 440px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.5;
}

.status .consensus {
  display: block;
  margin-top: 4px;
  font-size: 14.5px;
  color: var(--text-2);
}

/* Hourly strip: 24 bars, square-root scaled so drizzle stays visible */

/* The strip is a control, not text: no iOS selection handles or callout on a
   long press or a scrub (owner report from an iPhone) */
.bars-wrap {
  position: relative;
  max-width: 440px;
  margin: 26px auto 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* pan-y: a finger can scrub sideways for the tip, and still scroll the page */
.bars {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  height: 44px;
  align-items: end;
  padding-top: 26px; /* room for the tip, and a taller hover target */
  box-sizing: content-box;
  touch-action: pan-y;
  cursor: default;
}

.bars.hover i:not(.hot) { opacity: 0.4; }
.bars.hover i.past:not(.hot) { opacity: 0.2; }

.bar-tip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

.bars i {
  display: block;
  height: max(3px, calc(var(--h, 0) * 44px));
  border-radius: 2px;
  background: var(--text);
}

.bars i.dry { background: var(--border-strong); }
.bars i.past { opacity: 0.35; }

/* «You are here»: a small dot under the current hour's bar (today only) */
.bars i.now { position: relative; }

.bars i.now::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--text-2);
}

.bar-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  text-align: left;
}

.umbrella {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 26px 0 0;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
}

.umbrella .icon { width: 18px; height: 18px; }

.result-divider {
  height: 1px;
  margin: 26px -32px 22px;
  background: var(--border);
}

.next {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}

.next .eyebrow { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  inset: auto; /* resets popover UA styling (inset: 0) */
  margin: 0;
  border: 0;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translate(-50%, 16px);
  background: var(--inverse-bg);
  color: var(--inverse-text);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 100;
  max-width: calc(100vw - 40px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.site-footer p { margin: 0; }
.site-footer a { color: var(--text-2); text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { text-decoration: underline; } }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .menu { width: min(296px, calc(100vw - 32px)); }
  .search { flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  .day-select { width: 100%; height: 48px; }
  .result { padding: 26px 20px 22px; }
  .result-divider { margin-left: -20px; margin-right: -20px; }
  .answer { margin-top: 6px; }
}