/* _nav.css : вигляд бокової панелі проєкту.
   Структуру малює /_nav.js, вигляд живе тут, сторінка не описує nav-* у себе.
   Під свою тему міняй ЛИШЕ змінні нижче (Крок 10). Правила не переписуй. */

:root{
  --nav-w:      236px;      /* ширина панелі */
  --nav-fg:     #16181a;    /* готовий етап: звичайний лінк */
  --nav-active: #0d5a66;    /* поточний етап і поточна сторінка */
  --nav-muted:  #6b7176;    /* SOON: ще не роблений, не лінк */
  --nav-rule:   #e3e4e6;    /* лінії, рамки бейджів */
  --nav-badge:  #0d5a66;    /* бейдж Next */
  --nav-size:   13.5px;
  --nav-lh:     1.5;
}

#sidebar{ width:var(--nav-w); flex:0 0 var(--nav-w); font-size:var(--nav-size); line-height:var(--nav-lh); }
.nav-roadmap, .nav-sub, .nav-sections{ list-style:none; margin:0; padding:0; }
.nav-roadmap{ display:flex; flex-direction:column; gap:2px; }

.nav-top{ display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:6px;
          color:var(--nav-fg); text-decoration:none; }
a.nav-top:hover{ background:color-mix(in srgb, var(--nav-active) 8%, transparent); }
.nav-item.is-done    > .nav-top{ color:var(--nav-fg); }        /* зроблений етап: звичайний лінк */
.nav-item.is-soon    > .nav-top{ color:var(--nav-muted); cursor:default; }
/* THE WASH IS 6 PER CENT AND IT WAS 10 UNTIL 2026-08-27, when the light theme
   reached a product screen for the first time and this line became the one failure
   in 268 renderings. The wash and the ink are the SAME HUE, so a heavier wash walks
   the ground towards the ink rather than away from it. In dark the two start far
   apart and 10 per cent costs nothing; in light they start close and it cost the
   whole margin. Measured on overview.html, both themes, ground composited:
     ink at 10%   dark 6.27   light 4.41   <- the failure, floor 4.5
     ink at  6%   dark 6.71   light 4.65
     no wash      dark 7.33   light 5.02
   A wash of the line role was measured too and is worse in light at every strength,
   because that role is DARKER than the light page and this ink is dark already. */
.nav-item.is-active  > .nav-top{ color:var(--nav-active); font-weight:600;
          background:color-mix(in srgb, var(--nav-active) 6%, transparent); }
.nav-item.is-partial > .nav-top{ color:var(--nav-fg); }
.nav-item.is-wip     > a.nav-top{ color:var(--nav-fg); }      /* етап у роботі, сторінка вже є: звичайний лінк */
/* Етап у роботі, сторінки ЩЕ немає: рендерер віддає span, і темний колір обіцяв би клік,
   якого нема. Стан живе рівно від кроку, що поставив wip, до кроку, що зібрав сторінку. */
.nav-item.is-wip     > span.nav-top{ color:var(--nav-muted); cursor:default; }

.nav-badge{ margin-left:auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
            padding:2px 6px; border-radius:999px; }
.nav-badge-next{ color:#fff; background:var(--nav-badge); }
.nav-badge-soon{ color:var(--nav-muted); border:1px solid var(--nav-rule); }
.nav-badge-wip { color:var(--nav-active); border:1px solid var(--nav-active); }

.nav-sub{ margin:2px 0 6px; padding-left:10px; border-left:1px solid var(--nav-rule); }
.nav-subhead{ padding:8px 10px 4px; font-size:11px; letter-spacing:.06em;
              text-transform:uppercase; color:var(--nav-muted); }
.nav-link{ display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:6px;
           color:var(--nav-fg); text-decoration:none; }
span.nav-link{ color:var(--nav-muted); }
a.nav-link:hover{ background:color-mix(in srgb, var(--nav-active) 8%, transparent); }
.nav-link.is-current{ color:var(--nav-active); font-weight:600; }

.nav-sections{ margin:2px 0 6px; padding-left:12px; }
.nav-section{ display:block; padding:3px 10px; color:var(--nav-muted); text-decoration:none; font-size:13px; }
.nav-section:hover{ color:var(--nav-fg); }
.nav-section.is-current{ color:var(--nav-active); }

/* the bar is a narrow-width object and is not rendered where the panel is a column */
.nav-bar{ display:none }

@media (max-width: 900px){
  /* THE ROADMAP IS A DESK INSTRUMENT and on a phone it stacked a whole page of
     navigation above the document. It collapses to a bar carrying what is open and a
     control that opens the rest; opened it takes at most 60% of the viewport and
     scrolls inside itself, so the document is never pushed off the page. Stage 13. */
  #sidebar{ width:auto; flex:none; }
  #sidebar > *{ display:none }
  #sidebar > .nav-bar{ display:flex; align-items:center; gap:12px;
                       padding:9px 0; border-bottom:1px solid var(--nav-rule); }
  .nav-bar-name{ flex:1 1 auto; font-weight:600; color:var(--nav-fg); }
  .nav-burger{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
               background:none; border:1px solid var(--nav-rule); border-radius:3px;
               color:var(--nav-muted); font:400 11.5px/1 inherit; letter-spacing:.06em;
               text-transform:uppercase; padding:7px 10px; cursor:pointer; }
  .nav-burger::before{ content:""; width:13px; height:9px; background:currentColor;
    -webkit-mask:linear-gradient(currentColor 0 0) top/100% 1px no-repeat,
                 linear-gradient(currentColor 0 0) center/100% 1px no-repeat,
                 linear-gradient(currentColor 0 0) bottom/100% 1px no-repeat;
            mask:linear-gradient(currentColor 0 0) top/100% 1px no-repeat,
                 linear-gradient(currentColor 0 0) center/100% 1px no-repeat,
                 linear-gradient(currentColor 0 0) bottom/100% 1px no-repeat; }
  .nav-burger:hover{ color:var(--nav-fg); border-color:var(--nav-active); }
  #sidebar.is-open{ max-height:60vh; overflow-y:auto; }
  #sidebar.is-open > *{ display:block }
  #sidebar.is-open > .nav-bar{ display:flex; position:sticky; top:0; background:var(--panel,#fff); }
  #sidebar.is-open .nav-burger{ color:var(--nav-active); border-color:var(--nav-active); }
  .nav-item:not(.is-active) > .nav-top{ padding:6px 10px; }
}
/* 2.55:1 on the panel ground, measured in a browser. --nav-muted is the value this panel
   already uses for a stage nobody has built yet, and it clears 4.5 at 4.77. */
.nav-badge-off{color:var(--nav-muted);border-color:var(--nav-rule)}