/* Sundrift site - "Lavsol" tokens, site chrome.
   Same validated palette as the mockups (data pair #B87F1A / #3E6EA8). */

:root {
  --snow: #EFF2F0;
  --snow-deep: #E3E8E5;
  --ink: #26303B;
  --ink-60: #5C6673;
  --ink-35: #9AA3AD;
  --hairline: #C9D0CC;
  --card: #FBFCFB;
  --sun: #B87F1A;
  --sun-display: #D99A2B;
  --sun-deep: #8F6112;
  --sun-wash: #F3E3C3;
  --fjord: #3E6EA8;
  --spruce: #47604F;
  --shadow-wash: #DDE3E7;
  --radius: 14px;
  --f-display: "Bricolage Grotesque", "Avenir Next", sans-serif;
  --f-body: "Instrument Sans", "Helvetica Neue", sans-serif;
  --f-mono: "Spline Sans Mono", "SF Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--snow);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--fjord); }

/* site header */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--snow) 88%, #fff);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 19px;
}
.brand svg { display: block; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  text-decoration: none;
  color: var(--ink-60);
  font-size: 14.5px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 9px;
}
.site-nav a:hover { background: var(--snow-deep); color: var(--ink); }
.site-nav a.active { color: var(--ink); background: var(--snow-deep); }
.site-nav a.cta {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.site-nav a.cta:hover { background: #37424F; }
.lang-toggle {
  border: 1px solid var(--hairline);
  background: var(--card);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 12px;
  padding: 5px 11px;
  cursor: pointer;
  color: var(--ink-60);
}

/* landing */
.hero {
  max-width: 1060px;
  margin: 0 auto;
  padding: 72px 24px 28px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.015em;
}
.hero h1 em { font-style: normal; color: var(--sun-deep); }
.hero .lede { color: var(--ink-60); font-size: 18px; margin: 18px 0 26px; max-width: 50ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 13px 22px;
  border-radius: var(--radius);
}
.btn-primary:hover { background: #37424F; }
.btn-quiet {
  display: inline-block;
  color: var(--fjord);
  text-decoration: none;
  font-weight: 500;
  padding: 13px 10px;
}
.hero-visual svg { width: 100%; height: auto; display: block; }

.strip-band {
  border-top: 2px solid var(--ink);
  max-width: 1060px;
  margin: 40px auto 0;
  padding: 26px 24px 64px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 28px;
}
.strip-band h3 { font-family: var(--f-display); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.strip-band p { font-size: 14.5px; color: var(--ink-60); }
.strip-band .k {
  font-family: var(--f-mono);
  color: var(--sun-deep);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

.demo-block {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
.demo-block .card-lg {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 26px 28px;
  box-shadow: 0 14px 44px rgba(38,48,59,0.08);
}
.demo-block h2 { font-family: var(--f-display); font-size: 22px; font-weight: 700; margin-bottom: 4px; }

.site-foot {
  border-top: 1px solid var(--hairline);
  padding: 26px 24px 40px;
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  color: var(--ink-60);
  font-size: 13px;
}
.site-foot a { color: var(--ink-60); }

/* map page */
.map-shell {
  display: grid;
  grid-template-columns: 1fr 400px;
  height: calc(100vh - 61px);
  height: calc(100dvh - 61px);
  min-height: 480px;
}
#map { position: relative; }
.map-attrib-extra { font-size: 11px; }
.result-panel {
  border-left: 1px solid var(--hairline);
  background: var(--card);
  overflow-y: auto;
  padding: 20px 22px 30px;
}
.result-panel .placeholder { color: var(--ink-35); font-size: 14.5px; padding-top: 8px; }
.result-panel h2 { font-family: var(--f-display); font-size: 20px; font-weight: 700; }
.addr { color: var(--ink-60); font-size: 13px; margin-bottom: 14px; }
.time-hero {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.time-hero .dash { color: var(--sun-display); }
.sub-mono { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-60); margin: 4px 0 14px; }
.horizon-wrap svg { display: block; width: 100%; height: auto; background: #F7F9F8; border: 1px solid var(--hairline); border-radius: 10px; }

.scrub { margin: 16px 0 4px; }
.scrub input[type="range"] { width: 100%; accent-color: var(--sun-deep); }
.scrub-row { display: flex; justify-content: space-between; align-items: baseline; }
.scrub-time { font-family: var(--f-mono); font-size: 19px; font-weight: 600; }
.scrub-status { font-size: 13.5px; font-weight: 600; }
.scrub-status.sun { color: var(--sun-deep); }
.scrub-status.shade { color: var(--fjord); }

.intervals { margin: 14px 0; }
.intervals .row {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 13.5px;
  padding: 7px 0;
  border-top: 1px solid var(--hairline);
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-60);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--card);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.dot-terrain { background: var(--ink-60); }

.search-box {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 30;
  width: min(320px, calc(100% - 28px));
}
.search-box input {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card);
  padding: 11px 14px;
  font-family: var(--f-body);
  font-size: 14.5px;
  box-shadow: 0 6px 22px rgba(38,48,59,0.12);
}
.search-results {
  margin-top: 6px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(38,48,59,0.14);
}
.search-results button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border-top: 1px solid var(--hairline);
}
.search-results button:first-child { border-top: 0; }
.search-results button:hover { background: var(--snow-deep); }
.search-results .muted { color: var(--ink-60); font-size: 12px; }

.year-block {
  border-top: 2px solid var(--ink);
  margin-top: 18px;
  padding-top: 14px;
}
.year-head strong { font-family: var(--f-display); font-size: 15px; }
.year-stats {
  display: flex;
  gap: 22px;
  align-items: flex-end;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}
/* Norwegian labels are longer than the English ones ("Siste soldag" vs
   "Last sun"), and the flex items were narrow enough to break every word
   onto its own line - four lines for a two-word label and a date. Let each
   stat size to its content and never break the date. */
.year-stats > div { min-width: max-content; }
.year-stats .small { white-space: nowrap; }
.year-stats .year-date { white-space: nowrap; }
.year-date { font-size: 21px; font-weight: 600; }
#yearband svg { width: 100%; height: auto; }

.layers-box {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 30;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(38,48,59,0.12);
  padding: 10px 14px 12px;
  font-size: 13.5px;
}
.layers-title {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 6px;
}
.layers-box label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0;
  cursor: pointer;
}
.layers-box input { accent-color: var(--sun-deep); }
.layers-sep { border-top: 1px solid var(--hairline); margin: 6px 0; }

.spinner {
  width: 20px; height: 20px;
  border: 3px solid var(--hairline);
  border-top-color: var(--sun-deep);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* prose pages */
.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 90px;
}
.prose h1 { font-family: var(--f-display); font-weight: 700; font-size: 34px; margin-bottom: 14px; }
.prose h2 { font-family: var(--f-display); font-weight: 600; font-size: 21px; margin: 34px 0 8px; }
.prose p, .prose li { color: #39434E; font-size: 16px; }
.prose ul { padding-left: 22px; margin: 10px 0; }
.prose .note {
  border-left: 3px solid var(--sun);
  background: var(--card);
  padding: 14px 18px;
  border-radius: 0 10px 10px 0;
  margin: 18px 0;
  font-size: 14.5px;
  color: var(--ink-60);
}
.prose table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); }
.prose th { font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-60); }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; padding-top: 44px; }
  .map-shell { grid-template-columns: 1fr; grid-template-rows: 52vh 1fr; }
  .result-panel { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (max-width: 700px) {
  /* phone header: brand + language + primary action; text links live in the footer */
  .site-nav a:not(.cta) { display: none; }
  .site-head { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

:focus-visible { outline: 2.5px solid var(--fjord); outline-offset: 2px; border-radius: 4px; }

body.poster .site-head, body.poster .hero-copy, body.poster .hero-instrument, body.poster .load-live { display: none !important; }
body.poster .fly-hero::before { display: none !important; }

body.mappage { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body.mappage .map-shell { flex: 1; min-height: 0; height: auto; }

/* day/night overlays (shared with the landing hero): multiply night tint +
   soft-light dusk pass, opacity driven by solar elevation at the scrub time */
.map-night, .map-dusk {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
}
.map-night { mix-blend-mode: multiply; background: #0A1628; }
.map-dusk { mix-blend-mode: soft-light; background: #FF7E47; }

/* ---------- 3D building inspector + compass rose ---------- */
.rose-slot { position: absolute; right: 14px; bottom: 110px; z-index: 30; }
.compass-rose {
  width: 84px; height: 84px;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 6px 16px rgba(38,48,59,0.28));
  transition: filter 140ms ease;
}
.compass-rose:hover { filter: drop-shadow(0 8px 20px rgba(38,48,59,0.36)); }
.compass-rose.is-turning { cursor: grabbing; }
.compass-rose:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 50%; }
.compass-rose svg { width: 100%; height: 100%; display: block; }
.compass-rose text { user-select: none; }
@media (prefers-reduced-motion: reduce) { .compass-rose { transition: none; } }

.insp-modal[hidden] { display: none; }
.insp-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(38,48,59,0.42);
  padding: 18px;
}
.insp-card {
  width: min(720px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 8px 8px 0 rgba(38,48,59,0.22);
  padding: 12px 18px 14px;
  overflow: hidden;
}
.insp-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  height: 380px;
  margin: 8px 0 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: #DDE6EC;
  touch-action: none;
}
.insp-stage canvas { width: 100%; height: 100%; display: block; }
.insp-spinner {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink-60); background: rgba(221,230,236,0.85);
  pointer-events: none;
}
.insp-spinner:empty::after {
  content: '';
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--hairline); border-top-color: var(--ink);
  animation: insp-spin 0.9s linear infinite;
}
.insp-spinner[hidden] { display: none; }
@keyframes insp-spin { to { transform: rotate(360deg); } }
.insp-rose { position: absolute; right: 10px; bottom: 10px; z-index: 4; }
.insp-attrib {
  position: absolute; left: 8px; bottom: 6px; z-index: 4;
  font-size: 10px; color: var(--ink-35);
  background: rgba(251,252,251,0.7); border-radius: 4px; padding: 1px 5px;
}
.insp-head { display: flex; justify-content: space-between; align-items: center; }
.insp-head strong { font-family: var(--f-display); font-size: 15px; }
.insp-x { border: 0; background: none; font-size: 16px; cursor: pointer; color: var(--ink-60); padding: 4px 8px; }
.insp-readout { font-size: 13px; color: var(--ink-60); margin: 6px 0 10px; }
.insp-controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.insp-controls label { font-size: 12px; color: var(--ink-60); display: flex; flex-direction: column; gap: 4px; }
.layers-slider { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.layers-slider input[type=range] { width: 100%; accent-color: var(--ink); }
.layers-slider output { font-size: 11px; color: var(--ink-35); text-align: right; }
.insp-controls select, .insp-controls input {
  border: 1px solid var(--hairline); border-radius: 9px; padding: 8px 10px;
  font-family: var(--f-body); font-size: 14px; background: var(--card); width: 130px;
}
.insp-go {
  border: 0; border-radius: 11px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 14px; padding: 11px 18px; cursor: pointer;
}
.insp-go:disabled { opacity: 0.45; cursor: default; }
.insp-conf { font-size: 11.5px; color: var(--ink-35); margin-top: 8px; }
.inspect-btn {
  display: block; width: 100%; margin-top: 12px;
  border: 1.5px solid var(--ink); border-radius: 11px; background: var(--snow);
  font-family: var(--f-body); font-weight: 600; font-size: 14px;
  padding: 11px; cursor: pointer;
}
.inspect-btn:hover { background: var(--sun-wash); }
body.inspecting .search-box, body.inspecting .layers-box { display: none; }
/* iOS ZOOMS THE WHOLE PAGE when you focus a text field whose font-size is
   under 16px, then leaves you zoomed in - it is not a scroll, it is a real
   viewport scale change, and on the map page that also throws the camera
   off. The threshold is exactly 16px and there is no way to opt out that is
   worth having: maximum-scale/user-scalable=no would fix it by disabling
   pinch-zoom for everyone, which is a genuine accessibility regression. So
   the fields simply meet the threshold on phones. Only text-entry fields
   and selects trigger it; radio, checkbox and range are unaffected. */
@media (max-width: 700px) {
  input[type="search"], input[type="text"], input[type="number"],
  input[type="email"], input[type="tel"], input[type="url"],
  input[type="password"], input:not([type]), select, textarea {
    font-size: 16px;
  }
  /* .insp-controls select is (0,1,1) and outranks a bare `select`, so the
     picker's floor dropdown kept its 14px and kept zooming. */
  .insp-controls select, .insp-controls input { font-size: 16px; }
}

@media (max-width: 700px) {
  /* phone: layers under the search bar, rose bottom-left above attribution */
  .layers-box { top: 72px; right: 10px; padding: 8px 12px 10px; font-size: 12.5px; }
  .rose-slot { bottom: 26px; left: 12px; right: auto; }
  .compass-rose { width: 66px; height: 66px; }

  /* CLIPPED TEXT. Norwegian runs longer than English ("15 h 44 min dagslys
     med fri horisont"), and these lines were sized for the desktop panel,
     so on a phone they ran off the right edge and were simply cut. Let them
     wrap, and stop any long unbroken token forcing the page wider. */
  .result-panel { overflow-x: hidden; }
  .result-panel .sub-mono,
  .result-panel .addr,
  .result-panel h2 { overflow-wrap: anywhere; white-space: normal; }
  .intervals .row { flex-wrap: wrap; gap: 2px 10px; }
  .time-hero { font-size: 30px; }

  /* THE PICKER MUST FIT, NOT SCROLL. 100% resolves against a viewport that
     iOS Safari measures WITHOUT its own chrome, so the card ran taller than
     the visible area and the controls fell below the fold; 100dvh follows
     the bar as it hides. min-height:0 lets the 3D stage give way instead of
     forcing the card past the screen. */
  .insp-modal { padding: 0; height: 100dvh; }
  .insp-card {
    width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0; box-shadow: none;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    overflow: hidden;
  }
  .insp-stage { height: auto; flex: 1 1 auto; min-height: 0; }
  .insp-rose { right: 10px; bottom: 10px; left: auto; }
  .insp-readout { font-size: 12.5px; margin: 5px 0 7px; }
  .insp-controls { gap: 8px; }
  .insp-controls select, .insp-controls input { width: 100%; min-width: 0; padding: 9px 10px; }
  .insp-controls label { flex: 1 1 40%; min-width: 0; }
  .insp-go { flex: 1 1 100%; padding: 13px; }
  .insp-conf { font-size: 11px; margin-top: 5px; }
}
body.inspecting { overflow: hidden; }

/* The ground-anchored marker becomes a GHOST once the real pin is drawn as
   3D geometry at the picked height: the geometry is depth-tested and so
   vanishes behind buildings, and this dim shape is what still says
   "the point is back there". */
.maplibregl-marker.pin-ghost { opacity: 0.32 !important; }  /* maplibre writes an inline opacity, so this must win */


/* ---- phone map controls -------------------------------------------------
   The layers panel is set-once chrome that was covering roughly a third of
   a 430 pt screen. On phones it collapses to two 44 pt buttons in the
   bottom-right - the reachable corner, unlike the top-right - and opens as
   a bottom sheet. Desktop keeps the open panel: there is room, and a mouse
   does not care about reach. */
.map-fabs { display: none; }
.sheet-scrim { display: none; }

@media (max-width: 700px) {
  .map-fabs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    position: absolute;
    z-index: 34;
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(30px + env(safe-area-inset-bottom));
  }
  .map-fab {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--hairline);
    border-radius: 12px;
    background: var(--card);
    color: var(--ink-60);
    box-shadow: 0 6px 22px rgba(38,48,59,0.18);
    cursor: pointer;
    position: relative;
    /* no backdrop blur: it is expensive and washes out over Kartverket
       greens and tans, and over the night veil */
    touch-action: manipulation;
  }
  .map-fab[aria-pressed="true"] { background: var(--sun-wash); color: var(--sun-deep); border-color: var(--sun-deep); }
  /* A bare layers glyph says nothing about what is switched on. The dot
     appears when anything is off its default. */
  .fab-dot {
    position: absolute; top: -3px; right: -3px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--sun-deep); border: 1.5px solid var(--card);
  }
  .fab-dot[hidden] { display: none; }

  .sheet-scrim { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(38,48,59,0.35); }
  .sheet-scrim[hidden] { display: none; }

  /* the layers box becomes the sheet itself - one markup, two layouts */
  .layers-box {
    position: fixed; z-index: 45;
    left: 0; right: 0; top: auto;
    bottom: 0;
    width: auto;
    max-height: min(62dvh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px 18px 0 0;
    border: 0; border-top: 1.5px solid var(--ink);
    padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    font-size: 15px;
    transform: translateY(100%);
    transition: transform 220ms ease-out;
    box-shadow: 0 -10px 40px rgba(38,48,59,0.25);
  }
  body.layers-open .layers-box { transform: translateY(0); }
  .layers-box::before {
    content: ''; display: block; width: 36px; height: 4px; border-radius: 2px;
    background: var(--hairline); margin: 0 auto 12px;
  }
  .layers-box label { min-height: 44px; display: flex; align-items: center; gap: 10px; }
  .layers-box input[type=radio], .layers-box input[type=checkbox] { width: 20px; height: 20px; }
  .layers-slider input[type=range] { height: 28px; }
  @media (prefers-reduced-motion: reduce) {
    .layers-box { transition: none; }
  }
}