/* ============================================================
   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 12px; }
.pn-profile-card label { display: block; font-size: 0.88rem; margin-bottom: 4px; }

/* Three inline-flex buttons sat in a bare <p> with nothing but
   whitespace between them, so they touched on a wide screen and
   overlapped once they wrapped (owner, 22 Aug 2026: "is ke button
   overlapped hain all 3"). A row of actions is a row, not a paragraph. */
.pn-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
}

/* A submit button pressed against the last field reads as part of it.
   Every card here ends in one. */
.pn-profile-card form .pn-btn { margin-top: 6px; }

/* Selects, textareas and the typed inputs a form can carry were left
   out of the rule below, so any field that was not text/email/password/
   file rendered as a raw browser control among styled ones -- which is
   what made the stack look like it had no design at all. */
.pn-profile-card input[type="text"],
.pn-profile-card input[type="email"],
.pn-profile-card input[type="password"],
.pn-profile-card input[type="tel"],
.pn-profile-card input[type="url"],
.pn-profile-card input[type="number"],
.pn-profile-card input[type="date"],
.pn-profile-card select,
.pn-profile-card textarea,
.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;
}


/* ---------------------------------------------------------------------
   The shared profile page, on the employee portal host.

   /profile/ is host-neutral and every portal uses it — that is the whole
   point, and it is why the employee portal links it instead of growing a
   second copy of a password form. But it renders in the public site's
   dark theme, and the portal around it is light, so following "change my
   photo" jumped between two products (owner, 22 Aug 2026).

   Re-skinned here rather than re-templated: the markup and the logic
   stay one thing, and only this host sees these colours. Scoped to
   body.pt-shell, so no other portal is touched.
   --------------------------------------------------------------------- */

body.pt-shell {
  background: #f5f7fa;
  color: #14202e;
}

body.pt-shell .su-page,
body.pt-shell .su-hub {
  background: transparent;
  color: inherit;
}

body.pt-shell .su-hero h1,
body.pt-shell .su-eyebrow { color: #14202e; }
body.pt-shell .su-eyebrow { opacity: 0.75; }
body.pt-shell .su-lead,
body.pt-shell .pn-profile-hint { color: #5b6b7d; }

body.pt-shell .pn-profile-card {
  background: #ffffff;
  border-color: #d9dee5;
  color: #14202e;
}

body.pt-shell .pn-profile-card h2 { color: #14202e; }

body.pt-shell .pn-profile-card input[type="text"],
body.pt-shell .pn-profile-card input[type="email"],
body.pt-shell .pn-profile-card input[type="password"],
body.pt-shell .pn-profile-card input[type="tel"],
body.pt-shell .pn-profile-card input[type="url"],
body.pt-shell .pn-profile-card input[type="number"],
body.pt-shell .pn-profile-card input[type="date"],
body.pt-shell .pn-profile-card select,
body.pt-shell .pn-profile-card textarea,
body.pt-shell .pn-profile-card input[type="file"] {
  background: #ffffff;
  border-color: #d9dee5;
  color: #14202e;
}

body.pt-shell .pn-profile-card .helptext { color: #5b6b7d; }
body.pt-shell .pn-profile-photo { border-color: #d9dee5; }
body.pt-shell .pn-profile-photo--empty {
  background: #e7eef6;
  color: #0f4c81;
}

/* The portal's own button, so the two pages press the same way. */
body.pt-shell .pn-btn,
body.pt-shell .su-submit {
  background: #0f4c81;
  border-color: #0f4c81;
  color: #ffffff;
  background-image: none;
}
body.pt-shell .pn-btn-quiet {
  background: #ffffff;
  border-color: #d9dee5;
  color: #14202e;
}

body.pt-shell .mp-back__link { color: #0f4c81; }