/* Первый запуск: плана нет, импорта не было. Лист «Первый запуск» макета:
   три панели — «Шаг 1 · Каталог», «Шаг 2 · Цели», «Шаг 3 · Запасы»
   (записка, раздел 16). Призрачные плитки и строки показывают место,
   которое заполнится. */

/* Лента: ширины ячеек этого экрана */
.ribbon-cell.game-day{width:300px}
.ribbon-cell.open-today{flex:1}
.ribbon-cell.plan-progress{width:180px}
.ribbon-cell.cut-line-shortage{width:160px}
.ribbon-cell.active-plan{width:150px}

/* Панели */
.panel.catalog{width:400px;border-color:var(--accent-primary)}
.panel.goals{flex:1}
.panel.stock{width:400px}
.panel-head-accent{color:var(--accent-primary)}
.panel-head-title{display:flex;gap:10px;align-items:baseline}
.panel-head-title .title{font-size:var(--fs-base)}

/* Карточка «что сделать» в начале панели */
.setup-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:6px 8px;
  border-radius:var(--radius-sm);
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
}
.panel.catalog .setup-card{border-color:var(--accent-primary)}
.setup-card-title{font-size:var(--fs-base);font-weight:600}
.setup-card-actions{display:flex;gap:8px}
.panel.stock .setup-card-actions{flex-wrap:wrap}
.setup-card-note{font-size:var(--fs-micro)}

/* Призрачные плитки каталога: пять в ряд, зазор 6 */
.ghost-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ghost-tile{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-elevated);
  padding:4px;
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items:center;
  position:relative;
  opacity:.35;
}
.ghost-avatar{width:100%;aspect-ratio:1}
.ghost-bar{border:0;background:var(--bg-elevated)}
.ghost-tile .ghost-bar{width:100%;height:8px}

/* Центр: что такое шаг */
.panel.goals .panel-body{justify-content:center;align-items:center;gap:14px}
.goals-intro{width:560px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.goals-intro-text{font-size:var(--fs-body);text-wrap:pretty}
.goals-example{width:100%;display:flex;flex-direction:column;gap:6px}
.goals-actions{display:flex;gap:8px}
.goals-actions .button.accent{opacity:.6}

/* Призрачная строка шага */
.ghost-step{
  border:1px solid var(--border);
  border-left:4px solid var(--border);
  border-radius:var(--radius-md);
  background:var(--bg-elevated);
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  min-height:34px;
  opacity:.4;
}
.ghost-step-number{width:20px;text-align:right;font-size:var(--fs-small)}
.ghost-step-handle{width:12px;height:16px}
.ghost-step-check{width:16px;height:16px}
.ghost-step-avatar{width:26px;height:26px}
.ghost-step .ghost-bar{flex:1;height:14px}

/* Черта расчета в неактивном виде */
.cut-line{display:flex;align-items:center;gap:8px;color:var(--accent-primary);font-size:var(--fs-caption);opacity:.6}
.cut-line-handle{width:18px;height:14px;border-style:solid;border-color:var(--accent-primary);color:var(--accent-primary)}
.cut-line-rule{flex:1;height:0;border-top:2px dashed var(--accent-primary)}

/* Призрачные строки запасов */
.ghost-resources{display:flex;flex-direction:column;gap:8px;opacity:.4}
.ghost-resource-icon{width:22px;height:22px}
.ghost-resources .ghost-bar{height:12px}
.ghost-resource-name{flex:1}
.ghost-resource-count{width:40px}

/* Готовность в футере запасов */
.panel-foot.readiness{flex-direction:column;align-items:stretch;gap:6px}
.readiness-head{display:flex;justify-content:space-between}

/* Заливка полос — заглушки, пока нет расчета: на листе 0% и 4%.
   Настоящая ширина будет задаваться из кода. */
.ribbon-cell.plan-progress .progress-fill{width:0}
.panel-foot.readiness .progress-fill{width:4%}