/**
 * Biserok Interactive Beading Books (/knigi/) Stylesheet
 * Clean-room implementation of the 12-block pattern language (P-01..P-12)
 * using 3-tier tokens from design-system/tokens.css.
 */

biserok-book-reader,
biserok-bead-stepper,
biserok-thread-exercise,
biserok-defect-xray,
biserok-scale-calibrator {
  display: block;
  box-sizing: border-box;
  --book-step-scroll-min: 75px;
}

.biserok-book-shell,
.biserok-books-shell {
  font-family: var(--semantic-typography-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--semantic-color-text-primary, #141414);
  background: var(--semantic-color-surface-page, #FAF9F6);
  padding-bottom: var(--primitive-space-10, 40px);
}

/* Override legacy themes/carrino/style.css 120px/96px/72px/48px top margins on headings */
.biserok-book-shell h1,
.biserok-book-shell h2,
.biserok-book-shell h3,
.biserok-book-shell h4,
.biserok-books-shell h1,
.biserok-books-shell h2,
.biserok-books-shell h3,
.biserok-books-shell h4,
biserok-book-reader h1,
biserok-book-reader h2,
biserok-book-reader h3,
biserok-book-reader h4 {
  margin-top: 0 !important;
  font-family: var(--semantic-typography-font-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--semantic-color-text-strong, #111111);
  letter-spacing: -0.015em;
}

.biserok-book-container,
.biserok-books-container {
  max-width: var(--semantic-layout-container-max, 1280px);
  margin: 0 auto;
  padding: var(--primitive-space-4, 16px) var(--semantic-layout-gutter-desktop, 20px) var(--primitive-space-8, 32px);
}

/* ==========================================================================
   1. BOOKSHELF & CHAPTER TOC (/knigi/ and /knigi/{book}/)
   ========================================================================== */

.biserok-book-hero,
.biserok-books-hero {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-section, 16px);
  padding: var(--primitive-space-5, 20px) var(--primitive-space-6, 24px);
  margin-bottom: var(--primitive-space-4, 16px);
  box-shadow: var(--semantic-elevation-card, 0 1px 4px rgba(20, 20, 20, 0.04));
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.biserok-book-hero__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.95fr);
  gap: var(--primitive-space-6, 24px);
  align-items: start;
}

.biserok-book-hero__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.biserok-book-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-1-5, 6px);
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--semantic-color-text-muted, #64748B);
  margin: 0 0 var(--primitive-space-1-5, 6px);
}

.biserok-book-hero__title {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: var(--primitive-font-weight-extrabold, 800) !important;
  line-height: 1.16 !important;
  margin: 0 0 var(--primitive-space-2, 8px) !important;
  color: var(--semantic-color-text-strong, #111111) !important;
}

.biserok-book-hero__subtitle {
  font-size: var(--semantic-typography-size-body, 15px);
  line-height: 1.48;
  color: var(--semantic-color-text-secondary, #334155);
  margin: 0 0 var(--primitive-space-3, 12px);
  max-width: 68ch;
}

.biserok-book-hero .ds-badge,
.biserok-chapter-showcase__info .ds-badge {
  align-self: flex-start;
  width: fit-content;
  margin-bottom: var(--primitive-space-2, 8px);
}

.biserok-book-manifesto,
.biserok-level-strip {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-2-5, 10px);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.biserok-level-strip__card {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-1, 4px);
  padding: var(--primitive-space-3, 12px) var(--primitive-space-4, 16px);
  border-radius: var(--semantic-radius-card, 12px);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  background: var(--semantic-color-surface-page, #FAF9F6);
  text-decoration: none;
  color: var(--semantic-color-text-primary, #141414);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

a.biserok-level-strip__card:hover {
  border-color: var(--semantic-color-border-focus, #0B5CAB);
  background: var(--semantic-color-surface-card, #FFFFFF);
}

.biserok-level-strip__card.is-current {
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  border-color: var(--semantic-color-border-info, #BAE6FD);
}

.biserok-level-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-2, 8px);
}

.biserok-level-strip__tag {
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--semantic-color-text-muted, #64748B);
}

.biserok-level-strip__card.is-current .biserok-level-strip__tag {
  color: var(--semantic-color-text-info, #0B5CAB);
}

.biserok-level-strip__link {
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  color: var(--semantic-color-link-default, #0B5CAB);
}

.biserok-level-strip__title {
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  font-weight: var(--primitive-font-weight-bold, 700);
  color: var(--semantic-color-text-strong, #111111);
  line-height: 1.3;
}

.biserok-level-strip__desc {
  margin: 0;
  font-size: var(--semantic-typography-size-meta, 12px);
  line-height: 1.42;
  color: var(--semantic-color-text-secondary, #334155);
}

.biserok-book-before-after {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--primitive-space-4, 16px);
}

.biserok-book-before-after__col {
  padding: var(--primitive-space-3, 12px) var(--primitive-space-4, 16px);
  border-radius: var(--semantic-radius-card, 12px);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  background: var(--semantic-color-surface-page, #FAF9F6);
}

.biserok-book-before-after__col--after {
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  border-color: var(--semantic-color-border-info, #BAE6FD);
}

.biserok-book-before-after__kicker {
  font-weight: var(--primitive-font-weight-bold, 700);
  margin-bottom: var(--primitive-space-1-5, 6px);
}

.biserok-book-topbar__controls {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-2, 8px);
  flex-wrap: wrap;
}

.biserok-book-shelf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--primitive-space-6, 24px);
}

.biserok-book-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.9fr);
  gap: var(--primitive-space-6, 24px);
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-section, 16px);
  padding: var(--primitive-space-8, 32px);
  box-shadow: var(--semantic-elevation-card, 0 1px 4px rgba(20, 20, 20, 0.04));
  align-items: center;
}

.biserok-book-card__badge {
  display: inline-block;
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--semantic-color-text-brand, #E30016);
  background: var(--semantic-color-surface-brand-tint, #FFF1F2);
  padding: var(--primitive-space-1, 4px) var(--primitive-space-3, 12px);
  border-radius: var(--semantic-radius-pill, 999px);
  margin-bottom: var(--primitive-space-3, 12px);
}

.biserok-book-card__title {
  font-size: clamp(24px, 3vw, 34px);
  line-height: var(--primitive-font-lineheight-tight, 1.25);
  margin: 0 0 var(--primitive-space-2, 8px);
}

.biserok-book-card__title a {
  color: var(--semantic-color-text-strong, #111111);
  text-decoration: none;
}

.biserok-book-card__subtitle {
  font-size: var(--semantic-typography-size-body, 15px);
  line-height: var(--primitive-font-lineheight-normal, 1.5);
  color: var(--semantic-color-text-secondary, #334155);
  margin: 0 0 var(--primitive-space-4, 16px);
}

.biserok-book-card__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--primitive-space-5, 20px);
  display: grid;
  gap: var(--primitive-space-2, 8px);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
}

.biserok-book-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-space-3, 12px);
}

.biserok-book-card__preview svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--semantic-radius-card, 12px);
}

.biserok-book-toc-header {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-section, 16px);
  padding: var(--primitive-space-6, 24px);
  margin-bottom: var(--primitive-space-5, 20px);
}

.biserok-book-dag-card {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-card, 12px);
  padding: var(--primitive-space-5, 20px);
  margin-bottom: var(--primitive-space-6, 24px);
}

.biserok-book-dag-title {
  margin: 0 0 var(--primitive-space-3, 12px);
  font-size: var(--semantic-typography-size-title-sm, 17px);
}

.biserok-book-dag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-space-2, 8px);
}

.biserok-book-dag-pill {
  font-size: var(--semantic-typography-size-meta, 12px);
  background: var(--semantic-color-surface-muted, #F4F3EF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-pill, 999px);
  padding: var(--primitive-space-1, 4px) var(--primitive-space-3, 12px);
}

.biserok-book-toc-section {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-section, 16px);
  padding: var(--primitive-space-5, 20px) var(--primitive-space-6, 24px);
  margin-bottom: var(--primitive-space-4, 16px);
  box-shadow: var(--semantic-elevation-card, 0 1px 4px rgba(20, 20, 20, 0.04));
}

.biserok-book-restore-card {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-section, 16px);
  padding: var(--primitive-space-4, 16px) var(--primitive-space-6, 24px);
  margin-top: var(--primitive-space-2, 8px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-4, 16px);
}

.biserok-book-restore-card__head {
  flex: 1 1 320px;
}

.biserok-book-restore-card__head h3 {
  font-size: var(--semantic-typography-size-title-sm, 17px) !important;
  font-weight: var(--primitive-font-weight-bold, 700) !important;
  line-height: 1.3 !important;
  margin: 0 0 var(--primitive-space-1, 4px) !important;
}

.biserok-book-restore-card__head p {
  margin: 0;
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  color: var(--semantic-color-text-secondary, #334155);
}

.biserok-book-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-space-2-5, 10px);
  margin-top: var(--primitive-space-1, 4px);
}

.biserok-book-toc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--primitive-space-4, 16px);
  margin-top: var(--primitive-space-4, 16px);
}

.biserok-book-toc-card {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-2, 8px);
  padding: var(--primitive-space-4, 16px);
  background: var(--semantic-color-surface-page, #FAF9F6);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-card, 12px);
  text-decoration: none;
  color: var(--semantic-color-text-primary, #141414);
}

.biserok-book-toc-card:hover {
  border-color: var(--semantic-color-border-focus, #0B5CAB);
  background: var(--semantic-color-surface-card, #FFFFFF);
}

.biserok-book-toc-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-2, 8px);
}

.biserok-book-toc-card h3 {
  font-size: var(--semantic-typography-size-body, 15px);
  line-height: var(--primitive-font-lineheight-snug, 1.35);
  margin: 0;
  color: var(--semantic-color-text-strong, #111111);
}

.biserok-book-toc-list {
  list-style: none;
  padding: 0;
  margin: var(--primitive-space-4, 16px) 0 0;
  display: grid;
  gap: var(--primitive-space-2, 8px);
}

.biserok-book-toc-item a {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: var(--primitive-space-3, 12px);
  align-items: center;
  padding: var(--primitive-space-3, 12px) var(--primitive-space-4, 16px);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-control, 10px);
  text-decoration: none;
  color: var(--semantic-color-text-primary, #141414);
  background: var(--semantic-color-surface-page, #FAF9F6);
}

.biserok-book-toc-item a:hover {
  border-color: var(--semantic-color-border-focus, #0B5CAB);
  background: var(--semantic-color-surface-card, #FFFFFF);
}

.biserok-book-toc-num {
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  color: var(--semantic-color-text-muted, #64748B);
}

.biserok-book-toc-badge {
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-bold, 700);
  padding: 3px 10px;
  border-radius: var(--semantic-radius-pill, 999px);
}

.biserok-book-toc-badge.is-free {
  background: var(--semantic-color-status-success-bg, #F0FDF4);
  color: var(--semantic-color-status-success-text, #166534);
}

.biserok-book-toc-badge.is-paid {
  background: var(--semantic-color-status-warn-bg, #FFFBEB);
  color: var(--semantic-color-status-warn-text, #B45309);
}

/* ==========================================================================
   2. STICKY TOP BAR & READER CHROME (P-11)
   ========================================================================== */

.biserok-book-topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
}

.biserok-book-topbar__inner {
  max-width: var(--semantic-layout-container-max, 1280px);
  margin: 0 auto;
  padding: var(--primitive-space-2, 8px) var(--semantic-layout-gutter-desktop, 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-3, 12px);
}

.biserok-book-topbar__left {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-2-5, 10px);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  min-width: 0;
  flex: 1 1 280px;
}

.biserok-book-topbar__title {
  font-weight: var(--primitive-font-weight-semibold, 600);
  color: var(--semantic-color-text-secondary, #334155);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.biserok-book-topbar__back {
  color: var(--semantic-color-link-default, #0B5CAB);
  text-decoration: none;
  font-weight: var(--primitive-font-weight-bold, 700);
}

.biserok-book-topbar__chapter {
  font-weight: var(--primitive-font-weight-bold, 700);
  color: var(--semantic-color-text-strong, #111111);
}

.biserok-book-topbar__center {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-3, 12px);
  flex: 1;
  max-width: 340px;
}

.biserok-book-topbar__spread-indicator {
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  white-space: nowrap;
  color: var(--semantic-color-text-secondary, #334155);
}

.biserok-book-topbar__progress-track {
  flex: 1;
  height: 6px;
  background: var(--semantic-color-surface-muted, #F4F3EF);
  border-radius: var(--semantic-radius-pill, 999px);
  overflow: hidden;
}

.biserok-book-topbar__progress-fill {
  display: block;
  height: 100%;
  background: var(--semantic-color-action-primary, #E30016);
  transition: width 0.2s ease;
}

.biserok-book-topbar__right {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-2, 8px);
  flex-wrap: wrap;
}

.biserok-book-chrome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  color: var(--semantic-color-text-primary, #141414);
  background: var(--semantic-color-surface-muted, #F4F3EF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-pill, 999px);
  cursor: pointer;
}

.biserok-book-chrome-btn:hover,
.biserok-book-chrome-btn.is-active {
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  border-color: var(--semantic-color-border-focus, #0B5CAB);
  color: var(--semantic-color-text-info, #0B5CAB);
}

/* ==========================================================================
   3. SEMANTIC SPREAD CONTAINER & 3-COLUMN GRID (P-01)
   ========================================================================== */

.biserok-book-chapter-header {
  padding: var(--primitive-space-2, 8px) 0 var(--primitive-space-3, 12px);
  border-bottom: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  margin-bottom: var(--primitive-space-4, 16px);
}

.biserok-book-chapter-kicker,
.biserok-book-chapter-header__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--primitive-space-2, 8px);
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--semantic-color-text-muted, #64748B);
  margin-bottom: var(--primitive-space-1-5, 6px);
}

.biserok-book-chapter-header__kicker a {
  color: var(--semantic-color-link-default, #0B5CAB);
  text-decoration: none;
}

.biserok-book-chapter-title,
.biserok-book-chapter-header__title {
  font-size: clamp(22px, 2.5vw, 30px) !important;
  font-weight: var(--primitive-font-weight-extrabold, 800) !important;
  line-height: 1.16 !important;
  margin: 0 0 var(--primitive-space-1-5, 6px) !important;
}

.biserok-book-chapter-header__subtitle,
.biserok-book-chapter-header__lead {
  font-size: var(--semantic-typography-size-body, 15px);
  line-height: 1.46;
  color: var(--semantic-color-text-secondary, #334155);
  margin: 0;
  max-width: 76ch;
}

.biserok-book-spreads-stream,
.biserok-book-spreads-list {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-6, 24px);
}

.biserok-book-spread {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-section, 16px);
  padding: var(--primitive-space-5, 20px) var(--primitive-space-6, 24px);
  box-shadow: var(--semantic-elevation-card, 0 1px 4px rgba(20, 20, 20, 0.04));
  scroll-margin-top: 68px;
}

.biserok-book-spread.is-active-spread {
  border-color: var(--semantic-color-border-info, #BAE6FD);
}

.biserok-book-spread__header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--primitive-space-1-5, 6px);
  padding-bottom: var(--primitive-space-3, 12px);
  margin-bottom: var(--primitive-space-4, 16px);
  border-bottom: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
}

.biserok-book-spread__title-row {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-1, 4px);
}

.biserok-bookmark-toggle {
  margin-left: auto;
}

.biserok-book-spread__subtitle {
  margin: var(--primitive-space-1, 4px) 0 0;
  font-size: var(--semantic-typography-size-body, 15px);
  color: var(--semantic-color-text-secondary, #334155);
}

.biserok-book-spread__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--primitive-space-2, 8px);
}

.biserok-book-spread__num {
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  letter-spacing: 0.05em;
  color: var(--semantic-color-text-brand, #E30016);
  background: var(--semantic-color-surface-brand-tint, #FFF1F2);
  padding: 3px 10px;
  border-radius: var(--semantic-radius-pill, 999px);
}

.biserok-book-spread__bloom {
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-semibold, 600);
  color: var(--semantic-color-text-secondary, #334155);
  background: var(--semantic-color-surface-muted, #F4F3EF);
  padding: 3px 10px;
  border-radius: var(--semantic-radius-pill, 999px);
}

.biserok-book-spread__tier-badge {
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-bold, 700);
  padding: 3px 10px;
  border-radius: var(--semantic-radius-pill, 999px);
}

.biserok-book-spread__tier-badge.is-free {
  background: var(--semantic-color-status-success-bg, #F0FDF4);
  color: var(--semantic-color-status-success-text, #166534);
}

.biserok-book-spread__tier-badge.is-paid {
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  color: var(--semantic-color-text-info, #0B5CAB);
}

.biserok-book-spread__title {
  flex: 1 1 100%;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  margin: var(--primitive-space-1, 4px) 0 0;
}

.biserok-book-bookmark-btn {
  background: var(--semantic-color-surface-muted, #F4F3EF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-pill, 999px);
  padding: 6px 12px;
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  cursor: pointer;
}

.biserok-book-bookmark-btn.is-bookmarked {
  background: var(--semantic-color-status-warn-bg, #FFFBEB);
  color: var(--semantic-color-status-warn-text, #B45309);
  border-color: var(--primitive-color-amber-600, #D97706);
}

.biserok-book-spread__grid,
.biserok-book-spread__grid.biserok-soviet-BodyGrid {
  display: grid !important;
  grid-template-columns: minmax(0, 4.4fr) minmax(440px, 5.6fr) !important;
  gap: var(--primitive-space-8, 32px) !important;
  align-items: start !important;
}

.biserok-book-spread__prose {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-4, 16px);
  font-family: var(--semantic-typography-font-editorial, Georgia, "PT Serif", serif);
  font-size: var(--semantic-typography-size-body-lg, 17px);
  line-height: var(--primitive-font-lineheight-relaxed, 1.62);
  color: var(--semantic-color-text-strong, #111111);
}

.biserok-book-spread__prose p {
  margin: 0 0 var(--primitive-space-3, 12px);
}

.biserok-book-spread__prose p:last-child {
  margin-bottom: 0;
}

.biserok-book-prose-block .biserok-inline-tech-factoid,
.biserok-inline-tech-factoid {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: var(--primitive-space-1, 4px) 0 !important;
  box-shadow: none !important;
}

/* Hide verbose encyclopedic duplicate prose inside .biserok-inline-tech-factoid; keep only the visual SVG cross-section */
.biserok-inline-tech-factoid > *:not(.biserok-factoid-cross-svg) {
  display: none !important;
}

.biserok-factoid-cross-svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--semantic-color-surface-page, #FAF9F6);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-card, 12px);
  padding: var(--primitive-space-2-5, 10px) var(--primitive-space-3, 12px);
}

.biserok-book-spread__stage {
  min-width: 0;
  max-width: 100%;
  position: sticky;
  top: var(--primitive-space-16, 64px);
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-3, 12px);
}

.biserok-book-spread__marginalia {
  margin-top: var(--primitive-space-1, 4px);
  padding-top: var(--primitive-space-3, 12px);
  border-top: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  font-family: var(--semantic-typography-font-ui);
}

.biserok-marginalia-course-factoid {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
}

/* Hide duplicate 'Чему научиться / Куда смотреть' text that repeats the spread header and step cards */
.biserok-marginalia-course-factoid__head {
  display: none !important;
}

.biserok-marginalia-course-factoid__section--links {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--primitive-space-2, 8px) var(--primitive-space-4, 16px);
}

.biserok-marginalia-course-factoid__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-space-2, 8px) var(--primitive-space-4, 16px);
}

.biserok-marginalia-course-factoid__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-1, 4px);
  text-decoration: none;
  color: var(--semantic-color-link-default, #0B5CAB);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  font-weight: var(--primitive-font-weight-semibold, 600);
}

.biserok-marginalia-course-factoid__links a:hover {
  text-decoration: underline;
}

.biserok-marginalia-course-factoid__preview {
  display: none !important;
}

/* ==========================================================================
   4. INLINE STEP ANCHORS (P-02) & STEPPER ISLAND (P-03)
   ========================================================================== */

.biserok-step-anchors-strip {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-2, 8px);
  margin: var(--primitive-space-4, 16px) 0;
}

.biserok-step-anchor {
  display: flex;
  align-items: flex-start;
  gap: var(--primitive-space-3, 12px);
  width: 100%;
  text-align: left;
  padding: var(--primitive-space-3, 12px) var(--primitive-space-4, 16px);
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-body, 15px);
  color: var(--semantic-color-text-primary, #141414);
  background: var(--semantic-color-surface-page, #FAF9F6);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-control, 10px);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.biserok-step-anchor:hover {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border-color: var(--semantic-color-border-focus, #0B5CAB);
}

.biserok-step-anchor.is-active {
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  border-color: var(--semantic-color-border-focus, #0B5CAB);
  color: var(--semantic-color-text-strong, #111111);
}

.biserok-step-anchor__num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: var(--semantic-radius-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  background: var(--semantic-color-surface-card, #FFFFFF);
  color: var(--semantic-color-text-secondary, #334155);
  border: 1px solid var(--semantic-color-border-default, #CBD5E1);
}

.biserok-step-anchor.is-active .biserok-step-anchor__num {
  background: var(--semantic-color-action-primary, #E30016);
  color: var(--semantic-color-text-inverse, #FFFFFF);
  border-color: var(--semantic-color-action-primary, #E30016);
}

.biserok-step-anchor__body {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-1, 4px);
  flex: 1;
}

.biserok-step-anchor__text {
  font-weight: var(--primitive-font-weight-semibold, 600);
  line-height: var(--primitive-font-lineheight-snug, 1.38);
}

.biserok-step-anchor__code {
  display: none !important;
}

.biserok-quiz-drawer,
.biserok-stage-drawer {
  margin-top: var(--primitive-space-2-5, 10px);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: 0;
  padding: var(--primitive-space-3, 12px) 0 0;
  font-family: var(--semantic-typography-font-ui);
}

.biserok-chapter-toc-drawer {
  margin-top: var(--primitive-space-4, 16px);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: 0;
  padding: var(--primitive-space-3, 12px) 0 0;
  font-family: var(--semantic-typography-font-ui);
}

.biserok-quiz-drawer > summary,
.biserok-stage-drawer > summary,
.biserok-chapter-toc-drawer > summary {
  cursor: pointer;
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  font-weight: var(--primitive-font-weight-bold, 700);
  color: var(--semantic-color-text-info, #0B5CAB);
}

.biserok-stage-drawer__body {
  margin-top: var(--primitive-space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-3, 12px);
}

.biserok-stage-drawer .biserok-calibrator-panel {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.biserok-topbar-more {
  position: relative;
}

.biserok-topbar-more > summary {
  list-style: none;
}

.biserok-topbar-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--primitive-space-2, 8px));
  z-index: 60;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-2, 8px);
  padding: var(--primitive-space-3, 12px);
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-card, 12px);
  box-shadow: var(--semantic-elevation-card-hover, 0 8px 24px rgba(20, 20, 20, 0.08));
}

.biserok-chapter-showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.85fr);
  gap: var(--primitive-space-6, 24px);
  align-items: center;
}

.biserok-chapter-showcase__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.biserok-chapter-showcase__info h2 {
  font-size: clamp(19px, 2vw, 24px) !important;
  font-weight: var(--primitive-font-weight-extrabold, 800) !important;
  line-height: 1.22 !important;
  margin: 0 0 var(--primitive-space-2, 8px) !important;
  color: var(--semantic-color-text-strong, #111111) !important;
}

.biserok-chapter-showcase__info p {
  font-size: var(--semantic-typography-size-body, 15px);
  line-height: 1.48;
  color: var(--semantic-color-text-secondary, #334155);
  margin: 0 0 var(--primitive-space-3, 12px);
}

.biserok-chapter-showcase__preview svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--semantic-radius-card, 12px);
}

.biserok-stepper-toolbar__nav,
.biserok-stepper-toolbar__toggles {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-2, 8px);
}

.biserok-stepper-counter {
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  color: var(--semantic-color-text-secondary, #334155);
}

.biserok-anchor-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--primitive-space-1-5, 6px);
}

.biserok-anchor-dots .biserok-anchor-dot {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  border-radius: var(--semantic-radius-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  background: var(--semantic-color-surface-card, #FFFFFF);
  color: var(--semantic-color-text-primary, #141414);
  border: 1px solid var(--semantic-color-border-default, #CBD5E1);
  cursor: pointer;
}

.biserok-anchor-dots .biserok-anchor-dot.is-current,
.biserok-anchor-dots .biserok-anchor-dot.is-active {
  background: var(--semantic-color-action-primary, #E30016);
  color: var(--semantic-color-text-inverse, #FFFFFF);
  border-color: var(--semantic-color-action-primary, #E30016);
}

.biserok-bead-stepper {
  background: transparent;
  border: 0;
  padding: 0;
}

.biserok-stepper-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--primitive-space-2, 8px);
  margin-bottom: var(--primitive-space-3, 12px);
}

.biserok-stepper-toolbar__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-space-1-5, 6px);
}

.biserok-stepper-toolbar__controls {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-1-5, 6px);
}

.biserok-stepper-btn,
.biserok-stepper-nav {
  min-width: 38px;
  min-height: 38px;
  padding: var(--primitive-space-1, 4px) var(--primitive-space-2-5, 10px);
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  background: var(--semantic-color-surface-card, #FFFFFF);
  color: var(--semantic-color-text-primary, #141414);
  border: 1px solid var(--semantic-color-border-default, #E2E8F0);
  border-radius: var(--primitive-radius-xs, 6px);
  cursor: pointer;
}

.biserok-stepper-btn.is-active {
  background: var(--semantic-color-action-primary, #E30016);
  color: var(--semantic-color-text-inverse, #FFFFFF);
  border-color: var(--semantic-color-action-primary, #E30016);
}

.biserok-stepper-canvas {
  overflow: hidden;
  border-radius: var(--semantic-radius-card, 12px);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  background: var(--semantic-color-surface-card, #FFFFFF);
}

.biserok-stepper-canvas svg {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.25s ease;
  transform-origin: center center;
}

.biserok-stepper-canvas.is-zoomed svg {
  transform: scale(1.85);
}

.biserok-stepper-status {
  margin-top: var(--primitive-space-2, 8px);
  padding: var(--primitive-space-2, 8px) var(--primitive-space-1, 4px);
  background: transparent;
  border: 0;
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  font-weight: var(--primitive-font-weight-semibold, 600);
  color: var(--semantic-color-text-secondary, #334155);
  line-height: var(--primitive-font-lineheight-snug, 1.4);
}

.biserok-stepper-status__tension {
  color: var(--semantic-color-text-info, #0B5CAB);
  font-weight: var(--primitive-font-weight-semibold, 600);
}

/* Thread & Bead SVG State Rules (ADR-003) */
.biserok-thread-seg {
  transition: opacity 0.2s ease, stroke-width 0.2s ease;
}

.biserok-thread-seg.is-future {
  opacity: 0.14 !important;
  stroke-dasharray: 4 5;
}

.biserok-thread-seg.is-settled {
  opacity: 0.88 !important;
}

.biserok-thread-seg.is-active {
  opacity: 1 !important;
  stroke-width: 4px;
}

.bead-node {
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.bead-node.is-ghost {
  opacity: 0.25;
}

.bead-node.is-picking .biserok-bead-hit-target {
  stroke: var(--semantic-color-border-focus, #0B5CAB);
  stroke-width: 2px;
}

.bead-node.is-repassing .biserok-bead-hit-target {
  stroke: var(--semantic-color-border-focus, #0B5CAB);
  stroke-width: 2px;
}

.biserok-bead-hit-target {
  pointer-events: all;
}

/* ==========================================================================
   5. DEFECT X-RAY (P-04), THREAD EXERCISE (P-06), SCALE CALIBRATOR (P-05/P-08)
   ========================================================================== */

.biserok-defect-xray,
.biserok-thread-exercise,
.biserok-scale-calibrator,
.biserok-material-passport,
.biserok-word-chart-block {
  background: var(--semantic-color-surface-page, #FAF9F6);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-card, 12px);
  padding: var(--primitive-space-3, 12px);
  font-family: var(--semantic-typography-font-ui);
}

.biserok-xray-panel,
.biserok-exercise-panel,
.biserok-calibrator-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-family: var(--semantic-typography-font-ui);
}

.biserok-xray-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--primitive-space-2, 8px);
}

.biserok-xray-tab {
  min-height: 36px;
  padding: 6px 12px;
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-default, #E2E8F0);
  border-radius: var(--primitive-radius-xs, 6px);
  cursor: pointer;
}

.biserok-xray-tab.is-active {
  background: var(--semantic-color-action-secondary, #141414);
  color: var(--semantic-color-text-inverse, #FFFFFF);
}

.biserok-xray-panel {
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  line-height: 1.48;
}

.biserok-xray-hint {
  margin-top: var(--primitive-space-2, 8px);
  font-size: var(--semantic-typography-size-caption, 11px);
  color: var(--semantic-color-text-muted, #64748B);
}

.biserok-exercise-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.biserok-exercise-badge {
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  color: var(--semantic-color-text-brand, #E30016);
}

.biserok-exercise-targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
}

.biserok-ex-target-btn,
.biserok-ex-reset-btn,
.biserok-ex-explain-btn {
  min-height: 40px;
  padding: 6px 14px;
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-default, #E2E8F0);
  border-radius: var(--primitive-radius-xs, 6px);
  cursor: pointer;
}

.biserok-ex-target-btn:hover {
  border-color: var(--semantic-color-border-focus, #0B5CAB);
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
}

.biserok-exercise-feedback {
  padding: 10px 12px;
  border-radius: var(--primitive-radius-xs, 6px);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  font-weight: var(--primitive-font-weight-semibold, 600);
}

.biserok-exercise-feedback.is-correct {
  background: var(--semantic-color-status-success-bg, #F0FDF4);
  color: var(--semantic-color-status-success-text, #166534);
  border: 1px solid var(--primitive-color-green-600, #15803D);
}

.biserok-exercise-feedback.is-wrong {
  background: var(--semantic-color-status-danger-bg, #FFF1F2);
  color: var(--semantic-color-status-danger-text, #C20013);
  border: 1px solid var(--primitive-color-red-600, #E30016);
}

.biserok-calibrator-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--primitive-space-2-5, 10px);
  margin: var(--primitive-space-2-5, 10px) 0;
  font-size: var(--semantic-typography-size-meta, 12px);
}

.biserok-bead-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--primitive-space-2, 8px);
  margin-bottom: var(--primitive-space-3, 12px);
}

.biserok-bead-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--primitive-space-1, 4px);
  padding: var(--primitive-space-2, 8px);
  background: var(--semantic-color-surface-card, #FFFFFF) !important;
  color: var(--semantic-color-text-primary, #141414) !important;
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8) !important;
  border-radius: var(--semantic-radius-control, 10px);
  cursor: pointer;
  text-align: center;
  font-family: var(--semantic-typography-font-ui);
}

.biserok-bead-card:hover {
  border-color: var(--semantic-color-border-focus, #0B5CAB) !important;
}

.biserok-bead-card.is-active {
  background: var(--semantic-color-surface-info-tint, #EFF6FF) !important;
  border-color: var(--semantic-color-border-focus, #0B5CAB) !important;
  color: var(--semantic-color-text-strong, #111111) !important;
}

.biserok-book-quiz {
  margin-top: var(--primitive-space-3, 12px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.biserok-book-quiz__question {
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-body, 15px) !important;
  font-weight: var(--primitive-font-weight-bold, 700) !important;
  line-height: var(--primitive-font-lineheight-snug, 1.38) !important;
  color: var(--semantic-color-text-strong, #111111) !important;
  margin: 0 0 var(--primitive-space-3, 12px) !important;
}

.biserok-book-quiz__options {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-2, 8px);
}

.biserok-book-quiz__opt {
  display: flex !important;
  align-items: center;
  gap: var(--primitive-space-3, 12px);
  width: 100%;
  text-align: left;
  padding: var(--primitive-space-2-5, 10px) var(--primitive-space-3, 12px) !important;
  background: var(--semantic-color-surface-card, #FFFFFF) !important;
  color: var(--semantic-color-text-primary, #141414) !important;
  border: 1px solid var(--semantic-color-border-default, #CBD5E1) !important;
  border-radius: var(--semantic-radius-control, 10px) !important;
  font-family: var(--semantic-typography-font-ui) !important;
  font-size: var(--semantic-typography-size-body-sm, 13.5px) !important;
  font-weight: var(--primitive-font-weight-semibold, 600) !important;
  line-height: var(--primitive-font-lineheight-snug, 1.38) !important;
  cursor: pointer;
}

.biserok-book-quiz__opt:hover {
  background: var(--semantic-color-surface-info-tint, #EFF6FF) !important;
  border-color: var(--semantic-color-border-focus, #0B5CAB) !important;
}

.biserok-book-quiz__letter {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: var(--semantic-radius-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  color: var(--semantic-color-text-info, #0B5CAB);
  border: 1px solid var(--semantic-color-border-info, #BAE6FD);
}

.biserok-book-quiz__opt.is-correct {
  background: var(--semantic-color-status-success-bg, #F0FDF4) !important;
  border-color: var(--primitive-color-green-600, #15803D) !important;
  color: var(--semantic-color-status-success-text, #166534) !important;
}

.biserok-book-quiz__opt.is-wrong {
  background: var(--semantic-color-status-danger-bg, #FFF1F2) !important;
  border-color: var(--primitive-color-red-600, #E30016) !important;
  color: var(--semantic-color-status-danger-text, #C20013) !important;
}

.biserok-book-quiz__feedback {
  margin-top: var(--primitive-space-2-5, 10px);
  padding: var(--primitive-space-2-5, 10px) var(--primitive-space-3, 12px);
  border-radius: var(--primitive-radius-xs, 6px);
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  font-weight: var(--primitive-font-weight-semibold, 600);
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  color: var(--semantic-color-text-primary, #141414);
}

.biserok-bead-card__title {
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  color: var(--semantic-color-text-strong, #111111);
}

.biserok-bead-card__sub {
  font-size: var(--semantic-typography-size-caption, 11px);
  color: var(--semantic-color-text-muted, #64748B);
}

.biserok-calibrator-sliders {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-2, 8px);
  margin-bottom: var(--primitive-space-3, 12px);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.biserok-calibrator-control {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(180px, 1.4fr);
  align-items: center;
  gap: var(--primitive-space-3, 12px);
  padding: var(--primitive-space-1-5, 6px) 0;
  border-bottom: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
}

.biserok-calibrator-control:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.biserok-calibrator-control__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--semantic-typography-size-meta, 12px);
  color: var(--semantic-color-text-secondary, #334155);
}

.biserok-calibrator-control__head strong {
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  color: var(--semantic-color-text-info, #0B5CAB);
}

.biserok-calibrator-control__bar {
  display: flex;
  align-items: center;
  gap: var(--primitive-space-2, 8px);
}

.biserok-calibrator-range {
  flex: 1;
  width: 100%;
  accent-color: var(--semantic-color-border-focus, #0B5CAB);
  cursor: pointer;
}

.biserok-calibrator-passes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--primitive-space-2, 8px);
}

.biserok-calibrator-passes .ds-btn.is-active {
  background: var(--semantic-color-action-primary, #E30016);
  color: var(--semantic-color-text-inverse, #FFFFFF);
  border-color: var(--semantic-color-action-primary, #E30016);
}

.biserok-calibrator-visuals {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--primitive-space-3, 12px);
  margin-bottom: var(--primitive-space-3, 12px);
}

.biserok-calibrator-visual-card {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-card, 12px);
  padding: var(--primitive-space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-2, 8px);
}

.biserok-calibrator-visual-card__title {
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  color: var(--semantic-color-text-strong, #111111);
}

/* Hide duplicate step dots and zoom toggle on desktop because left-column step cards already show 1..4 */
.biserok-anchor-dots,
[data-stepper-action="zoom"] {
  display: none !important;
}

/* Hide duplicate step status caption on desktop because the active left-column step card already highlights it */
@media (min-width: 768px) {
  .biserok-stepper-status {
    display: none !important;
  }
}

/* Hide duplicate text specs below Bore SVG because the SVG itself displays channel Ø, needle, and passes */
.biserok-material-passport__specs {
  display: none !important;
}

.biserok-calibrator-result {
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  border: 1px solid var(--semantic-color-border-info, #BAE6FD);
  border-radius: var(--primitive-radius-xs, 6px);
  padding: var(--primitive-space-2-5, 10px) var(--primitive-space-3, 12px);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
  color: var(--semantic-color-text-primary, #141414);
}

.biserok-ba-svg {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--primitive-space-2, 8px);
  border-radius: var(--primitive-radius-xs, 6px);
}

.biserok-xray-card__title {
  font-weight: var(--primitive-font-weight-bold, 700);
  margin: var(--primitive-space-2, 8px) 0;
  color: var(--semantic-color-text-strong, #111111);
}

.biserok-xray-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--primitive-space-2-5, 10px);
}

.biserok-xray-step {
  background: var(--semantic-color-surface-card, #FFFFFF);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--primitive-radius-sm, 10px);
  padding: var(--primitive-space-2-5, 10px);
}

.biserok-xray-step span {
  display: block;
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-bold, 700);
  margin-bottom: var(--primitive-space-1, 4px);
  color: var(--semantic-color-text-info, #0B5CAB);
}

.biserok-xray-step p {
  margin: 0;
  font-size: var(--semantic-typography-size-meta, 12px);
  line-height: var(--primitive-font-lineheight-snug, 1.4);
}

.biserok-param-capsule,
.biserok-inline-param {
  display: inline-flex;
  align-items: center;
  gap: var(--primitive-space-1-5, 6px);
  padding: 2px var(--primitive-space-2-5, 10px);
  background: var(--semantic-color-surface-info-tint, #EFF6FF);
  color: var(--semantic-color-text-info, #0B5CAB);
  border: 1px solid var(--semantic-color-border-info, #BAE6FD);
  border-radius: var(--semantic-radius-pill, 999px);
  font-family: var(--semantic-typography-font-ui);
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  cursor: pointer;
}

/* ==========================================================================
   6. MARGINALIA FACTOIDS (P-09, P-10) & SKIPPED SPREAD PLACEHOLDER (P-12)
   ========================================================================== */

.biserok-book-factoid {
  background: var(--semantic-color-surface-page, #FAF9F6);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--semantic-radius-card, 12px);
  padding: var(--primitive-space-3, 12px);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
}

.biserok-book-factoid__kicker {
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  text-transform: uppercase;
  color: var(--semantic-color-text-brand, #E30016);
  margin-bottom: 4px;
}

.biserok-book-factoid__title {
  margin: 0 0 6px;
  font-size: 14px;
}

.biserok-book-factoid--warning {
  background: var(--semantic-color-status-warn-bg, #FFFBEB);
  border-color: var(--primitive-color-amber-600, #D97706);
}

.biserok-book-spread--skipped {
  background: linear-gradient(180deg, var(--semantic-color-surface-card, #FFFFFF) 0%, var(--semantic-color-surface-muted, #F4F3EF) 100%);
  border: 2px dashed var(--semantic-color-border-default, #CBD5E1);
}

.biserok-skipped-card {
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.biserok-skipped-card__title {
  font-size: clamp(18px, 1.9vw, 22px) !important;
  font-weight: var(--primitive-font-weight-extrabold, 800) !important;
  line-height: 1.25 !important;
  margin: 0 0 var(--primitive-space-2, 8px) !important;
  color: var(--semantic-color-text-strong, #111111) !important;
}

.biserok-skipped-card__lead {
  font-size: var(--semantic-typography-size-body, 15px);
  line-height: 1.48;
  color: var(--semantic-color-text-secondary, #334155);
  margin: 0 0 var(--primitive-space-3, 12px);
}

.biserok-skipped-card__badge {
  display: inline-block;
  font-size: var(--semantic-typography-size-caption, 11px);
  font-weight: var(--primitive-font-weight-extrabold, 800);
  color: var(--semantic-color-status-warn-text, #B45309);
  background: var(--semantic-color-status-warn-bg, #FFFBEB);
  padding: 4px 12px;
  border-radius: var(--semantic-radius-pill, 999px);
  margin-bottom: 10px;
}

.biserok-skipped-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}

.biserok-skipped-restore__form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.biserok-skipped-restore__input {
  padding: 8px 12px;
  border: 1px solid var(--semantic-color-border-default, #CBD5E1);
  border-radius: var(--primitive-radius-xs, 6px);
  font-size: var(--semantic-typography-size-body-sm, 13.5px);
}

/* ==========================================================================
   7. MODAL NAVIGATOR & MENDELEEV MATRIX (P-11)
   ========================================================================== */

.biserok-book-nav-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.biserok-book-nav-modal[hidden] {
  display: none !important;
}

.biserok-book-nav-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.55);
}

.biserok-book-nav-modal__box,
.biserok-book-nav-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--semantic-color-surface-card, #FFFFFF);
  border-radius: var(--semantic-radius-section, 16px);
  padding: var(--primitive-space-6, 24px);
  box-shadow: var(--semantic-elevation-card-hover, 0 8px 24px rgba(20, 20, 20, 0.08));
}

.biserok-book-nav-modal__header,
.biserok-book-nav-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--primitive-space-3, 12px);
}

.biserok-book-nav-tabs,
.biserok-book-nav-modal__tabs {
  display: flex;
  gap: var(--primitive-space-2, 8px);
  margin-bottom: var(--primitive-space-3, 12px);
}

.biserok-nav-tab {
  padding: var(--primitive-space-1-5, 6px) var(--primitive-space-3, 12px);
  border-radius: var(--semantic-radius-pill, 999px);
  border: 1px solid var(--semantic-color-border-default, #CBD5E1);
  background: var(--semantic-color-surface-page, #FAF9F6);
  font-size: var(--semantic-typography-size-meta, 12px);
  font-weight: var(--primitive-font-weight-bold, 700);
  cursor: pointer;
}

.biserok-nav-tab.is-active {
  background: var(--semantic-color-action-secondary, #141414);
  color: var(--semantic-color-text-inverse, #FFFFFF);
}

.biserok-book-nav-search,
.biserok-book-nav-search__input {
  width: 100%;
  padding: var(--primitive-space-2-5, 10px) var(--primitive-space-3, 12px);
  border: 1px solid var(--semantic-color-border-default, #CBD5E1);
  border-radius: var(--primitive-radius-sm, 10px);
  margin-bottom: var(--primitive-space-3, 12px);
}

.biserok-stitch-classifier-grid,
.biserok-mendeleev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--primitive-space-2-5, 10px);
}

.biserok-mendeleev-cell {
  display: flex;
  flex-direction: column;
  gap: var(--primitive-space-1, 4px);
  padding: var(--primitive-space-3, 12px);
  border: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  border-radius: var(--primitive-radius-sm, 10px);
  text-decoration: none;
  color: var(--semantic-color-text-primary, #141414);
  background: var(--semantic-color-surface-page, #FAF9F6);
}

.biserok-mendeleev-cell__code {
  font-size: var(--semantic-typography-size-title-sm, 17px);
  font-weight: var(--primitive-font-weight-black, 900);
  color: var(--semantic-color-text-brand, #E30016);
}

/* ==========================================================================
   8. BLIND LOOM TEST MODE (?blind_test=1) & WORKBENCH HANDS-FREE MODE (FM-01)
   ========================================================================== */

biserok-book-reader.is-blind-test-mode .biserok-book-spread__prose p,
biserok-book-reader.is-blind-test-mode .biserok-book-spread__marginalia,
biserok-book-reader.is-blind-test-mode .biserok-inline-tech-factoid {
  display: none !important;
}

biserok-book-reader.is-blind-test-mode .biserok-book-spread__grid,
biserok-book-reader.is-blind-test-mode .biserok-book-spread__grid.biserok-soviet-BodyGrid {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS (1080px, 768px, 375px) & REDUCED MOTION
   ========================================================================== */

@media (max-width: 1079px) {
  .biserok-book-hero__top,
  .biserok-chapter-showcase,
  .biserok-book-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .biserok-book-spread__grid,
  .biserok-book-spread__grid.biserok-soviet-BodyGrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .biserok-book-spread__marginalia {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 767px) {
  .biserok-books-container {
    padding: var(--primitive-space-4, 16px) var(--semantic-layout-gutter-mobile, 12px);
  }

  .biserok-book-spread {
    padding: var(--primitive-space-4, 16px);
  }

  .biserok-book-spread__grid,
  .biserok-book-spread__grid.biserok-soviet-BodyGrid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .biserok-book-spread__stage {
    order: -1;
    position: sticky;
    top: 56px;
    z-index: 20;
    background: var(--semantic-color-surface-card, #FFFFFF);
    padding-bottom: var(--primitive-space-1-5, 6px);
    border-bottom: 1px solid var(--semantic-color-border-subtle, #E5E0D8);
  }

  /* Mobile Mode A: Sticky stage capped at 28vh so >= 50% of 375x667 viewport stays open for prose (SPEC §7.3) */
  .biserok-spread__canvas-sticky {
    height: 28vh;
    min-height: 176px;
    max-height: 220px;
    overflow: hidden;
  }

  /* Mobile Mode B: Hands-Free Workbench / Loom Mode on Mobile (FM-01 mitigation) */
  biserok-book-reader.is-workbench-mode .biserok-book-spread__stage,
  biserok-book-reader[data-mobile-mode="loom"] .biserok-book-spread__stage {
    min-height: 64vh;
  }

  biserok-book-reader.is-workbench-mode .biserok-spread__canvas-sticky,
  biserok-book-reader[data-mobile-mode="loom"] .biserok-spread__canvas-sticky {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  biserok-book-reader.is-workbench-mode .biserok-stepper-nav {
    min-width: 56px;
    min-height: 48px;
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .biserok-book-topbar__progress-fill,
  .biserok-step-anchor,
  .biserok-stepper-canvas svg,
  .biserok-thread-seg,
  .bead-node {
    transition: none !important;
  }
}