/* ============================================================
   OS app shell — turns the static artboards into a live,
   responsive LMS. Layers on top of screens.css.
   ============================================================ */
html, body { margin: 0; background: var(--paper); }
#root { min-height: 100vh; }

/* the prototype frame was a fixed 1440 artboard — make it fluid */
.os-app .os-frame { width: 100%; min-height: 100vh; overflow: visible; }
.os-app .os-login { width: 100%; min-height: 100vh; align-items: flex-start; overflow-y: auto; padding: 56px 0; box-sizing: border-box; }

/* sticky chrome, scrolling main */
.os-app .os-sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
.os-app .os-rail    { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }

/* clickable nav */
.os-app .os-nav-item { transition: background .12s, color .12s; }
.os-app .os-nav-item:not(.active):hover { background: var(--ink-04); color: var(--ink); }
.os-app .os-nav-item:not(.active):hover .ic { color: var(--ink-72); }

/* material rows / cards as real links */
.os-app a.os-mat-row, .os-app a.os-mat-card { text-decoration: none; color: inherit; transition: background .12s, border-color .12s, transform .12s; }
.os-app a.os-mat-row:hover { background: var(--ink-04); }
.os-app a.os-mat-card:hover { border-color: var(--ink-40); transform: translateY(-2px); }
.os-app .os-mat-row.soon, .os-app .os-mat-card.soon { opacity: .62; }
.os-app .os-mat-row.soon { cursor: default; }
.os-app .os-status { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 5px; }
.os-app .os-status.live { color: #1c9d5b; }
.os-app .os-status.soon { color: var(--ink-40); }

/* generic clickable affordance */
.os-app .os-clickable { cursor: pointer; }

/* portraits: anchor to top so heads aren't cropped */
.os-app .os-fac-card .ph { object-position: center top; }
.os-app .os-rail .os-card img { object-position: center top; }
.os-app .av { object-position: center top; }

/* responsive content grids (cards / faculty) — were fixed multi-col inline */
.os-app .os-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.os-app .os-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.os-app .os-main { min-width: 0; }                 /* let flex child shrink, no overflow */
.os-app .os-content > * { min-width: 0; }

/* working search field in the knowledge topbar */
.os-app .os-search.live { display: inline-flex; align-items: center; gap: 8px; cursor: text; }
.os-app .os-search-input {
  border: 0; outline: none; background: transparent; flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink);
}
.os-app .os-search-input::placeholder { color: var(--ink-40); }
.os-app .os-search-clear { cursor: pointer; color: var(--ink-40); font-size: 17px; line-height: 1; padding: 0 2px; }
.os-app .os-search-clear:hover { color: var(--ink); }

/* ---- login: real password field ---------------------------- */
.os-login-form { display: flex; flex-direction: column; gap: 12px; }
.os-login-input {
  height: 50px; width: 100%; border: 1px solid var(--ink-12); border-radius: var(--r-sm);
  padding: 0 16px; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--paper); outline: none; transition: border-color .15s, box-shadow .15s;
}
.os-login-input::placeholder { color: var(--ink-40); }
.os-login-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,62,244,.12); }
.os-login-err {
  font-size: 13px; color: #a01a59; background: rgba(213,31,117,.06);
  border: 1px solid rgba(213,31,117,.25); border-radius: 10px; padding: 9px 13px; display: none;
}
.os-login-err.show { display: block; }

/* logout chip in sidebar foot */
.os-logout { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-40); cursor: pointer; padding: 4px 2px; }
.os-logout:hover { color: var(--ink); }

/* ---- responsive -------------------------------------------- */
@media (max-width: 1240px) {
  .os-app .os-rail { display: none; }
}
@media (max-width: 1024px) {
  .os-app .os-content { padding: 24px 20px; gap: 22px; }
  .os-app .os-h1 { font-size: 30px; }
}
@media (max-width: 820px) {
  .os-app .os-sidebar {
    position: static; height: auto; width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 12px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--ink-08);
  }
  .os-app .os-frame { flex-direction: column; }
  .os-app .os-sidebar .os-search, .os-app .os-side-foot { display: none; }
  .os-app .os-grid-2, .os-app .os-grid-3 { grid-template-columns: 1fr; }
  .os-app .os-ink .holo { width: 150px !important; right: -30px !important; opacity: .5 !important; }
  .os-app .os-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; }
  .os-app .os-nav-group { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .os-app .os-nav-label { display: none; }
  .os-app .os-nav-item.sub { display: none; }
  .os-app .os-nav-item { height: 32px; }
  .os-app .os-mat-row { grid-template-columns: 56px 1fr 18px; }
  .os-app .os-mat-row .auth, .os-app .os-mat-row > div:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .os-app .os-login-card { width: 100%; padding: 0 24px; }
  .os-app .os-content { padding: 18px 14px; }
  .os-app .os-topbar { padding: 0 16px; }
  .os-app .t-act { display: none; }
  .os-app .os-ink .holo { display: none; }          /* decorative ring — drop on phones */
  .os-app .os-ink { padding: 22px !important; }
  .os-app .os-frame { overflow-x: hidden; }
}

/* ---- knowledge base: topic chips, tier chip, track sections ---- */
.os-app .os-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.os-app .os-chips button {
  font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer;
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--ink-12); background: transparent; color: var(--ink-55);
  transition: background .12s, color .12s, border-color .12s;
}
.os-app .os-chips button:hover { border-color: var(--ink-40); color: var(--ink); }
.os-app .os-chips button.on { background: var(--ink-04); border-color: var(--ink); color: var(--ink); font-weight: 600; }

.os-app .os-tier {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  margin-left: 8px; padding: 2px 7px; border-radius: var(--r-pill);
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border: 1px solid rgba(213,31,117,.24); color: var(--magenta); background: rgba(213,31,117,.07);
}
.os-app .os-tier.company { border-color: rgba(42,62,244,.24); color: var(--blue); background: rgba(42,62,244,.07); }

.os-app .os-track-sec { display: flex; flex-direction: column; gap: 12px; }
.os-app .os-track-sec + .os-track-sec { margin-top: 8px; }
.os-app .os-track-head { display: flex; align-items: center; gap: 13px; }
.os-app .os-track-head .n {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px; color: var(--paper); background: var(--ink);
}
.os-app .os-track-head .t { font-size: 15px; font-weight: 600; line-height: 1.2; }
.os-app .os-track-head .d { font-size: 12.5px; color: var(--ink-40); margin-top: 2px; }
.os-app .os-track-head .c { margin-left: auto; font-size: 13px; color: var(--ink-40); }

.os-app .os-row-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.os-app .os-row-tags .os-tag {
  font-size: 10.5px; line-height: 1.3; color: var(--ink-55); cursor: pointer;
  background: var(--ink-04); border: 1px solid var(--ink-08); border-radius: 5px; padding: 2px 7px;
  transition: background .12s, color .12s, border-color .12s;
}
.os-app .os-row-tags .os-tag:hover { background: transparent; border-color: var(--ink-40); color: var(--ink); }
.os-app .os-row-tags .os-tag.md {
  display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
  color: var(--blue); border-color: rgba(42,62,244,.28); background: rgba(42,62,244,.06);
}
.os-app .os-row-tags .os-tag.md:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.os-app .os-row-tags .os-tag.md svg { width: 12px; height: 12px; }

/* ============================================================
   Trajectory — onboarding quiz + personalized roadmap
   ============================================================ */

/* intro: level strip inside the dark hero */
.os-app .os-tj-levelrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.os-app .os-tj-arrow { color: var(--paper-40); font-size: 13px; }
.os-app .os-tj-levelchip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 12px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 13px; line-height: 1;
  color: var(--paper-72); border: 1px solid var(--paper-16); background: var(--paper-10);
}
.os-app .os-tj-levelchip.on { color: #000; background: #fff; border-color: #fff; font-weight: 600; }
.os-app .os-tj-levelchip.done { color: var(--paper); border-color: var(--paper-40); }

/* intro: how-it-works steps */
.os-app .os-tj-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.os-app .os-tj-step { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--ink-08); border-radius: var(--r-md); background: var(--paper); }
.os-app .os-tj-step .num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; background: var(--ink-04);
  border: 1px solid var(--ink-12); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; color: var(--ink);
}
.os-app .os-tj-step .t { font-size: 14px; font-weight: 600; line-height: 1.25; }
.os-app .os-tj-step .d { font-size: 12.5px; color: var(--ink-40); margin-top: 4px; line-height: 1.4; }

/* quiz */
.os-app .os-tj-quizhead { display: flex; align-items: center; justify-content: space-between; }
.os-app .os-tj-backlink { font-size: 13px; color: var(--ink-40); }
.os-app .os-tj-backlink:hover { color: var(--ink); }
.os-app .os-tj-counter { font-size: 12.5px; color: var(--ink-40); font-family: var(--font-display); }
.os-app .os-tj-progress { height: 4px; border-radius: 2px; background: var(--ink-08); overflow: hidden; }
.os-app .os-tj-progress > span { display: block; height: 100%; background: var(--grad-cool); border-radius: 2px; transition: width .25s ease; }

.os-app .os-tj-opts { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.os-app .os-tj-opt {
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 13px; padding: 16px 18px;
  border: 1px solid var(--ink-12); border-radius: var(--r-md); background: var(--paper);
  transition: border-color .12s, background .12s, transform .08s;
}
.os-app .os-tj-opt:hover { border-color: var(--ink); background: var(--ink-04); }
.os-app .os-tj-opt:active { transform: scale(.995); }
.os-app .os-tj-opt.on { border-color: var(--ink); background: var(--ink-04); }
.os-app .os-tj-opt .dot { width: 16px; height: 16px; flex-shrink: 0; border-radius: 999px; border: 1.5px solid var(--ink-40); }
.os-app .os-tj-opt:hover .dot, .os-app .os-tj-opt.on .dot { border-color: var(--blue); box-shadow: inset 0 0 0 3px var(--blue); }
.os-app .os-tj-opt .lbl { flex: 1; font-size: 14.5px; line-height: 1.35; }
.os-app .os-tj-opt .go { color: var(--ink-12); display: flex; }
.os-app .os-tj-opt:hover .go { color: var(--ink-40); }

/* multi-select (goals) — square check instead of radio */
.os-app .os-tj-opt.multi .box {
  width: 18px; height: 18px; flex-shrink: 0; border-radius: 6px; border: 1.5px solid var(--ink-40);
  display: flex; align-items: center; justify-content: center; color: #fff; transition: background .12s, border-color .12s;
}
.os-app .os-tj-opt.multi .box svg { width: 13px; height: 13px; }
.os-app .os-tj-opt.multi.on .box { background: var(--blue); border-color: var(--blue); }
.os-app .os-tj-opt.multi:hover .box { border-color: var(--blue); box-shadow: none; }
.os-app .os-tj-opt.multi.on { border-color: var(--blue); background: rgba(42,62,244,.05); }

/* result: roadmap */
.os-app .os-tj-road { display: flex; flex-direction: column; }
.os-app .os-tj-stage { display: flex; gap: 16px; }
.os-app .os-tj-stage .rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 32px; }
.os-app .os-tj-stage .rail::after { content: ''; flex: 1; width: 2px; background: var(--ink-08); margin: 6px 0; }
.os-app .os-tj-stage:last-child .rail::after { display: none; }
.os-app .os-tj-stage .node {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 14px;
  color: var(--ink-40); background: var(--paper); border: 1.5px solid var(--ink-12);
}
.os-app .os-tj-stage.prior .node { color: var(--ink-40); border-color: var(--ink-12); background: var(--paper); }
.os-app .os-tj-stage.start .node { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.os-app .os-tj-stage.next  .node { color: var(--ink-40); border-color: var(--ink-12); background: var(--paper); }
.os-app .os-tj-stage .body { flex: 1; min-width: 0; padding-bottom: 26px; }
.os-app .os-tj-stage:last-child .body { padding-bottom: 0; }
.os-app .os-tj-stage .body .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.os-app .os-tj-stage .body .ttl { font-size: 17px; font-weight: 600; line-height: 1.2; }
.os-app .os-tj-stage .body .dsc { font-size: 13px; color: var(--ink-40); margin-top: 3px; }

.os-app .os-tj-statetag {
  flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill); border: 1px solid var(--ink-12); color: var(--ink-40); background: var(--paper);
}
.os-app .os-tj-statetag.start { color: var(--paper); background: var(--ink); border-color: var(--ink); }

/* goal-matched material picks: stage chip + relevance star */
.os-app .os-tj-stagechip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600;
  color: var(--blue); border: 1px solid rgba(42,62,244,.24); background: rgba(42,62,244,.06);
  border-radius: var(--r-pill); padding: 2px 8px;
}
.os-app .os-tj-stagechip svg { width: 11px; height: 11px; }
.os-app .os-tj-mat .rec { color: var(--blue); display: flex; flex-shrink: 0; }
.os-app .os-tj-mat .rec svg { width: 13px; height: 13px; }
.os-app .os-tj-mat.rec .mt { font-weight: 600; }
.os-app .os-tj-stage.start .os-tj-mats { border-color: var(--ink); box-shadow: 0 6px 22px rgba(0,0,0,.06); }

/* result: material rows inside a stage */
.os-app .os-tj-mats {
  border: 1px solid var(--ink-08); border-radius: var(--r-md); overflow: hidden; background: var(--paper);
}
.os-app .os-tj-stage.start .os-tj-mats { border-color: var(--ink); box-shadow: 0 6px 22px rgba(0,0,0,.06); }
.os-app .os-tj-mat { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; transition: background .12s; }
.os-app .os-tj-mat + .os-tj-mat { border-top: 1px solid var(--ink-08); }
.os-app a.os-tj-mat:hover { background: var(--ink-04); }
.os-app .os-tj-mat .mk { color: var(--ink-40); display: flex; flex-shrink: 0; }
.os-app .os-tj-mat .mt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.os-app .os-tj-mat .mr { font-size: 12px; color: var(--ink-40); font-family: var(--font-display); flex-shrink: 0; }
.os-app .os-tj-mat .mc { color: var(--ink-12); display: flex; flex-shrink: 0; width: 16px; }
.os-app .os-tj-mat.soon { opacity: .6; }
.os-app .os-tj-mat.locked { opacity: .72; cursor: default; }
.os-app .os-tj-mat.locked .mc { color: var(--magenta); }
.os-app .os-tj-empty { padding: 16px; font-size: 13px; color: var(--ink-40); text-align: center; }

/* home CTA banner → trajectory */
.os-app .os-tj-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 20px; border: 1px solid var(--ink-12); border-radius: var(--r-md);
  background: var(--ink-04); position: relative; overflow: hidden;
  transition: border-color .12s, background .12s;
}
.os-app .os-tj-cta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-cool); }
.os-app .os-tj-cta:hover { border-color: var(--ink-40); background: var(--ink-08); }
.os-app .os-tj-cta .ic {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.os-app .os-tj-cta .tx { flex: 1 1 240px; min-width: 0; }
.os-app .os-tj-cta .tx .t { font-size: 15.5px; font-weight: 600; line-height: 1.2; }
.os-app .os-tj-cta .tx .d { font-size: 13.5px; color: var(--ink-55); margin-top: 3px; line-height: 1.4; }
.os-app .os-tj-cta .os-btn { flex-shrink: 0; }

@media (max-width: 820px) {
  .os-app .os-tj-steps { grid-template-columns: 1fr; }
  .os-app .os-tj-mat .mr { display: none; }
  .os-app .os-tj-cta .os-btn { width: 100%; justify-content: center; }
}