/* The staff shell — PROF MAP.
 *
 * One frame for every page a профориентатор works in: an emerald rail on the
 * left, a white board on the right, gold for the section that is open. Each
 * staff page keeps its own content and its own logic; this file only supplies
 * the frame around it, so the cabinet, Career Base, the presentation builder
 * and both maps read as one product rather than five.
 *
 * Everything here is prefixed `pm-`: the pages it wraps already use `.rail`,
 * `.top` and `main` for their own things.
 */

/* The pages under the shell were written dark-first with a light variant.
   Inside the shell the board is always light — the brief is a white board in
   an emerald frame — so their tokens are pinned to that light variant here.
   `html.pm-shell` outranks the pages' own `:root`. */
html.pm-shell{
  --bg:#f5f9f7; --bg-2:#eaf3ee;
  --surface:#ffffff; --surface-2:#f4f9f6; --line:#e2ece7; --line-2:#eef5f1;
  --fg:#0b2f24; --fg-dim:#5d7d72;
  --accent:#0f7a5a; --accent-ink:#ffffff;
  --gold:#a97c1b;
  --ok:#0f7a5a; --warn:#a97c1b; --err:#c62f2f;
  --section:#0f7a5a;
  --shadow:0 1px 2px rgba(6,43,32,.05), 0 10px 26px -16px rgba(6,43,32,.28);

  --pm-rail-w:272px;
  --pm-em-900:#04241c; --pm-em-800:#06392c; --pm-em-700:#0a5741; --pm-em-600:#0f7a5a;
  --pm-em-100:#dff3ea; --pm-em-50:#f0f9f5;
  --pm-gold-400:#e0b64d; --pm-gold-100:#faf0d8;
  --pm-rail-fg:#d3e9df;
  color-scheme:light;
}
html.pm-shell body{
  margin:0;background:#f5f9f7 !important;color:var(--fg);
  font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
}

.pm-frame{display:grid;grid-template-columns:var(--pm-rail-w) minmax(0,1fr);min-height:100vh}

/* ------------------------------------------------------------------ rail */
.pm-rail{
  background:linear-gradient(180deg,#06392c 0%,#04241c 100%);color:var(--pm-rail-fg);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  padding:20px 14px 0;z-index:60;
}
.pm-brand{display:flex;align-items:center;gap:11px;padding:0 6px;text-decoration:none;color:inherit}
.pm-brand svg{width:40px;height:40px;flex:0 0 auto}
.pm-brand b{display:block;font-size:16px;font-weight:800;letter-spacing:.01em;color:#fff;line-height:1.2}
.pm-brand small{display:block;font-size:10px;color:var(--pm-gold-400);font-weight:700;letter-spacing:.14em}

.pm-nav{margin-top:18px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;padding-bottom:8px}
.pm-sep{margin:14px 8px 6px;font-size:10.5px;font-weight:700;letter-spacing:.12em;
  color:rgba(255,255,255,.45);text-transform:uppercase}
.pm-sep:first-child{margin-top:0}

/* Labels wrap rather than clip: "Қызығушылық картасы" must be read whole. */
.pm-item{
  display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;
  padding:9px 12px;border-radius:11px;border:0;background:none;
  color:var(--pm-rail-fg);font:inherit;font-size:14.5px;line-height:1.3;text-align:left;
  text-decoration:none;cursor:pointer;
}
.pm-item .pm-ic{width:19px;height:19px;flex:0 0 auto;opacity:.85}
.pm-item .pm-label{flex:1;min-width:0;white-space:normal;overflow-wrap:normal;word-break:normal}
.pm-item:hover{color:#fff;background:rgba(255,255,255,.08)}
.pm-item:focus-visible{outline:2px solid var(--pm-gold-400);outline-offset:1px}
.pm-item.on{background:var(--pm-gold-400);color:var(--pm-em-900);font-weight:700}
.pm-item.on .pm-ic{opacity:1}
/* Not built yet: said plainly, and not clickable. */
.pm-item.soon{cursor:not-allowed;color:rgba(211,233,223,.55)}
.pm-item.soon:hover{background:none;color:rgba(211,233,223,.55)}
/* Under the label rather than beside it, so the label keeps the whole width. */
.pm-soon{display:block;margin-top:1px;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  color:var(--pm-gold-400);opacity:.8;white-space:nowrap}

.pm-railfoot{margin:6px -14px 0;position:relative;flex:0 0 auto}
.pm-railfoot svg{display:block;width:100%;height:46px}
.pm-railfoot p{margin:0;padding:2px 20px 16px;font-size:12.5px;line-height:1.5;
  color:var(--pm-gold-400);font-style:italic;background:#04241c}

/* ------------------------------------------------------------------ top bar */
.pm-main{min-width:0;display:flex;flex-direction:column}
.pm-top{
  display:flex;align-items:center;gap:14px;padding:14px 28px;
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab,#f5f9f7 90%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
}
.pm-top.scrolled{border-bottom-color:var(--line)}
.pm-spacer{flex:1}

.pm-btn{
  display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:14px;font-weight:650;
  padding:8px 15px;border-radius:12px;cursor:pointer;
  background:#fff;color:var(--fg);border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(6,43,32,.05);
}
.pm-btn[hidden]{display:none}
.pm-btn:hover{border-color:var(--pm-em-600);color:var(--pm-em-600)}
.pm-btn:focus-visible{outline:2px solid var(--pm-em-600);outline-offset:2px}
.pm-btn svg{width:17px;height:17px}
.pm-burger{display:none;padding:8px 10px}

.pm-today{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--fg-dim);line-height:1.35}
.pm-today svg{width:30px;height:30px;color:var(--pm-em-600);flex:0 0 auto}
.pm-today strong{display:block;color:var(--fg);font-size:13.5px}
.pm-role{font-size:12.5px;padding:5px 12px;border-radius:99px;border:1px solid var(--line);
  background:#fff;color:var(--fg-dim);white-space:nowrap}

.pm-profile{position:relative}
.pm-avatar{
  display:inline-flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;
  padding:2px;border-radius:99px;font:inherit;color:var(--fg);
}
.pm-avatar:focus-visible{outline:2px solid var(--pm-em-600);outline-offset:2px}
.pm-avatar .pm-initials{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--pm-em-600);color:#fff;font-weight:800;font-size:14.5px;letter-spacing:.02em;
}
.pm-avatar svg{width:16px;height:16px;color:var(--fg-dim)}
.pm-menu{
  position:absolute;right:0;top:calc(100% + 8px);min-width:250px;z-index:80;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(6,43,32,.35);padding:8px;display:none;
}
.pm-menu.open{display:block}
.pm-menu .pm-who{padding:8px 10px 10px;border-bottom:1px solid var(--line-2,#eef5f1);margin-bottom:6px}
.pm-menu .pm-who b{display:block;font-size:14px}
.pm-menu .pm-who span{display:block;font-size:12.5px;color:var(--fg-dim);overflow-wrap:anywhere}
.pm-menu a,.pm-menu button{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:9px 10px;border-radius:9px;border:0;background:none;font:inherit;font-size:14px;
  color:var(--fg);text-decoration:none;cursor:pointer;text-align:left;
}
.pm-menu a:hover,.pm-menu button:hover{background:var(--pm-em-50)}
.pm-menu svg{width:17px;height:17px;flex:0 0 auto}
.pm-menu .pm-logout{color:var(--err)}
.pm-menu .pm-logout:hover{background:#fdf0f0}

.pm-content{padding:6px 28px 56px;min-width:0;max-width:1480px;width:100%;box-sizing:border-box}

/* The pages' own headers stay for their tabs, without their own logo and
   exit — the shell carries both now. */
html.pm-shell header.top{
  position:static;background:transparent;border:0;padding:0 0 14px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
html.pm-shell header.top .brand,
html.pm-shell header.top #who{display:none}
html.pm-shell header.top:not(:has(nav.main:not(:empty))){display:none}
html.pm-shell .pm-content > main{padding:0;max-width:none;margin:0}
/* The in-page "back" is driven by the shell's own button, so only one shows. */
html.pm-shell .pm-content #back{display:none}

.pm-scrim{display:none}

/* ------------------------------------------------------------------ narrow */
@media (max-width:1100px){
  html.pm-shell{--pm-rail-w:248px}
  .pm-today{display:none}
}
@media (max-width:900px){
  .pm-frame{grid-template-columns:minmax(0,1fr)}
  .pm-rail{
    position:fixed;left:0;top:0;bottom:0;width:min(84vw,300px);height:auto;
    transform:translateX(-102%);transition:transform .22s ease;box-shadow:none;
  }
  html.pm-rail-open .pm-rail{transform:none;box-shadow:12px 0 40px rgba(0,0,0,.25)}
  html.pm-rail-open .pm-scrim{display:block;position:fixed;inset:0;background:rgba(4,36,28,.45);z-index:55}
  html.pm-rail-open body{overflow:hidden}
  .pm-burger{display:inline-flex}
  .pm-top{padding:10px 16px;gap:10px}
  .pm-content{padding:4px 16px 44px}
  .pm-role{display:none}
}
@media (max-width:420px){
  .pm-btn .pm-backlabel{display:none}
}

@media print{
  .pm-rail,.pm-top,.pm-scrim{display:none !important}
  .pm-frame{display:block}
  .pm-content{padding:0;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .pm-rail{transition:none}
}