/* web/assets/css/one-px.css (lane RUV; COORDINATOR item 72, NOTE INT to ALL 13:02 CET P1 and P5, spec 8.5 D-6: loads after
   ui.css): the look of the ONE Prices page web/views/one/prices.js, ported 1 to 1 from the 4875 prototype
   proto/app/ui/r6/px.css (round 6c). Uses the tokens of tokens.css (--ink, --muted, --card, --hair, --g, --gl, --gd) and
   adds only chart tokens. Light and dark. Every rule is scoped under .one-px (the page root of render), so the rd, rp
   and sh pages that use px- class names of their own keep their look while they exist (RUV H163). */
:root {
  --px-grid: #EDF1EE; --px-axis: #AEB9B3; --px-band: rgba(18, 54, 39, .055); --px-alt: rgba(18, 54, 39, .035);
  --px-fill: rgba(72, 212, 156, .26); --px-fillneg: rgba(181, 71, 60, .16); --px-ghost: #B9C3BE; --px-sel: var(--g);
  --px-ring: #12261F; --px-hl: rgba(46, 135, 99, .10); --px-cost: #2A78D6; --px-sale: #1E9E8C; --px-loss: rgb(181, 71, 60);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --px-grid: #1E2A25; --px-axis: #3A4943; --px-band: rgba(72, 212, 156, .06); --px-alt: rgba(72, 212, 156, .035);
    --px-fill: rgba(72, 212, 156, .20); --px-fillneg: rgba(222, 110, 98, .20); --px-ghost: #4A5A53; --px-sel: var(--gl);
    --px-ring: #E6EEEA; --px-hl: rgba(72, 212, 156, .10); --px-cost: #5C9BE6; --px-sale: #3CC2AE; --px-loss: rgb(232, 120, 106);
  }
}
:root[data-theme="dark"] {
  --px-grid: #1E2A25; --px-axis: #3A4943; --px-band: rgba(72, 212, 156, .06); --px-alt: rgba(72, 212, 156, .035);
  --px-fill: rgba(72, 212, 156, .20); --px-fillneg: rgba(222, 110, 98, .20); --px-ghost: #4A5A53; --px-sel: var(--gl);
  --px-ring: #E6EEEA; --px-hl: rgba(72, 212, 156, .10); --px-cost: #5C9BE6; --px-sale: #3CC2AE; --px-loss: rgb(232, 120, 106);
}

/* card frame (title 18/600, one question below, tools and N at the right) */
.one-px .card.xf.px { margin: 0 0 16px; padding: 18px 22px 20px; color: var(--ink); }
.one-px .xf.px .xf-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.one-px .xf.px .xf-tt { min-width: 0; }
.one-px .xf.px .xf-tt h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
.one-px .xf.px .xf-tt .q { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.one-px .xf.px .xf-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.one-px .xf.px .xf-info { border: 0; background: transparent; padding: 4px; color: var(--muted); cursor: help; display: inline-flex; }
.one-px .xf.px .px-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.one-px .xf.px .px-ic .px-dot { fill: currentColor; stroke: none; }
.one-px .xf.px .nbtn { width: 32px; height: 32px; border: 1px solid var(--ctl); border-radius: 7px; background: var(--card); color: var(--ink2); font-weight: 650; font-size: 12px; }
.one-px .xf.px .px-seg { display: inline-flex; background: var(--track); border: 1px solid var(--hair); border-radius: 8px; padding: 2px; }
.one-px .xf.px .px-seg button { border: 0; background: transparent; padding: 4px 11px; border-radius: 6px; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink2); cursor: pointer; }
.one-px .xf.px .px-seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* layouts: 2/3 + 1/3, and the two half cards side by side */
.one-px .px-pc2, .one-px .px-g2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.one-px .px-g2 { grid-template-columns: minmax(0, 2.15fr) minmax(260px, 1fr); }
.one-px .px-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.one-px .px-grid2 .card.xf.px { margin-bottom: 16px; }
@media (max-width: 900px) { .one-px .px-pc2, .one-px .px-g2, .one-px .px-grid2 { grid-template-columns: minmax(0, 1fr); } }
/* phone width: the chart keeps a readable size and scrolls inside its card; the page never scrolls sideways */
.one-px .px-cw { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 700px) { .one-px .px-cw .px-svg { min-width: 600px; } .one-px .px-pc2 > .px-cw + .px-cw .px-svg { min-width: 0; } }
/* the per barrel chart is drawn 380 wide: at phone width it fits the card as it is (no 600 px upscale of its text) */

/* charts */
.one-px .px-svg { width: 100%; height: auto; display: block; overflow: visible; font-family: Inter, system-ui, sans-serif; color: var(--ink); }
.one-px .px-svg .px-grid { stroke: var(--px-grid); stroke-width: 1; }
.one-px .px-svg .px-axis { stroke: var(--px-axis); stroke-width: 1; }
.one-px .px-svg .px-zero { stroke: var(--px-axis); stroke-width: 1.2; }
.one-px .px-svg .px-band { fill: var(--px-band); }
.one-px .px-svg .px-alt { fill: var(--px-alt); }
.one-px .px-svg .px-hl { fill: var(--px-hl); }
.one-px .px-svg .px-tick { fill: var(--muted); font-size: 11px; }
.one-px .px-svg .px-unit { fill: var(--muted); font-size: 11px; }
.one-px .px-svg .px-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.one-px .px-svg .px-line.thin { stroke-width: 1.6; }
.one-px .px-svg .px-line.sale { stroke: var(--ink); stroke-width: 2.4; }
.one-px .px-svg .px-line.dash { stroke-dasharray: 5 3; }
.one-px .px-svg .px-ghost { fill: none; stroke: var(--px-ghost); stroke-width: 1.2; }
.one-px .px-svg .px-step { fill: none; stroke-width: 1.8; }
.one-px .px-svg .px-wline { fill: none; stroke-width: 1.2; stroke-dasharray: 2 3; }
.one-px .px-svg .px-pt { fill: transparent; }
.one-px .px-svg .px-pt:hover { fill: currentColor; fill-opacity: .18; }
.one-px .px-svg .px-sd { fill: var(--ink); }
.one-px .px-svg .px-fill { fill: var(--px-fill); }
.one-px .px-svg .px-fillneg { fill: var(--px-fillneg); }
.one-px .px-svg .px-ring { fill: none; stroke: var(--px-ring); stroke-width: 1.8; }
.one-px .px-svg .px-cn text { fill: #FFFFFF; font-size: 10.5px; font-weight: 700; }
.one-px .px-svg .px-sel { fill: none; stroke: var(--px-sel); stroke-width: 2; }
.one-px .px-svg .px-hit { fill: transparent; cursor: pointer; }
.one-px .px-svg .px-hit:focus-visible { outline: 2px solid var(--g); }
/* producer Sale and cost per cargo: small rings (about 100 cargoes), a larger hit circle, the picked cargo bold */
.one-px .px-svg .px-rhit { fill: transparent; cursor: pointer; }
.one-px .px-svg .px-rhit:focus-visible { outline: 2px solid var(--g); }
.one-px .px-svg .px-ring.on { stroke-width: 2.6; }
.one-px .px-side .px-note { font-size: 12px; color: var(--ink-3, #5F6D67); margin: 6px 0 4px; }
.one-px .px-svg .px-sb.used { stroke: var(--px-ring); stroke-width: 1; }
.one-px .px-svg .px-end { font-size: 11.5px; font-weight: 600; }
.one-px .px-svg .px-end .px-endk { font-weight: 650; }
.one-px .px-svg .px-small .px-end { font-size: 10.5px; }
.one-px .px-svg .px-key { stroke-width: 2.4; }
.one-px .px-svg .px-xhl { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.one-px .px-svg .px-xht { fill: var(--ink); font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
/* QR 21 contrast: index colours (JKM teal, TTF orange) fail 4.5:1 as small text, so end label text is ink in both
   themes; the coloured key line and the end dot carry the series colour next to the name (never colour alone) */
.one-px .px-svg .px-end { fill: var(--ink); }
.one-px .px-svg .px-mh { cursor: pointer; }
.one-px .px-svg .px-mh .px-mhv { fill: var(--ink); font-size: 12px; }
.one-px .px-svg .px-mh.on .px-tick, .one-px .px-svg .px-mh.on .px-mhv { fill: var(--ink); font-weight: 700; }

/* side panels */
.one-px .px-side { font-size: 13px; color: var(--ink); min-width: 0; }
.one-px .px-side .px-sh { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin: 4px 0 10px; }
.one-px .px-side .px-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--hair); border-radius: 12px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.one-px .px-side .px-chip i, .one-px .px-side .px-dm { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.one-px .px-side .px-dm { transform: rotate(45deg); }
.one-px .px-side .px-cnb { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 9px; color: #FFFFFF; font-size: 11px; font-weight: 700; }
.one-px .px-side .px-seg { margin: 0 0 12px; flex-wrap: wrap; }
.one-px .px-splits { display: grid; gap: 6px; margin-bottom: 14px; }
.one-px .px-srow { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 8px; }
.one-px .px-sk { color: var(--muted); text-align: right; font-size: 12px; }
.one-px .px-sbar { display: flex; gap: 2px; height: 20px; }
.one-px .px-sbar i { display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 11px; font-weight: 600; border-radius: 3px; overflow: hidden; white-space: nowrap; }
.one-px .px-sbar i.cur { background: #13695D; color: #FFFFFF; }
.one-px .px-sbar i.nb { background: rgba(30, 158, 140, .32); color: var(--gd); }
:root[data-theme="dark"] .one-px .px-sbar i.nb { color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .one-px .px-sbar i.nb { color: var(--ink); } }
.one-px .px-srow .pxv.b { font-weight: 700; font-size: 14px; }
.one-px .px-tw { max-width: 100%; overflow-x: auto; }
.one-px .px-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.one-px .px-t thead th.num .px-dm { margin-right: 4px; }
.one-px .px-t th, .one-px .px-t td { padding: 7px 6px; border-bottom: 1px solid var(--hair2); text-align: left; }
.one-px .px-t thead th { color: var(--muted); font-weight: 550; }
.one-px .px-t tbody th { font-weight: 650; white-space: nowrap; }
.one-px .px-t .num { text-align: right; font-variant-numeric: tabular-nums; }

/* waterfall sale to spread (F9) */
.one-px .px-wf { display: grid; gap: 3px; }
.one-px .px-wfr { display: grid; grid-template-columns: var(--px-wfk, 92px) minmax(0, 1fr) 56px; align-items: center; gap: 8px; font-size: 12px; }
.one-px .px-wfr .px-wfk { color: var(--ink2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.one-px .px-wfr.tot .px-wfk, .one-px .px-wfr.tot .pxv { font-weight: 700; color: var(--ink); }
.one-px .px-wfb { position: relative; height: 13px; }
.one-px .px-wfb i { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.one-px .px-wfb i.sale { background: rgba(30, 158, 140, .40); }
.one-px .px-wfb i.sale.tot { background: var(--ink); }
.one-px .px-wfb i.cost { background: rgba(42, 120, 214, .38); }
.one-px .px-wfb i.cost.tot { background: var(--px-cost); }
.one-px .px-wfb i.add { opacity: .95; }
.one-px .px-wfb i.spread { background: var(--g); }
.one-px .px-wfb i.spreadneg { background: var(--px-loss); }
.one-px .px-wfgap { height: 10px; }
.one-px .px-wfr .pxv { font-variant-numeric: tabular-nums; }
/* Sale and cost build up: value axis under the bars (mockup m-prices-02-salecost.png) */
.one-px .px-wfr.axr { margin-top: 2px; }
.one-px .px-wfax { position: relative; height: 16px; border-top: 1px solid var(--px-axis); }
.one-px .px-wfax .px-tick { position: absolute; top: 2px; transform: translateX(-50%); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.one-px .px-wfax .px-tick:first-child { transform: none; }
.one-px .px-wfax .px-tick:last-child { transform: translateX(-100%); }
.one-px .px-wfb i.sale.sub { background: rgba(30, 158, 140, .55); }
.one-px .px-wfb i.cost.sub { background: rgba(42, 120, 214, .55); }
/* Prices by window header: months outside the ADP year muted (mockup) */
.one-px .px-svg .px-mh .px-mo { fill: var(--muted); font-weight: 400; }
.one-px .px-svg .px-mh.on .px-mo { fill: var(--ink); font-weight: 700; }

/* PORT73D PX2 (COORDINATOR item 73, run D; the COORD rows of the Prices pages, 4875 proto r6/px.css):
   (1) Price curves of a world with one unit: the one chart over both columns (prices.js PC, .px-pc1), never an empty
       right third; below the card width it keeps a readable size and scrolls inside its card as the gas chart does.
   (2) the narrow form of a side switch with a long row (prices.js segFit, px-segd), so the buyer row stays one row at 1440.
   (3) the build up name column: 92 px as 4875 or the width prices.js sets for the longest name (--px-wfk, rule above).
   (4) the one closed More form at the card foot (prices.js moreMenu), the form of the More sections of one-in.css. */
.one-px .px-pc2.px-pc1 { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .one-px .px-pc1 > .px-cw .px-svg { min-width: calc(100% * 1162 / 760); } }
@media (max-width: 700px) { .one-px .px-pc1 > .px-cw .px-svg { min-width: 918px; } }
.one-px .xf.px .px-side .px-seg.px-segd button { padding: 4px 6px; }
.one-px details.px-more { margin-top: 12px; }
.one-px details.px-more > summary { cursor: pointer; font-weight: 600; color: var(--ink2); padding: 8px 0; }
.one-px details.px-more > summary:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; border-radius: 4px; }
.one-px .px-more .px-mrow { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 4px; }