/* Refinery section — extends the oil-explainer stylesheet. */

:root {
  --g-receipt: #8a6a3d;
  --g-distillation: #c8632f;
  --g-naphtha: #b4823c;
  --g-distillate: #8f7a35;
  --g-conversion: #a8402f;
  --g-bottoms: #6b4a52;
  --g-lightEnds: #4f95b5;
  --g-hydrogen: #5f8fa8;
  --g-blending: #3f7a55;
  --g-distribution: #4a5a72;
  --g-secondary: #6f9b86;
}

.panel-head .chain { margin-top: 8px; }
.panel-head .chain a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted #5a4520; }
.panel-head .chain a:hover { color: #f0c65a; }

/* ------------------------------------------------------ product slate -- */
.slate { display: flex; flex-direction: column; gap: 5px; }
.slate-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.slate-row .name { color: var(--ink); font-size: 10.5px; }
.slate-row .value { color: var(--accent); font-size: 10.5px; }
.slate-bar {
  grid-column: 1 / -1;
  height: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.slate-bar span { position: absolute; inset: 0 auto 0 0; }
.slate-row .dest { grid-column: 1 / -1; color: var(--ink-faint); font-size: 9px; }

.solids {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
}
.solids dt, .solids .k { color: var(--ink-faint); font-size: 9.5px; }
.solids .v { color: var(--ink); font-size: 9.5px; text-align: right; }

/* -------------------------------------------------------- the barrel -- */
.barrel { display: flex; flex-direction: column; gap: 2px; }
.barrel-row {
  display: grid;
  grid-template-columns: 92px 1fr 46px;
  gap: 7px;
  align-items: center;
  font-size: 9.5px;
}
.barrel-row .cut { color: var(--ink-dim); }
.barrel-row .track { height: 9px; background: var(--panel-2); border: 1px solid var(--line); position: relative; }
.barrel-row .track span { position: absolute; inset: 0 auto 0 0; }
.barrel-row .pct { color: var(--ink); text-align: right; }

/* Extra group colours for the stage list and labels. */
.scene-label.group-receipt { border-left-color: var(--g-receipt); }
.scene-label.group-distillation { border-left-color: var(--g-distillation); }
.scene-label.group-naphtha { border-left-color: var(--g-naphtha); }
.scene-label.group-distillate { border-left-color: var(--g-distillate); }
.scene-label.group-conversion { border-left-color: var(--g-conversion); }
.scene-label.group-bottoms { border-left-color: var(--g-bottoms); }
.scene-label.group-lightEnds { border-left-color: var(--g-lightEnds); }
.scene-label.group-hydrogen { border-left-color: var(--g-hydrogen); }
.scene-label.group-blending { border-left-color: var(--g-blending); }
.scene-label.group-distribution { border-left-color: var(--g-distribution); }
.scene-label.group-utilities { border-left-color: var(--g-utilities); }
.scene-label.group-safety { border-left-color: var(--g-safety); }
.scene-label.group-secondary { border-left-color: var(--g-secondary); }

.stage-group-head.secondary-head {
  margin-top: 14px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.stage-item.secondary-item { background: rgba(72, 110, 91, 0.07); }
.stage-item.secondary-item:hover { background: rgba(72, 110, 91, 0.16); }

/* The refinery panel carries more content than the rig's. */
@media (min-width: 1400px) {
  .workspace { grid-template-columns: 300px minmax(0, 1fr) 350px; }
}