/* ==========================================================================
   Прототип №4 — создание посева с карты.
   Только надстройки: базовые токены и компоненты приходят из mobile/css/app.css.
   Акцент — оранжевый OtMapDraw #F98721 (вершины конструктора контура).
   ========================================================================== */

/* --- Панель-объяснение вне экрана телефона ------------------------------- */
.stage{gap:32px}
.proto-panel{
  width:360px;max-height:852px;overflow-y:auto;scrollbar-width:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:24px;color:#E7EAEE;flex:0 0 auto;
}
.proto-panel::-webkit-scrollbar{display:none}
.proto-panel__eyebrow{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  color:#8CABCD;margin-bottom:6px}
.proto-panel__title{font-size:22px;font-weight:600;line-height:1.25;color:#fff}
.proto-panel__lead{font-size:13px;font-weight:400;line-height:1.5;color:#B8BFC8;margin:8px 0 0}
.proto-panel__now{
  margin-top:16px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:500;
  background:rgba(249,135,33,.12);border:1px solid rgba(249,135,33,.4);color:#FFD3A8;
}
.proto-panel__now b{color:#fff;font-weight:600}
.proto-panel__section{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:#7E8894;margin:20px 0 10px}
.proto-flow{
  display:flex;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:6px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5;border:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.proto-flow b{color:#fff;font-weight:600}
.proto-flow__num{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;margin-top:1px;
  background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;color:#fff;
}
.proto-flow--active{background:rgba(249,135,33,.1);border-color:rgba(249,135,33,.45)}
.proto-flow--active .proto-flow__num{background:#F98721}
.proto-panel__list{margin:0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:8px;
  font-size:12.5px;line-height:1.5;color:#C7CDD5}
@media (max-width:1150px){.proto-panel{display:none}}

/* --- FAB «Добавить» — отдельная кнопка справа от тулбара карты ------------
   Продолжение пилюли слоёв: круглая, синяя (primary500, как btn-primary),
   белый плюс. Диаметр 56px — стандарт Material FAB. */
.cc-fab{
  width:56px;height:56px;flex:0 0 56px;border-radius:100px;
  background:var(--primary500);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--toolbar-shadow);
}
.cc-fab:active{background:var(--primary600)}

/* --- Поле формы — OtTextField (как в прототипе №3) ------------------------ */
.ot-field{display:flex;flex-direction:column;gap:7px}
.ot-field__label{font-size:14px;font-weight:400;line-height:1.35;color:var(--onSurface,#1D2126)}
.ot-field input{
  width:100%;padding:12px;border-radius:8px;border:1px solid var(--text400);
  background:#fff;font-family:inherit;font-size:14px;font-weight:400;line-height:1.35;
  color:var(--text900);outline:0;display:block;
}
.ot-field input::placeholder{font-size:14px;font-weight:400;color:var(--text700)}
.ot-field input:focus{border-color:var(--text500)}

/* --- Активатор селекта (CustomSelect: OutlinedButton h46, label над полем) */
.cc-select{display:flex;flex-direction:column;gap:4px}
.cc-activator{
  height:46px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 12px;border-radius:8px;border:1px solid var(--text400);background:#fff;
  font-size:14px;font-weight:400;color:var(--text900);
}
.cc-activator:active{background:var(--default5)}
.cc-activator span{flex:1;min-width:0;text-align:left;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cc-activator span.is-ph{color:var(--text700)}

/* --- Слой посевов: поля без посева ---------------------------------------
   Подпись «не задано» под именем серого поля (стиль mapgl-fieldlbl,
   но мельче и приглушённо) */
.cc-nolbl{font-size:10px;font-weight:500;color:#E7EAEE;white-space:nowrap;pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 2px rgba(0,0,0,.8);opacity:.85}


/* --- Шаг «Год + Культура» (Column spacing 12) ----------------------------- */
.cc-crop{display:flex;flex-direction:column;gap:12px}

/* Год — OtSegmentedChipsSelect: подпись + ряд чипов-пилюль */
.cc-years{display:flex;align-items:center;gap:10px;min-width:0}
.cc-years .ot-field__label{flex:0 0 auto}
.cc-chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px 0}
.cc-chips::-webkit-scrollbar{display:none}
.cc-chip{
  flex:0 0 auto;padding:6px 12px;border-radius:100px;background:var(--bgLight);
  font-size:13px;font-weight:500;color:var(--text600);
}
.cc-chip.on{background:var(--primary400);color:#fff}
.cc-chips.hs-drag{cursor:grabbing}

/* Точка цвета культуры в шите выбора */
.cc-culture-dot{width:12px;height:12px;border-radius:50%;flex:0 0 12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}

/* --- Шаг «Контур» — OtMapDraw внутри шита --------------------------------- */
.cc-draw{
  position:relative;height:300px;border-radius:12px;overflow:hidden;
  border:1px solid var(--bgBorder);background:#F8F4F0;
}
.cc-draw svg{position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:none;cursor:crosshair}
.cc-draw svg [data-vi]{cursor:grab}
.cc-draw svg [data-mi]{cursor:grab}

/* Чип метрики сверху (белая плашка r=8, как в OtMapDraw) */
.cc-draw__chip{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;background:#fff;border-radius:8px;
  padding:5px 14px;box-shadow:0 1px 3px rgba(0,0,0,.2);pointer-events:none;
}
.cc-draw__chip span{font-size:14px;font-weight:600;color:var(--text900)}

/* Подсказка, пока вершин меньше трёх */
.cc-draw__hint{
  position:absolute;top:46px;left:50%;transform:translateX(-50%);width:max-content;max-width:85%;
  background:rgba(29,33,38,.85);color:#fff;border-radius:8px;padding:7px 12px;
  font-size:12px;font-weight:500;line-height:1.4;text-align:center;pointer-events:none;
  transition:opacity .2s;
}
.cc-draw__hint.is-hidden{opacity:0}

/* Очистить контур */
.cc-draw__clear{
  position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:8px;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  display:flex;align-items:center;justify-content:center;
}
.cc-draw__clear:active{background:var(--default5)}