:root { --course-accent: #ff6b57; --course-soft: #ffe0da; --course-dark: #732b25; --orange: #ff6b57; --lime: #c9f45b; --teal: #732b25; --blue: #235ee7; }
.safety-picker { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-block: 24px; }
.safety-picker label { flex: 1 1 280px; min-width: 0; font-weight: 750; }
.safety-picker select { display: block; width: 100%; max-width: 100%; min-height: 44px; margin-top: 8px; padding: 10px; border: 2px solid var(--ink); background: white; color: var(--ink); font: inherit; }
.safety-panel { padding: 22px; margin-block: 22px; border: 2px solid var(--ink); border-radius: 12px; background: var(--white); box-shadow: 5px 5px 0 var(--ink); overflow-wrap: anywhere; }
.safety-panel dt { font-weight: 800; margin-top: 16px; }
.safety-panel dd { margin: 6px 0 18px; line-height: 1.6; }
.safety-panel p { margin-block: 14px; }
.safety-panel summary { padding-block: 10px; min-height: 44px; cursor: pointer; font-weight: 750; }
.safety-panel textarea { display: block; width: 100%; min-height: 140px; padding: 12px; margin-top: 10px; border: 2px solid var(--ink); font: inherit; resize: vertical; }
.safety-choice { display: block; width: 100%; min-height: 44px; margin-block: 12px; padding: 14px; border: 2px solid var(--ink); border-radius: 8px; background: var(--course-soft); color: var(--ink); font: 650 15px/1.5 var(--sans); text-align: left; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.safety-choice:hover { background: white; }
.safety-panel :focus-visible, .safety-picker :focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
@media (max-width: 500px) { .safety-panel { padding: 16px; } .safety-picker > * { width: 100%; } }