/* Дополнения к дизайн-системе: то, чего в прототипе не было — навигация с
   неготовыми разделами, плитки каталогов, заглушки. Имена классов свои:
   .card из pages/uroki.css перекрывать нельзя, там своя структура.

   Грузится после skin.css и повторяет его язык: рамка в один пиксель,
   скругления из --r/--rs, подписи без капса и разрядки. */

.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--on-accent);
  padding:.6rem 1rem; border-radius:var(--rs); text-decoration:none}
.skip:focus{left:0}

/* ---- неготовый раздел в меню ---- */
/* Кнопка подражает соседним ссылкам: перепад в размере или шрифте читался бы
   как поломка вёрстки, а не как «раздел ещё не открыт». */
.top nav .nav-soon{font:inherit; font-size:.9rem; font-weight:500; color:var(--muted); background:none; border:0;
  padding:.45rem .75rem; border-radius:999px; white-space:nowrap; opacity:.5; cursor:not-allowed;
  text-decoration:line-through}

.sf-soon{font-size:.9rem; color:var(--muted); opacity:.6; text-decoration:line-through}

/* ---- плитки каталога ---- */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:.8rem; margin:1.2rem 0 0}
.tile{display:flex; flex-direction:column; gap:.35rem; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); box-shadow:var(--lift); color:var(--ink); text-decoration:none; padding:1rem 1.1rem 1.15rem;
  transition:border-color .12s, box-shadow .12s}
.tile:hover{border-color:var(--accent); text-decoration:none}
.tile:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.tile h3{margin:0; font-size:1.02rem; letter-spacing:-.005em; line-height:1.25}
.tile p{margin:0; font-size:.84rem; color:var(--muted); line-height:1.45}
.tile-meta{font-family:var(--font); font-size:.78rem; font-weight:500; color:var(--accent);
  letter-spacing:0; text-transform:none}

/* Неготовый раздел плиткой. Пунктир и приглушённость должны читаться сразу:
   плитка без ссылки внешне неотличима от рабочей, пока в неё не ткнёшь. */
.tile.is-soon{border-style:dashed; box-shadow:none; opacity:.6; cursor:not-allowed}
.tile.is-soon:hover{border-color:var(--line)}
.tile.is-soon h3{color:var(--muted)}
.tile.is-soon .tile-meta{color:var(--muted)}

/* ---- программа курса ---- */
.program{list-style:none; margin:1.2rem 0 0; padding:0; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--card)}
.program li+li{border-top:1px solid var(--line)}
.program a{display:flex; gap:.8rem; align-items:baseline; padding:.85rem 1rem; text-decoration:none; color:var(--ink)}
.program a:hover{background:var(--sunk); text-decoration:none}
.program a[aria-current]{background:var(--accent-soft); color:var(--accent-text)}
.program .n{font-family:var(--code); font-size:.78rem; color:var(--muted); min-width:1.6rem;
  font-variant-numeric:tabular-nums}
.program b{font-weight:600; letter-spacing:-.005em}
.program span{display:block; font-size:.82rem; color:var(--muted); line-height:1.45; margin-top:.15rem}

/* ---- переход между уроками ---- */
.pager{display:flex; gap:.6rem; justify-content:space-between; margin:2rem 0 0; border-top:1px solid var(--line);
  padding-top:1rem}
.pager a{font-size:.9rem; text-decoration:none; color:var(--ink-2); border-bottom:0}
.pager a:hover{color:var(--accent); text-decoration:none}

/* ---- заглушка раздела ---- */
.stub{border:1px dashed var(--rule); border-radius:var(--r); background:var(--sunk); padding:2.4rem 1.2rem;
  text-align:center; margin:1.5rem 0 0}
.stub .lbl{font-family:var(--font); font-size:.8rem; font-weight:600; color:var(--accent);
  letter-spacing:0; text-transform:none}
/* .lede шире заглушки и с text-align:center разъехался бы по краям. */
.stub .lede{margin:.4rem auto 0}
.stub .soon{font:inherit; font-weight:600; border:0; border-radius:var(--rs); background:var(--card);
  color:var(--muted); padding:.9rem 2.2rem; margin:1.1rem 0; cursor:not-allowed}
.stub .links{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}