/* Shared presentation for the course page and its standalone survey. */
.group-formation-page,
.survey-document {
  --survey-accent: #1c5d99;
  --survey-soft: #e9f1f8;
  --survey-field: #f8fafd;
  --survey-focus: #1c5d99;
  --survey-danger: #a82836;
}
body.quarto-dark .group-formation-page,
body.quarto-dark.survey-document {
  --survey-accent: #91d5ef;
  --survey-soft: #1c3047;
  --survey-field: #101a2a;
  --survey-focus: #91d5ef;
  --survey-danger: #ffb0b8;
}
.group-formation-page { max-width: 980px; margin: 0 auto; }
.group-formation-hero {
  background: radial-gradient(circle at 100% 0, rgba(104,197,232,.23), transparent 45%), linear-gradient(130deg, #102a4c, #1c5d99);
  border-radius: var(--danl-radius);
  color: #fff;
  margin-bottom: 1.5rem;
  padding: clamp(1.5rem, 3.6vw, 2.6rem);
}
body.quarto-dark .group-formation-hero { background: linear-gradient(130deg, #06101e, #173553); }
.survey-eyebrow { color: var(--survey-accent); font-size: .73rem; font-weight: 800; letter-spacing: .12em; line-height: 1.5; margin: 0 0 .65rem; text-transform: uppercase; }
.group-formation-hero .survey-eyebrow { color: #bdeaff; }
.group-formation-hero h1 { color: #fff; font-size: clamp(2rem, 3.7vw, 3rem); line-height: 1.12; margin: 0 0 .9rem; }
.group-formation-hero > p:not(.survey-eyebrow) { color: rgba(255,255,255,.84); line-height: 1.65; margin: 0; max-width: 650px; }
.survey-deadline { align-items: baseline; background: rgba(255,255,255,.1); border: 1px solid rgba(189,234,255,.25); border-radius: 12px; display: flex; flex-wrap: wrap; gap: .35rem .65rem; line-height: 1.5; margin-top: 1.4rem; padding: .75rem 1rem; }
.survey-deadline-label { color: #bdeaff; font-size: .73rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.survey-deadline strong { color: #fff; font-size: .93rem; }
.survey-deadline > span:last-child { color: rgba(255,255,255,.75); font-size: .8rem; }
.survey-guidance { background: var(--danl-surface); border: 1px solid var(--danl-line); border-radius: var(--danl-radius); margin-bottom: 1.65rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); }
.survey-guidance h2 { border: 0; color: var(--danl-ink); font-size: 1.15rem; margin: 0 0 .75rem; padding: 0; }
.survey-guidance ul { color: var(--danl-muted); font-size: .93rem; line-height: 1.6; margin: 0; padding-left: 1.2rem; }
.survey-guidance li + li { margin-top: .55rem; }
.survey-guidance strong { color: var(--danl-ink); }
.survey-frame { border: 0; display: block; width: 100%; }
.survey-fallback { color: var(--danl-muted); font-size: .9rem; }

.survey-document { box-sizing: border-box; display: flow-root; font-size: 16px; line-height: 1.55; margin: 0; padding: 1.5rem; }
.survey-document *, .survey-document *::before, .survey-document *::after { box-sizing: border-box; }
.survey-document.is-embedded { background: transparent; padding: 0 0 .5rem; }
.survey-shell { margin: 0 auto; max-width: 980px; }
.survey-intro { margin-bottom: 1.25rem; }
.survey-intro h1 { color: var(--danl-ink); font-size: clamp(1.55rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 .65rem; }
.survey-intro > p:last-child { color: var(--danl-muted); font-size: .95rem; line-height: 1.65; margin: 0; max-width: 780px; }
#teamForm { display: grid; gap: 1.25rem; margin: 0; }
.survey-card { background: var(--danl-surface); border: 1px solid var(--danl-line); border-radius: var(--danl-radius); margin: 0; min-width: 0; padding: clamp(1.1rem, 2.8vw, 1.75rem); }
.survey-card > legend { align-items: center; background: var(--danl-surface); border-radius: 10px; color: var(--danl-ink); display: flex; float: left; font-family: "Manrope", "DM Sans", sans-serif; font-size: clamp(1.08rem, 2vw, 1.25rem); font-weight: 750; gap: .65rem; line-height: 1.35; margin: 0 0 .9rem; padding: 0; width: 100%; }
.survey-card > legend + * { clear: both; }
.survey-step { align-items: center; background: var(--survey-soft); border: 1px solid var(--danl-line); border-radius: 10px; color: var(--survey-accent); display: inline-flex; flex: 0 0 2rem; font-size: .88rem; height: 2rem; justify-content: center; }
.survey-help { color: var(--danl-muted); font-size: .86rem; line-height: 1.6; margin: .45rem 0 0; }
.survey-card > .survey-help:first-of-type { margin: 0 0 1.2rem; }
.survey-help strong { color: var(--danl-ink); }
.survey-member-email-help { margin: 0 0 1.2rem; }
.survey-mode { border: 0; margin: 0 0 1.35rem; min-width: 0; padding: 0; }
.survey-mode > legend { color: var(--danl-ink); font-size: .95rem; font-weight: 700; margin-bottom: .75rem; }
.survey-mode-options { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.survey-mode-option { align-items: flex-start; background: var(--survey-field); border: 1px solid var(--danl-line); border-radius: 12px; cursor: pointer; display: flex; gap: .7rem; line-height: 1.5; padding: 1rem; }
.survey-mode-option:has(input:checked) { background: var(--survey-soft); border-color: var(--survey-accent); box-shadow: inset 0 0 0 1px var(--survey-accent); }
.survey-mode-option input { accent-color: var(--survey-accent); flex: 0 0 1.1rem; height: 1.1rem; margin: .2rem 0 0; width: 1.1rem; }
.survey-mode-option input:focus-visible { outline: 3px solid var(--survey-focus); outline-offset: 3px; }
.survey-mode-option strong { color: var(--danl-ink); display: block; font-size: .95rem; }
.survey-mode-option > span > span { color: var(--danl-muted); display: block; font-size: .83rem; margin-top: .25rem; }
.survey-topics-link { font-size: .88rem; margin: -.35rem 0 1.2rem; }
.survey-topics-link a { color: var(--survey-accent); font-weight: 600; text-underline-offset: .18em; }
.survey-fields { display: grid; gap: 1rem 1.2rem; min-width: 0; }
.survey-fields-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.survey-fields-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.survey-field { min-width: 0; }
.survey-field label { color: var(--danl-ink); display: block; font-size: .88rem; font-weight: 700; line-height: 1.5; margin-bottom: .4rem; }
.survey-required { color: var(--survey-danger); font-weight: 800; }
.survey-optional { color: var(--danl-muted); font-size: .76rem; font-weight: 400; margin-left: .2rem; }
.survey-field input,
.survey-field select,
.survey-field textarea { background: var(--survey-field); border: 1px solid var(--danl-line); border-radius: 9px; color: var(--danl-ink); font: inherit; font-size: .95rem; line-height: 1.45; min-height: 46px; padding: .7rem .8rem; width: 100%; }
.survey-field textarea { min-height: 110px; resize: vertical; }
.survey-field input::placeholder, .survey-field textarea::placeholder { color: var(--danl-muted); opacity: .8; }
.survey-field input:focus-visible,
.survey-field select:focus-visible,
.survey-field textarea:focus-visible,
.survey-button:focus-visible { outline: 3px solid var(--survey-focus); outline-offset: 3px; }
.survey-field input[aria-invalid="true"], .survey-field select[aria-invalid="true"] { border-color: var(--survey-danger); }
.survey-member { background: var(--danl-canvas); border: 1px solid var(--danl-line); border-radius: 14px; margin: 0; min-width: 0; padding: 1rem; }
.survey-member + .survey-member { margin-top: 1rem; }
.survey-member > legend { align-items: center; color: var(--danl-ink); display: flex; float: left; font-size: .95rem; font-weight: 700; gap: .6rem; margin-bottom: .85rem; padding: 0; width: 100%; }
.survey-member > legend + * { clear: both; }
.survey-tag { background: var(--danl-surface); border: 1px solid var(--danl-line); border-radius: 999px; color: var(--danl-muted); font-size: .68rem; font-weight: 600; padding: .15rem .55rem; }
.survey-tag-required { background: var(--survey-soft); color: var(--survey-accent); }
.survey-members-note { margin-top: .9rem; }
.survey-submit-note { border-left: 3px solid var(--survey-accent); color: var(--danl-muted); font-size: .88rem; margin-top: 1.3rem; padding: .1rem 0 .1rem .9rem; }
.survey-submit-note strong { color: var(--danl-ink); }
.survey-submit-note p { margin: .25rem 0 0; }
.survey-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-top: 1.5rem; }
.survey-button { align-items: center; border: 1px solid transparent; border-radius: 999px; cursor: pointer; display: inline-flex; font: inherit; font-size: .9rem; font-weight: 700; gap: .6rem; justify-content: center; line-height: 1.4; min-height: 46px; padding: .75rem 1.15rem; text-align: center; transition: background-color .16s ease, box-shadow .16s ease; }
.survey-button-primary { background: #1c5d99; color: #fff; }
.survey-button-primary:hover { background: #173f73; box-shadow: 0 4px 14px rgba(16,42,76,.16); }
body.quarto-dark .survey-button-primary { background: #91d5ef; color: #102a4c; }
body.quarto-dark .survey-button-primary:hover { background: #bdeaff; }
.survey-button-secondary { background: var(--danl-surface); border-color: var(--danl-line); color: var(--survey-accent); }
.survey-button-secondary:hover { background: var(--survey-soft); }
.survey-button:disabled { cursor: wait; opacity: .7; }
.survey-spinner { animation: survey-spin .7s linear infinite; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; display: none; height: 1rem; width: 1rem; }
.survey-button.is-loading .survey-spinner { display: inline-block; }
.survey-confirmation-help { margin-top: .85rem; }
.survey-message { border: 1px solid var(--danl-line); border-left-width: 4px; border-radius: 12px; font-size: .93rem; line-height: 1.6; margin-top: 1rem; padding: .9rem 1rem; }
.survey-message.is-info { background: var(--survey-soft); border-left-color: var(--survey-accent); color: var(--danl-ink); }
.survey-message.is-success { background: #e8f6ef; border-left-color: #22724d; color: #155537; }
.survey-message.is-danger, .survey-message.is-warning { background: #fff1ed; border-left-color: #b54728; color: #8e2f19; }
body.quarto-dark .survey-message.is-success { background: #14392d; border-left-color: #8bdfb2; color: #b4edcd; }
body.quarto-dark .survey-message.is-danger, body.quarto-dark .survey-message.is-warning { background: #3c2529; border-left-color: #ffb0b8; color: #ffd1d5; }
.survey-document [hidden] { display: none !important; }
@keyframes survey-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .survey-spinner { animation: none; } .survey-button { transition: none; } }
@media (max-width: 680px) {
  .survey-mode-options { grid-template-columns: 1fr; }
  .survey-fields-three { grid-template-columns: 1fr; }
  .survey-document:not(.is-embedded) { padding: 1rem; }
}
@media (max-width: 480px) {
  .survey-fields-two { grid-template-columns: 1fr; }
  .survey-deadline { align-items: flex-start; flex-direction: column; }
  .survey-actions { align-items: stretch; flex-direction: column-reverse; }
  .survey-button { width: 100%; }
}
@media print {
  .survey-document { background: #fff !important; color: #111 !important; padding: 0; }
  .survey-document.printing .survey-shell { display: none !important; }
  .survey-document.printing #print-view { display: block !important; }
  #print-view { color: #111; font: 12pt/1.5 Arial, sans-serif; }
  #print-view h1 { color: #102a4c; font-size: 20pt; }
  #print-view table { border-collapse: collapse; margin-top: 1rem; width: 100%; }
  #print-view th, #print-view td { border: 1px solid #aaa; color: #111; padding: .45rem; text-align: left; vertical-align: top; white-space: pre-wrap; }
  #print-view th { width: 34%; }
  #print-view tr { break-inside: avoid; }
}