/* _shared/desktop.css — desktop shell for student LK (pre-Wave-2 redesign).
   Loaded AFTER base.css + sheet.css. Mobile (<1024px) untouched: sidebar hidden,
   bottom tabbar + burger behave as before. All width overrides are gated to ≥1024px.
   Dark theme is automatic — everything is built on tokens.css (incl. [data-theme=dark]). */

:root { --side-w: 248px; --content-max: 1400px; }

/* sidebar is desktop-only; hidden everywhere by default */
.app-side { display: none; }

@media (min-width: 1024px) {
  /* shell → 2-col grid: sidebar | content.
     !important + load-after-sheet.css to beat sheet.css's !important shell rules. */
  .app-shell {
    display: grid !important;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    align-items: start;
  }

  /* body { overflow-x: hidden } из base.css делает body scroll-контейнером и ломает
     position: sticky у сайдбара (он уезжает вместе со страницей). clip не создаёт
     scroll-контейнер, но по-прежнему запрещает горизонтальный скролл. */
  body { overflow-x: clip; }

  /* hide mobile chrome */
  .app-shell .app-tabbar { display: none !important; }      /* sidebar replaces bottom tabs */
  .app-shell .app-top [data-burger-open] { display: none; } /* no burger on desktop */
  .app-shell .app-top .app-top__brand { display: none; }

  /* sidebar — matches the burger menu's editorial language (serif italic + § heads + line icons) */
  .app-side {
    display: flex; flex-direction: column;
    grid-row: 1 / 99; grid-column: 1;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    background: var(--bg-canvas);
    border-right: 1px solid var(--hair);
    padding: 20px 14px 16px;
  }
  .app-side::-webkit-scrollbar { display: none; }
  .app-side { scrollbar-width: none; }

  /* user block (mirrors .menu__user) */
  .app-side__user {
    display: flex; align-items: center; gap: 12px;
    padding: 2px 8px 16px; margin-bottom: 6px;
    border-bottom: 1px solid var(--hair); text-decoration: none;
  }
  .app-side__avatar {
    width: 42px; height: 42px; flex: none;
    border: 1.5px solid var(--accent); border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: 18px; color: var(--accent);
  }
  .app-side__uname { display: block; font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 17px; line-height: 1.05; color: var(--ink); }
  .app-side__uclass { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: none; color: var(--ink-mute); margin-top: 3px; }

  /* group head (mirrors .menu__group-head: § + hairline) */
  .app-side__group { margin-bottom: 10px; }
  .app-side__group-head {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em;
    text-transform: none; color: var(--ink-mute);
    margin: 10px 8px 6px; display: flex; align-items: center; gap: 8px;
  }
  .app-side__group-head::before { content: ''; display: none; color: var(--accent); font-family: var(--font-display); font-style: normal; font-size: 13px; }
  .app-side__group-head::after { content: ''; flex: 1; height: 1px; background: var(--hair); }

  /* item: serif italic (like .menu__item) + line icon */
  .app-side__item {
    display: flex; align-items: center; gap: 11px;
    padding: 7px 10px; border-radius: var(--r-button);
    font-family: var(--font-display); font-style: normal; font-weight: 500;
    font-size: 17px; letter-spacing: -0.005em; line-height: 1.1;
    color: var(--ink-mute); text-decoration: none;
    border-left: 2px solid transparent;
    transition: color var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui), border-color var(--t-fast) var(--ease-ui);
  }
  .app-side__ico { width: 19px; height: 19px; flex: none; stroke: currentColor; stroke-width: 1.5; fill: none; opacity: 0.85; }
  .app-side__item:hover { color: var(--accent); background: var(--bg-soft); }
  .app-side__item.active { color: var(--accent); background: var(--accent-wash); border-left-color: var(--accent); }
  .app-side__item.active .app-side__ico { opacity: 1; }
  .app-side__item .badge { margin-left: auto; font-family: var(--font-mono); font-style: normal; font-size: 9px; letter-spacing: 0.08em; color: var(--ink-mute); }
  .app-side__item .badge.accent { color: var(--accent); }
  .app-side__spacer { flex: 1 1 auto; min-height: 8px; }
  .app-side__item--logout {
    font-family: var(--font-mono); font-style: normal; font-size: 12px;
    text-transform: none; letter-spacing: 0.12em;
    margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--hair); border-radius: 0;
  }
  .app-side__item--logout:hover { color: var(--garnet); background: transparent; }

  /* top bar slimmer, sits in content column */
  .app-shell .app-top { grid-column: 2; padding: 14px 40px; }
  /* 03.09: шапка ученика — grid (sheet.css), логотип центрируется колонкой, не absolute */
  .app-shell .app-top[data-shell-role="student"] .app-top__brand,
  .app-shell .app-top[data-shell-role="teacher"] .app-top__brand {
    display: inline-flex;
    position: static;
    top: auto;
    left: auto;
    margin: 0;
    transform: none;
  }
  .app-shell .app-top[data-shell-role="student"] .fundament-brand-lockup--top,
  .app-shell .app-top[data-shell-role="teacher"] .fundament-brand-lockup--top {
    width: var(--brand-lockup-desktop-width);
  }

  /* content column: kill per-page narrow caps, fill the screen */
  .app-shell .app-main {
    grid-column: 2;
    max-width: none !important;
    margin: 0 !important;
    width: 100%;
    padding: 26px 40px 64px;
  }

  /* inner container: fluid up to a generous ceiling, centered */
  .lk-content { width: 100%; max-width: var(--content-max); margin: 0 auto; }
  .lk-content.lk-narrow { max-width: 860px; }   /* detail / reading pages */
  .lk-content.lk-form   { max-width: 680px; }   /* forms */

  /* multi-column utilities (opt-in per page) */
  .lk-grid { display: grid; gap: 18px; }
  .lk-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lk-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lk-cols-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .lk-split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 1440px) {
  .app-shell .app-main { padding: 30px 56px 72px; }
}

/* tablet 720–1023px keeps the existing top-tabs shell; only widen content */
@media (min-width: 720px) and (max-width: 1023px) {
  .app-shell .app-main { max-width: none !important; margin: 0 !important; }
  .lk-content { max-width: 960px; margin: 0 auto; }
}

/* ---- shared content primitives (all viewports) — Phase 1 ---- */
.page-head { margin-bottom: 22px; }
.page-head h1 {
  font-family: var(--font-display); font-style: normal; font-weight: 500;
  font-size: clamp(34px, 6vw, 52px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 0 0 6px; color: var(--ink);
}
.page-head h1 em { color: var(--accent); }
.page-head .eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: none; color: var(--ink-mute); margin-bottom: 8px;
}
.lk-card {
  background: var(--bg-canvas); border: 1px solid var(--hair);
  border-radius: var(--r-card); padding: 20px;
}
@media (min-width: 1024px) {
  .page-head h1 { font-size: clamp(40px, 3.4vw, 56px); }
}