/* ============================================================
   SKILLSUSA MAINE ALUMNI & FRIENDS — design system (v0.5)
   Minimalist and professional: white surfaces, one navy accent, and
   SkillsUSA red and gold kept for the brand mark and small highlights, so
   red never gets confused with an error.

   Blue and red are the official values, read from SkillsUSA's own Maine
   logo (Brand Portal, State Association Logos). Gold is SkillsUSA's
   national accent. Change --brand-* here and everything follows.
   ============================================================ */
:root {
  --brand-navy: #00538D;
  --brand-red: #ED1B2E;
  --brand-gold: #F2B32C;
  --navy: #14213D;          /* headings, banner */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-2: #F0F2F5;
  --text: #14213D;
  --muted: #5B6475;
  --line: #E3E6EB;
  --accent: var(--brand-navy);
  --accent-soft: #E9EFF8;
  --on-accent: #FFFFFF;
  --ok: #1E7B4F;
  --ok-soft: #E6F4EC;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --warn: #8A5A00;
  --warn-soft: #FDF3DC;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  /* Always light, even when the phone is in dark mode (feedback, 29 Oct). */
  color-scheme: only light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
[hidden] { display: none !important; }

.prototype-bar {
  padding: 6px 16px; font-size: 12.5px; font-weight: 600; text-align: center;
  background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid var(--line);
}

/* ---------- layout: sidebar on wide screens, bottom tabs on phones ---------- */
.shell { display: flex; min-height: calc(100vh - 30px); }
.sidebar {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 232px; flex: none;
  display: flex; flex-direction: column; gap: 2px; padding: 18px 12px;
  border-right: 1px solid var(--line); background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.brand small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.brand-mark { flex: none; width: 34px; height: 34px; border-radius: 7px; background: url("icons/mark.svg") center / cover; }
.sidebar a, .sidebar-settings {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-weight: 600; border: 0; background: none; text-align: left; cursor: pointer;
}
.sidebar svg { width: 20px; height: 20px; flex: none; }
.sidebar a:hover, .sidebar-settings:hover { background: var(--surface-2); }
.sidebar a.active { background: var(--accent-soft); color: var(--accent); }
.sidebar-settings { margin-top: auto; }
.nav-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 11.5px; text-align: center; }

.main { flex: 1; min-width: 0; outline: none; }
.page { max-width: 1120px; margin: 0 auto; padding: 24px 28px 64px; position: relative; isolation: isolate; }

@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 20; height: auto; width: auto;
    flex-direction: row; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line);
  }
  .sidebar .brand { display: none; }
  .sidebar a, .sidebar-settings { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 11px; margin: 0; }
  .nav-badge { position: absolute; top: 0; right: 4px; }
  .page { padding: 16px 16px 96px; }
}

.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin: 6px 0 22px; }
.page-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-sub { margin: 4px 0 0; color: var(--muted); }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.back { display: inline-block; margin-bottom: 6px; font-weight: 600; text-decoration: none; font-size: 14px; }

/* ---------- buttons, inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  font-weight: 650; cursor: pointer; text-decoration: none; color: var(--text); min-height: 40px;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-quiet { background: var(--surface-2); border-color: transparent; }
.btn-danger { color: var(--danger); background: transparent; border-color: var(--danger-soft); }
.btn-small { padding: 4px 12px; min-height: 32px; font-size: 13px; }
.btn-block { width: 100%; margin-top: 8px; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=search], input:not([type]), select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); outline: none; min-height: 40px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: vertical; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.field-hint { font-size: 12px; color: var(--muted); }
.field-check { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 14px; }
.field-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.form-section { margin: 10px 0 -4px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }

/* ---------- cards & lists ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; }
.card h2 { font-size: 16px; font-weight: 750; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }
.empty { margin: 0; color: var(--muted); font-size: 14px; }
.notice { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-size: 13.5px; font-weight: 600; }

.list { display: flex; flex-direction: column; }
.row, .row-link { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.list > :first-child { border-top: 0; }
.row-link:hover { background: var(--surface-2); border-radius: 8px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-main > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.chip-quiet { background: var(--surface-2); color: var(--muted); }
.chip-warn, .st-pending { background: var(--warn-soft); color: var(--warn); }
.st-verified { background: var(--ok-soft); color: var(--ok); }
.st-archived { background: var(--surface-2); color: var(--muted); }
.stage-assigned, .stage-completed { background: var(--ok-soft); color: var(--ok); }
.stage-thanked { background: var(--ok); color: var(--on-accent); }
.stage-declined { background: var(--surface-2); color: var(--muted); }
.stage-vetted { background: var(--accent); color: var(--on-accent); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- dashboard ---------- */
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 960px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--text); text-decoration: none; }
a.stat:hover { border-color: var(--accent); }
.stat-n { font-size: 26px; letter-spacing: -.02em; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-l { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat.warn .stat-n { color: var(--warn); }

.fill { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.fill-track { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.fill-bar { height: 100%; background: var(--ok); border-radius: 99px; }
.fill-label { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.bars { display: flex; flex-direction: column; gap: 6px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 32px; align-items: center; gap: 10px; font-size: 13.5px; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar { height: 100%; background: var(--accent); border-radius: 99px; }
.bar-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- people ---------- */
.toolbar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.toolbar-row { display: flex; gap: 8px; }
.toolbar-row .filter { width: 200px; flex: none; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 650; font-size: 13.5px; cursor: pointer; }
.tab.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.count { margin: 6px 0; }
.people-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.person-row:first-child { border-top: 0; }
.person-row:hover { background: var(--surface-2); }
.person-row .hide-narrow { width: 130px; flex: none; }
.avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; }
@media (max-width: 760px) {
  .hide-narrow { display: none; }
  .toolbar-row { flex-direction: column; }
  .toolbar-row .filter { width: 100%; }
  .person-row .row-chips { max-width: 40%; }
}

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.background { margin: 0; white-space: pre-wrap; font-size: 14px; }

.consent { display: flex; flex-direction: column; gap: 12px; }
.consent-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 40px; height: 24px; border-radius: 99px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch:checked { background: var(--ok); }
.switch:checked::after { transform: translateX(16px); }
.history summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); }
ul.plain { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; color: var(--muted); overflow-wrap: anywhere; }

.tl-add { display: flex; flex-direction: column; gap: 8px; }
.tl-add .filter { width: auto; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.timeline li { padding: 10px 0 10px 14px; border-left: 2px solid var(--line); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.timeline li.tl-system::before { background: var(--line); }
.tl-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-body { margin-top: 3px; font-size: 14px; white-space: pre-wrap; }
.tl-system .tl-body { color: var(--muted); }

/* ---------- roles ---------- */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.role-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.role-card:hover { border-color: var(--accent); }
.role-card.closed { opacity: .6; }
.role-card .row-chips { justify-content: flex-start; }
.role-type { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.pipeline { display: flex; flex-direction: column; gap: 14px; }
.stage-group h3 { font-size: 14px; margin-bottom: 4px; }
.pipe-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 150px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.pipe-name { font-weight: 650; text-decoration: none; }
.pipe-row .filter { min-height: 34px; padding: 4px 8px; font-size: 13px; }
@media (max-width: 520px) { .pipe-row { grid-template-columns: 1fr; } }
.sugg-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.list > .sugg-row:first-child { border-top: 0; }
.sugg-row input { width: 18px; height: 18px; flex: none; }
.sugg-row .row-main > * { white-space: normal; }

/* ---------- import ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
table.preview { width: 100%; border-collapse: collapse; font-size: 13px; }
.preview th, .preview td { padding: 6px 10px; text-align: left; border-top: 1px solid var(--line); white-space: nowrap; }
.preview th { background: var(--surface-2); border-top: 0; }
.preview tr.skip td { color: var(--muted); text-decoration: line-through; }
.preview tr.skip td:last-child, .preview tr.warn td:last-child { text-decoration: none; color: var(--warn); font-weight: 700; }

/* ---------- toast & banner ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 40;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); color: #fff; }

.update-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; background: var(--brand-navy); color: #fff; font-size: 14px; font-weight: 600; }
.update-banner-btn { border: 0; border-radius: 99px; padding: 5px 14px; background: #fff; color: var(--brand-navy); font-weight: 700; cursor: pointer; }
.update-banner-x { border: 0; background: none; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }

.whats-new-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }

/* ============================================================
   SHEETS & SETTINGS (Pack Buddy's, via Echo)
   ============================================================ */
.backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(22, 48, 63, .45); animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; overflow-y: auto;
  max-height: 88vh; max-height: 88dvh;
  background: var(--bg); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(22, 48, 63, .18);
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  animation: slideUp .25s cubic-bezier(.22, 1, .36, 1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 600px) { .sheet { left: 50%; right: auto; width: 520px; margin-left: -260px; } }
.sheet-handle { position: relative; width: 40px; height: 4px; margin: 4px auto 14px; border-radius: 100px; background: var(--line); cursor: pointer; }
.sheet-handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 80px; height: 40px; transform: translate(-50%, -50%); }
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 17px; font-weight: 700; }
.sheet-body { display: flex; flex-direction: column; gap: 14px; }
.sheet-close {
  position: relative; border: none; padding: 9px 16px; border-radius: 100px; cursor: pointer;
  background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 700;
}
.sheet-close:active { background: var(--line); }
#sheetSettings { height: 92vh; height: 92dvh; }

.settings-group { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.settings-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700;
}
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after {
  content: ""; flex: none; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.settings-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.settings-group[open] > summary { border-bottom: 1px solid var(--line); }
.settings-group-title { flex: none; }
.settings-group-hint { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-group-hint.ok { color: var(--ok); }
.settings-group-hint.warn { color: var(--warn); }
.settings-group-body { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.settings-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.settings-note { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: center; }
.info-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; font-size: 13.5px; color: var(--muted); }
.info-row + .info-row { border-top: 1px solid var(--line); }
.info-row > span:last-child { color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.sync-status { margin: 0; min-height: 18px; font-size: 13px; font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.sync-status:empty { display: none; }
.sync-status.ok { color: var(--ok); }
.sync-status.error { color: var(--danger); }
.sync-status.warn { color: var(--warn); }
.sync-status.busy { color: var(--accent); }
.version-row { display: flex; justify-content: space-between; align-items: center; padding: 2px; font-size: 14px; color: var(--muted); }
.version-value { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.version-summary { margin: 2px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* ---------- feedback (Pack Buddy's feedback log) ---------- */
#feedbackInput { min-height: 84px; font-size: 16px; }
.feedback-list { display: flex; flex-direction: column; gap: 8px; }
.feedback-count { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.feedback-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.feedback-item.done { opacity: .55; }
.feedback-item.done .feedback-text { text-decoration: line-through; }
.feedback-check { position: relative; flex: none; width: 24px; height: 24px; padding: 0; margin-top: 1px; border: 2px solid var(--line); border-radius: 50%; background: var(--surface); color: #fff; display: grid; place-items: center; cursor: pointer; }
.feedback-check svg { width: 14px; height: 14px; stroke-width: 2.6; }
.feedback-check::after, .feedback-delete::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.feedback-item.done .feedback-check { background: var(--ok); border-color: var(--ok); }
.feedback-body { flex: 1; min-width: 0; }
.feedback-text { font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-meta { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.feedback-delete { position: relative; flex: none; width: 28px; height: 28px; padding: 0; margin: -2px -4px 0 0; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.feedback-delete svg { width: 16px; height: 16px; }

/* ---------- public signup page ---------- */
.join { max-width: 640px; margin: 0 auto; padding: 0 16px 64px; position: relative; isolation: isolate; }
.join-hero { padding: 40px 0 8px; }
.join-hero h1 { font-size: 30px; font-weight: 700; }
.join-hero p { color: var(--muted); margin: 6px 0 0; }
.join form { display: flex; flex-direction: column; gap: 14px; }
.join .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .join .two { grid-template-columns: 1fr; } }
.join .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.join .privacy { font-size: 12.5px; color: var(--muted); }
.join .done { text-align: center; padding: 40px 0; }

/* ---------- signed-in account (v0.2) ---------- */
.whoami { margin-top: auto; padding: 10px 10px 4px; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3; }
.whoami:empty { display: none; }
.whoami span { color: var(--muted); font-size: 12px; }
.whoami + .sidebar-settings { margin-top: 0; }
@media (max-width: 760px) { .whoami { display: none; } }
.stack { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.interest-chip { cursor: pointer; gap: 6px; }
.interest-chip input { margin: 0; }
.join fieldset { border: 0; padding: 0; margin: 0; }

.team-row.off { opacity: .6; }
.team-row .row-chips { align-items: center; }
.team-row .filter { width: 140px; min-height: 32px; padding: 3px 8px; font-size: 13px; }
.team-actions { flex: none; }
@media (max-width: 760px) {
  .team-row { flex-wrap: wrap; }
  .team-row .row-chips { max-width: none; width: 100%; justify-content: flex-start; }
}

/* ---------- sign-in page ---------- */
.auth { max-width: 440px; }
.auth .join-hero { padding: 48px 0 16px; }
.auth-brand { border-bottom: 0; padding: 0; margin: 0; font-size: 24px; }
.auth-brand .brand-mark { width: 40px; height: 40px; }
.auth h1 { font-size: 22px; font-weight: 700; }
.auth .card { gap: 14px; }
.totp { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.totp h2 { font-size: 16px; }
.totp-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.totp-key { font: 600 15px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; word-break: break-word; }

/* ---------- emailed codes (v0.3) ---------- */
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
.notice-gap { margin-bottom: 16px; }

/* ---------- SkillsUSA Maine brand touches (v0.5) ---------- */
/* One thin band of SkillsUSA red and gold across the top of the app: the only
   large use of red, so red elsewhere still means "something's wrong". */
.brand-band { height: 4px; background: linear-gradient(90deg, var(--brand-red) 0 72%, var(--brand-gold) 72% 100%); }
.prototype-bar { background: var(--surface); color: var(--muted); font-weight: 500; }
.sidebar a.active { font-weight: 650; }
.stat { background: var(--surface); }

/* Photo slots for Maine imagery. Until photos are added they show a quiet
   navy panel, so the layout doesn't depend on them. */
.photo { position: relative; overflow: hidden; background: linear-gradient(135deg, #1B3A6B, var(--brand-navy)); color: #fff; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 40, .05) 30%, rgba(10, 20, 40, .55)); }
.photo-credit { position: absolute; right: 10px; bottom: 8px; z-index: 1; font-size: 11px; opacity: .85; }
.photo-credit a { color: inherit; }

/* Sign-in: a centered card, with a photo band above it. */
.auth-photo { height: 160px; border-radius: 0 0 var(--radius) var(--radius); margin: 0 -16px; }
.auth .join-hero { padding: 28px 0 16px; }
.auth-brand { font-size: 17px; }

/* Public signup: photo header with the title over it. */
.join-photo { margin: 0 -16px; padding: 64px 20px 22px; border-radius: 0 0 var(--radius) var(--radius); }
.join-photo h1, .join-photo p { position: relative; z-index: 1; color: #fff; }
.join-photo p { opacity: .92; }
@media (min-width: 700px) { .join-photo, .auth-photo { margin: 16px 0 0; border-radius: var(--radius); } }
/* No photo yet: the sign-in page simply goes without (the signup header keeps
   its navy band, since its title sits on it). */
.auth-photo:not(:has(img)) { display: none; }
.join-photo + .card { margin-top: 16px; }

/* ---------- Maine photos (v0.6) ---------- */
.dash-photo { height: 150px; border-radius: var(--radius); margin: -6px 0 18px; }
@media (max-width: 760px) { .dash-photo { height: 120px; } }
.photo-credit { left: 12px; right: 12px; text-align: right; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.photo-credit a { text-decoration: none; }
.bar-row.with-thumb { grid-template-columns: 32px 120px 1fr 32px; }
.region-thumb { width: 32px; height: 32px; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: block; }
.region-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-credits a { color: var(--muted); }

/* ---------- hidden game: Full House (v0.7) ---------- */
#sheetGame { height: 92vh; height: 92dvh; }
@media (min-width: 600px) { #sheetGame { width: 560px; margin-left: -280px; } }
.version-value.tappable { cursor: pointer; user-select: none; -webkit-user-select: none; }
.game-hud { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: -6px 2px 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.game-count { color: var(--text); font-variant-numeric: tabular-nums; }
.game-count.met { color: var(--ok); }
.game-stage { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
#gameCanvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.game-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(246, 247, 249, .55); }
.game-card { width: min(100%, 360px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 8px 24px rgba(16, 24, 40, .12); display: flex; flex-direction: column; gap: 8px; }
.game-card h3 { font-size: 18px; letter-spacing: -.01em; }
.game-card p { margin: 0; }
.game-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-red); }
.game-gold { color: #9A6B00; font-weight: 700; }
.game-card-buttons { margin-top: 6px; }
.game-card-buttons .btn-primary { flex: 1; }

/* Photo credits, quieter (v0.7.1): a faint "i" in the corner; tap it to show
   the credit. The full list is in Settings → About. */
.photo-credit { left: auto; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; text-shadow: none; }
.photo-credit a { display: none; padding: 3px 8px; border-radius: 6px; background: rgba(10, 20, 40, .6); color: #fff; font-size: 11px; }
.photo-credit.open a { display: inline-block; }
.photo-credit-btn { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(10, 20, 40, .28); color: rgba(255, 255, 255, .85);
  font: italic 600 11px/18px Georgia, serif; cursor: pointer; opacity: .7; position: relative; }
.photo-credit-btn::after { content: ""; position: absolute; inset: -13px; }   /* 44px finger target */
.photo-credit.open .photo-credit-btn { opacity: 1; }

/* ---------- official SkillsUSA Maine logo (v0.8) ---------- */
.brand { flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 10px 16px; }
.brand-logo { display: block; width: 150px; height: auto; }
.brand-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.mobile-brand { display: none; }
@media (max-width: 760px) {
  .mobile-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .mobile-brand .brand-logo { width: 96px; }
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; margin: 0 auto; text-align: center; }
.auth-brand .brand-logo { width: 190px; }
.join-logo { position: relative; z-index: 1; display: block; width: 150px; height: auto; margin-bottom: 10px; }
.join-photo h1 { font-size: 26px; }
/* The photo rule above sizes every <img> in a .photo to cover it; the logo
   sitting on the signup photo is the exception. */
.photo img.join-logo { position: relative; inset: auto; width: 150px; height: auto; object-fit: contain; }

/* ---------- Outreach and calling (v0.9) ---------- */
@media (max-width: 760px) { .hide-mobile { display: none !important; } }
.out-dash { flex-direction: row; align-items: center; gap: 14px; margin-bottom: 16px; border-left: 4px solid var(--brand-red); }
.out-queue { margin: 0; font-size: 15px; }
.out-queue strong { font-size: 22px; }
.out-start { margin-top: 0; }
.out-chip-stop { background: var(--danger-soft); color: var(--danger); }
.out-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 960px) { .out-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.out-regions { gap: 6px; }
.out-callers { display: flex; flex-direction: column; gap: 6px; }
.out-years { gap: 10px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.out-preview-card { padding: 12px 14px; border-radius: var(--radius); background: var(--accent-soft); display: flex; flex-direction: column; gap: 4px; }
.out-preview-n strong { font-size: 22px; color: var(--accent); }

/* The calling screen: one person, big targets, works one-handed. */
.out-call { gap: 10px; max-width: 560px; }
.out-call-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-red); }
.out-call-name { font-size: 26px; letter-spacing: -.02em; }
.out-dial { font-size: 18px; min-height: 52px; margin-top: 6px; }
.out-script summary, .out-next summary { cursor: pointer; font-weight: 650; color: var(--accent); }
.out-script p { margin-top: 8px; font-size: 14px; background: var(--surface-2); padding: 10px 12px; border-radius: 8px; }
.out-what { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 4px; }
.out-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.out-outcome { min-height: 48px; font-size: 15px; }
.out-interested { background: var(--ok); border-color: var(--ok); color: #fff; grid-column: 1 / -1; }
.out-call_back { border-color: var(--warn); color: var(--warn); }
.out-do_not_call { color: var(--danger); border-color: var(--danger-soft); }
.out-remaining { margin: 0; text-align: center; }
.out-blocked { background: var(--danger-soft); color: var(--danger); }
.out-next { margin-top: 16px; max-width: 560px; }

/* ---------- hidden game trigger (v0.9.1) ---------- */
/* A real button, and no double-tap zoom, so five quick taps on an iPhone are five taps. */
.version-btn { border: 0; background: none; padding: 6px 2px; font: inherit; font-weight: 700; color: var(--text);
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.version-wrap { display: inline-flex; align-items: center; gap: 6px; }
.game-peek { --peek: 0; color: #111418; width: 20px; height: 25px; overflow: hidden; display: inline-flex; align-items: flex-end;
  opacity: calc(.2 + var(--peek) * .8); transition: opacity .25s ease; }
.game-peek svg { transform: translateY(calc((1 - var(--peek)) * 26px)); transition: transform .32s cubic-bezier(.34, 1.4, .64, 1); }
.game-peek.eager .game-peek-arm { animation: gamePeekWave .6s ease-in-out infinite; transform-origin: 12px 15px; }
@keyframes gamePeekWave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-38deg); } }
/* Game cards in the same ink-on-paper look. */
#sheetGame .game-kicker { color: #111418; }
#sheetGame .game-stage { border-color: #111418; }
#sheetGame .btn-primary { background: #111418; border-color: #111418; color: #fff; }

/* Alumni & Friends logo (v0.9.2): the official SkillsUSA Maine logo with ALUMNI & FRIENDS set beneath. */
.brand-logo { width: 160px; }
@media (max-width: 760px) { .mobile-brand .brand-logo { width: 84px; } .mobile-brand { justify-content: flex-start; } }
.auth-brand .brand-logo { width: 200px; }
.photo img.join-logo { width: 140px; }
.photo img.join-logo { width: 180px; }
.join-photo::after { background: linear-gradient(180deg, rgba(10, 20, 40, .55), rgba(10, 20, 40, .65)); }

/* ---------- profiles (v0.10) ---------- */
.team-name { font-weight: 700; color: var(--text); text-decoration: none; }
.team-name:hover { color: var(--accent); }
.pf-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-activity li { padding: 4px 0; border-top: 1px solid var(--line); color: var(--text); }
.pf-activity li:first-child { border-top: 0; }
.pf-form { display: flex; flex-direction: column; gap: 16px; max-width: 820px; padding-bottom: 80px; }
.pf-section h2 { font-size: 16px; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.pf-wide { grid-column: 1 / -1; }
.pf-check { align-self: end; padding-bottom: 8px; }
@media (max-width: 600px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-interests { margin-bottom: 8px; }
.pf-chip { border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; padding: 6px 12px; font-size: 13.5px; }
.pf-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pf-savebar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
@media (max-width: 760px) { .pf-savebar { bottom: 64px; } }

/* ---------- member view (v0.11) ---------- */
.member-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: #111418; color: #fff; font-size: 13.5px; font-weight: 600; }
.member-banner .btn { min-height: 30px; }
body:not(.member-mode) .member-only { display: none !important; }
body.member-mode .sidebar a:not(.member-only), body.member-mode .whoami { display: none !important; }
.mv-hero { border-radius: var(--radius); padding: 90px 22px 22px; margin-bottom: 16px; }
.mv-hero-text { position: relative; z-index: 1; }
.mv-hero h1 { color: #fff; font-size: 28px; }
.mv-hero p { color: #fff; opacity: .92; margin: 4px 0 0; }
.mv-kicker { color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.mv-page .card { margin-bottom: 16px; }
.mv-ops { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mv-op { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.mv-desc { margin: 0; }
.mv-consent li { display: flex; gap: 8px; color: var(--text); padding: 3px 0; }
.mv-yes { color: var(--ok); font-weight: 800; } .mv-no { color: var(--muted); font-weight: 800; }
.mv-foot { text-align: center; }

/* ---------- email campaigns (v0.12) ---------- */
.em-mail { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.em-mail-subject { padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.em-mail-body { padding: 14px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.em-row { flex-wrap: wrap; }
.em-row .row-main { color: inherit; text-decoration: none; min-width: 0; }
.em-row .row-main span { overflow-wrap: anywhere; }
.em-row .row-main { flex: 1 1 100%; display: flex; flex-direction: column; }
.em-row .row-chips { flex: 1; }

/* Signed-in alumni & friends (v0.16): their page is the whole app. */
body.member-signed-in .settings-open, body.member-signed-in #updateBanner { display: none !important; }
.mv-toggle { display: flex; align-items: center; gap: 10px; min-height: 36px; cursor: pointer; }
.mv-toggle input { width: 20px; height: 20px; accent-color: var(--brand-navy); flex: none; }

/* ---------- Landing page (v0.16): the public front door ---------- */
body.lp { background: #fff; }
body.lp-locked { overflow: hidden; }
.lp-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-left)); background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.lp-top-logo { height: 38px; width: auto; }
.lp-top-actions { display: flex; gap: 8px; }
.lp-top-actions .btn { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.lp-hero { min-height: min(88vh, 760px); display: flex; align-items: flex-end; }
.lp-hero::after { background: linear-gradient(180deg, rgba(0,40,80,.25), rgba(0,30,60,.82)); }
.lp-hero-text, .lp-split-text { position: relative; z-index: 1; max-width: 760px; padding: 48px 20px 40px; margin: 0 auto; width: 100%; }
.photo img.lp-hero-logo { position: relative; inset: auto; width: 150px; height: auto; object-fit: contain; margin-bottom: 14px; }
.lp-hero h1 { color: #fff; font-size: clamp(34px, 8vw, 60px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -.02em; }
.lp-hero p, .lp-split p { color: #fff; font-size: 18px; line-height: 1.5; opacity: .95; }
.lp-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.btn-big { min-height: 52px; padding: 12px 22px; font-size: 17px; font-weight: 700; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { border-color: #fff; }
.lp-small { font-size: 14px !important; opacity: .8 !important; margin-top: 12px; }
.lp-band { background: var(--brand-navy); color: #fff; padding: 34px 20px; text-align: center; }
.lp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 0 auto; }
.lp-stats div { display: flex; flex-direction: column; gap: 4px; }
.lp-stats strong { font-size: 40px; font-weight: 800; }
.lp-stats span { font-size: 14px; opacity: .9; }
.lp-stats .lp-placeholder-note { grid-column: 1 / -1; }
.lp-placeholder { color: var(--brand-gold, #F5B700); }
.lp-placeholder-note { display: block; font-size: 12px; opacity: .7; margin: 4px 0 0; font-style: italic; }
.lp-section { max-width: 1040px; margin: 0 auto; padding: 56px 20px; }
.lp-section h2, .lp-final h2 { font-size: clamp(26px, 5vw, 38px); line-height: 1.15; margin: 0 0 24px; letter-spacing: -.01em; }
.lp-kicker { color: var(--brand-red); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin: 0 0 8px; }
.lp-split .lp-kicker { color: #fff; opacity: .9; }
.lp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lp-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 2px 10px rgba(0,30,60,.05); }
.lp-card h3 { margin: 8px 0 6px; font-size: 19px; }
.lp-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.lp-ico { font-size: 30px; }
.lp-split { min-height: 420px; display: flex; align-items: center; }
.lp-split::after { background: linear-gradient(90deg, rgba(0,40,80,.85), rgba(0,40,80,.35)); }
.lp-split h2 { color: #fff; font-size: clamp(28px, 6vw, 44px); margin: 0 0 10px; }
.lp-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: lp; }
.lp-steps li { counter-increment: lp; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radius); background: var(--surface-2); }
.lp-steps li::before { content: counter(lp); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--brand-red); color: #fff; font-weight: 800; font-size: 18px; }
.lp-steps strong { font-size: 19px; }
.lp-steps span { color: var(--muted); line-height: 1.5; }
.lp-quote p { font-size: clamp(20px, 4vw, 28px); font-style: italic; max-width: 760px; margin: 0 auto; }
.lp-promise p { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 720px; }
.lp-final { text-align: center; padding: 60px 20px; background: var(--surface-2); }
.lp-final p { margin-top: 16px; }
.lp-foot { background: #0B1B2E; color: #fff; text-align: center; padding: 34px 20px calc(34px + env(safe-area-inset-bottom)); font-size: 14px; }
.lp-foot img { width: 160px; height: auto; }
.lp-foot a { color: #fff; }
.lp-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.lp-modal[hidden] { display: none; }
.lp-modal-backdrop { position: absolute; inset: 0; background: rgba(5,15,30,.6); }
.lp-modal-box { position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; border-radius: 14px; padding: 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.lp-modal-box h2 { margin: 0 0 4px; font-size: 26px; }
.lp-modal-close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; }
.lp-modal .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-modal .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 600px) {
  .lp-top-logo { height: 30px; }
  .lp-top-actions .btn { padding: 6px 10px; font-size: 13px; }
  .lp-stats { grid-template-columns: 1fr; gap: 22px; }
  .lp-cta-row .btn { width: 100%; }
  .lp-section { padding: 44px 16px; }
  .lp-modal { padding: 0; align-items: flex-end; }
  .lp-modal-box { max-height: 92dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .lp-modal .two { grid-template-columns: 1fr; gap: 0; }
}
.lp-modal form { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.lp-modal fieldset { border: 0; padding: 0; margin: 0; }
.lp-modal .privacy { font-size: 12.5px; color: var(--muted); }
.lp-modal .done { text-align: center; padding: 30px 0 10px; }

/* Landing page on wide screens (v0.16.1): full-bleed bands, a bigger hero,
   content on a 1200px grid instead of floating in empty space. */
.lp-stats { max-width: none; margin: 0; padding-left: max(20px, calc((100% - 1000px) / 2)); padding-right: max(20px, calc((100% - 1000px) / 2)); }
.lp-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: #EAF1F8; font-size: 28px; }
@media (min-width: 900px) {
  .lp-top { padding: 14px max(32px, calc((100% - 1200px) / 2)); }
  .lp-top-logo { height: 52px; }
  .lp-top-actions .btn { min-height: 44px; padding: 8px 20px; font-size: 15px; }
  .lp-hero { min-height: 82vh; align-items: center; }
  .lp-hero::after { background: linear-gradient(90deg, rgba(0,30,60,.85) 0%, rgba(0,30,60,.55) 50%, rgba(0,30,60,.1) 100%); }
  .lp-hero-text, .lp-split-text { max-width: 1200px; padding: 80px 32px; }
  .lp-hero-text > * { max-width: 720px; }
  .photo img.lp-hero-logo { width: 210px; }
  .lp-hero h1 { font-size: 76px; }
  .lp-hero p { font-size: 21px; }
  .lp-stats { padding-top: 48px; padding-bottom: 48px; }
  .lp-stats strong { font-size: 56px; }
  .lp-stats span { font-size: 16px; }
  .lp-section { max-width: 1200px; padding: 96px 32px; }
  .lp-section h2, .lp-final h2 { font-size: 46px; max-width: 820px; }
  .lp-cards { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .lp-card { padding: 30px; transition: transform .15s, box-shadow .15s; }
  .lp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,30,60,.1); }
  .lp-card h3 { font-size: 21px; margin-top: 16px; }
  .lp-card p { font-size: 16px; }
  .lp-split { min-height: 560px; }
  .lp-split-text > * { max-width: 620px; }
  .lp-split::after { background: linear-gradient(90deg, rgba(0,40,80,.9) 0%, rgba(0,40,80,.5) 55%, rgba(0,40,80,.05) 100%); }
  .lp-split h2 { font-size: 52px; }
  .lp-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .lp-steps li { padding: 32px; }
  .lp-steps span { font-size: 16px; }
  .lp-quote { padding: 72px 32px; }
  .lp-promise { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; }
  .lp-promise .lp-kicker { grid-column: 1; }
  .lp-promise h2 { grid-column: 1; margin: 0; }
  .lp-promise p:last-child { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 19px; align-self: center; }
  .lp-final { padding: 96px 32px; }
  .lp-final h2 { margin: 0 auto 28px; }
}

/* Sign-in (v0.16.3): white logo on the left of the photo band, form right below. */
.auth-photo { display: flex; align-items: center; margin-bottom: 20px; }
.auth-photo::after { background: linear-gradient(90deg, rgba(0,30,60,.7), rgba(0,30,60,.15)); }
.auth-photo-logo { position: relative; z-index: 1; margin-left: 24px; display: block; }
.photo .auth-photo-logo img { position: static; width: auto; height: 120px; object-fit: contain; }
@media (max-width: 600px) { .photo .auth-photo-logo img { height: 104px; } .auth-photo-logo { margin-left: 18px; } }

/* Sign-in background (v0.16.4): a faint repeating pattern of Maine and the
   trades (icons/login-pattern.svg) behind the whole page. */
body.auth-page { position: relative; }
/* v0.16.9: real contour lines of Katahdin (icons/katahdin-topo.svg), faint
   gray, with the summit beside the form on a computer and below it on a phone. */
body.auth-page::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("icons/katahdin-topo.svg") 81% 28% / 140% auto no-repeat; opacity: .11; }
@media (max-width: 760px) { body.auth-page::before { background-size: auto 170%; background-position: 38% 0%; } }
body.auth-page .card { box-shadow: 0 6px 24px rgba(0,30,60,.08); }

/* v0.16.7 phone polish: iPhones zoom into any field with text under 16px,
   and the sign-in photo was a fraction wider than the screen (sideways wobble). */
@media (max-width: 760px) { input, select, textarea { font-size: 16px !important; } }
html:has(body.auth-page), body.auth-page { overflow-x: clip; }

/* v0.16.8: the sign-in photo band keeps its space while the photo loads (it
   used to pop in and push the form down on phones) and the photo fades in.
   No rubber-band stretch at the top on iPhone. */
.auth-photo:not(:has(img)) { display: flex; }
.auth-photo img:not(.auth-photo-logo img) { animation: fadeIn .35s ease; }
body.auth-page { overscroll-behavior-y: none; }

/* Dashboard (v0.16.11): "Dashboard / Where the alumni network stands today"
   in white over the photo band instead of above it. */
.dash-hero { display: flex; align-items: flex-end; }
.dash-hero::after { background: linear-gradient(90deg, rgba(0,30,60,.72), rgba(0,30,60,.15)); }
.dash-hero .page-head { position: relative; z-index: 1; margin: 0; padding: 22px 26px; }
.dash-hero .page-head h1 { color: #fff; font-size: 30px; }
.dash-hero .page-sub { color: #fff; opacity: .9; }

/* v0.17: member "Your roles" rows wrap on phones instead of cutting off the role name. */
.mv-page .row { flex-wrap: wrap; row-gap: 6px; }
.mv-page .row .row-main { min-width: 0; flex: 1 1 220px; }
.mv-page .row .row-main strong, .mv-page .row .row-main span { white-space: normal; overflow: visible; text-overflow: clip; }
.lp-quote-by { display: block; margin-top: 14px; font-size: 14px; letter-spacing: .04em; opacity: .8; }
.lp-quote-by::before { content: "— "; }

/* v0.17.3: the landing header floats see-through over the hero photo (whose
   own Alumni & Friends logo leads), then turns white with the SkillsUSA Maine
   logo once you scroll past the top. landing.js toggles .lp-scrolled. */
.lp-top { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; border-bottom-color: transparent;
  transition: background .25s, box-shadow .25s, border-color .25s; }
.lp-top .lp-top-logo { opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.lp-top:not(.lp-scrolled) .btn-quiet { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.45); }
.lp-top.lp-scrolled { background: #fff; box-shadow: 0 1px 8px rgba(0,30,60,.12); }
.lp-top.lp-scrolled .lp-top-logo { opacity: 1; visibility: visible; }
.lp-hero-text { padding-top: 84px; }

/* v0.17.5: the header fades to white gradually as you scroll (landing.js sets --lp-p from 0 to 1). */
.lp-top, .lp-top.lp-scrolled { background: rgba(255,255,255,var(--lp-p,0)); box-shadow: 0 1px 8px rgba(0,30,60,calc(.12 * var(--lp-p,0))); transition: none; }
.lp-top .lp-top-logo, .lp-top.lp-scrolled .lp-top-logo { visibility: visible; opacity: var(--lp-p,0); transition: none; }

/* v0.17.8: stats band, more refined: hairline dividers, a short gold rule under each figure, tighter type. */
.lp-stats { gap: 0; }
.lp-stats div { padding: 8px 28px; align-items: center; gap: 0; }
.lp-stats div + div { border-left: 1px solid rgba(255,255,255,.18); }
.lp-stats strong { font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.lp-stats strong::after { content: ""; display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--brand-gold, #F5B700); margin: 14px auto 12px; }
.lp-stats span { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; opacity: .82; max-width: 240px; }
.lp-stats .lp-placeholder-note { margin-top: 22px; font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .5; }
@media (min-width: 900px) { .lp-stats span { font-size: 13px; } .lp-stats strong { font-size: 60px; } }
@media (max-width: 760px) {
  .lp-stats div { padding: 22px 0; }
  .lp-stats div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
}

/* v0.17.9: gold rule spans the whole figure; dividers heavy enough to see. */
.lp-stats strong::after { width: 100%; height: 4px; }
.lp-stats div + div { border-left: 2px solid rgba(255,255,255,.38); }
@media (max-width: 760px) { .lp-stats div + div { border-left: 0; border-top: 2px solid rgba(255,255,255,.38); } }

/* v0.17.10: numbers band moved lower and made compact; phone hero darkened so white text reads. */
.lp-stats { padding-top: 26px; padding-bottom: 26px; }
.lp-stats strong, .lp-stats strong { font-size: 34px; }
.lp-stats strong::after { height: 3px; margin: 10px auto 8px; }
.lp-stats span { font-size: 11px; }
@media (min-width: 900px) { .lp-stats { padding-top: 34px; padding-bottom: 34px; } .lp-stats strong { font-size: 42px; } .lp-stats span { font-size: 12px; } }
@media (max-width: 760px) {
  .lp-stats { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .lp-stats div { padding: 4px 8px; }
  .lp-stats div + div { border-top: 0; border-left: 2px solid rgba(255,255,255,.38); }
  .lp-stats strong { font-size: 26px; }
  .lp-stats span { font-size: 10px; letter-spacing: .04em; }
  .lp-hero::after { background: linear-gradient(180deg, rgba(0,30,60,.55) 0%, rgba(0,30,60,.72) 40%, rgba(0,25,50,.9) 100%); }
}

/* v0.17.11: buttons lift and grow slightly on hover, press back down on click. */
.btn { transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background-color .18s, color .18s, border-color .18s; }
@media (any-hover: hover) {
  .btn:not(:disabled):hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 16px rgba(0,30,60,.22); }
}
.btn:not(:disabled):active { transform: translateY(0) scale(.98); box-shadow: 0 2px 6px rgba(0,30,60,.18); transition-duration: .08s; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active { transition: none; transform: none; } }

/* v0.18: badges on the member page, and the teaser after joining. */
.mv-progress { height: 8px; border-radius: 99px; background: rgba(0,83,141,.12); overflow: hidden; margin: 6px 0 14px; }
.mv-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-navy, #00538D), #F5B700); transition: width .6s ease; }
.mv-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mv-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: 12px;
  border: 1px dashed rgba(0,40,80,.22); background: rgba(0,40,80,.03); opacity: .75; }
.mv-badge strong { font-size: 14px; line-height: 1.25; }
.mv-badge.earned { opacity: 1; border: 1px solid rgba(245,183,0,.6); background: linear-gradient(180deg, #fffaf0, #fff); box-shadow: 0 2px 8px rgba(0,30,60,.08); }
.mv-badge-ico { font-size: 28px; line-height: 1; filter: grayscale(1); }
.mv-badge.earned .mv-badge-ico { filter: none; }
.badge-teaser { display: flex; justify-content: center; gap: 10px; font-size: 26px; margin: 6px 0 18px; }
.badge-teaser span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fffaf0; border: 1px solid rgba(245,183,0,.6); }
#joinFinish .btn + .btn { margin-top: 8px; }