/* Charles R. Drew scholarship application -- apply, recommend and review pages.
   Built on the site's design tokens (--p-*, --g-*, --ink-*, --r-*, --shadow-*). */

.sc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.sc-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .sc-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .sc-sticky { position: sticky; top: 96px; }
}

.sc-card {
  background: var(--paper); border: 1px solid var(--ink-100); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 24px; margin-bottom: 24px;
}
.sc-card h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 6px; color: var(--p-900); }
.sc-card h3 { font-size: 1.05rem; margin: 18px 0 8px; color: var(--ink-900); }
.sc-card > p.sc-lede { color: var(--ink-600); margin: 0 0 18px; }
.sc-step { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--g-800); font-weight: 700; }

/* Banners */
.sc-banner { border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 20px; font-size: .95rem; }
.sc-banner--sandbox { background: repeating-linear-gradient(135deg, var(--g-100), var(--g-100) 12px, var(--g-50) 12px, var(--g-50) 24px); border: 1px dashed var(--g-700); color: var(--g-900); }
.sc-banner--info { background: var(--p-50); border: 1px solid var(--p-200); color: var(--p-900); }
.sc-banner--error { background: #FDECEC; border: 1px solid #F3B5B5; color: #8A1C1C; }
.sc-banner--ok { background: #E9F6EE; border: 1px solid #A8DAB9; color: #1D5C34; }

.sc-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sc-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-700); cursor: pointer; }
.sc-toggle input { width: 18px; height: 18px; accent-color: var(--g-700); }

/* Questionnaire */
.sc-q { padding: 16px 0; border-top: 1px solid var(--ink-100); }
.sc-q:first-of-type { border-top: 0; padding-top: 4px; }
.sc-q__prompt { font-weight: 600; color: var(--ink-900); margin-bottom: 4px; }
.sc-q__help { font-size: .85rem; color: var(--ink-500); margin-bottom: 10px; }
.sc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-opt {
  border: 1px solid var(--ink-200); background: var(--paper); color: var(--ink-800);
  border-radius: var(--r-full); padding: 8px 14px; font: inherit; font-size: .9rem; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.sc-opt:hover { border-color: var(--p-400); }
.sc-opt[aria-pressed="true"] { background: var(--p-700); border-color: var(--p-700); color: #fff; }
.sc-opt:focus-visible, .sc-btn:focus-visible, .sc-field input:focus-visible, .sc-field textarea:focus-visible, .sc-field select:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Fields */
.sc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sc-field > span { font-size: .85rem; font-weight: 600; color: var(--ink-700); }
.sc-field input, .sc-field textarea, .sc-field select {
  font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--ink-200);
  border-radius: var(--r-md); background: var(--paper); color: var(--ink-900); width: 100%; box-sizing: border-box;
}
.sc-field textarea { min-height: 180px; resize: vertical; line-height: 1.55; }
.sc-field__hint { font-size: .8rem; color: var(--ink-500); }
.sc-row { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sc-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-gpa { max-width: 140px; }

/* Buttons */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 600; font-size: .92rem;
  padding: 10px 18px; border-radius: var(--r-full); border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.sc-btn--primary { background: var(--p-800); color: #fff; }
.sc-btn--primary:hover { background: var(--p-700); }
.sc-btn--gold { background: var(--g-600); color: var(--p-900); }
.sc-btn--gold:hover { background: var(--g-500); }
.sc-btn--ghost { background: transparent; border-color: var(--ink-200); color: var(--ink-800); }
.sc-btn--ghost:hover { border-color: var(--p-400); }
.sc-btn--danger { background: transparent; border-color: #E3A3A3; color: #8A1C1C; }
.sc-btn--small { padding: 6px 12px; font-size: .82rem; }
.sc-btn[disabled] { opacity: .5; cursor: not-allowed; }
.sc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.sc-saved { font-size: .82rem; color: var(--ink-500); }

/* Matches */
.sc-match { border: 1px solid var(--ink-100); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px; background: var(--paper); }
.sc-match--eligible { border-left: 4px solid var(--g-600); }
.sc-match--possible { border-left: 4px solid var(--p-300); }
.sc-match--ineligible { border-left: 4px solid var(--ink-200); opacity: .85; }
.sc-match__head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.sc-match__name { font-weight: 600; color: var(--ink-900); }
.sc-match__amt { font-size: .85rem; color: var(--g-800); white-space: nowrap; font-weight: 600; }
.sc-match ul { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; color: var(--ink-600); }
.sc-match ul li { margin: 2px 0; }
.sc-match__rank { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--p-700); background: var(--p-50); border-radius: var(--r-full); padding: 2px 8px; margin-bottom: 6px; }
.sc-section-label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; margin: 18px 0 8px; }
.sc-section-label:first-child { margin-top: 0; }
details.sc-more > summary { cursor: pointer; color: var(--p-700); font-size: .9rem; margin: 8px 0; }

/* Choices */
.sc-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--ink-100); border-radius: var(--r-md); margin-bottom: 8px; cursor: pointer; }
.sc-choice input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--p-700); }
.sc-choice small { display: block; color: var(--ink-500); }

/* Checklist */
.sc-check { list-style: none; margin: 0; padding: 0; }
.sc-check li { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--ink-50); }
.sc-check li:first-child { border-top: 0; }
.sc-check__mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; }
.sc-check__mark--done { background: #DDF1E4; color: #1D5C34; }
.sc-check__mark--todo { background: var(--g-100); color: var(--g-900); }
.sc-check__mark--info { background: var(--ink-50); color: var(--ink-500); }
.sc-check__detail { display: block; font-size: .84rem; color: var(--ink-500); }

/* Badges */
.sc-badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); white-space: nowrap; }
.sc-badge--ok { background: #DDF1E4; color: #1D5C34; }
.sc-badge--warn { background: var(--g-100); color: var(--g-900); }
.sc-badge--bad { background: #FBE1E1; color: #8A1C1C; }
.sc-badge--muted { background: var(--ink-50); color: var(--ink-600); }

/* Recommenders */
.sc-rec { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--ink-100); }
.sc-rec:first-child { border-top: 0; }
.sc-rec__who { min-width: 0; }
.sc-rec__who small { display: block; color: var(--ink-500); overflow-wrap: anywhere; }
.sc-link { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: .75rem; overflow-wrap: anywhere; color: var(--p-700); }

/* Review board */
.sc-award { margin-bottom: 28px; }
.sc-award h3 { font-family: var(--font-display); color: var(--p-900); font-size: 1.15rem; margin: 0 0 4px; }
.sc-table-wrap { overflow-x: auto; border: 1px solid var(--ink-100); border-radius: var(--r-md); }
.sc-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.sc-table th, .sc-table td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--ink-100); vertical-align: top; }
.sc-table thead th { border-top: 0; background: var(--ink-50); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-600); }
.sc-table tr.sc-clickable { cursor: pointer; }
.sc-table tr.sc-clickable:hover td { background: var(--p-50); }
.sc-certified { padding: 10px 12px; background: var(--g-50); border: 1px solid var(--g-300); border-radius: var(--r-md); margin: 8px 0; font-size: .9rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.sc-counts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Detail dialog */
.sc-dialog { border: 0; border-radius: var(--r-lg); padding: 0; width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); box-shadow: var(--shadow-4); }
.sc-dialog::backdrop { background: rgba(15, 13, 20, .5); }
.sc-dialog__head { position: sticky; top: 0; background: var(--paper); border-bottom: 1px solid var(--ink-100); padding: 16px 20px; display: flex; justify-content: space-between; gap: 12px; align-items: center; z-index: 1; }
.sc-dialog__body { padding: 20px; }
.sc-prose { white-space: pre-wrap; line-height: 1.6; color: var(--ink-800); background: var(--ink-50); border-radius: var(--r-md); padding: 14px 16px; font-size: .93rem; }
.sc-kv { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 6px 16px; font-size: .9rem; }
.sc-kv dt { color: var(--ink-500); }
.sc-kv dd { margin: 0; color: var(--ink-900); overflow-wrap: anywhere; }
.sc-rubric { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .sc-rubric { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.sc-empty { text-align: center; color: var(--ink-500); padding: 28px 12px; }
.sc-muted { color: var(--ink-500); }
.sc-hidden { display: none !important; }