/* ============================================================
   EIA — Page-specific layouts (login / home / onboarding)
   ============================================================ */

/* ---------- shared shell ---------- */
.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4);
}
@media (min-width: 768px) { .main { padding: var(--space-7) var(--space-5); } }

.section + .section { margin-top: var(--space-7); }

/* dashboard shell — sidebar + main column */
.shell--with-sidebar {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  flex-direction: row;
  align-items: stretch;
  min-height: 100dvh;
}
.shell--with-sidebar > .app-sidebar { grid-column: 1; }
.shell--with-sidebar > .shell__col {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.shell--with-sidebar .main {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--space-5) var(--space-5);
}
@media (min-width: 768px) {
  .shell--with-sidebar .main { padding: var(--space-6) var(--space-6); }
}
@media (max-width: 1023px) {
  .shell--with-sidebar { grid-template-columns: 1fr; }
  .shell--with-sidebar > .app-sidebar { grid-column: 1; }
  .shell--with-sidebar > .shell__col { grid-column: 1; }
  .shell--with-sidebar .main { padding: var(--space-4); }
}

/* ============================================================
   /index.html — Login
   ============================================================ */
.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5) var(--space-4);
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}
.auth::before {
  content: "";
  position: absolute;
  inset: -200px 0 auto 0;
  height: 480px;
  background:
    radial-gradient(720px 360px at 50% 0%, var(--c-accent-soft), transparent 60%);
  opacity: 0.7;
  pointer-events: none;
}
.auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--c-surface-elev);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--sh-3);
  position: relative;
  z-index: 1;
}
@media (max-width: 480px) {
  .auth__card { padding: var(--space-5) var(--space-4); border-radius: var(--r-lg); }
}

.auth__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.auth__title {
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  line-height: 1.2;
}
.auth__subtitle {
  text-align: center;
  color: var(--c-fg-muted);
  font-size: var(--fs-body);
  margin: var(--space-1) 0 0 0;
  line-height: 1.5;
}

.auth__step { display: flex; flex-direction: column; gap: var(--space-4); }
.auth__step[hidden] { display: none; }
.auth__hint {
  font-size: var(--fs-caption);
  color: var(--c-fg-muted);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}
.auth__hint strong {
  color: var(--c-fg);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--c-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
}
.auth__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-1); }
.auth__back { text-align: center; margin: var(--space-1) 0 0 0; font-size: var(--fs-caption); }

/* ============================================================
   /home.html — Dashboard
   ============================================================ */
.dashboard { display: flex; flex-direction: column; gap: var(--space-5); }
.dashboard__row {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: var(--space-3);
}
.dashboard__row--split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-3);
}
@media (max-width: 1100px) {
  .dashboard__row,
  .dashboard__row--split { grid-template-columns: 1fr; }
}
.dashboard__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.dashboard__section-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--c-fg);
}
.dashboard__section-meta {
  font-size: var(--fs-caption);
  color: var(--c-fg-muted);
}

/* --- static-percentage helpers (avoids inline style attributes) --- */
.skill__bar-fill[data-pct="54"] { width: 54%; }
.skill__bar-fill[data-pct="59"] { width: 59%; }
.skill__bar-fill[data-pct="62"] { width: 62%; }
.skill__bar-fill[data-pct="68"] { width: 68%; }
.skill__bar-fill[data-pct="71"] { width: 71%; }
.skill__bar-fill[data-pct="73"] { width: 73%; }
.skill__bar-target[data-target="65"] { left: 65%; }
.progress-track__fill[data-pct="47"] { width: 47%; }

.welcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}
.welcome__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--c-fg-muted);
  font-weight: 600;
}
.welcome__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}
.welcome__title {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  margin: var(--space-1) 0 0 0;
}
.welcome__title em { font-style: normal; color: var(--c-accent); }
.welcome__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--c-fg-muted);
  font-size: var(--fs-body);
  margin-top: var(--space-2);
}
.welcome__meta-strong {
  color: var(--c-fg);
  font-weight: 500;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}
.welcome__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-fg-subtle);
}

.menu__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.menu__title { font-size: var(--fs-h3); font-weight: 600; margin: 0; letter-spacing: var(--tracking-tight); }
.menu__count { font-size: var(--fs-caption); color: var(--c-fg-muted); font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
@media (min-width: 768px) { .feature-grid { gap: var(--space-4); } }

.feature {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--space-4);
  position: relative;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  overflow: hidden;
}
.feature::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.feature:not(.feature--disabled):hover {
  border-color: var(--c-border-strong);
  transform: translateY(-1px);
}
.feature:not(.feature--disabled):hover::after { opacity: 1; }
.feature--disabled { background: var(--c-surface-2); cursor: not-allowed; }

.feature__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.feature__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-accent-soft-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}
.feature--disabled .feature__icon {
  background: var(--c-surface);
  color: var(--c-fg-subtle);
  border: 1px solid var(--c-border);
}

.feature__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--space-1) 0;
  color: var(--c-fg);
  letter-spacing: -0.005em;
}
.feature__desc {
  font-size: var(--fs-caption);
  color: var(--c-fg-muted);
  margin: 0;
  line-height: 1.55;
}
.feature--disabled .feature__title { color: var(--c-fg-muted); }

/* ============================================================
   /onboarding.html — Mode selection
   ============================================================ */
.onb {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
}
.onb::before {
  content: "";
  position: absolute;
  inset: -200px 0 auto 0;
  height: 480px;
  background:
    radial-gradient(720px 360px at 50% 0%, var(--c-accent-soft), transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}
.onb__container { width: 100%; max-width: 920px; position: relative; z-index: 1; }
.onb__head {
  text-align: center;
  margin-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.onb__steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
  color: var(--c-fg-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 600;
  margin: 0;
}
.onb__steps strong { color: var(--c-accent); font-weight: 600; }
.onb__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  margin: 0;
  line-height: 1.15;
}
.onb__subtitle {
  color: var(--c-fg-muted);
  font-size: var(--fs-body-lg);
  margin: 0;
  max-width: 560px;
  line-height: 1.55;
}

.mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 720px) {
  .mode-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
}
@media (min-width: 960px) {
  .mode-grid { gap: var(--space-4); }
}

.mode {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
  position: relative;
  min-height: 180px;
}
.mode:hover {
  border-color: var(--c-border-strong);
  transform: translateY(-2px);
  background: var(--c-surface-elev);
  box-shadow: var(--sh-3);
}
.mode[aria-checked="true"] {
  border-color: var(--c-accent);
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-accent), var(--sh-3);
}
.mode[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.mode__icon { font-size: 32px; line-height: 1; }
.mode__label {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--c-fg);
}
.mode__desc {
  font-size: var(--fs-caption);
  color: var(--c-fg-muted);
  margin: 0;
  line-height: 1.55;
}

.onb__actions {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}