/* VOR UI redesign v2: record-first detail and create surfaces. */

.detail-page,
.create-page {
  --ops-ink: #1c1c1a;
  --ops-muted: #686865;
  --ops-line: #dededb;
  --ops-line-strong: #b9b9b4;
  --ops-surface: #ffffff;
  --ops-subtle: #f4f4f1;
  --ops-danger: #b42318;
  min-width: 0;
}

.detail-page .breadcrumb,
.create-page .breadcrumb {
  margin-bottom: 14px;
  color: var(--ops-muted);
  font-size: 0.76rem;
}

.detail-page .breadcrumb a,
.create-page .breadcrumb a {
  color: var(--ops-muted);
  text-underline-offset: 3px;
}

.detail-page .detail-identity-heading {
  align-items: end;
  margin-bottom: 16px;
}

.detail-page .detail-identity-heading h1 {
  margin-bottom: 4px;
  color: var(--ops-ink);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.detail-page .case-heading-meta {
  margin: 0;
  color: var(--ops-muted);
  font-size: 0.88rem;
}

.detail-page .case-technical-meta {
  display: grid;
  gap: 2px;
  align-self: end;
  padding-left: 14px;
  border-left: 1px solid var(--ops-line);
  color: var(--ops-muted);
  font-size: 0.7rem;
  text-align: right;
}

.detail-page .case-technical-meta strong {
  color: var(--ops-ink);
  font-size: 0.78rem;
  font-weight: 500;
}

.detail-page .operational-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 20px;
  border-top: 1px solid var(--ops-line);
  border-bottom: 1px solid var(--ops-line);
  background: var(--ops-surface);
}

.detail-page .operational-strip-item {
  min-width: 0;
  padding: 11px 12px;
  border-left: 1px solid var(--ops-line);
}

.detail-page .operational-strip-item:first-child,
.detail-page .operational-strip-case {
  border-left: 0;
}

.detail-page .operational-strip-vehicle,
.detail-page .operational-strip-blocker,
.detail-page .operational-strip-next {
  grid-column: span 2;
}

.detail-page .operational-strip-item dt,
.detail-page .operational-strip-item dd {
  margin: 0;
}

.detail-page .operational-strip-item dt {
  color: var(--ops-muted);
  font-size: 0.68rem;
  font-weight: 500;
}

.detail-page .operational-strip-item dd {
  margin-top: 4px;
  overflow: hidden;
  color: var(--ops-ink);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-page .operational-strip-vor-value {
  display: inline-block;
  color: var(--ops-ink);
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.detail-page .operational-strip-vor.vor-age-watch .operational-strip-vor-value {
  color: var(--vor-age-yellow, #86650a);
}

.detail-page .operational-strip-vor.vor-age-elevated .operational-strip-vor-value {
  color: var(--vor-age-orange, #a14b00);
}

.detail-page .operational-strip-vor.vor-age-critical .operational-strip-vor-value {
  color: var(--vor-age-red, var(--ops-danger));
}

.detail-page .operational-strip-case dd,
.detail-page .operational-strip-next dd {
  font-weight: 600;
}

.detail-page .operational-strip-blocker dd {
  white-space: normal;
}

.detail-page .operational-strip .status-label {
  border-color: var(--ops-line);
  background: transparent;
  color: var(--ops-ink);
  font-size: 0.72rem;
  font-weight: 500;
}

.detail-page .operational-strip .status-invalidated,
.detail-page .invalidated-notice {
  border-color: #dfaaa5;
}

.detail-page .operational-strip .status-invalidated {
  background: #fff6f5;
  color: var(--ops-danger);
}

.detail-page .invalidated-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding: 12px 0;
  border-top: 1px solid #dfaaa5;
  border-bottom: 1px solid #dfaaa5;
  background: transparent;
  color: var(--ops-ink);
}

.detail-page .invalidated-notice p {
  margin: 3px 0 0;
  color: var(--ops-muted);
  font-size: 0.78rem;
}

.detail-page .read-only-badge {
  color: var(--ops-muted);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.detail-page .detail-disclosure {
  margin: 0;
  border-top: 1px solid var(--ops-line);
  border-bottom: 1px solid var(--ops-line);
}

.detail-page .detail-disclosure + .detail-disclosure {
  border-top: 0;
}

.detail-page .detail-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 11px 0;
  color: var(--ops-ink);
  cursor: pointer;
  list-style: none;
}

.detail-page .detail-disclosure > summary::-webkit-details-marker {
  display: none;
}

.detail-page .detail-disclosure > summary::before {
  width: 1em;
  color: var(--ops-muted);
  content: "+";
  font-size: 1rem;
  font-weight: 400;
}

.detail-page .detail-disclosure[open] > summary::before {
  content: "−";
}

.detail-page .detail-disclosure > summary > span:first-of-type {
  flex: 1;
  margin-left: 2px;
  font-size: 0.94rem;
  font-weight: 600;
}

.detail-page .detail-disclosure .disclosure-meta {
  color: var(--ops-muted);
  font-size: 0.72rem;
  font-weight: 400;
}

.detail-page .detail-disclosure > summary:focus-visible,
.detail-page .module-edit:focus-visible,
.detail-page .module-actions button:focus-visible,
.detail-page .audit-details summary:focus-visible {
  outline: 2px solid var(--ops-ink);
  outline-offset: 3px;
}

.detail-page .detail-disclosure > .panel,
.detail-page .detail-disclosure > .detail-modules,
.detail-page .detail-disclosure > .detail-columns {
  margin: 0;
}

.detail-page .lifecycle-panel,
.detail-page .overview-panel,
.detail-page .module-panel,
.detail-page .detail-panel,
.detail-page .timeline-panel,
.detail-page .update-panel {
  min-width: 0;
  padding: 18px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.detail-page .lifecycle-panel .section-heading,
.detail-page .overview-panel .section-heading,
.detail-page .module-panel .section-heading,
.detail-page .detail-panel .section-heading {
  align-items: center;
  margin-bottom: 12px;
}

.detail-page .lifecycle-panel .section-heading h2,
.detail-page .overview-panel .section-heading h2,
.detail-page .module-panel .section-heading h2,
.detail-page .detail-panel .section-heading h2 {
  font-size: 1rem;
  font-weight: 600;
}

.detail-page .lifecycle-tracker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
}

.detail-page .lifecycle-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ops-muted);
  font-size: 0.72rem;
  font-weight: 500;
  text-align: center;
}

.detail-page .lifecycle-step::before {
  position: absolute;
  top: 12px;
  right: 50%;
  width: 100%;
  height: 1px;
  background: var(--ops-line);
  content: "";
}

.detail-page .lifecycle-step:first-child::before {
  display: none;
}

.detail-page .lifecycle-step.is-complete,
.detail-page .lifecycle-step.is-current {
  color: var(--ops-ink);
}

.detail-page .lifecycle-step.is-complete::before,
.detail-page .lifecycle-step.is-current::before {
  background: var(--ops-ink);
}

.detail-page .lifecycle-marker {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--ops-line-strong);
  border-radius: 50%;
  background: var(--ops-surface);
  color: var(--ops-muted);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.detail-page .lifecycle-step.is-complete .lifecycle-marker,
.detail-page .lifecycle-step.is-current .lifecycle-marker {
  border-color: var(--ops-ink);
  background: var(--ops-ink);
  color: var(--ops-surface);
}

.detail-page .state-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
  padding-top: 12px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .state-summary > div {
  display: grid;
  gap: 3px;
}

.detail-page .summary-label,
.detail-page .state-summary .summary-label {
  color: var(--ops-muted);
  font-size: 0.7rem;
}

.detail-page .state-summary strong {
  color: var(--ops-ink);
  font-size: 0.82rem;
  font-weight: 500;
}

.detail-page .lifecycle-action-form {
  max-width: 760px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .lifecycle-action-form textarea {
  min-height: 70px;
}

.detail-page .overview-panel {
  margin: 0;
}

.detail-page .overview-panel > .section-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ops-line);
}

.detail-page .overview-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.detail-page .overview-group {
  min-width: 0;
  border-top: 1px solid var(--ops-line);
  background: transparent;
}

.detail-page .overview-group > h3 {
  margin: 0;
  padding: 12px 0 8px;
  color: var(--ops-muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.detail-page .overview-summary-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 0;
}

.detail-page .overview-group-issue,
.detail-page .overview-group-metrics {
  grid-column: 1 / -1;
}

.detail-page .overview-group-issue .overview-summary-group {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.detail-page .overview-group-metrics .overview-summary-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-page .overview-item {
  min-width: 0;
  min-height: 0;
  padding: 9px 14px 10px 0;
  border-bottom: 1px solid var(--ops-line);
}

.detail-page .overview-item:not(:nth-child(2n + 1)) {
  padding-left: 14px;
  border-left: 1px solid var(--ops-line);
}

.detail-page .overview-group-issue .overview-item:not(:nth-child(2n + 1)):not(.is-inline-editing) {
  padding-left: 0;
}

.detail-page .overview-group-issue .overview-item:nth-child(4n + 1) {
  padding-left: 0;
  border-left: 0;
}

.detail-page .overview-item dt,
.detail-page .overview-item dd {
  margin: 0;
}

.detail-page .overview-item dt {
  color: var(--ops-muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.detail-page .overview-item dd {
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: var(--ops-ink);
  font-size: 0.82rem;
  font-weight: 400;
}

.detail-page .overview-item-emphasis dd,
.detail-page .overview-metric dd {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.detail-page .overview-item-wide {
  grid-column: span 2;
}

.detail-page .overview-group-issue .overview-item-wide {
  grid-column: span 2;
}

.detail-page .overview-item .status-label {
  border-color: var(--ops-line);
  background: transparent;
  color: var(--ops-ink);
  font-size: 0.72rem;
  font-weight: 500;
}

.detail-page .overview-item .status-invalidated {
  border-color: #dfaaa5;
  background: #fff6f5;
  color: var(--ops-danger);
}

.detail-page .edit-view,
.detail-page .change-reason-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .edit-view[hidden],
.detail-page .read-only-view[hidden],
.detail-page .change-reason-row[hidden],
.detail-page .page-save-bar[hidden],
.detail-page .conditional-fields[hidden],
.detail-page .invalidation-step[hidden],
.detail-page .module-footer[hidden] {
  display: none;
}

.detail-page .module-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .module-comment label {
  display: block;
  margin-bottom: 5px;
  color: var(--ops-muted);
  font-size: 0.72rem;
  font-weight: 500;
}

.detail-page .module-comment textarea {
  min-height: 62px;
}

.detail-page .module-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.detail-page .module-actions .button,
.detail-page .module-edit {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.76rem;
}

.detail-page .detail-modules {
  display: grid;
  gap: 0;
}

/* Case detail uses one ordered ledger of direct working modules.  Forms stay
   intact for the existing progressive-enhancement handlers while their
   sections participate in the same visual sequence. */
.detail-page .direct-detail-modules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.detail-page .direct-detail-modules .overview-panel > .section-heading {
  display: none;
}

.detail-page .direct-detail-modules .current-issue-module,
.detail-page .direct-detail-modules .next-action-module,
.detail-page .direct-detail-modules .loaner-module,
.detail-page .direct-detail-modules .parts-module,
.detail-page .direct-detail-modules .operational-details-module {
  grid-column: 1 / -1;
}

.detail-page .direct-detail-modules .current-issue-module .overview-summary-group,
.detail-page .direct-detail-modules .next-action-module .overview-summary-group,
.detail-page .direct-detail-modules .operational-details-module .overview-summary-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-page .direct-detail-modules .current-issue-module,
.detail-page .direct-detail-modules .next-action-module,
.detail-page .direct-detail-modules .loaner-module,
.detail-page .direct-detail-modules .parts-module,
.detail-page .direct-detail-modules .operational-details-module {
  min-width: 0;
  padding: 18px 0;
  border-top: 1px solid var(--ops-line);
  background: transparent;
}

.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .next-action-module > h3,
.detail-page .direct-detail-modules .operational-details-module > h3 {
  margin-top: 0;
}

.detail-page .direct-module-heading h3 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 1rem;
  font-weight: 600;
}

.detail-page .detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--ops-line);
}

.detail-page .detail-item {
  min-width: 0;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--ops-line);
}

.detail-page .detail-item:not(:nth-child(2n + 1)) {
  padding-left: 14px;
  border-left: 1px solid var(--ops-line);
}

.detail-page .detail-item dt {
  color: var(--ops-muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.detail-page .detail-item dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--ops-ink);
  font-size: 0.82rem;
}

.detail-page .field-span-two {
  grid-column: span 2;
}

.detail-page .conditional-fields {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .read-only-integration,
.create-page .read-only-integration {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: baseline;
  min-height: 40px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ops-line);
  color: var(--ops-muted);
  font-size: 0.76rem;
}

.detail-page .history-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 18px 0;
}

.detail-page .history-columns .detail-module {
  padding: 0;
}

.detail-page .compact-editor {
  margin-top: 14px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .compact-editor > summary {
  padding: 10px 0;
  color: var(--ops-ink);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
}

.detail-page .compact-editor .field-help {
  max-width: 60ch;
}

.detail-page .empty-inline {
  margin: 0;
  padding: 10px 0;
  color: var(--ops-muted);
  font-size: 0.78rem;
}

.detail-page .timeline-panel {
  margin-top: 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--ops-line);
}

.detail-page .timeline-panel .section-heading {
  align-items: center;
  margin-bottom: 10px;
}

.detail-page .timeline-panel h2 {
  font-size: 1rem;
  font-weight: 600;
}

.detail-page .timeline-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: flex-end;
}

.detail-page .filter-chip {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--ops-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ops-muted);
  cursor: pointer;
  font-size: 0.7rem;
}

.detail-page .filter-chip.is-active,
.detail-page .filter-chip:hover,
.detail-page .filter-chip:focus-visible {
  border-color: var(--ops-ink);
  color: var(--ops-ink);
}

.detail-page .timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.detail-page .timeline-entry article,
.detail-page .timeline-entry:first-child article,
.detail-page .timeline-entry-internal article {
  padding: 13px 0;
  border: 0;
  border-top: 1px solid var(--ops-line);
  border-radius: 0;
  background: transparent;
}

.detail-page .timeline-entry:first-child article {
  border-top: 0;
}

.detail-page .timeline-entry-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.detail-page .timeline-entry-header h3 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 0.88rem;
  font-weight: 500;
}

.detail-page .timeline-entry-header time {
  flex: 0 0 auto;
  color: var(--ops-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.detail-page .timeline-byline {
  margin: 5px 0 0;
  color: var(--ops-muted);
  font-size: 0.72rem;
}

.detail-page .actor-badge {
  display: none;
}

.detail-page .actor-name {
  color: var(--ops-muted);
  font-size: inherit;
}

.detail-page .timeline-comment {
  margin: 8px 0 0;
  color: var(--ops-ink);
  font-size: 0.8rem;
  line-height: 1.4;
}

.detail-page .comment-label {
  margin-right: 6px;
  color: var(--ops-muted);
  font-size: 0.68rem;
}

.detail-page .timeline-comment q {
  overflow-wrap: anywhere;
}

.detail-page .timeline-entry-internal article {
  padding-left: 10px;
  border-left: 1px solid var(--ops-line-strong);
}

.detail-page .internal-note-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 6px;
  border: 1px solid var(--ops-line);
  background: var(--ops-subtle);
  color: var(--ops-muted);
  font-size: 0.66rem;
  font-weight: 500;
}

.detail-page .audit-details {
  margin-top: 8px;
}

.detail-page .audit-details summary {
  width: fit-content;
  color: var(--ops-ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
}

.detail-page .activity-change-list-expanded {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .audit-note {
  margin: 8px 0 0;
  color: var(--ops-muted);
  font-size: 0.7rem;
}

.detail-page .update-panel {
  margin-top: 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--ops-line);
}

.detail-page .update-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  color: var(--ops-ink);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;
}

.detail-page .update-disclosure > summary::-webkit-details-marker {
  display: none;
}

.detail-page .update-disclosure > summary span:first-child {
  color: var(--ops-muted);
  font-weight: 400;
}

.detail-page .update-disclosure[open] > summary {
  margin-bottom: 12px;
}

.detail-page .update-form {
  max-width: 900px;
}

.detail-page .form-note,
.detail-page .field-help {
  color: var(--ops-muted);
  font-size: 0.72rem;
}

.detail-page .invalidation-action {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .case-status-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.detail-page .button-danger {
  border-color: var(--ops-danger);
  background: var(--ops-danger);
  color: #ffffff;
}

.detail-page .invalidation-dialog {
  width: min(520px, calc(100% - 24px));
  max-height: min(700px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--ops-line-strong);
  border-radius: 4px;
  background: var(--ops-surface);
  color: var(--ops-ink);
  box-shadow: 0 16px 42px rgb(0 0 0 / 20%);
}

.detail-page .invalidation-dialog::backdrop {
  background: rgb(24 24 22 / 42%);
}

.detail-page .invalidation-dialog.is-open {
  display: block;
}

.detail-page .invalidation-dialog-inner {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: auto;
}

.detail-page .invalidation-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.detail-page .invalidation-dialog-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.detail-page .invalidation-dialog-close {
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--ops-line);
  background: transparent;
  color: var(--ops-muted);
  cursor: pointer;
}

.detail-page .invalidation-dialog .section-note {
  margin: 0;
  color: var(--ops-muted);
  font-size: 0.76rem;
}

.detail-page .invalidation-step-one {
  display: grid;
  gap: 10px;
}

.detail-page .invalidation-step-actions,
.detail-page .invalidation-step-two .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.detail-page .invalidation-step-two {
  padding-top: 14px;
  border-top: 1px solid #dfaaa5;
}

.detail-page .invalidation-confirmation {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
  color: var(--ops-muted);
  font-size: 0.78rem;
}

.detail-page .invalidation-confirmation strong {
  color: var(--ops-danger);
}

.detail-page .close-dialog {
  width: min(520px, calc(100% - 24px));
  max-height: min(700px, calc(100dvh - 32px));
  margin: auto;
  padding: 0;
  border: 1px solid var(--ops-line-strong);
  border-radius: 4px;
  background: var(--ops-surface);
  color: var(--ops-ink);
  box-shadow: 0 16px 42px rgb(0 0 0 / 20%);
}

.detail-page .close-dialog::backdrop {
  background: rgb(24 24 22 / 42%);
}

.detail-page .close-dialog.is-open {
  display: block;
}

.detail-page .close-dialog-inner {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: auto;
}

.detail-page .close-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.detail-page .close-dialog-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.detail-page .close-dialog-close {
  min-width: 32px;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--ops-line);
  background: transparent;
  color: var(--ops-muted);
  cursor: pointer;
}

.detail-page .close-dialog .section-note {
  margin: 0;
  color: var(--ops-muted);
  font-size: 0.76rem;
}

.detail-page .close-step-one {
  display: grid;
  gap: 10px;
}

.detail-page .close-step-actions,
.detail-page .close-step-two .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.detail-page .close-step-two {
  padding-top: 14px;
  border-top: 1px solid #dfaaa5;
}

.detail-page .close-confirmation {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
  color: var(--ops-muted);
  font-size: 0.78rem;
}

.detail-page .close-confirmation strong {
  color: var(--ops-danger);
}

.detail-page .close-step[hidden] {
  display: none;
}

.detail-page .back-to-top {
  border-color: var(--ops-line-strong);
  border-radius: 4px;
  background: var(--ops-surface);
  color: var(--ops-ink);
  box-shadow: 0 4px 14px rgb(0 0 0 / 12%);
}

/* Create uses the same ledger rhythm while retaining every form hook. */
.create-page .page-heading {
  margin-bottom: 22px;
}

.create-page .create-layout {
  display: grid;
  gap: 0;
  max-width: 960px;
}

.create-page .create-section {
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-top: 1px solid var(--ops-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.create-page .create-section:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.create-page .create-section .section-heading {
  margin-bottom: 14px;
}

.create-page .create-section .section-heading h2 {
  font-size: 1rem;
  font-weight: 600;
}

.create-page .form-grid {
  display: grid;
  gap: 14px 18px;
}

.create-page .form-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.create-page .field-span-two {
  grid-column: span 2;
}

.create-page .field label,
.create-page .field-label {
  color: var(--ops-muted);
  font-size: 0.73rem;
  font-weight: 500;
}

.create-page .field input,
.create-page .field select,
.create-page .field textarea {
  border-color: var(--ops-line-strong);
  border-radius: 4px;
}

.create-page .field input,
.create-page .field select {
  min-height: 40px;
}

.create-page .conditional-fields {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ops-line);
}

.create-page .form-actions-page {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--ops-line);
}

.create-page .required-mark,
.detail-page .required-mark,
.detail-page .required-hint {
  color: var(--ops-danger);
  font-weight: 600;
}

@media (max-width: 1050px) {
  .detail-page .operational-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .detail-page .operational-strip-item:nth-child(4n + 1) {
    border-left: 0;
  }

  .detail-page .overview-group-issue .overview-summary-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .detail-page .detail-identity-heading {
    align-items: stretch;
  }

  .detail-page .case-technical-meta {
    justify-items: start;
    padding: 8px 0 0;
    border-top: 1px solid var(--ops-line);
    border-left: 0;
    text-align: left;
  }

  .detail-page .operational-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-page .operational-strip-item,
  .detail-page .operational-strip-item:nth-child(4n + 1) {
    border-left: 0;
  }

  .detail-page .operational-strip-item:nth-child(even) {
    border-left: 1px solid var(--ops-line);
  }

  .detail-page .operational-strip-vehicle,
  .detail-page .operational-strip-blocker,
  .detail-page .operational-strip-next {
    grid-column: span 2;
  }

  .detail-page .overview-groups,
  .detail-page .history-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .detail-page .overview-group-issue,
  .detail-page .overview-group-metrics {
    grid-column: auto;
  }

  .detail-page .overview-group-issue .overview-summary-group,
  .detail-page .overview-group-metrics .overview-summary-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-page .overview-item-wide,
  .detail-page .overview-group-issue .overview-item-wide {
    grid-column: span 2;
  }

  .detail-page .module-footer {
    grid-template-columns: 1fr;
  }

  .detail-page .module-actions {
    justify-content: flex-start;
  }

  .detail-page .module-actions .button {
    flex: 1;
  }

  .detail-page .timeline-panel .section-heading {
    align-items: flex-start;
  }

  .detail-page .timeline-filters {
    justify-content: flex-start;
  }

  .create-page .form-grid-two {
    grid-template-columns: 1fr;
  }

  .create-page .field-span-two {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .detail-page .operational-strip {
    grid-template-columns: 1fr;
  }

  .detail-page .operational-strip-item,
  .detail-page .operational-strip-item:nth-child(even) {
    border-left: 0;
  }

  .detail-page .operational-strip-vehicle,
  .detail-page .operational-strip-blocker,
  .detail-page .operational-strip-next {
    grid-column: auto;
  }

  .detail-page .overview-summary-group,
  .detail-page .overview-group-issue .overview-summary-group,
  .detail-page .overview-group-metrics .overview-summary-group,
  .detail-page .direct-detail-modules .current-issue-module .overview-summary-group,
  .detail-page .direct-detail-modules .next-action-module .overview-summary-group,
  .detail-page .direct-detail-modules .operational-details-module .overview-summary-group,
  .detail-page .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-page .overview-item,
  .detail-page .overview-item:not(:nth-child(2n + 1)),
  .detail-page .overview-group-issue .overview-item:nth-child(4n + 1),
  .detail-page .direct-detail-modules .overview-item,
  .detail-page .direct-detail-modules .overview-item:not(:nth-child(2n + 1)),
  .detail-page .detail-item,
  .detail-page .detail-item:not(:nth-child(2n + 1)) {
    grid-column: auto;
    padding-left: 0;
    border-left: 0;
  }

  .detail-page .timeline-entry-header {
    flex-direction: column;
    gap: 5px;
  }

  .detail-page .timeline-entry-header time {
    text-align: left;
  }

  .detail-page .invalidation-step-actions,
  .detail-page .invalidation-step-two .form-actions {
    justify-content: stretch;
  }

  .detail-page .invalidation-step-actions .button,
  .detail-page .invalidation-step-two .button {
    flex: 1;
  }
}

/* Case module headers inherit a global narrow-screen column stack. Keep the
   title/action pair readable; wrapping is allowed only when the viewport
   genuinely cannot fit both, so the action never squeezes the title. */
@media (max-width: 760px) {
  .detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
  .detail-page .direct-detail-modules .operational-details-module > .direct-module-heading,
  .detail-page .direct-detail-modules .next-action-module > .direct-module-heading,
  .detail-page .direct-detail-modules .loaner-module > .section-heading,
  .detail-page .direct-detail-modules .parts-module > .section-heading,
  .detail-page .timeline-panel > .section-heading {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    row-gap: 8px;
  }

  .detail-page .direct-detail-modules .current-issue-module > .direct-module-heading > h3,
  .detail-page .direct-detail-modules .operational-details-module > .direct-module-heading > h3,
  .detail-page .direct-detail-modules .next-action-module > .direct-module-heading > h3,
  .detail-page .direct-detail-modules .loaner-module > .section-heading > div:first-child,
  .detail-page .direct-detail-modules .parts-module > .section-heading > div:first-child,
  .detail-page .timeline-panel > .section-heading > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
  }

  .detail-page .direct-detail-modules .current-issue-module > .direct-module-heading > .button,
  .detail-page .direct-detail-modules .current-issue-module > .direct-module-heading > .read-only-badge,
  .detail-page .direct-detail-modules .operational-details-module > .direct-module-heading > .button,
  .detail-page .direct-detail-modules .operational-details-module > .direct-module-heading > .read-only-badge,
  .detail-page .direct-detail-modules .next-action-module > .direct-module-heading > .button,
  .detail-page .direct-detail-modules .next-action-module > .direct-module-heading > .read-only-badge,
  .detail-page .direct-detail-modules .loaner-module > .section-heading > .detail-header-actions,
  .detail-page .direct-detail-modules .loaner-module > .section-heading > .read-only-badge,
  .detail-page .direct-detail-modules .parts-module > .section-heading > .detail-header-actions,
  .detail-page .direct-detail-modules .parts-module > .section-heading > .read-only-badge,
  .detail-page .timeline-panel > .section-heading > .timeline-header-actions {
    flex: 0 0 auto;
  }
}

/* Loaner is descriptive context, not a second hero metric. Keep status and
   source on separate lines so long/localized source labels cannot collide. */
.detail-page .case-overview-card .loaner-overview-value {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.25;
}

.detail-page .case-overview-card .loaner-overview-value strong {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1;
}

.detail-page .case-overview-card .loaner-overview-value span {
  color: var(--ops-muted);
  line-height: 1.25;
}

/* Current Issue read-only fields share one plain-text ledger surface. */
.detail-page .overview-group-issue .overview-item:not(:nth-child(2n + 1)) {
  padding-left: 0;
  border-left: 0;
}

/* Refined Case Detail ledger: compact white modules with explicit headers. */
.detail-page .case-overview-card {
  margin-bottom: 20px;
}

.detail-page .case-overview-card-heading {
  padding: 10px 16px;
  background: var(--ops-surface);
}

.detail-page .case-overview-card .operational-strip-item {
  padding-top: 8px;
  padding-bottom: 8px;
}

.detail-page .case-overview-card .operational-strip-vor,
.detail-page .case-overview-card .operational-strip-loaner {
  min-height: 112px;
}

.detail-page .case-overview-card .operational-strip-vor-value {
  margin-top: 4px;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: .95;
}

.detail-page .case-overview-card .operational-strip-loaner dd {
  margin-top: 4px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.detail-page .lifecycle-panel .state-summary {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(260px, 1fr);
  column-gap: 64px;
}

.detail-page .direct-detail-modules .current-issue-module,
.detail-page .direct-detail-modules .operational-details-module,
.detail-page .direct-detail-modules .next-action-module,
.detail-page .direct-detail-modules .loaner-module,
.detail-page .direct-detail-modules .parts-module {
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 0 14px 14px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
}

.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .next-action-module > h3,
.detail-page .direct-detail-modules .operational-details-module > h3,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading {
  min-height: 0;
  margin: 0 -14px 12px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ops-line);
  border-radius: 3px 3px 0 0;
  background: var(--ops-surface);
}

.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-page .direct-detail-modules .module-footer {
  margin: 12px 0 0;
}

.detail-page .timeline-panel {
  margin-top: 4px;
  padding: 0 14px 14px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
}

.detail-page .timeline-panel > .section-heading {
  min-height: 0;
  margin: 0 -14px 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ops-line);
  background: var(--ops-surface);
}

@media (max-width: 760px) {
  .detail-page .lifecycle-panel .state-summary {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}

/* Timeline comment composer: keep the disclosure in document flow so the
   expanded editor follows the header at the full timeline width. */
.detail-page .timeline-panel > .update-disclosure {
  display: block;
  margin: 0 0 12px;
}

.detail-page .timeline-panel > .update-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
  color: var(--ops-ink);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 500;
  list-style: none;
  white-space: nowrap;
}

.detail-page .timeline-panel > .update-disclosure > summary::-webkit-details-marker {
  display: none;
}

.detail-page .timeline-panel > .update-disclosure > summary span:first-child {
  color: var(--ops-muted);
  font-weight: 400;
}

.detail-page .timeline-panel > .update-disclosure[open] > summary {
  margin-bottom: 12px;
}

.detail-page .timeline-panel > .update-disclosure[open] .update-form {
  position: static;
  z-index: auto;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-subtle);
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.35fr);
  gap: 12px 18px;
}

.detail-page .timeline-panel > .update-disclosure[open] .update-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 7.2rem;
  resize: vertical;
}

.detail-page .timeline-panel > .update-disclosure[open] .update-form .form-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .timeline-panel > .update-disclosure[open] .update-form .form-note {
  flex: 1 1 20rem;
  max-width: none;
}

@media (max-width: 760px) {
  .detail-page .timeline-panel > .update-disclosure[open] .update-form {
    grid-template-columns: 1fr;
  }

  .detail-page .timeline-panel > .update-disclosure[open] .update-form .field:first-child,
  .detail-page .timeline-panel > .update-disclosure[open] .update-form .form-actions {
    grid-column: auto;
    grid-row: auto;
  }

  .detail-page .timeline-panel > .update-disclosure[open] .update-form .form-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Final visual pass: keep the overview compact after all legacy cascade
   layers, and preserve the same safe stack at narrow widths. */
.detail-page .case-overview-card .operational-strip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, .72fr) minmax(150px, .72fr);
  grid-template-areas:
    "rego dealer vor loaner"
    "stage ram vor loaner";
  align-items: stretch;
}

.detail-page .case-overview-card .operational-strip-item {
  min-height: 0;
  padding: 11px 18px 12px;
}

.detail-page .case-overview-card .operational-strip-vor,
.detail-page .case-overview-card .operational-strip-loaner {
  min-height: 0;
  margin: 8px 0;
  padding: 10px 14px;
  align-content: center;
}

.detail-page .case-overview-card .operational-strip-vor-value {
  margin-top: 3px;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  line-height: .9;
}

.detail-page .case-overview-card .operational-strip-loaner dd {
  margin-top: 3px;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: .95;
}

.detail-page .case-overview-card .loaner-overview-value {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.25;
}

.detail-page .case-overview-card .loaner-overview-value strong {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1;
}

.detail-page .case-overview-card .loaner-overview-value span {
  color: var(--ops-muted);
}

.detail-page .case-overview-card-heading,
.detail-page > .lifecycle-disclosure > summary,
.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .operational-details-module > .direct-module-heading,
.detail-page .direct-detail-modules .next-action-module > .direct-module-heading,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading,
.detail-page .timeline-panel > .section-heading {
  background: var(--ops-subtle);
}

.detail-page .overview-control,
.detail-page .module-edit-view .field,
.detail-page .module-edit-view .read-only-integration,
.detail-page .overview-control input,
.detail-page .overview-control select,
.detail-page .overview-control textarea,
.detail-page .module-edit-view input,
.detail-page .module-edit-view select,
.detail-page .module-edit-view textarea {
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.detail-page .module-comment > .field-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.detail-page .module-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
  padding-top: 10px;
}

.detail-page .module-comment,
.detail-page .module-comment textarea {
  width: 100%;
  box-sizing: border-box;
}

.detail-page .module-comment textarea {
  min-height: 50px;
}

.detail-page .module-actions {
  justify-content: flex-end;
}

/* Keep Operational details rows compact while a value swaps to its editor.
   Content is allowed to grow for long Dealer Master or TR values without
   imposing a fixed-height whitespace floor on the ordinary record. */
.detail-page .operational-details-module > .overview-summary-group {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, max-content);
}

.detail-page .operational-details-module > .overview-summary-group > .overview-item {
  box-sizing: border-box;
  min-height: 0;
}

@media (max-width: 760px) {
  .detail-page .case-overview-card .operational-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "rego dealer"
      "stage ram"
      "vor loaner";
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    margin: 8px 8px 8px 0;
  }

}

@media (max-width: 480px) {
  .detail-page .case-overview-card .operational-strip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rego"
      "dealer"
      "stage"
      "ram"
      "vor"
      "loaner";
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    margin: 0 12px 12px;
  }
}

/* Final hierarchy pass: keep the opening summary readable without restoring
   the heavy nested surfaces removed from Case Status. */
.detail-page .case-overview-card .operational-strip-item {
  padding-top: 11px;
  padding-bottom: 12px;
  line-height: 1.3;
}

.detail-page .case-overview-card .operational-strip-item dd {
  line-height: 1.25;
}

.detail-page .case-overview-card .operational-strip-vor,
.detail-page .case-overview-card .operational-strip-loaner {
  min-height: 108px;
}

/* Case Detail hierarchy: Overview and Case Status are separate landmarks;
   the working modules follow them in source and focus order. */
.detail-page .case-status-panel {
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 0;
  border: 1px solid var(--ops-line-strong);
  border-radius: 4px;
  background: var(--ops-surface);
  box-shadow: none;
  overflow: hidden;
}

.detail-page .case-status-panel > .section-heading {
  min-height: 42px;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--ops-line);
  background: var(--ops-subtle) !important;
}

/* Keep the status facts in the white body of the bordered module. */
.detail-page .case-status-panel .state-summary,
.detail-page .case-status-panel .case-status-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding: 16px 14px;
  border: 0;
  background: var(--ops-surface);
}

.detail-page .case-status-panel .state-summary > div {
  min-width: 0;
  padding: 0;
}

.detail-page .case-status-panel .case-status-form {
  margin: 0;
  padding: 0 14px 16px;
  border-top: 1px solid var(--ops-line);
}

/* The summary gets a little more vertical breathing room than the dense
   queue while preserving a single scan path for its key facts. */
.detail-page .case-overview-card {
  margin-bottom: 24px;
}

.detail-page .case-overview-card .operational-strip-item {
  padding-top: 11px;
  padding-bottom: 12px;
  line-height: 1.3;
}

.detail-page .case-overview-card .operational-strip-item dd {
  line-height: 1.25;
}

.detail-page .case-overview-card .operational-strip-vor,
.detail-page .case-overview-card .operational-strip-loaner {
  min-height: 108px;
}

@media (max-width: 760px) {
  .detail-page .case-status-panel .state-summary,
  .detail-page .case-status-panel .case-status-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 480px) {
  .detail-page .case-status-panel .state-summary,
  .detail-page .case-status-panel .case-status-summary {
    grid-template-columns: 1fr;
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    min-height: 0;
  }
}

/* Detail workflow contract: make active Loan Car days the summary signal and
   keep the provider/source context subordinate and bounded. */
.detail-page .case-overview-card .loaner-overview-value {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.detail-page .case-overview-card .loaner-overview-days {
  display: block;
  max-width: 100%;
  color: var(--ops-ink);
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  font-weight: 700;
  line-height: .9;
  overflow-wrap: anywhere;
}

.detail-page .case-overview-card .loaner-overview-source {
  display: block;
  max-width: 100%;
  color: var(--ops-muted);
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.detail-page .case-overview-card .loaner-overview-status {
  display: block;
  max-width: 100%;
  color: var(--ops-ink);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Native dialog centering also has a deterministic fixed-position fallback
   for browsers that do not expose HTMLDialogElement.showModal(). */
.detail-page .close-dialog {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  z-index: 1000;
}

.detail-page .close-dialog:not([open]):not(.is-open) {
  display: none;
}

.detail-page .close-dialog[open],
.detail-page .close-dialog.is-open {
  display: grid;
}

.detail-page .close-dialog.is-open {
  background: rgb(24 24 22 / 42%);
}

.detail-page .close-dialog-inner {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 24px));
  max-height: min(700px, calc(100dvh - 32px));
  margin: 0;
  border: 1px solid var(--ops-line-strong);
  border-radius: 4px;
  background: var(--ops-surface);
  box-shadow: 0 16px 42px rgb(0 0 0 / 20%);
}

/* The Close Case flow is one compact vertical risk sequence.  The shared
   update-form grid is intentionally reset here so the reason and confirmation
   steps never sit side by side or inherit the timeline's two-column layout. */
.detail-page .close-dialog .update-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  max-width: none;
  margin: 0;
}

.detail-page .close-dialog .close-step-one,
.detail-page .close-dialog .close-step-two {
  grid-column: 1;
}

.detail-page .close-dialog .close-step-one .field {
  gap: 6px;
}

.detail-page .close-dialog .close-step-one textarea {
  min-height: 5rem;
  resize: vertical;
}

.detail-page .close-dialog .close-step-two .form-actions {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.detail-page .close-dialog .close-dialog-close {
  font-size: 1.1rem;
  line-height: 1;
}

@media (max-width: 760px) {
  .detail-page .close-dialog .close-step-two .form-actions {
    flex-direction: row;
    align-items: center;
  }

  .detail-page .close-dialog .close-step-two .form-actions .button {
    width: auto;
    flex: 1 1 0;
  }
}

/* Long TR values must wrap inside the record; the Edit control stays a
   compact action beside the bounded field rather than expanding the card. */
.detail-page .operational-details-module [data-overview-field="technical_reference"] {
  min-width: 0;
}

.detail-page .operational-details-module [data-overview-field="technical_reference"] dd,
.detail-page .operational-details-module [data-overview-field="technical_reference"] .overview-control {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.detail-page .operational-details-module [data-overview-field="technical_reference"] .overview-control input {
  box-sizing: border-box;
  width: 100%;
  max-width: 24rem;
}

/* Operational editors stay in the existing two-column cells.  The field
   label remains the cell's dt; the control replaces only its value layer so
   editing cannot create a second row or shift the neighboring field. */
.detail-page .operational-details-module .overview-item > .overview-control {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  border-top: 0;
}

/* The editor rule above is intentionally specific for the in-place layout,
   so explicitly preserve the native hidden contract after that cascade. */
.detail-page .operational-details-module .overview-item > .overview-control[hidden] {
  display: none !important;
}

.detail-page .operational-details-module .overview-item > .overview-control:not([hidden]) {
  display: block;
}

.detail-page .operational-details-module .module-edit {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 9px;
  font-size: .72rem;
}

@media (max-width: 480px) {
  .detail-page .close-dialog {
    padding: 8px;
  }

  .detail-page .close-dialog-inner {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }
}

/* Keep the sole comment trigger beside the destructive action while the
   expanded composer remains a full-width, normal-flow sibling above it. */
.detail-page .timeline-comment-composer {
  margin-bottom: 0;
}

.detail-page .timeline-comment-composer > summary.sr-only {
  display: block !important;
  position: absolute;
  min-height: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.detail-page .timeline-comment-composer[open] > summary.sr-only {
  margin: -1px;
}

.detail-page .timeline-bottom-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .timeline-navigation-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
}

.detail-page .timeline-bottom-actions .invalidation-action {
  margin: 0;
  padding: 0;
  border-top: 0;
}

@media (max-width: 760px) {
  .detail-page .timeline-bottom-actions {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .detail-page .timeline-bottom-actions .invalidation-action {
    margin-left: auto;
  }

  .detail-page .timeline-navigation-actions {
    margin-left: auto;
  }
}

/* UI consistency contract: all primary Case Detail title rows share the
   Current Issue ledger header geometry and restrained neutral band. */
.detail-page .detail-header-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  margin: 0 -14px 12px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ops-line);
  border-radius: 3px 3px 0 0;
  background: var(--ops-subtle);
}

.detail-page .detail-header-row h2,
.detail-page .detail-header-row h3 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}

.detail-page .case-overview-card > .detail-header-row,
.detail-page > .lifecycle-disclosure > .detail-header-row {
  margin: 0;
  padding-right: 16px;
  padding-left: 16px;
  border-radius: 3px 3px 0 0;
}

.detail-page > .lifecycle-disclosure > .detail-header-row {
  padding-right: 12px;
  padding-left: 12px;
}

.detail-page .timeline-panel > .detail-header-row {
  margin-right: -14px;
  margin-left: -14px;
}

.detail-page .case-overview-card-heading,
.detail-page > .lifecycle-disclosure > summary,
.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .operational-details-module > .direct-module-heading,
.detail-page .direct-detail-modules .next-action-module > .direct-module-heading,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading,
.detail-page .timeline-panel > .section-heading {
  background: var(--ops-subtle) !important;
}

/* Acceptance refinement: keep Overview a compact two-region operating
   snapshot, with four left facts and two right metrics. */
.detail-page .case-overview-card .operational-strip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, .72fr) minmax(150px, .72fr);
  grid-template-areas:
    "rego dealer vor loaner"
    "stage ram vor loaner";
  align-items: stretch;
}

.detail-page .case-overview-card .operational-strip-item {
  min-height: 0;
  padding: 11px 18px 12px;
}

.detail-page .case-overview-card .operational-strip-rego,
.detail-page .case-overview-card .operational-strip-stage {
  padding-left: 18px;
}

.detail-page .case-overview-card .operational-strip-dealer,
.detail-page .case-overview-card .operational-strip-ram {
  padding-left: 16px;
}

.detail-page .case-overview-card .operational-strip-vor,
.detail-page .case-overview-card .operational-strip-loaner {
  min-height: 0;
  margin: 8px 0;
  padding: 10px 14px;
  align-content: center;
}

.detail-page .case-overview-card .operational-strip-loaner {
  margin-right: 16px;
}

.detail-page .case-overview-card .operational-strip-vor-value {
  margin-top: 3px;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  line-height: .9;
}

.detail-page .case-overview-card .operational-strip-loaner dd {
  margin-top: 3px;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: .95;
}

/* Edit controls occupy their ledger cells; read-only values are unaffected. */
.detail-page .overview-control,
.detail-page .module-edit-view .field,
.detail-page .module-edit-view .read-only-integration {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.detail-page .overview-control input,
.detail-page .overview-control select,
.detail-page .overview-control textarea,
.detail-page .module-edit-view input,
.detail-page .module-edit-view select,
.detail-page .module-edit-view textarea {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* Keep nonessential helper text available but out of the primary visual
   ledger, including date format and generic correction guidance. */
.detail-page .module-comment > .field-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* All edit footers share one compact full-width comment row and a right-hand
   action row, preventing a large empty secondary column. */
.detail-page .module-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
  padding-top: 10px;
}

.detail-page .module-comment,
.detail-page .module-comment textarea {
  width: 100%;
  box-sizing: border-box;
}

.detail-page .module-comment textarea {
  min-height: 50px;
}

.detail-page .module-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .detail-page .case-overview-card .operational-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "rego dealer"
      "stage ram"
      "vor loaner";
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    margin: 8px 8px 8px 0;
  }

  .detail-page .case-overview-card .operational-strip-loaner {
    margin-right: 16px;
  }
}

@media (max-width: 480px) {
  .detail-page .case-overview-card .operational-strip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rego"
      "dealer"
      "stage"
      "ram"
      "vor"
      "loaner";
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    margin: 0 12px 12px;
  }
}

/* Final structural contract: the source order is the reading/focus order;
   no visual reordering or transparent wrapper is required. */
.detail-page .direct-detail-modules .overview-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .operational-details-module > .direct-module-heading,
.detail-page .direct-detail-modules .next-action-module > .direct-module-heading,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading,
.detail-page .timeline-panel > .section-heading {
  background: var(--ops-subtle);
}

.detail-page .direct-detail-modules > .overview-form {
  display: block;
}

/* Keep format guidance available to assistive technology while the native
   labels/placeholders carry the compact visual treatment. */
.detail-page .module-edit-view .field-help[id$="-format"],
.detail-page .overview-control .field-help[id$="-format"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.detail-page .invalidation-step[hidden] {
  display: none;
}

/* Overview and Lifecycle are distinct sibling surfaces in the record flow. */
.detail-page > .lifecycle-disclosure {
  margin: 0 0 20px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
}

.detail-page > .lifecycle-disclosure > summary {
  min-height: 0;
  padding: 10px 14px;
  background: var(--ops-surface);
}

.detail-page > .lifecycle-disclosure > .lifecycle-panel {
  padding: 0 14px 14px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .direct-detail-modules .next-action-module > h3,
.detail-page .direct-detail-modules .operational-details-module > h3 {
  letter-spacing: normal;
  text-transform: none;
}

.detail-page .timeline-header-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

@media (max-width: 760px) {
  .detail-page .timeline-header-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

[data-submit-feedback][data-submitting="true"] {
  cursor: wait;
}

[data-submit-feedback][data-submitting="true"] [data-submit-button] {
  cursor: wait;
  opacity: 0.78;
}

[data-submit-feedback][data-submitting="true"] [data-submit-button][data-submitting="true"]::before {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  vertical-align: -0.1em;
  animation: vor-submit-spin 0.7s linear infinite;
}

@keyframes vor-submit-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-submit-feedback][data-submitting="true"] [data-submit-button][data-submitting="true"]::before {
    animation: none;
  }
}

/* Pitstop is imported evidence alongside, but remains separate from, the
   manually managed Loaner provision state.  Keep it compact and read-only. */
.detail-page .pitstop-case-record {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ops-line);
}

.detail-page .pitstop-case-record .section-heading {
  margin-bottom: 10px;
}

.detail-page .pitstop-case-record .section-heading h3 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.detail-page .pitstop-case-record .section-note {
  margin: 4px 0 0;
  max-width: 64ch;
}

.detail-page .pitstop-case-fields {
  border-top: 1px solid var(--ops-line);
}

.detail-page .pitstop-history {
  margin-top: 14px;
}

.detail-page .pitstop-history > .section-note {
  margin: 0 0 8px;
}

.detail-page .pitstop-history-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ops-line);
  list-style: none;
}

.detail-page .pitstop-history-entry {
  padding: 10px 0 0;
  border-bottom: 1px solid var(--ops-line);
}

.detail-page .pitstop-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  align-items: baseline;
  margin-bottom: 8px;
  color: var(--ops-muted);
  font-size: 0.72rem;
}

.detail-page .pitstop-history-meta strong {
  color: var(--ops-ink);
  font-weight: 600;
}

/* Case overview: one clear operating snapshot before the working ledger.
   The card is reserved for the cross-case facts and live metrics; every
   editable module below remains a lighter divider-led surface. */
.detail-page .case-overview-card {
  margin: 0 0 28px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
}

.detail-page .case-overview-card-heading {
  padding: 12px 18px;
  border-bottom: 1px solid var(--ops-line);
  background: var(--ops-subtle);
}

.detail-page .case-overview-card-heading h2 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 1rem;
  font-weight: 600;
}

.detail-page .case-overview-card .operational-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 0.38fr) minmax(132px, 0.38fr);
  grid-template-areas:
    "rego vor loaner"
    "dealer vor loaner"
    "stage vor loaner"
    "ram vor loaner";
  margin: 0;
  border: 0;
  background: transparent;
}

.detail-page .case-overview-card .operational-strip-item {
  min-width: 0;
  padding: 9px 18px;
  border: 0;
}

.detail-page .case-overview-card .operational-strip-rego {
  grid-area: rego;
  padding-top: 16px;
}

.detail-page .case-overview-card .operational-strip-dealer {
  grid-area: dealer;
}

.detail-page .case-overview-card .operational-strip-stage {
  grid-area: stage;
}

.detail-page .case-overview-card .operational-strip-ram {
  grid-area: ram;
  padding-bottom: 16px;
}

.detail-page .case-overview-card .operational-strip-vor {
  grid-area: vor;
  display: grid;
  align-content: center;
   min-height: 112px;
   margin: 12px 0;
   padding: 12px 16px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
}

.detail-page .case-overview-card .operational-strip-loaner {
  grid-area: loaner;
  display: grid;
  align-content: center;
   min-height: 112px;
   margin: 12px 18px 12px 0;
   padding: 12px 16px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
}

.detail-page .case-overview-card .operational-strip-vor-value {
  margin-top: 8px;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.detail-page .case-overview-card .operational-strip-loaner dd {
  margin-top: 8px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.detail-page .case-overview-card .lifecycle-disclosure {
  margin: 0;
  border-top: 1px solid var(--ops-line);
}

.detail-page .case-overview-card .lifecycle-disclosure > summary {
  min-height: 42px;
  padding: 10px 18px;
  background: var(--ops-subtle);
}

.detail-page .case-overview-card .lifecycle-panel {
  padding: 16px 18px 18px;
}

.detail-page .case-overview-card .lifecycle-tracker {
  margin: 4px 0 16px;
}

/* Every working module gets the same quiet header band.  The band creates
   separation without turning the detail into a stack of heavy cards. */
.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .next-action-module > h3,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading,
.detail-page .direct-detail-modules .operational-details-module > h3,
.detail-page .timeline-panel > .section-heading {
  box-sizing: border-box;
  min-height: 42px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-subtle);
}

.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading,
.detail-page .timeline-panel > .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-page .direct-detail-modules .next-action-module > h3,
.detail-page .direct-detail-modules .operational-details-module > h3,
.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading h3,
.detail-page .direct-detail-modules .loaner-module > .section-heading h2,
.detail-page .direct-detail-modules .parts-module > .section-heading h2,
.detail-page .timeline-panel > .section-heading h2 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 0.94rem;
  font-weight: 600;
}

.detail-page .direct-detail-modules .current-issue-module,
.detail-page .direct-detail-modules .next-action-module,
.detail-page .direct-detail-modules .loaner-module,
.detail-page .direct-detail-modules .parts-module,
.detail-page .direct-detail-modules .operational-details-module {
  padding: 20px 0 24px;
  border-top: 0;
}

.detail-page .timeline-panel {
  margin-top: 4px;
  padding: 20px 0 0;
  border-top: 0;
}

@media (max-width: 760px) {
  .detail-page .case-overview-card {
    margin-bottom: 22px;
  }

  .detail-page .case-overview-card .operational-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "rego vor"
      "dealer loaner"
      "stage ram";
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    min-height: 108px;
    margin: 12px 12px 0 0;
    padding: 14px;
  }

  .detail-page .case-overview-card .operational-strip-dealer,
  .detail-page .case-overview-card .operational-strip-stage,
  .detail-page .case-overview-card .operational-strip-ram {
    padding: 12px 18px;
  }

  .detail-page .case-overview-card .operational-strip-ram {
    padding-left: 12px;
  }
}

@media (max-width: 480px) {
  .detail-page .case-overview-card .operational-strip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rego"
      "dealer"
      "stage"
      "ram"
      "vor"
      "loaner";
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    min-height: 0;
    margin: 0 12px 12px;
  }

  .detail-page .case-overview-card .operational-strip-vor {
    margin-top: 0;
  }
}

/* Refined Case Detail ledger: compact white modules with explicit headers. */
.detail-page .case-overview-card {
  margin-bottom: 20px;
}

.detail-page .case-overview-card-heading {
  padding: 10px 16px;
  background: var(--ops-surface);
}

.detail-page .case-overview-card .operational-strip-item {
  padding-top: 8px;
  padding-bottom: 8px;
}

.detail-page .case-overview-card .operational-strip-vor,
.detail-page .case-overview-card .operational-strip-loaner {
  min-height: 112px;
}

.detail-page .case-overview-card .operational-strip-vor-value {
  margin-top: 4px;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  line-height: .95;
}

.detail-page .case-overview-card .operational-strip-loaner dd {
  margin-top: 4px;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
}

.detail-page .lifecycle-panel .state-summary {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(260px, 1fr);
  column-gap: 64px;
}

.detail-page .direct-detail-modules .current-issue-module,
.detail-page .direct-detail-modules .operational-details-module,
.detail-page .direct-detail-modules .next-action-module,
.detail-page .direct-detail-modules .loaner-module,
.detail-page .direct-detail-modules .parts-module {
  box-sizing: border-box;
  margin: 0 0 12px;
  padding: 0 14px 14px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
}

.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .next-action-module > h3,
.detail-page .direct-detail-modules .operational-details-module > h3,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading {
  min-height: 0;
  margin: 0 -14px 12px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--ops-line);
  border-radius: 3px 3px 0 0;
  background: var(--ops-surface);
}

.detail-page .direct-detail-modules .current-issue-module > .direct-module-heading,
.detail-page .direct-detail-modules .loaner-module > .section-heading,
.detail-page .direct-detail-modules .parts-module > .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-page .direct-detail-modules .module-footer { margin: 12px 0 0; }

.detail-page .timeline-panel {
  margin-top: 4px;
  padding: 0 14px 14px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-surface);
}

.detail-page .timeline-panel > .section-heading {
  min-height: 0;
  margin: 0 -14px 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ops-line);
  background: var(--ops-subtle) !important;
}

@media (max-width: 760px) {
  .detail-page .lifecycle-panel .state-summary {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
}

/* Final visual pass: keep the overview compact after all legacy cascade
   layers, and preserve the same safe stack at narrow widths. */
.detail-page .case-overview-card .operational-strip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, .72fr) minmax(150px, .72fr);
  grid-template-areas:
    "rego dealer vor loaner"
    "stage ram vor loaner";
  align-items: stretch;
}

.detail-page .case-overview-card .operational-strip-item {
  min-height: 0;
  padding: 11px 18px 12px;
}

.detail-page .case-overview-card .operational-strip-vor,
.detail-page .case-overview-card .operational-strip-loaner {
  min-height: 0;
  margin: 8px 0;
  padding: 10px 14px;
  align-content: center;
}

.detail-page .case-overview-card .operational-strip-loaner {
  margin-right: 16px;
}

.detail-page .case-overview-card .operational-strip-vor-value {
  margin-top: 3px;
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  line-height: .9;
}

.detail-page .case-overview-card .operational-strip-loaner dd {
  margin-top: 3px;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: .95;
}

.detail-page .overview-control,
.detail-page .module-edit-view .field,
.detail-page .module-edit-view .read-only-integration,
.detail-page .overview-control input,
.detail-page .overview-control select,
.detail-page .overview-control textarea,
.detail-page .module-edit-view input,
.detail-page .module-edit-view select,
.detail-page .module-edit-view textarea {
  min-width: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.detail-page .module-comment > .field-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.detail-page .module-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
  padding-top: 10px;
}

.detail-page .module-comment,
.detail-page .module-comment textarea {
  width: 100%;
  box-sizing: border-box;
}

.detail-page .module-comment textarea {
  min-height: 50px;
}

.detail-page .module-actions {
  justify-content: flex-end;
}

@media (max-width: 760px) {
  .detail-page .case-overview-card .operational-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "rego dealer"
      "stage ram"
      "vor loaner";
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    margin: 8px 8px 8px 0;
  }

  .detail-page .case-overview-card .operational-strip-loaner {
    margin-right: 16px;
  }
}

@media (max-width: 480px) {
  .detail-page .case-overview-card .operational-strip {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rego"
      "dealer"
      "stage"
      "ram"
      "vor"
      "loaner";
  }

  .detail-page .case-overview-card .operational-strip-vor,
  .detail-page .case-overview-card .operational-strip-loaner {
    margin: 0 12px 12px;
  }
}