/* ════════════════════════════════════════════════════════════════════════════
   relocation.css — стили игры «Переезд» и доски (гайд §4/§9).
   ВСЁ под #app: никаких глобальных html/body/header/.lang — хром сайта не трогаем.
   #app центрируется сам; оверлеи fixed inset:0 z-index:1000, карточка max-height:82vh.
   Палитра — канон 02 (navy/paper/muted/flash); нет 'unsafe-inline' → только этот файл.
   ════════════════════════════════════════════════════════════════════════════ */

#app.rl{
  --rl-navy:#1B2E5A; --rl-paper:#F8F9FB; --rl-muted:#8A90A6; --rl-flash:#E67B19;
  --rl-line:#dfe3ec; --rl-ok:#1f7a4d; --rl-bad:#b5321f; --rl-card:#ffffff;
  max-width:960px; margin:0 auto; padding:clamp(1rem,3vw,2rem) 1rem 6rem;
  color:var(--rl-navy); font-size:1rem; line-height:1.5;
}
#app.rl *{ box-sizing:border-box; }

/* ---- шапка ---- */
#app.rl .rl-head{ margin-bottom:1.25rem; }
#app.rl .rl-title{ font-size:clamp(1.5rem,4vw,2.25rem); margin:0 0 .35rem; }
#app.rl .rl-lead{ color:var(--rl-muted); margin:0 0 .9rem; max-width:60ch; }
#app.rl .rl-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* ---- кнопки ---- */
#app.rl .rl-btn{
  display:inline-block; border:1px solid var(--rl-navy); background:var(--rl-navy);
  color:#fff; text-decoration:none; padding:.55rem 1rem; border-radius:.5rem;
  font:inherit; cursor:pointer; line-height:1.2;
}
#app.rl .rl-btn:hover{ background:#16264a; }
#app.rl .rl-btn--ghost{ background:transparent; color:var(--rl-navy); }
#app.rl .rl-btn--ghost:hover{ background:#eef1f7; }
#app.rl .rl-btn--flash{ background:var(--rl-flash); border-color:var(--rl-flash); }
#app.rl .rl-btn--flash:hover{ background:#cf6d12; }
#app.rl .rl-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---- часы (индикатор, не в счёт) ---- */
#app.rl .rl-clock{
  font-variant-numeric:tabular-nums; color:var(--rl-muted); font-size:.95rem;
  margin:.25rem 0 1rem;
}

/* ---- живой предпросчёт ---- */
#app.rl .rl-preview{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:baseline;
  background:var(--rl-card); border:1px solid var(--rl-line); border-radius:.6rem;
  padding:.75rem 1rem; margin-bottom:1.25rem;
}
#app.rl .rl-preview .rl-metric{ display:flex; flex-direction:column; }
#app.rl .rl-preview .rl-metric b{ font-size:1.35rem; }
#app.rl .rl-preview .rl-metric span{ color:var(--rl-muted); font-size:.8rem; }
#app.rl .rl-preview .rl-hint{ color:var(--rl-bad); font-size:.85rem; flex-basis:100%; }
#app.rl .rl-preview.is-complete .rl-flag{ color:var(--rl-ok); }
#app.rl .rl-preview.is-incomplete .rl-flag{ color:var(--rl-flash); }

/* ---- конструктор ---- */
#app.rl .rl-builder{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.75rem; background:var(--rl-card); border:1px solid var(--rl-line);
  border-radius:.6rem; padding:1rem; margin-bottom:1.25rem;
}
#app.rl .rl-field{ display:flex; flex-direction:column; gap:.25rem; }
#app.rl .rl-field label{ font-size:.8rem; color:var(--rl-muted); }
#app.rl .rl-field select,
#app.rl .rl-field input{
  font:inherit; padding:.5rem; border:1px solid var(--rl-line); border-radius:.4rem;
  background:#fff; color:var(--rl-navy);
}
#app.rl .rl-builder .rl-add{ grid-column:1/-1; }
#app.rl .rl-dow{ font-size:.8rem; color:var(--rl-muted); }
#app.rl .rl-dow.is-weekend{ color:var(--rl-flash); }

/* ---- каталог вещей ---- */
#app.rl .rl-catalog{ margin-bottom:1.25rem; }
#app.rl .rl-zone{ margin-bottom:1rem; }
#app.rl .rl-zone h3{ font-size:1rem; margin:0 0 .5rem; }
#app.rl .rl-items{ display:flex; flex-wrap:wrap; gap:.4rem; }
#app.rl .rl-chip{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.8rem;
  border:1px solid var(--rl-line); border-radius:1rem; padding:.2rem .6rem;
  background:#fff; cursor:pointer; user-select:none;
}
#app.rl .rl-chip input{ margin:0; }
#app.rl .rl-chip.is-packed{ border-color:var(--rl-navy); }
#app.rl .rl-chip.is-hauled{ border-color:var(--rl-ok); background:#eef6f1; color:var(--rl-ok); }
#app.rl .rl-chip.is-fragile{ box-shadow:inset 0 0 0 1px var(--rl-flash); }
#app.rl .rl-chip .rl-vol{ color:var(--rl-muted); }
#app.rl .rl-chip.rl-off{ opacity:.4; cursor:not-allowed; }
#app.rl #rl-teamfield{ }

/* ---- визуальный пикер «коробки в комнатах» ----
   Канон: клетка u=44px, зазор 0.4rem, радиус коробки 4px; 2 м³ = 2u + зазор.
   Кабинет: контейнер 5 клеток → два ровных ряда [1..5] / [6──][7──][8]. */
#app.rl .rl-rooms{ display:flex; gap:12px; flex-wrap:wrap; }
#app.rl .rl-room{ background:var(--rl-card); border:1px solid #DFE3EC; border-radius:8px; padding:12px; }
#app.rl .rl-room--wide{ flex-basis:100%; }
#app.rl .rl-room-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
#app.rl .rl-room-head h3{ font-size:16px; font-weight:700; color:var(--rl-navy); margin:0; }
#app.rl .rl-room-prog{ font-size:12.8px; font-weight:400; color:rgba(27,46,90,.55); white-space:nowrap; }
#app.rl .rl-boxes{ display:flex; flex-wrap:wrap; gap:0.4rem; }
#app.rl .rl-room--office .rl-boxes{ width:calc(5*44px + 4*0.4rem); }

#app.rl .rl-box{
  position:relative; overflow:hidden; width:44px; height:44px;
  display:flex; align-items:flex-end; justify-content:center;
  background:#fff; border:1px solid #DFE3EC; border-radius:4px;
  color:var(--rl-navy); user-select:none;
}
#app.rl .rl-box--lg{ width:calc(2*44px + 0.4rem); }
#app.rl .rl-box--pick{ cursor:pointer; }
#app.rl .rl-box input{ position:absolute; opacity:0; pointer-events:none; }
#app.rl .rl-box-num{ position:relative; z-index:2; font-size:12.8px; font-weight:400; line-height:1; padding-bottom:4px; }
#app.rl .rl-box-ico{ position:absolute; top:3px; left:50%; transform:translateX(-50%); z-index:2; width:14px; height:14px; }
#app.rl .rl-box-ico svg{ display:block; width:100%; height:100%; }

/* бечёвка (packed): две линии крест-накрест; снимается классом при delivered */
#app.rl .rl-box--packed::before, #app.rl .rl-box--packed::after {
  content:""; position:absolute; background:#B08850; opacity:.6; z-index:1;
}
#app.rl .rl-box--packed::before { left:0; right:0; top:38%; height:2px; }   /* горизонталь */
#app.rl .rl-box--packed::after  { top:0; bottom:0; left:32%; width:2px; }    /* вертикаль */

/* в манифесте текущего рейса */
#app.rl .rl-box--manifest{ border:2px solid var(--rl-flash); background:#FFF7EE; }
/* доставлена: рамка/номер/иконка зелёные */
#app.rl .rl-box--delivered{ border:1px solid #2E7D32; background:#EAF5EC; color:#2E7D32; }

/* легенда состояний под пикером */
#app.rl .rl-legend{
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center;
  font-size:12.8px; color:rgba(27,46,90,.75); margin-top:.6rem;
}
#app.rl .rl-lgd{ display:inline-flex; align-items:center; gap:.35rem; }
#app.rl .rl-swatch{
  width:16px; height:16px; border-radius:3px; cursor:default;
  display:inline-flex; align-items:center; justify-content:center; flex:none;
}
#app.rl .rl-swatch-ico{ display:block; width:11px; height:11px; }
#app.rl .rl-swatch-ico svg{ display:block; width:100%; height:100%; }

/* бокал + «риск» в журнале плана */
#app.rl .rl-jrisk{ display:inline-flex; align-items:center; gap:.15rem; color:var(--rl-flash); vertical-align:-2px; }
#app.rl .rl-jrisk svg{ display:block; width:13px; height:13px; }

/* ---- журнал плана ---- */
#app.rl .rl-log h3{ font-size:1rem; margin:0 0 .5rem; }
#app.rl .rl-log ol{ margin:0; padding-left:1.25rem; display:flex; flex-direction:column; gap:.25rem; }
#app.rl .rl-log li{ font-size:.9rem; }
#app.rl .rl-log .rl-empty{ color:var(--rl-muted); }
#app.rl .rl-undo{ margin-top:.6rem; }

/* ---- форма контакта ---- */
#app.rl .rl-submit{ margin-top:1.5rem; border-top:1px solid var(--rl-line); padding-top:1.25rem; }
#app.rl .rl-submit .rl-row{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:.75rem; }
#app.rl .rl-submit .rl-field{ flex:1 1 200px; }
#app.rl .rl-submit .rl-consent{ display:flex; gap:.5rem; align-items:flex-start; font-size:.85rem; color:var(--rl-muted); margin-bottom:.9rem; }
#app.rl .rl-submit .rl-err{ color:var(--rl-bad); font-size:.85rem; margin:.4rem 0; min-height:1.1em; }

/* ---- оверлеи (§9) ---- */
#app.rl .rl-overlay{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; background:rgba(27,46,90,.55); padding:1rem;
}
#app.rl .rl-overlay[hidden]{ display:none; }
#app.rl .rl-overlay .rl-card{
  background:#fff; border-radius:.75rem; max-width:560px; width:100%;
  max-height:82vh; overflow:auto; padding:clamp(1.25rem,4vw,2rem);
}
#app.rl .rl-overlay .rl-card h2{ margin-top:0; }
#app.rl .rl-overlay .rl-close{ margin-top:1rem; }
#app.rl .rl-result-metrics{ display:flex; gap:1.5rem; flex-wrap:wrap; margin:1rem 0; }
#app.rl .rl-result-metrics .rl-metric b{ font-size:1.6rem; display:block; }
#app.rl .rl-result-metrics .rl-metric span{ color:var(--rl-muted); font-size:.8rem; }

/* ---- полные правила в оверлее (RULES_FULL из .md) ---- */
#app.rl .rl-overlay .rl-card--rules{ max-width:760px; }
#app.rl .rl-rules{ font-size:.95rem; line-height:1.55; }
#app.rl .rl-rules .rl-rules-title{ font-size:1.35rem; margin:0 0 .75rem; }
#app.rl .rl-rules .rl-rules-h{ font-size:1.05rem; margin:1.5rem 0 .5rem; color:var(--rl-navy); }
#app.rl .rl-rules h4{ font-size:.98rem; margin:1rem 0 .35rem; }
#app.rl .rl-rules p{ margin:.55rem 0; }
#app.rl .rl-rules ul,
#app.rl .rl-rules ol{ margin:.5rem 0 .75rem; padding-left:1.35rem; }
#app.rl .rl-rules li{ margin:.3rem 0; }
#app.rl .rl-rules strong{ color:var(--rl-navy); }
#app.rl .rl-rules code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.88em;
  background:#eef1f7; border-radius:.25rem; padding:.05rem .3rem; }
#app.rl .rl-rules .rl-rules-pre{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9rem;
  background:#f2f4f9; border:1px solid var(--rl-line); border-radius:.5rem; padding:.75rem 1rem;
  overflow-x:auto; margin:.6rem 0; white-space:pre; }
#app.rl .rl-rules .rl-rules-tablewrap{ overflow-x:auto; margin:.7rem 0; }
#app.rl .rl-rules .rl-rules-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:520px; }
#app.rl .rl-rules .rl-rules-table th,
#app.rl .rl-rules .rl-rules-table td{ border:1px solid var(--rl-line); padding:.4rem .55rem; text-align:left; vertical-align:top; }
#app.rl .rl-rules .rl-rules-table thead th{ background:#eef1f7; color:var(--rl-navy); font-weight:600; }

/* ---- доска лидеров ---- */
#app.rl--board{ max-width:820px; }
#app.rl--board .rl-table-wrap{ overflow-x:auto; }
#app.rl--board .rl-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
#app.rl--board .rl-table th,
#app.rl--board .rl-table td{ padding:.55rem .6rem; border-bottom:1px solid var(--rl-line); text-align:left; }
#app.rl--board .rl-table .rl-col-num{ text-align:right; font-variant-numeric:tabular-nums; }
#app.rl--board .rl-table thead th{ color:var(--rl-muted); font-weight:600; font-size:.8rem; }
#app.rl--board .rl-table tbody tr:first-child td{ font-weight:700; color:var(--rl-navy); }
#app.rl--board .rl-empty{ color:var(--rl-muted); }

#app.rl .rl-noscript{ color:var(--rl-bad); }

@media (prefers-reduced-motion: reduce){
  #app.rl *{ transition:none !important; animation:none !important; }
}