.cr-input-dialog {
  --cr-input-bg: #080b0f;
  --cr-input-panel: rgba(9, 13, 18, .98);
  --cr-input-line: rgba(221, 229, 234, .18);
  --cr-input-line-strong: rgba(221, 229, 234, .34);
  --cr-input-text: #dce3e7;
  --cr-input-muted: #8d99a2;
  --cr-input-focus: var(--prediction, #d8b467);
  color: var(--cr-input-text);
}

.cr-input-dialog,
.cr-input-dialog *,
.cr-input-dialog *::before,
.cr-input-dialog *::after { box-sizing: border-box; }

.cr-input-dialog::backdrop { background: rgba(0, 3, 7, .78); backdrop-filter: blur(5px); }
.cr-input-dialog [hidden] { display: none !important; }

.cr-input-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cr-input-head button,
.cr-input-actions button,
.cr-input-tabs button,
.cr-input-discard button {
  min-height: 44px;
}

.cr-input-form input:not([type="checkbox"]):not([type="radio"]),
.cr-input-form select,
.cr-input-form textarea {
  width: 100%;
  min-height: 46px;
}

.cr-input-form textarea { resize: vertical; }
.cr-input-details > summary { min-height: 44px; cursor: pointer; }

.cr-input-dialog :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--cr-input-focus);
  outline-offset: 3px;
}

.cr-input-dialog[data-dirty="true"] .cr-input-head::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  margin: 8px 0 0 -8px;
  border-radius: 50%;
  background: var(--cr-input-focus);
  box-shadow: 0 0 12px color-mix(in srgb, var(--cr-input-focus) 58%, transparent);
}

@media (max-width: 760px) {
  .cr-input-form input:not([type="checkbox"]):not([type="radio"]),
  .cr-input-form select,
  .cr-input-form textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-input-dialog,
  .cr-input-dialog * { scroll-behavior: auto !important; }
}

/*
 * Crossroad input surfaces
 *
 * Management stays a workbench. A single record opens as an inspector.
 * Neither surface is a floating generic card.
 */
.cr-input-dialog {
  --cr-input-bg: #050a10;
  --cr-input-panel: rgba(5, 11, 17, .985);
  --cr-input-line: rgba(184, 213, 229, .15);
  --cr-input-line-strong: rgba(184, 213, 229, .34);
  --cr-input-text: #e3edf3;
  --cr-input-muted: #80909c;
  border-radius: 0 !important;
}

dialog.cr-input-dialog::backdrop {
  background: rgba(1, 5, 9, .62);
  backdrop-filter: none;
}

dialog.cr-input-dialog[data-input-layout="workbench"],
dialog.cr-input-dialog[data-input-layout="inspector"],
dialog.cr-input-dialog[data-input-layout="inspector-compact"] {
  position: fixed;
  inset: 0 0 0 auto !important;
  box-sizing: border-box;
  height: 100svh;
  max-height: none;
  margin: 0 !important;
  border: 0;
  border-left: 1px solid var(--cr-input-line-strong);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  background: var(--cr-input-panel);
  box-shadow: -28px 0 70px rgba(0, 0, 0, .46);
  transform: none !important;
  translate: none !important;
}

dialog.cr-input-dialog[data-input-layout="workbench"] {
  width: min(1120px, calc(100vw - max(76px, 7vw)));
}

dialog.cr-input-dialog[data-input-layout="inspector"] {
  width: min(700px, calc(100vw - max(76px, 12vw)));
}

dialog.cr-input-dialog[data-input-layout="inspector-compact"] {
  width: min(520px, calc(100vw - max(76px, 18vw)));
}

.cr-input-dialog[data-input-layout="workbench"] > .cr-input-panel,
.cr-input-dialog[data-input-layout="inspector"] > .cr-input-panel,
.cr-input-dialog[data-input-layout="inspector-compact"] > .cr-input-panel {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  background: transparent;
}

.cr-input-dialog[data-input-layout="workbench"] .cr-input-head,
.cr-input-dialog[data-input-layout="inspector"] .cr-input-head,
.cr-input-dialog[data-input-layout="inspector-compact"] .cr-input-head {
  min-height: 64px;
  box-sizing: border-box;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cr-input-line);
}

.cr-input-dialog[data-input-layout] :where(
  .trailer-settings-close,
  .prediction-depth-close,
  .launch-label-close
) {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--cr-input-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cr-input-muted);
}

.cr-input-dialog[data-input-layout] :where(
  .trailer-settings-close,
  .prediction-depth-close,
  .launch-label-close
):is(:hover, :focus-visible) {
  border-color: var(--cr-input-line-strong);
  background: rgba(130, 205, 252, .055);
  color: var(--cr-input-text);
  box-shadow: none;
}

.cr-input-dialog[data-input-layout] :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  box-sizing: border-box;
  min-height: 46px;
  border: 1px solid var(--cr-input-line);
  border-radius: 0;
  background: #03080d;
  color: var(--cr-input-text);
  box-shadow: none;
}

.cr-input-dialog[data-input-layout] :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
  border-color: var(--actual);
  outline: 1px solid color-mix(in srgb, var(--actual) 55%, transparent);
  outline-offset: -1px;
}

.cr-input-dialog[data-input-layout] :where(
  .trailer-settings-save,
  .prediction-depth-save,
  .official-depth-global-save,
  .launch-label-save
) {
  border: 1px solid #d9e5eb;
  border-radius: 0;
  background: #d9e5eb;
  color: #071019;
  box-shadow: none;
}

/* Item inspectors continue from the timeline edge instead of floating over it. */
.prediction-depth.cr-input-dialog[data-input-layout="inspector"] {
  min-height: 100svh;
  padding: 0;
  overflow: auto;
  transform: translateX(0);
}

.prediction-depth.cr-input-dialog[data-input-layout="inspector"] .prediction-depth-shell {
  min-height: 100%;
  padding: 82px 34px 34px;
}

.prediction-depth.cr-input-dialog[data-input-layout="inspector"] .prediction-depth-shell::before {
  display: none;
}

.prediction-depth.cr-input-dialog[data-input-layout="inspector"] .prediction-depth-close {
  top: 12px;
  right: 20px;
}

.official-depth.cr-input-dialog[data-input-layout="inspector"] .official-depth-shell {
  min-height: 100%;
}

.official-depth.cr-input-dialog[data-input-layout="inspector"] .official-depth-fields {
  margin: 0 24px 32px;
}

body.prediction-depth-open .crossroad-hero,
body.official-depth-open .crossroad-hero,
body.official-depth-open .actual-history {
  filter: saturate(.72) brightness(.62);
  transform: none;
}

/* The list editor already behaves like a workbench; only give it the shared tokens. */
.prediction-editor.cr-input-dialog[data-input-layout="workbench-full"] {
  --cr-input-focus: var(--prediction);
  background: rgba(4, 9, 15, .992);
  backdrop-filter: none;
}

@media (max-width: 760px) {
  dialog.cr-input-dialog[data-input-layout="workbench"],
  dialog.cr-input-dialog[data-input-layout="inspector"],
  dialog.cr-input-dialog[data-input-layout="inspector-compact"] {
    inset: 0;
    width: 100vw;
    height: 100svh;
    margin: 0;
    border-left: 0;
  }

  .prediction-depth.cr-input-dialog[data-input-layout="inspector"] .prediction-depth-shell {
    padding: 74px 18px 26px;
  }

  .official-depth.cr-input-dialog[data-input-layout="inspector"] .official-depth-fields {
    margin-inline: 14px;
  }

  .prediction-depth.cr-input-dialog[data-input-layout="inspector"] {
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100vw;
    max-width: none !important;
  }
}