/* Oil page (2026-10-23, documentations/OIL.md). Scoped under #view-oil, namespaced oil-*.
   Bare theme tokens only, so light/dark and every palette come for free. Two columns that
   stack under 900px; nothing scrolls sideways but the scores table, inside its own box. */

#view-oil { padding: 0; }

#view-oil .oil-wrap { display: flex; flex-direction: column; gap: var(--gap-stack); padding: 18px 4px; }
#view-oil .oil-empty { padding: 40px 24px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-lg); }
#view-oil .oil-mast { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#view-oil .oil-wm { font-size: 22px; font-weight: 600; color: var(--text); }
#view-oil .oil-mut { color: var(--text-muted); font-size: 13px; }

#view-oil .oil-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap-stack); align-items: start; }
#view-oil .oil-col { display: flex; flex-direction: column; gap: var(--gap-stack); min-width: 0; }
@media (max-width: 900px) {
  #view-oil .oil-cols { grid-template-columns: minmax(0, 1fr); }
}

#view-oil .oil-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 16px 18px; min-width: 0;
}
#view-oil .oil-card p { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; max-width: 74ch; }
#view-oil .oil-h3 {
  margin: 0 0 8px; font: 500 11px/1.4 var(--font-mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--colhead);
}
#view-oil .oil-k {
  display: inline-block; margin-right: 8px; font: 500 11px/1.4 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase; color: var(--colhead);
}

/* the call */
#view-oil .oil-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#view-oil .oil-pill {
  font-size: 12px; padding: 3px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--text-2);
}
#view-oil .oil-dir {
  font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--mixed-edge); background: var(--mixed-tint); color: var(--mixed-text);
}
#view-oil .oil-dir.sm { font-size: 11px; padding: 1px 8px; }
#view-oil .oil-dir.is-up { border-color: var(--bull-edge); background: var(--bull-tint); color: var(--bull-text); }
#view-oil .oil-dir.is-down { border-color: var(--bear-edge); background: var(--bear-tint); color: var(--bear-text); }
#view-oil .oil-head { margin: 12px 0 0; font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--text); max-width: 70ch; }
#view-oil .oil-case { font-size: 15px; }
#view-oil .oil-changed { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }

/* prices */
#view-oil .oil-warn {
  padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--warn-edge);
  background: var(--warn-tint); color: var(--warn-text);
}
#view-oil .oil-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
#view-oil .oil-tile { background: var(--surface-sunken); border-radius: var(--r-md); padding: 10px 12px; min-width: 0; }
#view-oil .oil-px { font-size: 20px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
#view-oil .oil-chg { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
#view-oil .is-up { color: var(--bull-text); }
#view-oil .is-down { color: var(--bear-text); }

#view-oil .oil-fig { margin: 14px 0 0; }
#view-oil .oil-chart { display: block; width: 100%; height: auto; }
#view-oil .oil-grid { stroke: var(--chart-grid); stroke-width: 1; }
#view-oil .oil-tick { fill: var(--text-faint); font-size: 11px; font-family: var(--font-sans); }
/* The chart scales with its card, so on a phone its 720-unit width shrinks to about half and
   11-unit labels read at five pixels. Larger units there keep them near nine. */
@media (max-width: 600px) {
  #view-oil .oil-tick { font-size: 19px; }
}
#view-oil .oil-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
#view-oil .oil-line.l-wti { stroke: var(--chart-rate1); }
#view-oil .oil-line.l-brent { stroke: var(--chart-rate2); }
#view-oil .oil-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--text-2); }
#view-oil .oil-legend .sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-left: 4px; }
#view-oil .oil-legend .sw.l-wti { background: var(--chart-rate1); }
#view-oil .oil-legend .sw.l-brent { background: var(--chart-rate2); }

/* drivers, scenarios, fit */
#view-oil .oil-list { list-style: none; margin: 0; padding: 0; }
#view-oil .oil-drv { padding: 10px 0; border-top: 1px solid var(--line); }
#view-oil .oil-drv:first-child { border-top: 0; padding-top: 2px; }
#view-oil .oil-eff { font-size: 12px; color: var(--text-muted); }
#view-oil .oil-eff.is-up { color: var(--bull-text); }
#view-oil .oil-eff.is-down { color: var(--bear-text); }
#view-oil .oil-scns { display: flex; flex-direction: column; gap: 10px; }
#view-oil .oil-scn { background: var(--surface-sunken); border-radius: var(--r-md); padding: 10px 12px; }
#view-oil .oil-scn-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#view-oil .oil-scn-w { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
#view-oil .oil-scn-n { color: var(--text); font-weight: 500; }
#view-oil .oil-fit { padding: 10px 0; border-top: 1px solid var(--line); }
#view-oil .oil-fit:first-of-type { border-top: 0; padding-top: 2px; }
#view-oil .oil-fit-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#view-oil .oil-state { font-size: 12px; padding: 1px 8px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text-2); }
#view-oil .oil-state.is-agrees { border-color: var(--new-edge); background: var(--new-tint); color: var(--new-text); }
#view-oil .oil-state.is-differs { border-color: var(--warn-edge); background: var(--warn-tint); color: var(--warn-text); }

/* scores */
#view-oil .oil-tblwrap { overflow-x: auto; margin-top: 10px; }
#view-oil .oil-tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
#view-oil .oil-tbl th {
  text-align: left; font: 500 10px/1.4 var(--font-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--colhead); padding: 4px 8px 6px 0;
}
#view-oil .oil-tbl td { padding: 6px 8px 6px 0; border-top: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
#view-oil .oil-foot { margin: 0; max-width: 90ch; }