.distribution-review { margin:20px 0;container-type:inline-size;container-name:distribution-preview; }
.distribution-review h3 { margin:0 0 12px; }
.distribution-controls { display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:12px; }
.distribution-controls label { display:grid;gap:4px;max-width:110px; }
.distribution-controls input { width:100%; }
.distribution-chart { padding:24px 16px 16px;background:#151f1b;color:#e4ece8;border:1px solid #314039;border-radius:10px;margin:12px 0 8px; }
.distribution-heading,.distribution-row { display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;width:100%; }
.distribution-phases { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0; }
.distribution-phases>div { text-align:center;min-height:56px; }
.distribution-chart b { font-size:12px;display:block; }
.distribution-chart small { display:block;font-size:11px;color:#a8b9b0; }
.distribution-row { align-items:center;min-height:58px; }
.distribution-lane { position:relative;height:58px;margin:0 4px; }
.distribution-lane::before,.distribution-lane::after { content:"";position:absolute;inset-block:0;border-left:1px dashed #71847a; }
.distribution-lane::before { left:var(--distribution-start); }
.distribution-lane::after { left:var(--distribution-end); }
.distribution-dot { display:inline-block;width:7px;height:7px;border-radius:50%; }
.distribution-lane .distribution-dot { position:absolute;top:calc(50% - 3px);transform:translateX(-50%); }
.distribution-review [data-temperature="hot"] { background:#ff824f; }
.distribution-review [data-temperature="warm"] { background:#eaba55; }
.distribution-review [data-temperature="cold"] { background:#79aee5; }
.distribution-review [data-temperature="new"] { background:#82958b; }
.distribution-legend { margin:16px 0 0 152px;display:flex;flex-wrap:wrap;gap:12px 20px;font-size:11px;color:#a8b9b0; }
.distribution-legend span { display:inline-flex;align-items:center;gap:5px; }
@container distribution-preview (max-width:580px) {
  .distribution-chart { padding:16px 10px; }
  .distribution-heading { grid-template-columns:1fr; }
  .distribution-heading>span { display:none; }
  .distribution-phases { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .distribution-phases small { display:none; }
  .distribution-phases>div { min-height:44px; }
  .distribution-row { display:block;padding:6px 0; }
  .distribution-row>span:first-child { display:flex;gap:10px;align-items:baseline; }
  .distribution-lane { display:block;height:36px; }
  .distribution-lane .distribution-dot { width:4px;height:4px; }
  .distribution-legend { margin-left:0;gap:8px 12px; }
}