/* Nord theme (https://www.nordtheme.com/) applied to Ionic's CSS variables.
   Polar Night = surfaces, Snow Storm = text, Frost + Aurora = accents.
   Aurora drives the climbing-condition semantics: green = dry, blue = wet. */

:root {
  /* --- Nord palette ------------------------------------------------------ */
  --nord0: #2e3440; /* Polar Night (bg)      */
  --nord1: #3b4252;
  --nord2: #434c5e;
  --nord3: #4c566a;
  --nord4: #d8dee9; /* Snow Storm (text)     */
  --nord5: #e5e9f0;
  --nord6: #eceff4;
  --nord7: #8fbcbb; /* Frost                 */
  --nord8: #88c0d0;
  --nord9: #81a1c1;
  --nord10: #5e81ac;
  --nord11: #bf616a; /* Aurora red    (out)  */
  --nord12: #d08770; /* Aurora orange (temp) */
  --nord13: #ebcb8b; /* Aurora yellow (mix)  */
  --nord14: #a3be8c; /* Aurora green  (in)   */
  --nord15: #b48ead; /* Aurora purple        */

  /* --- Ionic base (dark Nord) ------------------------------------------- */
  --ion-background-color: var(--nord0);
  --ion-background-color-rgb: 46, 52, 64;
  --ion-text-color: var(--nord6);
  --ion-text-color-rgb: 236, 239, 244;
  --ion-font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

  --ion-color-step-50: #333a47;
  --ion-color-step-100: #3b4252;
  --ion-color-step-150: #434c5e;
  --ion-color-step-200: #4c566a;
  --ion-color-step-250: #545e72;
  --ion-color-step-300: #5c6779;
  --ion-color-step-350: #697285;
  --ion-color-step-400: #767e90;
  --ion-color-step-500: #8f96a5;
  --ion-color-step-600: #a3a9b5;
  --ion-color-step-700: #b8bdc7;
  --ion-color-step-800: #ccd0d8;
  --ion-color-step-850: #d8dbe1;
  --ion-color-step-900: #e5e7eb;
  --ion-color-step-950: #f2f3f5;

  --ion-item-background: var(--nord1);
  --ion-toolbar-background: var(--nord1);
  --ion-tab-bar-background: var(--nord1);

  /* --- Semantic colours (Aurora) --------------------------------------- */
  --ion-color-primary: #81a1c1; /* nord9  frost blue        */
  --ion-color-primary-rgb: 129, 161, 193;
  --ion-color-primary-contrast: #2e3440;
  --ion-color-primary-contrast-rgb: 46, 52, 64;
  --ion-color-primary-shade: #7290ab;
  --ion-color-primary-tint: #8eacc7;

  --ion-color-success: #a3be8c; /* nord14 in condition      */
  --ion-color-success-rgb: 163, 190, 140;
  --ion-color-success-contrast: #2e3440;
  --ion-color-success-contrast-rgb: 46, 52, 64;
  --ion-color-success-shade: #8fa77b;
  --ion-color-success-tint: #acc598;

  --ion-color-danger: #bf616a; /* nord11 not in condition  */
  --ion-color-danger-rgb: 191, 97, 106;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #a8555d;
  --ion-color-danger-tint: #c57179;

  --ion-color-warning: #ebcb8b; /* nord13 mixed             */
  --ion-color-warning-rgb: 235, 203, 139;
  --ion-color-warning-contrast: #2e3440;
  --ion-color-warning-contrast-rgb: 46, 52, 64;
  --ion-color-warning-shade: #cfb37a;
  --ion-color-warning-tint: #edd097;

  --ion-color-medium: #4c566a; /* nord3  no data           */
  --ion-color-medium-rgb: 76, 86, 106;
  --ion-color-medium-contrast: #eceff4;
  --ion-color-medium-contrast-rgb: 236, 239, 244;
  --ion-color-medium-shade: #434c5e;
  --ion-color-medium-tint: #5c6779;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* About panel content. Lives in the initial HTML (inside the About modal's
   light DOM) so search/AI crawlers read it without executing JS, and is shown
   to users as a real, visible panel via the bottom-left About button. */
.about-content {
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--nord5);
}
.about-content h1 {
  font-size: 22px;
  line-height: 1.3;
}
.about-content h2 {
  margin-top: 24px;
  font-size: 17px;
}
.about-content h3 {
  font-size: 15px;
  margin-bottom: 4px;
}
.about-content a {
  color: var(--nord8);
}
.about-content ol {
  padding-left: 22px;
  margin: 6px 0;
}
.about-content ol li {
  margin: 2px 0;
}
.about-lead,
.landing .lead-q {
  margin: 4px 0 14px;
  padding: 4px 0 4px 14px;
  border-left: 3px solid var(--nord8);
  font-size: 16px;
  font-style: italic;
  color: var(--nord6);
  opacity: 0.9;
}
.about-langs {
  margin-top: 32px;
  font-size: 13px;
  opacity: 0.75;
}
.about-updated {
  background: rgba(163, 190, 140, 0.15);
  border: 1px solid rgba(163, 190, 140, 0.35);
  color: var(--nord14);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* Localized landing pages (/no/, /sv/) reuse the theme but are a normal,
   scrollable document rather than the full-screen map. */
.landing {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}
.landing h1 {
  font-size: 26px;
  line-height: 1.25;
}
.landing .lede {
  font-size: 17px;
  opacity: 0.9;
}
.landing h2 {
  margin-top: 28px;
  font-size: 18px;
}
.landing a {
  color: var(--nord8);
}
.landing .cta {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 22px;
  border-radius: 12px;
  background: var(--nord14);
  color: #2e3440 !important;
  font-weight: 700;
  text-decoration: none;
}
.landing .cta:hover {
  background: var(--nord8);
}
.landing .langs {
  margin-top: 40px;
  font-size: 13px;
  opacity: 0.7;
}
/* Generated static SEO pages (per-crag / per-region) reuse .landing. */
.landing .crumbs {
  font-size: 12px;
  opacity: 0.6;
  margin-bottom: 4px;
}
.landing .cond-line {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing ul.days,
.landing ul.hublist {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}
.landing ul.days li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(216, 222, 233, 0.08);
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing ul.hublist li {
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing .pager {
  margin-top: 20px;
  font-size: 14px;
  opacity: 0.8;
}
.landing .pager a {
  padding: 0 6px;
}
.landing .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.landing .dot.in {
  background: var(--nord14);
}
.landing .dot.out {
  background: var(--nord10); /* wet = blue */
}
.landing .dot.none {
  background: var(--nord3);
}

/* --- Map -------------------------------------------------------------- */
/* Ionic applies transform/contain to ion-content, which makes position:fixed
   resolve against a zero-height ancestor. Pin to the top-left and size with
   viewport units (vw/dvh) so Leaflet always gets real dimensions regardless of
   the containing block. The opaque side menu docks on top at md+ widths. */
#map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 0;
}

/* Floating HUD (brand + counts + legend) ------------------------------- */
.hud {
  position: absolute;
  z-index: 1000;
  top: 12px;
  left: 12px;
  background: rgba(46, 52, 64, 0.85);
  color: var(--nord6);
  backdrop-filter: blur(6px);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  max-width: 280px;
  border: 1px solid rgba(136, 192, 208, 0.15);
}
.hud h1 {
  margin: 0 0 4px;
  font-size: 15px;
}
.hud .muted {
  opacity: 0.7;
}
.legend {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.85;
  flex-wrap: wrap;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.dot.in {
  background: var(--nord14);
}
.dot.out {
  background: var(--nord10); /* wet = blue */
}
.dot.none {
  background: var(--nord3);
}

/* About button (bottom-left). Sits above the date slider; on phones the slider
   is full-width, so lift the button clear of it. */
.about-fab {
  z-index: 1001;
}
@media (max-width: 767px) {
  .about-fab {
    margin-bottom: 76px;
  }
}

/* Floating menu toggle (mobile only; split-pane docks the menu at md+) -- */
.menu-fab {
  position: absolute;
  z-index: 1000;
  top: 12px;
  right: 12px;
}
@media (min-width: 768px) {
  .menu-fab {
    display: none;
  }
}

/* --- Collapsible sidebar --------------------------------------------- */
/* The side panel docks open at md+ via ion-split-pane. Adding this class
   hides it so the map gets the full width; a floating "reopen" tab brings it
   back. On phones the panel is an overlay, so collapsing just closes it. */
ion-split-pane.menu-collapsed ion-menu {
  display: none;
}
/* Collapse chevron in the menu header. */
.menu-collapse-btn {
  --padding-start: 6px;
  --padding-end: 6px;
}
/* Reopen tab: only meaningful on desktop when the docked panel is hidden. */
.reopen-fab {
  position: absolute;
  z-index: 1000;
  top: 12px;
  right: 12px;
  display: none;
}
@media (min-width: 768px) {
  ion-split-pane.menu-collapsed .reopen-fab {
    display: block;
  }
}

/* --- Sidebar list ----------------------------------------------------- */
.sb-sub {
  opacity: 0.6;
  font-size: 12px;
  padding: 8px 16px 4px;
}
.crag-item {
  --min-height: 46px;
}
.crag-item .nm {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.crag-item .cc {
  font-size: 11px;
  opacity: 0.55;
}

/* Per-day wet/dry strip on the right of each crag row (avalanche-app style). */
.cond-strip {
  display: flex;
  gap: 2px;
  margin-inline-start: 8px;
}
.cond-strip .cd {
  width: 15px;
  height: 18px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid transparent;
}
.cond-strip .cd.in {
  background: var(--nord14);
  color: #2e3440;
}
.cond-strip .cd.out {
  background: var(--nord10);
}
.cond-strip .cd.none {
  background: var(--nord3);
  color: rgba(255, 255, 255, 0.55);
}
.cond-strip .cd.today {
  border-color: var(--nord13);
}
.cond-strip .cd.sel {
  outline: 2px solid var(--nord8);
  outline-offset: -1px;
}
@media (max-width: 359px) {
  .cond-strip .cd:nth-last-child(-n + 2) {
    display: none;
  }
}
.list-empty {
  opacity: 0.5;
  font-size: 12px;
  padding: 14px 16px;
}

/* --- Detail modal ----------------------------------------------------- */
.detail-body {
  padding: 4px 4px 16px;
}
.yr-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nord8);
  text-decoration: none;
}
.yr-link:hover {
  text-decoration: underline;
}
/* Yr.no link on generated SEO pages. */
.landing .yr-link {
  margin: 10px 0 4px;
}
.band {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.band.hardfreeze {
  background: #3b4a7a;
  color: #d8e0f2;
}
.band.freezing {
  background: var(--nord10);
  color: #e8f0ff;
}
.band.cold {
  background: var(--nord7);
  color: #14312f;
}
.band.mild {
  background: var(--nord14);
  color: #1e2b16;
}
.band.warm {
  background: var(--nord12);
  color: #3a1b0f;
}
.band.hot {
  background: var(--nord11);
  color: #ffe3dd;
}
.band.none {
  background: var(--nord3);
  color: var(--nord4);
}
.cond {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  margin-left: 8px;
}
.metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 6px;
}
.metric {
  background: var(--nord1);
  border-radius: 10px;
  padding: 10px 12px;
}
.metric .k {
  font-size: 11px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metric .v {
  font-size: 20px;
  font-weight: 650;
  margin-top: 2px;
}
.metric .u {
  font-size: 12px;
  opacity: 0.6;
  font-weight: 400;
}
.agg {
  margin: 8px 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(129, 161, 193, 0.14);
  border: 1px solid rgba(129, 161, 193, 0.3);
  font-size: 13px;
}
.agg b {
  font-size: 18px;
}
h3.sec {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.6;
  margin: 6px 0 8px;
}
.muted {
  opacity: 0.6;
}
.empty {
  opacity: 0.65;
  font-style: italic;
  padding: 18px 0;
}

/* --- Detail weather chart -------------------------------------------- */
.chart {
  width: 100%;
  height: auto;
  display: block;
  margin: 6px 0 4px;
  overflow: visible;
}
.chart .bar {
  fill: var(--nord10);
}
.chart .bar.past {
  fill: rgba(94, 129, 172, 0.4);
}
.chart .templine {
  fill: none;
  stroke: var(--nord12);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart .templine.past {
  stroke: rgba(208, 135, 112, 0.45);
}
.chart .today {
  stroke: rgba(236, 239, 244, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.chart .todaylbl {
  fill: rgba(236, 239, 244, 0.6);
  font-size: 8px;
  text-anchor: middle;
}
.chart .axis {
  fill: rgba(236, 239, 244, 0.55);
  font-size: 8px;
}
/* Day-column time cues (drawn behind the bars + line). */
.chart .weekend {
  fill: rgba(216, 222, 233, 0.06);
}
.chart .todayband {
  fill: rgba(136, 192, 208, 0.16); /* nord8 frost — marks the current day */
}
.chart .axis.weekend {
  fill: rgba(236, 239, 244, 0.7);
}
.chart .axis.today {
  fill: var(--nord8);
  font-weight: 700;
}
.chart .axisL {
  fill: var(--nord12);
  font-size: 8px;
}
.chart .axisR {
  fill: var(--nord10);
  font-size: 8px;
}
.chart .zero {
  stroke: rgba(236, 239, 244, 0.2);
  stroke-width: 1;
}
.legend2 {
  display: flex;
  gap: 14px;
  font-size: 11px;
  opacity: 0.75;
  margin: 2px 0 8px;
}
.legend2 span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.legend2 i.t {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: var(--nord12);
  display: inline-block;
}
.legend2 i.r {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--nord10);
  display: inline-block;
}

/* --- Status-coloured clusters (Nord Aurora) -------------------------- */
.cluster-wrap {
  background: transparent;
  border: none;
}
.cluster-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  color: #2e3440;
  border: 2px solid rgba(46, 52, 64, 0.35);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.cluster-icon.in {
  background: var(--nord14);
}
.cluster-icon.out {
  background: var(--nord10); /* wet = blue */
  color: #fff;
}
.cluster-icon.none {
  background: var(--nord3);
  color: var(--nord5);
}
.cluster-icon.mix {
  background: var(--nord13);
}
.hidden-cluster {
  display: none !important;
}

/* --- Bottom date slider ---------------------------------------------- */
.timebar {
  position: absolute;
  z-index: 1000;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  background: rgba(46, 52, 64, 0.88);
  backdrop-filter: blur(6px);
  color: var(--nord6);
  padding: 4px 16px 6px;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(136, 192, 208, 0.15);
}
@media (min-width: 768px) {
  .timebar {
    left: calc(50% - 150px);
  }
}
.timebar.hidden {
  display: none;
}
.date-label {
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}
.date-label .tag {
  font-weight: 500;
  opacity: 0.6;
  font-size: 11px;
  margin-left: 6px;
}
.timebar ion-range {
  --bar-background-active: var(--nord14);
  --knob-background: var(--nord8);
  padding: 0;
}
.date-ticks {
  display: flex;
  justify-content: space-between;
  gap: 1px;
  padding: 2px 6px 0;
  margin-top: -2px;
}
.date-ticks .tick {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
  padding: 2px 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: rgba(236, 239, 244, 0.55);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.date-ticks .tick .wd {
  text-transform: uppercase;
  font-weight: 600;
}
.date-ticks .tick .dom {
  font-size: 10px;
  font-weight: 650;
}
.date-ticks .tick.today .wd {
  color: var(--nord13);
}
.date-ticks .tick.active {
  color: var(--nord6);
  background: rgba(163, 190, 140, 0.28);
}
.date-ticks .tick:hover {
  color: var(--nord6);
}

/* --- Attribution bar -------------------------------------------------- */
.attribution {
  position: absolute;
  z-index: 900;
  bottom: 2px;
  right: 4px;
  font-size: 10px;
  color: rgba(236, 239, 244, 0.75);
  background: rgba(46, 52, 64, 0.6);
  padding: 2px 7px;
  border-radius: 6px;
}
.attribution a {
  color: var(--nord8);
  text-decoration: none;
}
.attribution a:hover {
  text-decoration: underline;
}