/* Generated file. Source: shared/brand/styles/orders/detail-cards.css. Do not edit directly. Run: node tools/brand/sync-shared-brand.mjs */
/* Detail cards — frosted glass, grid overlay, hover, corner labels */
body[data-orders-surface="cs-detail"] .orders-card,
body[data-orders-surface="cs-detail"] .orders-question-card {
  background: linear-gradient(180deg, var(--orders-surface-0), var(--orders-surface-1));
  --orders-frame-stroke: var(--orders-tone-custom-line);
  transition:
    border-color 280ms ease,
    background 280ms ease;
}

body[data-orders-surface="cs-detail"] .orders-card:hover,
body[data-orders-surface="cs-detail"] .orders-question-card:hover {
  --orders-frame-stroke: color-mix(in srgb, var(--orders-tone-custom-line) 70%, white 30%);
}

body[data-orders-surface="cs-detail"] [data-orders-route-key="std"] .orders-card,
body[data-orders-surface="cs-detail"] [data-orders-route-key="std"] .orders-question-card {
  --orders-frame-stroke: var(--orders-tone-standard-line);
}

body[data-orders-surface="cs-detail"] [data-orders-route-key="std"] .orders-card:hover,
body[data-orders-surface="cs-detail"] [data-orders-route-key="std"] .orders-question-card:hover {
  --orders-frame-stroke: color-mix(in srgb, var(--orders-tone-standard-line) 70%, white 30%);
}

@media (hover: hover) and (pointer: fine) {
  body[data-orders-surface="cs-detail"] .orders-card:hover,
  body[data-orders-surface="cs-detail"] .orders-question-card:hover {
    transform: translateY(-1px);
    transition: transform 280ms ease;
  }
}

body[data-orders-surface="cs-detail"] .orders-form-shell,
body[data-orders-surface="cs-detail"] .orders-explanation-card {
  position: relative;
  background:
    linear-gradient(180deg, var(--orders-surface-0), var(--orders-surface-1));
}

body[data-orders-surface="cs-detail"] .orders-form-shell::before,
body[data-orders-surface="cs-detail"] .orders-explanation-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, var(--orders-grid-overlay) 39px, var(--orders-grid-overlay) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 79px, var(--orders-grid-overlay) 79px, var(--orders-grid-overlay) 80px);
  opacity: 0.38;
  border-radius: inherit;
}

body[data-orders-surface="cs-detail"] .orders-form-shell > *,
body[data-orders-surface="cs-detail"] .orders-explanation-card > * {
  position: relative;
  z-index: 1;
}

/* Accent form-shell stroke — kept for specificity but base rule already sets blue */
body[data-orders-surface="cs-detail"] .orders-form-shell.is-semi-accent,
body[data-orders-surface="cs-detail"] .orders-form-shell.is-full-accent,
body[data-orders-surface="cs-detail"] .orders-form-shell.is-blindbox-accent {
  --orders-frame-stroke: var(--orders-tone-custom-line);
}

body[data-orders-surface="cs-detail"] [data-orders-route-key="std"] .orders-form-shell {
  --orders-frame-stroke: var(--orders-tone-standard-line);
}

body[data-orders-surface="cs-detail"] [data-orders-route-key="std"] .orders-form-shell.is-semi-accent,
body[data-orders-surface="cs-detail"] [data-orders-route-key="std"] .orders-form-shell.is-full-accent,
body[data-orders-surface="cs-detail"] [data-orders-route-key="std"] .orders-form-shell.is-blindbox-accent {
  --orders-frame-stroke: var(--orders-tone-standard-line);
}

/* Top-left corner label */
body[data-orders-surface="cs-detail"] .orders-image-zone > .orders-route-label,
body[data-orders-surface="cs-detail"] .orders-form-shell > .orders-route-label,
body[data-orders-surface="cs-detail"] .orders-component-breakdown > .orders-route-label,
body[data-orders-surface="cs-detail"] .orders-submit-cta > .orders-route-label {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 2;
  pointer-events: none;
}

/* Question head alignment — title left, marker right */
body[data-orders-surface="cs-detail"] .orders-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}

@media (max-width: 720px) {
  body[data-orders-surface="cs-detail"] .orders-image-zone > .orders-route-label,
  body[data-orders-surface="cs-detail"] .orders-form-shell > .orders-route-label,
  body[data-orders-surface="cs-detail"] .orders-component-breakdown > .orders-route-label,
  body[data-orders-surface="cs-detail"] .orders-submit-cta > .orders-route-label {
    top: 10px;
    left: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-orders-surface="cs-detail"] .orders-card,
  body[data-orders-surface="cs-detail"] .orders-question-card {
    transition: none !important;
    transform: none !important;
  }
}