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

:root {
  --g-approach: #4f8fb5;
  --g-vessel: #c8632f;
  --g-quay: #b4823c;
  --g-yard: #8f7a35;
  --g-control: #a8402f;
  --g-landside: #3f7a55;
  --g-support: #7b7b6a;
  --g-other: #6b5f8c;
  --g-hinterland: #4a5a72;
}

.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; }

/* Group colours for the stage list and the scene labels. */
.scene-label.group-approach { border-left-color: var(--g-approach); }
.scene-label.group-vessel { border-left-color: var(--g-vessel); }
.scene-label.group-quay { border-left-color: var(--g-quay); }
.scene-label.group-yard { border-left-color: var(--g-yard); }
.scene-label.group-control { border-left-color: var(--g-control); }
.scene-label.group-landside { border-left-color: var(--g-landside); }
.scene-label.group-support { border-left-color: var(--g-support); }
.scene-label.group-other { border-left-color: var(--g-other); }
.scene-label.group-hinterland { border-left-color: var(--g-hinterland); }

/* The HUD carries more counters than the other two sections. */
.hud-bottom { font-size: 9.5px; }

@media (min-width: 1400px) {
  .workspace { grid-template-columns: 300px minmax(0, 1fr) 350px; }
}