:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --ink: #12202f;
  --ink-2: #3b4757;
  --muted: #6a7585;
  --line: #e2e6ec;
  --brand: #14273f;
  --brand-2: #23446b;
  --accent: #e2683a;
  --accent-soft: #fdeee7;
  --ok: #23825a;
  --ok-soft: #e4f4ec;
  --warn: #b7791f;
  --warn-soft: #fbf1df;
  --bad: #c0392f;
  --bad-soft: #fbe7e5;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(18, 32, 47, .06), 0 4px 16px rgba(18, 32, 47, .05);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tabbar-h: 64px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-2); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.hidden { display: none !important; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex-shrink: 0;
  background: var(--brand); color: #dfe7f1;
  display: flex; flex-direction: column;
  padding: 22px 14px; position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 19px; padding: 0 10px 22px; letter-spacing: .01em; }
.brand svg { width: 28px; height: 28px; color: #9fc0e6; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: #c4d1e0; text-decoration: none; font-weight: 500;
}
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a[aria-current="page"] { background: rgba(255,255,255,.12); color: #fff; }
.nav svg, .tabbar svg { width: 20px; height: 20px; flex-shrink: 0; }
.sidebar-foot { margin-top: auto; padding: 12px; font-size: 13px; color: #9fb0c4; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-foot strong { color: #fff; display: block; font-size: 14px; }

.main { flex: 1; min-width: 0; padding: 32px 40px 48px; outline: none; }
.page { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.page-head p { margin-top: 4px; }

.tabbar { display: none; }
.topbar { display: none; }

/* ---------- Building blocks ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 9px 16px; border-radius: 999px; font-weight: 600; cursor: pointer;
  text-decoration: none; font-size: 14px; white-space: nowrap;
}
.btn:hover { border-color: #c9d0da; background: var(--surface-2); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: #cf5a2e; border-color: #cf5a2e; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--brand-2); cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2);
}
.chip-ok { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.chip-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip-event { background: #e6eefa; border-color: transparent; color: #1f4f8f; }
.chip-bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.chip-accent { background: var(--accent-soft); border-color: transparent; color: #b5481f; }
.chip-brand { background: #e6edf6; border-color: transparent; color: var(--brand-2); }

.empty { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty h3 { color: var(--ink); margin-bottom: 6px; }
.empty .btn { margin-top: 14px; }

.progress { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--ok); border-radius: inherit; transition: width .3s; }

/* Score ring */
.ring { --size: 112px; --val: 0; --col: var(--ok); width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(var(--col) calc(var(--val) * 1%), var(--line) 0); }
.ring > div { width: calc(var(--size) - 18px); height: calc(var(--size) - 18px); border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; }
.ring b { font-size: calc(var(--size) * .27); line-height: 1; display: block; }
.ring small { font-size: 11px; color: var(--muted); }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field.wide { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.field .hint { font-size: 12.5px; color: var(--muted); }
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); padding: 10px 12px; outline: none;
}
.input:focus, .tags:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(35, 68, 107, .12); }
textarea.input { resize: vertical; min-height: 90px; line-height: 1.45; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px; background: var(--surface); min-height: 44px; }
.tags input { border: 0; outline: none; flex: 1; min-width: 140px; padding: 4px; background: transparent; }
.tag { display: inline-flex; align-items: center; gap: 4px; background: #e6edf6; color: var(--brand); border-radius: 999px; padding: 3px 4px 3px 10px; font-size: 13px; font-weight: 600; }
.tag button { border: 0; background: transparent; cursor: pointer; color: inherit; width: 20px; height: 20px; border-radius: 50%; line-height: 1; font-size: 15px; }
.tag button:hover { background: rgba(20,39,63,.12); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.suggest button { border: 1px dashed #c3cbd6; background: transparent; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.suggest button:hover { border-style: solid; border-color: var(--brand-2); color: var(--brand-2); }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface-2); gap: 2px; flex-wrap: wrap; }
.segmented button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; color: var(--ink-2); }
.segmented button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.choice-cards button { text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer; font-weight: 600; }
.choice-cards button:hover { border-color: #b9c3d0; }
.choice-cards button[aria-pressed="true"] { border-color: var(--brand); background: #eef3f9; box-shadow: inset 0 0 0 1px var(--brand); }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Modal / drawer ---------- */
.overlay { position: fixed; inset: 0; background: rgba(12, 22, 34, .45); z-index: 50; display: flex; justify-content: flex-end; }
.drawer { width: min(560px, 100%); height: 100%; background: var(--surface); overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: -8px 0 32px rgba(0,0,0,.15); }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; }
.icon-btn { border: 1px solid var(--line); background: var(--surface); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; flex-shrink: 0; }

/* ---------- Onboarding ---------- */
.onboarding { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: linear-gradient(180deg, var(--brand) 0, var(--brand) 220px, var(--bg) 220px); }
.onboarding .panel { width: min(720px, 100%); background: var(--surface); border-radius: 20px; box-shadow: 0 20px 60px rgba(12,22,34,.18); padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.onboarding .brand { color: var(--brand); padding: 0; }
.onboarding .brand svg { color: var(--brand-2); }
.steps { display: flex; gap: 6px; }
.steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.steps span.on { background: var(--accent); }
body.onboarding-mode .shell, body.onboarding-mode .tabbar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sidebar { display: none; }
  .main { padding: 20px 16px calc(var(--tabbar-h) + 28px); }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; }
  .tabbar a[aria-current="page"] { color: var(--brand); }
  .tabbar a[aria-current="page"] svg { color: var(--accent); }
  .grid-2, .grid-3, .form-grid { grid-template-columns: minmax(0, 1fr); }
  h1 { font-size: 22px; }
  .card { padding: 16px; }
  .toast { bottom: calc(var(--tabbar-h) + 16px); }
  .onboarding .panel { padding: 22px 18px; }
  .drawer { padding: 18px 16px; }
}

/* ---------- Resume ---------- */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.fix { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist li > span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.checklist li.ok > span { background: var(--ok-soft); color: var(--ok); }
.checklist li.no > span { background: var(--bad-soft); color: var(--bad); }

/* ---------- Plan ---------- */
.filters .btn { border-radius: 999px; }
.month.current { border-color: #f1c2ad; box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.month.catch { border-color: #f0c4bf; }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.plan-item:first-child { border-top: 0; padding-top: 0; }
.plan-item input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ok); flex-shrink: 0; cursor: pointer; }
.plan-item label { flex: 1; display: flex; flex-direction: column; gap: 2px; cursor: pointer; min-width: 0; }
.plan-title { font-weight: 600; }
.plan-item.done .plan-title { text-decoration: line-through; color: var(--muted); }
details.card summary { cursor: pointer; }

/* ---------- Networking ---------- */
.alum { display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; cursor: pointer; font: inherit; color: inherit; padding: 16px; }
.alum:hover { border-color: #c4cdd8; }
.alum-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reasons { gap: 6px; margin-top: 6px; }
.reasons .chip { white-space: normal; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: #e6edf6; color: var(--brand); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }
.avatar.lg { width: 56px; height: 56px; font-size: 19px; }
.match { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; min-width: 52px; }
.match b { font-size: 22px; color: var(--c); line-height: 1.1; }
.match small { font-size: 11px; color: var(--muted); }
.contacted-toggle { align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; flex-wrap: nowrap; }
.contacted-toggle input { width: 20px; height: 20px; accent-color: var(--ok); margin-top: 2px; flex-shrink: 0; }
.tips { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 16px; }
.tips ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 13.5px; }
@media (max-width: 900px) {
  .alum { padding: 14px; gap: 12px; }
  .avatar { width: 38px; height: 38px; font-size: 14px; }
}

/* ---------- Shared ---------- */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Plan: status + conversation ---------- */
.stand { display: flex; flex-direction: column; gap: 10px; }
.stand.secured { border-color: #b9dfcb; background: linear-gradient(0deg, var(--surface), var(--surface)), var(--ok-soft); box-shadow: 0 0 0 3px var(--ok-soft), var(--shadow); }
.stand .segmented button { padding: 6px 12px; font-size: 13px; }
.plan-item { flex-wrap: wrap; }
.plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-head { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.plan-head:hover .plan-title { color: var(--brand-2); }
.plan-side { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex-shrink: 0; }
.plan-side .talk { color: var(--brand-2); }
.plan-item.open { background: var(--surface-2); margin: 0 -12px; padding: 12px; border-radius: var(--radius-sm); }
.thread { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.bubble { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: 14px; }
.bubble .who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.bubble.everest { background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 4px; align-self: flex-start; }
.bubble.me { background: var(--brand); color: #fff; border-top-right-radius: 4px; align-self: flex-end; }
.bubble.me .linkish { color: #c9dbef; margin-left: 6px; }
.bubble ul { margin: 0 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.bubble .row { margin-top: 8px; }
.answer-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.scale { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scale .btn { width: 40px; padding-left: 0; padding-right: 0; }
.answer-form { display: flex; gap: 8px; }
.answer-form .input { max-width: 340px; }
.thread textarea { min-height: 60px; }
@media (max-width: 900px) {
  .plan-side { flex-direction: row; width: 100%; padding-left: 32px; }
  .bubble { max-width: 100%; }
}

/* ---------- Home hub: chat + what's next ---------- */
.home-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home .tagline { margin: 0; max-width: none; text-align: left; font-style: italic; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(11.5px, 3.4vw, 15px); }
.chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: min(640px, calc(100vh - 170px)); min-height: 440px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.chat-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.msg { max-width: 85%; display: flex; flex-direction: column; gap: 6px; }
.msg .who { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.msg-body { padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.msg-body p + p, .msg-body p + ul, .msg-body ul + p { margin-top: 8px; }
.msg-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.msg.assistant { align-self: flex-start; }
.msg.assistant .msg-body { background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 4px; }
.msg.user { align-self: flex-end; }
.msg.user .msg-body { background: var(--brand); color: #fff; border-top-right-radius: 4px; }
.msg-actions { gap: 6px; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; border-top-left-radius: 4px; width: fit-content; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite both; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px; background: var(--surface-2); }
.chat-suggest:not(:empty) { padding-bottom: 14px; }
.chat-input { display: flex; gap: 8px; align-items: flex-end; padding: 12px 14px; border-top: 1px solid var(--line); }
.chat-input textarea { resize: none; min-height: 44px; max-height: 140px; line-height: 1.4; }
.dev-context { padding: 0 18px 12px; }
.dev-context pre { max-height: 220px; overflow: auto; background: var(--surface-2); padding: 10px; border-radius: 8px; font-size: 11.5px; }

@media (max-width: 900px) {
  .chat { height: min(560px, calc(100vh - 230px)); min-height: 400px; }
  .msg { max-width: 92%; }
  .chat-head { padding: 12px 14px; }
  .chat-head p { display: none; }
  .chat-log { padding: 14px; }
  .chat-suggest { flex-wrap: nowrap; overflow-x: auto; padding: 0 14px; scrollbar-width: none; }
  .chat-suggest .btn { flex-shrink: 0; }
}

/* ---------- Career Exploration ---------- */
.starter summary { cursor: pointer; }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 14px 0 0; }
.terms dt, .types dt { font-weight: 700; font-size: 14px; }
.terms dd, .types dd { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.explore-controls { display: flex; flex-direction: column; gap: 10px; }
.explore-controls .input { max-width: 420px; }
.explore-hint { font-weight: 600; color: var(--ink-2); margin-bottom: -12px; }
.toggle { gap: 8px; cursor: pointer; color: var(--ink-2); }
.toggle input { width: 18px; height: 18px; accent-color: var(--brand); }
.group-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.career-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.career { display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; font: inherit; color: inherit; padding: 16px; }
.career:hover { border-color: var(--brand-2); }
.career:focus-visible { outline: 3px solid rgba(35, 68, 107, .35); outline-offset: 2px; }
.career-name { font-weight: 700; font-size: 16px; }
.career-line { color: var(--ink-2); font-size: 14px; flex: 1; }
.career-facts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pay { font-weight: 700; color: var(--ok); letter-spacing: .02em; }
.pay-off { color: var(--line); }
.explore-drawer { gap: 18px; }
.explore-drawer section { display: flex; flex-direction: column; gap: 6px; }
.explore-drawer ul, .explore-drawer ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.explore-title { font-size: 22px; margin: 2px 0 4px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 14px; background: var(--surface-2); border-radius: var(--radius-sm); }
.facts dt { font-size: 12px; color: var(--muted); font-weight: 600; }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }
.types { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.explore-cta { border-top: 1px solid var(--line); padding-top: 16px; }
.grad { display: flex; flex-direction: column; gap: 14px; }
.grad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.grad-card { display: flex; flex-direction: column; gap: 10px; }
.grad-card ul { margin: 4px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 3px; }
.grad-facts { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; }
.grad-facts dt { font-size: 12px; color: var(--muted); font-weight: 600; }
.grad-facts dd { margin: 0; font-size: 14px; font-weight: 600; }
@media (max-width: 900px) {
  .terms { grid-template-columns: minmax(0, 1fr); }
  .career-grid, .grad-grid { grid-template-columns: minmax(0, 1fr); }
  .explore .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .explore .filters .btn { flex-shrink: 0; }
  .tabbar a { font-size: 10.5px; }
}

/* ---------- Profile: snapshot + entries ---------- */
.snapshot { display: flex; flex-direction: column; gap: 18px; }
.snap-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.snap-who { flex: 1; min-width: 200px; }
.snap-ready-score { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.snap-ready-score b { font-size: 26px; line-height: 1; }
.snap-ready-score b .muted { font-size: 16px; font-weight: 600; }
.snap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.snap-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; }
.snap-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.snap-label a, .snap-label .linkish { font-weight: 600; }
.snap-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.snap-warn { color: var(--bad); }
.snap-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.snap-checks li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.snap-checks li > span:first-child { font-weight: 700; width: 16px; flex-shrink: 0; }
.snap-checks li.ok > span:first-child { color: var(--ok); }
.snap-checks li.no > span:first-child { color: var(--warn); }
.snap-checks li.ok { color: var(--muted); }
.field.flash { animation: flash 1.2s ease-out; border-radius: var(--radius-sm); }
@keyframes flash { 0% { box-shadow: 0 0 0 6px var(--accent-soft); background: var(--accent-soft); } 100% { box-shadow: 0 0 0 6px transparent; background: transparent; } }
.entries { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.entry { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.entry-grid { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.entry-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.entry-field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.entry-field.wide { grid-column: 1 / -1; }
.entry-field textarea { min-height: 56px; }
@media (prefers-reduced-motion: reduce) { .field.flash { animation: none; } }
@media (max-width: 900px) {
  .snap-grid, .snap-checks, .entry-grid { grid-template-columns: minmax(0, 1fr); }
  .snap-ready-score { min-width: 0; width: 100%; }
}

/* ---------- Chat: profile update proposals + dev notes ---------- */
.proposal { background: var(--surface); border: 1px dashed var(--brand-2); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.proposal ul { margin: 0; padding-left: 18px; font-size: 14px; }
.dev-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }

/* ---------- Home dashboard ---------- */
.home-meta { color: var(--ink-2); margin: 2px 0 0; }
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; min-width: 0; }
.dash-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; min-width: 0; text-decoration: none; color: inherit; }
a.dash-card:hover { border-color: #c4cdd8; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-go { font-size: 13px; font-weight: 600; color: var(--brand-2); text-decoration: none; white-space: nowrap; }
a.dash-go:hover, a.dash-card:hover .dash-go { text-decoration: underline; }
.dash-empty { font-weight: 600; }
.dash-big b { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.stackbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); }
.stackbar span { display: block; height: 100%; }
.seg-done { background: var(--ok); }
.seg-now { background: var(--accent); }
.seg-overdue { background: var(--bad); }
.seg-up { background: var(--line); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.action-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.action-list li:first-child { border-top: 0; padding-top: 2px; }
.action-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.action-title { font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1.35; }
.action-title:hover { color: var(--brand-2); text-decoration: underline; }
.people-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.people-list a { display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.people-list a:hover { background: var(--surface-2); }
.people-list .avatar { width: 36px; height: 36px; font-size: 13px; }
.person { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-why { color: var(--ok); font-weight: 600; }
.match-mini { font-weight: 700; color: var(--brand-2); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phone top bar (brand + initials -> Profile) ---------- */
body.onboarding-mode .topbar { display: none; }
@media (max-width: 900px) {
  .topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 30;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
    background: var(--surface); border-bottom: 1px solid var(--line);
  }
  .topbar .brand { color: var(--brand); padding: 0; font-size: 17px; }
  .topbar .brand svg { width: 24px; height: 24px; color: var(--brand-2); }
  .topbar-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e6edf6; color: var(--brand); font-weight: 700; font-size: 13px; text-decoration: none; }
  .topbar-avatar[aria-current="page"] { background: var(--brand); color: #fff; }
}

/* ---------- Home: welcome tour + ask bar ---------- */
.welcome { display: flex; flex-direction: column; gap: 16px; border-color: #f1c2ad; box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.tour { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.tour a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; }
.tour a:hover { background: var(--surface-2); }
.tour a > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tour-icon { width: 34px; height: 34px; border-radius: 10px; background: #e6edf6; color: var(--brand); display: grid; place-items: center; flex-shrink: 0; }
.tour-icon svg { width: 18px; height: 18px; }
.ask-bar { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; }
.ask-bar .input { border: 0; padding: 8px 4px; box-shadow: none; }
.ask-bar .input:focus { box-shadow: none; }
.ask-bar:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(35, 68, 107, .12); }
.ask-icon { color: var(--accent); display: grid; place-items: center; }
.ask-icon svg { width: 22px; height: 22px; }

/* ---------- Coach: full-screen chat ---------- */
.page.coach { max-width: 1040px; height: calc(100vh - 80px); height: calc(100dvh - 80px); }
.coach .chat-full { height: 100%; min-height: 0; }
.coach .chat-head h1 { font-size: 22px; }
/* Keep the conversation at a comfortable reading width on big screens. */
.coach .chat-log { padding: 22px max(18px, calc((100% - 780px) / 2)); }
.coach .chat-suggest { padding-left: max(18px, calc((100% - 780px) / 2)); padding-right: max(18px, calc((100% - 780px) / 2)); }
.coach .chat-input { padding: 14px max(14px, calc((100% - 780px) / 2)); }
.coach .msg { max-width: 82%; }
@media (max-width: 900px) {
  .tour { grid-template-columns: minmax(0, 1fr); }
  .page.coach {
    height: calc(100vh - 52px - 20px - var(--tabbar-h) - 28px);
    height: calc(100dvh - 52px - env(safe-area-inset-top, 0px) - 20px - var(--tabbar-h) - env(safe-area-inset-bottom, 0px) - 28px);
  }
  .coach .msg { max-width: 92%; }
}

/* ---------- Resume builder: the generated resume (matches the career office template) ---------- */
.builder { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.builder-side { position: sticky; top: 16px; }
.missing-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.sheet-wrap { overflow-x: auto; background: #e9ecf1; border-radius: var(--radius); padding: 20px; }
.rs {
  /* Letter paper, about 0.6in margins at screen size */
  width: 100%; max-width: 8.5in; min-height: 11in; margin: 0 auto; background: #fff; color: #000;
  padding: 0.55in 0.6in; box-shadow: 0 2px 12px rgba(0,0,0,.15);
  font-family: "Times New Roman", Times, "Liberation Serif", serif; font-size: 11.5pt; line-height: 1.22; outline: none;
}
.rs:focus { box-shadow: 0 0 0 3px rgba(35, 68, 107, .25), 0 2px 12px rgba(0,0,0,.15); }
.rs-head { text-align: center; margin-bottom: 14px; }
.rs h1 { font-size: 17pt; font-weight: 700; margin: 0; letter-spacing: 0; }
.rs-contact { margin: 2px 0 0; }
.rs-sec { margin-top: 12px; }
.rs h2 { font-size: 12pt; font-weight: 700; margin: 0 0 4px; padding-bottom: 1px; border-bottom: 1.2px solid #000; letter-spacing: .01em; }
.rs-entry { margin-top: 6px; }
.rs-entry + .rs-entry { margin-top: 10px; }
.rs-row { display: flex; justify-content: space-between; gap: 12px; }
.rs-row > :last-child { text-align: right; white-space: nowrap; }
.rs-line { margin: 0; }
.rs-gap { margin-top: 8px; }
.rs ul { margin: 1px 0 0; padding-left: 0.42in; }
.rs li { margin: 0; padding-left: 2px; }
.rs-todo { background: #fff3c4; color: #7a4a00; border-radius: 3px; padding: 0 2px; }

/* Review: bullet-by-bullet feedback */
.bullet-fb { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.bullet-orig { font-style: italic; color: var(--ink-2); }
.bullet-issues { margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.bullet-rewrite { font-size: 14px; }

@media (max-width: 1100px) {
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder-side { position: static; }
}
@media (max-width: 900px) {
  .sheet-wrap { padding: 8px; margin: 0 -4px; }
  .rs { padding: 0.35in 0.3in; font-size: 10pt; min-height: 0; }
  .rs-row { gap: 8px; }
  .rs-row > :last-child { white-space: normal; max-width: 48%; flex-shrink: 0; }
  .rs h2 { font-size: 11pt; }
}

/* Review: the resume file card */
.rv-file [hidden] { display: none !important; }
.rv-file-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv-file-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); color: var(--brand-2); display: grid; place-items: center; flex: none; }
.rv-file-icon svg { width: 24px; height: 24px; }
.rv-file-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; }
.rv-file-info b { overflow-wrap: anywhere; }
.rv-file-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Review: the page with weak bullets highlighted, and one notes panel beside it */
.rv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.rs-review { min-height: 0; }
.rs-review h2.rv-sec { margin-top: 12px; }
.rs-review [data-line] { border-radius: 3px; cursor: text; outline: none; transition: background-color .15s; }
.rs-review [data-line]:hover { background: #f3f5f8; }
.rs-review [data-line]:focus { background: #eef3fa; box-shadow: 0 0 0 2px rgba(35, 68, 107, .25); }
.rs-review .rv-weak { background: #fff3c4; box-shadow: inset 0 -2px 0 #e9b949; cursor: pointer; }
.rs-review .rv-weak:hover { background: #ffeaa0; }
.rs-review .rv-selected { background: #ffe38a; box-shadow: 0 0 0 2px #e9b949; }
.rv-notes { position: sticky; top: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.rv-notes p { margin: 0; }
.rv-note-li { margin: 8px 0 10px; font-family: var(--font); font-size: 14px; line-height: 1.45; }
.rs .rv-notes ul.bullet-issues { padding-left: 18px; margin: 0; }
.rv-note-li .rv-notes { position: static; }
.rs-review { padding: 0.45in 0.5in; }
/* As paper: true letter size, scaled to fit by js/views/resume.js (zoom). */
.rs-review.as-paper { width: 8.5in; max-width: none; min-height: 11in; padding: 0.55in 0.6in; font-size: 11pt; }
.rs-review.as-paper .rv-note-li { font-size: 15px; }
@media (max-width: 1180px) {
  .rv-layout { grid-template-columns: minmax(0, 1fr); }
  .rv-layout > .rv-notes { position: static; }
}

/* Printing prints only the resume. */
@media print {
  @page { size: letter; margin: 0; }
  body * { visibility: hidden !important; }
  .rs, .rs * { visibility: visible !important; }
  .rs { position: absolute; left: 0; top: 0; box-shadow: none; min-height: 0; width: 8.5in; }
  .rs-todo { background: none; }
  .rs-review [data-line] { background: none !important; box-shadow: none !important; }
  .rs-review { zoom: 1 !important; }
  .rv-note-li { display: none !important; }
  .sidebar, .tabbar, .topbar { display: none !important; }
}
.advice-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.field-compare { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.field-compare li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line, #e5e7eb); }
.field-compare li.mine { font-weight: 600; }
.measure-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.measure-table th, .measure-table td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line, #e5e7eb); vertical-align: top; }
.measure-table th { font-weight: 600; color: var(--muted, #6b7280); }
.more-bullets { margin-top: 12px; }
.more-bullets > summary { cursor: pointer; font-weight: 600; color: var(--brand-2); padding: 6px 0; }
.more-bullets > .stack { margin-top: 10px; }

/* ---------- Logo: 3b Crest (badge + serif wordmark) ---------- */
.brand svg { width: 32px; height: 32px; color: inherit; }
.brand span { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 22px; letter-spacing: 0; }
.onboarding .brand svg, .topbar .brand svg { width: 30px; height: 30px; }
.topbar .brand span { font-size: 19px; }

/* ---------- Accounts & career-office (admin) view ---------- */
.panel.login { max-width: 480px; }
.staff-code summary { cursor: pointer; color: var(--muted); }
.staff-code .field { margin-top: 10px; }
.whoami-out { display: block; margin-top: 6px; color: inherit; opacity: .8; }
.share-toggle { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.share-toggle input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--brand); }
.share-toggle > span { display: flex; flex-direction: column; gap: 2px; }

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius, 14px); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.tile b { font-size: 26px; line-height: 1.1; color: var(--brand); }
.tile span { font-size: 13px; color: var(--muted); }
@media (max-width: 720px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.admin-split { align-items: start; }
@media (max-width: 1240px) { .admin-split { grid-template-columns: minmax(0, 1fr); } }

.queue-item { display: flex; flex-direction: column; gap: 10px; }
.queue-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: flex-start; }
.queue-head h3 { font-size: 17px; }
.flag-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.queue-panel { border-top: 1px solid var(--line); padding-top: 12px; }
.shared-text { white-space: pre-wrap; font-size: 12.5px; background: var(--surface-2); border-radius: 8px; padding: 10px; max-height: 260px; overflow: auto; }
.check-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }

.event-admin-list { display: flex; flex-direction: column; }
.month-head { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 4px; }
.event-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.event-date { font-weight: 700; font-size: 13px; color: var(--brand); }
.event-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 560px) { .event-row { grid-template-columns: minmax(0, 1fr) auto; } .event-row .event-date { grid-column: 1 / -1; } }
.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.event-list li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; }
.event-list .person { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; }
.tl-item .chip { justify-self: start; }

.bars { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bar-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 14px; }
.bar { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand-2, #2f5d93); border-radius: 999px; }
.report-table td:not(:first-child), .report-table th:not(:first-child) { text-align: right; }

.advice-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.advice-feed li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; }
.advice-feed .chip { justify-self: start; }
.bubble-like { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.sandbox-result h3 { font-size: 15px; margin-bottom: 4px; }
/* Login: Create account / Log in as two equal halves */
.login .segmented { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.login .segmented button { text-align: center; padding: 9px 12px; }
/* Login: Show / Hide button inside the password box */
.password-wrap { position: relative; display: block; }
.password-wrap .input { padding-right: 64px; }
.password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; padding: 4px 8px;
  border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-2); cursor: pointer; }
.password-toggle:hover { background: var(--surface-2); }
/* "Career Office" badge next to the logo in the staff view */
.brand .brand-badge { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--accent, #E2683A); color: #fff; white-space: nowrap; margin-left: 2px; align-self: center; }
.brand svg { flex: none; }
.sidebar .brand:has(.brand-badge) { flex-wrap: wrap; row-gap: 6px; }
.sidebar .brand .brand-badge { margin-left: 42px; }

/* Advice check: spot-check cards and conversations with Everest */
.spot { display: flex; flex-direction: column; gap: 10px; }
.btn.danger { color: var(--bad); }
.guidance { display: flex; flex-direction: column; gap: 10px; }
.thread { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 85%; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.msg.everest { background: var(--surface-2); border: 1px solid var(--line); align-self: flex-start; }
.msg.staff { background: #e6eefa; align-self: flex-end; }

/* Career-office Home */
.admin-home { gap: 22px; }
.admin-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 30px 32px; color: #fff;
  background: linear-gradient(135deg, #14273F 0%, #1d3a5c 60%, #2a4f78 100%); min-height: 190px; display: flex; align-items: center; }
.admin-hero .hero-text { position: relative; z-index: 1; max-width: min(560px, 58%); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.admin-hero .eyebrow { color: #9FC0E6; }
.admin-hero h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 34px; line-height: 1.15; color: #fff; }
.admin-hero p { color: #d7e3f1; font-size: 15.5px; line-height: 1.5; }
.admin-hero .hero-art { position: absolute; right: 0; bottom: 0; width: min(40%, 380px); height: 100%; }
@media (max-width: 720px) { .admin-hero { padding: 24px 20px; } .admin-hero .hero-text { max-width: 100%; } .admin-hero h1 { font-size: 27px; } .admin-hero .hero-art { opacity: .3; width: 70%; } }

.glance-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .glance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.glance { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.glance:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(12,22,34,.08); }
.glance b { font-size: 30px; line-height: 1.1; color: var(--brand); font-weight: 700; }
.glance span { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.glance small { font-size: 12.5px; color: var(--muted); }
.glance.warm { border-color: #f1c7b2; background: linear-gradient(180deg, #fff7f2, var(--surface)); }
.glance.warm b { color: #E2683A; }

.admin-home-split { align-items: start; }
@media (max-width: 900px) { .admin-home-split { grid-template-columns: minmax(0, 1fr); } }
.mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mini-list a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.mini-list li:last-child a { border-bottom: 0; }
.mini-list a:hover { background: var(--surface-2); }
.mini-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mini-main b { font-size: 14.5px; }
.mini-list .chip { flex: none; }
.date-badge { flex: none; width: 46px; height: 48px; border-radius: 10px; background: #e6eefa; color: #1f4f8f; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.date-badge b { font-size: 18px; }
.date-badge small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

.section-title { font-size: 17px; margin-bottom: 10px; }
.tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) {
  /* 5 tools: three across, then two that fill the row */
  .tool-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tool-grid .tool { grid-column: span 2; }
  .tool-grid .tool:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 640px) { .tool-grid { grid-template-columns: minmax(0, 1fr); } .tool-grid .tool, .tool-grid .tool:nth-child(n+4) { grid-column: auto; } }
.tool { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.tool:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(12,22,34,.08); }
.tool-icon { width: 38px; height: 38px; border-radius: 10px; background: #14273F; color: #fff; display: grid; place-items: center; flex: none; }
.tool-icon svg { width: 20px; height: 20px; }
.privacy-note { display: flex; gap: 14px; align-items: center; background: var(--surface-2); }
.privacy-note .tool-icon { background: #E2683A; }

.flag-line { font-size: 12.5px; font-weight: 600; color: #b26b00; margin-top: 2px; }
.flag-line.bad { color: var(--bad); }
.date-badge.closing { background: #fdebe2; color: #b5481d; }

/* Student Home: just the highlights */
.student-home { gap: 18px; }
.student-hero { min-height: 220px; }
.student-hero .hero-text p { color: #b9cbe0; font-size: 14px; }
.hero-focus { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); max-width: 460px; }
.hero-focus b { font-size: 16.5px; line-height: 1.35; color: #fff; }
.hero-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.hero-ghost:hover { background: rgba(255,255,255,.1); }
.tagline-light { font-style: italic; color: #d7e3f1 !important; }
.glance-label { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) !important; margin-bottom: 4px; }
.glance .of { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.glance .glance-text { font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.glance small { margin-top: 4px; line-height: 1.4; }
.mini-bar { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.mini-bar i { display: block; height: 100%; background: var(--brand-2); border-radius: 999px; }
@media (max-width: 720px) { .admin-hero .hero-art { opacity: .16; } }

/* Interview prep */
.interview-page { gap: 16px; }
.prep-for { min-width: 240px; }
.format-note { max-width: 760px; }
.subtabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.subtabs button { border: 0; background: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; color: var(--muted); cursor: pointer; }
.subtabs button[aria-pressed="true"] { background: var(--surface-2); color: var(--brand); box-shadow: inset 0 -2px 0 var(--accent, #E2683A); }
.q-card { padding: 0; overflow: hidden; }
.q-head { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; padding: 14px 16px; cursor: pointer; font: inherit; font-weight: 600; color: var(--ink); }
.q-head > span:first-child { flex: 1; }
.q-caret { color: var(--muted); font-size: 18px; width: 18px; text-align: center; }
.q-body { padding: 0 16px 16px; gap: 12px; }
.model { white-space: normal; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin-top: 6px; line-height: 1.55; }
.practice { display: flex; flex-direction: column; gap: 8px; }
.feedback { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.msg .feedback { margin-top: 8px; }
.preview-chip { font-size: 11px; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.topic { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.topic:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(12,22,34,.08); }
.chat-thread { max-height: 520px; overflow: auto; padding: 4px; }
.chat-input { align-items: flex-end; gap: 8px; flex-wrap: nowrap; }
.chat-input textarea { flex: 1; }
.resource-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.resource-list li { display: flex; flex-direction: column; gap: 2px; }
.iv-card { display: flex; gap: 14px; align-items: center; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.iv-count { flex: none; width: 58px; height: 58px; border-radius: 14px; background: #e6eefa; color: #1f4f8f; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.iv-count b { font-size: 22px; }
.iv-count small { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.iv-count.soon { background: #fdebe2; color: #b5481d; }
.iv-hero { min-height: 0; }
.iv-hero .hero-text { max-width: 100%; }
.iv-big { font-family: Georgia, serif; font-size: 22px !important; color: #fff !important; }
.plan-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan-checks li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.plan-checks label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.plan-checks label > span { display: flex; flex-direction: column; }
.plan-checks input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--brand); }
.plan-checks li.done b { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.plan-checks li.late .muted { color: var(--bad); }
.iv-questions { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.iv-questions li > span:first-child { font-weight: 600; margin-right: 6px; }
.iv-questions .muted { display: block; }
.drill-q { font-family: Georgia, serif; font-size: 21px; line-height: 1.35; }
.iv-nudge { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; font-size: 14px; }
.iv-nudge.soon { background: rgba(226,104,58,.25); border-color: rgba(226,104,58,.5); }
.iv-nudge:hover { background: rgba(255,255,255,.18); }
.news-list, .news-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.news-list li, .news-notes li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.news-form { border-top: 1px dashed var(--line); padding-top: 12px; }
/* Voice and video mock interviews */
.voice-bar { display: flex; flex-direction: column; gap: 8px; }
.voice-bar .mic { align-self: flex-start; font-size: 15px; padding: 12px 20px; }
.cam-wrap { position: relative; align-self: flex-start; }
.self-view { width: 220px; max-width: 100%; border-radius: 14px; transform: scaleX(-1); background: #0c1828; display: block; }
.cam-note { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.playback { width: 100%; max-width: 520px; border-radius: 14px; background: #0c1828; }

/* Checkboxes drawn by Everest, not the browser, so they look the same on every device
   (Safari, especially in dark mode, can otherwise render them as solid black boxes). */
.plan-item input[type="checkbox"], .plan-checks input[type="checkbox"], .share-toggle input[type="checkbox"], .check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; margin: 2px 0 0; flex: none; cursor: pointer;
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #b9c2ce; background: #fff;
  display: inline-grid; place-content: center; transition: background .12s ease, border-color .12s ease;
}
.check input[type="checkbox"] { width: 17px; height: 17px; border-radius: 5px; margin: 0; }
.plan-item input[type="checkbox"]::before, .plan-checks input[type="checkbox"]::before, .share-toggle input[type="checkbox"]::before, .check input[type="checkbox"]::before {
  content: ""; width: 11px; height: 11px; transform: scale(0); transition: transform .12s ease;
  background: #fff; clip-path: polygon(14% 44%, 0 59%, 40% 100%, 100% 22%, 86% 8%, 39% 70%);
}
.plan-item input[type="checkbox"]:checked, .plan-checks input[type="checkbox"]:checked, .share-toggle input[type="checkbox"]:checked, .check input[type="checkbox"]:checked {
  background: var(--ok); border-color: var(--ok);
}
.share-toggle input[type="checkbox"]:checked, .check input[type="checkbox"]:checked { background: var(--brand-2); border-color: var(--brand-2); }
.plan-item input[type="checkbox"]:checked::before, .plan-checks input[type="checkbox"]:checked::before, .share-toggle input[type="checkbox"]:checked::before, .check input[type="checkbox"]:checked::before { transform: scale(1); }
.plan-item input[type="checkbox"]:hover, .plan-checks input[type="checkbox"]:hover, .share-toggle input[type="checkbox"]:hover, .check input[type="checkbox"]:hover { border-color: var(--brand-2); }
.plan-item input[type="checkbox"]:focus-visible, .plan-checks input[type="checkbox"]:focus-visible, .share-toggle input[type="checkbox"]:focus-visible, .check input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* Careers: pay ranges and "at your school" */
.pay-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.pay-table th, .pay-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pay-table th { font-weight: 600; color: var(--muted); font-size: 13px; }
.pay-table td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ok); }
.pay-table td .small { display: block; font-weight: 400; }
.school-list { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.school-list li { display: flex; flex-direction: column; gap: 1px; }
.edge-card { border-left: 4px solid var(--accent); }
.edge-list { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.edge-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.edge-list li > div { display: flex; flex-direction: column; gap: 2px; }
.edge-icon { font-size: 18px; line-height: 1.3; }

/* ===================== Interview prep: visual overhaul ===================== */
.interview-page { gap: 18px; }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.tab-body { animation: rise-in .22s ease both; display: flex; flex-direction: column; gap: 12px; }
@media (prefers-reduced-motion: reduce) { .interview-page *, .interview-page *::before { animation: none !important; transition: none !important; } }
.room-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.back-link { align-self: flex-start; background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 600; color: var(--brand-2); cursor: pointer; }
.back-link:hover { text-decoration: underline; }

/* Progress ring (Summit Orange) */
.p-ring { --s: 44px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), #f0e3dc 0); position: relative; transition: background .4s ease; }
.p-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.p-ring > span { position: relative; font-size: calc(var(--s) * .26); font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.p-ring.full { background: var(--ok); }
.p-ring.full > span { color: var(--ok); font-size: calc(var(--s) * .38); }

/* Momentum strip */
.momentum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 22px; border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #fff7f2 100%); border: 1px solid #f3dccf; }
.momentum-cheer p { margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--ink); max-width: 46ch; }
.momentum-stats { display: flex; flex-wrap: wrap; gap: 18px; }
.m-stat { display: flex; align-items: center; gap: 10px; }
.m-stat > span:last-child { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.m-stat b { font-size: 16px; color: var(--ink); }
.m-big { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; font-size: 18px; }

/* Stage cards: General prep vs. Firm-specific prep */
.stages { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stage { display: flex; gap: 14px; align-items: center; text-align: left; padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface);
  font: inherit; color: inherit; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.stage:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(12,22,34,.07); }
.stage[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(20,39,63,.08); }
.stage-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--surface-2); }
.stage[aria-pressed="true"] .stage-icon { background: var(--brand); }
.stage-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stage-text b { font-size: 16px; }
.stage-text > span { font-size: 13px; color: var(--muted); }
.stage.locked .stage-text > span { color: var(--accent); font-weight: 600; }
.stage.locked { border-style: dashed; }
@media (max-width: 640px) { .stages { grid-template-columns: 1fr; } }

/* Mock interview invitation banner (on other tabs) */
.mock-banner { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 18px; border-radius: 16px; border: 0; cursor: pointer; font: inherit;
  color: #fff; background: linear-gradient(120deg, var(--brand) 0%, #23446b 100%); box-shadow: 0 10px 24px -12px rgba(12,24,40,.5); transition: transform .15s ease, box-shadow .15s ease; }
.mock-banner:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(12,24,40,.55); }
.mock-banner > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mock-banner > span:nth-child(2) > span { font-size: 13.5px; color: #c9d7e8; }
.mock-banner-icon { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 20px; flex: none; }
@media (max-width: 520px) { .mock-banner .btn { display: none; } }

/* Sub-navigation */
.subtabs { gap: 4px; border-bottom: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.subtabs button { white-space: nowrap; border-radius: 10px; padding: 9px 14px; transition: background .15s ease, color .15s ease; }
.subtabs button:hover { color: var(--brand); background: var(--surface-2); }
.subtabs button[aria-pressed="true"] { background: var(--brand); color: #fff; box-shadow: none; }
.format-note { margin: 0; }

/* Question cards */
.q-list { display: flex; flex-direction: column; gap: 10px; }
.q-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease; }
.q-card:hover { border-color: #cfd6df; }
.q-card.open { box-shadow: 0 10px 28px -14px rgba(12,24,40,.25); border-color: #cfd6df; }
.q-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; min-height: 56px; }
.q-text { flex: 1; min-width: 0; line-height: 1.4; }
.q-text .chip { margin-left: 6px; vertical-align: middle; }
.q-caret { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--surface-2); position: relative; transition: transform .2s ease, background .15s ease; }
.q-caret::before { content: ""; position: absolute; left: 7px; top: 6px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.q-card.open .q-caret { transform: rotate(180deg); background: #fde9df; }
.q-dot { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid #cfd6df; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; }
.q-dot.tried { border-color: var(--accent); background: conic-gradient(var(--accent) 50%, transparent 0); }
.q-dot.done { border-color: var(--ok); background: var(--ok); }
.q-body { padding: 0 18px 18px 54px; display: flex; flex-direction: column; gap: 14px; animation: rise-in .2s ease both; }
@media (max-width: 560px) { .q-body { padding-left: 18px; } }
.q-callout { background: #eef3fa; border-radius: 12px; padding: 10px 14px; }
.q-callout-label, .fb-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.q-callout p { font-size: 14.5px; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
.check-list li { padding-left: 24px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.model-wrap summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--brand-2); list-style: none; }
.model-wrap summary::-webkit-details-marker { display: none; }
.model-wrap summary::before { content: "▸ "; }
.model-wrap[open] summary::before { content: "▾ "; }
.model-wrap .model { margin-top: 8px; animation: rise-in .2s ease both; }
.practice { gap: 10px; }
.practice-input { min-height: 96px; }
.practice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Feedback cards */
.fb-card { border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--bad); animation: pop-in .25s ease both; }
.fb-card.fb-strong { border-left-color: var(--ok); background: linear-gradient(90deg, #f3fbf6, #fff 60%); }
.fb-card.fb-needs_work { border-left-color: var(--warn); }
.fb-top { display: flex; align-items: flex-start; gap: 10px; }
.fb-badge { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--bad); }
.fb-strong .fb-badge { background: var(--ok); }
.fb-needs_work .fb-badge { background: var(--warn); }
.fb-title { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.fb-title b { font-size: 15px; }
.preview-chip { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.fb-sec { display: flex; flex-direction: column; }
.fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.fb-list li { padding-left: 22px; position: relative; line-height: 1.45; }
.fb-list.good li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 800; }
.fb-list.tips li::before { content: "→"; position: absolute; left: 2px; color: var(--accent); font-weight: 800; }
.fb-note { font-size: 13px; color: var(--muted); }

/* Topic cards */
.topic-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.topic { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; gap: 8px; }
.topic:hover { border-color: #cfd6df; }
.topic.cleared { border-color: #bfe3cf; background: linear-gradient(180deg, #f3fbf6, #fff 50%); }
.topic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.topic b { font-size: 16px; }
.topic-foot { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 600; color: var(--brand-2); }
.topic-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.topic-hero-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.topic-hero-text p { color: var(--ink-2); font-size: 14.5px; }

/* The practice room: mock interviews and talk-throughs */
.mock-welcome { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; padding: 26px; border-radius: 22px; color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, #2a4f78 0%, var(--brand) 55%, #0c1828 100%); box-shadow: 0 24px 50px -28px rgba(12,24,40,.7); animation: pop-in .3s ease both; }
.mock-welcome h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin: 6px 0 10px; color: #fff; }
.mock-welcome-text p { color: #d7e3f1; font-size: 15px; line-height: 1.55; }
.mock-facts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mock-facts li { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: #e8eff8; }
.mock-setup { background: var(--surface); color: var(--ink); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.mock-start { width: 100%; box-shadow: 0 10px 22px -10px rgba(226,104,58,.7); }
@media (max-width: 820px) { .mock-welcome { grid-template-columns: 1fr; padding: 20px; } }
.mode-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface);
  font: inherit; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.mode-card span { font-size: 20px; }
.mode-card:hover:not(:disabled) { border-color: var(--brand-2); }
.mode-card[aria-pressed="true"] { border-color: var(--accent); background: #fff4ee; color: var(--brand); }
.mode-card:disabled { opacity: .45; cursor: not-allowed; }

.practice-room { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 0 0 16px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; animation: pop-in .25s ease both; }
.room-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; color: #fff;
  background: linear-gradient(120deg, var(--brand) 0%, #23446b 100%); }
.room-head h2 { color: #fff; font-size: 20px; margin: 2px 0 4px; }
.room-head p { color: #c9d7e8; font-size: 13.5px; }
.room-head .room-eyebrow { color: #f6b394; }
.room-close { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.room-close:hover { background: rgba(255,255,255,.2); }
.room-progress { width: min(260px, 60vw); height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; margin: 6px 0 4px; }
.room-progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.room-error { color: var(--bad); padding: 0 20px; }
.practice-room .chat-thread, .practice-room .composer, .practice-room .voice-bar, .practice-room .cam-wrap, .practice-room .summary-card, .practice-room > .stack { margin: 0 16px; }
.chat-thread { max-height: 560px; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 2px; scroll-behavior: smooth; }
.bubble-row { display: flex; gap: 10px; align-items: flex-end; animation: rise-in .22s ease both; }
.bubble-row.me { justify-content: flex-end; }
.bubble-col { display: flex; flex-direction: column; gap: 4px; max-width: min(78%, 640px); }
.bubble-row.me .bubble-col { align-items: flex-end; }
.bubble-who { font-size: 12px; color: var(--muted); padding: 0 4px; }
.bubble-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; background: var(--brand); color: #fff; }
.bubble-avatar.tutor { background: var(--accent); }
.chat-bubble { padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.55; }
.bubble-row.them .chat-bubble { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 6px; color: var(--ink); }
.bubble-row.me .chat-bubble { background: #fff1ea; border: 1px solid #f6d5c5; border-bottom-right-radius: 6px; color: var(--ink); }
.bubble-col .fb-card { margin-top: 4px; }
.chat-bubble.typing { display: inline-flex; gap: 5px; padding: 15px 16px; width: fit-content; }
.chat-bubble.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1.2s ease-in-out infinite; }
.chat-bubble.typing i:nth-child(2) { animation-delay: .15s; }
.chat-bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 8px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.composer:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(35,68,107,.1); }
.composer textarea { flex: 1; border: 0; box-shadow: none; resize: none; padding: 8px 10px; min-height: 72px; }
.composer textarea:focus { box-shadow: none; }
.composer-send { flex: none; }
.summary-card { border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(160deg, #fff7f2, #fff 60%); border: 1px solid #f3dccf; animation: pop-in .3s ease both; }
.summary-card h3 { font-size: 18px; line-height: 1.35; }
.summary-trophy { font-size: 30px; }

/* Voice */
.voice-bar { flex-direction: row; align-items: flex-start; gap: 14px; padding: 12px; border: 1.5px solid var(--line); border-radius: 18px; }
.voice-main { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mic-btn { width: 64px; height: 64px; flex: none; border-radius: 50%; border: 0; cursor: pointer; font-size: 26px; color: #fff; background: var(--accent);
  box-shadow: 0 10px 22px -10px rgba(226,104,58,.8); transition: transform .15s ease, background .15s ease; }
.mic-btn:hover:not(:disabled) { transform: scale(1.05); }
.mic-btn:disabled { opacity: .5; cursor: not-allowed; }
.mic-btn.live { background: var(--bad); animation: mic-pulse 1.4s ease-out infinite; font-size: 20px; }
@keyframes mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(192,57,47,.45); } 100% { box-shadow: 0 0 0 16px rgba(192,57,47,0); } }
.live-label { color: var(--bad); font-weight: 600; }

/* Drills: flashcards */
.drill { display: flex; flex-direction: column; gap: 14px; }
.drill-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.drill-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.drill-dots i { width: 22px; height: 6px; border-radius: 999px; background: var(--line); transition: background .2s ease; }
.drill-dots i.cur { background: var(--brand); }
.drill-dots i.ok { background: var(--ok); }
.drill-dots i.tried { background: var(--accent); }
.flashcard { background: var(--surface); border-radius: 22px; padding: 24px; border: 1px solid var(--line); box-shadow: 0 22px 44px -26px rgba(12,24,40,.4);
  display: flex; flex-direction: column; gap: 14px; animation: card-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes card-in { from { opacity: 0; transform: translateX(18px) rotate(.4deg); } to { opacity: 1; transform: none; } }
.flash-kind { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); background: #fff1ea; border-radius: 999px; padding: 4px 10px; }
.drill-q { font-size: clamp(20px, 2.4vw, 24px); }
.drill-nav { display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 560px) { .flashcard { padding: 18px; } .drill-nav .btn { flex: 1; } }

/* Firm-specific: missions */
.mission-card { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
  font: inherit; color: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.mission-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(12,24,40,.35); border-color: #cfd6df; }
.mission-card.soon { border-color: #f3c7b2; background: linear-gradient(90deg, #fff6f1, #fff 55%); }
.mission-card .mini-main { flex: 1; gap: 4px; }
.mission-card .mini-bar { max-width: 240px; }
.mission-card .mini-bar i { background: var(--accent); }
.mission-go { font-size: 20px; color: var(--muted); transition: transform .15s ease; }
.mission-card:hover .mission-go { transform: translateX(3px); color: var(--accent); }
.unlock-card { display: flex; flex-direction: column; gap: 14px; border: 1.5px dashed #e7b9a3; background: linear-gradient(180deg, #fffaf7, #fff); }
.unlock-head { display: flex; gap: 14px; align-items: flex-start; }
.unlock-icon { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: #fff1ea; color: var(--accent); font-weight: 700; }
.mission-hero h1 { font-size: clamp(24px, 3.4vw, 32px) !important; }
.mission-hero .iv-big { font-family: inherit; font-size: 15px !important; color: #f6c6ae !important; font-weight: 600; }
.q-head > span.q-dot:first-child { flex: 0 0 24px; }
.q-head > .q-text { flex: 1 1 auto; }
/* Motion only, never hidden: content stays visible even if an animation doesn't run. */
@keyframes rise-in { from { transform: translateY(6px); } to { transform: none; } }
@keyframes pop-in { from { transform: scale(.985); } to { transform: none; } }
@keyframes card-in { from { transform: translateX(14px); } to { transform: none; } }

/* ── Mock interview: voice and video call ─────────────────────────────────────── */
.practice-room .call, .practice-room .call + .chat-thread { margin: 0 16px; }
.call { display: flex; flex-direction: column; gap: 12px; }
.call-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-tile { position: relative; min-height: 230px; border-radius: 18px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 30%, #23446b 0%, #14273f 60%, #0c1828 100%); color: #fff; }
.tile-name { position: absolute; left: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; background: rgba(12, 24, 40, .55); backdrop-filter: blur(6px); }
.tile-state { font-weight: 500; opacity: .8; }
.tile-note { position: absolute; right: 12px; top: 10px; font-size: 11px; opacity: .75; }

/* Everest: the logo "talks" while speaking */
.ev-orb { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.ev-logo { width: 100%; height: 100%; display: block; position: relative; z-index: 1; transition: transform .12s ease-out;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35)); }
.ev-logo svg { width: 100%; height: 100%; display: block; }
.ev-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.call[data-phase="speaking"] .ev-ring { animation: ev-ring 1.6s ease-out infinite; }
.call[data-phase="speaking"] .ev-ring.r2 { animation-delay: .8s; }
.call[data-phase="speaking"] .ev-logo { animation: ev-breathe 1.2s ease-in-out infinite; }
.ev-orb.bump .ev-logo { animation: ev-bump .18s ease-out; }
.call[data-phase="listening"] .ev-logo, .call[data-phase="paused"] .ev-logo { transform: scale(.94); }
.call[data-phase="paused"] .ev-orb { filter: grayscale(.6); }
.ev-dots { position: absolute; top: calc(50% + 66px); display: flex; gap: 6px; }
.ev-dots i { width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: .5; animation: ev-dot 1s ease-in-out infinite; }
.ev-dots i:nth-child(2) { animation-delay: .15s; }
.ev-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ev-ring { from { transform: scale(1); opacity: .7; } to { transform: scale(1.7); opacity: 0; } }
@keyframes ev-breathe { 50% { transform: scale(1.04); } }
@keyframes ev-bump { 40% { transform: scale(1.07); } }
@keyframes ev-dot { 50% { transform: translateY(-5px); opacity: 1; } }

/* You: camera or initial, with a live mic meter */
.you-tile .self-view, .you-tile #camslot { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The whole camera frame, never cropped: the tile takes the frame's shape (--cam-ratio,
   set from the camera) and contain keeps every edge in view. Mirrored like a selfie. */
.you-tile .self-view { object-fit: contain; border-radius: 0; background: #0c1828; }
/* Video calls: the interviewer fills the stage; you're a tidy tile beside it. */
.call-tiles.video { grid-template-columns: minmax(0, 1fr) minmax(240px, 40%); align-items: stretch; }
.call-tiles.video .you-tile { min-height: 0; aspect-ratio: var(--cam-ratio, 4 / 3); align-self: center; border-radius: 16px;
  box-shadow: 0 6px 20px rgba(12, 24, 40, .18); border: 1px solid rgba(255, 255, 255, .12); }
.call-tiles.video .ev-tile { min-height: 230px; }
.call:not([data-phase="listening"]) .you-avatar { --lvl: 0; }
.you-avatar { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; font-weight: 700; background: var(--brand-2);
  box-shadow: 0 0 0 calc(var(--lvl, 0) * 14px) rgba(226, 104, 58, .35); transition: box-shadow .08s linear; }
.mic-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.mic-meter i { width: 3px; border-radius: 2px; background: var(--accent); height: calc(3px + var(--lvl, 0) * 11px); transition: height .08s linear; }
.mic-meter i:nth-child(2), .mic-meter i:nth-child(4) { height: calc(3px + var(--lvl, 0) * 8px); }
.mic-meter i:nth-child(1), .mic-meter i:nth-child(5) { height: calc(3px + var(--lvl, 0) * 5px); }

/* Captions and controls */
.call-caption { min-height: 3.2em; font-size: 17px; line-height: 1.5; color: var(--ink); padding: 4px 2px; }
.cap-who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.call-sending { display: none; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.call[data-sending] .call-sending { display: flex; }
.call-sending-bar { width: 80px; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.call-sending-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: call-send 2.2s linear forwards; }
@keyframes call-send { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.call-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.call-main { min-width: 140px; }
.call-controls [aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.call-foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }

@media (max-width: 640px) {
  .call-tiles { grid-template-columns: 1fr; }
  .call-tiles:not(.video) .call-tile { min-height: 170px; }
  .call-tiles.video { grid-template-columns: 1fr; }
  .call-tiles.video .you-tile { position: absolute; width: 32%; max-height: 62%; min-height: 0; aspect-ratio: var(--cam-ratio, 3 / 4); right: 10px; bottom: 10px; z-index: 2; border: 2px solid #fff; border-radius: 12px; }
  .call-tiles.video { position: relative; }
  .call-tiles.video .ev-tile .tile-name { max-width: calc(73% - 26px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .call-tiles.video .you-tile .tile-name, .call-tiles.video .you-tile .tile-note { display: none; }
  .call-tile { min-height: 260px; }
}
@media (prefers-reduced-motion: reduce) { .call *, .call *::before { animation: none !important; transition: none !important; } }

/* ── Mock interview: interviewer voice setting ────────────────────────────────── */
.voice-pick .seg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg-btn { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font: inherit; font-weight: 600; font-size: 14px;
  color: var(--ink-2); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.seg-btn:hover:not(:disabled) { border-color: var(--brand-2); }
.seg-btn[aria-checked="true"] { border-color: var(--accent); background: #fff4ee; color: var(--brand); }
.seg-btn:disabled { opacity: .45; cursor: not-allowed; }
.voice-opt { display: inline-flex; align-items: center; gap: 2px; }
.voice-hear { width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--brand-2); font-size: 12px; cursor: pointer; }
.voice-hear:hover:not(:disabled) { background: var(--surface-2); }
.voice-hear:disabled { opacity: .4; cursor: not-allowed; }
.voice-pace { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.seg-btn.seg-sm { padding: 5px 12px; font-size: 13px; }
.seg-btn[aria-pressed="true"] { border-color: var(--accent); background: #fff4ee; color: var(--brand); }

/* ── Mock interview: wrap-up and the feedback screen ─────────────────────────── */
.mock-wrapping, .mock-empty { align-items: flex-start; }
.ev-wrap-mark { width: 48px; height: 48px; display: block; }
.ev-wrap-mark svg { width: 100%; height: 100%; display: block; }
.ev-dots.dark { position: static; }
.ev-dots.dark i { background: var(--brand); }
.summary-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.practice-room .answer-review { margin: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.answer-review h3 { font-size: 16px; }
.ans-item { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ans-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600; }
.ans-item > summary::-webkit-details-marker { display: none; }
.ans-item > summary::after { content: '▸'; margin-left: auto; color: var(--muted); transition: transform .15s ease; }
.ans-item[open] > summary::after { transform: rotate(90deg); }
.ans-q { font-size: 14px; color: var(--ink); line-height: 1.35; }
.ans-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.ans-item.transcript .chat-thread { margin: 0 14px 14px; }

/* ── Coach: conversation threads ──────────────────────────────────────────────── */
.page.coach { max-width: 1240px; }
.coach-layout { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; height: 100%; min-height: 0; }
.thread-top { display: flex; gap: 6px; align-items: center; }
.thread-top .thread-new { flex: 1; }
.thread-collapse { flex: none; width: 36px; height: 36px; padding: 0; justify-content: center; font-size: 18px; color: var(--muted); }
/* Collapsed (laptops): a slim rail with just "new chat" and "show chats". */
.coach-layout.threads-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.threads-collapsed .thread-top { flex-direction: column; }
.threads-collapsed .thread-new { width: 44px; height: 44px; padding: 0; flex: none; }
.threads-collapsed .thread-new-label, .threads-collapsed .thread-list { display: none; }
.thread-panel { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.thread-new { width: 100%; justify-content: center; }
.thread-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.thread-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; font: inherit; color: var(--ink-2); cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.thread-item:hover { background: var(--surface); border-color: var(--line); }
.thread-item[aria-current="true"] { background: var(--surface); border-color: var(--accent); box-shadow: var(--shadow); color: var(--ink); }
.thread-name { font-weight: 600; font-size: 14px; line-height: 1.3; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-when { font-size: 12px; color: var(--muted); }
.thread-item.draft .thread-name { color: var(--accent); }
.thread-empty { padding: 4px 12px; }
.chat-title { min-width: 0; }
.chat-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; }
.thread-toggle, .thread-new-sm { display: none; }

@media (max-width: 900px) {
  .coach-layout, .coach-layout.threads-collapsed { grid-template-columns: minmax(0, 1fr); }
  .thread-collapse { display: none; }
  .threads-collapsed .thread-list { display: flex; }
  .thread-toggle, .thread-new-sm { display: inline-flex; }
  /* On phones the list is a menu that drops over the chat. */
  .thread-panel { display: none; position: absolute; z-index: 5; top: 58px; left: 8px; right: 8px; max-height: 70%; padding: 12px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 32px rgba(18, 32, 47, .18); }
  .thread-panel.open { display: flex; }
  .thread-panel .thread-new { display: none; }
}

/* ── Coach: per-chat ⋯ menu (rename, delete) ──────────────────────────────────── */
.thread-row { position: relative; }
.thread-row .thread-item { padding-right: 38px; }
.thread-more { position: absolute; top: 8px; right: 6px; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease; }
.thread-row:hover .thread-more, .thread-row.current .thread-more, .thread-row.menu-open .thread-more, .thread-more:focus-visible { opacity: 1; }
.thread-more:hover, .thread-row.menu-open .thread-more { background: var(--surface-2); color: var(--ink); }
@media (hover: none) { .thread-more { opacity: 1; } }
/* Opens just below the chat, inside the list (a floating menu would be clipped by the scrolling list). */
.thread-menu { margin: 2px 6px 6px auto; width: fit-content; min-width: 140px; padding: 6px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(18, 32, 47, .16); animation: pop-in .15s ease both; }
.thread-menu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.thread-menu button:hover, .thread-menu button:focus-visible { background: var(--surface-2); }
.thread-menu .danger { color: var(--bad); }
.thread-menu .danger:hover { background: var(--bad-soft); }
.thread-confirm { margin: 4px 6px 8px; padding: 10px; border-radius: 10px; background: var(--bad-soft); display: flex; flex-direction: column; gap: 8px; }
.thread-confirm p { margin: 0; color: var(--ink); }
.btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover { filter: brightness(.95); }
.thread-row.renaming { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: var(--surface); border: 1px solid var(--accent); }
.thread-rename { font-size: 14px; padding: 8px 10px; }
.thread-rename-actions { display: flex; gap: 6px; }

/* ═════════════════════════════════════════════════════════════════════════════════
   Visual polish: Coach, Profile, Careers, Resume, My Plan, Network.
   Same language as Home and Interview prep: 16–18px rounded cards, a soft lift on
   hover, the warm "momentum" tint for each tab's highlight, Summit Orange only for
   the one primary action, and a gentle rise-in. Presentation only.
   ═════════════════════════════════════════════════════════════════════════════════ */
:is(.profile-page, .explore, .resume-page, .plan-page, .network-page) { gap: 18px; }
:is(.profile-page, .explore, .resume-page, .plan-page, .network-page) > * { animation: rise-in .24s ease both; }
:is(.profile-page, .explore, .resume-page, .plan-page, .network-page) .card { border-radius: 18px; }
:is(.profile-page, .explore, .resume-page, .plan-page, .network-page) .card-head h2 { font-size: 18px; }
:is(.profile-page, .explore, .resume-page, .plan-page, .network-page) .page-head p { max-width: 70ch; }
.filters .btn { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.filters .btn:not(.btn-primary):hover { border-color: var(--brand-2); color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  :is(.profile-page, .explore, .resume-page, .plan-page, .network-page, .coach) *, :is(.profile-page, .explore, .resume-page, .plan-page, .network-page) { animation: none !important; transition: none !important; }
}

/* ── Profile ── */
.profile-page .snapshot { background: linear-gradient(135deg, #fff 0%, #fff7f2 100%); border-color: #f3dccf; padding: 22px; }
.profile-page .snapshot .avatar.lg { width: 60px; height: 60px; font-size: 21px; background: var(--brand); color: #fff; box-shadow: 0 8px 20px -10px rgba(12, 24, 40, .6); }
.profile-page .snap-who h2 { font-size: 22px; }
.profile-page .snap-ready-score { padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid #f3dccf; }
.profile-page .snap-ready-score .progress > span { background: var(--accent); }
.profile-page .snap-tile { background: var(--surface); border-radius: 14px; transition: border-color .15s ease, box-shadow .15s ease; }
.profile-page .snap-tile:hover { border-color: #cfd6df; box-shadow: 0 6px 18px -12px rgba(12, 24, 40, .3); }
.profile-page .snap-checks { padding-top: 4px; }
/* Each section gets a small icon badge, like the stage cards on Interview prep. */
.profile-page [data-section] .card-head h2, .profile-page #sharing .card-head h2 { display: flex; align-items: center; gap: 10px; }
.profile-page [data-section] .card-head h2::before, .profile-page #sharing .card-head h2::before {
  content: var(--icon, "•"); width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-grid; place-items: center; font-size: 17px; background: var(--surface-2); border: 1px solid var(--line); }
.profile-page [data-section] .card-head p, .profile-page #sharing .card-head p { margin-left: 44px; margin-top: 2px; }
.profile-page [data-section="basics"] { --icon: "👤"; }
.profile-page [data-section="goals"] { --icon: "🎯"; }
.profile-page [data-section="experience"] { --icon: "💼"; }
.profile-page [data-section="future"] { --icon: "🧭"; }
.profile-page [data-section="outcomes"] { --icon: "🏆"; }
.profile-page [data-section="resumeInfo"] { --icon: "📄"; }
.profile-page #sharing { --icon: "🔒"; }
.profile-page .entry { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand-2); border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 14px -12px rgba(12, 24, 40, .35); }
.profile-page .entries { gap: 12px; }
.profile-page .input, .profile-page .tags { border-radius: 11px; }

/* ── Careers ── */
.explore .starter { background: linear-gradient(135deg, #f5f9fe 0%, #eaf2fb 100%); border-color: #d6e4f4; }
.explore .starter summary { font-weight: 700; color: var(--brand); list-style: none; display: flex; align-items: center; gap: 10px; }
.explore .starter summary::-webkit-details-marker { display: none; }
.explore .starter summary::before { content: "💡"; width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid #d6e4f4; }
.explore .career-group { margin-top: 6px; }
.explore .group-head h2 { font-size: 19px; }
.explore .career { border-radius: 16px; padding: 18px; position: relative; overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.explore .career::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.explore .career:hover { transform: translateY(-2px); border-color: #cfd6df; box-shadow: 0 12px 26px -14px rgba(12, 24, 40, .35); }
.explore .career:hover::before { transform: scaleX(1); }
.explore .career-name { font-size: 16.5px; color: var(--brand); }
.explore .career .pay b { color: var(--brand); }

/* ── Resume ── */
.resume-page .input.mono { background: var(--surface-2); border-radius: 14px; line-height: 1.55; padding: 14px 16px; }
.resume-page .input.mono:focus { background: var(--surface); }
/* The score card is the tab's highlight, like the momentum strip on Interview prep. */
.resume-page .card:has(.ring) { background: linear-gradient(135deg, #fff 0%, #fff7f2 100%); border-color: #f3dccf; }
.resume-page .fix { background: var(--surface); border-radius: 14px; border-left: 4px solid var(--line); padding: 14px 16px 14px 18px; transition: box-shadow .15s ease; }
.resume-page .fix:hover { box-shadow: 0 8px 20px -14px rgba(12, 24, 40, .3); }
.resume-page .fix.sev-critical { border-left-color: var(--bad); }
.resume-page .fix.sev-major { border-left-color: var(--warn); }
.resume-page #missing .fix { border-left-color: var(--brand-2); }
.resume-page .fix h3 { font-size: 15.5px; }
.resume-page .bullet-fb { background: var(--surface); border-radius: 14px; border-left: 4px solid #9fc0e6; padding: 14px 16px 14px 18px; }
.resume-page .bullet-orig { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.resume-page .checklist li { padding: 2px 0; }
.resume-page .more-bullets summary { cursor: pointer; font-weight: 600; color: var(--brand-2); padding: 6px 0; }

/* ── My Plan ── */
.plan-page .plan-progress { padding: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, #fff 0%, #fff7f2 100%); border: 1px solid #f3dccf; }
.plan-page .plan-progress b { font-size: 16px; color: var(--accent); }
.plan-page .plan-progress .progress { height: 10px; background: #f0e3dc; }
.plan-page .plan-progress .progress > span { background: linear-gradient(90deg, var(--accent), #ee8a5f); }
/* Months read like a timeline: a dot by each month, the current one in orange. */
.plan-page .month .card-head h2 { display: flex; align-items: center; gap: 10px; }
.plan-page .month .card-head h2::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #cfd6df; box-shadow: 0 0 0 4px var(--surface-2); flex: none; }
.plan-page .month.current .card-head h2::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.plan-page .month.catch .card-head h2::before { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); }
.plan-page .plan-item { padding: 12px; margin: 0 -12px; border-radius: 12px; border-top-color: transparent; transition: background .15s ease; }
.plan-page .plan-item + .plan-item { box-shadow: 0 -1px 0 var(--line); }
.plan-page .plan-item:hover { background: var(--surface-2); }
.plan-page .plan-item.done .plan-main { opacity: .7; }
.plan-page .plan-item.done .plan-title { text-decoration-color: var(--ok); }
.plan-page .plan-item input[type="checkbox"] { border-radius: 50%; width: 22px; height: 22px; }
.plan-page .plan-item input[type="checkbox"]:checked { animation: pop-in .2s ease; }
.plan-page .edge-card { border-left-width: 0; background: linear-gradient(135deg, #fff 0%, #fff7f2 100%); border-color: #f3dccf; }

/* ── Network ── */
.network-page .alum { border-radius: 16px; padding: 18px; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.network-page .alum:hover { transform: translateY(-2px); border-color: #cfd6df; box-shadow: 0 12px 26px -14px rgba(12, 24, 40, .35); }
.network-page .alum .avatar { background: var(--brand); color: #fff; }
.network-page .match { padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); min-width: 60px; }
.network-page .alum-body > :first-child { font-size: 16px; }
.network-page .reasons { margin-top: 8px; }
.network-page .alum::after { content: "Draft a note →"; align-self: center; flex: none; font-size: 13px; font-weight: 700; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.network-page .alum:hover::after, .network-page .alum:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none), (max-width: 640px) { .network-page .alum::after { display: none; } }

/* ── Coach (light touch) ── */
.coach .msg.assistant .msg-body { border-radius: 16px; border-top-left-radius: 6px; box-shadow: 0 4px 14px -10px rgba(12, 24, 40, .25); }
.coach .msg.user .msg-body { border-radius: 16px; border-top-right-radius: 6px; }
.coach .msg .who { display: inline-flex; align-items: center; gap: 6px; }
.coach .msg .who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.coach .msg { animation: rise-in .2s ease both; }
.coach .chat-input textarea { border-radius: 22px; padding: 11px 16px; background: var(--surface-2); }
.coach .chat-input textarea:focus { background: var(--surface); }
.coach .chat-input .btn { border-radius: 999px; min-height: 44px; padding: 0 20px; }
.coach .chat-suggest .btn { border-radius: 999px; }
.coach .chat-full { border-radius: 18px; }
/* Long labels on the Resume tab wrap instead of running off narrow screens. */
.resume-page .chip { white-space: normal; max-width: 100%; }
@media (max-width: 640px) {
  /* Toggle groups that wrap onto several lines read better as rounded boxes than as pills. */
  .segmented { border-radius: 14px; }
  .segmented button { border-radius: 10px; }
  .network-page .alum { padding: 14px; gap: 12px; }
  .network-page .match { min-width: 50px; padding: 6px 8px; }
  .network-page .match b { font-size: 19px; }
}
@media (max-width: 640px) {
  .resume-page .page-head .segmented { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .resume-page .page-head .segmented button { padding: 9px 8px; white-space: normal; line-height: 1.25; }
}

/* ═════════════════════════════════════════════════════════════════════════════════
   The climb (Home hero): where the student is on the mountain, by class year.
   Navy rock, Ice Blue snow, the Summit Orange sun from the logo, and one orange
   "you are here" marker as the page's focal point.
   ═════════════════════════════════════════════════════════════════════════════════ */
.student-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px 28px; align-items: center; padding-bottom: 24px; }
.student-hero .climb { max-width: 330px; justify-self: end; width: 100%; gap: 8px; }
.student-hero .climb-caption { min-height: 0; padding: 10px 14px; }
.student-hero .climb-title { font-size: 15.5px; }
.student-hero .climb-line { font-size: 13.5px; }
/* The original banner art (CONFIG.homeHero = 'classic'). */
.student-hero.hero-classic { display: block; padding-bottom: 30px; }
.student-hero.hero-classic .hero-text { max-width: min(560px, 58%); }
@media (max-width: 720px) { .student-hero.hero-classic .hero-text { max-width: 100%; } }
.student-hero .hero-text { max-width: none; }
.climb { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.climb-svg { width: 100%; height: auto; display: block; overflow: visible; }
.climb-sun { fill: var(--accent); }
.route { fill: none; stroke-linecap: round; stroke-width: 2.6; }
.route.climbed { stroke: #fff; }
.route.to-come { stroke: rgba(255, 255, 255, .55); stroke-dasharray: 1.5 7; }
.camp { cursor: pointer; outline: none; }
.camp-hit { fill: transparent; transition: fill .15s ease; }
.camp:focus-visible .camp-hit { fill: rgba(159, 192, 230, .18); stroke: #9FC0E6; stroke-width: 1.5; }
.camp-dot { fill: #14273F; stroke: rgba(255, 255, 255, .8); stroke-width: 2; transition: r .15s ease, fill .15s ease; }
.camp.done .camp-dot { fill: #fff; stroke: #fff; }
.camp:hover .camp-dot, .camp.is-shown .camp-dot { r: 7.5; }
.camp-you { fill: var(--accent); stroke: #fff; stroke-width: 2.5; }
.camp-pulse { fill: var(--accent); transform-box: fill-box; transform-origin: center; animation: camp-pulse 2.6s ease-out infinite; }
@keyframes camp-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.camp-flag { fill: #fff; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.camp-summit:hover .camp-flag, .camp-summit.is-shown .camp-flag { fill: var(--accent); }
.camp-text { fill: #fff; font-size: 15px; font-weight: 600; paint-order: stroke; stroke: rgba(12, 24, 40, .6); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.camp.is-current .camp-name { font-weight: 800; }
.climb-caption { display: flex; flex-direction: column; gap: 2px; min-height: 86px; padding: 12px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px); }
.climb-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f6a782; }
.climb-title { color: #fff; font-size: 16.5px; }
.climb-line { color: #c9d7e8; font-size: 14px; line-height: 1.45; }
.climb-field { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: rgba(226, 104, 58, .25); color: #fff; font-size: 12px; font-weight: 700; }
@media (max-width: 900px) { .student-hero { grid-template-columns: minmax(0, 1fr); } .student-hero .climb { max-width: none; justify-self: stretch; } }
/* Only your camp and the summit are labeled; the others' names fade in on hover or tap. */
.camp .camp-text { transition: opacity .15s ease; }
.camp:not(.is-current):not(.camp-summit) .camp-text { opacity: 0; }
.camp:not(.is-current):not(.camp-summit):is(:hover, .is-shown, :focus-visible) .camp-text { opacity: 1; }
.camp.camp-summit:not(.is-shown):not(:hover) .camp-text { opacity: .85; }
@media (max-width: 520px) { .camp-text { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .camp-pulse { animation: none; opacity: .3; } }

/* ═════════════════════════════════════════════════════════════════════════════════
   Craft pass, all tabs: confident headings, softer depth, one accent moment, a light
   summit-line signature under each tab title, inviting empty states, clear active
   states. Presentation only.
   ═════════════════════════════════════════════════════════════════════════════════ */
:root { --shadow: 0 1px 2px rgba(18, 32, 47, .05), 0 10px 26px -16px rgba(18, 32, 47, .22); }
.page-head h1 { font-size: 30px; font-weight: 750; letter-spacing: -.02em; color: var(--brand); }
.page-head p { font-size: 15px; color: var(--muted); }
/* Signature: a small orange ridge under every tab title, echoing the logo's peak. */
.page-head h1::after { content: ""; display: block; width: 46px; height: 10px; margin-top: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 10'%3E%3Cpath d='M1 9 L11 4 L17 7 L27 1 L35 6 L40 4 L45 9' fill='none' stroke='%23E2683A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.card-head h2, .card > h2 { font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.eyebrow { letter-spacing: .08em; }

/* Depth and feedback */
.btn { transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.btn-accent { box-shadow: 0 6px 16px -10px rgba(226, 104, 58, .9); }
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(226, 104, 58, .95); }
.btn-accent:active { transform: none; }
.nav a { position: relative; transition: background .15s ease, color .15s ease; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent); }
.glance { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.glance:hover { border-color: #cfd6df; }

/* Empty states: a quiet mountain and a friendly line, not a blank box. */
.card.empty { text-align: center; padding: 34px 24px; background: var(--surface-2); border-style: dashed; box-shadow: none; color: var(--ink-2); }
.card.empty::before { content: ""; display: block; width: 60px; height: 34px; margin: 0 auto 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34'%3E%3Ccircle cx='44' cy='9' r='5' fill='%23E2683A' opacity='.8'/%3E%3Cpath d='M2 33 L22 9 L30 18 L38 11 L58 33Z' fill='%239FC0E6' opacity='.55'/%3E%3Cpath d='M18 14 L22 9 L26 14 L23 13 L21 15Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain; }
.card.empty h3 { color: var(--brand); font-size: 17px; margin-bottom: 4px; }
.card.empty p { margin: 0 auto; max-width: 44ch; color: var(--muted); }

/* Home: the glance numbers are the page's loud type; labels stay quiet. */
.student-home .glance b:not(.glance-text) { font-size: 32px; letter-spacing: -.02em; }
.student-home .next-steps .card-head h2 { font-size: 19px; }
.climb-ridge { fill: none; stroke: #9FC0E6; stroke-opacity: .55; stroke-width: 1.4; stroke-linejoin: round; }

/* Coach: sources under a reply that used web search */
.msg-sources { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-left: 3px solid #9fc0e6; border-radius: 0 10px 10px 0; background: var(--surface); font-size: 13px; max-width: 100%; }
.msg-sources > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.msg-sources ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.msg-sources a { color: var(--brand-2); font-weight: 600; overflow-wrap: anywhere; }
.msg-sources .muted { font-size: 12px; }
/* Inline citation numbers in coach replies; they jump to the matching source. */
.cite-mark { line-height: 0; }
.cite-mark button { border: 0; padding: 0 4px; margin-left: 1px; min-width: 16px; height: 16px; border-radius: 999px; background: #e6eefa; color: var(--brand-2);
  font: inherit; font-size: 10.5px; font-weight: 700; line-height: 16px; cursor: pointer; vertical-align: super; transition: background .15s ease, color .15s ease; }
.cite-mark button:hover, .cite-mark button:focus-visible { background: var(--brand-2); color: #fff; }
.msg-sources li.flash { animation: flash 1.2s ease-out; border-radius: 6px; }

/* ── My Plan: "Talk it through" conversation ── */
.plan-talk { gap: 10px; margin-top: 14px; }
.plan-talk .bubble { font-size: 14.5px; line-height: 1.5; padding: 11px 15px; border-radius: 16px; max-width: min(88%, 620px); animation: rise-in .2s ease both; }
.plan-talk .bubble.everest { border-top-left-radius: 6px; box-shadow: 0 4px 14px -10px rgba(12, 24, 40, .25); }
.plan-talk .bubble.me { border-top-right-radius: 6px; }
.plan-talk .muted-bubble { color: var(--muted); background: var(--surface-2); }
.typing-bubble .dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing-bubble .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typing 1s ease-in-out infinite; }
.typing-bubble .dots i:nth-child(2) { animation-delay: .15s; }
.typing-bubble .dots i:nth-child(3) { animation-delay: .3s; }
.talk-composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 4px; }
.talk-composer textarea { flex: 1; min-height: 46px; max-height: 220px; resize: none; overflow-y: auto; font-size: 16px; line-height: 1.45; padding: 11px 16px; border-radius: 22px; background: var(--surface); }
.talk-composer .btn { border-radius: 999px; min-height: 46px; padding: 0 20px; flex: none; }
.plan-notes summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 4px 0; }
.plan-notes textarea { margin-top: 6px; width: 100%; min-height: 60px; resize: none; font-size: 15px; }
@media (max-width: 640px) {
  .plan-talk .bubble { max-width: 100%; }
  .talk-composer .btn { padding: 0 16px; }
}
@media (max-width: 640px) {
  /* An open step uses the card's full width: Close moves under the conversation,
     and the Send button sits under the message box. */
  .plan-page .plan-item.open .plan-main { flex: 1 1 calc(100% - 40px); }
  .plan-page .plan-item.open .plan-side { flex: 1 1 100%; flex-direction: row; justify-content: flex-end; }
  .plan-page .plan-item.open .plan-talk { margin-left: -34px; }
  .talk-composer { flex-direction: column; align-items: stretch; }
  .talk-composer textarea { flex: none; }
  .talk-composer .btn { align-self: flex-end; }
}

/* ═════════════════════════════════════════════════════════════════════════════════
   Career Office (admin) polish: the student app's language, in a more restrained,
   institutional register. Headline metrics lead, tables read like a report, one
   orange accent per page. Presentation only; every admin page has .page.admin.
   ═════════════════════════════════════════════════════════════════════════════════ */
.page.admin { gap: 20px; }
.page.admin > * { animation: rise-in .22s ease both; }
.page.admin .card { border-radius: 16px; }
.page.admin .card-head h2, .page.admin .card > h2, .page.admin .row > h2 { font-size: 17px; letter-spacing: -.01em; }
.page.admin .section-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }

/* Stat tiles: the headline (first) metric carries the accent; labels stay quiet. */
.page.admin .tiles { gap: 14px; }
.page.admin .tile { padding: 16px 18px 15px; border-radius: 14px; box-shadow: var(--shadow); gap: 6px; }
.page.admin .tile b { font-size: 30px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.page.admin .tile span { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
.page.admin .tile:first-child { background: linear-gradient(135deg, #fff 0%, #fff7f2 100%); border-color: #f3dccf; }
.page.admin .tile:first-child b { color: var(--accent); }
@media (max-width: 900px) { .page.admin .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Report tables */
.page.admin .measure-table { font-size: 13.5px; margin-top: 4px; }
.page.admin .measure-table th { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 8px; vertical-align: bottom; border-bottom: 1.5px solid var(--line); }
.page.admin .measure-table td { padding: 10px 8px; font-variant-numeric: tabular-nums; }
.page.admin .measure-table tbody tr { transition: background .12s ease; }
.page.admin .measure-table tbody tr:hover { background: var(--surface-2); }
.page.admin .measure-table tr:last-child td { border-bottom: 0; }
.page.admin .report-table td:first-child { color: var(--ink); font-weight: 600; }
.page.admin .report-table td:last-child { font-weight: 700; color: var(--brand); }
.page.admin .card:has(> .measure-table), .page.admin .card:has(.report-table) { overflow-x: auto; }

/* Bar chart (outcomes by year) */
.page.admin .bars { gap: 10px; margin-top: 6px; }
.page.admin .bar-row { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.page.admin .bar-row > :last-child { font-weight: 700; color: var(--brand); text-align: right; }
.page.admin .bar { height: 12px; background: #eef1f5; }
.page.admin .bar i { background: linear-gradient(90deg, var(--brand-2), #3a6a9c); }

/* Outreach queue: a colored edge says how urgent each student is. */
.page.admin .queue-item { border-left: 4px solid var(--line); transition: box-shadow .15s ease; }
.page.admin .queue-item:has(.chip-warn) { border-left-color: var(--warn); }
.page.admin .queue-item:has(.chip-bad) { border-left-color: var(--bad); }
.page.admin .queue-item:hover { box-shadow: 0 12px 26px -16px rgba(12, 24, 40, .35); }
.page.admin .queue-head h3 { color: var(--brand); }
.page.admin .flag-list li::marker { color: var(--accent); }
.page.admin .queue-panel { border-top-style: dashed; }

/* Events and timelines: calm, scannable rows */
.page.admin .month-head { font-weight: 700; color: var(--brand-2); letter-spacing: .08em; margin: 18px 0 6px; }
.page.admin .event-row { padding: 10px 8px; margin: 0 -8px; border-radius: 10px; transition: background .12s ease; }
.page.admin .event-row:hover { background: var(--surface-2); }
.page.admin .tl-item { padding: 9px 8px; margin: 0 -8px; border-radius: 10px; transition: background .12s ease; }
.page.admin .tl-item:hover { background: var(--surface-2); }

/* Advice check: examples read like quoted material. */
.page.admin .spot, .page.admin .guidance { border-left: 4px solid #9fc0e6; }
.page.admin .bubble-like { border-left: 3px solid var(--line); background: var(--surface-2); }

/* Home: tools lift gently; settings' Save is a normal-size button. */
.page.admin .tool { border-radius: 16px; }
.page.admin .tool:hover { border-color: #cfd6df; }
.page.admin form[data-settings] .btn-accent { width: auto; justify-self: start; padding-left: 28px; padding-right: 28px; }
/* Phones: the Career Office badge stays a small label beside the logo. */
@media (max-width: 900px) { .topbar .brand span.brand-badge { font-size: 9.5px; padding: 3px 8px; letter-spacing: .08em; margin-left: 6px; } }
.page.admin form[data-settings] .field:has(> .btn) { align-items: flex-start; }
.network-page .show-more { align-self: center; border-radius: 999px; padding: 10px 22px; }

/* Network: a mix across seniority */
.network-page .level-pick { align-self: flex-start; }
.network-page .mix-nudge { margin: 0; padding: 10px 14px; border-radius: 12px; background: linear-gradient(135deg, #fff 0%, #fff7f2 100%); border: 1px solid #f3dccf; font-size: 14px; color: var(--ink-2); }
.network-page .mix-nudge b { color: var(--ink); }
.network-page .tier-section { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.network-page .tier-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.network-page .tier-head h2 { font-size: 17px; display: inline-flex; align-items: center; gap: 8px; }
.network-page .tier-head p { margin: 0; }
.network-page .tier-more { align-self: flex-start; font-weight: 600; }

/* Network: list date, LinkedIn, and "Something wrong?" */
.network-page .list-asof { margin-top: 4px; }
.btn-linkedin { color: #0a66c2; border-color: #c9dcf0; }
.btn-linkedin:hover { background: #eef5fc; border-color: #0a66c2; }
.drawer .freshness { margin: 0; }
.report-wrong { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.report-wrong summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.report-wrong form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.report-wrong .check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.network-page .hidden-note { text-align: center; margin-top: 4px; }
.page.admin .alumni-reports { border-left: 4px solid var(--warn); }
.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.report-list li { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.report-list li:first-child { border-top: 0; padding-top: 4px; }
.report-main { min-width: 0; flex: 1 1 280px; }
.report-main p { margin: 6px 0 0; color: var(--ink-2); }
.report-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spot-context { margin: 0; }
.spot-who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* ---------- Start-up splash (shown until sign-in is checked; see index.html) ---------- */
.boot-splash { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 32px 16px;
  background: linear-gradient(180deg, var(--brand) 0, var(--brand) 220px, var(--bg) 220px); }
.boot-splash .brand { display: flex; align-items: center; gap: 12px; background: var(--surface); color: var(--brand); padding: 18px 26px;
  border-radius: 20px; box-shadow: 0 20px 60px rgba(12,22,34,.18); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.boot-splash .brand svg { width: 40px; height: 40px; }
.boot-dots { display: flex; gap: 6px; }
.boot-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.boot-dots i:nth-child(2) { animation-delay: .15s; }
.boot-dots i:nth-child(3) { animation-delay: .3s; }
.boot-slow { color: var(--muted); opacity: 0; animation: boot-slow .3s 10s forwards; }
@keyframes boot-slow { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .boot-dots i { animation: none; } }