/* ScaleQL · база: сброс, типографика, оформление учебного текста */

@import url('../fonts/fonts.css');

*,*::before,*::after{ box-sizing:border-box }
html{ height:100%; -webkit-text-size-adjust:100% }

body{
  min-height:100%; height:100dvh; margin:0; overflow:hidden;
  background:var(--ink-950); color:var(--tx);
  font:400 var(--fs-body)/var(--lh-body) var(--font);
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
}

h1,h2,h3,h4{ margin:0; font-weight:700; line-height:var(--lh-head); letter-spacing:-.015em }
h1{ font-size:var(--fs-h1) } h2{ font-size:var(--fs-h2) } h3{ font-size:var(--fs-h3) }
p{ margin:0 0 var(--sp-3) }
b,strong{ font-weight:700 }
a{ color:var(--acc); text-underline-offset:3px }
img,svg{ max-width:100% }
button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer; background:none; border:0; padding:0 }
code,pre,.mono{ font-family:var(--mono) }
ul,ol{ margin:0 0 var(--sp-3); padding-left:1.15em }
li{ margin-bottom:var(--sp-1) }

/* Цифры везде моноширинные и одной ширины: колонки чисел должны
   стоять ровно, а счётчик XP — не дёргать соседей при росте. */
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500 }

:focus{ outline:none }
:focus-visible{ box-shadow:var(--ring); border-radius:var(--r) }

::selection{ background:var(--acc-soft); color:var(--tx) }

*{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-thumb{ background:var(--line-strong); border:3px solid transparent;
  background-clip:content-box; border-radius:var(--r-full) }
::-webkit-scrollbar-track{ background:transparent }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--sp-3); top:-100px; z-index:100;
  background:var(--acc-fill); color:var(--acc-ink); font-weight:600;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--r);
  transition:top var(--dur-2) var(--ease);
}
.skip-link:focus{ top:var(--sp-3) }

.ic{ display:block; flex:0 0 auto }

/* ── учебный текст (HTML приходит из curriculum.py) ──────── */
.prose{ max-width:var(--measure) }
.prose > p{ color:var(--tx-2); margin:0 0 var(--sp-4); font-size:15.5px }
.prose > p:last-child{ margin-bottom:0 }
.prose b{ color:var(--tx) }
.prose h3{ margin:var(--sp-6) 0 var(--sp-3); font-size:var(--fs-h3) }
.prose code{
  font-family:var(--mono); font-size:.86em; color:var(--tx);
  background:var(--ink-850); border:1px solid var(--line);
  padding:1px 5px; border-radius:var(--r-xs); white-space:nowrap;
}

/* Правило урока: янтарная линейка слева, без заливки-плашки. */
.prose p.rule, .prose .rule{
  margin:0 0 var(--sp-4); padding:0 0 0 var(--sp-4);
  border-left:2px solid var(--acc);
  color:var(--tx); font-size:15.5px;
}

/* Глоссарий: две колонки, разделитель только между строками. */
.prose table.g{ border-collapse:collapse; width:100%; margin:0 0 var(--sp-5) }
.prose table.g td{
  padding:var(--sp-2) 0; vertical-align:baseline;
  color:var(--tx-2); font-size:var(--fs-sm); line-height:1.5;
}
.prose table.g tr + tr td{ border-top:1px solid var(--line) }
.prose table.g td:first-child{ width:34%; padding-right:var(--sp-4); white-space:nowrap }

/* Разбор запроса построчно: слева кусок SQL, справа перевод на русский. */
.prose table.gl{ border-collapse:collapse; width:100%; margin:0 0 var(--sp-5) }
.prose table.gl td{
  padding:var(--sp-2) 0; vertical-align:top;
  color:var(--tx-2); font-size:var(--fs-sm); line-height:1.55;
}
.prose table.gl tr + tr td{ border-top:1px solid var(--line) }
.prose table.gl td:first-child{
  width:44%; padding-right:var(--sp-4); white-space:pre-wrap;
  font-family:var(--mono); font-size:var(--fs-code); color:var(--tx);
}

/* На узком экране разбор складывается в две строки: код, под ним перевод. */
@media (max-width:780px){
  .prose table.gl td{ display:block; width:auto }
  .prose table.gl td:first-child{
    width:auto; padding:var(--sp-2) 0 2px; border-top:0;
  }
  .prose table.gl tr + tr td:first-child{ border-top:1px solid var(--line) }
  .prose table.gl td + td{ padding-top:0; border-top:0 }
}

.prose ul.steps{ margin:0 0 var(--sp-4); padding:0 0 0 var(--sp-5); color:var(--tx-2) }
.prose ul.steps li{ margin-bottom:var(--sp-2); font-size:15.5px; line-height:1.6 }
.prose ul.steps li:last-child{ margin-bottom:0 }

.prose pre.skel{
  margin:0 0 var(--sp-5); padding:var(--sp-3) var(--sp-4);
  background:var(--code-bg); border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--mono); font-size:var(--fs-code); line-height:1.65;
  color:var(--tx-2); overflow-x:auto;
}

.prose figure.dia{
  margin:0 0 var(--sp-5); padding:var(--sp-4) 0 0;
  border-top:1px solid var(--line);
}
.prose figure.dia svg{ width:100%; height:auto; display:block }
.prose figure.dia figcaption{
  margin-top:var(--sp-3); color:var(--tx-3); font-size:var(--fs-sm); line-height:1.5;
}