/* ==========================================================================
   Design system: MadMapper interface panels (feature illustrations)
   Figma: Stage (10438:23993) · Layer Container "Video" (10438:24030)

   Panels fill their container (100 % × 100 %): they are placed and sized in CSS.
   Bars and rows keep their size (MadMapper UI), the view area and the list stretch;
   anything that overflows is clipped.
   Colors and typography = those of the MadMapper app (Inter 11 px), not the site.
   Icons: assets/madmapper/*.svg (colors embedded).
   Ported from the designer's export. Every selector is prefixed with :where(.ds): same specificity as the export, but no effect outside .ds containers.
   ========================================================================== */

:where(.ds) .mm-panel {
  --mm-header: #1c1c1c;
  --mm-panel: #282828;
  --mm-border: #363636;
  --mm-separator: #3c3c3c;
  --mm-text: #dadada;
  --mm-text-subtle: #c0c0c0;
  --mm-text-soft: #9a9a9a;
  --mm-text-muted: #828282;
  --mm-accent: #40c8dc;
  --mm-selected: #25565d;
  --mm-child-selected: #1b3539;
  /* Drop shadow, the same for all windows (softer than Figma: 0 9 10 black 75 %) */
  --mm-shadow: 0 6px 16px rgb(0 0 0 / 0.45);

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden; /* content follows the rounding of the outline */
  border: 1px solid var(--mm-border);
  border-radius: 4px;
  box-shadow: var(--mm-shadow);
  color: var(--mm-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: normal; /* Figma: "auto" line height; 100 % would clip g, p, y */
  user-select: none;
  container-type: inline-size; /* the bar adapts to the panel width */
}

:where(.ds) .mm-panel img {
  flex-shrink: 0;
}

/* ---- Title bar ---- */
:where(.ds) .mm-panel__header {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 28px;
  padding: 0 6px;
  overflow: hidden;
  border-bottom: 1px solid var(--mm-border);
  background-color: var(--mm-header);
}
:where(.ds) .mm-panel__start {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
:where(.ds) .mm-panel__title {
  flex-shrink: 0;
  padding: 0 6px;
  font-weight: 600;
  white-space: nowrap;
}
:where(.ds) .mm-panel__tools {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}
:where(.ds) .mm-panel__tools--wide {
  gap: 10px;
}
:where(.ds) .mm-panel__separator {
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  background-color: var(--mm-separator);
}
:where(.ds) .mm-panel__button {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 1px;
}
:where(.ds) .mm-panel__button img {
  width: 18px;
  height: 18px;
}
:where(.ds) .mm-panel__button--small img {
  width: 16px;
  height: 16px;
}

/* "Show: Output" dropdown */
:where(.ds) .mm-panel__dropdown {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 4px;
  white-space: nowrap;
}
:where(.ds) .mm-panel__dropdown-label {
  color: var(--mm-text-muted);
}
:where(.ds) .mm-panel__dropdown-value {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  color: var(--mm-text-subtle);
}
:where(.ds) .mm-panel__dropdown-value img {
  width: 10px;
  height: 10px;
  margin-top: 2px;
}

/* ---- Stage: view area ----
   Two veils in blend mode over what is behind (building photo), as in Figma:
   black in "saturation" (desaturates) + 70 % gray in "plus-lighter" (lightens), all at 50 %.
   Opacity is set on each veil and not on the area: opacity on the area
   would isolate it and the blend modes would no longer see the photo. */
:where(.ds) .mm-stage__view {
  position: relative;
  flex: 1;
  min-height: 0;
}
:where(.ds) .mm-stage__view::before,
:where(.ds) .mm-stage__view::after {
  content: "";
  position: absolute;
  inset: 0;
}
:where(.ds) .mm-stage__view::before { opacity: var(--mm-veil-before, 0.5); }
:where(.ds) .mm-stage__view::after { opacity: var(--mm-veil-after, 0.5); }
:where(.ds) .mm-stage__view::before {
  background-color: #000;
  mix-blend-mode: saturation;
}
:where(.ds) .mm-stage__view::after {
  background-color: rgb(97 97 97 / 0.7);
  mix-blend-mode: plus-lighter;
}

/* Input: a single veil, 30 % black in "soft-light" (Figma Content/Type=Empty) */
:where(.ds) .mm-stage__view--input {
  --mm-veil-before: 1;
  --mm-veil-after: 0;
}
:where(.ds) .mm-stage__view--input::before {
  background-color: rgb(0 0 0 / 0.3);
  mix-blend-mode: soft-light;
}
:where(.ds) .mm-stage__view--input::after {
  display: none;
}


/* ---- Video: surface list ---- */
:where(.ds) .mm-panel--layers {
  gap: 1px;
  background-color: var(--mm-separator);
}
:where(.ds) .mm-panel--layers .mm-panel__header {
  border-bottom: 0;
}

:where(.ds) .mm-layers {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  background-color: #000;
}
/* Panel background below the last row */
:where(.ds) .mm-layers::after {
  content: "";
  flex: 1;
  background-color: var(--mm-panel);
}

:where(.ds) .mm-layer {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: 24px;
  padding-right: 6px;
  background-color: var(--mm-panel);
  white-space: nowrap;
}
:where(.ds) .mm-layer--selected {
  background-color: var(--mm-selected);
}
:where(.ds) .mm-layer--child {
  background-color: var(--mm-child-selected);
}

/* Visibility cell, separated by a black rule */
:where(.ds) .mm-layer__visibility {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 100%;
  border-right: 1px solid #000;
}
:where(.ds) .mm-layer__visibility::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 1px;
  background-color: var(--mm-accent);
}
:where(.ds) .mm-layer--hidden .mm-layer__visibility::before {
  border: 1px solid #565656;
  background-color: #171717;
}

:where(.ds) .mm-layer__label {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
}
:where(.ds) .mm-layer--child .mm-layer__label {
  padding-left: 44px; /* 2 indents of 18 px + 8 px */
}
:where(.ds) .mm-layer__chevron {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
:where(.ds) .mm-layer__icon {
  width: 14px;
  height: 14px;
}
:where(.ds) .mm-layer__name {
  overflow: hidden;
  padding-left: 6px;
  text-overflow: ellipsis;
}
:where(.ds) .mm-layer--hidden .mm-layer__name {
  color: var(--mm-text-soft);
}
:where(.ds) .mm-layer__end {
  margin-left: auto;
}

/* ---- Narrow panel: secondary tools are removed rather than clipped ----
   .mm-panel__hide-md disappears below 400 px, .mm-panel__hide-sm below 280 px. */
@container (max-width: 400px) {
  :where(.ds) .mm-panel__hide-md { display: none; }
}
@container (max-width: 280px) {
  :where(.ds) .mm-panel__hide-sm { display: none; }
}

/* ==========================================================================
   Properties (Figma Properties › Surface "Quad-1"): collapsible sections
   Media, Appearance, FX, Output. Content clipped by the panel height.
   ========================================================================== */
:where(.ds) .mm-panel--properties {
  gap: 1px;
  background-color: var(--mm-separator);
}
:where(.ds) .mm-panel--properties .mm-panel__header {
  border-bottom: 0;
}
:where(.ds) .mm-properties {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  overflow: hidden;
}

/* Section: header + content as one block (the 1 px rule separates the sections, not the header from the content) */
:where(.ds) .mm-section {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  background-color: var(--mm-panel);
}

/* Section header: chevron + name */
:where(.ds) .mm-section__header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 11px 0 6px;
  background-color: var(--mm-panel);
}
:where(.ds) .mm-section__header img {
  width: 18px;
  height: 18px;
}
:where(.ds) .mm-section__content {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 8px;
  padding: 6px 12px 12px;
  background-color: var(--mm-panel);
}

/* Media card: thumbnail + type + name + settings */
:where(.ds) .mm-media {
  display: flex;
  height: 70px;
  overflow: hidden;
  border-radius: 4px;
  background-color: #171717;
}
:where(.ds) .mm-media__thumb {
  width: 90px;
  height: 100%;
  object-fit: cover;
}
:where(.ds) .mm-media__info {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  padding: 6px;
}
:where(.ds) .mm-media__type {
  padding: 0 6px;
  color: var(--mm-text-muted);
  font-size: 10px;
}
:where(.ds) .mm-media__name {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  color: var(--mm-text-subtle);
  font-weight: 600;
}

/* Setting row: 90 px right-aligned label + control */
:where(.ds) .mm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}
:where(.ds) .mm-row__label {
  flex: 0 0 90px;
  color: var(--mm-text-soft);
  text-align: right;
}
:where(.ds) .mm-row__control {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
}

/* Slider with ticks and value */
:where(.ds) .mm-slider {
  display: flex;
  flex: 1;
  gap: 2px;
  height: 18px;
  overflow: hidden;
  border-radius: 1px;
}
:where(.ds) .mm-slider__track {
  position: relative;
  flex: 1;
  background-color: #393939;
}
:where(.ds) .mm-slider__range {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 50%);
  border-right: 1px solid var(--mm-accent);
  background-color: #3195a4;
}
/* 3 ticks at the top of the rail */
:where(.ds) .mm-slider__track::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, transparent calc(25% - 0.5px), #000 0 calc(25% + 0.5px), transparent 0 calc(50% - 0.5px), #000 0 calc(50% + 0.5px), transparent 0 calc(75% - 0.5px), #000 0 calc(75% + 0.5px), transparent 0);
}
:where(.ds) .mm-slider__value {
  display: grid;
  flex: 0 0 52px;
  place-items: center;
  background-color: #393939;
}

/* Dropdown */
:where(.ds) .mm-select {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  padding: 0 2px 0 6px;
  border-radius: 1px;
  background-color: #393939;
}
:where(.ds) .mm-select img {
  width: 16px;
  height: 16px;
}

/* Segmented control with icons */
:where(.ds) .mm-segmented {
  display: flex;
  flex: 1;
  height: 24px;
  border: 1px solid #393939;
  border-radius: 1px;
  background-color: #393939;
}
:where(.ds) .mm-segmented > span {
  display: grid;
  flex: 1;
  place-items: center;
}
:where(.ds) .mm-segmented > .is-selected {
  border: 0.5px solid #2b707a;
  border-radius: 0.5px;
  background-color: #20444a;
}
:where(.ds) .mm-segmented img {
  width: 18px;
  height: 18px;
}

/* Numeric field with arrows */
:where(.ds) .mm-number {
  display: flex;
  flex: 1;
  gap: 1px;
  height: 20px;
  overflow: hidden;
  border-radius: 1px;
}
:where(.ds) .mm-number__value {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 0 6px;
  background-color: #393939;
}
:where(.ds) .mm-number__arrows {
  display: grid;
  flex: 0 0 16px;
  grid-template-rows: 1fr 1fr;
  place-items: center;
  background-color: #393939;
}
:where(.ds) .mm-number__arrows img {
  width: 10px;
  height: 10px;
}
:where(.ds) .mm-number__arrows img:last-child {
  transform: rotate(180deg);
}

/* Effect (FX): name + visibility + settings */
:where(.ds) .mm-fx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 6px 0 12px;
  border-radius: 4px;
  background-color: #171717;
  color: var(--mm-text-subtle);
  font-weight: 600;
}
:where(.ds) .mm-fx__actions {
  display: flex;
  gap: 6px;
}

/* ==========================================================================
   Media (laser media library): 3-column thumbnail grid,
   name below each thumbnail, selected media outlined.
   Thumbnails come from one sheet (--sheet on the grid) of 3 x 5 cells; --x and --y pick the cell.
   ========================================================================== */
:where(.ds) .mm-panel--media {
  background-color: var(--mm-panel);
}
:where(.ds) .mm-media-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content; /* thumbnails keep their height: the grid is clipped at the bottom, not squashed */
  align-content: start;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  list-style: none;
}
:where(.ds) .mm-media-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 1px;
  background-color: #1e1e1e;
}
:where(.ds) .mm-media-tile > * {
  flex-shrink: 0;
}
:where(.ds) .mm-media-tile__thumb {
  width: 100%;
  aspect-ratio: 172 / 132;
  background: #000 var(--sheet) no-repeat;
  background-size: 300% 500%;
  background-position: calc(var(--x) * 50%) calc(var(--y) * 25%);
}
:where(.ds) .mm-media-tile span {
  overflow: hidden;
  padding: 5px 4px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.ds) .mm-media-tile.is-selected {
  border-color: var(--mm-accent);
}
:where(.ds) .mm-media-tile.is-selected > span {
  background-color: var(--mm-selected);
}
/* Number of the media being played (top right corner) */
:where(.ds) .mm-media-tile span.mm-media-tile__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid var(--mm-accent);
  background-color: rgb(0 0 0 / 0.6);
  color: var(--mm-text);
  font-size: 10px;
  line-height: 1;
}