/* web/static/tools.css — страницы раздела «Инструменты», редизайн v2 (28.09,
   решение Алексея): /solve, /report, /essay, /referat, /notes, /lecture,
   /rewrite. Отдельный файл, как home.css, result.css и account.css.
   Замер 14 дней: «Решить задачу» — 1 456 открытий и почти все заказы (96 %
   решений по фото); шесть страниц документов вместе — 64 открытия. Все семь
   были одной формой старого вида: эмодзи вместо значков, кнопка 44 px, на
   телефоне ниже первого экрана (сочинение — 954 px, отчёт — 1 342).
   Раскладка: ПК от 960 px — форма слева, «Что получишь» справа; уже —
   одна колонка. Кнопка «Решить» на телефоне прилипает к низу.
   ГРАБЛЯ: атрибут hidden проигрывает display у класса — где ниже задан
   display у элемента, который прячут атрибутом, стоит явное [hidden]. */

:root{--warn:#8A5300;--warn-line:#E5A33A;--warn-soft:#FFF4DC;--tl-hover:#FBF7F1}
@media (prefers-color-scheme:dark){:root{--warn:#F0B454;--warn-line:#8F6420;--warn-soft:#2B2416;--tl-hover:#24262C}}

/* ===== Каркас ===== */
.tl-head{margin:6px 0 18px}
.tl-head h1{margin:0}
.tl-head .lead{margin:10px 0 0;max-width:62ch}
.tl-page>.error,.tl-page>.notice{margin:0 0 14px}
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:36px;align-items:start}
.tl-main,.tl-form,.tl-card,.tl-more-b{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;min-width:0}
.tl-form{margin:0}
.tl-rail{min-width:0}
@media (min-width:960px) and (min-height:760px){.tl-rail{position:sticky;top:96px}}

/* ===== Карточка формы — как «камера» на главной ===== */
.tl-card{padding:20px 22px;border-radius:22px;background:linear-gradient(180deg,var(--wash),var(--card) 55%);
  border:1.5px solid var(--accent);box-shadow:var(--lift)}
.tl-card>*{margin:0}
.tl-fld{display:grid;gap:6px;min-width:0}
.tl-fld>label,.tl-label{margin:0;font-weight:700;font-size:15.5px}
.tl-fld>label i{font-style:normal;font-weight:500;font-size:14px;color:var(--muted)}
.tl-card input:not([type=file]):not([type=radio]),.tl-card textarea,.tl-card select{margin:0;border:1.5px solid var(--border);border-radius:14px}
.tl-fld .field-hint{margin:0;font-size:13.5px;line-height:1.45}
.tl-fld .field-hint .ico{width:15px;height:15px}

/* Зона выбора файла (фото, запись) — пунктиром, как на главной. */
.tl-card .dropzone{display:grid;justify-items:center;gap:6px;padding:20px 16px;text-align:center;
  border:2px dashed var(--warn-line);border-radius:18px;background:var(--card)}
.tl-card .dropzone:hover,.tl-card .dropzone:focus-within{border-color:var(--accent)}
.tl-zone-ico{width:72px;height:72px}
.tl-card .dropzone .ico{width:32px;height:32px}
.tl-card .dropzone-title{font-size:17px;line-height:1.3}
.tl-card .dropzone .field-hint{margin:0}
.tl-hint{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:var(--muted)}
.tl-hint .ico{width:20px;height:20px;margin-top:1px}
.tl-hint strong{color:var(--ink)}
.tl-or{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.tl-or::before,.tl-or::after{content:"";flex:1;height:1px;background:var(--border)}

/* Текст условия у «Решить задачу» — второй путь, как на главной. */
.tl-text>summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:46px;cursor:pointer}
.tl-text>summary::-webkit-details-marker{display:none}
.tl-text>summary .ico{width:19px;height:19px}
.tl-text[open]>summary{display:none}
.tl-text textarea{margin-top:8px}

/* Свёрнутое «Уточнить» / «Пожелания» */
.tl-more{border:1px solid var(--border);border-radius:16px;background:var(--card)}
.tl-more>summary{list-style:none;display:grid;grid-template-columns:22px minmax(0,1fr) 18px;gap:10px;align-items:center;
  padding:12px 14px;cursor:pointer;font-weight:600;font-size:15.5px;color:var(--ink)}
.tl-more>summary::-webkit-details-marker{display:none}
.tl-more>summary:hover{background:var(--tl-hover);border-radius:16px}
.tl-more>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:16px}
.tl-more>summary .ico{width:20px;height:20px}
.tl-more>summary i{display:block;font-style:normal;font-weight:500;font-size:13.5px;color:var(--muted)}
.tl-more>summary .tl-chev{width:16px;height:16px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.tl-more[open]>summary .tl-chev{transform:rotate(90deg)}
.tl-more-b{padding:2px 14px 16px}

/* «Страниц»: − и + вокруг числа (tools.js). Без JS — обычное поле. */
.tl-step{display:inline-flex;align-items:stretch;justify-self:start;border:1.5px solid var(--border);
  border-radius:14px;background:var(--card);overflow:hidden}
.tl-card .tl-step input[type=number]{width:64px;border:0;border-radius:0;text-align:center;font-size:18px;
  font-variant-numeric:tabular-nums;padding:10px 4px;-moz-appearance:textfield;appearance:textfield}
.tl-step input::-webkit-outer-spin-button,.tl-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tl-step button{appearance:none;width:48px;min-height:46px;border:0;background:var(--accent-soft);color:var(--accent-ink);
  font-family:inherit;font-size:24px;font-weight:700;line-height:1;cursor:pointer}
.tl-step button:hover{filter:brightness(.96)}
.tl-step button:disabled{opacity:.45;cursor:default}

/* Гость: вход */
.tl-login{display:grid;gap:10px;padding:14px 16px;border-radius:18px;background:var(--warn-soft);border:1px solid var(--warn-line)}
.tl-login>p{margin:0}
.tl-login-t{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.tl-login-t .ico{width:22px;height:22px;color:var(--warn)}
.tl-login-t .ico .i-b{fill:transparent}
.tl-login .oauth-row{margin:0}
.tl-login .oauth-terms{margin:0;font-size:12.5px}
.tl-login-alt{font-size:14px;color:var(--muted)}
.tl-login-alt a{color:var(--accent-ink);font-weight:700}

/* Кнопка и цена */
.tl-go{display:grid;gap:10px}
.tl-go>*{margin:0}
.tl-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:14px 22px;
  font-size:18px;font-weight:800;box-shadow:var(--lift)}
.tl-btn .ico{width:22px;height:22px;color:currentColor}
.tl-btn .ico .i-b{fill:transparent}
/* Молния — в строке текста, а не отдельной колонкой: при переносе на две
   строки она иначе оставалась слева от центрованного текста. */
.tl-price{display:block;font-size:14px;line-height:1.45;color:var(--muted);text-align:center}
.tl-price>span{display:inline}
.tl-price .ico{width:17px;height:17px;margin-right:4px;vertical-align:-.25em}
.tl-price strong{color:var(--ink)}

/* Режимы «Реши · Объясни · Проверь» — сегментами вместо радиокнопок в
   столбик. Радио остаются в разметке (name="mode"), прячется только кружок. */
.tl-modes.mode-picker{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:4px;border:1px solid var(--border);
  border-radius:18px;background:var(--card);justify-self:start}
.tl-modes.mode-picker label{position:relative;display:block;margin:0;padding:0;font-weight:600;cursor:pointer}
.tl-modes input[type=radio]{position:absolute;opacity:0;width:1px;height:1px}
.tl-modes label>span{display:block;padding:8px 16px;border-radius:14px;color:var(--muted)}
.tl-modes input:checked+span{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.tl-modes input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px}

/* Индикатор отправки (решатель, лекция) */
.tl-wait{display:flex;gap:8px;align-items:flex-start}
.tl-wait[hidden]{display:none}
.tl-wait .ico{width:18px;height:18px;margin-top:3px}

/* ===== «Что получишь» ===== */
.tl-get{display:grid;gap:10px;padding:20px 20px 18px;border-radius:22px;background:var(--card);
  border:1px solid var(--border);box-shadow:var(--shadow)}
.tl-get>*{margin:0}
.tl-get img{width:64px;height:64px}
.tl-get h2{font-size:20px}
.tl-get ul{list-style:none;padding:0;display:grid;gap:8px}
.tl-get li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15.5px;line-height:1.45}
.tl-get li .ico{width:22px;height:22px;color:var(--ok)}
.tl-get li .ico .i-b{fill:var(--ok-soft)}
.tl-time{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--muted)}
.tl-time .ico{width:18px;height:18px;margin-top:2px}

/* ===== Телефон и планшет: одна колонка ===== */
@media (max-width:959px){
  .tl-grid{grid-template-columns:minmax(0,1fr)}
  .tl-rail{margin-top:24px}
  .tl-card{padding:16px}
  .tl-btn{font-size:17px}
  /* «Решить» у решателя прилипает к низу, как было (аудит 31.08). */
  .tl-go.is-pinned{position:sticky;bottom:0;z-index:5;margin:0 -16px;
    padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:color-mix(in srgb,var(--paper) 90%,transparent);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--border)}
  .tl-modes.mode-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-self:stretch}
  .tl-modes label>span{display:grid;place-items:center;height:100%;padding:8px 6px;text-align:center;
    font-size:14.5px;line-height:1.25}
}
/* 374 px и уже: длинная подпись кнопки («Получить структуру бесплатно») на
   320 px ложилась в три строки. */
@media (max-width:374px){.tl-btn{font-size:16px;padding:12px 16px;gap:8px}}
@media (prefers-reduced-motion:reduce){.tl-more>summary .tl-chev{transition:none}}