/* ==========================================================================
   TalentVare BRD mocks — candidate portal shell
   --------------------------------------------------------------------------
   The portal is for people who do NOT work here: no module tabs, no sidebar,
   no app switcher, no user menu, no /me. Just a branded header and one column.

   It DOES load shell.css first, deliberately. What differs from the internal
   app is the navigation, not the visual language — a candidate's first contact
   with Transvare should look like Transvare. So tokens, buttons, fields,
   badges, callouts and the letter preview all come from shell.css; this file
   only adds the portal's own chrome and the few controls unique to it.

   shell.js is loaded too, purely for the icon sprite and the step/dialog
   helpers. Its navbar and sidebar builders no-op when their slots are absent.
   ========================================================================== */

/* ---- Page shell -------------------------------------------------------- */
.portal {
  display: flex; flex-direction: column; min-height: 100svh;
  background: color-mix(in oklab, var(--muted) 40%, var(--background));
}
.dark .portal { background: var(--background); }

.portal-header {
  flex-shrink: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background: color-mix(in oklab, var(--background) 85%, transparent);
  backdrop-filter: blur(8px);
}
.portal-header-inner {
  display: flex; align-items: center; gap: 1rem;
  max-width: 60rem; margin: 0 auto;
  padding: 0.875rem 1.25rem;
}
.portal-logo img { height: 1.625rem; width: auto; max-width: 140px; object-fit: contain; }
.dark .portal-logo img { filter: brightness(0) invert(1); }
.portal-tag {
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
  font-size: 0.6875rem; font-weight: 500; color: var(--muted-foreground);
}
.portal-header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

.portal-who { display: flex; align-items: center; gap: 0.5rem; font-size: 0.6875rem; color: var(--muted-foreground); }
.portal-who .avatar { width: 1.5rem; height: 1.5rem; font-size: 0.5625rem; }

.portal-main {
  flex: 1;
  width: 100%; max-width: 60rem; margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}
.portal-main--narrow { max-width: 30rem; }

.portal-footer {
  flex-shrink: 0;
  border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  padding: 1rem 1.25rem;
}
.portal-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  max-width: 60rem; margin: 0 auto;
  font-size: 0.625rem; color: var(--muted-foreground);
}
.portal-footer-inner a:hover { text-decoration: underline; }
.portal-footer-sep { margin-left: auto; }

/* ---- Cards ------------------------------------------------------------- */
.portal-card {
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--card);
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
}
.portal-card-head {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.5rem 1.5rem 0;
}
.portal-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.portal-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem;
}
.portal-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.75rem; }
.portal-lead { font-size: 0.8125rem; line-height: 1.375rem; color: var(--muted-foreground); }

.portal-intro { margin-bottom: 1.25rem; }
.portal-intro .portal-title { font-size: 1.5rem; line-height: 2rem; }

/* ---- Horizontal stepper (resume builder) ------------------------------- */
.steps {
  display: flex; align-items: center; gap: 0;
  overflow-x: auto;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--muted) 35%, transparent);
}
.dark .steps { background: color-mix(in oklab, var(--muted) 25%, transparent); }
.step {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.6875rem; font-weight: 500; white-space: nowrap;
  color: var(--muted-foreground);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.step:hover { background: color-mix(in oklab, var(--background) 70%, transparent); }
.step[data-active] { color: var(--primary); }
.dark .step[data-active] { color: var(--primary-foreground); }
.step-num {
  display: flex; width: 1.375rem; height: 1.375rem; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
  color: var(--muted-foreground);
  font-size: 0.625rem; font-weight: 700;
}
.step[data-active] .step-num { background: var(--primary); color: var(--primary-foreground); }
.step-num--done { background: var(--ok-bg); color: var(--ok-fg); }
.step-num--done svg { width: 0.6875rem; height: 0.6875rem; }
.step-line { flex: 1; min-width: 0.75rem; height: 1px; background: var(--border); }
.step-label { display: none; }
@media (min-width: 768px) { .step-label { display: inline; } }

/* ---- OTP input --------------------------------------------------------- */
.otp { display: flex; gap: 0.5rem; }
.otp input {
  width: 2.75rem; height: 3rem;
  border: 1px solid var(--input); border-radius: var(--radius-lg);
  background: var(--background); color: var(--foreground);
  text-align: center;
  font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.otp input:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.25);
}
.dark .otp input { background: color-mix(in oklab, var(--input) 30%, transparent); }

/* ---- Skill level scale ------------------------------------------------- */
/* Candidates are self-rating, so the numbers carry word labels. A bare 1–5
   means nothing to someone outside the firm. */
.lvl-scale { display: flex; gap: 0.375rem; }
.lvl-scale button {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.1875rem;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: all 0.15s ease;
}
.lvl-scale button:hover { background: var(--muted); }
.lvl-scale .n { font-size: 0.875rem; font-weight: 700; }
.lvl-scale .w { font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.lvl-scale button[data-active] {
  border-color: var(--primary);
  background: rgb(var(--primary-rgb) / 0.08);
  color: var(--primary);
}
.dark .lvl-scale button[data-active] { background: rgb(var(--primary-rgb) / 0.28); color: var(--primary-foreground); }
.lvl-scale button[data-active] .w { color: inherit; }

/* A saved skill row */
.skill-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.skill-row-name { min-width: 0; flex: 1; font-size: 0.8125rem; font-weight: 500; }
.skill-row-lvl { font-size: 0.6875rem; color: var(--muted-foreground); }

/* ---- Repeatable entry block -------------------------------------------- */
.entry {
  flex-shrink: 0;
  padding: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--muted) 35%, transparent);
}
.entry-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.875rem; }
.entry-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }

/* ---- Offer page -------------------------------------------------------- */
.offer-hero {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-2xl);
  border: 1px solid rgb(var(--primary-rgb) / 0.2);
  background: var(--hero-gradient);
  box-shadow: var(--hero-shadow);
}
@media (min-width: 768px) {
  .offer-hero { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
}
.offer-hero-title { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.875rem; }
.offer-hero-sub { margin-top: 0.25rem; font-size: 0.8125rem; color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.dark .offer-hero-sub { color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.offer-hero-actions { display: flex; flex-shrink: 0; gap: 0.5rem; }

.terms-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .terms-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.term-tile {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
}
.term-label { font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.term-value { font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; }
.term-foot { font-size: 0.625rem; color: var(--muted-foreground); }

.expiry {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background: var(--warn-bg); color: var(--warn-fg);
  font-size: 0.6875rem; font-weight: 600;
}
.expiry svg { width: 0.75rem; height: 0.75rem; }

/* ---- Terminal / error states ------------------------------------------ */
.state-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.875rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.state-icon {
  display: flex; width: 3.5rem; height: 3.5rem;
  align-items: center; justify-content: center;
  border-radius: 9999px;
}
.state-icon svg { width: 1.5rem; height: 1.5rem; }
.state-icon--warn { background: var(--warn-bg); color: var(--warn-fg); }
.state-icon--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.state-icon--info { background: var(--info-bg); color: var(--info-fg); }
.state-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.state-text { max-width: 26rem; font-size: 0.8125rem; line-height: 1.375rem; color: var(--muted-foreground); }

/* ---- Mock-only state switcher ----------------------------------------- */
/* Lets a reviewer jump between states that a real candidate would only ever
   reach one of. Not part of the design. */
.mock-states {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem;
  max-width: 60rem; margin: 0 auto 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed color-mix(in oklab, var(--warn-fg) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--warn-bg) 45%, transparent);
  font-size: 0.625rem; color: var(--warn-fg);
}
.mock-states button {
  padding: 0.1875rem 0.5rem;
  border: 1px solid color-mix(in oklab, var(--warn-fg) 35%, transparent);
  border-radius: var(--radius-sm);
  font-size: 0.625rem; font-weight: 600;
}
.mock-states button[data-active] { background: var(--warn-fg); color: var(--background); }