/* ══════════════════════════════════════════════════════════════════════════
   Coaching-staff card, pill and coach modal.

   Shared by four surfaces so the card a coach edits is the card a player sees:
     · public program page   /colleges/_profile.html
     · public camp page      /colleges/_camp.html
     · program edit page     /app/college/profile.html
     · settings              /app/settings.html

   Tokens only — the two public pages load tokens.css without app.css, so this
   file can't lean on anything defined there.
   ══════════════════════════════════════════════════════════════════════════ */

.sc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-5);
}
/* A track sized `1fr` still refuses to go under its content's min-content
   width, and the email line doesn't wrap — without this, one long address
   inflates its own column and starves the others. */
.sc-card, .sc-card__open { min-width: 0; }

/* The camp page's roster sits in the column left of the fee card, ~624px wide,
   where a 200px minimum lands on two. A smaller card fits three across there
   and still auto-fills sensibly once the fee card drops below on tablet. */
.sc-grid.is-3up {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}
.sc-grid.is-3up .sc-card__body { padding: var(--space-2) var(--space-3) var(--space-3); }
.sc-grid.is-3up .sc-card__name { font-size: 0.9375rem; }
.sc-grid.is-3up .sc-card__photo { font-size: 2rem; }

/* A square headshot with the role pill in its bottom-left corner, then the name
   and, under a hairline, the email. The text band is only as tall as those two
   lines need — a fixed card ratio left the type swimming in white. */
.sc-card { position: relative; container-type: inline-size; }

/* The whole card opens the modal. Edit controls are siblings of this button,
   never children — a button cannot nest inside a button. */
.sc-card__open {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-spring),
              transform var(--duration-base) var(--ease-spring),
              border-color var(--duration-base) var(--ease-spring);
}
.sc-card__open:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sc-card__open:active { box-shadow: var(--shadow-sm); transform: translateY(0); }
.sc-card__open:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.sc-card.is-head .sc-card__open { border-color: var(--color-primary-soft); box-shadow: var(--shadow-md); }
/* An open edit form breaks the grid row, so its card stays marked meanwhile. */

/* A square of the column's width, so the well is the same on every surface and
   the card's height follows the text rather than a ratio. The photo is fitted
   rather than cropped — a coach uploads a portrait or an action shot, and cover
   took the head off one and the ball off the other. What is left over is the
   crest green, the same field the initials sit on. */
.sc-card__photo {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  background-color: var(--color-canvas-deep);
  background-image: linear-gradient(135deg, var(--color-canvas-deep), #14332a);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: grid;
  place-items: center;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.25rem;
  letter-spacing: 0.02em;
}
.sc-card__initials { line-height: 1; }

.sc-card__body {
  flex: 1 1 auto;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + 2px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 3px;
  overflow: hidden;
}
.sc-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-ink-900);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* The address is the one line that can run past the card. It truncates rather
   than wrapping — the whole of it is a click away in the coach modal. The rule
   above it separates who they are from how to reach them. */
.sc-card__email {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px solid var(--border-hairline);
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--color-ink-500);
}
.sc-card__email svg { flex-shrink: 0; width: 12px; height: 12px; color: var(--color-accent-deep); }
.sc-card__email > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Three to a row in a half-width panel leaves a card near 130px. The text band
   is a fixed share of the card, so the type has to answer to the card's own
   width, not the viewport's — a two-line name clips otherwise. */
@container (max-width: 178px) {
  .sc-card__body { padding: var(--space-2) var(--space-3) var(--space-3); }
  .sc-card__name { font-size: 0.875rem; }
  .sc-card__email { font-size: 0.6875rem; padding-top: 6px; }
  .sc-card__email svg { width: 11px; height: 11px; }
  .sc-card__photo { font-size: 1.75rem; }
  .sc-card__photo .sc-pill--pinned { bottom: 6px; left: 6px; padding: 2px 7px; font-size: 0.5625rem; }
}

/* Brass for the head coach, quiet brass-on-cream for everyone else. */
.sc-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  border: 1px solid rgb(199 164 108 / 0.4);
}
.sc-pill.is-head {
  background: var(--color-accent);
  color: var(--color-ink-900);
  border-color: var(--color-accent);
}

/* Sat in a headshot's top-left corner. Its own scrim keeps it readable on a
   light photo without dimming the whole image. Card and modal, same pill. */
.sc-pill--pinned {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  background: rgb(13 42 34 / 0.82);
  color: var(--color-accent);
  border-color: rgb(199 164 108 / 0.3);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.sc-pill--pinned.is-head {
  background: var(--color-accent);
  color: var(--color-canvas-deep);
  border-color: var(--color-accent);
}
/* On a card it rides the bottom-left corner, where it labels the face without
   covering it and stays clear of the edit controls opposite. */
.sc-card__photo .sc-pill--pinned { top: auto; bottom: var(--space-2); left: var(--space-2); }
.sc-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--color-ink-400);
}

/* ── Edit controls (authed surfaces only) ─────────────────────────────────
   Revealed on hover, same affordance the Recruit Tracker cards use. They sit in
   the photo's bottom-right corner rather than the top, where they would cross
   a face. The photo is a square of the card's width, so 100cqw is its bottom
   edge whatever the column measures. */
.sc-actions {
  position: absolute;
  top: calc(100cqw - 38px);
  right: 8px;
  z-index: 4;
  display: flex;
  gap: 5px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--duration-base) var(--ease-spring),
              transform var(--duration-base) var(--ease-spring);
}
.sc-card:hover .sc-actions,
.sc-card:focus-within .sc-actions { opacity: 1; transform: none; }
/* Touch has no hover, and :focus-within can't rescue it — you would have to tap
   an invisible button first. Keep the controls out on touch. */
@media (hover: none) {
  .sc-actions { opacity: 1; transform: none; }
}
.sc-act {
  width: 27px;
  height: 27px;
  padding: 0;
  border-radius: 50%;
  background: rgb(13 42 34 / 0.55);
  border: 1px solid rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  color: rgb(255 255 255 / 0.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color var(--duration-fast),
              color var(--duration-fast),
              border-color var(--duration-fast);
}
.sc-act:hover { background: rgb(13 42 34 / 0.8); color: #fff; }
.sc-act.is-danger:hover { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.sc-act:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── Coach edit form ──────────────────────────────────────────────────────
   Fills the body of the coach edit modal (see openCoachEditModal in
   staff-cards.js). It used to drop open inside the grid, which pushed the
   rest of the staff down the page. */
.sc-form--modal .modal-body { gap: var(--space-4); }
/* Match the rest of the app's modal forms: brass small-caps labels on a
   recessed field, rather than the grey-on-white the inline form used. */
.sc-form.sc-form--modal label { color: var(--color-accent-deep); font-size: 0.75rem; letter-spacing: 0.06em; }
.sc-form.sc-form--modal input,
.sc-form.sc-form--modal textarea {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--surface-base);
  font-size: 0.9375rem;
}
.sc-form.sc-form--modal input:hover,
.sc-form.sc-form--modal textarea:hover { background: var(--surface-elevated); }
.sc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.sc-form__field { display: flex; flex-direction: column; gap: 4px; }
.sc-form label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ink-500);
}
.sc-form input,
.sc-form textarea {
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-ink-900);
}
.sc-form textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
.sc-form input:focus,
.sc-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}
.sc-form__hint { margin: 0; font-size: 0.75rem; color: var(--color-ink-400); }

/* ── Headshot upload ──────────────────────────────────────────────────────
   One well that reads as a drop target: the circle is the button, the copy
   beside it names the field and repeats the action in words. */
.sc-photo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast) var(--ease-spring),
              background-color var(--duration-fast) var(--ease-spring);
}
.sc-photo.is-dragging {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.sc-photo__drop {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  padding: 0;
  border: 1.5px dashed rgb(138 106 60 / 0.75);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  background-size: cover;
  background-position: center;
  color: var(--color-accent-deep);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-spring),
              border-color var(--duration-fast) var(--ease-spring),
              background-color var(--duration-fast) var(--ease-spring);
}
.sc-photo__drop:hover { transform: scale(1.04); border-color: var(--color-accent-deep); }
.sc-photo__drop:active { transform: scale(0.98); }
.sc-photo__drop:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sc-photo.is-dragging .sc-photo__drop { border-style: solid; border-color: var(--color-accent-deep); transform: scale(1.04); }

.sc-photo__mark { display: grid; place-items: center; line-height: 0; }

/* With a photo set, the circle is the photo and the camera rides a scrim that
   only appears on hover, focus or drag. */
.sc-photo.has-photo .sc-photo__drop {
  border-style: solid;
  border-color: var(--border-default);
  background-color: var(--color-canvas-deep);
}
.sc-photo.has-photo .sc-photo__mark {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(13 42 34 / 0.62);
  color: #fff;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-spring);
}
.sc-photo.has-photo .sc-photo__drop:hover .sc-photo__mark,
.sc-photo.has-photo .sc-photo__drop:focus-visible .sc-photo__mark,
.sc-photo.is-dragging .sc-photo__mark { opacity: 1; }

.sc-photo__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-photo__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ink-500);
}
.sc-photo__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sc-photo__btn {
  padding: 6px 14px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-spring),
              color var(--duration-fast) var(--ease-spring),
              transform var(--duration-fast) var(--ease-spring);
}
.sc-photo__btn:hover { background: var(--color-primary); color: #fff; }
.sc-photo__btn:active { transform: translateY(1px); }
.sc-photo__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sc-photo__btn.is-quiet {
  padding: 6px 8px;
  border-color: transparent;
  color: var(--color-ink-500);
  font-weight: 500;
}
.sc-photo__btn.is-quiet:hover { background: transparent; color: var(--color-danger); text-decoration: underline; }

@media (max-width: 520px) {
  .sc-photo { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-photo__drop, .sc-photo__btn { transition: none; }
  .sc-photo__drop:hover, .sc-photo__drop:active, .sc-photo.is-dragging .sc-photo__drop { transform: none; }
}
/* ── Role toggle ──────────────────────────────────────────────────────────
   Head coach or assistant, as a two-way segment. It replaces a free-text
   title, so the pill on the card is whatever was chosen here — the two can't
   drift. Radios underneath, so a keyboard moves through it with the arrows. */
.sc-seg__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ink-500);
}
.sc-form--modal .sc-seg__label { color: var(--color-accent-deep); font-size: 0.75rem; letter-spacing: 0.06em; }
.sc-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 340px;
  gap: 3px;
  padding: 3px;
  background: var(--surface-recessed);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
}
.sc-seg__opt { display: block; min-width: 0; cursor: pointer; }
.sc-seg__opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.sc-seg__opt span {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color var(--duration-fast) var(--ease-spring),
              color var(--duration-fast) var(--ease-spring),
              transform var(--duration-fast) var(--ease-spring);
}
.sc-seg__opt:hover span { color: var(--color-primary); }
.sc-seg__opt:active span { transform: translateY(1px); }
.sc-seg__opt input:checked + span {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.sc-seg__opt input:focus-visible + span { box-shadow: var(--shadow-focus); }
@media (prefers-reduced-motion: reduce) {
  .sc-seg__opt span { transition: none; }
  .sc-seg__opt:active span { transform: none; }
}

/* ── Coach modal ──────────────────────────────────────────────────────────
   The card, opened up. A deep-green identity panel carries the headshot with
   the role pill in its corner, the name and the email under a brass rule — the
   same order the card reads in — and the bio takes the light column beside it.
   A coach with no bio yet gets the panel on its own rather than a blank half. */
.sc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgb(7 26 21 / 0.5);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.sc-modal-backdrop.is-open { display: flex; animation: sc-fade 180ms var(--ease-spring) both; }
.sc-modal {
  position: relative;
  width: 100%;
  max-width: 660px;
  /* A long bio scrolls in its own column rather than stretching the panel into
     a column of empty green. */
  max-height: min(calc(100vh - var(--space-10)), 520px);
  display: flex;
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating), 0 0 0 1px rgb(199 164 108 / 0.1);
  overflow: hidden;
  animation: sc-rise 240ms var(--ease-spring) both;
}
/* The brass letterhead rule the app's own modals wear, inset from the corners
   so it reads as a rule rather than a clipped stripe. */
.sc-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  z-index: 3;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg,
    rgb(199 164 108 / 0) 0%,
    var(--color-accent) 18%,
    #e3c894 50%,
    var(--color-accent) 82%,
    rgb(199 164 108 / 0) 100%);
  pointer-events: none;
}
/* The panel is the frame and the close button sits on it; this scrolls inside,
   so a long bio never carries the close button off-screen. */
.sc-modal__inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 248px 1fr;
  align-items: stretch;
}

/* ── Identity panel ── */
.sc-modal__id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-5);
  /* Always dark, in either theme: the headshot is fitted on the same green, so
     a portrait's margins melt into the panel instead of boxing it. */
  background:
    radial-gradient(120% 80% at 50% 0%, rgb(199 164 108 / 0.1), transparent 60%),
    linear-gradient(165deg, var(--color-canvas-deep-2), var(--color-canvas-deep) 70%);
  border-right: 1px solid rgb(199 164 108 / 0.16);
}
.sc-modal__photo {
  position: relative;
  /* Square, like the card's — the modal is that card opened up. */
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  /* Colour and image are separate properties on purpose: a photo that fails to
     load leaves the crest green and the initials, never a white hole. */
  background-color: rgb(0 0 0 / 0.22);
  background-image: linear-gradient(150deg, rgb(255 255 255 / 0.06), rgb(0 0 0 / 0.18));
  /* Fitted, not cropped — the modal shows the headshot the card fits. */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(199 164 108 / 0.14);
}
/* Bottom-left, the same corner the card labels its face from. */
.sc-modal__photo .sc-pill--pinned { top: auto; bottom: var(--space-3); left: var(--space-3); }
.sc-modal__initials {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3rem;
  color: var(--color-accent);
}
.sc-modal__name {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #f6f2ea;
  overflow-wrap: anywhere;
}
.sc-modal__email {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgb(199 164 108 / 0.22);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-accent);
  overflow-wrap: anywhere;
  transition: color var(--duration-fast) var(--ease-spring);
}
.sc-modal__email svg { flex-shrink: 0; opacity: 0.75; }
.sc-modal__email:hover { color: #e3c894; text-decoration: underline; }
.sc-modal__email:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ── Bio column ── */
/* The panel sets the modal's height, so a short bio would otherwise sit in the
   top corner of a tall white column. It rides the middle instead, and falls
   back to the top the moment it is long enough to scroll. */
.sc-modal__aside {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  gap: var(--space-3);
  min-width: 0;
  min-height: 0;
  padding: var(--space-6);
  overflow-y: auto;
}
.sc-modal__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-deep);
}
.sc-modal__bio {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--color-ink-700);
  white-space: pre-wrap;
}

/* Nothing written yet: the panel stands on its own rather than holding open an
   empty column beside itself. */
.sc-modal.is-solo { max-width: 344px; }
.sc-modal.is-solo .sc-modal__inner { grid-template-columns: 1fr; }
.sc-modal.is-solo .sc-modal__aside { display: none; }
.sc-modal.is-solo .sc-modal__id { border-right: none; }

.sc-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  color: var(--color-ink-500);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.sc-modal__close:hover { background: var(--color-ink-100); color: var(--color-ink-900); }
.sc-modal__close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* On the panel alone it has only the green behind it. */
.sc-modal.is-solo .sc-modal__close {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.2);
  color: rgb(255 255 255 / 0.75);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.sc-modal.is-solo .sc-modal__close:hover { background: rgb(255 255 255 / 0.18); color: #fff; }

@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* A half-width card can't fit a pill and two action buttons on one line, and a
   full-bleed 4:5 photo per row makes a long scroll of a short roster. */
@media (max-width: 620px) {
  .sc-grid,
  .sc-grid.is-3up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .sc-card__body { padding: var(--space-3); gap: 6px; }
  .sc-card__name { font-size: 0.9375rem; }
  .sc-pill { font-size: 0.5625rem; padding: 2px 8px; }
  .sc-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sc-modal { max-height: calc(100vh - var(--space-6)); }
  .sc-modal__inner { grid-template-columns: 1fr; }
  /* Stacked, the whole modal is the scroller — the bio is not its own box. */
  .sc-modal__aside { overflow: visible; }
  .sc-modal__id { border-right: none; border-bottom: 1px solid rgb(199 164 108 / 0.16); }
  .sc-modal__photo { aspect-ratio: 3 / 2; }
  .sc-modal__aside { padding: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-card__open, .sc-actions { transition: none; }
  .sc-card__open:hover { transform: none; }
  .sc-modal-backdrop.is-open, .sc-modal { animation: none; }
}