/* Оформление заказа и вкладка «Мои заказы».
   Отдельный файл, чтобы styles.css оставался обозримым: правило проекта —
   файл не длиннее 300 строк. Токены, палитра и шрифты — общие, из styles.css. */

/* Диалог заказа. Нативный <dialog>: свой оверлей, свой фокус-трап и Esc
   уже сделаны браузером, писать их руками незачем. */
.modal{width:min(560px,92vw);max-height:88vh;overflow:auto;padding:var(--s4);
  border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--fg)}
.modal::backdrop{background:rgba(15,23,42,.45)}

.ohead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding-bottom:var(--s2);border-bottom:2px solid var(--fg)}
.ohead b{font:700 var(--fs-lg)/1.2 var(--mono);letter-spacing:-.02em}
.osum{display:flex;align-items:baseline;gap:var(--s2);font:500 var(--fs-xs)/1 var(--mono);color:var(--muted-fg)}
.osum b{font:700 var(--fs-lg)/1 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}

/* Ошибки проверки заказа: всё, что нашлось, разом — чинить по одной долго. */
.oerr{margin:var(--s3) 0 0;padding:var(--s2) var(--s3) var(--s2) var(--s5);background:#FEF2F2;
  border:1px solid var(--danger);border-radius:5px;color:var(--danger);
  font-size:var(--fs-sm);line-height:1.55}

.oform{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
.fld{display:flex;flex-direction:column;gap:var(--s1)}
.fld label{font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg)}
.fld input,.fld select,.fld textarea{width:100%;padding:var(--s2) var(--s3);border:1px solid var(--border);
  border-radius:5px;background:var(--card);color:var(--fg);font:var(--fs-md) var(--sans);
  transition:border-color var(--fast)}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--muted-fg)}
.fld textarea{resize:vertical}
.fld.chk{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s3);background:var(--muted);border-radius:5px}
.fld.chk input{width:16px;height:16px;padding:0;accent-color:var(--accent);flex:0 0 auto}
.fld.chk label{flex:1;font:500 var(--fs-md)/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--fg)}
.fld.chk .fhint{flex-basis:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}

/* Монтаж — факт из расчёта, а не второе место, где его выбирают (AUDIT-rop,
   блокер 5). Оформлен как то, что читают, а не заполняют: серая плашка, как
   у галочек рядом, подпись и значение одной лесенкой.

   Без этих трёх правил у абзацев оставались собственные поля в 13 px: подпись
   «Монтаж» отрывалась от своего значения на 29 пикселей — вдвое больше, чем
   у соседних полей, — и читалась как заголовок ничей. */
.fld.fact{gap:var(--s1);padding:var(--s2) var(--s3);background:var(--muted);border-radius:5px}
.flab{margin:0;font:600 var(--fs-xs)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg)}
.fval{margin:0;font:500 var(--fs-md)/1.3 var(--sans);color:var(--fg)}

/* Подсказка под полем. Телефон проверяется на вводе: пока номер не сходится,
   здесь написано, что именно не так (таблица не понимает «+7»). */
/* Мера строки: на 1680 подсказка растягивалась на 234 знака в 1542 px —
   вдвое длиннее читаемого. Норма для такого текста 60–75 знаков. */
.fhint{margin:0;max-width:60ch;font:400 var(--fs-xs)/1.4 var(--mono);color:var(--muted-fg)}
.fhint.ok{color:var(--accent-text)}
.fhint.bad{color:var(--danger)}

.ofoot{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.ofoot .go{margin:0;width:auto;flex:1;min-width:160px}
.ghost{padding:var(--s3);border:1px solid var(--border);border-radius:5px;background:var(--card);
  color:var(--fg);font:500 var(--fs-md)/1 var(--sans);
  transition:background-color var(--fast),border-color var(--fast)}
.ghost:hover{background:var(--muted);border-color:var(--muted-fg)}

/* Результат отправки. Строка заказа показывается всегда — и когда всё дошло,
   и когда отправка не настроена: её вставляют в таблицу руками. */
.ores{display:flex;flex-direction:column;gap:var(--s2)}
.omsg{margin:0;padding:var(--s3);border-radius:5px;font:500 var(--fs-md)/1.5 var(--sans)}
.omsg.ok{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-text)}
.omsg.warn{background:#FFFBEB;border:1px solid #FDE68A;color:#78350F}
.orow{margin:0;padding:var(--s3);max-height:34vh;overflow:auto;background:var(--muted);border-radius:5px;
  font:400 var(--fs-xs)/1.6 var(--mono);white-space:pre-wrap;word-break:break-word}
/* Текст клиенту после оформления. Выделен рамкой и подписан: это единственное
   на экране, что уходит КЛИЕНТУ, — остальное здесь для менеджера и поставщика.
   Стоит выше строки для таблицы: клиент ещё на линии и ждёт подтверждения. */
.otext{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);
  border:1px solid var(--accent);border-radius:5px;background:var(--card)}
.otext > b{font:600 var(--fs-md)/1.3 var(--sans);color:var(--accent-text)}
.otext .fhint{margin:0}
.otext .orow{background:var(--muted);font-size:var(--fs-sm)}
/* Кнопка копирования — главное действие после оформления: менеджер отправляет
   текст, пока клиент на линии. Поэтому она основная и заметная, а не в ряду
   служебных кнопок внизу. Подтверждение «Скопировано» меняет само слово
   на кнопке — цвет не единственный признак. */
.otext button{align-self:flex-start;margin:0;width:auto;min-width:260px}

/* Вкладка «Мои заказы» */
.orders-view{padding:var(--s3) var(--pad)}
.orders-view .spec{max-width:900px}
.orders-view .spec td{padding:var(--s2) 0}
.orders-view .spec td:last-child{vertical-align:middle}
.ordrow b{font:600 var(--fs-md)/1.3 var(--sans)}
.ordrow td:last-child b{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ost{display:inline-block;padding:2px var(--s2);border-radius:3px;font:500 var(--fs-xs)/1.5 var(--mono)}
.ost.ok{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent)}
.ost.wait{background:#FFFBEB;color:#78350F;border:1px solid #FDE68A}
.orddetail{max-width:900px}
/* Смета в карточке заказа шире карточки: даём ей свою прокрутку, а не
   выпускаем за правый край на 261 px (обмер вёрстки 28.07.2026). */
.orddetail .spec{margin-top:var(--s3);width:100%;table-layout:fixed}
.orddetail .spec td:first-child{overflow-wrap:anywhere;max-width:0}
.orddetail .orow,.orddetail td{max-width:75ch}

/* Поля из прошлого разговора. Не тревога, но и не молчание: чужие ФИО
   и телефон в форме — это риск отправить заказ не тому человеку. */
.odraft{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s3);
  padding:var(--s2) var(--s3);border-left:3px solid var(--accent);background:var(--accent-soft);
  border-radius:0 4px 4px 0;font:400 var(--fs-sm)/1.5 var(--sans);color:var(--accent-text);max-width:70ch}
.odraft-clear{flex:0 0 auto;min-height:29px;padding:0 var(--s3);border:1px solid var(--accent-text);
  border-radius:5px;background:var(--card);color:var(--accent-text);cursor:pointer;
  font:500 var(--fs-sm)/1 var(--sans)}
.odraft-clear:hover{background:var(--accent-text);color:#fff}