/* ============================================================
   QERIONN Design System v1 — product surfaces & primitives
   One shared language for public + authenticated experiences.
   Contrast rule: light surface → dark text; dark surface → light text.
   Gold is accent / CTA / selected — not body copy on light cards.
   ============================================================ */

:root {
  /* Brand */
  --q-deep: #060e1c;
  --q-navy: #0a1930;
  --q-navy-2: #0d1f3d;
  --q-navy-3: #122a52;
  --q-gold: #d6b25e;
  --q-gold-soft: #e8c878;
  --q-gold-ink: #5c4a1f;

  /* Dark surface text */
  --q-ink-dark: #f4f0e6;
  --q-muted-dark: #9aa8bf;
  --q-line-dark: rgba(214, 178, 94, 0.22);

  /* Light surface text */
  --q-ink-light: #0b1728;
  --q-muted-light: #4a5565;
  --q-line-light: rgba(11, 23, 40, 0.12);
  --q-paper: #ffffff;
  --q-paper-soft: #f5f6f8;
  --q-paper-warm: #faf9f7;

  /* Status */
  --q-ok: #1f7a4d;
  --q-ok-bg: #e8f6ee;
  --q-warn: #8a5a10;
  --q-warn-bg: #fbf3e0;
  --q-danger: #a33a3a;
  --q-danger-bg: #fceeee;
  --q-info: #1e4a7a;
  --q-info-bg: #eaf1f8;

  /* Layout */
  --q-shell: 1120px;
  --q-shell-narrow: 720px;
  --q-radius: 16px;
  --q-radius-sm: 10px;
  --q-radius-lg: 24px;
  --q-space-1: 8px;
  --q-space-2: 12px;
  --q-space-3: 16px;
  --q-space-4: 24px;
  --q-space-5: 32px;
  --q-space-6: 48px;
  --q-space-7: 64px;
  --q-touch: 44px;

  /* Type */
  --q-font: "Segoe UI", Manrope, system-ui, sans-serif;
  --q-font-display: "Segoe UI", Manrope, system-ui, sans-serif;
  --q-title: clamp(1.75rem, 3vw, 2.25rem);
  --q-h2: clamp(1.25rem, 2vw, 1.5rem);
  --q-h3: 1.0625rem;
  --q-body: 1rem;
  --q-small: 0.875rem;
  --q-micro: 0.8125rem;
}

/* ---------- Surface modes ---------- */
.q-surface-dark {
  background: var(--q-deep);
  color: var(--q-ink-dark);
  color-scheme: dark;
  --q-ink: var(--q-ink-dark);
  --q-muted: var(--q-muted-dark);
  --q-line: var(--q-line-dark);
  --q-bg: var(--q-deep);
  --q-panel: var(--q-navy);
}

.q-surface-light,
.surface-light,
.section-light {
  background: var(--q-paper);
  color: var(--q-ink-light);
  color-scheme: light;
  --q-ink: var(--q-ink-light);
  --q-muted: var(--q-muted-light);
  --q-line: var(--q-line-light);
  --q-bg: var(--q-paper);
  --q-panel: var(--q-paper-soft);
  /* Remap legacy tokens used across site.css / student CSS */
  --ink: var(--q-ink-light);
  --muted: var(--q-muted-light);
  --gold-light: var(--q-gold-ink);
  --ink-on-light: var(--q-ink-light);
  --muted-on-light: var(--q-muted-light);
  --accent-on-light: var(--q-gold-ink);
}

/* ---------- Typography ---------- */
.q-page-title {
  margin: 0 0 var(--q-space-2);
  font-family: var(--q-font-display);
  font-size: var(--q-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--q-ink);
}

.q-orientation-video {
  margin: var(--q-space-5) 0 0;
  max-width: 40rem;
}
.q-orientation-video__label {
  margin: 0 0 var(--q-space-2);
  font-size: var(--q-small);
  font-weight: 700;
  color: var(--q-muted, var(--q-muted-light));
}
.q-orientation-video__frame {
  border-radius: var(--q-radius);
  overflow: hidden;
  background: var(--q-navy);
  aspect-ratio: 16 / 9;
}
.q-orientation-video video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}

/* Public form field consistency helpers */
.premium-form .pn-field,
.premium-form > p {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 var(--q-space-3);
}
.premium-form .helptext {
  font-size: var(--q-micro);
  color: var(--q-muted-light);
}
.premium-form .errorlist,
.premium-form .has-error .errorlist {
  color: var(--q-danger);
  font-size: var(--q-small);
}

.q-page-lead {
  margin: 0 0 var(--q-space-4);
  max-width: 42rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--q-muted);
}

.q-section-title {
  margin: 0 0 var(--q-space-2);
  font-size: var(--q-h2);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--q-ink);
}

.q-section-lead {
  margin: 0 0 var(--q-space-4);
  font-size: var(--q-body);
  color: var(--q-muted);
  max-width: 40rem;
}

.q-meta {
  margin: 0;
  font-size: var(--q-small);
  color: var(--q-muted);
}

.q-kicker {
  display: block;
  margin: 0 0 var(--q-space-2);
  font-size: var(--q-micro);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--q-gold-ink);
}

.q-surface-dark .q-kicker {
  color: var(--q-gold-soft);
}

/* ---------- Actions ---------- */
.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--q-touch);
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.q-btn:focus-visible {
  outline: 2px solid var(--q-gold);
  outline-offset: 3px;
}

.q-btn--primary {
  background: var(--q-gold);
  color: var(--q-deep);
  border-color: var(--q-gold);
}

.q-btn--primary:hover {
  background: var(--q-gold-soft);
  border-color: var(--q-gold-soft);
  color: var(--q-deep);
}

.q-btn--secondary {
  background: transparent;
  color: var(--q-ink);
  border-color: var(--q-line);
}

.q-btn--secondary:hover {
  border-color: var(--q-gold);
  color: var(--q-ink);
}

.q-btn--quiet {
  background: transparent;
  color: var(--q-muted);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: auto;
  padding: 0.35rem 0.15rem;
  border-radius: 4px;
}

.q-btn--quiet:hover {
  color: var(--q-ink);
}

.q-text-link {
  color: var(--q-gold-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.q-surface-dark .q-text-link {
  color: var(--q-gold-soft);
}

.q-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-2);
  align-items: center;
  margin-top: var(--q-space-3);
}

/* ---------- Status ---------- */
.q-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: var(--q-micro);
  font-weight: 650;
  line-height: 1.2;
  border: 1px solid transparent;
  cursor: default;
  pointer-events: none;
}

.q-badge--ok {
  background: var(--q-ok-bg);
  color: var(--q-ok);
  border-color: rgba(31, 122, 77, 0.18);
}

.q-badge--pending {
  background: var(--q-warn-bg);
  color: var(--q-warn);
  border-color: rgba(138, 90, 16, 0.18);
}

.q-badge--danger {
  background: var(--q-danger-bg);
  color: var(--q-danger);
  border-color: rgba(163, 58, 58, 0.18);
}

.q-badge--neutral {
  background: var(--q-paper-soft);
  color: var(--q-muted-light);
  border-color: var(--q-line-light);
}

.q-surface-dark .q-badge--neutral {
  background: rgba(255, 255, 255, 0.06);
  color: var(--q-muted-dark);
  border-color: var(--q-line-dark);
}

/* ---------- Journey progress (readiness, not application) ---------- */
.q-progress {
  margin: var(--q-space-4) 0 var(--q-space-5);
}

.q-progress__caption {
  margin: 0 0 var(--q-space-2);
  font-size: var(--q-micro);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--q-muted);
}

.q-progress__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--q-space-2) var(--q-space-4);
}

.q-progress__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--q-small);
  color: var(--q-muted);
}

.q-progress__step.is-done {
  color: var(--q-ok);
}

.q-progress__step.is-current {
  color: var(--q-ink);
  font-weight: 650;
}

.q-progress__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
}

.q-progress__step.is-done .q-progress__mark {
  background: var(--q-ok-bg);
  border-color: var(--q-ok);
}

.q-progress__step.is-current .q-progress__mark {
  background: var(--q-gold);
  border-color: var(--q-gold);
  color: var(--q-deep);
}

/* ---------- Major outcome / next action ---------- */
.q-outcome {
  padding: var(--q-space-4) 0;
  border-top: 1px solid var(--q-line);
  border-bottom: 1px solid var(--q-line);
  margin: var(--q-space-4) 0;
}

.q-outcome--hired {
  background: linear-gradient(180deg, rgba(214, 178, 94, 0.12), transparent 80%);
  border-color: rgba(214, 178, 94, 0.35);
  padding: var(--q-space-5) var(--q-space-4);
  border-radius: var(--q-radius);
  border: 1px solid rgba(214, 178, 94, 0.35);
}

.q-outcome__kicker {
  margin: 0 0 6px;
  font-size: var(--q-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--q-gold-ink);
}

.q-outcome h2 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  color: var(--q-ink);
}

.q-next {
  padding: var(--q-space-5) 0 var(--q-space-4);
}

.q-next__eyebrow {
  margin: 0 0 8px;
  font-size: var(--q-micro);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--q-gold-ink);
}

.q-next h2 {
  margin: 0 0 8px;
  font-size: var(--q-h2);
  color: var(--q-ink);
}

.q-next p {
  margin: 0;
  color: var(--q-muted);
  max-width: 40rem;
}

.q-next--waiting {
  opacity: 0.95;
}

.q-note {
  margin: var(--q-space-3) 0 0;
  padding: var(--q-space-3);
  border-radius: var(--q-radius-sm);
  background: var(--q-paper-soft);
  border: 1px solid var(--q-line);
  color: var(--q-muted);
  font-size: var(--q-small);
}

.q-note__label {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--q-ink);
  font-size: var(--q-micro);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- Checklist / empty ---------- */
.q-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.q-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--q-body);
  color: var(--q-ink);
}

.q-checklist li.is-done {
  color: var(--q-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.q-checklist a {
  color: var(--q-gold-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.q-empty {
  padding: var(--q-space-5) 0;
  text-align: left;
}

.q-empty h3 {
  margin: 0 0 8px;
  font-size: var(--q-h3);
  color: var(--q-ink);
}

.q-empty p {
  margin: 0 0 var(--q-space-3);
  color: var(--q-muted);
  max-width: 36rem;
}

/* ---------- App board (filter + stack, not horizontal Kanban) ---------- */
.q-board__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--q-space-4);
}

.q-board__tab {
  min-height: var(--q-touch);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--q-line);
  background: transparent;
  color: var(--q-ink);
  font-weight: 600;
  font-size: var(--q-small);
  cursor: pointer;
}

.q-board__tab.is-active,
.q-board__tab[aria-selected="true"] {
  background: var(--q-navy);
  border-color: var(--q-navy);
  color: var(--q-ink-dark);
}

.q-board__count {
  margin-left: 6px;
  opacity: 0.75;
  font-weight: 500;
}

.q-app-card {
  padding: var(--q-space-3) 0;
  border-bottom: 1px solid var(--q-line);
}

.q-app-card:last-child {
  border-bottom: 0;
}

.q-app-card__role {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--q-ink);
}

.q-app-card__org,
.q-app-card__note,
.q-app-card__meta {
  margin: 0 0 6px;
  font-size: var(--q-small);
  color: var(--q-muted);
}

.q-app-card--milestone .q-app-card__role {
  color: var(--q-gold-ink);
}

/* ---------- Layout primitives ---------- */
.q-shell {
  width: min(calc(100% - 32px), var(--q-shell));
  margin-inline: auto;
}

.q-stack {
  display: grid;
  gap: var(--q-space-5);
}

.q-split {
  display: grid;
  gap: var(--q-space-5);
}

@media (min-width: 860px) {
  .q-split--2 {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

.q-section {
  padding: var(--q-space-4) 0;
  border-top: 1px solid var(--q-line);
}

.q-section:first-child {
  border-top: 0;
}

.q-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--q-space-3);
  align-items: flex-end;
}

.q-disclosure summary {
  cursor: pointer;
  color: var(--q-muted);
  font-size: var(--q-small);
  font-weight: 600;
  list-style: none;
  min-height: var(--q-touch);
  display: inline-flex;
  align-items: center;
}

.q-disclosure summary::-webkit-details-marker {
  display: none;
}

.q-disclosure p {
  margin: 8px 0 0;
  color: var(--q-muted);
  font-size: var(--q-small);
  max-width: 40rem;
}

/* ---------- Help finder ---------- */
.q-help-finder {
  display: grid;
  gap: 0;
}

.q-help-item {
  display: grid;
  gap: 4px;
  padding: var(--q-space-4) 0;
  border-bottom: 1px solid var(--q-line);
  text-decoration: none;
  color: inherit;
}

.q-help-item:hover .q-help-item__title {
  color: var(--q-gold-ink);
}

.q-help-item__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--q-ink);
}

.q-help-item__desc {
  margin: 0;
  font-size: var(--q-small);
  color: var(--q-muted);
}

.q-help-item__cta {
  margin-top: 4px;
  font-size: var(--q-small);
  font-weight: 650;
  color: var(--q-gold-ink);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .q-btn,
  .q-help-item {
    transition: none;
  }
}

/* ---------- Portal self-profile (owner, 14 Aug 2026) ---------- */

/* The way out of a page that opens from any surface. Without it the
   profile page inherits the public chrome, whose logo goes to the
   public site — which on webmail is not where the reader came from
   (owner, 17 Aug 2026). */
.mp-back {
  margin: 0 0 12px;
}

.mp-back__link {
  display: inline-block;
  padding: 6px 2px;
  font-weight: 600;
  text-decoration: none;
}

.mp-back__link:hover,
.mp-back__link:focus {
  text-decoration: underline;
}

.pn-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: start;
}

.pn-profile-card {
  padding: 20px 22px;
  border: 1px solid rgba(214, 178, 94, 0.16);
  border-radius: 14px;
  background: rgba(10, 25, 48, 0.34);
}

.pn-profile-card h2 { margin: 0 0 12px; font-size: 1.05rem; }

.pn-profile-hint { font-size: 0.86rem; color: #9fb0c4; }

.pn-profile-photo-row { margin: 0 0 12px; }

.pn-profile-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(214, 178, 94, 0.45);
}

.pn-profile-photo--empty {
  background: rgba(214, 178, 94, 0.14);
  color: #f0d58a;
  font-size: 2rem;
  font-weight: 700;
}

.pn-profile-card form p { margin: 0 0 10px; }
.pn-profile-card label { display: block; font-size: 0.88rem; margin-bottom: 4px; }
.pn-profile-card input[type="text"],
.pn-profile-card input[type="email"],
.pn-profile-card input[type="password"],
.pn-profile-card input[type="file"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}
.pn-profile-card .helptext { display: block; font-size: 0.78rem; color: #9fb0c4; }
.pn-profile-card ul.errorlist { color: #ff9d9d; font-size: 0.84rem; padding-left: 1rem; }

/* Header identity chip (owner, 14 Aug 2026): email links to the
   profile page; a set photo shows as the avatar.

   Owner follow-on (14 Aug 2026): the public-nav "Verify" utility sat
   on the same pixels as the truncated email because the chip could
   not shrink independently of that last nav item. Photo and email are
   separate flex children with gap; the email truncates on its own
   (min-width: 0). An opaque chip background stops any leftover nav
   paint from showing through. */
.header-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 220px;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
  border-radius: 999px;
  padding: 3px 10px 3px 4px;
  border: 1px solid transparent;
  background: rgba(6, 14, 28, 0.96);
}
.header-profile-chip:hover,
.header-profile-chip:focus-visible {
  border-color: rgba(214, 178, 94, 0.45);
  background: rgba(214, 178, 94, 0.08);
}
.header-profile-chip .header-profile-photo {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(214, 178, 94, 0.5);
}
.header-profile-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(214, 178, 94, 0.16);
  color: #f0d58a;
  font-weight: 700;
  font-size: 0.9rem;
}
.header-identity-text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.header-profile-chip .header-signed-in-as {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}