/* «Задачи»: страница решателя. Токены, кнопки, чипы и шапка — из ../styles.css.
   Решение оформлено как лист контрольной: «Дано», «Решение» с формулами моноширинным, «Ответ» выделен. */

.topbar-tag { padding-left: 10px; border-left: 1px solid var(--line-strong); font-size: 15px; color: var(--text-2); }
a.brand { color: var(--text); }

.tasks .input {
  min-height: 48px;
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.tasks .task-text {
  display: block;
  min-height: 160px;
  resize: vertical;
  line-height: 1.5;
}
.tasks .sub { margin-top: 10px; color: var(--text-2); font-size: 17px; max-width: 56ch; }
.tasks .hint { margin-top: 10px; color: var(--text-2); font-size: 14px; }
.tasks .muted { color: var(--text-2); }
.tasks .small { font-size: 14px; }

.tasks-hero { padding: 16px 0 24px; }
.tasks-hero h1,
.flow-head h1 { margin-top: 8px; font-size: clamp(30px, 7vw, 44px); line-height: 1.05; }
.flow-head { padding: 8px 0 20px; }

.field-label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 15px; }

.task-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.task-actions .btn { flex: 1 1 220px; }

.examples-wrap { margin-top: 36px; }
.examples-wrap .section-title,
.history .section-title { margin-bottom: 12px; }
.examples .chip { text-align: left; }

/* ---------- Ожидание ---------- */

.solving { padding: 56px 0 24px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.solving-title { font-size: clamp(26px, 6vw, 36px); }
.solve-status { font-size: 17px; min-height: 1.5em; }
.solving-mark { display: inline-flex; gap: 8px; }
.solving-mark span {
  width: 10px; height: 10px; border-radius: 999px; background: var(--money);
  animation: pulse 1.2s ease-in-out infinite;
}
.solving-mark span:nth-child(2) { animation-delay: .15s; }
.solving-mark span:nth-child(3) { animation-delay: .3s; }

/* ---------- Проверка «Дано» ---------- */

.confirm { display: grid; gap: 18px; }
.confirm-grid { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.confirm-grid .field-wide { grid-column: 1 / -1; }
.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 15px; }
.edit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: given; }
.edit-list li { display: flex; gap: 6px; align-items: center; }
.edit-list .input { flex: 1; min-width: 0; }
.warn-text { color: var(--amber) !important; }
.note-box {
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: 18px; padding: 12px 14px;
  border-radius: var(--r-card); font-size: 15px;
}
.note-box.warn { background: var(--amber-soft); color: var(--text); }
.note-box.warn > .icon { color: var(--amber); margin-top: 2px; }
.note-box ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
details.more .task-text { margin-top: 8px; }

/* ---------- Лист с решением ---------- */

.sheet-paper {
  padding: 24px 22px;
  border-radius: var(--r-hero);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--highlight), var(--shadow);
}
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sheet-head h1 { margin-top: 6px; font-size: clamp(26px, 6vw, 34px); line-height: 1.1; }
.conf {
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2);
}
.conf-high { background: var(--money-soft); color: var(--money); }
.conf-low { background: var(--amber-soft); color: var(--amber); }

.problem { margin-top: 8px; }
.problem-text { margin-top: 6px; color: var(--text-2); font-size: 15px; white-space: pre-wrap; }

.sol-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.sol-block > h2,
.meta-block > h2 {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}
.given { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; }
.given li::marker { color: var(--text-2); }

.part-title { margin-top: 18px; font-size: 18px; font-weight: 600; }
.sol-steps { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 14px; }
.sol-step { padding-left: 2px; }
.sol-step-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sol-step-head h3 { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; flex: 1; min-width: 0; }
.sol-num { color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 1.6em; }
.sol-expl { margin: 4px 0 0 calc(1.6em + 8px); color: var(--text-2); font-size: 15px; }
.formula {
  margin: 8px 0 0 calc(1.6em + 8px);
  padding: 10px 12px;
  border-radius: var(--r-input);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.step-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.step-check .icon { width: 14px; height: 14px; }
.step-check.ok { color: var(--money); }
.step-check.bad { color: var(--amber); }
.sol-step.is-bad .formula { box-shadow: inset 3px 0 0 var(--amber); }
.sol-warn { margin: 6px 0 0 calc(1.6em + 8px); color: var(--amber); font-size: 14px; }

.answer-block {
  margin: 24px -8px 0;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--money) 40%, transparent);
  border-radius: var(--r-card);
  background: var(--money-soft);
}
.answer-block > h2 { color: var(--money); }
.answer { margin-top: 8px; font-size: 18px; line-height: 1.45; }
.answer strong, .answers strong { color: var(--money); font-weight: 700; }
.answers { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: 16px; }

.check-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 15px; }
.check-line .icon { margin-top: 2px; }
.check-line.ok .icon { color: var(--money); }
.check-line.warn { color: var(--text); }
.check-line.warn .icon { color: var(--amber); }

.meta { margin-top: 12px; font-size: 14px; color: var(--text-2); }
.meta-block { margin-top: 18px; }
.meta-block ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }

/* ---------- История ---------- */

.history { margin-top: 36px; }
.history-head { display: flex; justify-content: space-between; align-items: center; }
.history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history-item {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  text-align: left;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: border-color .2s, transform .15s var(--ease);
}
.history-item:hover { border-color: var(--line-strong); }
.history-item:active { transform: scale(.99); }
.history-text {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15px;
}
.history-meta { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-2); }
.history-ok { color: var(--money); display: inline-flex; }
.history-ok .icon { width: 14px; height: 14px; }

@media (max-width: 520px) {
  .sheet-paper { padding: 18px 14px; border-radius: var(--r-card); }
  .sol-expl, .formula, .sol-warn { margin-left: 0; }
  .answer-block { margin: 20px -4px 0; padding: 14px; }
  .confirm-grid { grid-template-columns: 1fr 96px; }
  .topbar-tag { display: none; }
}

/* ---------- Печать: только лист решения ---------- */

/* ---------- Лёгкий вид ---------- */
.tasks-hero { padding: 20px 0 16px; }
.tasks-hero h1, .flow-head h1 { margin-top: 0; font-size: clamp(26px, 4vw, 34px); line-height: 1.15; letter-spacing: -.02em; }
.tasks .sub { margin-top: 6px; font-size: 16px; }
.tasks .task-text { min-height: 140px; background: none; border-color: var(--line); }
.tasks .task-text:focus { border-color: var(--line-strong); }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 10px; font-size: 14px; }
.examples .muted { margin-right: 4px; }
.quiet-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 6px;
  border: 0; background: none; color: var(--text-2); font-size: 14px;
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px;
}
.quiet-link:hover { color: var(--text); }
.quiet-link .icon { width: 16px; height: 16px; }
.task-actions { align-items: center; gap: 12px; margin-top: 16px; }
.task-actions .btn { flex: 0 0 auto; min-width: 160px; }
.history .section-title { font-size: 15px; font-weight: 500; color: var(--text-2); }
.history-item { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 2px; }
.sheet-paper { padding: 8px 0 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.sol-block { margin-top: 20px; padding-top: 16px; }
.sol-block > h2, .meta-block > h2 { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.formula { background: none; padding: 2px 0; color: var(--text); }
.answer-block { margin: 24px 0 0; padding: 16px 18px; border: 0; }
.plan-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }

.confirm { gap: 20px; }
.confirm-row { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1.4fr); }
@media (max-width: 520px) { .confirm-row { grid-template-columns: 1fr 96px; } .confirm-row .field:last-child { grid-column: 1 / -1; } }
.confirm .field label, .fieldset legend { font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 4px; display: block; }
.confirm .input { min-height: 40px; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.confirm .input:focus { border-bottom-color: var(--text); outline: none; box-shadow: none; }
.confirm .task-text { border: 1px solid var(--line); border-radius: var(--r-input); padding: 10px 12px; }
.confirm .edit-list { gap: 2px; }
.confirm .edit-list .icon-btn { opacity: .5; }
.confirm .edit-list li:hover .icon-btn { opacity: 1; }
.assumptions ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }

@media print {
  .tasks-page .topbar, .tasks-page .footer, .tasks-page .history, .tasks-page .plan-actions { display: none !important; }
  .sheet-paper { border: 0; padding: 0; box-shadow: none; }
  .problem { display: block; }
  .problem > summary { display: none; }
  .problem-text { color: #000; }
  .formula { background: #f2f2f2; border: 1px solid #ddd; }
  .answer-block { margin: 16px 0 0; border: 2px solid #000; background: none; break-inside: avoid; }
  .answer strong, .answers strong, .answer-block > h2 { color: #000; }
  .sol-step { break-inside: avoid; }
  .conf { display: none; }
}