/* ═══════════════════════════════════════════════════════════
   Закрыть объект — бланк закрытия (SPEC §5.8)
   ═══════════════════════════════════════════════════════════
   Тот же предмет, что у новой брони: бумажный бланк. Слева сплошная
   черта на всю высоту сшивает графы в один документ, номер на черте
   говорит, где ты в нём находишься, значения вписывают на линейки, а не
   в коробки. Разговор идёт сверху вниз и по одному решению за графу —
   в окне-анкете, где все четыре вопроса стояли одинаковыми столбцами,
   начинать было неоткуда.

   Панель у правого края, а не окно по центру: закрывают, глядя в
   шахматку, — из неё и видно, что на этом времени стоит.

   Цветного в бланке два места: тёмная лента времени — та же приборная
   полоса, что несёт шахматку, и статусы броней на ней. Остальное —
   чернила на бумаге.
   ═══════════════════════════════════════════════════════════ */

/* Шире обычной панели: в четвёртой графе лежит лента времени, и по
   строке на каждый закрываемый объект. */
.sheet-closure{width:min(468px,calc(100vw - 28px))}
/* Затемнение ослаблено ровно для этого окна: шахматка за панелью должна
   оставаться читаемой — по ней и решают, что закрывать. */
html:has(#shClosure.open) .scrim{background:rgba(25,24,21,.16)}

/* ── шапка ──
   Слой поверх бланка, а не полка над ним: липнет к верху той же
   прокрутки, графы уходят под неё размытыми. Кромка появляется только
   тогда, когда под шапку что-то заехало. */
.cw-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.cw-head{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;gap:11px;padding:0 14px 0 22px;min-height:58px;
  background:var(--paper-glass);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  backdrop-filter:blur(20px) saturate(135%);
}
.cw-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);opacity:0;transition:opacity .18s;
}
.cw-under .cw-head::after{opacity:1}
.cw-head b{font-size:17px;font-weight:600;letter-spacing:-.042em;flex-shrink:0}
.cw-head .sh-close{margin-left:auto}
/* Штамп: та же служебная печать, что на бланке брони, чуть косая,
   потому что штампы ровно не ставят. */
.cw-stamp{
  padding:3px 7px 2px;border:1px solid var(--rule);border-radius:var(--r-xs);
  font-size:8.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;font-style:normal;color:var(--ink-3);
  transform:rotate(-2.5deg);flex-shrink:0;
}

/* ── графа бланка ──
   Поле с чертой набрано границей самой графы: графы стоят вплотную, и
   черта получается непрерывной сама собой. */
.cw-box{
  position:relative;margin-left:27px;border-left:1px solid var(--rule);
  padding:19px 22px 20px 20px;
}
.cw-box:first-of-type{padding-top:15px}
.cw-box:last-of-type{padding-bottom:26px}
.cw-box h3{
  display:flex;align-items:center;gap:9px;margin-bottom:13px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
/* Номер сидит на черте и прерывает её собой — так номера граф и стоят
   на бумаге. Заполненная графа помечена на самой черте, а не галочкой
   сбоку: бланк отвечает на «сколько ещё осталось» одним взглядом вниз. */
.cw-box h3 i{
  position:absolute;left:-11px;width:21px;text-align:center;
  background:var(--card);padding:3px 0;
  font-size:11px;font-style:normal;font-weight:500;letter-spacing:0;color:var(--ink-3);
  transition:color var(--t-tap) var(--ease);
}
.cw-box.done h3 i{color:var(--ink)}
.cw-box h3 em{
  margin-left:auto;font-style:normal;letter-spacing:.06em;color:var(--ink-2);
  text-transform:none;font-size:10px;
}
.cw-box h3 em.need{color:var(--wait-ink)}

/* ── линейка вместо коробки ── */
.cw-field{
  display:flex;align-items:center;gap:9px;padding:8px 2px 7px;
  border-bottom:1px solid var(--rule);transition:border-color .13s;
}
@media (hover:hover) and (pointer:fine){
  .cw-field:hover{border-color:var(--ink-3)}
}
.cw-field:focus-within{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.cw-field input{
  flex:1;min-width:0;border:0;background:none;padding:0;outline:none;
  font-family:var(--font);font-size:13.5px;color:var(--ink);
}
.cw-field input::placeholder{color:var(--ink-3)}
/* Незаполненное обязательное: не красным — человек просто ещё не дошёл
   до этой графы, и поле ждёт, а не ругается. */
.cw-field.need{border-color:var(--wait)}
.cw-field.need input::placeholder{color:var(--wait-ink)}

/* ── 1. что закрываем ──
   Объект — первое решение и самая крупная строка бланка. */
.cw-select{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:5px 2px 9px;border-bottom:1px solid var(--rule);
  transition:border-color .13s;text-align:left;
}
@media (hover:hover) and (pointer:fine){
  .cw-select:hover{border-color:var(--ink-3)}
}
.cw-select.on{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.cw-select span{
  flex:1;min-width:0;font-size:16px;font-weight:600;letter-spacing:-.03em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cw-select span.empty{color:var(--ink-3);font-weight:500}
.cw-select em{color:var(--ink-3);display:flex;flex-shrink:0;font-style:normal;font-size:11px}

.cw-objs{
  margin:9px 0 4px;padding:6px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--rule);
  max-height:284px;overflow-y:auto;overscroll-behavior:contain;
  transform-origin:top center;animation:cwGrow .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes cwGrow{from{opacity:0;transform:scaleY(.965) translateY(-5px)}}
.cw-objs-g{
  display:flex;align-items:baseline;gap:8px;padding:8px 7px 5px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.cw-objs-g:first-child{padding-top:3px}
/* Закрывают обычно не один объект, а всю баню: имя группы берёт её всю. */
.cw-objs-g button{
  margin-left:auto;font-size:11px;
  color:var(--ink-3);text-decoration:underline;
  text-underline-offset:2px;transition:color var(--t-tap) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .cw-objs-g button:hover{color:var(--ink)}
}
.cw-obj{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 7px;
  border-radius:var(--r-sm);text-align:left;transition:background-color .1s;
}
.cw-obj i{
  flex:none;width:15px;height:15px;display:grid;place-items:center;border-radius:var(--r-xs);
  border:1px solid var(--rule);background:var(--card);
  font-size:9px;line-height:1;color:transparent;font-style:normal;
  transition:background-color .1s,border-color .1s,color .1s;
}
.cw-obj b{font-size:12.5px;font-weight:500;color:var(--ink);flex-shrink:0}
/* Занятость — то, ради чего список и открывают: закрывать занятое
   нельзя, и видно это до выбора, а не после. */
.cw-obj u{
  margin-left:auto;text-decoration:none;font-size:10.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cw-obj u.busy{color:var(--wait-ink)}
@media (hover:hover) and (pointer:fine){
  .cw-obj:hover{background:var(--sunk)}
}
.cw-obj:active{transform:scale(.995)}
.cw-obj.on i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ── переключатель ── */
.cw-seg{display:flex;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.cw-seg button{
  flex:1;padding:6px 13px;font-size:12px;font-weight:500;color:var(--ink-2);
  background:var(--card);transition:var(--t-tap) var(--ease);transition-property:color,background-color;white-space:nowrap;
}
.cw-seg button+button{border-left:1px solid var(--rule)}
@media (hover:hover) and (pointer:fine){
  .cw-seg button:hover{background:var(--sunk);color:var(--ink)}
}
.cw-seg button.on{background:var(--accent);color:var(--accent-ink)}

/* ── 2. когда ── */
.cw-when{display:flex;flex-direction:column;gap:2px;margin-top:13px}
.cw-wrow{display:flex;align-items:center;gap:12px}
.cw-wrow>span{
  width:34px;flex-shrink:0;font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.cw-pick{
  padding:8px 2px 7px;border-bottom:1px solid var(--rule);background:none;
  font-size:13px;letter-spacing:-.01em;color:var(--ink);
  text-align:left;transition:border-color .13s,background-color .13s;
  display:flex;align-items:baseline;gap:7px;border-radius:var(--r-xs) var(--r-xs) 0 0;flex:1;
}
.cw-pick u{text-decoration:none;font-size:11px;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .cw-pick:hover{border-color:var(--ink-3);background:var(--paper)}
}
.cw-pick:active{background:var(--sunk)}
.cw-pick.on{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.cw-pick.on u{color:var(--ink-2)}
.cw-time{
  flex:0 0 78px;padding:8px 2px 7px;border-bottom:1px solid var(--rule);
  background:none;outline:none;border-top:0;border-left:0;border-right:0;
  font-size:13px;letter-spacing:-.01em;color:var(--ink);
  transition:border-color .13s;
}
@media (hover:hover) and (pointer:fine){
  .cw-time:hover{border-color:var(--ink-3)}
}
.cw-time:focus{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.cw-time::-webkit-calendar-picker-indicator{opacity:.35;cursor:pointer}

/* Раскрытый выбор растёт из своей строки — оттуда же, куда потом и
   вернётся значение. */
.cw-cal{
  margin:9px 0 4px;padding:11px 12px 10px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--rule);
  transform-origin:top center;animation:cwGrow .2s cubic-bezier(.2,.8,.3,1);
}
.cw-cal-head{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.cw-cal-head b{font-size:12.5px;font-weight:600;letter-spacing:-.02em;min-width:112px}
.cw-cal-head>button{
  width:23px;height:23px;border-radius:var(--r-sm);color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;transition:var(--t-tap) var(--ease);transition-property:color,background-color;flex-shrink:0;
}
@media (hover:hover) and (pointer:fine){
  .cw-cal-head>button:hover{background:var(--sunk);color:var(--ink)}
}
.cw-cal-wk,.cw-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cw-cal-wk span{
  text-align:center;padding-bottom:4px;
  font-size:11px;
  color:var(--ink-3);
}
.cw-cal-d{
  padding:6px 0 5px;border-radius:var(--r-sm);
  font-size:12px;font-weight:500;letter-spacing:-.02em;
  color:var(--ink-2);transition:background-color .1s,color .1s;
}
@media (hover:hover) and (pointer:fine){
  .cw-cal-d:hover{background:var(--sunk);color:var(--ink)}
}
.cw-cal-d:active{transform:scale(.94)}
.cw-cal-d.out{opacity:.3}
.cw-cal-d.off{background:var(--off-paper)}
.cw-cal-d.now{color:var(--now);font-weight:600}
/* Дни между концами отрезка — плотнее подложки выходного, иначе
   суббота и середина диапазона выглядят одинаково. */
.cw-cal-d.mid{background:var(--sunk);color:var(--ink)}
.cw-cal-d.on{background:var(--band);color:var(--band-ink)}
.cw-cal-d.on.now{color:var(--band-ink)}

/* Что получилось словами: длительность крупно, перегон мелко. */
.cw-span{display:flex;align-items:baseline;gap:9px;margin-top:13px;flex-wrap:wrap}
.cw-span b{font-size:13.5px;font-weight:500;letter-spacing:-.01em}
.cw-span span{font-size:11.5px;color:var(--ink-3)}
.cw-span.bad b{color:var(--late)}

/* ── 3. почему ──
   Причина обязательна и список не закрыт (§5.8): рядом с частыми всегда
   стоит своя строка. */
.cw-plans{display:flex;gap:7px;flex-wrap:wrap}
.cw-plan{
  flex:1 1 118px;padding:8px 10px 9px;text-align:left;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);transition:var(--t-tap) var(--ease);transition-property:background-color,border-color,box-shadow,transform;
}
.cw-plan b{display:block;font-size:11.5px;font-weight:500;color:var(--ink);margin-bottom:2px}
.cw-plan u{display:block;text-decoration:none;font-size:10.5px;line-height:1.3;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .cw-plan:hover{border-color:var(--ink-3)}
}
.cw-plan:active{transform:scale(.985)}
.cw-plan.on{border-color:var(--ink);background:var(--sunk);box-shadow:inset 0 0 0 1px var(--ink)}
.cw-plan.on u{color:var(--ink-2)}

/* ── 4. что получится ──
   Лента времени — та же приборная полоса, что несёт шахматку: тёмное в
   этом продукте всегда значит «здесь считают время». Закрываемое —
   светлая полоса, брони внутри — глухие блоки своим статусным тоном. */
.cw-band{
  position:relative;border-radius:var(--r-sm);background:var(--band);
  padding:5px 0;overflow:hidden;
}
.cw-line{position:relative;height:26px;display:flex;align-items:center}
.cw-line+.cw-line{margin-top:3px}
/* Имя объекта лежит на ленте, а не в колонке слева: колонка съела бы
   треть ширины отрезка. Чтобы оно читалось поверх штриховки, под ним
   растушёван тот же приборный тон. */
.cw-line>em{
  position:absolute;left:0;z-index:3;padding:2px 18px 2px 8px;
  font-style:normal;font-size:10px;color:var(--band-ink-2);pointer-events:none;
  max-width:56%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:linear-gradient(90deg,var(--band) 62%,transparent);
}
.cw-tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.08)}
/* Закрываемое время. Штриховка, а не заливка: так закрытие уже нарисовано
   на ленте новой брони, и второго языка для одного и того же заводить
   незачем. Светлой заливкой во всю ширину оно перекрикивало и брони, и
   весь бланк — а смотреть надо как раз на брони. */
.cw-shut{
  position:absolute;top:4px;bottom:4px;border-radius:var(--r-xs);
  background:repeating-linear-gradient(-45deg,
    var(--band-2) 0 4px,rgba(255,255,255,.10) 4px 8px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}
/* Бронь внутри отрезка — то, что мешает: она поверх полосы и в своём
   статусном тоне, как в шахматке. */
.cw-busy{
  position:absolute;top:4px;bottom:4px;border-radius:var(--r-xs);z-index:2;
  background:var(--band-3);box-shadow:inset 2px 0 0 var(--tone),inset 0 0 0 1px rgba(255,255,255,.08);
}
.cw-busy.ok{--tone:var(--ok)}
.cw-busy.wait{--tone:var(--wait)}
.cw-busy.late{--tone:var(--late)}
.cw-busy.stop{--tone:var(--stop)}

.cw-edges{
  display:flex;justify-content:space-between;margin:0 1px 4px;
  font-size:9.5px;letter-spacing:0;color:var(--ink-3);
}
.cw-edges s{text-decoration:none}
.cw-legend{
  display:flex;align-items:center;gap:7px;margin-top:9px;min-height:16px;
  font-size:11.5px;color:var(--ink-3);
}
.cw-legend s{
  flex:none;width:18px;height:10px;border-radius:var(--r-xs);text-decoration:none;
  background:repeating-linear-gradient(-45deg,
    var(--band-2) 0 3px,rgba(255,255,255,.10) 3px 6px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.20);
}

/* Развилка. Не предупреждение, а вопрос: пока человек не ответил,
   закрыть нельзя (§5.8). Стоит сразу под лентой, на которой видно
   столкновение. */
.cw-fork{margin-top:13px}
.cw-fork>p{margin:0 0 9px;font-size:11.5px;line-height:1.5;color:var(--wait-ink)}
.cw-clash{
  width:100%;display:flex;align-items:center;gap:9px;padding:8px 2px 7px;
  border-bottom:1px solid var(--rule);text-align:left;transition:border-color .13s;
}
@media (hover:hover) and (pointer:fine){
  .cw-clash:hover{border-color:var(--ink-3)}
}
.cw-clash b{font-size:12.5px;font-weight:550;color:var(--ink);flex:none}
.cw-clash span{
  flex:1;min-width:0;font-size:11.5px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cw-clash u{
  flex:none;font-size:11px;
  color:var(--ink-3);text-decoration:none;
}
.cw-way{
  width:100%;display:flex;align-items:flex-start;gap:9px;margin-top:11px;
  padding:9px 11px;text-align:left;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);transition:var(--t-tap) var(--ease);transition-property:background-color,border-color;
}
.cw-way i{
  flex:none;width:15px;height:15px;margin-top:1px;border-radius:50%;
  border:1px solid var(--rule);background:var(--card);transition:var(--t-tap) var(--ease);transition-property:border-color,box-shadow;
}
.cw-way b{display:block;font-size:12px;font-weight:550;color:var(--ink)}
.cw-way span{display:block;margin-top:2px;font-size:11px;line-height:1.4;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .cw-way:hover{border-color:var(--ink-3)}
}
.cw-way.on{border-color:var(--ink);background:var(--sunk)}
.cw-way.on i{border-color:var(--ink);box-shadow:inset 0 0 0 3.5px var(--sunk),inset 0 0 0 9px var(--ink)}

/* Подвал говорит одной строкой, что произойдёт, и только потом даёт
   нажать: человек должен видеть, на что соглашается, до нажатия. */
.cw-foot{flex-direction:column;align-items:stretch;gap:10px}
.cw-say{min-width:0}
.cw-say b{display:block;font-size:12.5px;font-weight:550;color:var(--ink);line-height:1.35}
.cw-say span{display:block;margin-top:2px;font-size:11px;color:var(--ink-2)}
.cw-do{display:flex;gap:8px}
.cw-do .btn{flex:1}
.cw-do .btn-primary{flex:1.6}

@media (prefers-reduced-motion:reduce){
  .cw-objs,.cw-cal{animation:none}
}