/* --------------------------------------------------
   SIC Presentation Map
-------------------------------------------------- */

.sic-map-slide-frame {
  padding: 0 !important;
  background: #ecebe6;
}

.sic-map-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  background: #ecebe6;
  color: #111;
}

.sic-map-canvas {
  position: absolute;
  inset: 0;
}

.sic-map-canvas,
.sic-map-canvas .maplibregl-map,
.sic-map-canvas .maplibregl-canvas-container,
.sic-map-canvas canvas {
  width: 100%;
  height: 100%;
}

.sic-map-canvas canvas {
  outline: none;
}

.sic-map-status {
  position: absolute;
  top: clamp(1.3rem, 3vmin, 3rem);
  left: clamp(1.3rem, 3vmin, 3rem);
  z-index: 4;

  max-width: 44rem;

  padding: 0.8rem 1rem;

  background: rgba(246, 245, 240, 0.78);
  backdrop-filter: blur(12px);
}

.sic-map-status-kicker {
  display: block;

  margin-bottom: 0.25rem;

  font-size: clamp(0.7rem, 1.1vmin, 1.05rem);
  line-height: 1;

  text-transform: uppercase;
  letter-spacing: 0.12em;

  opacity: 1;
}

.sic-map-status-title {
  display: block;

  font-size: clamp(1.5rem, 3.3vmin, 3.7rem);
  line-height: 0.98;

  font-weight: 560;
  letter-spacing: -0.035em;
}

.sic-map-route-legend {
  position: absolute;
  left: clamp(1.3rem, 3vmin, 3rem);
  bottom: clamp(1.3rem, 3vmin, 3rem);
  z-index: 4;

  display: flex;
  flex-direction: column;
  gap: 0.55rem;

  padding: 0.9rem 1rem;

  background: rgba(246, 245, 240, 0.82);
  backdrop-filter: blur(12px);

  font-size: clamp(0.75rem, 1.15vmin, 1.1rem);
}

.sic-map-route-legend[hidden] {
  display: none;
}

.sic-map-route-legend > span {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.sic-map-route-legend small {
  margin-top: 0.2rem;
  opacity: 0.58;
}

.sic-map-line {
  display: inline-block;

  width: 3rem;
  height: 0;

  border-top: 3px solid var(--sic-accent);
}

.sic-map-line-flight {
  border-top-style: dashed;
}

.sic-map-loading {
  position: absolute;
  inset: 0;
  z-index: 6;

  display: grid;
  place-items: center;

  background: #ecebe6;

  font-size: clamp(1rem, 1.8vmin, 1.6rem);
  opacity: 1;

  transition: opacity 220ms ease;
}

.sic-map-shell.is-ready .sic-map-loading {
  opacity: 0;
  pointer-events: none;
}

.sic-map-shell.has-error .sic-map-loading {
  opacity: 1;
  color: #8c3434;
}

/* Optional full-screen resource map */

.sic-resource-panel[data-resource-panel="map"] {
  position: absolute;
  inset: 0;

  padding: 0;
}

.sic-resource-map {
  position: absolute;
  inset: 0;
}

.sic-resource-map .sic-map-shell {
  position: absolute;
  inset: 0;
}

.sic-map-resource-controls {
  position: absolute;
  top: clamp(1.3rem, 3vmin, 3rem);
  left: 50%;
  z-index: 8;

  display: flex;
  gap: 0.65rem;

  transform: translateX(-50%);
}

.sic-map-resource-controls button {
  appearance: none;

  min-width: 7rem;
  min-height: 2.8rem;

  padding: 0.55rem 1rem;

  border: 1px solid rgba(20, 20, 20, 0.38);
  border-radius: 0;

  background: rgba(246, 245, 240, 0.82);
  color: #111;

  backdrop-filter: blur(12px);

  font: inherit;
  font-size: clamp(0.75rem, 1.15vmin, 1.05rem);
  letter-spacing: 0.09em;

  cursor: pointer;
}

.sic-map-resource-controls button:hover,
.sic-map-resource-controls button:focus-visible,
.sic-map-resource-controls button.is-active {
  border-color: var(--sic-accent);
  color: var(--sic-accent);
}

/* Keep map attribution present but quiet. */

.sic-map-shell .maplibregl-ctrl-attrib {
  font-size: 9px;
  opacity: 0.68;
}

/* Dark presentation mode */

body.sic-presentation-dark .sic-map-shell,
body.sic-presentation-dark .sic-map-slide-frame,
body.sic-presentation-dark .sic-map-loading {
  background: #101214;
  color: #f3f3f0;
}

body.sic-presentation-dark .sic-map-status,
body.sic-presentation-dark .sic-map-route-legend,
body.sic-presentation-dark .sic-map-resource-controls button {
  background: rgba(16, 18, 20, 0.80);
  color: #f3f3f0;
  border-color: rgba(255,255,255,0.34);
}

body.sic-presentation-dark
.sic-map-resource-controls button.is-active {
  color: var(--sic-accent);
  border-color: var(--sic-accent);
}

/* --------------------------------------------------
   ICORN map identity
-------------------------------------------------- */

.sic-map-icorn-logo {
  position: absolute;

  left: clamp(1.4rem, 3vmin, 3rem);
  bottom: clamp(1.4rem, 3vmin, 3rem);

  z-index: 7;

  width: clamp(6rem, 11vw, 12rem);
  height: auto;

  opacity: 0.90;

  pointer-events: none;
}

.sic-map-icorn-logo[hidden] {
  display: none;
}

/*
   When ICORN is visible, move the ordinary map
   attribution away from the logo where practical.
*/
.sic-map-shell:has(
  .sic-map-icorn-logo:not([hidden])
)
.maplibregl-ctrl-bottom-left {
  left: clamp(7rem, 13vw, 14rem);
}

/* === SIC MAP ICORN LARGE IDENTITY: START === */

.sic-map-icorn-logo {
  left:
    clamp(
      1.5rem,
      3vmin,
      3rem
    );

  /*
     Keep it clearly above the persistent presentation menu.
  */
  bottom:
    clamp(
      6rem,
      11vmin,
      10rem
    );

  /*
     Approximately three times the previous presentation size.
  */
  width:
    clamp(
      18rem,
      30vw,
      34rem
    );

  max-width: 44%;
}


/*
   Move MapLibre attribution clear of the larger ICORN mark.
*/

.sic-map-shell:has(
  .sic-map-icorn-logo:not([hidden])
)
.maplibregl-ctrl-bottom-left {
  left:
    clamp(
      20rem,
      34vw,
      38rem
    );
}

/* === SIC MAP ICORN LARGE IDENTITY: END === */

/* === SIC MAP SUBSLIDE NAVIGATION: START === */

.sic-map-state-nav {
  position: absolute;

  top: 50%;
  right: clamp(
    1rem,
    1.6vw,
    2rem
  );

  transform: translateY(-50%);

  z-index: 9;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: clamp(
    .55rem,
    1vmin,
    .9rem
  );

  padding:
    .65rem
    .5rem;
}


.sic-map-state-dot {
  width: clamp(
    .42rem,
    .55vmin,
    .62rem
  );

  height: clamp(
    .42rem,
    .55vmin,
    .62rem
  );

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    rgba(255, 255, 255, .48);

  box-shadow:
    0 0 0 1px
    rgba(0, 0, 0, .22);

  opacity: .72;

  cursor: pointer;

  transition:
    transform 150ms ease,
    opacity 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}


.sic-map-state-dot:hover {
  opacity: 1;
  transform: scale(1.3);
}


.sic-map-state-dot.is-active {
  background:
    var(--sic-accent);

  opacity: 1;

  transform: scale(1.45);

  box-shadow:
    0 0 0 2px
    rgba(255, 255, 255, .72);
}


.sic-map-state-dot:focus-visible {
  outline:
    2px solid
    var(--sic-accent);

  outline-offset: 4px;
}


body.sic-presentation-dark
.sic-map-state-dot:not(.is-active) {
  background:
    rgba(255, 255, 255, .52);

  box-shadow:
    0 0 0 1px
    rgba(255, 255, 255, .18);
}

/* === SIC MAP SUBSLIDE NAVIGATION: END === */

/* === SIC MAP ACCENT KICKER === */

.sic-map-status-kicker {
  color:
    var(--sic-accent) !important;

  font-weight: 600;

  letter-spacing: .16em;

  text-transform: uppercase;
}

/* === END SIC MAP ACCENT KICKER === */