/* «Загрузка» точки (шаг 1, часть 1ж; Р413, Р418–Р423): режим крупно, «сейчас Гость видит», ограничения строками, окна
   сегодня, общие правила, журнал. Строки переносятся по словам — ни на телефоне (390), ни на широком экране
   прокрутки вбок нет. Цвета — только переменные темы. */
.oc-load { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-3); }
.oc-load__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-width: 0; }
.oc-load__heading { min-width: 0; flex: 1 1 14rem; }
.oc-load__heading h1 { margin: 0; font-size: var(--title-md); line-height: var(--leading-title); overflow-wrap: anywhere; }
.oc-load__heading p { margin: 0; }
.oc-load__rule { display: flex; align-items: center; gap: var(--space-1); flex-basis: 100%; margin: 0; }
.oc-load__work { display: grid; gap: var(--space-4); min-width: 0; }
@media (min-width: 1100px) {
  .oc-load__work { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .oc-load__mode { grid-column: 1 / -1; }
}

.oc-load__mode {
  display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--panel); min-width: 0;
}
.oc-load__mode.is-manual { border-color: var(--warn); }
.oc-load__mode-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.oc-load__mode-word { font-size: var(--title-md); font-weight: var(--weight-bold); line-height: var(--leading-title); }
.oc-load__mode.is-manual .oc-load__mode-word { color: var(--warn); }
.oc-load__mode-who { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; min-width: 0; }
.oc-load__facts, .oc-load__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.oc-load__fact { cursor: default; min-height: var(--control-sm); padding: 0 var(--space-3); }
.oc-load__fact svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-load__fact[data-kitchen-copy="waiting"], .oc-load__fact[data-courier-problem] {
  color: var(--warn); border-color: var(--warn); white-space: normal; height: auto; padding: var(--space-2) var(--space-3);
}
.oc-load__facts { align-items: flex-start; }
.oc-load__origin { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); width: 100%; color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.oc-load__why { font-size: var(--text-sm); font-weight: var(--weight-regular); overflow-wrap: anywhere; }
.oc-load__connection { padding: var(--space-3); border: 1px solid var(--warn); border-radius: var(--radius-md); color: var(--warn); overflow-wrap: anywhere; }

.oc-load__box { gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--panel); position: relative; }
.oc-load__head-tip { position: absolute; top: var(--space-3); right: var(--space-3); }
.oc-load__box > .feed-section__head { min-height: 44px; padding-right: 52px; }
.oc-load__line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0;
  border-top: 1px solid var(--border); min-width: 0;
}
.oc-load__box .feed-section__head + .oc-load__head-tip + .oc-load__line,
.oc-load__box .feed-section__head + .oc-load__line { border-top: 0; }
.oc-load__title { flex: 0 1 calc(var(--space-8) * 2.5); min-width: 0; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.oc-load__value { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.oc-load__value small, .oc-load__free { color: var(--muted); }
.oc-load__set { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--warn);
  font-weight: var(--weight-semibold); min-width: 0; overflow-wrap: anywhere; }
.oc-load__line .oc-load__acts { margin-left: auto; }
.oc-load__menu-wrap { position: relative; display: inline-flex; }
.oc-load__menu { position: absolute; top: calc(100% + var(--space-1)); right: 0; width: max-content; max-width: calc(100vw - 32px); z-index: 4; }
.oc-load__sign { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); min-width: 0;
  overflow-wrap: anywhere; }
.oc-load__sign--tight { color: var(--warn); }
.oc-load__sign--late { color: var(--err); font-weight: var(--weight-semibold); }

.oc-load__windows { display: grid; gap: var(--space-2); min-width: 0; }
.oc-load__strip { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.oc-load__window {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm); padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--panel); font-size: var(--text-sm);
}
.oc-load__window.is-full { border-color: var(--warn); color: var(--warn); }
.oc-load__window.is-closed { border-style: dashed; color: var(--muted); }
.oc-load__mini.icon-btn { width: var(--control-sm); height: var(--control-sm); color: var(--muted); }
.oc-load__mini.icon-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.oc-load__mini.icon-btn:hover, .oc-load__mini.icon-btn:focus-visible { color: var(--ink); }

.oc-load__journal { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.oc-load__journal li { overflow-wrap: anywhere; }
.oc-load__journal li.is-off { color: var(--muted); }
.oc-load__due { color: var(--warn); }
.oc-load__gone { color: var(--muted); }

.oc-load__details { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); }
.oc-load__details > summary { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); cursor: pointer; list-style: none; }
.oc-load__details > summary::-webkit-details-marker { display: none; }
.oc-load__details > summary h2 { flex: 1; min-width: 0; margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.oc-load__details > summary svg { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }
.oc-load__details[open] > summary { border-bottom: 1px solid var(--border); }
.oc-load__details[open] > summary svg { transform: rotate(180deg); }
.oc-load__detail-count { color: var(--muted); font-size: var(--text-sm); }
.oc-load__details-body { display: grid; gap: var(--space-2); padding: var(--space-3); }
.oc-load__details[data-load-section="windows"] { grid-column: 1 / -1; }
@media (min-width: 1100px) {
  .oc-load__details[data-load-section="windows"] .oc-load__details-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
}

.oc-load__ask {
  flex: 1 1 100%; display: grid; gap: var(--space-2); margin: var(--space-2) 0; padding: var(--space-3);
  border: 1px solid var(--accent); border-radius: var(--radius-md); background: var(--panel); min-width: 0;
}
.oc-load__work > .oc-load__ask { grid-column: 1 / -1; }
.oc-load__ask-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.oc-load__ask-head .icon-btn { width: var(--control-sm); height: var(--control-sm); }
.oc-load__ask-head .icon-btn svg { width: var(--icon-md); height: var(--icon-md); }
.oc-load__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.oc-load__row .select, .oc-load__row .input { flex: 1 1 calc(var(--space-8) * 3); min-width: 0; max-width: 100%; }
.oc-load__row .oc-load__minutes { flex: 0 0 calc(var(--space-8) * 1.5); }
.oc-load__terms .chip { min-height: var(--control-sm); padding: 0 var(--space-3); }
.oc-load__refused { margin: 0; color: var(--err); font-size: var(--text-sm); }
.oc-load .check-line { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.oc-load :is(.btn, .icon-btn, .segments__item, .chip[data-ask-term], .select, .input, .oc-hint__btn) { min-height: 44px; }
.oc-load :is(.icon-btn, .oc-hint__btn) { min-width: 44px; width: 44px; height: 44px; }
.oc-load .check-line { min-height: 44px; }
.oc-load .menu__item { min-height: 44px; white-space: normal; }
.oc-load :is(button, summary, select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 767px) {
  .oc-load__title { flex-basis: 100%; }
  .oc-load__line .oc-load__acts { margin-left: 0; }
  .oc-load__mode-word { font-size: var(--title-sm); }
}