/*
 * SESAM components.
 *
 * Reusable, project-specific classes. All classes are prefixed with `sesam-`
 * so they can never collide with Bootstrap or third-party styles.
 *
 * Section order:
 *   1. Text & color utilities
 *   2. Borders, shadows & separators
 *   3. Layout, sizing & cursors
 *   4. Overlays
 *   5. Buttons
 *   6. Forms & inputs
 *   7. Cards & overlays
 *   8. Chrome (topbar, dropdowns, list groups, modals, badges)
 *   9. Interactive (switch, terminal, toolbars)
 *  10. Widgets, marketing & misc
 */

/* ***************************************************
 * 1. TEXT & COLOR UTILITIES
 *
 * All `.sesam-text-*` color utilities use `!important` for parity with
 * Bootstrap's `.text-*` utilities; that way they always win against the
 * surrounding component color.
 * *************************************************** */

.sesam-text-green       { color: var(--sesam-green)         !important; }
.sesam-text-red         { color: var(--sesam-red-strong)    !important; }
.sesam-text-yellow      { color: var(--sesam-yellow)        !important; }
.sesam-text-heading     { color: var(--sesam-heading-color) !important; }
.sesam-text-premium     { color: var(--sesam-premium)       !important; }
.sesam-text-muted-soft  { color: var(--sesam-muted-soft)    !important; }

.sesam-text-gray-300    { color: var(--sesam-gray-300)      !important; }
.sesam-text-gray-400    { color: var(--sesam-gray-400)      !important; }
.sesam-text-gray-500    { color: var(--sesam-gray-500)      !important; }
.sesam-text-gray-600    { color: var(--sesam-gray-600)      !important; }
.sesam-text-gray-700    { color: var(--sesam-gray-700)      !important; }

/* Bold, heading-colored label. Apply to non-heading elements (e.g.
   dynamically generated <div>) that should match the SESAM h6 look. */
.sesam-label-strong {
  font-weight: 700;
  color: var(--sesam-heading-color);
}

/* Smaller text scale. `sesam-text-xs` (~60%) is below Bootstrap `.small`;
   `sesam-text-smaller` mirrors the CSS `smaller` keyword (~80%). */
.sesam-text-xs       { font-size: 60%; font-weight: 400; }
.sesam-text-smaller  { font-size: smaller; }

/* Bootstrap 5 removed `.text-justify`; this class restores the utility
   intentionally for free-form user comments. */
.sesam-text-justify        { text-align: justify; }
/* Preserve newlines from user input without collapsing whitespace runs. */
.sesam-whitespace-pre-line { white-space: pre-line; }
/* Comment popovers are plain-text (never HTML); keep the newlines the user typed. */
.sesam-comment-popover .popover-body { white-space: pre-line; }
/* Aggressive line-breaking inside tight UI rows (vehicle pickers etc.). */
.sesam-break-all           { word-break: break-all; }

/* ***************************************************
 * 2. BORDERS, SHADOWS & SEPARATORS
 * *************************************************** */

.sesam-border-start-teal     { border-left: 0.5rem solid var(--sesam-teal-muted)     !important; }
.sesam-border-start-info     { border-left: 0.5rem solid var(--sesam-accent-purple)  !important; }
.sesam-border-start-success  { border-left: 0.5rem solid var(--sesam-accent-green)   !important; }
.sesam-border-bottom-success { border-bottom: 0.5rem solid var(--sesam-accent-green) !important; }

.sesam-border-highlighted {
  border: 1px solid var(--sesam-marketing-blue-bright);
  box-shadow: var(--sesam-shadow-strong) !important;
}

.sesam-shadow        { box-shadow: var(--sesam-shadow-soft) !important; }
.sesam-shadow:hover {
  box-shadow: var(--sesam-shadow-strong) !important;
  border: 1px solid var(--sesam-gray-300);
}

/* Thin 2-pixel horizontal separator used between sections (plans, usage,
   account pages). Resets the default <hr> chrome so margins can be
   supplied via Bootstrap utility classes (e.g. `mb-4`, `my-4`). */
.sesam-hr-thin {
  margin: 0;
  border: none;
  height: 2px !important;
  background-color: var(--sesam-gray-300);
}

/* ***************************************************
 * 3. LAYOUT, SIZING & CURSORS
 * *************************************************** */

/* Full-height container minus the white navbar and a 1.5rem mb-4 offset. */
.sesam-container-height          { height: calc(100% - calc(1.5rem + var(--sesam-navbar-height))); }
/* Same but used where the white navbar has no bottom margin. */
.sesam-container-height-complete { height: calc(100% - var(--sesam-navbar-height)); }
/* Inside editor/builder map pages a sub-menubar takes 54px. */
.sesam-content-height            { height: calc(100% - 54px) !important; }

/* Minimum height for map containers before MapLibre measures the canvas. */
.sesam-map-min                   { min-height: 350px; }

/* Narrow centered card (e.g. 404 fallback page). Width helper, no chrome. */
.sesam-narrow-card               { width: 100%; max-width: 540px; }

.sesam-ellipsis {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.sesam-cursor-help        { cursor: help; }
.sesam-cursor-pointer     { cursor: pointer; }

/* ***************************************************
 * 4. OVERLAYS
 * *************************************************** */

/* Translucent overlay used by builder/editor while a long action runs. The
   `top` offset clears the white application navbar so the overlay starts
   below it; +15px keeps a small gap consistent with the historical look. */
.sesam-blur {
  position: fixed;
  top: calc(var(--sesam-navbar-height) + 15px);
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  z-index: 1000;
  text-shadow: rgba(255, 255, 255, 0.5) 0 3px 3px;
  background-color: rgba(255, 255, 255, 0.9);
}

/* Use a real CSS backdrop-filter blur where the browser supports it; the
   solid white fallback above kicks in otherwise. */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .sesam-blur {
    background: rgba(180, 180, 180, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Translucent white overlay used for the analyzer/editor map loading spinner. */
.sesam-map-spinner-overlay {
  background-color: rgba(255, 255, 255, 0.55);
  z-index: 10;
}

/* ***************************************************
 * 5. BUTTONS
 * *************************************************** */

.sesam-btn-xs,
.sesam-btn-group-xs > .btn {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  border-radius: 0.2rem !important;
}

.sesam-btn-light-border {
  color: var(--sesam-gray-700);
  border: 1px solid var(--sesam-gray-400);
}

/* Outline-secondary in SESAM blue (legacy builder button). */
.sesam-btn-outline-secondary {
  color: var(--sesam-blue);
  background-color: #fff;
  background-image: none;
}
.sesam-btn-outline-secondary:hover {
  background-color: var(--sesam-blue);
  color: #fff;
}

/* ***************************************************
 * 6. FORMS & INPUTS
 * *************************************************** */

/* Account login/registration field with a leading icon inside the input
   box. The icon is positioned absolutely on the left edge; the input
   reserves matching left padding so text never overlaps the glyph. */
.sesam-input-icon-wrap {
  position: relative;
  /* Vertical breathing room between stacked input groups, mirroring the
     legacy Bootstrap 4 `.form-group` default. */
  margin-bottom: 1rem;
}

.sesam-input-icon-wrap .fa-solid,
.sesam-input-icon-wrap .far {
  position: absolute;
  padding: 16px;
  pointer-events: none;
}

.sesam-input-icon-wrap .fa-solid { left: 0; }
/* `.far` is intentionally pinned to the right edge: the only Font Awesome
   `.far` glyph used inside the login form is the password-reveal eye icon,
   which sits opposite the left-side `.fa-solid` icon. */
.sesam-input-icon-wrap .far      { right: 0; }
/* Left padding for the input itself is set by the input's own class
   (e.g. `.sesam-form-control-user`) so the value can match the icon size
   and beat the wrap selector's specificity. */

/* Bold, heading-colored input that visually reads as a heading and only
   shows a border on hover. Used by builder/editor/simulator for scenario
   and simulation names rendered inline. */
.sesam-inline-rename-input,
input#id_scenarioName,
input#id_simulation_name,
input#id_simulationName,
input#scenario_name_input {
  font-weight: 700;
  color: var(--sesam-heading-color);
  background: transparent;
}

.sesam-input-hover-bordered        { border: 1px solid transparent; }
.sesam-input-hover-bordered:hover  { border: 1px solid var(--sesam-gray-400); border-radius: 0.35rem; }

/* Transparent input-group addon (e.g. unit labels like "step" or "seconds"). */
.sesam-input-group-text-transparent { background-color: transparent !important; }

/* Password input that leaves room on the right for a visibility toggle. */
.sesam-password-input-with-toggle { padding-right: 40px !important; }

/* Progress bar slimmer than the Bootstrap default. */
.sesam-progress-thin { height: 4px; }

/* Slightly enlarge Font Awesome solid icons inside Bootstrap nav tabs / pills
   so the tab labels match the legacy SESAM weight. Matches `.fas` only, so
   icons declared as `fa-solid` (FA6 shorthand) keep their natural 1em size. */
.nav-link .fas { font-size: 18px; }

/* Auth/account form inputs and submit button (legacy SB-Admin "form-user"
   look). Standalone classes; no longer scoped to `form.user`. */
.sesam-form-control-user {
  /* Explicit height keeps the input visually compact even though the
     padding is generously sized to leave room for the leading icon. */
  height: calc(1.5em + 0.75rem + 2px);
  padding: 1.5rem 1rem 1.5rem 40px;
  color: var(--sesam-blue) !important;
}

.sesam-btn-user { padding: 0.75rem 1rem; }

/* ***************************************************
 * 7. CARDS & OVERLAYS
 * *************************************************** */

.sesam-content-card {
  padding: 2rem;
  background-color: var(--sesam-card-bg);
  border: 1px solid var(--sesam-gray-300);
}

/* Dashed-outline card used for "new …" tiles across workspace/builder. */
.sesam-card-dashed {
  border-style: dashed;
  border-width: 2px;
  color: inherit;
}

.sesam-card-dashed-hover:hover {
  background-color: rgba(var(--sesam-surface-muted-rgb), 0.1);
}

/* Workspace card-overlay link covers the full card area. No z-index: the
   later-in-DOM positioned dropdown must stay clickable above the overlay. */
.sesam-card-overlay-link {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  cursor: pointer;
  text-decoration: none;
}

/* Selectable tile (vehicle-class picker etc.). The hover/selected states
   use the rgb-triplet tokens so dark-mode flips the alpha colors along
   with the surrounding theme. */
.sesam-selectable-card {
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition:
    border-color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.sesam-selectable-card:hover {
  border-color: var(--sesam-gray-700);
  background-color: rgba(var(--sesam-gray-600-rgb), 0.08);
}
.sesam-selectable-card.selected {
  border-color: var(--sesam-blue);
  background-color: rgba(var(--sesam-blue-rgb), 0.08);
  box-shadow: 0 0 0 0.2rem rgba(var(--sesam-blue-rgb), 0.25);
}

/* Template SVGs contain only grayscale geometry with transparency. The surface
   color therefore remains a frontend decision and can vary by display context. */
.sesam-template-preview {
  --sesam-template-preview-color: var(--sesam-blue-rgb);
  background-color: rgba(var(--sesam-template-preview-color), 0.12);
}

.sesam-template-preview img,
.sesam-template-preview-svg {
  display: block;
  width: 100%;
  height: 100%;
  color: rgb(var(--sesam-template-preview-color));
  opacity: 0.78;
}

.sesam-scenario-image {
  display: block;
  width: 100px;
  height: auto;
}
[data-bs-theme="dark"] .sesam-scenario-image {
  -webkit-filter: invert(1);
  filter: invert(1);
}

.sesam-release-name {
  font-weight: 700;
  color: var(--sesam-heading-color);
  font-size: 1rem;
}
.sesam-release-date {
  color: var(--sesam-gray-400);
  font-size: 80%;
  font-weight: 400;
}

/* ***************************************************
 * 8. CHROME — TOPBAR, DROPDOWNS, LIST GROUPS, MODALS, BADGES
 * *************************************************** */

/* h1 used in the white topbar to render the current page title. */
.sesam-page-title       { font-size: 1rem;   font-weight: bolder; }

/* Compact breadcrumb used in the topbar when a page needs hierarchy without
   competing with its main content heading. */
.sesam-page-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: min(48rem, 60vw);
  color: var(--sesam-gray-500);
  font-size: 0.875rem;
  font-weight: 500;
}

.sesam-page-breadcrumb-item {
  min-width: 0;
  max-width: 18rem;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sesam-page-breadcrumb-link {
  color: var(--sesam-gray-500);
  font-weight: 500;
}

.sesam-page-breadcrumb-link:hover,
.sesam-page-breadcrumb-link:focus-visible,
.sesam-page-breadcrumb-link:active {
  color: var(--sesam-blue);
}

.sesam-page-breadcrumb-separator {
  flex: 0 0 auto;
  color: var(--sesam-gray-400);
  font-size: 0.625rem;
}

.sesam-page-breadcrumb-intermediate {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sesam-page-breadcrumb input#scenario_name_input {
  max-width: 16rem;
  color: var(--sesam-gray-500);
  font-size: 0.875rem;
  font-weight: 500;
}

@media (max-width: 575px) {
  .sesam-page-breadcrumb {
    max-width: 60vw;
  }

  .sesam-page-breadcrumb-intermediate {
    display: none;
  }
}

/* h1 used on auth/account form pages (login, register, welcome, logout). */
.sesam-form-page-title  { font-size: 1.4rem; font-weight: bolder; }

/* Wider topbar user dropdown to fit the plan badge, with a soft shadow.
   Typography and border color come from the global `.dropdown-menu` rule
   in base.css. */
.sesam-user-dropdown-menu {
  min-width: 250px;
  box-shadow: var(--sesam-shadow-soft) !important;
}

/* Footer row inside a dropdown (Privacy / Terms / Imprint links). Shares
   horizontal padding with the surrounding .dropdown-item rows. */
.sesam-user-dropdown-menu .dropdown-element {
  padding: 0.25rem 1.5rem;
}

.sesam-no-caret::after { display: none !important; }

.sesam-build-upload-dropdown .dropdown-menu {
  margin-top: -36px !important;
}

/* Common icon spacing utilities shared across SESAM apps. Spacing is given
   in rem so the gap scales with the surrounding text. */
.sesam-icon-dropdown-item { margin-right: 0.7rem; }   /* icons inside .dropdown-item */
.sesam-icon-label         { margin-right: 0.45rem; }  /* icons in front of inline labels */
.sesam-icon-chevron       { margin: 0 0.125rem; }     /* small chevron inside icon-only dropdown buttons */

/* Active list-group item rendered like a regular item (no SESAM-blue fill).
   Used by the workspace scenario detail page. */
.list-group-item.active.sesam-list-no-active {
  background-color: inherit;
  color: inherit;
  border-color: rgba(0, 0, 0, 0.125);
  border-top-width: 0 !important;
  margin-top: 0 !important;
}

/* Inline list-style helper for marker text inside modal bodies. */
.sesam-list-style-inside { list-style: inside; }

/* Light/header strip used in muted modals such as the About dialog. */
.sesam-modal-header-muted { background-color: var(--sesam-surface-muted); }

/* Light-red form warning box and matching label, used by destructive flows. */
.sesam-danger-box {
  background-color: var(--sesam-danger-bg);
  border-radius: 0.35rem;
  border: 1px solid var(--sesam-danger-border);
}
.sesam-danger-box-label {
  color: var(--sesam-red);
  font-weight: bold;
}

.sesam-counter-badge {
  background-color: var(--sesam-card-header-bg);
  color: var(--sesam-gray-700);
}

/* Plan-status pill ("Active", "Trial", …) aligned with the surrounding h6. */
.sesam-plan-status-badge {
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* Notice for "your plan does not allow this": a warm amber card with a filled icon tile, noticeable without the
   alarm of a red Bootstrap alert. Markup: <div class="sesam-plan-notice" role="note"><span
   class="sesam-plan-notice-icon"><i class="fa-solid fa-lock"></i></span><div class="sesam-plan-notice-body">…</div>
   </div>. Toggle visibility with `d-none` only; `d-block` would override the flex layout. */
.sesam-plan-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--sesam-heading-color);
  background-color: rgba(var(--sesam-yellow-rgb), 0.14);
  border: 1px solid rgba(var(--sesam-yellow-rgb), 0.45);
  border-radius: 0.5rem;
  /* The accent strip is an inset shadow (not border-left) so it follows the rounded corners without tapering. */
  box-shadow: inset 5px 0 0 var(--sesam-yellow), var(--sesam-shadow-soft);
}
/* Compact variant for page-level notices: as wide as its text instead of the full content width. */
.sesam-plan-notice-compact {
  width: fit-content;
  max-width: min(100%, 36rem);
}
/* Selection table whose rows cannot be chosen because the plan lacks the feature. */
.sesam-table-locked {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed;
}
.sesam-plan-notice-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
  color: #fff;
  background-color: var(--sesam-yellow);
  border-radius: 50%;
}
.sesam-plan-notice-body { flex: 1 1 auto; min-width: 0; align-self: center; text-wrap: pretty; }
.sesam-plan-notice-body strong { font-weight: 600; }
/* Plan name inside running text ("Your Starter plan …"): semibold, no further chrome. */
.sesam-plan-name {
  font-weight: 600;
  white-space: nowrap;
}

/* About dialog header: logo left, version pill and close button right, on a flat light brand tint with a
   brand-colored strip on top. */
.sesam-about-header {
  align-items: center;
  padding: 1.1rem 1.25rem;
  background-color: rgba(var(--sesam-blue-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--sesam-blue-rgb), 0.12);
  box-shadow: inset 0 4px 0 var(--sesam-blue);
}
.sesam-about-version {
  font-weight: 500;
  color: var(--sesam-blue);
  background-color: var(--sesam-card-bg);
  border: 1px solid rgba(var(--sesam-blue-rgb), 0.25);
}

/* About dialog (guests): one usage row = label and remaining count above a slim progress bar. */
.sesam-about-meter {
  margin-bottom: 1rem;
  font-size: 0.875rem;
}
.sesam-about-meter .progress { margin-top: 0.35rem; }
/* Plan name in the plan's own color (set as --sesam-plan-color from the plan definition). */
.sesam-about-plan-name {
  font-weight: 600;
  color: var(--sesam-plan-color, inherit);
}

/* Feedback form: Django's field error lists as small red text under the field. */
#feedbackForm .errorlist {
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--sesam-red-strong);
}

/* Feedback page for guests: centered call-to-action card with a round brand-tinted icon on top. */
.sesam-feedback-gate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.25rem;
  font-size: 1.6rem;
  color: var(--sesam-blue);
  background-color: rgba(var(--sesam-blue-rgb), 0.1);
  border-radius: 50%;
}

/* ***************************************************
 * 9. INTERACTIVE — MONTHLY/YEARLY SWITCH, TERMINAL, TOOLBARS
 * *************************************************** */

/* Monthly/yearly switch (plans page + simulator). Pill border-radius and
   the 4px padding are decorative; the rest of the geometry scales with
   text via rem units.
   Source: https://webdesign.tutsplus.com/tutorials/pricing-table-with-monthly-yearly-css-toggle-switch--cms-93335 */
.sesam-switch {
  position: relative;
  display: inline-flex;
  padding: 4px;
  border: 1px solid lightgrey;
  margin-bottom: 1.25rem;
  border-radius: 30px;
  background: white;
}
.sesam-switch [type="radio"] {
  position: absolute;
  left: -9999px;
}
.sesam-switch [type="radio"]:checked#first_option ~ label[for="first_option"],
.sesam-switch [type="radio"]:checked#second_option ~ label[for="second_option"] {
  color: white;
}
.sesam-switch [type="radio"]:checked#first_option ~ label[for="first_option"]:hover,
.sesam-switch [type="radio"]:checked#second_option ~ label[for="second_option"]:hover {
  background: transparent;
}
.sesam-switch [type="radio"]:checked#first_option + label[for="second_option"] ~ .sesam-switch-highlighter {
  transform: none;
}
.sesam-switch [type="radio"]:checked#second_option + label[for="first_option"] ~ .sesam-switch-highlighter {
  transform: translateX(100%);
}
.sesam-switch label {
  font-size: 0.875rem;
  z-index: 1;
  min-width: 5.625rem;
  line-height: 1.75rem;
  cursor: pointer;
  border-radius: 30px;
  transition: color 0.25s ease-in-out;
  margin-bottom: 0 !important;
}
.sesam-switch label:hover {
  background: whitesmoke;
}
.sesam-switch-highlighter {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 30px;
  background: var(--sesam-blue);
  transition: transform 0.25s ease-in-out;
}

.sesam-terminal {
  background-color: var(--sesam-terminal-bg) !important;
  overflow-x: auto;
  white-space: nowrap;
  color: var(--sesam-terminal-fg) !important;
}

/* Base toolbar used across SESAM app pages. `z-index: 5` keeps the
   toolbar above in-page dropdowns and overlays; the inner container and
   buttons are layered above the toolbar background so click targets are
   never occluded. */
.sesam-toolbar {
  min-height: 54px !important;
  position: relative;
  z-index: 5;
}
.sesam-toolbar > .container-fluid { position: relative; z-index: 1; }
.sesam-toolbar .btn               { position: relative; z-index: 2; }

/* Three-part workflow toolbar shared by Builder, Editor, Simulator and Analyzer. */
.navbar.sesam-toolbar > .sesam-flow-toolbar {
  width: 100%;
  display: grid;
  grid-template-areas: "start hint end";
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}

.sesam-flow-toolbar-start {
  grid-area: start;
  justify-self: start;
}

.sesam-flow-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.5rem;
  color: var(--sesam-gray-600);
  background: transparent;
  border: 0;
  border-radius: var(--bs-border-radius-sm);
  box-shadow: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.sesam-flow-back:visited { color: var(--sesam-gray-600); }
.sesam-flow-back:hover,
.sesam-flow-back:focus,
.sesam-flow-back:active {
  color: var(--sesam-blue);
  background: transparent;
  text-decoration: none;
}

.sesam-flow-toolbar-hint {
  grid-area: hint;
  color: var(--sesam-gray-600);
  font-weight: 600;
  text-align: center;
  user-select: none;
}

.sesam-flow-toolbar-end {
  grid-area: end;
  justify-self: end;
}

/* Shared introduction and table shell for selection-based app start pages. */
.container-fluid.sesam-selection-page {
  width: 100%;
  padding: 2rem clamp(1rem, 2vw, 2rem) 1.5rem;
}

.sesam-selection-page-header {
  margin-bottom: 2rem;
}

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

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

/* Work panels of the tools (simulator options, analyzer sidebar, ...) on the type scale from tokens.css: panel headers
   at item size, everything inside at body size. Bootstrap sets 1rem on accordion buttons and form controls, so those
   need explicit overrides. */
.sesam-app-panel {
  font-size: var(--sesam-text-body);
}
.sesam-app-panel .accordion-button {
  font-size: var(--sesam-text-item);
}
.sesam-app-panel .form-control,
.sesam-app-panel .form-select,
.sesam-app-panel .form-label {
  font-size: var(--sesam-text-body);
}

.sesam-selection-table {
  overflow: hidden;
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: var(--bs-border-radius-sm);
}

@media (max-width: 575px) {
  .navbar.sesam-toolbar > .sesam-flow-toolbar {
    grid-template-areas: "start end";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sesam-flow-toolbar-hint {
    display: none;
  }
}

/* Reusable status surface for Builder workflows that report structured task
   stages. The bounded column follows the detail-page layout pattern while the
   individual panels can be shared by template, upload and custom-build tasks. */
.container-fluid.sesam-async-task-page {
  width: 100%;
  min-height: calc(100vh - var(--sesam-navbar-height) - 54px);
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) 3rem;
}

.sesam-async-task {
  width: min(100%, 60rem);
  margin: 0 auto;
}

.sesam-async-task-hero {
  text-align: center;
}

.sesam-async-task-hero h2 {
  margin: 1rem 0 0.5rem;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-title);
  font-weight: 600;
}

.sesam-async-task-hero p {
  margin: 0;
  font-size: var(--sesam-text-body);
}

.sesam-async-task-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  color: var(--sesam-gray-700);
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sesam-async-task-status-processing {
  color: var(--sesam-blue);
  background: rgba(var(--sesam-blue-rgb), 0.08);
  border-color: rgba(var(--sesam-blue-rgb), 0.25);
}

.sesam-async-task-status-success {
  color: var(--sesam-green);
  background: rgba(var(--bs-success-rgb), 0.08);
  border-color: rgba(var(--bs-success-rgb), 0.3);
}

.sesam-async-task-status-failure {
  color: var(--sesam-red-strong);
  background: var(--sesam-danger-bg);
  border-color: var(--sesam-danger-border);
}

.sesam-async-task-overview {
  margin: 2rem 0 1.5rem;
}

.sesam-async-task-segments {
  display: flex;
  gap: 0.4rem;
}

.sesam-async-task-segment {
  flex: 1 1 0;
  height: 0.35rem;
  background: var(--sesam-gray-300);
  border-radius: 999px;
}

.sesam-async-task-segment-success { background: var(--sesam-green); }
.sesam-async-task-segment-complete { background: var(--sesam-green); }
.sesam-async-task-segment-failure { background: var(--sesam-red); }
.sesam-async-task-segment-started,
.sesam-async-task-segment-progress,
.sesam-async-task-segment-retry,
.sesam-async-task-segment-received {
  background: linear-gradient(90deg, var(--sesam-green) 50%, var(--sesam-gray-300) 50%);
}

.sesam-async-task-overview p {
  margin: 0.6rem 0 0;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
}

.sesam-async-task-failure,
.sesam-async-task-next,
.sesam-async-task-panel {
  margin-top: 1rem;
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.6rem;
  box-shadow: var(--sesam-shadow-soft);
}

.sesam-async-task-failure {
  padding: 1.25rem;
  background: var(--sesam-danger-bg);
  border-color: var(--sesam-danger-border);
  box-shadow: none;
}

.sesam-async-task-failure-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--sesam-red-strong);
}

.sesam-async-task-failure p { margin: 0.6rem 0 0; }
.sesam-async-task-failure [data-task-failure-stage] { color: var(--sesam-heading-color); font-weight: 600; }

.sesam-async-task-failure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1rem;
}

.sesam-async-task-failure-actions a,
.sesam-async-task-failure-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--sesam-blue);
  font-size: 0.875rem;
  text-decoration: none;
}

.sesam-async-task-failure-actions a:hover,
.sesam-async-task-failure-actions a:focus,
.sesam-async-task-failure-actions a:active {
  color: var(--sesam-blue);
  text-decoration: none;
}

.sesam-async-task-next { padding: 1.25rem 1.5rem; }

.sesam-async-task-next h3 {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-section);
  font-weight: 600;
}

.sesam-async-task-next h4 {
  margin: 0 0 0.75rem;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
  font-weight: 600;
}

.sesam-async-task-next-group { margin-top: 1.25rem; }
.sesam-async-task-next-group + .sesam-async-task-next-group {
  padding-top: 1.1rem;
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-async-task-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 2rem;
}

.sesam-async-task-actions a,
.sesam-async-task-actions button,
.sesam-async-task-navigation a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  padding: 0;
  color: var(--sesam-blue);
  font-size: var(--sesam-text-body);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.sesam-async-task-actions a:hover,
.sesam-async-task-actions button:hover,
.sesam-async-task-navigation a:hover { color: var(--sesam-blue); text-decoration: none; }

.sesam-async-task-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}

.sesam-async-task-panel { overflow: hidden; }

.sesam-async-task-panel > summary {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.6rem;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.sesam-async-task-panel > summary::-webkit-details-marker { display: none; }
.sesam-async-task-panel[open] > summary { border-bottom: 1px solid var(--sesam-card-border); }

.sesam-async-task-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--sesam-heading-color);
  font-weight: 600;
}

.sesam-async-task-panel-meta {
  justify-self: end;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
}

.sesam-async-task-chevron { color: var(--sesam-gray-600); transition: transform 0.2s ease; }
.sesam-async-task-panel[open] .sesam-async-task-chevron { transform: rotate(180deg); }

.sesam-async-task-copy {
  --bs-btn-color: var(--sesam-gray-600);
  --bs-btn-hover-color: var(--sesam-blue);
  --bs-btn-active-color: var(--sesam-blue);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  color: var(--sesam-gray-600);
  text-decoration: none;
  transition: transform 0.12s ease;
}

.sesam-async-task-copy:hover,
.sesam-async-task-copy:focus,
.sesam-async-task-copy:active,
.sesam-async-task-copy-copied {
  color: var(--sesam-blue);
  text-decoration: none;
}

.sesam-async-task-copy:active { transform: scale(0.92); }

.sesam-async-task-copy-copied i { animation: sesam-copy-confirm 0.25s ease-out; }

@keyframes sesam-copy-confirm {
  0% { transform: scale(0.75); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sesam-async-task-copy { transition: none; }
  .sesam-async-task-copy-copied i { animation: none; }
}

.sesam-async-task-panel-body { padding: 1rem 1.25rem 1.25rem; }
.sesam-async-task-stage-list,
.sesam-async-task-substage-list { margin: 0; padding: 0; list-style: none; }

.sesam-async-task-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
}

.sesam-async-task-stage + .sesam-async-task-stage { margin-top: 0.15rem; }
.sesam-async-task-stage:not(:last-child)::before {
  position: absolute;
  top: 2.05rem;
  bottom: -0.85rem;
  left: 1.18rem;
  width: 1px;
  background: var(--sesam-gray-300);
  content: "";
}
.sesam-async-task-stage-started,
.sesam-async-task-stage-progress,
.sesam-async-task-stage-retry,
.sesam-async-task-stage-received { background: var(--sesam-card-header-bg); }

.sesam-async-task-stage-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--sesam-gray-500);
  border: 2px solid var(--sesam-gray-400);
  border-radius: 50%;
  font-size: 0.62rem;
}

.sesam-async-task-stage-success > .sesam-async-task-stage-marker {
  color: var(--sesam-card-bg);
  background: var(--sesam-green);
  border-color: var(--sesam-green);
}

.sesam-async-task-stage-failure > .sesam-async-task-stage-marker {
  color: var(--sesam-card-bg);
  background: var(--sesam-red);
  border-color: var(--sesam-red);
}

.sesam-async-task-stage-started > .sesam-async-task-stage-marker,
.sesam-async-task-stage-progress > .sesam-async-task-stage-marker,
.sesam-async-task-stage-retry > .sesam-async-task-stage-marker,
.sesam-async-task-stage-received > .sesam-async-task-stage-marker {
  color: var(--sesam-blue);
  border-color: var(--sesam-blue);
}

.sesam-async-task-stage-label { color: var(--sesam-heading-color); font-size: var(--sesam-text-item); font-weight: 600; }
.sesam-async-task-stage-state { color: var(--sesam-gray-600); font-size: var(--sesam-text-meta); }
.sesam-async-task-stage-success > .sesam-async-task-stage-state { color: var(--sesam-green); }
.sesam-async-task-stage-failure > .sesam-async-task-stage-state { color: var(--sesam-red-strong); }
.sesam-async-task-stage-started > .sesam-async-task-stage-state,
.sesam-async-task-stage-progress > .sesam-async-task-stage-state,
.sesam-async-task-stage-retry > .sesam-async-task-stage-state,
.sesam-async-task-stage-received > .sesam-async-task-stage-state { color: var(--sesam-blue); }
.sesam-async-task-substage-list { grid-column: 2 / -1; padding: 0.2rem 0 0.45rem; }
.sesam-async-task-substage { min-height: 2.25rem; padding-left: 0; }
.sesam-async-task-substage .sesam-async-task-stage-label { font-size: var(--sesam-text-body); font-weight: 400; }
/* A substage is a stage in a smaller row without left padding, so the connector line of a main stage (which assumes
   the 2.75rem row and the 0.6rem padding) would be offset to the right and start inside the marker. This version
   runs from the bottom of one marker to the top of the next one, through the marker centers (0.625rem from the left). */
.sesam-async-task-substage:not(:last-child)::before {
  top: 1.8rem;
  bottom: -0.6rem;
  left: 0.6rem;
}

.sesam-async-task-log {
  max-height: 26rem;
  overflow: auto;
  padding: 1rem 1.25rem;
  color: var(--sesam-terminal-fg);
  background: var(--sesam-terminal-bg);
  font-family: var(--bs-font-monospace);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre;
}

.sesam-async-task-log-line-error { color: var(--sesam-red); }

@media (max-width: 575px) {
  .container-fluid.sesam-async-task-page { padding-top: 2rem; }
  .sesam-async-task-actions { grid-template-columns: 1fr; }
  .sesam-async-task-panel > summary { grid-template-columns: auto 1fr auto; }
  .sesam-async-task-copy { grid-column: 2; grid-row: 1; }
  .sesam-async-task-chevron { grid-column: 3; grid-row: 1; }
  .sesam-async-task-panel-meta { display: none; }
  .sesam-async-task-stage { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .sesam-async-task-stage-state { grid-column: 2; }
}

/* Builder/editor toolbar that has to render above the MapLibre canvas. The
   z-index is intentionally lower than .sesam-toolbar (which sits above the
   in-page dropdowns); the map canvas defaults to a lower stacking context,
   so 4 is enough to win against it. */
.sesam-toolbar-above-map { z-index: 4 !important; }

/* ***************************************************
 * 10. WIDGETS, MARKETING & MISC
 *
 * Sub-sections:
 *   10a. Dashboard
 *   10b. News
 *   10c. Profile / theme
 *   10d. Account form chrome
 *   10e. Decorative helpers
 *   10f. Marketing background
 * *************************************************** */

/* --- 10a. Dashboard --- */

/* Dashboard quick-action card row: full-link card + leading 2x icon. */
.sesam-dashboard-link       { color: inherit; text-decoration: none; }
.sesam-dashboard-card-icon  { margin-right: 1.25rem; }
/* "Welcome, …" heading: smaller than h2, semibold instead of bold. */
.sesam-dashboard-welcome    { font-size: 1.4rem; font-weight: 600; }

/* --- 10b. News --- */

/* SESAM News dashboard card spacing. */
.sesam-news-card { margin-top: 2rem; margin-bottom: 5px; }

/* SESAM News offcanvas — large screenshots displayed under each release
   entry. The default carries a thin light-gray frame; add the
   `--borderless` modifier for full-bleed screenshots that already supply
   their own frame. */
.sesam-news-screenshot {
  width: 100%;
  height: auto;
  border: 1px solid var(--sesam-gray-300);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.sesam-news-screenshot--borderless { border: none; }

/* --- 10c. Profile / theme --- */

/* Theme preview card width (light/dark/system selection on profile page). */
.sesam-theme-card { width: 140px; }

/* --- 10d. Account form chrome --- */

/* Section heading distanced from the previous block. */
.sesam-section-heading { margin-top: 2rem; }

/* Account form submit row with extra top spacing. */
.sesam-form-submit-row { margin-top: 4rem; }

/* --- 10e. Decorative helpers --- */

/* Code/log container with monospace font and modest side padding. */
.sesam-log-output {
  font-size: smaller;
  margin: 0.75rem 1.25rem;
}

/* Marketing feature hero block (alternating screenshot + headline rows).
   Shared by `sesam_pages/templates/pages/edit_feature_text.html`, which is
   included from both the marketing index page and the editor
   "not available" upsell page, so the rules live globally instead of in
   `pages_additions.css`. */
.sesam-pages-feature-hero {
  padding: 100px 0;
}
.sesam-pages-feature-hero-img {
  width: 85%;
  height: auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.sesam-pages-feature-hero-title {
  color: var(--sesam-marketing-blue);
  font-weight: 600;
  font-size: 5rem !important;
}
.sesam-pages-feature-hero-subtitle {
  color: var(--sesam-marketing-blue-bright);
  font-weight: 600;
}
.sesam-pages-feature-hero-body {
  margin-top: 30px;
  color: var(--sesam-muted-soft);
  line-height: 1.8;
}

/* --- Shared plan comparison --- */

/* pages/plans.html is included by both the landing page and account settings.
   Keep its presentation here so both template stacks load the same rules. */

/* Wrap according to the available container width, including inside account
   settings. Cards only shrink when a single card cannot fit on a small screen. */
.sesam-pages-plans-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.sesam-pages-plans-column {
  flex: 0 1 21rem;
  width: 100%;
  /* Three cards plus gaps must fit the account container's padded 1140px width. */
  max-width: 21rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Row above each plan card: "Your current plan" plus chevron (two lines) for the current plan, empty for the others.
   The fixed minimum height keeps all cards starting at the same level. */
.sesam-pages-plans-current-label {
  min-height: 3rem;
  margin-bottom: 1rem;
  text-align: center;
}

/* Inline chevron icon used in CTA buttons across the marketing pages. */
.sesam-pages-cta-chevron { margin-left: 10px; }

/* Highlight the current plan in the shared comparison fragment. */
.sesam-pages-plans-card-current { border: 3px solid var(--sesam-blue); }

/* fa-stack badge centered inside a plan-card header. */
.sesam-pages-plans-card-stack { margin-top: 8px; }

/* Price suffix " / month|year " rendered next to the big plan amount. */
.sesam-pages-plans-price-suffix { font-size: 1rem; }

/* Custom yellow header for the "Enterprise / Custom" plan card. */
.sesam-pages-plans-enterprise-header { color: #F2D138; }

/* Shared plan card with elevated shadow. */
.sesam-pages-plans-card {
  color: rgb(33, 37, 41);
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 8px 12px 1px rgba(29, 17, 51, 0.04),
    0 3px 16px 2px rgba(9, 32, 77, 0.12),
    0 5px 10px -3px rgba(29, 17, 51, 0.12);
  border-collapse: separate;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 21rem;
  /* Align card footers within each row despite different feature-list lengths. */
  flex: 1;
}

/* Feature list inside a plan card. */
ul.sesam-pages-plans-list {
  list-style-type: none;
  margin: 1rem 0 0;
  padding: 0;
  text-align: left;
}

ul.sesam-pages-plans-list > li:not(:last-child) {
  margin-bottom: 3px;
}

ul.sesam-pages-plans-list > li > .fas {
  margin-right: 1rem;
}

/* Monthly/yearly price label inside a plan card: deliberately modest so the feature list stays the focus. */
.sesam-pages-price {
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--sesam-heading-color);
}

/* --- 10f. Marketing background --- */

/* Lines-pattern background used on marketing/account pages. */
.sesam-lines-background {
  background-color: #f5f5f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23dcdcdc'/%3E%3Cstop offset='1' stop-color='%23f5f5f7'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%23e9e9ea'/%3E%3Cstop offset='1' stop-color='%23f5f5f7'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='rotate(0 0 0)'%3E%3Cg transform='rotate(0 0 0)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(0 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill-opacity='0.46' fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}