/* Shared presentation contract for sheets, disclosures, pages and shadow panels.
 * Business/focus cleanup remains immediate. Native discrete transitions retain
 * only the closing view; unsupported browsers change visibility immediately.
 * No layout/blur animation, copied DOM, permanent layer hint or frame loop. */
:root {
  --ui-panel-duration: 240ms;
  --ui-panel-exit-duration: 160ms;
  --ui-control-duration: 120ms;
  --ui-content-duration: 160ms;
  --ui-panel-start-scale: .98;
  --ui-press-scale: .97;
  --ui-ease-out: cubic-bezier(.23,1,.32,1);
}
:root[data-cityrail-input="keyboard"] {
  --ui-panel-duration: 0ms;
  --ui-panel-exit-duration: 0ms;
  --ui-control-duration: 0ms;
  --ui-content-duration: 0ms;
  --ui-panel-start-scale: 1;
  --ui-press-scale: 1;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-panel-duration: 0ms;
    --ui-panel-exit-duration: 0ms;
    --ui-control-duration: 0ms;
    --ui-content-duration: 0ms;
    --ui-panel-start-scale: 1;
    --ui-press-scale: 1;
  }
}
@supports (transition-behavior: allow-discrete) {
:is(#ctrl-center-overlay,
  #station-detail-overlay,
  #line-config-overlay,
  #settings-overlay,
  #nav-overlay,
  #new-line-dialog-overlay,
  #cityrail-ats-overlay,
  .cityrail-depot-modal,
  .cityrail-depot-connection-modal,
  #living-city-overlay,
  #cc-express-modal,
  #cityrail-system-dialog,
  #station-arrivals-board,
  #playback-popover,
  #cityrail-contact,
  #offline-maps-dialog,
  #cityrail-feedback-modal,
  #cityrail-feedback-image-viewer,
  #cityrail-tutorial-overlay,
  #cr-rni-panel,
  #cr-eps-panel,
  #cr-rni-import-progress,
  .city-loading-panel,
  #line-edit-toolbar,
  #cityrail-line-depot-guide-popover,
  #map-analysis-panel,
  #cityrail-info-modal,
  #cityrail-pay-modal,
  #cityrail-station-rename-overlay,
  #loop-choice-overlay,
  #workshop-my-modal,
  #workshop-login-modal,
  #city-atlas-panel,
  .cityrail-city-surface #city-detail,
  #cityrail-demo,
  #cityrail-milestone,
  #cityrail-achievements,
  #cityrail-line-guide,
  #draw-line-indicator,
  .search-panel,
  .export-panel) {
  transition: opacity min(80ms, var(--ui-panel-duration)) var(--ui-ease-out,cubic-bezier(.23,1,.32,1)),
    scale var(--ui-panel-duration) var(--ui-ease-out,cubic-bezier(.23,1,.32,1)),
    display var(--ui-panel-duration) allow-discrete, visibility var(--ui-panel-duration) allow-discrete,
    overlay var(--ui-panel-duration) allow-discrete;
  opacity: 1;
  scale: 1;
  transform-origin: center;
  @starting-style {
    opacity: 1;
    scale: var(--ui-panel-start-scale);
  }
}
:is(#ctrl-center-overlay.hidden,
  #station-detail-overlay.hidden,
  #line-config-overlay.hidden,
  #settings-overlay.hidden,
  #nav-overlay.hidden,
  #new-line-dialog-overlay.hidden,
  #cityrail-ats-overlay.hidden,
  #living-city-overlay.hidden,
  #cc-express-modal.hidden,
  #cr-rni-panel.hidden,
  #cr-eps-panel.hidden,
  #cr-rni-import-progress.hidden,
  #city-select-screen:not(.loading) .city-loading-panel,
  #line-edit-toolbar.hidden,
  #cityrail-line-depot-guide-popover:not(.visible),
  #map-analysis-panel[hidden],
  #cityrail-info-modal[style*="display: none"],
  #cityrail-info-modal[style*="display:none"],
  #cityrail-pay-modal:not(.visible),
  #loop-choice-overlay.hidden,
  #workshop-my-modal:not(.visible),
  #workshop-login-modal:not(.visible),
  #city-atlas-panel:not([open]),
  #cityrail-tutorial-overlay:not([open]),
  .cityrail-depot-modal:not(.visible),
  .cityrail-depot-connection-modal:not(.visible),
  #cityrail-system-dialog:not(.visible),
  #station-arrivals-board[hidden],
  #playback-popover[hidden],
  #cityrail-contact:not([open]),
  #offline-maps-dialog:not([open]),
  #cityrail-feedback-modal:not([open]),
  #cityrail-feedback-image-viewer:not([open]),
  .cityrail-city-surface #city-detail:not([open]),
  #cityrail-demo:not([open]),
  #cityrail-milestone:not([open]),
  #cityrail-achievements:not([open]),
  #cityrail-line-guide[hidden],
  #draw-line-indicator.hidden,
  .search-panel[hidden],
  .export-panel[hidden]) {
  opacity: 0;
  transition-duration: var(--ui-panel-exit-duration);
  transition-timing-function: var(--ui-ease-out);
  scale: var(--ui-panel-start-scale);
  pointer-events: none;
}
#playback-popover { transform-origin: bottom center; }
.cityrail-depot-modal, .cityrail-depot-connection-modal { transform-origin: left center; }
}


/* Native disclosure retains its box for symmetric entry and exit fades. */
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  #ctrl-more-stats::details-content {
    scale: 1;
    transform-origin: top right;
    transition: scale var(--ui-panel-duration) var(--ui-ease-out),
      content-visibility var(--ui-panel-duration) allow-discrete;
    @starting-style { scale: var(--ui-panel-start-scale); }
  }
  #ctrl-more-stats:not([open])::details-content {
    scale: var(--ui-panel-start-scale);
    transition-duration: var(--ui-panel-exit-duration);
    transition-timing-function: var(--ui-ease-out);
  }
}

/* One status follows a committed build, including the depot guide handoff. */
.cityrail-build-confirmation {
  position: fixed;
  z-index: 9200;
  bottom: 24px;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  max-width: calc(100% - 48px);
  box-sizing: border-box;
  margin: 0;
  padding: 12px 18px;
  border: 1px solid var(--ui-line);
  border-radius: 16px;
  background: var(--material-popover, var(--ui-surface));
  box-shadow: var(--ui-shadow);
  color: var(--ui-text);
  font-size: 14px;
  pointer-events: none;
}

@supports (transition-behavior: allow-discrete) {
  #workshop-modal {
    transition: opacity min(80ms,var(--ui-panel-duration)) ease-out,
      display var(--ui-panel-duration) allow-discrete;
    opacity: 1;
    @starting-style { opacity: 0; }
  }
  #workshop-modal:not(.visible) {
    opacity: 0;
    pointer-events: none;
    transition-duration: var(--ui-panel-exit-duration);
  }
  #workshop-modal .workshop-detail-panel {
    scale: 1;
    transform-origin: bottom right;
    transition: scale var(--ui-panel-duration) var(--ui-ease-out);
    @starting-style { scale: var(--ui-panel-start-scale); }
  }
  #workshop-modal:not(.visible) .workshop-detail-panel {
    scale: var(--ui-panel-start-scale);
    transition-duration: var(--ui-panel-exit-duration);
  }
  :is(.line-config-disclosure, details.station-info-card, .cityrail-help-article,
    .service-route-stops-disclosure, #cct-hourly-disclosure)::details-content {
    opacity: 1;
    transition: opacity min(120ms,var(--ui-panel-duration)) ease-out,
      content-visibility min(120ms,var(--ui-panel-duration)) allow-discrete;
    @starting-style { opacity: 0; }
  }
  :is(.line-config-disclosure, details.station-info-card, .cityrail-help-article,
    .service-route-stops-disclosure, #cct-hourly-disclosure):not([open])::details-content { opacity: 0; }
}

/* Leaflet owns popup fade/removal; only its card enters, preserving map positioning. */
@supports (transition-behavior: allow-discrete) {
  :is(.train-info-popup,.cityrail-node-action-popup) .leaflet-popup-content-wrapper {
    scale: 1;
    transform-origin: bottom center;
    transition: scale var(--ui-panel-duration) var(--ui-ease-out);
    @starting-style { scale: var(--ui-panel-start-scale); }
  }
}

/* Reveal only structural content that changes visibility through its owner.
 * Live tables, search results, charts and map geometry never enter this rule. */
@supports (transition-behavior: allow-discrete) {
  :is(.stock-extra, #cfg-name-editor, #sd-name-editor, #new-line-form,
    #new-build-choice, .line-color-editor,
    .cityrail-help-body > [role="tabpanel"]) {
    transition: opacity var(--ui-content-duration) var(--ui-ease-out),
      display var(--ui-content-duration) allow-discrete;
    opacity: 1;
    @starting-style { opacity: .4; }
  }
  :is(.stock-extra, #cfg-name-editor, #sd-name-editor, #new-line-form,
    #new-build-choice, .line-color-editor,
    .cityrail-help-body > [role="tabpanel"]):is([hidden], .hidden) {
    opacity: 0;
    pointer-events: none;
  }
  .cityrail-build-confirmation {
    transition: opacity var(--ui-content-duration) var(--ui-ease-out),
      scale var(--ui-panel-duration) var(--ui-ease-out);
    @starting-style { opacity: 0; scale: var(--ui-panel-start-scale); }
  }
  :is(#cityrail-demo, #cityrail-milestone, #cityrail-achievements,
    #cityrail-contact, #city-atlas-panel, #cityrail-tutorial-overlay,
    #offline-maps-dialog, #cityrail-feedback-modal)::backdrop {
    transition: opacity var(--ui-panel-duration) var(--ui-ease-out),
      display var(--ui-panel-duration) allow-discrete,
      overlay var(--ui-panel-duration) allow-discrete;
    opacity: 1;
    @starting-style { opacity: 0; }
  }
  :is(#cityrail-demo, #cityrail-milestone, #cityrail-achievements,
    #cityrail-contact, #city-atlas-panel, #cityrail-tutorial-overlay,
    #offline-maps-dialog, #cityrail-feedback-modal):not([open])::backdrop {
    opacity: 0;
    transition-duration: var(--ui-panel-exit-duration);
  }
}

/* Native shadow controls share feedback without document-wide event listeners. */
:host :is(button, summary) {
  transition: scale var(--ui-control-duration) var(--ui-ease-out),
    opacity var(--ui-control-duration) ease;
}
:host button:active:not(:disabled) { scale: var(--ui-press-scale); }
.search-panel, .export-panel { transform-origin: top right; }
#draw-line-indicator, #cityrail-line-guide { transform-origin: top center; }

/* Page entry is opacity-only: no moving viewport or displaced scroll position.
 * Existing screen owners determine when the next page becomes interactive. */
@supports (transition-behavior: allow-discrete) {
  :is(#splash-screen, #auth-screen, #register-screen, #login-screen, #recover-screen,
    #city-select-screen, #workshop-screen, #product-intro-screen,
    #payment-screen, #payment-success-screen, #invite-code-screen) {
    transition: opacity var(--ui-content-duration) var(--ui-ease-out),
      display var(--ui-content-duration) allow-discrete,
      visibility var(--ui-content-duration) allow-discrete;
    @starting-style { opacity: .75; }
  }
}