/* The pinned runtime supplies primitives; this stylesheet owns the page theme. */
html { color-scheme: light; }
html [data-slot="input"], html [data-slot="select-trigger"][data-size] { height: 50px; min-height: 50px; }
html [data-slot="select-trigger"] { width: 100%; min-width: 0; }
html [data-slot="radio-group-item"][data-state="checked"] { color: #dc2626; border-color: #dc2626; }
html [data-slot="radio-group-item"][data-state="checked"] svg { fill: currentColor; }
html [data-slot="radio-group-item"][data-state="checked"] ~ label { color: #dc2626; }
html.adverse-touch .patient-demographics, html.adverse-touch .drug-photo-grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 639px) {
  .patient-demographics, .drug-photo-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px), (pointer: coarse) {
  .drug-photo-card { height: 160px; aspect-ratio: auto; }
  .drug-photo-card img { height: calc(100% - 24px); object-fit: contain; }
}
.photo-error { position: absolute; bottom: 20px; left: 16px; right: 16px; color: #fca5a5; text-align: center; font-size: 14px; }

/* Touch devices keep the reference colors and layout with larger interaction areas. */
html.adverse-touch header > div, html.adverse-touch main, html.adverse-touch footer > div {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
html.adverse-touch header > div { padding-top: max(16px, env(safe-area-inset-top)); }
html.adverse-touch footer > div { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
html.adverse-touch [data-slot="input"], html.adverse-touch [data-slot="textarea"], html.adverse-touch [data-slot="select-trigger"] { font-size: 16px; }
html.adverse-touch button:has(.lucide-mic), html.adverse-touch button:has(.lucide-mic-off) { min-height: 44px; }
html.adverse-touch [data-slot="select-trigger"] { max-width: 100%; min-width: 0; }
html.adverse-touch [data-slot="select-value"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.adverse-touch [data-slot="select-content"] { max-width: calc(100vw - 24px); }
html.adverse-touch [data-slot="select-item"] { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
html.adverse-touch [data-slot="radio-group"] { min-height: 44px; align-items: center; }
html.adverse-touch [data-slot="radio-group"] label { min-height: 44px; }
html.adverse-touch [data-slot="radio-group-item"], html.adverse-touch [data-slot="checkbox"], html.adverse-touch [data-remove] { position: relative; }
html.adverse-touch [data-slot="radio-group-item"]::after, html.adverse-touch [data-slot="checkbox"]::after, html.adverse-touch [data-remove]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
}
html.adverse-touch [data-remove] { position: absolute; min-width: 44px; min-height: 44px; }
html.adverse-touch [data-slot="dialog-content"] { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
/* Keep the centering transform throughout the reference's zoom animation. */
html.adverse-touch [data-slot="dialog-content"][data-state="open"] { animation-name: adverse-dialog-enter; }
html.adverse-touch [data-slot="dialog-content"][data-state="closed"] { animation-name: adverse-dialog-exit; }
@keyframes adverse-dialog-enter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes adverse-dialog-exit {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(.95); }
}
html.adverse-touch [data-slot="dialog-content"] button { min-height: 44px; }
html.adverse-touch [data-slot="dialog-close"] { min-width: 44px; min-height: 44px; }
html.adverse-touch .photo-capture[role="dialog"] { height: 100%; height: 100dvh; bottom: auto; margin: 0; }
html.adverse-touch .photo-capture-header { flex-shrink: 0; padding-top: max(16px, env(safe-area-inset-top)); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
html.adverse-touch .photo-capture-header button { min-width: 44px; min-height: 44px; }
html.adverse-touch .photo-capture-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
html.adverse-touch .photo-capture-body > div { flex-shrink: 0; margin-top: auto; margin-bottom: auto; }
.photo-capture [data-variant="outline"] { background: transparent; color: #fff; }
html.adverse-touch .photo-error { position: static; flex-shrink: 0; padding: 8px 16px max(16px, env(safe-area-inset-bottom)); }

/* Taste: a calm clinical palette. Aceternity-inspired form and card feedback,
   adapted to native CSS for this build-free React page (no animation dependency). */
.adverse-theme {
  --adverse-canvas: #f3f6fa;
  --adverse-surface: #ffffff;
  --adverse-input: #fbfcfe;
  --adverse-ink: #182b46;
  --adverse-muted: #586b80;
  --adverse-line: #d6dfe9;
  --adverse-accent: #245bb5;
  --adverse-tint: #edf4ff;
  --adverse-selected: #c5222a;
  --adverse-selected-bg: #fff1f2;
  --adverse-shadow: 0 4px 24px rgb(31 58 98 / 4%);
  color: var(--adverse-ink);
  background: var(--adverse-canvas);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
}
.adverse-page { min-height: 100dvh; background: var(--adverse-canvas); }
.adverse-header { background: var(--adverse-surface); border-color: var(--adverse-line); }
.adverse-header > div { padding-block: 28px; }
.adverse-header h1 { color: var(--adverse-ink); font-size: 26px; font-weight: 650; letter-spacing: -.025em; line-height: 1.35; }
.adverse-header p { margin-top: 5px; font-size: 13px; letter-spacing: .04em; }
.adverse-brand-icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; background: var(--adverse-accent); }
.adverse-header-row { display: flex; align-items: center; gap: 12px; }
.adverse-header-copy { flex: 1; min-width: 0; }
.adverse-header-row .adverse-header-back { flex-shrink: 0; min-height: 44px; white-space: nowrap; }
.adverse-main { padding-block: 28px; }
.adverse-notice { padding: 20px; border: 1px solid var(--adverse-line); border-left: 3px solid var(--adverse-accent); border-radius: 12px; background: var(--adverse-tint); }
.adverse-notice h2, .adverse-notice svg { color: var(--adverse-accent); }
.adverse-notice ul { color: var(--adverse-ink); line-height: 1.8; list-style: none; }
.adverse-notice-warning { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--adverse-line); color: var(--adverse-selected); font-weight: 500; }
.adverse-section, .adverse-consent { padding: 28px; border: 1px solid var(--adverse-line); border-radius: 16px; background: var(--adverse-surface); box-shadow: var(--adverse-shadow); }
.adverse-section > .adverse-section-heading { gap: 12px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--adverse-line); }
.adverse-section-heading h2 { color: var(--adverse-ink); font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.adverse-section-heading p { margin-top: 3px; line-height: 1.6; }
.adverse-section-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--adverse-tint); }
.adverse-section-icon svg { color: var(--adverse-accent); }
.adverse-page .text-gray-900, .adverse-page .text-gray-700 { color: var(--adverse-ink); }
.adverse-page .text-gray-500, .adverse-page .text-muted-foreground { color: var(--adverse-muted); }
.adverse-page .text-red-500, .adverse-theme #submit-error { color: var(--adverse-selected); }
.adverse-page [data-slot="label"] { color: var(--adverse-ink); line-height: 1.5; }
.adverse-theme [data-slot="input"], .adverse-theme [data-slot="textarea"], .adverse-theme [data-slot="select-trigger"] {
  border-color: var(--adverse-line);
  border-radius: 10px;
  background: var(--adverse-input);
  color: var(--adverse-ink);
  padding-inline: 14px;
  box-shadow: none;
}
.adverse-theme [data-slot="textarea"] { padding-block: 12px; min-height: 144px; line-height: 1.8; }
.adverse-theme [data-slot="input"]::placeholder, .adverse-theme [data-slot="textarea"]::placeholder, .adverse-theme [data-slot="select-trigger"][data-placeholder] { color: var(--adverse-muted); opacity: 1; }
.adverse-theme [data-slot="input"]:focus, .adverse-theme [data-slot="textarea"]:focus, .adverse-theme [data-slot="select-trigger"]:focus-visible {
  border-color: var(--adverse-accent);
  outline: 2px solid var(--adverse-accent);
  outline-offset: 2px;
  background: var(--adverse-surface);
}
.adverse-theme [data-slot].border-red-500 { border-color: var(--adverse-selected); }
.adverse-voice { min-height: 44px; border-radius: 10px; background: var(--adverse-tint); color: var(--adverse-accent); }
.adverse-voice.is-listening { background: #b91c1c; color: #fff; }
.adverse-page [data-slot="radio-group"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 0; }
.patient-demographics [data-slot="radio-group"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adverse-page [data-slot="radio-group"] > div { min-height: 50px; min-width: 0; gap: 6px; padding: 0 10px; border: 1px solid var(--adverse-line); border-radius: 10px; background: var(--adverse-input); }
.adverse-page [data-slot="radio-group"] > div > label { flex: 1; margin: 0; min-height: 48px; font-size: 14px; }
.adverse-page [data-slot="radio-group"] > div:has([data-state="checked"]) { border-color: var(--adverse-selected); background: var(--adverse-selected-bg); }
.adverse-page [data-slot="radio-group-item"] { border-color: var(--adverse-muted); background: var(--adverse-surface); }
html .adverse-page [data-slot="radio-group-item"][data-state="checked"], html .adverse-page [data-slot="radio-group-item"][data-state="checked"] ~ label { color: var(--adverse-selected); border-color: var(--adverse-selected); }
.adverse-page [data-slot="checkbox"] { margin-top: 3px; border-color: var(--adverse-muted); background: var(--adverse-surface); }
.adverse-page [data-slot="checkbox"][data-state="checked"] { background: var(--adverse-accent); border-color: var(--adverse-accent); color: #fff; }
.drug-photo-card { border-radius: 12px; background: var(--adverse-input); }
button.drug-photo-card { position: relative; isolation: isolate; overflow: hidden; border-width: 1px; border-color: var(--adverse-muted); color: var(--adverse-ink); padding: 16px; }
button.drug-photo-card > svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--adverse-tint); color: var(--adverse-accent); }
button.drug-photo-card > span:first-of-type { font-size: 15px; font-weight: 600; }
button.drug-photo-card > span:last-of-type { font-size: 12px; line-height: 1.6; color: var(--adverse-muted); }
/* Aceternity Card Hover pattern: a soft highlight acknowledges the active upload target. */
button.drug-photo-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at top right, var(--adverse-tint), transparent 70%); opacity: 0; }
button.drug-photo-card:focus-visible { outline: 2px solid var(--adverse-accent); outline-offset: 3px; }
button.drug-photo-card:focus-visible::before { opacity: 1; }
.drug-photo-card [data-remove] { background: #b91c1c; color: #fff; }
.adverse-consent { background: var(--adverse-surface); }
.adverse-consent p { line-height: 1.8; }
.adverse-theme #submit-report, .adverse-theme #confirm-submit, .adverse-theme #new-report { background: var(--adverse-accent); color: #fff; border-radius: 10px; box-shadow: none; font-weight: 600; }
.adverse-theme #submit-report { height: 52px; margin-top: 24px; font-size: 16px; }
.adverse-theme button:disabled { opacity: .6; cursor: not-allowed; }
.adverse-help { padding: 8px 16px; background: transparent; }
.adverse-help h3 { margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.adverse-help a { min-height: 44px; color: var(--adverse-accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.adverse-footer { margin-top: 0; background: transparent; border-color: var(--adverse-line); }
.adverse-footer p { color: var(--adverse-muted); line-height: 1.8; font-size: 12px; }
.adverse-theme [data-slot="dialog-content"], .adverse-theme [data-slot="select-content"] { background: var(--adverse-surface); color: var(--adverse-ink); border-color: var(--adverse-line); border-radius: 14px; }
.adverse-theme [data-slot="dialog-description"], .adverse-theme [data-slot="dialog-description"] .text-gray-500 { color: var(--adverse-muted); }
.adverse-theme [data-slot="dialog-content"] [data-variant="outline"] { background: var(--adverse-surface); color: var(--adverse-ink); border-color: var(--adverse-line); border-radius: 10px; }
.adverse-theme [data-slot="select-item"][data-highlighted] { background: var(--adverse-tint); color: var(--adverse-accent); }
.adverse-theme button:focus-visible, .adverse-theme a:focus-visible { outline: 2px solid var(--adverse-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  button.drug-photo-card:hover { background: var(--adverse-input); border-color: var(--adverse-accent); color: var(--adverse-ink); }
  button.drug-photo-card:hover::before { opacity: 1; }
  .adverse-voice:not(.is-listening):hover { background: var(--adverse-tint); box-shadow: inset 0 0 0 1px var(--adverse-accent); }
}
@media (prefers-reduced-motion: no-preference) {
  button.drug-photo-card::before { transition: opacity .2s ease; }
  .adverse-voice, .adverse-theme #submit-report { transition: transform .15s ease; }
  .adverse-voice:active, .adverse-theme #submit-report:active { transform: scale(.985); }
}
@media (prefers-reduced-motion: reduce) {
  .adverse-theme *, .adverse-theme *::before, .adverse-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 639px) {
  .adverse-header > div { padding-block: 22px; }
  .adverse-header h1 { font-size: 22px; }
  .adverse-header-row h1 { font-size: clamp(18px, 5vw, 22px); }
  .adverse-header-row .adverse-brand-icon { width: 36px; height: 36px; border-radius: 10px; }
  .adverse-main { padding-block: 20px; }
  .adverse-section, .adverse-consent { padding: 20px; }
  .adverse-section > .adverse-section-heading { margin-bottom: 20px; padding-bottom: 16px; }
  .adverse-page [data-slot="radio-group"] > div { padding-inline: 6px; }
  .adverse-page [data-slot="radio-group"] > div > label { font-size: 13px; }
  .adverse-notice { padding: 16px; }
}
@media (prefers-color-scheme: dark) {
  html:has(.adverse-theme) { color-scheme: dark; }
  .adverse-theme {
    --adverse-canvas: #111b29;
    --adverse-surface: #192536;
    --adverse-input: #142030;
    --adverse-ink: #e4edf8;
    --adverse-muted: #a8b9cd;
    --adverse-line: #42556e;
    --adverse-accent: #93bcff;
    --adverse-tint: #23364f;
    --adverse-selected: #ff9494;
    --adverse-selected-bg: #3d2632;
    --adverse-shadow: none;
  }
  .adverse-brand-icon { background: #245bb5; }
  .adverse-theme #submit-report, .adverse-theme #confirm-submit, .adverse-theme #new-report { color: #132238; }
  .adverse-page [data-slot="checkbox"][data-state="checked"] { color: #132238; }
}

.adverse-notice-content { flex: 1; min-width: 0; }
.adverse-notice-heading { margin-bottom: 8px; }
.adverse-notice-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.adverse-notice-actions { display: flex; justify-content: flex-end; }
.adverse-severity { grid-column: 1 / -1; }
.adverse-adr-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 14px; border: 1px solid var(--adverse-accent); border-radius: 10px; color: var(--adverse-accent); font-size: 14px; font-weight: 600; }
.adverse-adr-link[hidden] { display: none; }
.adverse-adr-link:hover { background: var(--adverse-surface); }
.adverse-adr-link:focus-visible { outline: 3px solid var(--adverse-accent); outline-offset: 3px; }
.adverse-draft { padding: 16px 20px; border: 1px solid var(--adverse-line); border-radius: 12px; background: var(--adverse-surface); }
.adverse-adr-videos { display: flex; flex-direction: column; gap: 24px; }
.adverse-adr-videos video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #101827; border-radius: 10px; }
.adverse-adr-player { position: relative; }
.adverse-adr-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: clamp(48px, 12vw, 64px); height: clamp(48px, 12vw, 64px); padding: 0; border: 2px solid #fff; border-radius: 50%; background: rgba(16, 24, 39, .8); color: #fff; font-size: 24px; cursor: pointer; }
.adverse-adr-play span { margin-left: 3px; }
.adverse-adr-play:not(:disabled):hover, .adverse-adr-play:not(:disabled):active { transform: translate(-50%, -50%); background: #101827; }
.adverse-adr-play:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.adverse-adr-play:disabled { cursor: wait; }
.adverse-adr-play[hidden] { display: none; }