/* Место романа Х1б (BETA-D-167 доп. п. 6; эскиз storage-r3 §2–3):
   алерт под топбаром (плашка-сестра панели заданий медиа) и окно-паспорт
   «Место…». Токены — только из tokens.css (страж css-tokens.test.ts). */

.wb-storage-alert {
  display: flex;
  align-items: center;
  gap: var(--pf-space-sm);
  padding: var(--pf-space-sm) var(--pf-space-lg);
  border-bottom: 1px solid var(--pf-color-text-warning);
  border-left: 4px solid var(--pf-color-text-warning);
  background: color-mix(in srgb, var(--pf-color-text-warning) 12%, var(--pf-color-surface-bar));
  font-size: 13.5px;
}
.wb-storage-alert--danger,
.wb-storage-alert--full {
  border-bottom-color: var(--pf-color-text-danger);
  border-left-color: var(--pf-color-text-danger);
  background: color-mix(in srgb, var(--pf-color-text-danger) 12%, var(--pf-color-surface-bar));
}
.wb-storage-alert__text { flex: 0 1 auto; }
.wb-storage-alert__spacer { flex: 1; }

/* Окно-паспорт: две колонки «Здесь» / «Сохранено», полоса аккаунта. */
.wb-storage { max-width: 760px; }
.wb-storage__body { display: flex; flex-direction: column; gap: var(--pf-space-md); }
.wb-storage__stack {
  display: flex;
  height: 10px;
  border-radius: var(--pf-radius-pill);
  overflow: hidden;
  border: 1px solid var(--pf-color-border-subtle);
  background: var(--pf-color-surface-sunken);
}
.wb-storage__seg { display: block; height: 100%; }
.wb-storage__seg--text { background: var(--pf-color-accent); }
.wb-storage__seg--context { background: color-mix(in srgb, var(--pf-color-accent) 60%, var(--pf-color-surface-sunken)); }
.wb-storage__seg--history { background: color-mix(in srgb, var(--pf-color-accent) 35%, var(--pf-color-surface-sunken)); }
.wb-storage__seg--canon { background: var(--pf-color-text-success); }
.wb-storage__seg--scene { background: color-mix(in srgb, var(--pf-color-text-success) 55%, var(--pf-color-surface-sunken)); }
.wb-storage__seg--trash { background: var(--pf-color-text-muted); }
.wb-storage__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pf-space-lg);
  align-items: start;
}
@media (max-width: 640px) {
  .wb-storage__cols { grid-template-columns: 1fr; }
}
.wb-storage__col { display: flex; flex-direction: column; gap: var(--pf-space-xs); }
.wb-storage__row {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: var(--pf-space-xs) var(--pf-space-md);
  align-items: baseline;
  font-size: 14px;
}
.wb-storage__row--total {
  font-weight: 600;
  border-top: 1px solid var(--pf-color-border-subtle);
  padding-top: var(--pf-space-xs);
  margin-top: var(--pf-space-xs);
}
.wb-storage__k { display: flex; flex-direction: column; }
.wb-storage__sub { color: var(--pf-color-text-muted); }
.wb-storage__v {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.wb-storage__note { margin-top: var(--pf-space-sm); }
.wb-storage__account {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding-top: var(--pf-space-sm);
  border-top: 1px solid var(--pf-color-border-subtle);
}
.wb-storage__bar {
  height: 8px;
  border-radius: var(--pf-radius-pill);
  overflow: hidden;
  border: 1px solid var(--pf-color-border-subtle);
  background: var(--pf-color-surface-sunken);
}
.wb-storage__bar > i { display: block; height: 100%; background: var(--pf-color-accent); }
.wb-storage__bar--warn > i { background: var(--pf-color-text-warning); }
.wb-storage__bar--full > i { background: var(--pf-color-text-danger); }
.wb-storage__actions { justify-content: flex-end; }
/* «Освободить:» (Х2) — тихие кнопки в строку с подписью и итогом. */
.wb-storage__free {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
  padding-top: var(--pf-space-sm);
  border-top: 1px solid var(--pf-color-border-subtle);
}
.wb-storage__free .pf-btn { font-size: var(--pf-typography-body-small-size); }
.wb-storage__error { color: var(--pf-color-text-danger); }

/* Архив медиатеки (Х6, эскиз storage-r3 §4): строка действий, плашки хода
   и итога, окно подтверждения внутри паспорта. */
.wb-storage__archive { display: flex; flex-direction: column; gap: var(--pf-space-sm); }
.wb-storage-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pf-space-sm);
  padding: var(--pf-space-sm) var(--pf-space-md);
  border-radius: var(--pf-radius-md);
  border: 1px solid var(--pf-color-border-subtle);
  border-left: 4px solid var(--pf-color-accent);
  background: color-mix(in srgb, var(--pf-color-accent) 10%, var(--pf-color-surface-sunken));
  font-size: 13.5px;
}
.wb-storage-band > span:first-child { flex: 1 1 200px; }
.wb-storage-band__bar { flex: 1 1 120px; }
.wb-storage-band--ok {
  border-left-color: var(--pf-color-text-success);
  background: color-mix(in srgb, var(--pf-color-text-success) 12%, var(--pf-color-surface-sunken));
}
.wb-storage-band--warn {
  border-left-color: var(--pf-color-text-warning);
  background: color-mix(in srgb, var(--pf-color-text-warning) 12%, var(--pf-color-surface-sunken));
}
.wb-storage-band--err {
  border-left-color: var(--pf-color-text-danger);
  background: color-mix(in srgb, var(--pf-color-text-danger) 12%, var(--pf-color-surface-sunken));
}
.wb-storage-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
  padding: var(--pf-space-md);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-md);
  background: var(--pf-color-surface-sunken);
}
.wb-storage-confirm .wb-storage__actions { margin-top: var(--pf-space-sm); }

/* Архив медиатеки (BETA-D-238): шаги задания, карточка итога, плашки на столе. */
.wb-storage-run,
.wb-storage-card {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

.wb-storage-steps {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}

.wb-storage-step {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--pf-space-sm);
  align-items: start;
  padding: var(--pf-space-xs) var(--pf-space-sm);
  border: 1px solid var(--pf-color-border-subtle);
  border-radius: var(--pf-radius-sm);
}

.wb-storage-step__n {
  width: 20px;
  height: 20px;
  border: 1px solid var(--pf-color-border-strong);
  border-radius: 50%;
  color: var(--pf-color-text-secondary);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

.wb-storage-step__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* «Сейчас здесь» — подложка selected и черта акцента, не заливка (правило золота). */
.wb-storage-step--now {
  background: var(--pf-color-surface-selected);
  border-color: var(--pf-color-border-focus);
  box-shadow: inset 3px 0 0 var(--pf-color-border-focus);
}

.wb-storage-step--now .wb-storage-step__n {
  border-color: var(--pf-color-border-focus);
  color: var(--pf-color-text-primary);
}

.wb-storage-step--wait {
  border-style: dashed;
  opacity: 0.65;
}

.wb-storage__ack {
  gap: var(--pf-space-xs);
  align-items: flex-start;
}

.wb-storage__archive-file {
  border-bottom: 1px dashed var(--pf-color-border-subtle);
}

.wb-storage-banners {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-xs);
}