/* kibersvet.ru — каркас сайта. Только свои ресурсы: никаких шрифтов и
   скриптов со сторонних адресов (paid-access-delivery, «Чего на портале нет»). */
:root {
  --bg: #f5f7f8; --paper: #fff; --ink: #17303d; --muted: #5d7280;
  --line: #d9e1e6; --accent: #1d6f8c; --accent-soft: #e2f0f5;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f1a20; --paper: #16242c; --ink: #e3edf1; --muted: #93a8b4;
          --line: #2a3c46; --accent: #6cc0dc; --accent-soft: #1b3440; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 16px/1.55 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
a { color: var(--accent); }
.wrap { max-width: 860px; margin: 0 auto; padding: 20px 16px 48px; display: grid; gap: 22px; }
.top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brand { font-size: 22px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: .3px; }
.tagline { color: var(--muted); font-size: 14px; }
nav.menu { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
h1 { font-size: 26px; line-height: 1.25; margin: 0 0 8px; }
h2 { font-size: 20px; margin: 28px 0 10px; }
h3 { font-size: 17px; margin: 22px 0 8px; }
.lead { color: var(--muted); }
.lesson { background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
          padding: 16px; display: grid; gap: 12px; }
.lesson h2 { margin: 0; font-size: 18px; }
.mats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .mats { grid-template-columns: 1fr; } }
.mat { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.mat b { font-size: 15px; }
.mat p { margin: 0; color: var(--muted); font-size: 14px; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.open { font-size: 14px; font-weight: 600; background: var(--accent-soft); border-radius: 8px;
        padding: 6px 11px; text-decoration: none; }
.buy { font-size: 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
       padding: 5px 10px; text-decoration: none; white-space: nowrap; }
.buy:hover { border-color: var(--muted); }
.kit { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
       border-top: 1px solid var(--line); padding-top: 12px; }
.btn { display: inline-block; font: inherit; font-weight: 600; padding: 11px 18px; border: 0;
       border-radius: 8px; background: var(--accent); color: var(--paper); text-decoration: none; cursor: pointer; }
.note { color: var(--muted); font-size: 14px; }
.doc { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; }
.doc h1 { font-size: 22px; }
.doc li { margin: 4px 0; }
.buyform { display: grid; gap: 12px; }
.inp { width: 100%; max-width: 320px; margin-top: 4px; padding: 9px; border: 1px solid var(--line);
       border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
table { border-collapse: collapse; width: 100%; }
td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.p { white-space: nowrap; text-align: right; }
.soon { color: var(--muted); }
.foot { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 14px; line-height: 1.7; }
.foot a { color: var(--muted); }
h2.sec { font-size: 14px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 18px 0 0; }
.lnum { font-size: 13px; color: var(--muted); }
.plan { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.plan li { padding: 9px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.plan li:first-child { border-top: 0; }
.plan .num { display: inline-block; min-width: 42px; font-variant-numeric: tabular-nums; }
.plan .when { float: right; font-size: 13px; }

/* Годовой каталог: готовые и планируемые уроки в одном порядке. */
.annual-plan{list-style:none;padding:0;margin:12px 0 28px}
.annual-row{padding:12px 0;border-bottom:1px solid #d9dce6;line-height:1.5}
.annual-row a{font-weight:600;text-decoration:none}
.annual-row a:hover{text-decoration:underline}
.annual-row a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.annual-state{display:block;font-size:.9em;margin-top:3px;color:#5c6070}
.annual-frozen{color:#5c6070}
.annual-section{font-size:1.05em;margin:24px 0 8px}
.course-tabs{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 0;margin:0 0 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.course-tabs a{padding:8px 12px;border:1px solid var(--line);border-radius:9px;
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.95em}
.course-tabs a[aria-selected="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.course-tabs a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[data-course-panel][hidden]{display:none!important}
.portal-layout{display:grid;grid-template-columns:170px minmax(0,1fr);gap:28px;
  max-width:1120px;margin:0 auto;padding:0 24px}
.portal-layout>.wrap{width:100%;min-width:0;margin:0;padding:20px 0 48px}
.grade-sidebar{position:sticky;top:24px;align-self:start;padding-top:4px;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}
.grade-menu>summary{display:none}
.grade-nav{display:grid;gap:6px;padding:12px 0}
.grade-nav-title{margin:0 0 6px;padding:0 12px;color:var(--muted);font-size:14px;font-weight:600}
.grade-nav a{display:flex;align-items:center;min-height:44px;padding:9px 12px;
  border:1px solid transparent;border-radius:9px;color:var(--ink);text-decoration:none;font-weight:600}
.grade-nav a:hover{background:var(--paper);border-color:var(--line)}
.grade-nav a[aria-current]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.grade-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.grade-subnav{display:grid;gap:2px;margin:2px 0 8px 12px;padding-left:8px;border-left:1px solid var(--line)}
.grade-subnav a{font-size:13px;font-weight:400;min-height:34px;padding:6px 8px;line-height:1.35}
@media(max-width:760px){
  .portal-layout{display:block;padding:0 16px}
  .grade-sidebar{position:sticky;top:0;z-index:10;padding:8px 0;background:var(--bg)}
  .grade-sidebar{max-height:60vh}
  .grade-menu>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-weight:600;list-style:none}
  .grade-menu>summary::after{content:'⌄'}
  .grade-menu[open]>summary::after{content:'⌃'}
  .grade-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:8px 0 0}
  .grade-nav-title{display:none}
  .grade-nav a{justify-content:center;text-align:center;padding:8px 4px;font-size:14px;line-height:1.3}
  .grade-nav-group:last-child{grid-column:1/-1}
  .grade-subnav a{justify-content:flex-start;text-align:left;font-size:13px}
  .grade-nav-group:last-child .grade-subnav{display:flex;flex-wrap:wrap}
  .course-tabs{top:var(--grade-nav-height,60px)}
}