/* Part of Survival Language — see index.html for load order.
   Sidebar on wide screens, bottom tab bar on phones — same route list either
   way (js/nav.js mounts both DOM nodes at once, CSS just decides which one
   is visible). All colors via var(--...) so themes/dark mode carry through. */

  /* ---- Shared nav-item look (bottom bar default; sidebar overrides below) ---- */
  .nav-item{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:none; color:var(--ink-faint); font-family:inherit; font-size:11px; font-weight:700;
    padding:6px 4px; flex:1; position:relative; border-radius:var(--radius-sm);
  }
  .nav-item svg{ width:22px; height:22px; display:block; }
  .nav-item-glyph.ka{ font-size:19px; line-height:1; font-weight:700; }
  .nav-item.active{ color:var(--accent); }
  .nav-item-icon{ display:flex; align-items:center; justify-content:center; border-radius:999px; transition:background-color .15s ease; }
  /* Scoped to the bottom tab bar only — the sidebar's row-level active tint
     (.side-nav .nav-item.active, below) already does this job on desktop; a
     second pill there would just double up. */
  .tab-nav .nav-item.active .nav-item-icon{
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    padding:3px 15px;
  }
  .nav-badge{
    position:absolute; top:2px; right:calc(50% - 22px); min-width:16px; height:16px; padding:0 4px;
    border-radius:999px; background:var(--error); color:var(--error-ink); font-size:10px; font-weight:800;
    display:flex; align-items:center; justify-content:center; line-height:1;
  }

  /* ---- Bottom tab bar (default: phones/tablets) ---- */
  .tab-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
    background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(10px);
    border-top:1px solid var(--border); padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  body.has-tabnav #app{ padding-bottom:64px; }

  /* ---- Sidebar (hidden by default, becomes the layout on wide screens) ---- */
  .side-nav{ display:none; }

  body.lesson-open .tab-nav, body.lesson-open .side-nav{ display:none !important; }
  body.lesson-open.has-tabnav #app{ padding-bottom:0; }

  @media (min-width:1024px){
    .tab-nav{ display:none; }
    body.has-tabnav #app{ padding-bottom:0; }
    body.has-tabnav{ padding-left:244px; }
    .side-nav{
      display:flex; flex-direction:column; gap:var(--space-1); position:fixed; top:0; left:0; bottom:0; width:244px;
      padding:var(--space-6) var(--space-4); border-right:1px solid var(--border); background:var(--surface); overflow-y:auto; z-index:31;
    }
    .side-nav-brand{
      display:flex; align-items:center; gap:var(--space-3); padding:0 var(--space-2) var(--space-4); font-family:'Unbounded',sans-serif;
      font-size:15px; font-weight:700;
    }
    .side-nav-brand .course-flag{ width:24px; height:16px; }
    .side-nav .nav-item{
      width:100%; box-sizing:border-box; flex:none;
      flex-direction:row; justify-content:flex-start; gap:var(--space-3); padding:var(--space-3); font-size:14px;
      text-align:left; position:relative;
    }
    .side-nav .nav-item svg{ width:20px; height:20px; flex:none; }
    /* The Alphabet route uses a Georgian glyph ("ა") instead of an SVG icon — left
       to its own natural text width it renders narrower than the 20px icon box,
       so every label after it started a few px to the left of the others. Same
       fixed-width box as the SVGs, glyph centered inside it, fixes the alignment. */
    .side-nav .nav-item-glyph{ width:20px; height:20px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
    /* .nav-item-icon (the icon wrapper span added for the bottom-tab active pill,
       above) is also a bare <span> — this rule used to only need to exclude
       .nav-badge/.nav-item-glyph to reach just the label, and silently started
       matching the icon wrapper too once it existed, stretching it to flex:1
       and squashing the whole row (icon shrank, spacing changed). .nav-item-icon
       has its own sizing below; it was never meant to grow like the label. */
    .side-nav .nav-item span:not(.nav-badge):not(.nav-item-glyph):not(.nav-item-icon){ flex:1; }
    .side-nav .nav-item-icon{ flex:none; width:20px; height:20px; }
    .side-nav .nav-item.active{ background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
    .side-nav .nav-item:hover:not(.active){ background:var(--surface-2); }
    .side-nav .nav-badge{ position:static; margin-left:auto; }

    /* ---- Course-progress footer, pinned to the bottom of the sidebar column ---- */
    .side-nav-progress{ margin-top:auto; padding:var(--space-4) var(--space-3) var(--space-1); display:flex; flex-direction:column; gap:var(--space-2); }
    .side-nav-progress-label{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }
    /* Same fix as .region-bar/.month-progress (see screens.css) — a plain
       surface-2-on-surface trough with no border reads as invisible wherever the
       surrounding contrast is already low; a thin --border outline survives that. */
    .side-nav-progress-bar{ height:8px; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
    .side-nav-progress-bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--hero-a),var(--hero-b)); }
    .side-nav-progress-num{ font-size:12.5px; color:var(--ink-soft); }

    /* ---- Sidebar logout, right under the progress footer (Sofia: adult-only —
       see sideNavLogoutHtml() in nav.js for why Junior doesn't get this). Quiet
       by default so it doesn't compete with the nav items above it; only turns
       error-colored on hover/focus, same signal .btn-logout already uses on the
       profile screen for "this one's destructive". */
    .side-nav-logout{
      display:flex; align-items:center; gap:var(--space-3); width:100%; box-sizing:border-box;
      margin-top:var(--space-2); padding:var(--space-3); border:none; border-top:1px solid var(--border);
      border-radius:0; background:none; font-family:inherit; font-size:14px; font-weight:700;
      color:var(--ink-soft); cursor:pointer; text-align:left;
    }
    .side-nav-logout-icon{ flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
    .side-nav-logout-icon svg{ width:18px; height:18px; display:block; }
    .side-nav-logout:hover, .side-nav-logout:focus-visible{ color:var(--error); background:var(--error-soft); }

    /* Sofia (Sept 7): this used to be a bare `body{...}`, applying the sidebar's
       244px reservation to EVERY page at this width — including the login/auth
       screens, which never get a sidebar (has-tabnav is only added once a
       profile is signed in — see js/nav.js). That's why the whole page read as
       shifted off-center rather than centered on the login screen. The rule at
       body.has-tabnav above already does this correctly when the sidebar is
       actually present; this bare duplicate was the bug. */
    body.lesson-open{ padding-left:0; }
    .topbar-inner, .wrap{ max-width:820px; }
  }

  /* ---- Practice hub ---- */
  /* Dashboard hero (Sofia, п.23): the count of items needing review is the first
     thing on the screen, big, with its own CTA — same gradient-card language as
     the Home hero and .alpha-hero, reused deliberately (п.40, "signature moments").
     When there's nothing to review the card flips to a quiet neutral state instead
     of showing a hollow "0" as if it were an achievement. */
  .practice-dash{
    position:relative; overflow:hidden; margin-top:var(--space-4);
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
    background:linear-gradient(135deg, var(--hero-a), var(--hero-b)); color:#fff;
    border-radius:var(--radius-lg); padding:var(--space-6) var(--space-4);
    box-shadow:0 10px 24px -14px rgba(20,38,47,.4);
  }
  .practice-dash-num{ font-family:'Unbounded',sans-serif; font-variant-numeric:tabular-nums; font-weight:800; font-size:44px; line-height:1; }
  .practice-dash-label{ font-size:13.5px; line-height:1.4; margin-top:4px; max-width:15em; color:rgba(255,255,255,.85); }
  .practice-dash-btn{
    flex:none; display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--hero-a);
    font-family:inherit; font-weight:800; font-size:14px; border:none; border-radius:999px;
    padding:11px 18px; cursor:pointer; box-shadow:0 8px 18px -10px rgba(0,0,0,.4); transition:background-color .15s ease;
  }
  .practice-dash-btn:hover{ background:rgba(255,255,255,.9); }
  .practice-dash.empty{ background:var(--surface); color:var(--ink); border:1.5px solid var(--border); }
  .practice-dash.empty .practice-dash-label{ color:var(--ink-soft); max-width:none; }
  /* п.37: заголовок над списком остальных тренировок — секция, не мелкий
     лейбл, поэтому обычный регистр вместо капса. */
  .practice-list-label{ font-size:11.5px; font-weight:800; color:var(--ink-faint); margin:var(--space-6) 0 var(--space-1); }
  .practice-list{ display:flex; flex-direction:column; gap:var(--space-3); }
  /* Same pattern as .month-card: box-shadow instead of a hard border on the plain
     resting state, with a transparent border kept as the transition target for the
     accent-colored hover/interactive states below. */
  .practice-row{
    display:flex; align-items:center; gap:var(--space-3); text-align:left; width:100%;
    background:var(--surface); border:1.5px solid transparent; border-radius:var(--radius-md);
    padding:var(--space-4); color:var(--ink); transition:border-color .15s ease;
  }
  .practice-row:hover:not(:disabled):not(.locked){ border-color:var(--accent); }
  .practice-row:disabled, .practice-row.locked{ opacity:.5; }
  /* .locked rows (vs. :disabled) are real, clickable buttons — they route to wherever
     their count actually comes from instead of starting a session, so the muted look
     has to come from a class, not the disabled attribute that would block the click. */
  .practice-row.locked:hover{ border-color:transparent; }
  .practice-icon{ width:38px; height:38px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex:none; background:var(--surface-2); color:var(--accent); }
  .practice-icon svg{ width:20px; height:20px; }
  .practice-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .practice-title{ font-size:15px; font-weight:700; }
  .practice-sub{ font-size:12.5px; color:var(--ink-soft); }
  .practice-count{ font-family:'Unbounded',sans-serif; font-size:15px; color:var(--ink-faint); flex:none; }
  /* Sofia (13): a small dot row under the count — "a little" vs "a lot" of this
     mode's items at a glance, without adding a second line of text. */
  .practice-count-wrap{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; }
  .practice-dots{ display:flex; gap:3px; }
  .practice-dot{ width:5px; height:5px; border-radius:50%; background:var(--border); }
  .practice-dot.filled{ background:var(--accent); }