/* ==========================================================================
   doc.css — „хартията“. Генерираният ресурс изглежда като документ,
   не като тъмен интерфейс. Това е съзнателно: учителят го чете, печата
   и носи в клас.
   ========================================================================== */

.doc-page {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(1.5rem, .9rem + 2.4vw, 3.25rem);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  font-family: var(--font-editorial);
  font-size: 1rem;
  line-height: 1.68;
}

/* ------------------------------------------------------------- Заглавие -- */
.doc-head {
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--text);
}
.doc-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.doc-title {
  font-family: var(--font-editorial);
  font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.35rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.015em;
  color: var(--text);
}
/* Инструкция към ученика — заменя лентата с критерии */
.doc-instructions {
  margin-top: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- Секции -- */
.doc-section + .doc-section { margin-top: var(--sp-7); }

.doc-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.doc-section__title {
  font-family: var(--font-ui);
  font-size: 1.06rem;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--text);
}
.doc-section__tools {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-ui);
}
.doc-minutes {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--brand-700);
  background: rgb(var(--brand-rgb) / 0.1);
  padding: .2rem .55rem;
  border-radius: var(--r-pill);
}
.doc-tag {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  border: 1px dashed var(--line-strong);
  padding: .16rem .5rem;
  border-radius: var(--r-pill);
}
.doc-edit-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-muted);
  padding: .24rem .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.doc-edit-btn:hover { color: var(--brand-600); border-color: var(--brand-500); }

.doc-section--teacher {
  background: var(--surface-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.doc-section__body > * + * { margin-top: var(--sp-3); }

/* --------------------------------------------------------------- Блокове - */
.doc-p { margin: 0; }

.doc-quote {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-3);
  border-left: 3px solid var(--brand-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.5;
}
.doc-quote p { margin: 0; }

.doc-list { padding-left: 1.15rem; }
.doc-list li { list-style: disc; margin-bottom: .35rem; }
.doc-list--num li { list-style: decimal; }
.doc-list--check { padding-left: 0; }
.doc-list--check li {
  list-style: none;
  position: relative;
  padding-left: 1.7rem;
}
.doc-list--check li::before {
  content: "";
  position: absolute; left: 0; top: .42em;
  width: 13px; height: 13px;
  border: 1.5px solid var(--text-muted);
  border-radius: 3px;
}

.doc-kv { margin: 0; }
.doc-kv__row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: var(--sp-3);
  padding: .42rem 0;
  border-bottom: 1px dotted var(--line-strong);
}
.doc-kv__row:last-child { border-bottom: 0; }
.doc-kv dt {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}
.doc-kv dd { margin: 0; }
@media (max-width: 560px) {
  .doc-kv__row { grid-template-columns: 1fr; gap: .1rem; }
}

.doc-table-wrap { overflow-x: auto; }
.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  min-width: 460px;
}
.doc-table th, .doc-table td {
  border: 1px solid var(--line-strong);
  padding: .55rem .7rem;
  text-align: left;
  vertical-align: top;
}
.doc-table th {
  background: var(--surface-3);
  font-weight: 650;
  font-size: var(--fs-xs);
  letter-spacing: .01em;
}
.doc-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.018); }

.doc-callout {
  display: flex; gap: .7rem;
  padding: .85rem 1rem;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.55;
  border: 1px solid;
}
.doc-callout p { margin: .1rem 0 0; }
.doc-callout__icon { flex: none; margin-top: .1rem; }
.doc-callout__title { display: block; font-weight: 650; }
.doc-callout--info { background: rgba(122,167,255,.09); border-color: rgba(122,167,255,.3); }
.doc-callout--info .doc-callout__icon { color: #3d6fd1; }
.doc-callout--tip  { background: rgb(var(--brand-rgb) / 0.08); border-color: rgb(var(--brand-rgb) / 0.28); }
.doc-callout--tip .doc-callout__icon { color: var(--brand-600); }
.doc-callout--warn { background: rgba(214,150,0,.1); border-color: rgba(214,150,0,.32); }
.doc-callout--warn .doc-callout__icon { color: #a87400; }

/* ---------------------------------------------------------------- Долу --- */
.doc-foot {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-strong);
}
.doc-foot .doc-section__title { margin-bottom: var(--sp-3); }

.doc-colophon {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-faint);
  text-align: center;
}

/* Компактен вариант за преглед в карти */
.doc-page--preview {
  font-size: .92rem;
  padding: var(--sp-5);
  box-shadow: none;
}
.doc-page--preview .doc-title { font-size: 1.35rem; }

/* ==========================================================================
   Реални задачи за ученика — полета за писане, каре за решение, отговори.
   Всичко тук е проектирано първо за печат върху A4, после за екран.
   ========================================================================== */

/* Полета за име, клас и дата */
.doc-nameline {
  display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6);
  padding: .85rem 0;
  margin-bottom: var(--sp-4);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.doc-nameline__field { display: flex; align-items: baseline; gap: .5rem; flex: 1 1 auto; }
.doc-nameline__label { color: var(--text-muted); white-space: nowrap; }
.doc-nameline__rule {
  flex: 1;
  border-bottom: 1px solid var(--text-muted);
  height: 1.1em;
}

/* Кратък текст за четене */
.doc-passage {
  padding: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-3);
}
.doc-passage__lead {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 .6rem;
}
.doc-passage__title {
  font-family: var(--font-editorial);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: .6rem;
  text-align: center;
}
.doc-passage__body p { margin: 0 0 .7rem; text-indent: 1.4em; }
.doc-passage__body p:last-child { margin-bottom: 0; }

/* Списък със задачи */
.doc-exercises { padding: 0; margin: 0; }
.doc-ex { list-style: none; }
.doc-ex + .doc-ex { margin-top: var(--sp-5); }
.doc-ex--break { break-before: page; }

.doc-ex__head { display: flex; gap: .8rem; align-items: flex-start; }
.doc-ex__n {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: .1rem;
}
.doc-ex__prompt { flex: 1; min-width: 0; display: flex; gap: var(--sp-4); align-items: flex-start; }
.doc-ex__q { margin: 0; flex: 1; }
.doc-ex__points {
  flex: none;
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  font-weight: 650;
  color: var(--text-muted);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: .1rem .5rem;
  white-space: nowrap;
}
.doc-ex__note {
  font-family: var(--font-ui);
  font-size: var(--fs-micro);
  color: var(--text-faint);
}
.doc-ex__body { margin-left: calc(26px + .8rem); margin-top: .5rem; }
.doc-ex__body > * + * { margin-top: .5rem; }

/* Редове за писане */
.doc-writing { display: flex; flex-direction: column; gap: 1.35rem; padding-top: .45rem; }
.doc-rule { display: block; height: 0; border-bottom: 1px solid var(--line-strong); }

/* Каре за решение */
.doc-workbox {
  position: relative;
  min-height: 88px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  background:
    repeating-linear-gradient(
      transparent, transparent 26px,
      rgba(24,20,14,.05) 26px, rgba(24,20,14,.05) 27px
    );
}
.doc-drawbox {
  position: relative;
  min-height: 150px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xs);
  background-image:
    linear-gradient(rgba(24,20,14,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,20,14,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}
.doc-workbox__label {
  position: absolute; top: 5px; left: 8px;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Отговор върху линия в текста */
.doc-slot {
  display: inline-block;
  border-bottom: 1px solid var(--text-muted);
  height: 1.05em;
  vertical-align: baseline;
}

/* Въпрос с избираем отговор */
.doc-choices { padding: 0; margin: 0; display: flex; flex-direction: column; gap: .42rem; }
.doc-choice {
  list-style: none;
  display: flex; align-items: flex-start; gap: .6rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.doc-choice__box {
  flex: none;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--text-muted);
  border-radius: 50%;
  font-size: var(--fs-micro);
  font-weight: 650;
}

/* Вярно / невярно */
.doc-tf { padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.doc-tf__row {
  list-style: none;
  display: flex; align-items: flex-start; gap: .7rem;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
.doc-tf__marks { display: flex; gap: .3rem; flex: none; }
.doc-tf__box {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--text-muted);
  border-radius: 4px;
  font-size: var(--fs-micro);
  font-weight: 650;
  color: var(--text-faint);
}

/* Свързване на две колони */
.doc-match {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
}
@media (max-width: 560px) { .doc-match { grid-template-columns: 1fr; gap: var(--sp-3); } }
.doc-match__col { padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.doc-match__col li { list-style: none; display: flex; gap: .45rem; align-items: flex-start; }
.doc-match__key { font-weight: 700; flex: none; }
.doc-match__answers { margin-top: .7rem; font-family: var(--font-ui); }
.doc-match__slot { display: inline-block; margin-right: .9rem; white-space: nowrap; }

/* Ключ с отговори */
.doc-key { padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.doc-key__row {
  list-style: none;
  display: flex; gap: .6rem; align-items: flex-start;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.doc-key__n {
  flex: none;
  min-width: 22px;
  font-weight: 700;
  color: var(--brand-700);
}
.doc-key__a { flex: 1; }

/* Кутийки за код или точки */
.doc-codeboxes { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.doc-codeboxes__row { display: flex; gap: .45rem; }
.doc-codebox {
  display: grid; place-items: center;
  width: 38px; height: 46px;
  border: 2px solid var(--text);
  border-radius: var(--r-xs);
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: 700;
}

/* Таблица за разшифроване */
.doc-decoder {
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  min-width: 260px;
}
.doc-decoder th, .doc-decoder td {
  border: 1px solid var(--line-strong);
  padding: .4rem .7rem;
  text-align: left;
}
.doc-decoder th { background: var(--surface-3); font-size: var(--fs-xs); font-weight: 650; }
.doc-decoder__digit { text-align: center; font-weight: 700; font-size: 1.05rem; }

.doc-section__intro {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

/* Нова страница при печат — за ключа и вариант Б */
@media print {
  .doc-section--break { break-before: page; page-break-before: always; }
  .doc-ex { break-inside: avoid; page-break-inside: avoid; }
  .doc-passage { break-inside: avoid; }
}