/* Í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;
}

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

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

.topbar-btn {
  border: 1px solid var(--isor-line);
  background: var(--isor-paper-2);
  color: var(--isor-ink);
  padding: 0.35rem 0.65rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.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. */
calcite-shell-panel,
calcite-panel {
  --calcite-color-foreground-1: 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. */
  .brand-logo {
    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;
  }
}