/* The route's two views. Deliberately page-local: this is a view switch
   inside Scenarios, not a shared component. If a second page ever needs the
   same pattern, promote it to a component and catalogue it then. */
/* The title and its tab bar are one header block, so the page container's row
   gap falls below the pair rather than between them. */
.scenario-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The tablist and the visible panel's primary action share one row. Giving the
   action its own band below cost a whole row of near-empty space. */
.scenario-tabbar {
  align-items: flex-end;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.scenario-tabbar-actions {
  padding-bottom: var(--space-2);
}

.scenario-tabbar-actions [hidden] {
  display: none;
}

.scenario-tabs {
  /* `--border-thin` is the complete shorthand. Appending another style and
     colour made this declaration invalid, and the divider never rendered. */
  border-bottom: var(--border-thin);
  display: flex;
  gap: var(--space-4);
  /* No bottom margin: `.content-page` is a flex column and already supplies
     the row gap. Adding one here doubled the space below the tablist. */
}

.scenario-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  /* Keeps a 44px target without the tab looking like a button. The family,
     size and weight all come from `type-supporting` on the element; this file
     must not restate them. */
  padding: var(--space-3) var(--space-1) calc(var(--space-3) - 2px);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

/* Selection is the underline and the full-strength ink. Bolding the label
   would fork the shared 400 weight into a page-local one, and the two tabs
   would also change width as you switched between them. */
.scenario-tab[aria-selected="true"] {
  border-bottom-color: var(--color-action);
  color: var(--color-text);
}

.scenario-tab:hover {
  color: var(--color-text);
}

.scenario-panel[hidden] {
  display: none;
}

/* Forecast history puts its primary action in the shared tab-bar slot. The
   chrome remains route-owned because the control never appears elsewhere. */
.scenario-action-row {
  align-items: center;
  border: var(--border-thin);
  /* Reserved rather than added when the row opens, so revealing the control
     cannot nudge the row by a pixel. */
  border-color: transparent;
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
}

/* While the row has its transient control showing it becomes a surface,
   because the shared plain button is designed to contrast against
   `--color-surface`. Every other one in the app sits on a card; on the page
   background it is the same colour as what is behind it and reads as
   invisible. The trigger differs per tab; the treatment is one definition. */
.scenario-action-row:has([data-archive-cancel]:not([hidden])) {
  background: var(--color-surface);
  border-color: var(--color-line);
}

.scenario-action-row [hidden] {
  display: none;
}

.scenario-picker,
.scenario-empty {
  margin-bottom: var(--space-4);
}

/* The limit reads as an instruction immediately above the badges it applies
   to, rather than pinned to the far edge of the heading or trailing after the
   badges like a stray one. */
.scenario-picker-limit {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.scenario-status {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.scenario-picker h3 {
  margin: 0 0 var(--space-1);
}

.scenario-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.scenario-option {
  align-items: center;
  background: var(--color-action-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  gap: var(--space-2);
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
}

.scenario-option:has(input:checked) {
  background: var(--navy);
  border-color: var(--navy);
  color: white;
}

.scenario-option input {
  accent-color: var(--color-positive);
  margin: 0;
}

.scenario-option-order {
  align-items: center;
  background: var(--color-surface);
  border-radius: 999px;
  color: var(--color-action);
  display: inline-flex;
  font-weight: 700;
  height: 1.25rem;
  justify-content: center;
  margin-left: calc(var(--space-1) * -1);
  min-width: 1.25rem;
  padding: 0 var(--space-1);
}

.scenario-option-position-copy {
  display: inline;
}

.scenario-reorder-a11y {
  display: block;
}

.scenario-comparison-grid {
  display: grid;
  gap: var(--space-4);
  /* Three comparison cards should remain side by side on a desktop. Narrow
     tracks are safe because their title and actions stack via the card
     container rule below; the old layout kept those two groups on one line
     and clipped the final actions. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.scenario-card {
  align-self: start;
  padding: var(--space-5);
  position: relative;
}

.scenario-card-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.scenario-card-heading h3 {
  margin: 0;
}

.scenario-card-title-row {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.scenario-card-title-row h3 {
  min-width: 0;
}

.scenario-card-menu {
  flex: none;
  position: relative;
}

.scenario-menu {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  min-width: 10.5rem;
  overflow: hidden;
  padding: var(--space-1);
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-menu);
}

.scenario-menu[hidden] {
  display: none;
}

.scenario-menu button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  text-align: left;
}

.scenario-menu button:hover,
.scenario-menu button:focus-visible {
  background: var(--color-action-subtle);
  outline: none;
}

.scenario-menu .scenario-menu-divider {
  border: none;
  border-top: var(--border-thin);
  margin: var(--space-1) 0;
}

.scenario-menu .scenario-menu-danger {
  color: var(--color-danger);
}

.scenario-rename-form {
  width: 100%;
}

.scenario-rename-field {
  display: grid;
  flex: 1;
  gap: var(--space-1);
  min-width: min(12rem, 100%);
}

.scenario-growth-assumption {
  margin-bottom: 1px;
}

.scenario-growth-assumption dl {
  margin: 0;
}

.scenario-growth-assumption dl > div {
  align-items: baseline;
  background: var(--color-warning-surface);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: 6px var(--space-3);
}

.scenario-growth-assumption dd {
  margin: 0;
}

.scenario-metrics {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
}

.scenario-metrics > div {
  background: var(--color-action-subtle);
  min-width: 0;
  padding: var(--space-3);
}

.scenario-metrics > .scenario-metric-wide {
  grid-column: 1 / -1;
}

.scenario-metrics > .scenario-metric-change.is-good {
  background: var(--color-comparison-better-surface);
  box-shadow: inset 3px 0 var(--color-comparison-better);
}

.scenario-metrics > .scenario-metric-change.is-danger {
  background: var(--color-comparison-worse-surface);
  box-shadow: inset 3px 0 var(--color-comparison-worse);
}

.scenario-metric-change.is-good dd,
.scenario-metric-change.is-good .scenario-metric-comparison {
  color: var(--color-comparison-better);
}

.scenario-metric-change.is-danger dd,
.scenario-metric-change.is-danger .scenario-metric-comparison {
  color: var(--color-comparison-worse);
}

.scenario-metric-comparison {
  display: block;
  font-weight: 600;
  margin-top: var(--space-1);
}

.scenario-metric-detail {
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-1);
}

.scenario-metrics dt,
.scenario-changes dt,
.scenario-assumptions details dt {
  color: var(--color-text-muted);
}

.scenario-metrics dd {
  margin: var(--space-1) 0 0;
}

.scenario-assumptions {
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

.scenario-changes,
.scenario-assumptions details dl {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.scenario-changes > div,
.scenario-assumptions details dl > div {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.scenario-changes dd,
.scenario-assumptions details dd {
  margin: 0;
  text-align: right;
}

.scenario-no-changes {
  margin: var(--space-2) 0 0;
}

.scenario-assumptions details {
  margin-top: var(--space-3);
}

.scenario-assumptions summary {
  color: var(--color-text-muted);
  cursor: pointer;
  font-weight: 600;
}

/* Once selected, the comparison position replaces the checkbox glyph rather
   than adding a second marker beside it. The real input remains focusable
   and keeps the label's native toggle behaviour. Phones restore the existing
   checkbox treatment because reordering is unavailable there. */
.scenario-option:has(input:checked) input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.scenario-option:has(input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.scenario-card[data-plan-card] {
  cursor: pointer;
}

.scenario-card[data-reorder-enabled="true"] {
  cursor: grab;
  touch-action: pan-y;
}

.scenario-card[data-reorder-enabled="true"]:focus-visible,
.scenario-card[data-moving="true"] {
  border-color: var(--color-information);
  outline: 3px solid var(--color-information-surface);
  outline-offset: 2px;
}

.scenario-card.is-dragging {
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
  opacity: 0.9;
  transition: none;
  user-select: none;
  will-change: transform;
}

.scenario-card.is-drop-before::before,
.scenario-card.is-drop-after::after {
  background: var(--color-information);
  border-radius: 999px;
  bottom: 0;
  content: '';
  position: absolute;
  top: 0;
  width: 3px;
}

.scenario-card.is-drop-before::before {
  left: calc((var(--space-4) / 2 + 2px) * -1);
}

.scenario-card.is-drop-after::after {
  right: calc((var(--space-4) / 2 + 2px) * -1);
}

.scenario-card.is-active {
  box-shadow: inset 0 0 0 3px var(--color-information), var(--shadow);
}

.scenario-card.is-active:hover {
  box-shadow: inset 0 0 0 3px var(--color-information), var(--shadow-lg);
}

@media (max-width: 1024px) {
  /* Card utility controls stay touch-sized on portrait tablets. */
  .scenario-card-menu > .btn-icon {
    min-height: 44px;
    width: 44px;
  }
}

@media (max-width: 767px) {
  .scenario-card[data-plan-card] {
    cursor: auto;
  }

  .scenario-card.is-active,
  .scenario-card.is-active:hover {
    box-shadow: var(--shadow);
  }

  .scenario-option:has(input:checked) input {
    clip: auto;
    clip-path: none;
    height: auto;
    overflow: visible;
    position: static;
    white-space: normal;
    width: auto;
  }

  .scenario-option:has(input:focus-visible) {
    outline: none;
  }

  .scenario-option-order,
  .scenario-option-position-copy,
  .scenario-reorder-a11y {
    display: none;
  }

  /* The action drops below the tabs and spans the width at phone sizes. */
  .scenario-tabbar {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-3);
  }

  .scenario-tabbar-actions {
    padding-bottom: 0;
  }

  .scenario-tabbar-actions .btn {
    flex: 1;
  }

  /* Two tabs fit at 390px, but the tablist must never become a scroller that
     hides one: wrapping keeps both reachable at any width. */
  .scenario-tabs {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .scenario-comparison-grid {
    grid-template-columns: 1fr;
  }

  .scenario-card {
    padding: var(--space-4);
  }

  .scenario-card-heading {
    flex-direction: column;
  }

  .scenario-card-menu > .btn-icon {
    min-height: 44px;
    width: 44px;
  }
}