/* Дополнения к Tabler: чтение, карточки статьи, выноски. */

.brand-bolt { font-size: 1.15rem; }

.nav-progress { height: 2px; position: absolute; bottom: 0; left: 0; }
.nav-progress .progress-bar { background: var(--tblr-orange); }

.nav-search { min-width: 180px; }
@media (max-width: 991px) { .nav-search { min-width: 100%; } }

.sidebar-sticky { position: sticky; top: 1rem; }
.list-group-toc .list-group-item { padding: .4rem .6rem; font-size: .875rem; border: 0; border-radius: var(--tblr-border-radius); }
.list-group-toc .list-group-header { padding: .5rem .6rem .25rem; }
.list-group-toc .list-group-item + .list-group-item { border-top: 0; }

.reading { max-width: 46rem; }
.reading p { margin-bottom: .9rem; line-height: 1.75; }
.reading h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.reading h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.reading ul, .reading ol { margin-bottom: 1rem; padding-left: 1.4rem; }
.reading li { margin-bottom: .35rem; line-height: 1.7; }
.reading code { background: var(--tblr-bg-surface-secondary); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
.reading pre { background: var(--tblr-bg-surface-secondary); padding: .9rem 1rem; border-radius: var(--tblr-border-radius); overflow-x: auto; }
.reading blockquote { border-left: 3px solid var(--tblr-border-color); padding-left: 1rem; color: var(--tblr-secondary); margin: 1rem 0; }
.reading table { width: 100%; margin-bottom: 1rem; }
.reading table th, .reading table td { border-bottom: 1px solid var(--tblr-border-color); padding: .4rem .5rem; }

.callout { border-radius: var(--tblr-border-radius); padding: .9rem 1.1rem; margin: 1.25rem 0; }
.callout-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: .25rem; opacity: .8; }
.callout-why { background: var(--tblr-bg-surface-secondary); border-left: 3px solid var(--tblr-border-color); }
.callout-do { background: rgba(245, 159, 0, .1); border-left: 3px solid var(--tblr-orange); }
.callout p:last-child { margin-bottom: 0; }

.check-card { border: 1px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: .8rem 1.1rem; margin: 1.25rem 0; }
.check-card summary { cursor: pointer; color: var(--tblr-orange); font-weight: 500; }
.check-card .q { font-weight: 600; margin: .7rem 0 .3rem; }
.check-card .a { color: var(--tblr-secondary); margin: 0; }

.article-head { margin-bottom: 1.5rem; }
.article-head h1 { font-size: 1.75rem; line-height: 1.25; margin: .4rem 0 .6rem; }
@media (max-width: 575px) { .article-head h1 { font-size: 1.4rem; } }

.pill-link { display: inline-block; border: 1px solid var(--tblr-border-color); border-radius: 999px;
  padding: .15rem .7rem; font-size: .82rem; margin: 0 .3rem .3rem 0; color: inherit; text-decoration: none; }
.pill-link:hover { border-color: var(--tblr-orange); color: var(--tblr-orange); }

.track-step.is-done { opacity: .55; text-decoration: line-through; }

.metric-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.metric-label { font-size: .7rem; color: var(--tblr-secondary); text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; }
.metric-cell { min-width: 5.4rem; }

.glossary dt { font-weight: 600; margin-top: 1rem; }
.glossary dd { color: var(--tblr-secondary); margin: .15rem 0 0; }

.rules-item .situation { font-weight: 600; }
.rules-item .answer { color: var(--tblr-orange); }

mark { background: rgba(245, 159, 0, .3); color: inherit; padding: 0 .1em; }

@media print {
  .navbar, aside, .footer, .btn, .pill-link { display: none !important; }
  .reading { max-width: none; }
  .card { break-inside: avoid; border: 0; }
}

/* схема в карточке */
.card-figure { margin: 1.4rem 0; }
.card-figure img { width: 100%; height: auto; display: block;
  background: #fbfaf7; border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius); padding: .6rem; }
[data-bs-theme="dark"] .card-figure img { background: #f4f3ef; }
.card-figure figcaption { font-size: .8rem; color: var(--tblr-secondary); margin-top: .4rem; }
@media print { .card-figure img { background: #fff; } }

/* иконки компонентов */
.cicon { display: inline-flex; color: inherit; }
.cicon svg { display: block; }
.cicon-box { color: var(--tblr-orange); flex: 0 0 auto; padding-top: 2px; }
.cicon-hero { color: var(--tblr-orange); }
.card-link:hover .cicon-box { color: var(--tblr-orange); }
[data-bs-theme="dark"] .cicon-box, [data-bs-theme="dark"] .cicon-hero { color: var(--tblr-orange); }
.min-w-0 { min-width: 0; }

/* сборщик схем */
.nav-link-builder { font-weight: 600; }
.builder-page { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; align-items: start; }
.builder-side { position: sticky; top: .5rem; }
.builder-frame-wrap { border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius);
  overflow: hidden; background: #fff; }
.builder-frame { width: 100%; height: calc(100vh - 190px); min-height: 520px; border: 0; display: block; }
.example-btn.active { background: var(--tblr-primary-lt); border-color: var(--tblr-primary); }
@media (max-width: 991px) {
  .builder-page { grid-template-columns: 1fr; }
  .builder-side { position: static; }
  .builder-frame { height: 70vh; }
}

/* сборщик схем: полный экран и список примеров */
.example-list { max-height: 46vh; overflow-y: auto; }
.builder-frame-wrap:fullscreen { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.builder-frame-wrap:fullscreen .builder-frame { height: 100vh; }
.sim-fullscreen .builder-side { display: none; }
.sim-fullscreen .page-wrapper { padding: 0; }