/* MANUSCRIPT / TYPESCRIPT THEME
   Courier. Asterisks and dashes. Penn red + blue for emphasis. */

:root {
  --bg:       #ffffff;
  --card:     #ffffff;
  --text:     #000000;
  --muted:    #444444;
  --label:    #222222;
  --border:   #000000;
  --penn-red: #990000;
  --penn-blue:#011F5B;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* ── Layout ── */
#app { display: flex; min-height: 100vh; }

nav#sidebar {
  width: 220px;
  min-width: 220px;
  background: #fff;
  border-right: 1px solid #000;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
}

.sidebar-brand {
  padding: 20px 18px 14px;
  border-bottom: 2px solid var(--penn-red);
}
.sidebar-brand h1 {
  margin: 0;
  color: var(--penn-blue);
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.4;
}
.sidebar-brand p { margin: 2px 0 0; color: #444; font-size: 12px; }

.nav-group { padding: 10px 0; flex: 1; }
.nav-label {
  padding: 8px 18px 4px;
  color: #444;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  color: #444;
  text-decoration: none;
  font-size: 13px;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.nav-link:hover  { color: var(--penn-blue); }
.nav-link.active { color: var(--penn-blue); border-left-color: var(--penn-red); font-weight: bold; }
.nav-link svg    { width: 14px; height: 14px; flex-shrink: 0; }

#main {
  margin-left: 220px;
  flex: 1;
  overflow: auto;
}

.page { display: none; padding: 40px 48px; max-width: 860px; }
.page.active { display: block; }

/* ── Page headers ── */
.page-header { margin-bottom: 28px; }
.page-header::before {
  content: "----------------------------------------";
  display: block;
  font-size: 13px;
  color: var(--penn-red);
  letter-spacing: 1px;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
}
.page-header h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--penn-blue);
}
.page-header h2::before { content: "** "; color: var(--penn-red); }
.page-header h2::after  { content: " **"; color: var(--penn-red); }
.page-header p { margin: 6px 0 0; color: #444; font-size: 13px; }

/* ── Cards  (preceded by a dash rule) ── */
.card {
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 16px 0;
  margin-bottom: 0;
  position: relative;
}
.card::before {
  content: "----------------------------------------";
  display: block;
  font-size: 13px;
  color: var(--penn-red);
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 12px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.card-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--penn-blue);
}
.card-header h3::before { content: "** "; color: var(--penn-red); }
.card-header h3::after  { content: " **"; color: var(--penn-red); }

/* ── Forms ── */
label {
  display: block;
  font-size: 11px;
  font-weight: bold;
  color: #222;
  margin: 12px 0 3px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
input[type=text], input[type=date], input[type=tel], input[type=time],
select, textarea {
  width: 100%;
  padding: 6px 0;
  border: none;
  border-bottom: 1px solid #000;
  border-radius: 0;
  font-size: 14px;
  font-family: "Courier New", Courier, monospace;
  background: #fff;
  color: #000;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-bottom-color: var(--penn-blue);
  background: #f9f9f9;
}
textarea { min-height: 80px; resize: vertical; border: 1px solid #000; padding: 6px; }

select { appearance: none; -webkit-appearance: none; }

.row { display: flex; gap: 24px; align-items: flex-end; }
.row > * { flex: 1; }
.row > button, .row > .btn { flex: 0 0 auto; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border: 1px solid var(--penn-blue);
  border-radius: 0;
  font-size: 13px;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
  cursor: pointer;
  background: #fff;
  color: var(--penn-blue);
  text-decoration: none;
  letter-spacing: .3px;
}
.btn:hover:not(:disabled) { background: var(--penn-blue); color: #fff; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary   { background: var(--penn-blue); color: #fff; border-color: var(--penn-blue); }
.btn-primary:hover:not(:disabled) { background: #022a7a; }
.btn-secondary { background: #fff; color: var(--penn-blue); border-color: var(--penn-blue); }
.btn-danger    { background: #fff; color: var(--penn-red); border-color: var(--penn-red); }
.btn-danger:hover:not(:disabled) { background: var(--penn-red); color: #fff; }
.btn-green     { background: #fff; color: var(--penn-blue); border-color: var(--penn-blue); }
.btn-sm        { padding: 3px 8px; font-size: 12px; }

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: "Courier New", Courier, monospace; }
th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid #000;
  color: #000;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
td { padding: 8px 10px; border-bottom: 1px solid #ccc; vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f9f9f9; }

/* ── Badges → plain bracketed text ── */
.badge {
  display: inline-block;
  padding: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: bold;
  font-family: "Courier New", Courier, monospace;
}
.badge-green   { color: #000; }
.badge-amber   { color: #000; }
.badge-red     { color: #000; }
.badge-gray    { color: #444; }
.badge-blue    { color: #000; }
.badge::before { content: "["; }
.badge::after  { content: "]"; }

/* ── Recruit selector ── */
.recruit-picker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.recruit-picker select { max-width: 280px; }

/* ── Day blocks ── */
.day-block { margin-bottom: 20px; border: none; border-radius: 0; }
.day-block::before {
  content: "- - - - - - - - - - - - - - - - - - - -";
  display: block;
  color: var(--penn-red);
  font-size: 13px;
  margin-bottom: 8px;
  overflow: hidden;
  white-space: nowrap;
}
.day-block-header {
  background: #fff;
  color: var(--penn-blue);
  padding: 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.day-block-body { background: #fff; padding: 8px 0; }
.event-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  background: none;
  border-radius: 0;
}
.event-type-pill { padding: 0; border-radius: 0; font-size: 11px; font-weight: bold; }
.pill-practice     { color: #000; }
.pill-team_meeting { color: #000; }
.pill-erg_session  { color: #000; }
.pill-meal_time    { color: #000; }
.pill-lunch        { color: #15803d; }
.pill-other        { color: #444; }
.pill-arrival      { color: #0891b2; }
.pill-departure    { color: #d97706; }
.event-time  { color: #444; font-size: 12px; white-space: nowrap; }
.event-title { flex: 1; font-weight: normal; }

/* ── Schedule output ── */
.schedule-day { margin-bottom: 28px; }
.schedule-day::before {
  content: "* * * * * * * * * * * * * * * * * * * *";
  display: block;
  color: var(--penn-red);
  font-size: 13px;
  margin-bottom: 10px;
  overflow: hidden;
  white-space: nowrap;
}
.schedule-day-heading {
  background: #fff;
  color: var(--penn-blue);
  padding: 4px 0;
  border-radius: 0;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.schedule-item {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.schedule-item:last-child { border-bottom: none; }
.schedule-item-time { width: 100px; color: #444; font-size: 12px; white-space: nowrap; padding-top: 2px; }
.schedule-item-body { flex: 1; }
.schedule-item-title { font-weight: bold; font-size: 13px; }
.schedule-item-sub { color: #444; font-size: 12px; margin-top: 2px; }
.kind-event     { border-left: none; padding-left: 0; }
.kind-shadowing { border-left: none; padding-left: 0; }
.kind-arrival   { border-left: none; padding-left: 0; }
.kind-departure { border-left: none; padding-left: 0; }
.kind-lunch     { border-left: none; padding-left: 0; }
.kind-escort    { border-left: none; padding-left: 0; }

/* type marker instead of colored bar */
.kind-event     .schedule-item-title::before { content: "[EVENT] "; font-weight: bold; font-size: 11px; color: var(--penn-blue); }
.kind-shadowing .schedule-item-title::before { content: "[CLASS] "; font-weight: bold; font-size: 11px; color: var(--penn-red); }
.kind-arrival   .schedule-item-title::before { content: "[ARRIVAL] "; font-weight: bold; font-size: 11px; color: #0891b2; }
.kind-departure .schedule-item-title::before { content: "[DEPARTURE] "; font-weight: bold; font-size: 11px; color: #d97706; }
.kind-lunch     .schedule-item-title::before { content: "[LUNCH] "; font-weight: bold; font-size: 11px; color: #15803d; }
.kind-escort    .schedule-item-title::before { content: "[ESCORT] "; font-weight: bold; font-size: 11px; color: #7c3aed; }

/* ── Lunches (coach): recruit-anchored list, grouped by weekend. Purpose-built
   mobile-first markup (NOT the old positional #rse-list table) — reflows to a
   single column, native <select> pickers go full-width and >=44px tall. ── */
.lunch-weekend { margin-top: 14px; }
.lunch-weekend + .lunch-weekend { border-top: 1px solid var(--border); padding-top: 10px; }
.lunch-weekend-h { font-size: 14px; margin: 0 0 6px; }
.lunch-row {
  display: flex; gap: 8px 14px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px dashed #ccc;
}
.lunch-row:last-child { border-bottom: none; }
.lunch-recruit { font-weight: bold; font-size: 13px; min-width: 120px; flex-shrink: 0; }
.lunch-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.lunch-none { color: #888; font-size: 12px; font-style: italic; }
.lunch-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); padding: 3px 8px; font-size: 12px;
}
.lunch-chip-txt { white-space: nowrap; }
/* Auto lunch awaiting the recruit's schedule submission. */
.lunch-chip-pending { border-style: dashed; background: #f8fafc; }
/* Auto lunch that couldn't find a free slot — coach must step in. */
.lunch-chip-stuck { border-color: var(--penn-red); background: #fdf2f2; }
.lunch-pend-txt { font-style: italic; color: #64748b; }
.lunch-chip-stuck .lunch-pend-txt { color: var(--penn-red); font-style: normal; font-weight: 600; }
.lunch-auto-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #64748b; border: 1px solid var(--border); padding: 0 4px; border-radius: 2px;
}
.lunch-f-manual { display: inline-flex; align-items: center; gap: 4px; }
.lunch-f-manual-lbl { font-size: 11px; color: #64748b; }
.lunch-chip-btn {
  border: none; background: none; cursor: pointer; font-size: 13px;
  line-height: 1; padding: 2px 3px; min-width: 22px; color: var(--penn-blue);
}
.lunch-chip-btn:hover { color: var(--penn-red); }
.lunch-add-btn {
  border: 1px dashed var(--penn-blue); background: none; color: var(--penn-blue);
  font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 10px;
}
.lunch-add-btn:hover { border-style: solid; }
.lunch-form {
  display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--border); padding: 6px 8px; background: #f8fafc;
}
.lunch-form select, .lunch-form input[type="time"] { font-size: 13px; padding: 4px 6px; }
.lunch-f-msg { font-size: 12px; width: 100%; }

/* ── Shadowing option cards ── */
.option-card {
  border: 1px solid #ccc;
  border-radius: 0;
  padding: 14px 0;
  margin-bottom: 0;
  border-top: 1px solid #ccc;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
}
.option-card.selected { border-top: 1px solid #000; background: #f9f9f9; }
.option-rank { font-size: 10px; font-weight: bold; color: #444; text-transform: uppercase; margin-bottom: 3px; }
.option-title { font-weight: bold; font-size: 14px; margin-bottom: 4px; }
.option-rationale { color: #444; font-size: 13px; margin-bottom: 8px; }
.option-block {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: #fff;
  color: #000;
  border-radius: 0;
  font-size: 11px;
  font-weight: bold;
  margin: 2px 4px 0 0;
  border: 1px solid #000;
}

/* ── Upload zone ── */
.upload-zone {
  border: 1px dashed #000;
  border-radius: 0;
  padding: 32px;
  text-align: center;
  color: #444;
  cursor: pointer;
}
.upload-zone:hover { background: #f9f9f9; }
.upload-zone input[type=file] { display: none; }
.upload-zone .upload-icon { font-size: 28px; margin-bottom: 8px; }

/* ── Preview ── */
#image-preview { max-width: 100%; max-height: 280px; border-radius: 0; margin: 12px 0; display: none; }
#extracted-courses { display: none; }

/* ── Extracted-courses review (stacked per-course records) ── */
.xc-list { display: flex; flex-direction: column; }
.xc-item {
  padding: 16px 14px;
  border: 1px solid #ddd;
  border-top: none;
  background: #fdfdfb;
}
.xc-item:first-child { border-top: 1px solid #ddd; }
.xc-item + .xc-item { margin-top: -1px; }            /* collapse adjacent borders */
.xc-field label,
.xc-days > label { margin: 0 0 4px; }
.xc-name { margin-bottom: 12px; }
.xc-grid {
  display: grid;
  /* Dept · Type · Start · End · Location — one balanced row on laptop. */
  grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr 1.2fr;
  gap: 10px 22px;
}
.xc-days { margin-top: 12px; }
.xc-days-row { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.xc-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  color: #222;
  cursor: pointer;
}
.xc-day input[type=checkbox] { width: auto; margin: 0; }
.xc-penn { font-size: 11px; color: var(--penn-blue); margin-top: 5px; }

/* ── Standalone (recruit self-service) ── */
.standalone { max-width: 560px; margin: 60px auto; padding: 0 16px; }
.standalone-card { background: #fff; border: 1px solid #000; border-radius: 0; padding: 36px; }
.standalone-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--penn-blue); font-weight: bold; font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }

/* ── Interest tags ── */
.interest-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.interest-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fff;
  color: var(--penn-blue);
  border-radius: 0;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid var(--penn-blue);
}
.interest-tag button { background: none; border: none; cursor: pointer; color: var(--penn-red); font-size: 14px; line-height: 1; padding: 0; }

/* ── Recruit mini-cards ── */
.recruit-mini-card {
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid #ccc;
  background: #fff;
  min-width: 180px;
  flex: 1;
  font-family: "Courier New", Courier, monospace;
}
.recruit-mini-card:hover { border-color: var(--penn-blue); }
.recruit-mini-name { font-weight: bold; font-size: 13px; color: var(--penn-blue); margin-bottom: 3px; }
.recruit-mini-sub  { font-size: 12px; color: #444; margin-bottom: 2px; }
.recruit-mini-stamp { font-size: 11px; color: var(--penn-red); margin-top: 5px; font-weight: bold; }
.recruit-mini-edit-interests { margin-top: 8px; }

/* ── Submission nudge banner ── */
.recruit-nudge {
  font-size: 12px;
  font-family: "Courier New", Courier, monospace;
  color: var(--penn-red);
  font-weight: bold;
  margin-bottom: 14px;
}
.recruit-nudge-link {
  color: var(--penn-blue);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Misc ── */
.empty { text-align: center; color: #444; padding: 32px 0; font-size: 13px; }
.hint  { font-size: 12px; color: #444; margin: 4px 0 0; }

/* ── Recruiting periods: each visit weekend is a tab ── */
/* Tab strip. On narrow screens it scrolls sideways instead of wrapping into a
   tall stack, keeping the weekends on one swipeable row. */
.period-tabs {
  display: flex; gap: 24px;
  border-bottom: 1px solid #ccc;
  margin: 4px 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.period-tab {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px 9px; margin-bottom: -1px;
  background: none; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  font-family: inherit; font-size: 13px; color: #444;
}
.period-tab:hover { color: var(--penn-blue); }
.period-tab-active { color: var(--penn-blue); font-weight: bold; border-bottom-color: var(--penn-red); }
.period-tab .badge { font-size: 10px; }
.period-tab-count { color: var(--muted); font-weight: normal; font-size: 12px; }
.period-tab-active .period-tab-count { color: var(--penn-blue); }
.period-tab-new { color: var(--penn-blue); font-weight: bold; }

/* Open tab's panel: header (name, status, dates, count) + per-weekend actions. */
.period-panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.period-panel-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.period-name { font-weight: bold; color: var(--penn-blue); font-size: 15px; }
.period-meta { color: var(--muted); font-size: 13px; }
.period-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.period-roster { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.period-roster .recruit-mini-card { flex: 1 1 200px; }

/* Archived weekends: a small, quiet collapsible list at the very bottom — not
   tabs. Each row's name expands to its read-only roster. */
.period-archived-toggle {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--muted); font-weight: bold;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 32px 0 0;
}
.period-archived-toggle:hover { color: var(--penn-blue); }
.period-archived-list { margin-top: 8px; }
.period-archived-row { padding: 8px 0; border-top: 1px solid #eee; }
.period-archived-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.period-archived-actions { display: inline-flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
.period-toggle {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--penn-blue); font-family: inherit; font-size: 12px; font-weight: bold;
}
.period-toggle:hover { text-decoration: underline; }

/* Mobile: stack the actions full-width and drop the roster to one column. */
@media (max-width: 640px) {
  .period-panel-head { flex-direction: column; align-items: stretch; }
  .period-actions { width: 100%; }
  .period-actions .btn { flex: 1 1 auto; text-align: center; }
  .period-roster { flex-direction: column; }
  .period-roster .recruit-mini-card { flex: 1 1 auto; width: 100%; }
  .period-archived-actions { margin-left: 0; }
}

.alert {
  border-radius: 0;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
  border-left: 2px solid var(--penn-blue);
  background: #f9f9f9;
  color: #000;
}
.alert-green { border-left-color: var(--penn-blue); }
.alert-red   { border-left-color: var(--penn-red); color: var(--penn-red); }
.alert-amber { border-left-color: var(--penn-red); }

.mt8  { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* Page-header with an action button (Athletes, Final Schedules): keep the
   button clear of the intro text. Without this the long subtitle squeezes the
   button until it wraps and overlaps the wording. Let the text column take the
   slack and wrap; pin the button to the top-right at its natural width. */
.page-header > .flex-between { align-items: flex-start; gap: 24px; }
.page-header > .flex-between > div:first-child { flex: 1; min-width: 0; }
.page-header > .flex-between > .btn { flex-shrink: 0; white-space: nowrap; }

/* ── Day checkboxes ── */
.day-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: normal;
  color: #444;
  font-family: "Courier New", Courier, monospace;
}
.day-check:has(input:checked) { background: var(--penn-blue); color: #fff; border-color: var(--penn-blue); }
.day-check input { display: none; }

/* ── Shadowing tabs ── */
.sh-tabs {
  display: flex;
  gap: 24px;
  border: none;
  margin-bottom: 20px;
  border-bottom: none;
}
.sh-tab {
  padding: 4px 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: normal;
  font-family: "Courier New", Courier, monospace;
  color: #444;
  border-bottom: none;
  margin-bottom: 0;
}
.sh-tab:hover { color: var(--penn-blue); }
.sh-tab.sh-tab-active { color: var(--penn-blue); font-weight: bold; }
.sh-tab.sh-tab-active::before { content: "[ "; color: var(--penn-red); }
.sh-tab.sh-tab-active::after  { content: " ]"; color: var(--penn-red); }

/* ── AI option pills ── */
#sh-options-strip { flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sh-option-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: "Courier New", Courier, monospace;
  min-width: 140px;
  max-width: 220px;
}
.sh-option-pill:hover:not(:disabled) { border-color: var(--penn-blue); }
.sh-option-pill.selected { border-color: var(--penn-blue); background: #f0f4ff; }
.sh-option-pill-invalid { cursor: not-allowed; background: #faf6f6; border-color: var(--penn-red); }
.sh-option-pill-invalid .sh-option-pill-title { color: #8a8a8a; }
.sh-option-pill-conflict { font-size: 10px; color: var(--penn-red); margin-top: 5px; line-height: 1.35; white-space: normal; }
.sh-option-pill-rank { font-size: 10px; font-weight: bold; color: var(--penn-red); text-transform: uppercase; letter-spacing: .5px; }
.sh-option-pill-title { font-size: 13px; font-weight: bold; color: var(--penn-blue); margin-top: 2px; }

/* ── Calendar days ── */
.cal-day { margin-bottom: 20px; border: none; border-radius: 0; }
.cal-day::before {
  content: "- - - - - - - - - - - - - - - - - - - -";
  display: block;
  font-size: 13px;
  color: var(--penn-red);
  margin-bottom: 6px;
  overflow: hidden;
  white-space: nowrap;
}
.cal-day-header {
  background: #fff;
  color: var(--penn-blue);
  padding: 4px 0;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cal-day-header::before { content: "** "; color: var(--penn-red); }
.cal-day-header::after  { content: " **"; color: var(--penn-red); }
.cal-day-body { background: #fff; }
.cal-empty { padding: 10px 0; font-size: 13px; color: #444; }

/* ── Gap buttons ── */
.cal-gaps-header {
  padding: 6px 0 2px;
  font-size: 10px;
  font-weight: bold;
  color: #444;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px dashed #ccc;
}
.cal-gap-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 0;
  border: none;
  border-bottom: 1px dashed #eee;
  background: #fff;
  cursor: pointer;
  text-align: left;
  border-left: none;
  font-family: "Courier New", Courier, monospace;
}
.cal-gap-btn:hover { background: #f0f4ff; }
.cal-gap-time { font-size: 12px; color: #444; white-space: nowrap; width: 130px; }
.cal-gap-label { font-size: 13px; color: var(--penn-blue); font-weight: normal; }
.cal-gap-label::before { content: "+ "; color: var(--penn-red); }

/* ── Event / shadowing blocks ── */
.cal-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
  position: relative;
}
.cal-block:last-child { border-bottom: none; }
.cal-block-time {
  width: 80px;
  font-size: 11px;
  color: #444;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
  line-height: 1.4;
}
.cal-block-body { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.cal-block-title { font-weight: bold; font-size: 13px; }
.cal-block-loc { font-size: 12px; color: #444; }
.cal-event  { border-left: none; background: none; }
.cal-shadow { border-left: none; background: none; }

/* type prefix instead of coloured bar */
.cal-event  .cal-block-title::before { content: "[E] "; font-size: 11px; color: var(--penn-blue); }
.cal-shadow .cal-block-title::before { content: "[C] "; font-size: 11px; color: var(--penn-red); }

.cal-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  opacity: .5;
  font-family: "Courier New", Courier, monospace;
}
.cal-remove-btn:hover { opacity: 1; }

/* ── Class picker ── */
.cp-class-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.cp-class-row:last-child { border-bottom: none; }
.cp-class-row.cp-added { background: #f9f9f9; padding: 8px 6px; }
.cp-class-info { flex: 1; }
.cp-class-name { font-weight: bold; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.cp-class-sub { font-size: 12px; color: #444; margin-top: 1px; }

/* ── Conflict groups (Final Schedules) ── */
.schedule-conflict-group {
  margin: 6px 0;
  border-left: 2px solid var(--penn-red);
  padding-left: 10px;
}
.schedule-conflict-label {
  font-size: 11px;
  font-weight: bold;
  color: var(--penn-red);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 0 6px;
  font-family: "Courier New", Courier, monospace;
}
.schedule-conflict-cols {
  display: flex;
  gap: 0;
}
.schedule-conflict-cols .schedule-item {
  flex: 1;
  border-bottom: none;
  border-right: 1px dashed #ccc;
  padding-right: 12px;
  margin-right: 0;
}
.schedule-conflict-cols .schedule-item:last-child {
  border-right: none;
  padding-left: 12px;
}

/* ── Final Schedules dropdowns ── */
.recruit-schedule-block {
  margin-bottom: 8px;
  border: none;
}
.recruit-schedule-block::before {
  content: "----------------------------------------";
  display: block;
  font-size: 13px;
  color: var(--penn-red);
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 8px;
}
.recruit-schedule-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 8px 0;
  user-select: none;
}
.recruit-schedule-summary::-webkit-details-marker { display: none; }
.recruit-schedule-summary::before {
  content: "[+]";
  font-weight: bold;
  color: var(--penn-red);
  font-size: 13px;
  flex-shrink: 0;
}
details[open] > .recruit-schedule-summary::before {
  content: "[-]";
}
.recruit-schedule-name {
  font-weight: bold;
  font-size: 14px;
  color: var(--penn-blue);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.recruit-schedule-meta {
  font-size: 12px;
  color: #444;
}
.recruit-schedule-body {
  padding: 12px 0 16px 24px;
}

/* ═══════════════════════════════════════════════════════════
   OVERVIEW SCROLL EXPERIENCE
   ═══════════════════════════════════════════════════════════ */

.ov-page {
  padding: 0 !important;
  max-width: 100% !important;
}

/* ── Hero ── */
.ov-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 48px 80px;
  border-bottom: 2px solid var(--penn-blue);
  position: relative;
}

.ov-logo {
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin-bottom: 28px;
  opacity: 0;
  animation: ov-rise 1s ease forwards 0.2s;
}

.ov-hero-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
  opacity: 0;
  animation: ov-rise 0.7s ease forwards 0.7s;
}

.ov-hero-title {
  font-size: 36px;
  font-weight: bold;
  color: var(--penn-blue);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 0;
  opacity: 0;
  animation: ov-rise 0.7s ease forwards 1s;
}

.ov-hero-rule {
  width: 0;
  height: 2px;
  background: var(--penn-red);
  margin: 18px auto;
  opacity: 0;
  animation: ov-expand 0.6s ease forwards 1.4s;
}

.ov-hero-sub {
  font-size: 13px;
  font-weight: bold;
  color: var(--penn-red);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0;
  animation: ov-rise 0.7s ease forwards 1.7s;
}

.ov-hero-desc {
  font-size: 13px;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.8;
  opacity: 0;
  animation: ov-rise 0.7s ease forwards 2s;
}

.ov-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--muted);
  text-transform: uppercase;
  opacity: 0;
  animation: ov-rise 0.7s ease forwards 2.4s, ov-bob 2.2s ease-in-out infinite 3.2s;
  white-space: nowrap;
}

/* ── Scroll sections ── */
.ov-section {
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding: 80px 80px 80px 96px;
  border-bottom: 1px solid #ddd;
  position: relative;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.ov-section.ov-visible {
  opacity: 1;
  transform: translateY(0);
}

.ov-section-final {
  min-height: 60vh;
  border-bottom: none;
}

/* ── Pointer arrow (points left toward sidebar) ── */
.ov-pointer {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.5s ease 0.35s;
}

.ov-section.ov-visible .ov-pointer { opacity: 1; }

.ov-pointer-arrow {
  display: flex;
  align-items: center;
}

.ov-pointer-head {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 11px solid var(--penn-red);
  animation: ov-pointer-pulse 1.8s ease-in-out infinite;
}

.ov-pointer-line {
  width: 52px;
  height: 2px;
  background: var(--penn-red);
}

.ov-pointer-label {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--penn-red);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding-bottom: 4px;
  white-space: nowrap;
}

/* ── Section content ── */
.ov-section-inner {
  max-width: 620px;
  margin-left: 20px;
}

.ov-section-num {
  font-size: 10px;
  font-weight: bold;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.ov-section-role {
  font-size: 26px;
  font-weight: bold;
  color: var(--penn-blue);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
  line-height: 1.2;
}

.ov-section-body {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.9;
  margin-bottom: 22px;
}

.ov-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.ov-steps li {
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px dashed #ccc;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.6;
}

.ov-steps li:last-child { border-bottom: none; }

.ov-step-num {
  font-weight: bold;
  color: var(--penn-red);
  flex-shrink: 0;
  min-width: 22px;
}

.ov-step-r { color: var(--penn-blue); }
.ov-step-a { color: #555; }
.ov-step-c { color: var(--penn-red); }

.ov-nav-btn {
  display: inline-block;
  padding: 7px 18px;
  border: 1px solid var(--penn-blue);
  background: none;
  color: var(--penn-blue);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ov-nav-btn:hover { background: var(--penn-blue); color: #fff; }

/* ── Nav link pulse when section scrolls into view ── */
@keyframes ov-nav-pulse {
  0%   { background: transparent;          border-left-color: transparent; }
  40%  { background: rgba(1,31,91,0.11);   border-left-color: var(--penn-red); color: var(--penn-blue); font-weight: bold; }
  100% { background: transparent;          border-left-color: transparent; }
}

.nav-link.ov-highlight {
  animation: ov-nav-pulse 0.7s ease-in-out 3;
}

/* ── Keyframes ── */
@keyframes ov-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ov-expand {
  from { opacity: 0; width: 0; }
  to   { opacity: 1; width: 64px; }
}

@keyframes ov-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

@keyframes ov-pointer-pulse {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-5px); }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  ≤640px — all desktop styles are untouched above
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* Re-center watermark (desktop offsets it right for the sidebar) */
  body > img[src="penn-logo.webp"] {
    left: 50% !important;
    width: 280px !important;
    height: 280px !important;
  }

  /* ── Sidebar → bottom tab bar ── */
  nav#sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 54px;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid #000;
  }

  .sidebar-brand { display: none; }

  .nav-group {
    display: flex;
    flex-direction: row;
    padding: 0;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav-group::-webkit-scrollbar { display: none; }

  .nav-link {
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4px 3px 3px;
    font-size: 9px;
    line-height: 1.15;
    gap: 2px;
    border-left: none;
    border-top: 3px solid transparent;
    text-align: center;
    overflow: hidden;
    height: 54px;
    letter-spacing: 0;
  }

  .nav-link.active {
    border-top-color: var(--penn-red);
    border-left-color: transparent;
  }

  .nav-link svg { width: 17px; height: 17px; flex-shrink: 0; }

  /* ── Main: no left offset, bottom pad so content clears tab bar ── */
  #main {
    margin-left: 0;
    padding-bottom: 66px;
  }

  /* ── Page padding ── */
  .page { padding: 20px 16px; }

  /* ── Stack .row form fields vertically ── */
  /* Base .row uses align-items:flex-end; in column direction that pins
     fields to the right edge at content width. Stretch them full-width. */
  .row { flex-direction: column; align-items: stretch; gap: 12px; }

  /* ── Inputs: 16px min so iOS Safari doesn't auto-zoom on focus ──
     Mirror the base selector list so specificity matches and 16px wins. */
  input[type=text], input[type=date], input[type=tel], input[type=time],
  select, textarea { font-size: 16px; }

  /* ── Touch targets: 44px minimum (Apple HIG) ── */
  .btn { min-height: 44px; }
  /* Small buttons (×, Edit, Set, Apply) become proper square-ish targets */
  .btn-sm { min-width: 44px; justify-content: center; }

  /* ── Page-header flex-between (Athletes, Final Schedules) ── */
  .page-header > .flex-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* ── Modals: flexbox centering (margin:auto unreliable in iOS overflow containers) ── */
  #recruit-modal,
  #upload-modal,
  #class-picker-modal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  #recruit-modal > div,
  #upload-modal > div,
  #class-picker-modal > div {
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
  }

  /* ── General Events set table → stacked cards (no action-button overflow) ── */
  #ge-panel table { display: block; }
  #ge-panel thead { display: none; }
  #ge-panel tbody { display: block; }

  #ge-panel tr {
    display: block;
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  #ge-panel tr:last-child { border-bottom: none; }

  /* All cells inline by default */
  #ge-panel td {
    display: inline;
    padding: 0;
    border: none;
    font-size: 12px;
    color: #444;
  }

  /* Title: own block line */
  #ge-panel td:nth-child(1) {
    display: block;
    font-size: 13px;
    color: #000;
    margin-bottom: 3px;
  }

  /* Type · Day/Date · Time · Location — dot separators */
  #ge-panel td:nth-child(2)::after,
  #ge-panel td:nth-child(3)::after,
  #ge-panel td:nth-child(4)::after { content: " · "; }

  /* Allow time cell to wrap (it has white-space:nowrap inline) */
  #ge-panel td:nth-child(4) { white-space: normal; }

  /* Actions (Edit / ×): their own line below the meta, so wide button groups
     never overlap the wrapping event text. */
  #ge-panel td:nth-child(6) {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }

  /* ── Athlete class tables → stacked cards (same treatment as General Events,
     so the Time/Location columns never get clipped off the right edge) ── */
  /* min-width beats the generic `.card details table { min-width: 500px }` rule
     (higher specificity there), so force the stacked table to hug the screen. */
  .class-table { display: block; min-width: 0 !important; }
  .class-table thead { display: none; }
  .class-table tbody { display: block; }
  .class-table tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
  .class-table tr:last-child { border-bottom: none; }
  .class-table td {
    display: inline;
    padding: 0;
    border: none;
    font-size: 12px;
    color: #444;
  }
  /* Course name: own block line */
  .class-table td:nth-child(1) {
    display: block;
    font-size: 13px;
    color: #000;
    margin-bottom: 3px;
  }
  /* Dept · Type · Days · Time · Location — dot separators (Location is last) */
  .class-table td:nth-child(2)::after,
  .class-table td:nth-child(3)::after,
  .class-table td:nth-child(4)::after,
  .class-table td:nth-child(5)::after { content: " · "; }
  .class-table td:nth-child(5) { white-space: normal; }
  /* Edit / × on their own line, so button groups never overlap the meta text */
  .class-table td:nth-child(7) {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }
  /* "No classes yet." spans the row cleanly */
  .class-table td.empty { display: block; }

  /* ── Escort picker on a transition row → wrap to its own full-width line so
     the athlete name isn't truncated inside a cramped native select ── */
  .schedule-transition { flex-wrap: wrap; }
  .schedule-transition select {
    flex: 1 1 100%;
    margin-left: 18px !important;
    min-height: 36px;
    max-width: calc(100% - 18px);
  }

  /* ── Lunches (coach) → single column; native pickers full-width & tappable ── */
  .lunch-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .lunch-recruit { min-width: 0; }
  .lunch-chips { flex-direction: column; align-items: stretch; }
  .lunch-chip { justify-content: space-between; }
  .lunch-chip-btn { min-width: 40px; min-height: 40px; }
  .lunch-add-btn { width: 100%; min-height: 44px; }
  .lunch-form { flex-direction: column; align-items: stretch; }
  .lunch-form select,
  .lunch-form input[type="time"],
  .lunch-form .btn { width: 100%; min-height: 44px; box-sizing: border-box; }

  /* Extracted-courses review: stacked records, no horizontal scroll. Two
     fields per row, and let day checkboxes breathe on narrow screens. */
  .xc-item { padding: 14px 12px; }
  .xc-grid { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .xc-days-row { gap: 9px 18px; }

  /* ── Schedule conflict columns: stack vertically ── */
  .schedule-conflict-cols { flex-direction: column; }
  .schedule-conflict-cols .schedule-item {
    border-right: none;
    border-bottom: 1px dashed #ccc;
    padding-right: 0;
  }
  .schedule-conflict-cols .schedule-item:last-child {
    border-bottom: none;
    padding-left: 0;
  }

  /* ── Overview: remove sidebar-pointing arrows, reduce spacing ── */
  .ov-hero {
    min-height: 70vh;
    padding: 40px 20px 56px;
  }
  .ov-logo { width: 90px; height: 90px; }
  .ov-hero-title { font-size: 24px; letter-spacing: 2px; }

  .ov-section {
    min-height: auto;
    padding: 44px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .ov-pointer { display: none; }
  .ov-section-inner { margin-left: 0; }
  .ov-section-role { font-size: 20px; }

  /* ── Standalone (recruit self-service) ── */
  .standalone { margin: 16px auto; }
  .standalone-card { padding: 20px 16px; }

  /* ── Final Schedules: summary row stack, remove indent ── */
  .recruit-schedule-summary { flex-wrap: wrap; gap: 6px; }
  .recruit-schedule-summary button { margin-left: 0 !important; width: 100%; }
  .recruit-schedule-body { padding-left: 0; }

  /* ── Wide tables: horizontal scroll ── */
  #ad-list,
  #athletes-list,
  #sh-status-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #ad-list table { min-width: 520px; }
  #sh-status-list table { min-width: 480px; }

  /* ── Athletes classes table inside details ── */
  .card details { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card details table { min-width: 500px; }

  /* ── Athlete / general card headers: wrap on narrow screens ── */
  .card-header { flex-wrap: wrap; gap: 8px; }
  .card-header > div.flex { flex-wrap: wrap; }

  /* ── Modal inner card: tighter padding on small phones ── */
  #recruit-modal .card,
  #upload-modal .card,
  #class-picker-modal .card { padding: 20px 16px !important; }

  /* ── Shadowing option pills: full width ── */
  .sh-option-pill { max-width: 100%; min-width: 0; width: 100%; }

  /* ── Events page: add-form panels ── */
  #te-add-details > div,
  #rse-add-details > div { padding: 10px 0; background: none; border-radius: 0; border: none; border-top: 1px dashed #ccc; }

  /* ── Events page: snapshot rows wrap ── */
  #te-snapshots-list > div > div { flex-wrap: wrap; }

  /* ── Events page: recruit selector full width ── */
  #rse-recruit-sel { max-width: 100% !important; }
}

@media print {
  #sidebar, .no-print { display: none; }
  #main { margin-left: 0; }
  .page.active { padding: 0; }
  .schedule-item { break-inside: avoid; }
  .schedule-day { break-before: avoid; }
}

/* ── Persona gate + role bar ─────────────────────────────────────────────── */
/* Head guard adds .rsk-needgate to <html> until a persona is chosen, so the
   app never flashes before the gate. */
.rsk-needgate #app { display: none; }
.rsk-needgate #persona-gate { display: flex; }

#persona-gate {
  display: none;                 /* shown only via .rsk-needgate */
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;              /* the "how it fits together" block can run tall */
  font-family: "Courier New", Courier, monospace;
}
.pg-inner { width: 100%; max-width: 760px; text-align: center; margin: auto; }
.pg-logo { width: 84px; height: 84px; object-fit: contain; opacity: .9; margin-bottom: 14px; }
.pg-eyebrow {
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--penn-red); font-weight: bold; margin-bottom: 8px;
}
.pg-title {
  font-size: 30px; color: var(--penn-blue); margin: 0 0 4px;
  letter-spacing: .5px; font-weight: bold;
}
.pg-sub { font-size: 15px; color: var(--muted); margin: 0 0 28px; }
.pg-cards { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.pg-card {
  flex: 1 1 200px; max-width: 230px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left; cursor: pointer;
  background: var(--bg);
  border: 2px solid var(--penn-blue);
  border-radius: 4px;
  padding: 20px 18px;
  font-family: inherit;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.pg-card:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--penn-red); }
.pg-card:active { transform: translateY(0); box-shadow: 2px 2px 0 var(--penn-red); }
.pg-card-role { font-size: 17px; font-weight: bold; color: var(--penn-blue); }
.pg-card-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ── Gate: coach passcode step ── */
#pg-pass-gate { max-width: 320px; margin: 8px auto 0; }
.pg-pass-title {
  font-size: 17px; font-weight: bold; color: var(--penn-blue); margin-bottom: 4px;
}
.pg-pass-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.pg-pass-form { display: flex; flex-direction: column; gap: 12px; }
.pg-pass-input {
  font-family: inherit; font-size: 18px; text-align: center; letter-spacing: 4px;
  padding: 11px 12px; color: var(--penn-blue);
  background: var(--bg); border: 2px solid var(--penn-blue); border-radius: 4px;
}
.pg-pass-input:focus { outline: none; box-shadow: 2px 2px 0 var(--penn-red); }
.pg-pass-error { font-size: 12px; color: var(--penn-red); font-weight: bold; }
.pg-pass-actions { display: flex; justify-content: space-between; gap: 10px; }
.pg-pass-btn {
  font-family: inherit; font-size: 13px; cursor: pointer;
  padding: 8px 16px; border-radius: 4px;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.pg-pass-back {
  background: var(--bg); color: var(--muted); border: 1px solid var(--muted);
}
.pg-pass-back:hover { color: var(--penn-blue); border-color: var(--penn-blue); }
.pg-pass-go {
  background: var(--penn-blue); color: #fff; border: 2px solid var(--penn-blue);
}
.pg-pass-go:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 var(--penn-red); }

/* ── Gate: "How it all fits together" (shown above the fold once you scroll) ── */
.pg-how { max-width: 620px; margin: 44px auto 0; text-align: left; }
.pg-how-rule { width: 48px; height: 2px; background: var(--penn-red); margin: 0 auto 22px; }
.pg-how-title {
  font-size: 13px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase;
  color: var(--penn-blue); text-align: center; margin-bottom: 12px;
}
.pg-how-intro {
  font-size: 12.5px; color: var(--muted); line-height: 1.7; text-align: center;
  max-width: 540px; margin: 0 auto 22px;
}
.pg-how-steps { list-style: none; padding: 0; margin: 0; }
.pg-how-steps li {
  display: flex; gap: 14px; align-items: baseline;
  font-size: 12.5px; color: var(--muted); line-height: 1.65;
  padding: 10px 0; border-bottom: 1px dashed #ccc;
}
.pg-how-steps li:last-child { border-bottom: none; }
.pg-how-steps strong { color: var(--text); }
.pg-how-tag {
  flex-shrink: 0; min-width: 64px;
  font-size: 10px; font-weight: bold; letter-spacing: .5px; text-transform: uppercase;
}
.pg-tag-r { color: var(--penn-blue); }
.pg-tag-a { color: #555; }
.pg-tag-c { color: var(--penn-red); }

#rsk-role-bar {
  position: fixed; top: 10px; right: 12px; z-index: 150;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg);
  border: 1px solid var(--penn-blue);
  border-radius: 4px;
  padding: 5px 10px;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  box-shadow: 2px 2px 0 rgba(1,31,91,.12);
}
.rsk-bar-role { color: var(--muted); }
.rsk-bar-role strong { color: var(--penn-blue); }
.rsk-bar-btn {
  font-family: inherit; font-size: 11px; cursor: pointer;
  background: var(--bg); color: var(--penn-blue);
  border: 1px solid var(--penn-blue); border-radius: 3px;
  padding: 3px 8px;
}
.rsk-bar-btn:hover { background: var(--penn-blue); color: #fff; }
.rsk-bar-switch { border-color: var(--penn-red); color: var(--penn-red); }
.rsk-bar-switch:hover { background: var(--penn-red); color: #fff; }

/* Match the app's mobile breakpoint (640px) where the sidebar becomes a 54px
   bottom tab bar, so the role bar never overlaps the nav. */
@media (max-width: 640px) {
  #rsk-role-bar { top: auto; bottom: 8px; right: 8px; left: 8px; justify-content: center; }
  /* On the app, lift the bar above the 54px bottom tab bar. */
  #rsk-role-bar.rsk-on-app { bottom: 62px; }
}
@media (max-width: 600px) {
  .pg-title { font-size: 24px; }
  .pg-card { max-width: none; }
}

/* ── Recruit spreadsheet grid ─────────────────────────────────────────────── */
.grid-import {
  border: 1px solid var(--penn-blue);
  background: #fff;
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.grid-import-label { color: var(--penn-red); font-weight: bold; }
.grid-import-help { flex-basis: 100%; color: var(--muted); font-size: 11px; margin-top: 2px; }

.grid-scroller {
  overflow: auto;
  border: 1px solid var(--border);
  background: #fff;
  /* Hug the content by default (no giant empty box), but cap height so a long
     roster scrolls instead of pushing the page. Resizable on laptop: drag the
     bottom-right corner to widen / lengthen (overrides these). Disabled on
     phones below. */
  max-height: 70vh;
  min-width: 360px;
  resize: both;
  outline: none;
}
.grid-resize-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
/* Phone-only affordance: the sheet is wider than the screen and scrolls sideways.
   Hidden on laptop (the resize hint covers that case). Shown in the mobile query. */
.grid-swipe-hint { display: none; font-size: 11px; color: var(--muted); margin: 0 0 6px; }
table.recruit-grid {
  border-collapse: collapse;
  white-space: nowrap;
  font-size: 12px;
  font-family: "Courier New", Courier, monospace;
}
table.recruit-grid th,
table.recruit-grid td {
  border: 1px solid #d8d4cc;
  padding: 2px 6px;
  text-align: left;
}
table.recruit-grid thead th { position: sticky; z-index: 3; }
table.recruit-grid thead tr.grid-grp th {
  top: 0;
  background: #f1eee8;
  color: var(--penn-blue);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .5px;
  text-align: center;
  border-bottom: 2px solid var(--penn-red);
}
table.recruit-grid thead tr.grid-sub th {
  top: 22px;
  background: #faf8f3;
  color: var(--muted);
  font-size: 11px;
  font-weight: normal;
}
/* Frozen Name column (header + body cells) during horizontal scroll. */
table.recruit-grid .grid-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 #d8d4cc;
}
table.recruit-grid thead .grid-sticky { z-index: 4; }
table.recruit-grid td input,
table.recruit-grid td select {
  font-family: inherit;
  font-size: 12px;
  border: 0;
  background: transparent;
  width: 100%;
  min-width: 60px;
  color: var(--text);
  padding: 2px 0;
}
table.recruit-grid td.name input { min-width: 120px; font-weight: bold; }
table.recruit-grid td.gperiod select { min-width: 130px; }
table.recruit-grid td input:focus,
table.recruit-grid td select:focus { outline: 1px solid var(--penn-blue); background: #fffef8; }
/* Rows carry unsaved edits until the single "Save all changes" button runs.
   A subtle left accent flags which rows still need saving. */
.grid-row-dirty td.grid-sticky { box-shadow: inset 3px 0 0 var(--penn-blue); }
.grid-row-dirty td { background: #fffdf3; }
.grid-row-error td { background: #fff6f6; }
.grid-row-error td.grid-sticky { box-shadow: inset 3px 0 0 var(--penn-red); }
.grid-row-saving td { opacity: .6; }
.grid-empty { color: var(--muted); padding: 14px; margin: 0; }
.grid-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.grid-addrow { margin-top: 0; }
#grid-save-all { margin-left: auto; }
#grid-save-all:disabled { opacity: 0.55; cursor: default; }

/* Paste-from-Excel column-mapping preview */
.paste-header-toggle { display: flex; align-items: center; gap: 6px; margin: 12px 0 8px; font-size: 12px; }
.paste-preview-scroll { overflow: auto; border: 1px solid var(--border); background: #fff; max-height: 40vh; }
.paste-preview-table { border-collapse: collapse; font-size: 12px; font-family: "Courier New", Courier, monospace; }
.paste-preview-table th, .paste-preview-table td {
  border: 1px solid #d8d4cc; padding: 3px 6px; text-align: left; white-space: nowrap;
}
.paste-preview-table thead th { background: #f1eee8; vertical-align: top; position: sticky; top: 0; }
.paste-preview-table select { font-size: 11px; max-width: 160px; }
.paste-detected { font-size: 10px; color: var(--muted); margin-top: 2px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
#paste-import-btn:disabled { opacity: 0.55; cursor: default; }

/* Mobile: the grid scrolls horizontally with the frozen Name column; the
   period-grouped cards below remain the primary view (tap a card → modal). */
@media (max-width: 720px) {
  table.recruit-grid td input,
  table.recruit-grid td select { min-width: 52px; }
  table.recruit-grid td.name input { min-width: 96px; }
  .grid-import-help { font-size: 10px; }
  /* No corner-drag resizing on phones — fixed scroll window instead. */
  .grid-scroller { resize: none; height: auto; max-height: 60vh; min-width: 0; }
  .grid-resize-hint { display: none; }
  .grid-swipe-hint { display: block; }
}

/* ── Coach dashboard ─────────────────────────────────────────────────────── */
.dash-meta { font-family: "Courier New", Courier, monospace; color: var(--muted); font-size: 13px; }
.dash-meta strong { color: var(--penn-blue); }
.dash-group-title {
  font-family: "Courier New", Courier, monospace;
  text-transform: uppercase; letter-spacing: 1px; font-size: 12px;
  color: var(--penn-red); font-weight: bold; margin: 26px 0 8px;
}
.dash-group-title:first-child { margin-top: 4px; }

/* Aligned list, not a grid of boxes: titles line up in a fixed left column,
   affected recruits flow to the right, the "go to" action sits quietly at the
   end. Reads top-to-bottom like a checklist — far less clutter than cards. */
.dash-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e4e4e4; }
.dash-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 6px 18px; align-items: baseline;
  padding: 11px 6px 11px 13px;
  border-bottom: 1px solid #e4e4e4;
  border-left: 3px solid #ccd2df;
}
.dash-row.attn { border-left-color: var(--penn-red); }
.dash-row-head { display: flex; align-items: baseline; gap: 8px; }
.dash-row-title {
  font-family: "Courier New", Courier, monospace; font-size: 13px;
  color: var(--penn-blue); font-weight: bold;
}
.dash-row.attn .badge { color: var(--penn-red); }
.dash-row-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.dash-row-action { justify-self: end; }
.dash-row-link {
  font-family: "Courier New", Courier, monospace; font-size: 12px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--penn-red); white-space: nowrap;
}
.dash-row-link:hover { text-decoration: underline; }
.dash-plain { font-family: "Courier New", Courier, monospace; font-size: 12px; color: var(--muted); }
.dash-allclear {
  font-family: "Courier New", Courier, monospace; color: var(--penn-blue);
  background: #eef7ee; border: 1px solid #cfe6cf; padding: 10px 12px; font-size: 13px;
}

@media (max-width: 640px) {
  .dash-row { grid-template-columns: 1fr; gap: 6px; padding: 12px 6px 12px 13px; }
  .dash-row-action { justify-self: start; }
}