/* ÍSOR brand tokens (mirror app/globals.css) so the viewer's chrome reads as
   part of isor.is. The map itself stays in the ArcGIS light theme. */
:root {
  --isor-paper: #f7f3ec;
  --isor-paper-2: #ffffff;
  --isor-line: #e4dfd3;
  --isor-navy: #133367;
  --isor-navy-deep: #0e2750;
  --isor-ink: #122a52;
  --isor-muted: #4d5d7a;
  --isor-on-navy: #f4efe6;
  --isor-accent: #ef3e42;
  --isor-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --isor-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Re-tint the ArcGIS Calcite components (tabs, focus, active accents) to
     ÍSOR navy so the side panel matches the site rather than Calcite blue. */
  --calcite-color-brand: var(--isor-navy);
  --calcite-color-brand-hover: var(--isor-navy-deep);
  --calcite-color-brand-press: var(--isor-navy-deep);

  /* Top bar height, shared with the map area so the two stay in sync. Grows
     on mobile where the controls wrap to a second row (see media query). */
  --topbar-h: 57px;
}

/* ─────── Dark mode (mirrors the night palette in app/globals.css) ───────

   The viewer is an iframe, so it never inherits the host page's
   data-theme attribute on its own and used to stay cream while the rest of
   isor.is went dark. Two routes in, matching how the site itself does it:

     * the media query below covers a visitor whose OS is set to dark, and
       works with no JavaScript at all;
     * the [data-theme] blocks cover the site's own toggle, which cannot
       reach in here by itself. components/KortasjaFrame.tsx copies the
       host's resolved theme onto this document once the frame loads and
       again whenever it changes.

   The chrome only. The map canvas stays in the ArcGIS light theme
   deliberately: the geology, borehole and resistivity layers are authored
   against a light basemap and inverting them would misreport the data. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --isor-paper: #0b1830;
    --isor-paper-2: #122347;
    --isor-line: #25375d;
    --isor-navy: #16336a;
    --isor-navy-deep: #0a142b;
    --isor-ink: #eef2f9;
    --isor-muted: #9fb0cf;
    --isor-on-navy: #f4efe6;
    --isor-accent: #f6595d;
  }
}

[data-theme="dark"] {
  --isor-paper: #0b1830;
  --isor-paper-2: #122347;
  --isor-line: #25375d;
  --isor-navy: #16336a;
  --isor-navy-deep: #0a142b;
  --isor-ink: #eef2f9;
  --isor-muted: #9fb0cf;
  --isor-on-navy: #f4efe6;
  --isor-accent: #f6595d;
}

/* The map canvas keeps its light ground in dark mode. Calcite's dark shell
   paints #2b2b2b behind the view, which shows through anywhere a basemap tile
   has not painted yet, and the geology, borehole and resistivity tiles are
   authored on white: the result reads as a broken map rather than a dark one.
   Chrome dark, data light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-wrap {
    background: #ffffff;
  }
}
[data-theme="dark"] .map-wrap {
  background: #ffffff;
}

/* Three headings take their colour from --isor-navy, which is right on cream
   and invisible once the surface behind them is itself navy: the "kortasjá"
   wordmark measured 1.44:1 against the dark top bar. They follow the text
   colour in dark mode instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand,
  :root:not([data-theme="light"]) .panel-title,
  :root:not([data-theme="light"]) .layer-group-title {
    color: var(--isor-ink);
  }
}
[data-theme="dark"] .brand,
[data-theme="dark"] .panel-title,
[data-theme="dark"] .layer-group-title {
  color: var(--isor-ink);
}

/* The active segment is navy-on-navy once the palette flips, so lift it off
   the bar with the paper-2 card colour instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segbtn.active {
    background: var(--isor-paper-2);
    color: var(--isor-ink);
  }
}
[data-theme="dark"] .segbtn.active {
  background: var(--isor-paper-2);
  color: var(--isor-ink);
}

/* Wordmark: the light-on-cream lockup is unreadable on navy, so swap to the
   on-dark artwork the site already ships. */
.brand-logo-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo {
    display: none;
  }
  :root:not([data-theme="light"]) .brand-logo-dark {
    display: block;
  }
}
[data-theme="dark"] .brand-logo {
  display: none;
}
[data-theme="dark"] .brand-logo-dark {
  display: block;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--isor-body);
  color: var(--isor-ink);
  min-height: 100vh;
  overflow: hidden;
}

calcite-shell,
calcite-shell-panel,
calcite-panel,
.map-wrap,
#viewDiv {
  display: block;
}

calcite-shell {
  height: 100vh;
}

calcite-shell-panel,
calcite-panel,
calcite-tabs {
  height: 100%;
}

calcite-panel,
calcite-tabs {
  min-height: 0;
}

.map-wrap, .esri-view-root {
  height: calc(100vh - var(--topbar-h));
  min-height: 0;
  width: 100%;
}

#viewDiv {
  height: 100%;
  width: 100%;
}

/* Loading state over the map. .map-wrap is the positioning context; the
   overlay sits above #viewDiv and is removed once the view resolves. */
.map-wrap {
  position: relative;
}

.map-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: var(--isor-paper-2);
  font-family: var(--isor-body);
}

.map-loading[hidden] {
  display: none;
}

.map-loading-spinner {
  height: 2.25rem;
  width: 2.25rem;
  border: 3px solid var(--isor-line);
  border-top-color: var(--isor-navy);
  border-radius: 50%;
  animation: isor-spin 0.9s linear infinite;
}

/* WCAG 2.2.2: no looping animation for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .map-loading-spinner {
    animation: none;
    border-top-color: var(--isor-line);
  }
}

@keyframes isor-spin {
  to {
    transform: rotate(360deg);
  }
}

.map-loading-text,
.map-loading-error {
  margin: 0;
  font-size: 0.95rem;
  color: var(--isor-muted);
}

.map-loading-error {
  max-width: 28rem;
  padding: 0 1rem;
  text-align: center;
  color: var(--isor-accent);
}

.map-loading-error[hidden] {
  display: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--isor-paper);
  border-bottom: 1px solid var(--isor-line);
  position: relative;
  z-index: 10;
  min-height: var(--topbar-h);
  box-sizing: border-box;
}

.topbar-left,
.topbar-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Site wordmark (desktop) and its globe-only mark (mobile, saves space). */
.brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

.brand-mark {
  height: 28px;
  width: auto;
  display: none;
}

.brand {
  font-family: var(--isor-display);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  font-size: 1.1rem;
  color: var(--isor-navy);
}

/* ÍSOR website adjustment: the site's menu-button recipe (components/Nav.tsx),
   a 36px outline circle in ink at 70%, accent on hover, instead of the white
   pill around a text glyph. The icons are inline SVGs in index.html. */
.topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--isor-line);
  background: transparent;
  color: color-mix(in srgb, var(--isor-ink) 70%, transparent);
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.topbar-btn svg {
  display: block;
}

.topbar-btn:hover {
  border-color: var(--isor-accent);
  color: var(--isor-accent);
}

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  border: 1px solid var(--isor-line);
  background: var(--isor-paper-2);
  border-radius: 9999px;
  padding: 0.15rem;
}

.segbtn {
  border: 0;
  background: transparent;
  color: var(--isor-muted);
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.segbtn:hover {
  color: var(--isor-ink);
}

.segbtn.active {
  background: var(--isor-navy);
  color: var(--isor-on-navy);
  font-weight: 700;
}

/* Visible brand-red focus ring on every control (matches isor.is). */
.topbar-btn:focus-visible,
.segbtn:focus-visible {
  outline: 2px solid var(--isor-accent);
  outline-offset: 2px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem 0.25rem;
  flex: 0 0 auto;
}

.panel-title {
  font-family: var(--isor-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 1.05rem;
  color: var(--isor-navy);
}

.panel-footer {
  padding: 0.5rem 0.75rem 0.75rem;
  flex: 0 0 auto;
  border-top: 1px solid var(--isor-line);
  background: var(--isor-paper-2);
}

.hint {
  font-size: 0.85rem;
  opacity: 0.8;
  line-height: 1.25;
}

.layer-list {
  padding: 0.5rem 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.layer-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.layer-group-title {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--isor-navy);
}

.layer-item {
  border: 1px solid var(--isor-line);
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  background: var(--isor-paper-2);
  display: grid;
  grid-template-columns: auto 1fr minmax(88px, 120px);
  align-items: center;
  gap: 0.5rem;
}

.layer-item label {
  font-size: 0.9rem;
  line-height: 1.2;
}

.layer-item input[type="checkbox"] {
  margin: 0;
}

.layer-item input[type="range"] {
  width: 100%;
  margin: 0;
}

.legend {
  padding: 0.75rem;
}

.legend-description {
  padding: 0.75rem 0.75rem 0;
}

.legend-description-item {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--isor-line);
}

.legend-description-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.legend-description-item h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.legend-description-item p {
  margin: 0;
  line-height: 1.45;
  white-space: normal;
}

calcite-panel {
  display: flex;
  flex-direction: column;
}

calcite-tabs {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

calcite-tab-nav {
  flex: 0 0 auto;
}

calcite-tab {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.selected-feature-panel {
  padding: 0.75rem;
}

.selected-feature h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.selected-section {
  margin-bottom: 1rem;
}

.selected-section h4 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--isor-muted);
}

.selected-text {
  line-height: 1.45;
  word-break: break-word;
}

.selected-empty {
  color: var(--isor-muted);
  line-height: 1.45;
}

.attachment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.attachment-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--isor-line);
  border-radius: 0.75rem;
  padding: 0.5rem;
  background: var(--isor-paper-2);
}

.attachment-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
}

.attachment-card span,
.attachment-file {
  font-size: 0.9rem;
}

.attachment-file {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.04);
}

/* ── ÍSOR website adjustments (in-site embed) ──────────────────────
   Small tweaks on top of the delivered build; kept in one block so
   they're easy to diff against upstream and send back. */

/* Long layer titles otherwise force the 1fr label column wider than the
   panel (grid columns won't shrink below their content by default),
   pushing the opacity slider outside the card and adding a sideways
   scrollbar. Let the label column shrink and wrap instead. */
.layer-item label {
  min-width: 0;
  overflow-wrap: anywhere;
}

calcite-tab {
  overflow-x: hidden;
}

/* A little more room for Icelandic layer names. */
calcite-shell-panel {
  --calcite-shell-panel-width: 320px;
}

/* Brand the side panel: cream page surface (like isor.is) so the white layer
   cards below read as raised surfaces, matching the site's paper/card system.
   foreground-1 reaches the panel's header, tab bar and footer only; the
   content area behind the layer list, and the shell panel it sits in, are
   painted from --calcite-color-background (a pale blue-grey in the light
   theme), which left a mismatched band between a cream header and a cream
   footer. Their own component tokens carry the same surface. */
calcite-shell-panel,
calcite-panel {
  --calcite-color-foreground-1: var(--isor-paper);
  --calcite-panel-background-color: var(--isor-paper);
  --calcite-shell-panel-background-color: var(--isor-paper);
}

/* Brand navy (isor.is --color-navy) for the native controls. */
.layer-item input[type="range"],
.layer-item input[type="checkbox"] {
  accent-color: var(--isor-navy);
}

@media (max-width: 640px) {
  :root {
    /* Two rows: [menu · logo · lang] over [mode · basemap]. */
    --topbar-h: 94px;
  }

  /* The full wordmark is too wide next to the map toggles on a phone, so drop
     to the globe-only mark and hide the text label. Both wordmarks go, and
     the dark-mode selectors are repeated at their own specificity so the
     theme rules above cannot put the on-dark lockup back on a phone. */
  .brand-logo,
  .brand-logo-dark,
  [data-theme="dark"] .brand-logo,
  [data-theme="dark"] .brand-logo-dark,
  :root:not([data-theme="light"]) .brand-logo-dark {
    display: none;
  }

  .brand-mark {
    display: block;
  }

  .brand {
    display: none;
  }

  /* Wrap: left group and language stay on the first row (space-between); the
     two segmented controls drop to a full-width, centred second row. */
  .topbar {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    gap: 0.4rem;
  }

  .topbar-controls {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    gap: 0.4rem;
  }

  .segbtn {
    padding: 0.35rem 0.6rem;
  }

  .layer-item {
    grid-template-columns: auto 1fr;
  }

  .layer-item input[type="range"] {
    grid-column: 1 / -1;
  }
}

/* ÍSOR website adjustment: the lightbox for photo attachments (index.html,
   openLightbox in app.js). Fixed to the viewer, which inside isor.is is the
   iframe, so it covers the map and the panel and nothing outside. The
   navy scrim follows the palette; the close button reuses .topbar-btn in
   on-navy colours. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 3.5rem 1rem 1.5rem;
  background: color-mix(in srgb, var(--isor-navy-deep) 88%, transparent);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.lightbox-figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  border-radius: 0.5rem;
  background: #ffffff;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

.lightbox-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  color: var(--isor-on-navy);
  font-size: 0.95rem;
  text-align: center;
}

.lightbox-caption a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  color: var(--isor-on-navy);
  border-color: color-mix(in srgb, var(--isor-on-navy) 40%, transparent);
}

.lightbox-close:hover {
  color: var(--isor-accent);
  border-color: var(--isor-accent);
}