/* Страница «Черновик» (правка 449): лист в клетку на всю высоту экрана, под ним — настройки инструмента и панель
   инструментов (палец не меньше 44 px). От 1024 px настройки и задачи — колонкой справа от листа.
   Значения — только переменные из tokens.css. */

.sk-body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.sk-page { overflow-y: auto; }  /* условие задачи и плашки не обрезаются: лишнее прокручивается, лист — нет */
.sk-page { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(240px, 1fr) auto auto; grid-template-areas: "tasks" "board" "panel" "tools";
  gap: var(--sp-2); width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-2) var(--gutter) var(--sp-3); }
.sk-need-login .sk-page > :not(.sk-login) { display: none; }
.sk-login { grid-area: board; align-self: start; }

/* --- Лист --- */
.sk-board { grid-area: board; position: relative; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-block);
  overflow: hidden; background: var(--sheet-out); }
.sk-host { position: absolute; inset: 0; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.sk-host[data-tool="hand"] { cursor: grab; }
.sk-svg { display: block; width: 100%; height: 100%; }
.sk-sheet { fill: var(--sheet); }
.sk-grid { fill: none; stroke: var(--sheet-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-margin { stroke: var(--sheet-margin); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sk-curve { fill: none; stroke: var(--sketch-ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.sk-curve.is-given { stroke: var(--sketch-given); stroke-width: 2.5; }
.sk-curve.is-hot, .sk-pt.is-hot circle { stroke: var(--sketch-hot); }
.sk-pt circle { fill: var(--sketch-point); stroke: var(--sheet); stroke-width: 1.5; }
.sk-pt.is-free circle { fill: var(--sheet); stroke: var(--sketch-point); stroke-width: 2.5; }
.sk-pt.is-given circle { fill: var(--sketch-given); stroke: var(--sheet); }
.sk-label { font-family: var(--font-ui); font-size: var(--fs-15); font-weight: 700; fill: var(--sketch-ink);
  paint-order: stroke; stroke: var(--sheet); stroke-width: 3px; stroke-linejoin: round; }
.sk-pt.is-given .sk-label { fill: var(--sketch-given); }
.sk-label-len, .sk-label-angle, .sk-label-tip { font-size: var(--fs-13); font-weight: 600; text-anchor: middle; }
.sk-label-tip { text-anchor: start; fill: var(--sketch-ghost); }
.sk-angle-arc { fill: none; stroke: var(--sketch-ink); stroke-width: 1.5; }
.sk-angle.is-ghost .sk-angle-arc, .sk-angle.is-ghost .sk-label { stroke: var(--sketch-ghost); }
.sk-angle.is-ghost .sk-label { fill: var(--sketch-ghost); stroke: var(--sheet); }
.sk-ghost { fill: none; stroke: var(--sketch-ghost); stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.sk-snap circle { fill: none; stroke: var(--sketch-ghost); stroke-width: 2; }
.sk-snap.is-point circle, .sk-snap.is-cross circle { stroke: var(--accent); stroke-width: 3; }
.sk-snap.is-free circle { stroke-dasharray: 3 3; }

/* Лупа над пальцем */
.sk-loupe { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--accent); box-shadow: var(--shadow); pointer-events: none; background: var(--sheet-out); }
.sk-loupe svg { display: block; }
.sk-loupe-bg { fill: var(--sheet-out); }
.sk-crosshair { fill: none; stroke: var(--sketch-hot); stroke-width: 2; }

/* Плашки поверх листа: буква точки, подтверждение стирания */
.sk-bar { position: absolute; left: var(--sp-2); right: var(--sp-2); top: var(--sp-2); display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-block); box-shadow: var(--shadow); }
.sk-bar[hidden] { display: none; }
.sk-bar-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.sk-bar-label, .sk-bar-text { font-size: var(--fs-15); color: var(--ink); }
.sk-bar-text { flex: 1 1 100%; }
.sk-bar-msg { flex: 1 1 100%; font-size: var(--fs-13); color: var(--warn); }
.sk-bar-msg:empty { display: none; }

/* --- Задачи на построение (правка 450) --- */
.sk-tasks { grid-area: tasks; display: flex; flex-direction: column; gap: var(--sp-2); }
.sk-task-row { display: flex; gap: var(--sp-2); align-items: center; }
.sk-select { flex: 1 1 auto; min-width: 0; min-height: var(--control-h); padding: 0 var(--sp-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-input); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-15); }
.sk-select:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.sk-task-text { font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-block); padding: var(--sp-2) var(--sp-3); }
.sk-task-text[hidden] { display: none; }
.sk-task-text summary { min-height: var(--control-h-sm); display: flex; align-items: center; font-weight: 650; cursor: pointer; }
.sk-task-text p { margin: 0 0 var(--sp-1); }
.sk-result { max-height: calc(100% - 2 * var(--sp-2)); overflow-y: auto; }
.sk-result.is-ok { background: var(--ok-soft); border-color: var(--ok); }
.sk-result.is-partial { background: var(--warn-soft); border-color: var(--warn-line); }
.sk-result.is-wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.sk-result-head { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-h3); }
.sk-result-list { flex: 1 1 100%; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-15); color: var(--ink); }
.sk-result-list li::before { content: attr(data-mark); display: inline-block; width: 1.4em; font-weight: 700; }
.sk-result-list .is-yes::before { color: var(--ok); }
.sk-result-list .is-no::before { color: var(--wrong); }

/* --- Настройки инструмента --- */
.sk-panel { grid-area: panel; display: flex; flex-direction: column; gap: var(--sp-2); }
.sk-options { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.sk-options[hidden], .sk-options [hidden] { display: none; }
.sk-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-btn); overflow: hidden; background: var(--surface); }
.sk-seg button { min-height: var(--control-h); padding: 0 var(--sp-2); border: 0; border-right: 1px solid var(--line); background: transparent;
  color: var(--ink); font: inherit; font-size: var(--fs-14); cursor: pointer; }
.sk-seg button:last-child { border-right: 0; }
.sk-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-deep); font-weight: 650; }
.sk-seg[data-opt="marked"] { order: 2; }
.sk-field { order: 1; display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); color: var(--ink2); }
.sk-input { width: 64px; min-height: var(--control-h); padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-input);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-16); }
.sk-input-name { width: 88px; }
.sk-input:focus, .sk-seg button:focus-visible, .sk-tool:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sk-hint { margin: 0; font-size: var(--fs-15); line-height: var(--lh-text); color: var(--ink2); }
.sk-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.sk-status { font-size: var(--fs-13); color: var(--ink3); }

/* --- Инструменты --- */
.sk-toolbar { grid-area: tools; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
.sk-tool { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-12); font-weight: 600; cursor: pointer; }
.sk-tool svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk-tool .sk-fill { fill: currentColor; }
.sk-tool[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.sk-tool:disabled { opacity: 0.45; cursor: default; }
@media (hover: hover) { .sk-tool:not(:disabled):not([aria-pressed="true"]):hover, .sk-seg button:hover { background: var(--accent-soft); } }

/* --- Чертёж текстом --- */
.sk-dialog { width: min(640px, calc(100vw - 2 * var(--gutter))); border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); color: var(--ink); padding: var(--sp-5); box-shadow: var(--shadow); }
.sk-dialog-title { margin: 0 0 var(--sp-2); font-size: var(--fs-h2); }
.sk-dialog-note { margin: 0 0 var(--sp-3); color: var(--ink2); font-size: var(--fs-14); }
.sk-text { white-space: pre-wrap; max-height: 55vh; overflow: auto; margin: 0 0 var(--sp-4); padding: var(--sp-3); border-radius: var(--r-block);
  background: var(--surface2); font-size: var(--fs-14); line-height: var(--lh-text); }

@media (min-width: 768px) {
  .sk-page { padding-left: var(--gutter-wide); padding-right: var(--gutter-wide); }
  .sk-toolbar { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sk-page { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "board panel" "tools panel"; }
  .sk-panel { grid-row: 1 / span 2; align-self: start; }
  .sk-page:has(.sk-tasks:not([hidden])) { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "tasks panel" "board panel" "tools panel"; }
  .sk-page:has(.sk-tasks:not([hidden])) .sk-panel { grid-row: 1 / span 3; }
}