/*
 * Builder-local styles.
 *
 * Generic SESAM utilities (.sesam-blur, .sesam-cursor-help, .sesam-content-height,
 * .sesam-btn-outline-secondary, the .btn-success /
 * .btn-outline-light / .accordion-button / :focus baseline, inline-rename
 * input for #id_scenarioName) live in static/css/base.css and
 * components.css. Only true builder-specific rules remain here.
 */

/* Builder pages render edge-to-edge: drop the default container horizontal
   padding inherited from the central app shell. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  padding-left: 0;
  padding-right: 0;
}

.map {
  height: 100%;
  width: 100%;
  background-color: transparent;
}

/* Search results popover above the map. */
#searchresults {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  line-height: 2;
  display: inline-block;
  padding: 12px 0 0 0 !important;
}

ul.resultitems {
  list-style: none !important;
  font-size: 14px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.resultitems li {
  margin: 14px 0 !important;
}

.osm-relation-id,
.result-item-type {
  font-size: smaller;
  color: #6e707e;
}

.suggestion-popover {
  --bs-popover-header-bg: red !important;
  --bs-popover-header-font-size: 5px;
}

/* Secondary button uses the SESAM blue. */
.btn-secondary {
  background-color: var(--sesam-blue);
}

/* Builder modal accordion stays scrollable up to a max height. */
.accordion-body {
  overflow-y: scroll;
  max-height: 450px;
  padding: 1rem;
}

/* Options sidebar on the type scale (see tokens.css): card titles at item size, everything inside at body size.
   Bootstrap sets 1rem on form controls, so those need explicit overrides. */
.builder-options-col {
  font-size: var(--sesam-text-body);
}
.builder-options-col .form-control,
.builder-options-col .form-select,
.builder-options-col .form-label,
.builder-options-col .small {
  font-size: var(--sesam-text-body);
}
.builder-options-col .sesam-text-smaller {
  font-size: 0.75rem; /* one step below the meta size: the narrow label column must fit "Motorcycles" on one line */
}

.duration-input {
  border: 1px solid #ced4da;
}

/* Slightly tighter btn-group sizing inside the builder options panel. */
.btn-group-sm > .btn {
  padding: 0.25rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.5;
  border-radius: 0.2rem;
}

#generateModalHeader { border-bottom: none !important; }
#generateModalFooter { border-top: none !important; }

.form-check {
  padding-left: 1.5em;
}

/* Builder list-groups need flush top/bottom padding. */
.list-group-item:first-child { padding-top: 0 !important; }
.list-group-item:last-child  { padding-bottom: 0 !important; }

/* Vehicle rows of the random traffic card: name left, mode buttons right, TTF and count only for Custom. */
.sesam-builder-vehicle {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--sesam-gray-300);
}

.sesam-builder-vehicle:first-child {
  padding-top: 0;
}

#more-vehicles .sesam-builder-vehicle:last-child {
  border-bottom: 0;
}

.sesam-builder-vehicle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sesam-builder-vehicle-name {
  color: var(--sesam-gray-700);
  font-size: 0.8rem;
  white-space: nowrap;
}

.sesam-builder-vehicle.is-off .sesam-builder-vehicle-name,
.sesam-builder-vehicle.is-blocked .sesam-builder-vehicle-name {
  color: var(--sesam-gray-500);
}

/* Types that a car-only network excludes cannot be changed. */
.sesam-builder-vehicle.is-blocked .sesam-builder-segmented {
  opacity: 0.45;
  pointer-events: none;
}

.sesam-builder-vehicle-note {
  margin-top: 0.25rem;
}

.sesam-builder-vehicle-custom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.4rem;
  color: var(--sesam-gray-600);
  font-size: 0.75rem;
}

.sesam-builder-vehicle-custom label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.sesam-builder-vehicle-custom input {
  width: 4.2rem;
}

input[type="checkbox"][disabled] {
  background-color: #e9ecef;
  cursor: default;
}

/* Custom scenario ZIP upload. This follows the bounded detail-page pattern
   used by template instantiation while keeping the archive and its settings
   visually distinct. */
.sesam-upload-page {
  padding: 0;
}

.sesam-upload {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 2vw, 1.5rem) 3rem;
}

.sesam-upload-header {
  margin-bottom: 1.5rem;
}

.sesam-upload-header h1 {
  margin: 0;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-title);
  font-weight: 600;
}

.sesam-upload-header p {
  margin: 0.65rem 0 0;
  color: var(--sesam-gray-700);
  font-size: var(--sesam-text-body);
  line-height: 1.65;
}

.sesam-upload-layout {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sesam-upload-card,
.sesam-upload-config-card {
  overflow: hidden;
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.875rem;
  box-shadow: 0 0.25rem 0.875rem rgba(19, 50, 78, 0.05);
}

.sesam-upload-card-header,
.sesam-upload-config-card > header {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--sesam-card-border);
}

.sesam-upload-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.sesam-upload-card h2,
.sesam-upload-config-card h2,
.sesam-upload-next-info h2 {
  margin: 0;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-item);
  font-weight: 600;
}

.sesam-upload-card h2,
.sesam-upload-config-card h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.sesam-upload-card h2 i,
.sesam-upload-config-card h2 i,
.sesam-upload-next-info > i {
  color: var(--sesam-blue);
}

.sesam-upload-card-header p,
.sesam-upload-config-card header p {
  margin: 0.25rem 0 0;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
  line-height: 1.55;
}

.sesam-upload-filetypes-info {
  display: inline-flex;
  padding: 0 0.15rem;
  color: var(--sesam-gray-500);
  font-size: 0.75rem;
  line-height: inherit;
  text-decoration: none;
  vertical-align: baseline;
}

.sesam-upload-filetypes-info:hover,
.sesam-upload-filetypes-info:focus,
.sesam-upload-filetypes-info:active {
  color: var(--sesam-blue);
  text-decoration: none;
}

.sesam-upload-filetypes-popover code {
  display: inline-block;
  margin: 0.1rem 0;
  padding: 0.05rem 0.3rem;
  color: var(--sesam-heading-color);
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.25rem;
}

.sesam-upload-card-body {
  padding: 1.25rem;
}

.sesam-upload-dropzone {
  width: 100%;
  min-height: 16rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 2rem;
  color: var(--sesam-gray-600);
  background: rgba(var(--sesam-surface-muted-rgb), 0.32);
  border: 2px dashed var(--sesam-gray-400);
  border-radius: 0.7rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sesam-upload-dropzone:hover,
.sesam-upload-dropzone:focus-visible,
.sesam-upload-dropzone.highlight {
  background: rgba(var(--sesam-blue-rgb), 0.06);
  border-color: rgba(var(--sesam-blue-rgb), 0.7);
}

.sesam-upload-dropzone:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--sesam-blue-rgb), 0.2);
}

/* Plan without uploads: the dropzone stays visible but is greyed out and inert (see upload.js). */
.sesam-upload-dropzone-locked,
.sesam-upload-dropzone-locked:hover,
.sesam-upload-dropzone-locked:focus-visible {
  cursor: not-allowed;
  opacity: 0.6;
  background: rgba(var(--sesam-surface-muted-rgb), 0.32);
  border-color: var(--sesam-gray-400);
  box-shadow: none;
}
.sesam-upload-dropzone-locked .sesam-upload-dropzone-icon {
  color: var(--sesam-gray-600);
}

.sesam-upload-dropzone-icon,
.sesam-upload-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sesam-blue);
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.75rem;
}

.sesam-upload-dropzone-icon {
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.35rem;
  font-size: 1.35rem;
}

.sesam-upload-dropzone strong {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-section);
}

.sesam-upload-dropzone small {
  margin-top: 0.35rem;
}

.sesam-upload-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  min-height: 7.5rem;
  padding: 1rem;
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.7rem;
}

.sesam-upload-file-icon {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.1rem;
}

.sesam-upload-file-name {
  min-width: 0;
}

.sesam-upload-file-name strong,
.sesam-upload-file-name span {
  display: block;
}

.sesam-upload-file-name strong {
  overflow: hidden;
  color: var(--sesam-heading-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesam-upload-file-name span,
.sesam-upload-file-facts dt {
  color: var(--sesam-gray-600);
  font-size: 0.75rem;
}

.sesam-upload-file-facts {
  display: flex;
  gap: 1.5rem;
  margin: 0;
}

.sesam-upload-file-facts dd {
  margin: 0.2rem 0 0;
  color: var(--sesam-heading-color);
  font-family: var(--bs-font-monospace);
  font-size: 0.8rem;
}

.sesam-upload-clear,
.sesam-upload-clear:hover,
.sesam-upload-clear:focus,
.sesam-upload-clear:active {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem;
  color: var(--sesam-red-strong);
  font-size: 0.8rem;
  text-decoration: none;
}

.sesam-upload-clear {
  margin-left: 1.25rem;
}

.sesam-upload-simulation-settings {
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-upload-simulation-settings > details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.sesam-upload-simulation-settings > details > summary::-webkit-details-marker {
  display: none;
}

.sesam-upload-simulation-settings > details > summary strong,
.sesam-upload-simulation-settings > details > summary small {
  display: block;
}

.sesam-upload-simulation-settings > details > summary strong {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-item);
  font-weight: 600;
}

.sesam-upload-simulation-settings > details > summary small {
  margin-top: 0.2rem;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
}

.sesam-upload-simulation-settings > details[open] > summary {
  border-bottom: 1px solid var(--sesam-card-border);
}

.sesam-upload-simulation-settings details[open] .sesam-template-detail-disclosure-show { display: none; }
.sesam-upload-simulation-settings details:not([open]) .sesam-template-detail-disclosure-hide { display: none; }
.sesam-upload-simulation-settings details[open] .sesam-template-detail-disclosure i { transform: rotate(180deg); }

.sesam-upload-advanced {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 1.25rem;
}

.sesam-upload-switch {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: auto;
  margin: 0;
  padding-left: 0;
}

.sesam-upload-switch .form-check-input {
  flex: 0 0 auto;
  margin: 0.15rem 0 0;
}

.sesam-upload-switch strong,
.sesam-upload-switch small {
  display: block;
}

.sesam-upload-switch strong,
.sesam-upload-option-group legend {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-body);
  font-weight: 600;
}

.sesam-upload-switch small,
.sesam-upload-option-group p {
  margin: 0.2rem 0 0;
  color: var(--sesam-gray-600);
  font-size: 0.75rem;
}

.sesam-upload-option-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sesam-upload-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 0.7rem;
}

.sesam-upload-check-list label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sesam-gray-700);
  font-family: var(--bs-font-monospace);
  font-size: 0.8rem;
}

.sesam-upload-next-info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  background: rgba(var(--sesam-blue-rgb), 0.05);
  border: 1px solid rgba(var(--sesam-blue-rgb), 0.18);
  border-radius: 0.7rem;
}

.sesam-upload-next-info > i {
  margin-top: 0.15rem;
}

.sesam-upload-next-info p {
  margin: 0.35rem 0 0;
  font-size: var(--sesam-text-meta);
  line-height: 1.55;
}

.sesam-upload-config-card > header {
  background: var(--sesam-card-header-bg);
}

.sesam-upload-config-body {
  padding: 1.25rem;
}

.sesam-upload-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

.sesam-upload-field .form-label {
  margin-bottom: 0.4rem;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-meta);
  font-weight: 600;
}

.sesam-upload-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.sesam-upload-duration-summary {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.4rem;
  color: var(--sesam-gray-600);
  font-size: 0.72rem;
}

.sesam-upload-config-actions {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-upload-config-actions .sesam-upload-error {
  width: 100%;
}

.sesam-upload-submit-secondary {
  min-width: 12rem;
}

.sesam-upload-duration-summary strong {
  color: var(--sesam-heading-color);
  font-weight: 600;
}

.sesam-upload-error {
  margin: 0;
}

.sesam-upload-error > div {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sesam-red-strong);
}

.sesam-upload-error p {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
}

.sesam-upload-file-error {
  margin-top: 1rem;
}

.sesam-upload-submit-secondary:hover,
.sesam-upload-submit-secondary:focus,
.sesam-upload-submit-secondary:active {
  color: var(--bs-white);
  background: var(--sesam-green);
  border-color: var(--sesam-green);
}

.sesam-upload-notices {
  margin-top: 1.5rem;
  padding: 1rem 0;
  color: var(--sesam-gray-600);
  border-top: 1px solid var(--sesam-card-border);
  font-size: 0.78rem;
}

.sesam-upload-notices p {
  margin: 0;
  line-height: 1.5;
}

.sesam-upload-notices p > i {
  margin-right: 0.4rem;
}

.sesam-upload-notices a,
.sesam-upload-notices a:hover,
.sesam-upload-notices a:focus,
.sesam-upload-notices a:active {
  color: var(--sesam-blue);
  text-decoration: none;
}

@media (max-width: 991px) {
  .sesam-upload-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .sesam-upload-file {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sesam-upload-file-facts,
  .sesam-upload-clear {
    grid-column: 1 / -1;
  }

  .sesam-upload-file-facts {
    justify-content: space-between;
  }

  .sesam-upload-clear {
    margin-left: 0;
  }

  .sesam-upload-field-row {
    grid-template-columns: 1fr;
  }

  .sesam-upload-advanced {
    grid-template-columns: 1fr;
  }

  .sesam-upload-switch {
    grid-column: auto;
  }

  .sesam-upload-duration-summary {
    flex-direction: column;
  }

  .sesam-upload-config-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sesam-upload-submit-secondary {
    width: 100%;
  }
}

/* Coordinate readout overlay on the map. */
.mouseposition {
  font-size: 11px;
  line-height: 1.1;
  padding: 2px 5px 1px;
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  margin-left: 5px !important;
  margin-bottom: 5px !important;
}

/* Custom Builder layout: the map fills the page and the parameter sidebar floats over its right side as cards.
   Only the cards catch the pointer, so the gaps between them keep the map draggable. */
.sesam-builder-main {
  position: relative;
}

.sesam-builder-map {
  position: absolute;
  inset: 0;
}

.builder-options-col {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  width: 400px;
  pointer-events: none;
}

.sesam-builder-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  padding: 0.75rem;
  overflow-y: auto;
  scrollbar-width: thin;
  pointer-events: none;
}

.sesam-builder-sidebar > * {
  flex: none;
  pointer-events: auto;
}

/* The controls start below the search button (10px margin + 29px button + 10px gap); the attribution ends where the
   sidebar begins. */
.sesam-builder-map .maplibregl-ctrl-top-left {
  top: 39px;
}

@media (min-width: 992px) {
  .sesam-builder-map .maplibregl-ctrl-bottom-right {
    right: 400px;
  }
}

/* Narrow viewports: the cards stack below the map instead of floating over it. */
@media (max-width: 991px) {
  .sesam-builder-main {
    display: flex;
    flex-direction: column;
  }

  .sesam-builder-map {
    position: relative;
    inset: auto;
    flex: none;
    height: 40vh;
  }

  .builder-options-col {
    position: static;
    flex: 1;
    width: 100%;
    min-height: 0;
    background: var(--sesam-content-bg);
    pointer-events: auto;
  }

  .sesam-builder-sidebar {
    pointer-events: auto;
  }
}

/* One card per step, in the style of the Upload and Template pages: icon, title, description. */
.sesam-builder-card {
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.875rem;
  box-shadow: 0 0.25rem 0.875rem rgba(19, 50, 78, 0.12);
}

.sesam-builder-card-head {
  display: block;
  padding: 0.85rem 1rem;
  cursor: pointer;
  list-style: none;
}

.sesam-builder-card-head::-webkit-details-marker {
  display: none;
}

details[open] > .sesam-builder-card-head {
  border-bottom: 1px solid var(--sesam-card-border);
}

/* No ring around the whole header (it also showed after closing the dialog); keyboard focus tints the chevron. */
.sesam-builder-card-head:focus,
.sesam-builder-card-head:focus-visible {
  outline: none;
}

.sesam-builder-card-head:focus-visible .sesam-builder-card-chevron {
  color: var(--sesam-blue);
}

.sesam-builder-card-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.sesam-builder-card-row h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-item);
  font-weight: 600;
}

.sesam-builder-card-icon {
  color: var(--sesam-blue);
}

.sesam-builder-card-desc {
  margin: 0.25rem 0 0;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
  line-height: 1.55;
}

details:not([open]) > .sesam-builder-card-head .sesam-builder-card-desc {
  display: none;
}

/* Plan-limit notices sit in the header, above the divider, so they stay visible when the card is collapsed. */
.sesam-builder-card-head .sesam-plan-notice {
  margin-top: 0.6rem;
  cursor: default;
}

.sesam-builder-card-chevron {
  color: var(--sesam-gray-600);
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}

details[open] > .sesam-builder-card-head .sesam-builder-card-chevron {
  transform: rotate(180deg);
}

/* Summary on the right of a header: vehicle icons or flow color dots, cut with an ellipsis when too long. */
.sesam-builder-card-summary {
  position: relative;
  max-width: 9rem;
  min-width: 0;
  overflow: hidden;
  color: var(--sesam-gray-700);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesam-builder-card-summary:empty {
  display: none;
}

.sesam-builder-card-summary > * + * {
  margin-left: 0.35rem;
}

.sesam-builder-summary-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  vertical-align: middle;
  background: var(--flow-color, var(--sesam-gray-400));
  border-radius: 50%;
}

.sesam-builder-card-body {
  padding: 0.85rem 1rem 1rem;
}

/* Area card: once a rectangle is selected, the selection box and the remove link need less air than the start button. */
.sesam-builder-card-body-tight:has(#collapseSelectedArea:not(.d-none)) {
  padding-top: 0.5rem;
  padding-bottom: 0.35rem;
}

.sesam-builder-stack > * + * {
  margin-top: 0.75rem;
}

/* Label-prefixed inputs with equal prefix widths (Name, Location, Duration). The prefix is a <label>, which the global
   styles give a bottom margin; without resetting it the prefix box is shorter than the input next to it. */
.sesam-builder-prefix {
  width: 5.5rem;
  margin-bottom: 0;
}

.sesam-builder-unit {
  width: auto;
}

/* components.css renders every input#id_scenarioName as a bold heading for inline renaming; here the name is a plain
   field like Location and Duration. */
.sesam-builder-sidebar input#id_scenarioName {
  font-weight: 400;
  background-color: var(--bs-body-bg);
}

/* Entered and selected values use the same strong contrast as the scenario name. */
.sesam-builder-sidebar .form-control,
.sesam-builder-sidebar .form-select {
  color: var(--sesam-heading-color);
}

/* "More" / "Less" and "Add comment" links in SESAM blue. */
.sesam-builder-more-link,
.sesam-builder-more-link:visited {
  padding: 0.25rem 0;
  color: var(--sesam-blue);
  font-size: 0.8rem;
  text-decoration: none;
}

.sesam-builder-more-link:hover,
.sesam-builder-more-link:focus-visible {
  color: var(--sesam-dark-blue);
  text-decoration: underline;
}

/* Small info button after a card description, as on the Upload page. */
.sesam-builder-desc-info {
  padding: 0 0.2rem;
  color: var(--sesam-gray-500);
  font-size: 0.75rem;
  line-height: inherit;
  vertical-align: baseline;
}

.sesam-builder-desc-info:hover,
.sesam-builder-desc-info:focus-visible {
  color: var(--sesam-blue);
}

.sesam-builder-option-title {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--sesam-heading-color);
  font-size: 0.8rem;
  font-weight: 600;
}

.sesam-builder-option-desc {
  margin: 0.15rem 0 0 2.5em;
  color: var(--sesam-gray-600);
  font-size: 0.75rem;
}

.sesam-builder-option > .sesam-builder-option-title + div + .sesam-builder-option-desc {
  margin-left: 0;
}

/* The global .form-check padding is 1.5em; switches need room for the toggle. */
.sesam-builder-sidebar .form-switch {
  padding-left: 2.5em;
}

.sesam-builder-segmented .btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
}

.sesam-builder-segmented .btn-check:checked + .btn {
  color: var(--sesam-blue);
  background: rgba(var(--sesam-blue-rgb), 0.1);
  border-color: var(--sesam-blue);
}

/* Off selected: a neutral fill that keeps the dark outline of the other buttons, so the group does not look broken. */
.sesam-builder-segmented .btn-check:checked + .btn[for$="_off"] {
  color: var(--sesam-gray-700);
  background: var(--sesam-gray-300);
  border-color: var(--bs-btn-border-color);
}

/* Stylized selection box: one coordinate per side around the size of the selected rectangle. */
.sesam-builder-selbox {
  display: grid;
  grid-template-columns: 6rem 1fr 6rem;
  grid-template-areas: ". n ." "w size e" ". s .";
  gap: 0.1rem;
  align-items: center;
  justify-items: center;
}

.sesam-builder-selbox-size {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-area: size;
  width: 100%;
  min-height: 3.5rem;
  color: var(--sesam-blue);
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(var(--sesam-blue-rgb), 0.1);
  border: 2px dashed var(--sesam-blue);
  border-radius: var(--bs-border-radius-sm);
}

.sesam-builder-coord {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0 0.4rem;
  color: var(--sesam-gray-700);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.sesam-builder-coord abbr {
  color: var(--sesam-blue);
  font-weight: 700;
  text-decoration: none;
}

.sesam-builder-coord-n { grid-area: n; }
.sesam-builder-coord-w { grid-area: w; }
.sesam-builder-coord-e { grid-area: e; }
.sesam-builder-coord-s { grid-area: s; }

/* Flow rows: a compact head (color dot, name, vehicle type, rate) that opens the edit fields. */
.sesam-builder-flow {
  margin-bottom: 0.4rem;
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: var(--bs-border-radius);
}

.sesam-builder-flow-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-size: 0.8rem;
  text-align: left;
  background: transparent;
  border: 0;
}

.sesam-builder-flow-dot {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--flow-color, var(--sesam-gray-400));
  border-radius: 50%;
}

.sesam-builder-flow-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--sesam-heading-color);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesam-builder-flow-meta {
  color: var(--sesam-gray-600);
  font-size: 0.75rem;
  white-space: nowrap;
}

.sesam-builder-flow-outside {
  color: var(--sesam-blue);
}

.sesam-builder-flow-edit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem 0.6rem;
}

.sesam-builder-flow-edit-wide {
  grid-column: span 2;
}

.sesam-builder-flow-edit label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--sesam-gray-600);
  font-size: 0.6875rem;
}

.sesam-builder-flow-edit input[type="color"] {
  height: 1.9rem;
  padding: 0.1rem;
}

.sesam-builder-add-flow {
  width: 100%;
  padding: 0.5rem;
  color: var(--sesam-gray-600);
  font-size: 0.8rem;
  background: transparent;
  border: 1px dashed var(--sesam-gray-400);
  border-radius: var(--bs-border-radius);
}

.sesam-builder-add-flow:hover,
.sesam-builder-add-flow:focus-visible {
  color: var(--sesam-blue);
  background: rgba(var(--sesam-blue-rgb), 0.04);
  border-color: var(--sesam-blue);
}

/* Quiet hint (blue) for flows outside the area; amber stays reserved for plan limits. */
.sesam-builder-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  color: var(--sesam-gray-700);
  font-size: 0.8rem;
  line-height: 1.4;
  background: rgba(var(--sesam-blue-rgb), 0.06);
  border: 1px solid rgba(var(--sesam-blue-rgb), 0.18);
  border-radius: 0.5rem;
  box-shadow: inset 4px 0 0 rgba(var(--sesam-blue-rgb), 0.55);
}

.sesam-builder-notice > i {
  margin-top: 0.15rem;
  color: var(--sesam-blue);
}

/* About-style dialog for TTF and count. */
.sesam-builder-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  color: var(--sesam-gray-700);
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.875rem;
  box-shadow: 0 0.75rem 2.5rem rgba(19, 50, 78, 0.3);
}

.sesam-builder-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.sesam-builder-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--sesam-card-border);
}

.sesam-builder-dialog-head h2 {
  margin: 0;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-section);
  font-weight: 600;
}

.sesam-builder-dialog-body {
  max-height: calc(100vh - 11rem);
  padding: 1rem 1.1rem;
  overflow: auto;
}

.sesam-builder-dialog-body p {
  margin: 0 0 0.9rem;
}

.sesam-builder-dialog-body p:last-of-type {
  margin-bottom: 0.75rem;
}

.sesam-builder-dialog-foot {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-builder-presets-table {
  width: 100%;
  color: var(--sesam-gray-700);
  font-size: 0.75rem;
  border-collapse: collapse;
}

.sesam-builder-presets-table th,
.sesam-builder-presets-table td {
  padding: 0.35rem 0.3rem;
  text-align: right;
  white-space: nowrap;
  border-top: 1px solid var(--sesam-gray-300);
  font-variant-numeric: tabular-nums;
}

.sesam-builder-presets-table th {
  color: var(--sesam-heading-color);
  font-weight: 600;
  border-top: 0;
}

.sesam-builder-presets-table th:first-child,
.sesam-builder-presets-table td:first-child {
  padding-left: 0;
  text-align: left;
}

.sesam-builder-presets-table thead tr:first-child th:not(:first-child) {
  text-align: center;
  background: rgba(var(--sesam-blue-rgb), 0.1);
}

.sesam-builder-presets-table tbody th {
  border-top: 1px solid var(--sesam-gray-300);
}

.sesam-builder-presets-table thead tr:nth-child(2) th {
  color: var(--sesam-gray-600);
  font-size: 0.6875rem;
  text-align: right;
}

/* Separate preset groups with whitespace instead of visually heavy vertical rules. */
.sesam-builder-presets-table thead tr:nth-child(2) > :nth-child(2),
.sesam-builder-presets-table thead tr:nth-child(2) > :nth-child(4),
.sesam-builder-presets-table tbody tr > :nth-child(3),
.sesam-builder-presets-table tbody tr > :nth-child(5) {
  padding-right: 0.65rem;
}

.sesam-builder-presets-table thead tr:nth-child(2) > :nth-child(3),
.sesam-builder-presets-table thead tr:nth-child(2) > :nth-child(5),
.sesam-builder-presets-table tbody tr > :nth-child(4),
.sesam-builder-presets-table tbody tr > :nth-child(6) {
  padding-left: 0.65rem;
}

.sesam-builder-build-button {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

.sesam-builder-remove-selection,
.sesam-builder-remove-selection:hover,
.sesam-builder-remove-selection:focus,
.sesam-builder-remove-selection:active {
  margin-left: auto;
  padding: 0.25rem 0;
  font-size: 0.8rem;
  color: var(--sesam-red-strong);
  text-decoration: none;
}

.sesam-builder-remove-selection:hover,
.sesam-builder-remove-selection:focus {
  color: var(--sesam-red-strong);
  opacity: 0.8;
}

.sesam-builder-start-content {
  min-height: calc(100vh - var(--sesam-navbar-height) - 54px);
  display: flex;
  align-items: center;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.sesam-builder-start-actions {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem 0;
}

.sesam-builder-start-heading {
  margin-bottom: 2.25rem;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-title);
  font-weight: 600;
  text-align: center;
}

.sesam-builder-start-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.sesam-builder-start-card {
  position: relative;
  min-width: 0;
  min-height: 22rem;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  color: var(--bs-body-color);
  background: var(--sesam-card-bg);
  border: 2px solid var(--sesam-card-border);
  border-radius: 0.875rem;
  box-shadow: var(--sesam-shadow-soft);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sesam-builder-start-card-select-target {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  cursor: pointer;
}

.sesam-builder-start-card:hover {
  border-color: rgba(var(--sesam-blue-rgb), 0.4);
  box-shadow: var(--sesam-shadow-strong);
  transform: translateY(-2px);
}

.sesam-builder-start-choice:checked + .sesam-builder-start-card {
  border-color: var(--sesam-blue);
}

.sesam-builder-start-choice:disabled + .sesam-builder-start-card {
  cursor: not-allowed;
  opacity: 0.55;
}

.sesam-builder-start-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.sesam-builder-start-icon {
  width: 4rem;
  height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sesam-heading-color);
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 1rem;
  font-size: 1.65rem;
}

.sesam-builder-start-choice:checked + .sesam-builder-start-card .sesam-builder-start-icon {
  color: var(--bs-white);
  background: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.sesam-builder-start-radio {
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--sesam-gray-500);
  border-radius: 50%;
}

.sesam-builder-start-choice:focus-visible + .sesam-builder-start-card .sesam-builder-start-radio {
  box-shadow: 0 0 0 0.2rem rgba(var(--sesam-blue-rgb), 0.25);
}

.sesam-builder-start-choice:checked + .sesam-builder-start-card .sesam-builder-start-radio {
  border: 0.35rem solid var(--sesam-blue);
  background: var(--sesam-card-bg);
}

.sesam-builder-start-title {
  min-height: 2.6rem;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-section);
  font-weight: 600;
}

.sesam-builder-start-description {
  font-size: var(--sesam-text-body);
  line-height: 1.55;
}

.sesam-builder-start-meta {
  min-width: 0;
  margin-top: auto;
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: monospace;
  font-size: var(--sesam-text-meta);
}

.sesam-builder-start-card-action {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: 1rem;
}

.sesam-builder-start-pill {
  padding: 0.3rem 0.65rem;
  overflow: hidden;
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 999px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesam-builder-start-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  color: var(--bs-body-color);
  background-color: rgba(var(--sesam-blue-rgb), 0.05);
  border-color: rgba(var(--sesam-blue-rgb), 0.18);
}

.sesam-builder-start-info > i {
  margin-top: 0.15rem;
  color: var(--sesam-blue);
  font-size: 1.15rem;
}

.sesam-builder-start-info h2 {
  margin-bottom: 0.5rem;
  font-size: var(--sesam-text-body);
}

.sesam-builder-start-info p {
  margin-bottom: 0;
  font-size: var(--sesam-text-body);
}

@media (max-width: 991px) {
  .sesam-builder-start-content {
    align-items: flex-start;
  }

  .sesam-builder-start-options {
    grid-template-columns: 1fr;
  }

  .sesam-builder-start-card {
    min-height: 20rem;
  }
}

/* Scenario-template catalog. Cards stay server rendered while the controls
   filter and reorder them locally, so the page remains useful without an API roundtrip. */
.sesam-template-catalog {
  width: 100%;
  padding: 2rem clamp(1rem, 2vw, 2rem);
}

.sesam-template-catalog-header p {
  margin: 0.75rem 0 0;
  font-size: var(--sesam-text-body);
  line-height: 1.625;
}

.sesam-template-catalog-header h2 {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-title);
  font-weight: 600;
}

.sesam-template-filters {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.sesam-template-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.sesam-template-search {
  position: relative;
  flex: 0 1 25rem;
  width: 25rem;
  margin-bottom: 0;
}

.sesam-template-search > i {
  position: absolute;
  top: 50%;
  left: 0.8rem;
  z-index: 1;
  color: var(--sesam-gray-600);
  transform: translateY(-50%);
  pointer-events: none;
}

.sesam-template-search .form-control {
  padding-left: 2.35rem;
}

.sesam-template-filter-selects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.sesam-template-filter-selects label {
  margin-bottom: 0;
}

.sesam-template-filter-selects .form-select {
  width: auto;
  min-width: 8.75rem;
}

.sesam-template-mode-filters,
.sesam-template-mode-filter-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.sesam-template-mode-filter-label {
  margin-right: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.sesam-template-filter-pill,
.sesam-template-mode-pill {
  padding: 0.25rem 0.7rem;
  color: var(--sesam-gray-600);
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 999px;
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  line-height: 1.35;
}

.sesam-template-filter-pill {
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.sesam-template-filter-pill:hover {
  color: var(--sesam-heading-color);
  border-color: rgba(var(--sesam-blue-rgb), 0.5);
}

.sesam-template-filter-pill:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--sesam-blue-rgb), 0.25);
}

.sesam-template-filter-pill[aria-pressed="true"] {
  color: var(--bs-white);
  background: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.sesam-template-filter-summary {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sesam-card-border);
  font-size: 0.875rem;
}

.sesam-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 32rem));
  gap: 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.sesam-template-grid > li {
  height: 36rem;
  display: flex;
  min-width: 0;
}

.sesam-template-grid > li[hidden] {
  display: none;
}

.sesam-template-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sesam-card-bg);
  border: 2px solid var(--sesam-card-border);
  border-radius: 0.875rem;
  box-shadow: var(--sesam-shadow-soft);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sesam-template-card:hover {
  border-color: rgba(var(--sesam-blue-rgb), 0.4);
  box-shadow: var(--sesam-shadow-strong);
  transform: translateY(-2px);
}

.sesam-template-choice:focus-visible + .sesam-template-card,
.sesam-template-choice:checked + .sesam-template-card {
  border-color: var(--sesam-blue);
}

.sesam-template-choice:focus-visible + .sesam-template-card {
  box-shadow: 0 0 0 0.2rem rgba(var(--sesam-blue-rgb), 0.25);
}

.sesam-template-card-select-target {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  cursor: pointer;
}

.sesam-template-card-map {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--sesam-card-border);
}

.sesam-template-card-map img,
.sesam-template-card-map .sesam-template-preview-svg {
  transition: transform 0.5s ease;
}

.sesam-template-card:hover .sesam-template-card-map img,
.sesam-template-card:hover .sesam-template-card-map .sesam-template-preview-svg {
  transform: scale(1.05);
}

.sesam-template-map-badge {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.3rem 0.65rem;
  overflow: hidden;
  color: var(--sesam-heading-color);
  background: rgba(var(--bs-body-bg-rgb), 0.94);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-size: 0.75rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.sesam-template-location-badge {
  top: 0.75rem;
  left: 0.75rem;
  max-width: calc(100% - 4rem);
  font-weight: 600;
}

.sesam-template-location-badge i {
  color: var(--sesam-blue);
}

.sesam-template-area-badge {
  right: 0.75rem;
  bottom: 0.75rem;
  color: var(--sesam-gray-600);
  font-family: var(--bs-font-monospace);
}

.sesam-template-card-radio {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--sesam-card-bg);
  border: 2px solid var(--sesam-gray-500);
  border-radius: 50%;
  pointer-events: none;
}

.sesam-template-choice:checked + .sesam-template-card .sesam-template-card-radio {
  border: 0.35rem solid var(--sesam-blue);
}

.sesam-template-card-body {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.625rem;
  overflow: hidden;
  padding: 1rem 1.25rem 1.75rem;
}

.sesam-template-card-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-section);
  font-weight: 700;
  line-height: 1.375;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sesam-template-card-provider {
  min-height: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0 0;
  overflow: hidden;
  color: var(--sesam-gray-600);
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesam-template-card-description {
  min-height: 2.84375rem;
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--sesam-gray-600);
  font-size: 0.875rem;
  line-height: 1.625;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sesam-template-card-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: auto 0 0;
  padding: 0.25rem 0 0;
  list-style: none;
}

.sesam-template-mode-pill {
  display: inline-block;
}

.sesam-template-card-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-template-card-action {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
}

.sesam-template-card-footer p {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  color: var(--sesam-gray-600);
  font-size: 0.875rem;
  white-space: nowrap;
}

.sesam-template-custom-cta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--sesam-heading-color);
  background: rgba(var(--sesam-surface-muted-rgb), 0.4);
  border: 2px dashed var(--sesam-gray-400);
  border-radius: 0.875rem;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sesam-template-custom-cta:hover {
  color: var(--sesam-heading-color);
  background: var(--sesam-surface-muted);
  border-color: rgba(var(--sesam-blue-rgb), 0.6);
}

.sesam-template-custom-cta-icon,
.sesam-template-empty-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sesam-blue);
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.875rem;
  font-size: 1.35rem;
}

.sesam-template-custom-cta-title {
  font-weight: 700;
}

.sesam-template-custom-cta-text {
  max-width: 16rem;
  color: var(--sesam-gray-600);
  font-size: 0.875rem;
  line-height: 1.625;
}

.sesam-template-custom-cta-link {
  color: var(--sesam-blue);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.sesam-template-custom-cta-link:hover {
  color: var(--sesam-blue);
}

.sesam-template-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.5rem;
  padding: 4rem 1.5rem;
  background: rgba(var(--sesam-surface-muted-rgb), 0.4);
  border: 2px dashed var(--sesam-gray-400);
  border-radius: 0.875rem;
  text-align: center;
}

.sesam-template-empty-state[hidden] {
  display: none;
}

@media (max-width: 1199px) {
  .sesam-template-search {
    flex-basis: 22rem;
    width: 22rem;
  }
}

@media (max-width: 767px) {
  .sesam-template-catalog {
    padding: 2rem 1rem;
  }

  .sesam-template-filter-selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sesam-template-filter-selects .form-select {
    width: 100%;
    min-width: 0;
  }

  .sesam-template-search {
    flex-basis: 100%;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .sesam-template-filter-selects {
    grid-template-columns: 1fr;
  }
}

/* Scenario-template detail: keep the selected template and the copy form in
   view together on desktop, then stack both regions for narrow viewports. */
.sesam-template-detail-page {
  padding: 0;
}

.sesam-template-detail {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 2vw, 1.5rem) 4rem;
}

.sesam-template-detail-header {
  margin-bottom: 1.25rem;
}

.sesam-template-detail-header-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.sesam-template-detail-kind,
.sesam-template-detail-kind > span,
.sesam-template-detail-summary dd {
  display: inline-flex;
  align-items: center;
}

.sesam-template-detail-kind {
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--sesam-gray-600);
  font-size: 0.75rem;
}

.sesam-template-detail-kind > span {
  gap: 0.35rem;
}

.sesam-template-detail-kind-badge {
  min-height: 1.5rem;
  padding: 0.2rem 0.55rem;
  color: var(--sesam-blue);
  background: rgba(var(--sesam-blue-rgb), 0.09);
  border-radius: 0.4rem;
  font-weight: 600;
}

.sesam-template-detail-header h1 {
  margin: 0;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-title);
  font-weight: 600;
}

.sesam-template-detail-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0.55rem 0 0;
  font-size: var(--sesam-text-meta);
}

.sesam-template-detail-summary dd {
  gap: 0.4rem;
  margin: 0;
  color: var(--sesam-gray-700);
}

.sesam-template-detail-summary i {
  color: var(--sesam-gray-600);
  font-size: 0.75rem;
}

.sesam-template-detail-origin-link {
  overflow-wrap: anywhere;
}

.sesam-template-detail-summary a,
.sesam-template-detail-summary a:hover,
.sesam-template-detail-summary a:focus,
.sesam-template-detail-summary a:active,
.sesam-template-detail-metadata a,
.sesam-template-detail-metadata a:hover,
.sesam-template-detail-metadata a:focus,
.sesam-template-detail-metadata a:active {
  color: var(--sesam-blue);
}

.sesam-template-detail-description {
  max-width: 72ch;
  margin: 0.8rem 0 0;
  color: var(--sesam-gray-700);
  font-size: 0.875rem;
  line-height: 1.65;
}

.sesam-template-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 23.25rem);
  align-items: start;
  gap: 1.5rem;
}

.sesam-template-detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sesam-template-detail-preview-card,
.sesam-template-detail-card,
.sesam-template-detail-technical,
.sesam-template-create-card {
  margin: 0;
  overflow: hidden;
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.875rem;
  box-shadow: 0 0.25rem 0.875rem rgba(19, 50, 78, 0.05);
}

.sesam-template-detail-preview {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.sesam-template-detail-preview img,
.sesam-template-detail-preview .sesam-template-preview-svg {
  object-fit: contain;
}

.sesam-template-detail-preview figcaption {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  color: var(--sesam-heading-color);
  background: rgba(var(--bs-body-bg-rgb), 0.94);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.4rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
}

.sesam-template-detail-preview figcaption i {
  color: var(--sesam-blue);
}

.sesam-template-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-template-detail-facts > div {
  min-width: 0;
  padding: 0.9rem 1rem;
  border-left: 1px solid var(--sesam-card-border);
}

.sesam-template-detail-facts > div:first-child {
  border-left: 0;
}

.sesam-template-detail-facts dt {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sesam-gray-600);
  font-size: 0.72rem;
  font-weight: 600;
}

.sesam-template-detail-facts dt i {
  color: var(--sesam-gray-600);
}

.sesam-template-detail-facts dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesam-template-detail-facts dd:first-of-type {
  margin-top: 0.25rem;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-section);
  font-weight: 600;
}

.sesam-template-detail-card {
  padding: 1.25rem;
}

.sesam-template-detail-card > header {
  margin-bottom: 0.9rem;
}

.sesam-template-detail-card h2,
.sesam-template-create-card h2 {
  margin: 0;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-item);
  font-weight: 600;
}

.sesam-template-detail-card header p,
.sesam-template-create-card header > p {
  margin: 0.25rem 0 0;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
  line-height: 1.55;
}

.sesam-template-detail-mode-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sesam-template-detail-metadata {
  margin: 0;
}

.sesam-template-detail-metadata > div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-template-detail-metadata > div:first-child {
  padding-top: 0;
  border-top: 0;
}

.sesam-template-detail-metadata > div:last-child {
  padding-bottom: 0;
}

.sesam-template-detail-metadata dt {
  color: var(--sesam-gray-600);
  font-size: 0.75rem;
  font-weight: 600;
}

.sesam-template-detail-metadata dd {
  min-width: 0;
  margin: 0;
  font-size: var(--sesam-text-meta);
}

.sesam-template-detail-metadata strong,
.sesam-template-detail-metadata a {
  display: block;
}

.sesam-template-detail-metadata strong {
  color: var(--sesam-heading-color);
}

.sesam-template-detail-metadata a {
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.sesam-template-detail-technical summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.sesam-template-detail-technical summary::-webkit-details-marker {
  display: none;
}

.sesam-template-detail-technical summary strong,
.sesam-template-detail-technical summary small {
  display: block;
}

.sesam-template-detail-technical summary strong {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-item);
  font-weight: 600;
}

.sesam-template-detail-technical summary small {
  margin-top: 0.2rem;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
}

.sesam-template-detail-static-heading {
  padding: 1rem 1.25rem;
}

.sesam-template-detail-static-heading strong,
.sesam-template-detail-static-heading small {
  display: block;
}

.sesam-template-detail-static-heading strong {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-item);
  font-weight: 600;
}

.sesam-template-detail-static-heading small {
  margin-top: 0.2rem;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
}

.sesam-template-detail-disclosure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sesam-blue);
  font-size: 0.75rem;
  font-weight: 600;
}

.sesam-template-detail-disclosure-hide {
  display: none;
}

.sesam-template-detail-technical details[open] .sesam-template-detail-disclosure-show {
  display: none;
}

.sesam-template-detail-technical details[open] .sesam-template-detail-disclosure-hide {
  display: inline;
}

.sesam-template-detail-technical details[open] .sesam-template-detail-disclosure i {
  transform: rotate(180deg);
}

.sesam-template-detail-technical-content {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-template-detail-technical-content h3 {
  margin: 0 0 0.65rem;
  color: var(--sesam-heading-color);
  font-size: 0.8rem;
  font-weight: 600;
}

.sesam-template-detail-demand-description {
  margin: 0 0 1rem;
  color: var(--sesam-gray-700);
  font-size: var(--sesam-text-body);
  line-height: 1.65;
}

.sesam-template-detail-bounds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.sesam-template-detail-bounds > div {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.5rem;
}

.sesam-template-detail-bounds dt,
.sesam-template-detail-technical-list dt {
  color: var(--sesam-gray-600);
  font-size: 0.7rem;
  font-weight: 600;
}

.sesam-template-detail-bounds dd,
.sesam-template-detail-technical-list dd {
  margin: 0.15rem 0 0;
  overflow: hidden;
  color: var(--sesam-heading-color);
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  text-overflow: ellipsis;
}

.sesam-template-detail-technical-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
}

.sesam-template-detail-technical-list-primary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

.sesam-template-detail-technical-list-options {
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.sesam-template-detail-technical-list-options > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sesam-template-detail-technical-list-options dt {
  flex: 0 0 14rem;
}

.sesam-template-detail-technical-list-options dd,
.sesam-template-detail-technical-list-options .sesam-template-detail-value-list {
  margin-top: 0;
}

.sesam-template-detail-value-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.sesam-template-detail-value-list li {
  padding: 0.25rem 0.55rem;
  color: var(--sesam-heading-color);
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 999px;
  font-family: var(--bs-font-monospace);
  font-size: 0.72rem;
  line-height: 1.3;
}

.sesam-template-detail-aside {
  position: sticky;
  top: calc(var(--sesam-navbar-height) + 1rem);
}

.sesam-template-create-card > header,
.sesam-template-create-card-body {
  padding: 1.25rem;
}

.sesam-template-create-card > header {
  border-bottom: 1px solid var(--sesam-card-border);
}

.sesam-template-create-card h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--sesam-text-item);
}

.sesam-template-create-card h2 i {
  color: var(--sesam-blue);
}

.sesam-template-copy-flow {
  margin-top: 0.8rem;
  padding: 0.65rem;
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.625rem;
}

.sesam-template-copy-flow > div {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.sesam-template-copy-flow > div > span:last-child {
  min-width: 0;
}

.sesam-template-copy-flow strong,
.sesam-template-copy-flow small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesam-template-copy-flow strong {
  color: var(--sesam-heading-color);
  font-size: 0.78rem;
}

.sesam-template-copy-flow small {
  color: var(--sesam-gray-600);
  font-size: 0.7rem;
}

.sesam-template-copy-flow-icon {
  width: 1.8rem;
  height: 1.8rem;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--sesam-blue);
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.4rem;
}

.sesam-template-copy-flow-icon-target {
  color: var(--bs-white);
  background: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.sesam-template-copy-flow-connector {
  width: 1px;
  height: 0.8rem;
  display: block;
  margin-left: 0.9rem;
  border-left: 1px dashed var(--sesam-gray-500);
}

.sesam-template-form-field {
  margin-bottom: 1rem;
}

.sesam-template-form-field .form-label {
  margin-bottom: 0.4rem;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-meta);
  font-weight: 600;
}

.sesam-template-duration-summary {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.4rem;
  color: var(--sesam-gray-600);
  font-size: 0.72rem;
}

.sesam-template-duration-summary strong {
  color: var(--sesam-heading-color);
}

.sesam-template-create-actions {
  padding-top: 1rem;
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-template-create-actions p {
  margin: 0.55rem 0 0;
  color: var(--sesam-gray-600);
  font-size: 0.72rem;
  text-align: center;
}

.sesam-template-create-actions p i {
  margin-right: 0.3rem;
  color: var(--sesam-blue);
}

@media (max-width: 991px) {
  .sesam-template-detail-layout {
    grid-template-columns: 1fr;
  }

  .sesam-template-detail-aside {
    position: static;
  }
}

@media (max-width: 767px) {
  .sesam-template-detail-header-topline {
    align-items: flex-start;
  }

  .sesam-template-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sesam-template-detail-facts > div:nth-child(odd) {
    border-left: 0;
  }

  .sesam-template-detail-facts > div:nth-child(n + 3) {
    border-top: 1px solid var(--sesam-card-border);
  }

  .sesam-template-detail-bounds,
  .sesam-template-detail-technical-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .sesam-template-detail-header-topline,
  .sesam-template-duration-summary {
    flex-direction: column;
  }

  .sesam-template-detail-preview {
    aspect-ratio: 16 / 10;
  }

  .sesam-template-detail-metadata > div,
  .sesam-template-detail-bounds,
  .sesam-template-detail-technical-list {
    grid-template-columns: 1fr;
  }

  .sesam-template-detail-technical-list-options > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
  }

  .sesam-template-detail-technical-list-options dt {
    flex-basis: auto;
  }
}

/* Floating search button anchored to the top-left of the builder map, the size and margin of the MapLibre controls
   below it. */
.sesam-builder-mapsearch {
  margin: 10px 0 0 10px;
}

.sesam-builder-mapsearch .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  padding: 0;
  color: #333;
  font-size: 14px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important;
}

.sesam-builder-mapsearch .btn:hover,
.sesam-builder-mapsearch .btn:active {
  color: #333;
  /* MapLibre applies 5% black to a transparent button on a white control group. This button owns its white
     background, so use the resulting opaque color to prevent the map from showing through on hover. */
  background-color: rgb(242, 242, 242);
}

/* Narrow numeric input for builder random-traffic TTF / count fields. */
.sesam-builder-num-input { width: 55px; }

/* Cursor coordinates above the map scale; same translucent background, color and font size as the MapLibre scale. */
.sesam-builder-cursor-coords {
  background-color: hsla(0, 0%, 100%, 0.75);
  color: #333;
  font-size: 10px;
  padding: 0 5px;
}

/* Pill at the middle of a flow line: name, vehicle type icon and vehicles per hour, outlined in the color of the flow. */
.sesam-builder-flow-pill {
  max-width: 16rem;
  padding: 2px 8px;
  overflow: hidden;
  color: var(--sesam-gray-700);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  background: #fff;
  border: 2px solid var(--flow-color, var(--sesam-gray-400));
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  /* Above the selection handles, which are raised to 5 in map-view.js. */
  z-index: 10;
}

/* Opened flow rows turn their chevron, like the cards. */
.sesam-builder-chevron-open {
  transform: rotate(180deg);
}