/* Expedition. Glass is the sign-in card, the map tools, and the map controls. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font);
  color: var(--label);
  background: var(--backdrop);
  background-color: var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-s);
}

.icon {
  width: var(--icon-l); height: var(--icon-l); flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon-inline { width: var(--icon-m); height: var(--icon-m); }

.app { position: relative; height: 100%; min-height: 0; }
.stage {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background: rgb(var(--glass-rgb) / 1);
}
.stage-empty { display: grid; place-items: center; background: transparent; }

.map-frame { position: relative; flex: 0 0 auto; height: 100%; min-height: var(--map-h); }
/* design-allow: expedition map height is capped at 800px */
.map-frame { max-height: 800px; }
.map {
  position: absolute;
  inset: 0;
  z-index: var(--z-map);
  background: rgb(var(--glass-rgb) / 1);
}
.map-fade {
  position: absolute;
  z-index: var(--z-overlay);
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--s7) * 3);
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(var(--glass-rgb) / 0), rgb(var(--glass-rgb) / 1));
}
.map-frame .leaflet-bottom { bottom: calc(var(--s7) * 3); }

.points {
  flex: 1 0 auto;
  background: rgb(var(--glass-rgb) / 1);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--s5) var(--s6);
}
.points h2, .sheet h2, .sheet h3, .login-card h2 {
  margin: 0;
  font-size: var(--fs-title-3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-title);
}
.sheet p, .points p, .login-card p { margin: 0; color: var(--label-2); }

.group {
  background: var(--surface);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--edge-surface), var(--shadow-1);
}
.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--control-h);
  padding: var(--s2) var(--s4);
}
.row + .row { box-shadow: inset 0 var(--hairline) 0 var(--separator); }
.row-label { flex: 1 1 auto; min-width: 0; }
.row-label small { display: block; color: var(--label-2); font-size: var(--fs-footnote); }
.row-value { color: var(--label-2); text-align: right; word-break: break-word; }
.row-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }

.settings-btn, .show-area, .btn, .segmented {
  -webkit-backdrop-filter: var(--blur-thick);
  backdrop-filter: var(--blur-thick);
}
.settings-btn {
  position: absolute;
  z-index: var(--z-toast);
  top: var(--s2);
  right: var(--s2);
  display: grid;
  place-items: center;
  width: var(--target);
  height: var(--target);
  padding: 0;
  border: 0;
  border-radius: var(--radius-capsule);
  background: var(--material-thick);
  box-shadow: var(--edge-glass), var(--edge-outline), var(--shadow-1);
  cursor: pointer;
}
.settings-btn .icon-settings { width: var(--icon-m); height: var(--icon-m); }
.settings-btn[aria-expanded="true"] {
  background: var(--material-tint);
  color: var(--accent-contrast);
  box-shadow: var(--edge-tint), var(--shadow-tint);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.sheet {
  position: absolute;
  z-index: var(--z-bar);
  inset: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: calc(var(--target) + var(--s4)) var(--s5) var(--s6);
  background: var(--bg);
}
.sheet-page { padding: var(--s5) var(--s5) var(--s6); }
.login {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: var(--s5);
}
.login-card {
  width: min(100%, var(--list-w-max));
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5);
  border-radius: var(--radius-l);
  background: var(--material-thick);
  box-shadow: var(--edge-glass), var(--edge-outline), var(--shadow-2);
  -webkit-backdrop-filter: var(--blur-thick);
  backdrop-filter: var(--blur-thick);
}
.sheet > * { flex-shrink: 0; }
.sheet form { display: flex; flex-direction: column; gap: var(--s3); }
.editor-map {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  aspect-ratio: 16 / 9;
  height: auto;
  /* design-allow-start: the area map is a 16:9 frame at most 600px tall */
  max-height: 600px;
  width: min(100%, calc(600px * 16 / 9));
  /* design-allow-end */
  border-radius: var(--radius-l);
  overflow: hidden;
  background: rgb(var(--glass-rgb) / 1);
  box-shadow: var(--edge-surface), var(--shadow-1);
}
.show-area {
  position: absolute;
  z-index: var(--z-overlay);
  top: var(--s2);
  left: var(--s2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 0 var(--s4);
  border: 0;
  border-radius: var(--radius-capsule);
  background: var(--material-thick);
  box-shadow: var(--edge-glass), var(--edge-outline), var(--shadow-1);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  padding: var(--s1);
  border-radius: var(--radius-capsule);
  background: var(--material-regular);
  box-shadow: var(--edge-glass), var(--edge-outline), var(--shadow-1);
}
.segmented button {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--radius-capsule);
  background: transparent;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.segmented button[aria-pressed="true"] {
  background: var(--material-tint);
  color: var(--accent-contrast);
  box-shadow: var(--edge-tint), var(--shadow-tint);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.field { display: grid; gap: var(--s2); }
.field label { font-weight: var(--fw-semibold); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  padding: 0 var(--s5);
  border: 0;
  border-radius: var(--radius-capsule);
  background: var(--material-regular);
  box-shadow: var(--edge-glass), var(--edge-outline), var(--shadow-1);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.btn-primary {
  background: var(--material-tint);
  color: var(--accent-contrast);
  box-shadow: var(--edge-tint), var(--shadow-tint);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.btn-destructive { color: var(--bad); }
.input, .range {
  width: 100%;
  min-height: var(--target);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--field);
  box-shadow: inset 0 0 0 var(--border) var(--field-border);
}
.input { padding: 0 var(--s4); }
.range { accent-color: var(--accent); }
.msg {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  font-size: var(--fs-footnote);
}
.msg[data-kind="ok"] { color: var(--ok); }
.msg[data-kind="error"] { color: var(--bad); }

.empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s2);
  min-height: var(--empty-min-h);
  padding: var(--s5);
  text-align: center;
  color: var(--label-2);
}
.empty h3 { margin: 0; color: var(--label); font-size: var(--fs-title-3); font-weight: var(--fw-semibold); }
.empty p { margin: 0; max-width: var(--empty-text-max); }
.empty .icon { width: var(--icon-xl); height: var(--icon-xl); stroke-width: 1.25; }

.brush-layer, .area-catcher { touch-action: none; }
.area-catcher {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
}
.area-catcher[data-active="false"] { pointer-events: none; }
.area-catcher[data-active="true"] { cursor: crosshair; }

.map .leaflet-tile-pane, .editor-map .leaflet-tile-pane { filter: var(--map-tile-filter); }
.leaflet-container { font: inherit; background: rgb(var(--glass-rgb) / 1); }
.leaflet-container .leaflet-bar {
  border: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--material-thick);
  box-shadow: var(--edge-glass), var(--edge-outline), var(--shadow-2);
  -webkit-backdrop-filter: var(--blur-thick);
  backdrop-filter: var(--blur-thick);
}
.leaflet-container .leaflet-bar a, .leaflet-container .leaflet-bar a:hover {
  display: grid;
  place-items: center;
  width: var(--target);
  height: var(--target);
  line-height: 1;
  background: transparent;
  color: var(--label);
  border-bottom: var(--hairline) solid var(--separator);
  font-size: var(--fs-title-3);
}
.leaflet-container .leaflet-bar a:last-child { border-bottom: 0; }
.leaflet-container .leaflet-bar a:hover { background: var(--state-hover); }
.leaflet-container .leaflet-bar a.leaflet-disabled { color: var(--label-3); background: transparent; }
.leaflet-top.leaflet-right { top: calc(var(--s2) + var(--target)); }
.leaflet-control-attribution.leaflet-control {
  max-width: var(--list-w-max);
  margin: var(--s2);
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-s);
  background: var(--material-thick);
  color: var(--label-2);
  font-size: var(--fs-caption);
  box-shadow: var(--edge-glass), var(--edge-outline);
  -webkit-backdrop-filter: var(--blur-thick);
  backdrop-filter: var(--blur-thick);
}
.leaflet-control-attribution a { color: var(--label); text-decoration: underline; }
.leaflet-container .leaflet-control { margin-left: var(--s2); margin-top: var(--s2); }
.leaflet-container .leaflet-control-attribution { margin-left: 0; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .settings-btn, .show-area, .sheet, .btn, .input, .range, .group, .segmented, .editor-map, .map-frame, .login-card {
    border: var(--border) solid CanvasText;
  }
}