/* The 16-week plan screen. Built on the workbench parts (workbench.css): one function
   bar, a ledger whose rows scroll inside the screen, the dialog. What is added here is the
   week grid: a sticky product column, sixteen week columns each with the two sites' load
   and its own Lock in, and cells that read as cover running down, lit where a run is
   proposed and badged with the site. */
.cp-screen { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: 1; }
.cp-toolbar { flex: none; }
.cp-toolbar .schedule-title { align-items: baseline; flex-wrap: wrap; }
.cp-toolbar .schedule-title > span { max-width: 900px; white-space: normal; line-height: 1.5; }
.cp-bar { flex: none; }
.cp-bar input[type="search"] { width: 220px; }
.cp-issues { display: flex; gap: 14px; flex: none; padding: 7px 12px; border: 1px solid var(--hairline); border-radius: var(--r2); background: var(--warn-soft); font: 500 11px var(--font-sans); color: var(--ink); }
.cp-issues .bad { color: var(--bad); font-weight: 600; }
.cp-host { min-height: 0; }
.cp-host > .wb-state { flex: 1; display: grid; place-content: center; }
.cp-ledger { flex: 1 1 auto; min-height: 0; }
.cp-ledger .wb-ledger-body { overflow: auto; }
.cp-ledger table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.cp-ledger .wb-ledger-body thead th { position: sticky; top: 0; z-index: 3; visibility: visible; height: auto; line-height: 1.3; background: var(--paper); border: 0; border-bottom: 1px solid var(--hairline); padding: 8px 8px; vertical-align: bottom; }
.cp-ledger .cp-sticky { position: sticky; left: 0; z-index: 2; background: var(--surface); border-right: 1px solid var(--hairline); min-width: 220px; max-width: 280px; }
.cp-ledger thead .cp-sticky { z-index: 4; background: var(--paper); }
.cp-ledger tbody tr:hover td { background: var(--surface-2); }
.cp-ledger tbody tr:hover td.cp-sticky { background: var(--surface-2); }
.cp-ledger td { padding: 5px 8px; border-bottom: 1px solid var(--hairline-2); vertical-align: middle; font: 12px/1.35 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-ledger td small, .cp-ledger th small { display: block; font: 10px/1.4 var(--font-mono); color: var(--slate); white-space: nowrap; }
.cp-product .cp-link { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); font: 12px/1.35 var(--font-sans); cursor: pointer; }
.cp-product .cp-link b { display: block; font-weight: 600; white-space: normal; overflow-wrap: anywhere; max-width: 260px; }
.cp-product .cp-link:hover b { color: var(--steel); }
.cp-ledger th.cp-week { padding: 6px 4px; min-width: 92px; }
.cp-week-head { display: flex; flex-direction: column; gap: 3px; align-items: stretch; font: 500 10px var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--ink); }
.cp-week-head.accepted { color: var(--steel); }
.cp-week-head em { font: 600 8.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--good); font-style: normal; padding: 2px 0; }
.cp-week-head em.cp-projected { color: var(--slate-2); }
.cp-lock { height: 18px; padding: 0 6px; border: 1px solid var(--hairline-2); border-radius: 3px; background: var(--paper); color: var(--ink-2); font: 600 8.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cp-lock:hover { border-color: var(--steel); color: var(--steel); }
.cp-week-date small { display: inline; color: var(--slate); margin-left: 3px; }
.cp-load { position: relative; display: flex; justify-content: space-between; gap: 4px; height: 14px; padding: 0 4px; border-radius: 3px; background: var(--paper-2); overflow: hidden; font: 500 9px/14px var(--font-mono); color: var(--ink-2); font-style: normal; }
.cp-load::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: color-mix(in srgb, var(--steel) 28%, transparent); }
.cp-load.full::before { background: color-mix(in srgb, var(--warn) 45%, transparent); }
.cp-load.over::before { background: color-mix(in srgb, var(--bad) 45%, transparent); }
.cp-load b, .cp-load span { position: relative; }
/* Week cells: the cover after the week is the number every cell shows, so a row reads as
   stock running down; a week with a run is lit, with the run in thousands and the site. */
.cp-cell { text-align: right; cursor: default; }
.cp-cell[role="button"] { cursor: pointer; }
.cp-cell[role="button"]:hover, .cp-cell[role="button"]:focus-visible { outline: 2px solid var(--steel); outline-offset: -2px; }
.cp-cell .cp-cover { display: block; font: 500 12px/1.3 var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cp-cell.no-make .cp-cover { color: var(--slate); }
.cp-cell .cp-make { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font: 700 12px/1.2 var(--font-sans); color: var(--ink); }
.cp-cell .cp-site { display: inline-block; padding: 1px 5px; border-radius: 3px; background: var(--steel); color: #fff; font: 700 8.5px/1.4 var(--font-mono); letter-spacing: .06em; font-style: normal; }
.cp-cell .cp-site.none { background: var(--slate-2); }
.cp-cell.has-make { background: color-mix(in srgb, var(--steel) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--steel) 45%, transparent); }
.cp-cell.low .cp-cover { color: var(--warn); font-weight: 600; }
.cp-cell.low.no-make { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.cp-cell.stockout .cp-cover { color: var(--bad); font-weight: 700; }
.cp-cell.stockout { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.cp-cell.excess.no-make { background: color-mix(in srgb, var(--slate) 8%, transparent); }
.cp-cell.overridden { box-shadow: inset 3px 0 0 var(--steel); }
.cp-cell.has-make.overridden { box-shadow: inset 3px 0 0 var(--steel), inset 0 0 0 1px color-mix(in srgb, var(--steel) 45%, transparent); }
.cp-cell.accepted { background: color-mix(in srgb, var(--good) 14%, transparent); }
.cp-cell.accepted .cp-site { background: var(--good); }
.cp-cell.scheduled .cp-make::after { content: "▸"; font-size: 9px; color: var(--steel); }
.cp-ledger td.num small { display: inline; margin-left: 2px; color: var(--warn); }
.cp-legend { display: inline-flex; align-items: center; gap: 6px; font: 500 10px var(--font-mono); color: var(--slate); }
.cp-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-left: 8px; border: 1px solid var(--hairline); }
.cp-legend i.run { background: color-mix(in srgb, var(--steel) 24%, transparent); border-color: var(--steel); }
.cp-legend i.low { background: color-mix(in srgb, var(--warn) 24%, transparent); }
.cp-legend i.stockout { background: color-mix(in srgb, var(--bad) 30%, transparent); }
.cp-legend i.excess { background: color-mix(in srgb, var(--slate) 16%, transparent); }
.cp-legend i.overridden { box-shadow: inset 3px 0 0 var(--steel); }
.cp-legend i.accepted { background: color-mix(in srgb, var(--good) 20%, transparent); }
/* Weeks tab */
.cp-weeks td { vertical-align: top; white-space: normal; }
.cp-weeks .badge { white-space: nowrap; }
.cp-load-cell { min-width: 220px; }
.cp-load-cell.over small:first-of-type { color: var(--bad); font-weight: 600; }
.cp-load-cell .cp-bar { position: relative; height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin: 4px 0 3px; border: 0; padding: 0; }
.cp-load-cell .cp-bar span { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--steel); }
.cp-load-cell.over .cp-bar span { background: var(--bad); }
/* Dialogs */
/* The week dialog and the firm-up dialog are the wide size of the one dialog (wb-dialog-l); the body is the kit's own single column. */
.cp-dlg-body { padding-top: 12px; padding-bottom: 14px; }
/* The week dialog: figures across the top, the chart the full width, the week block under
   it (the spreadsheet's rows, one column per week, aligned to the chart's axis), then the
   sum on the left and the decision on the right. */
.cp-cell-body { padding-top: 10px; padding-bottom: 14px; }
.cp-chart { flex: none; margin: 0; }
.cp-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cp-chart figcaption { font: 500 9.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.cp-chart-toggle { display: inline-flex; border: 1px solid var(--hairline-2); border-radius: var(--r2); overflow: hidden; }
.cp-chart-toggle button { height: 26px; padding: 0 10px; border: 0; background: var(--paper); color: var(--slate); font: 500 11px var(--font-sans); cursor: pointer; }
.cp-chart-toggle button + button { border-left: 1px solid var(--hairline-2); }
.cp-chart-toggle button.on { background: var(--ink); color: var(--paper); }
.cp-chart-wrap { position: relative; }
.cp-chart svg { display: block; width: 100%; height: auto; }
.cp-grid { stroke: var(--hairline-2); stroke-width: 1; }
.cp-zero { stroke: var(--ink-3); stroke-width: 1; }
.cp-this-week { stroke: var(--slate-2); stroke-width: 1; stroke-dasharray: 2 3; }
.cp-axis { font: 9.5px var(--font-mono); fill: var(--slate); }
.cp-axis.this { fill: var(--ink); font-weight: 700; }
.cp-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cp-line.planned { stroke: var(--steel); }
.cp-line.without { stroke: var(--slate-2); stroke-dasharray: 6 4; }
.cp-line.target { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 2 3; }
.cp-mark { fill: var(--steel); stroke: var(--surface); stroke-width: 2; }
.cp-ring { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.cp-runout { fill: var(--bad); stroke: var(--surface); stroke-width: 2; }
.cp-slot { fill: transparent; }
.cp-slot:hover { fill: color-mix(in srgb, var(--steel) 8%, transparent); }
.cp-tip { position: absolute; pointer-events: none; padding: 5px 8px; border-radius: var(--r1); background: var(--ink); color: var(--paper); font: 500 10.5px/1.4 var(--font-mono); white-space: nowrap; box-shadow: var(--sh2); z-index: 2; }
.cp-chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font: 500 10.5px var(--font-sans); color: var(--slate); }
.cp-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cp-chart-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--steel); }
.cp-chart-legend i.without { border-top-style: dashed; border-color: var(--slate-2); }
.cp-chart-legend i.target { border-top: 1.5px dotted var(--warn); }
.cp-chart-legend i.mark { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--steel); }
.cp-chart-legend i.ring { width: 9px; height: 9px; border: 1.5px solid var(--ink); border-radius: 50%; }
.cp-chart-legend i.runout { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--bad); }
/* The week block: the spreadsheet's rows for this product, one column per week, aligned
   under the chart's points. Colour only where it means something: the run cells lit with
   their site, cover by status, this week's column ringed. */
.cp-block { flex: none; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin-top: 6px; font: 11px/1.3 var(--font-mono); font-variant-numeric: tabular-nums; }
.cp-block th, .cp-block td { padding: 4px 3px; border-bottom: 1px solid var(--hairline-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-block th { font: 500 8.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--slate); }
.cp-block thead th { border-bottom: 1px solid var(--hairline); text-align: center; }
.cp-block th.cp-block-label { text-align: left; color: var(--ink-2); font-weight: 500; letter-spacing: .04em; }
.cp-block td.this, .cp-block th.this { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.cp-block thead th.this { color: var(--ink); font-weight: 700; }
.cp-block tr.arrives td.has-run { color: var(--steel); font-weight: 600; }
.cp-block tr.run td.has-run { background: color-mix(in srgb, var(--steel) 16%, transparent); color: var(--ink); font-weight: 700; }
.cp-block tr.run td.has-run i { display: block; width: fit-content; margin: 1px 0 0 auto; padding: 0 4px; border-radius: 3px; background: var(--steel); color: #fff; font: 700 7.5px/1.5 var(--font-mono); letter-spacing: .06em; font-style: normal; vertical-align: 1px; }
.cp-block tr.cover td.low { color: var(--warn); font-weight: 700; }
.cp-block tr.cover td.stockout { color: var(--bad); font-weight: 700; background: color-mix(in srgb, var(--bad) 12%, transparent); }
.cp-block tr.cover td.excess { color: var(--slate); }
.cp-block tr.closing td.short { color: var(--bad); }
.cp-block tr.without td { color: var(--slate); }
.cp-block tr.without td.short { color: var(--bad); }
.cp-block tr.target td { color: var(--slate); }
/* The decision band under the block: what goes in this week, why in one line, the sites'
   load, and the fields to change it. */
.cp-decide { flex: none; display: grid; grid-template-columns: minmax(320px, 3fr) minmax(300px, 2fr); gap: 14px 22px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: var(--r2); background: var(--paper); align-items: start; }
.cp-what { margin: 0; font: 13px/1.5 var(--font-sans); color: var(--ink-2); }
.cp-what b { color: var(--ink); font-weight: 600; }
.cp-notes { margin: 6px 0 0; font: 12px/1.5 var(--font-sans); color: var(--slate); }
.cp-notes .bad { color: var(--bad); font-weight: 600; }
.cp-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.cp-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px solid var(--hairline-2); border-radius: 11px; background: var(--surface); font: 500 10.5px var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cp-pill b { font-weight: 700; color: var(--ink); }
.cp-pill.this { border-color: var(--steel); }
.cp-pill.bad { color: var(--bad); border-color: var(--bad); }
.cp-fine { font: 10.5px/1.4 var(--font-sans); color: var(--slate); }
.cp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.cp-fields .cp-note { grid-column: 1 / -1; }
.cp-cases { font: 10.5px var(--font-mono); color: var(--slate); margin-top: 3px; }
.cp-help { margin: 0; font: 12px/1.55 var(--font-sans); color: var(--slate); }
@media (max-width: 900px) { .cp-decide { grid-template-columns: 1fr; } .cp-fields { grid-template-columns: 1fr; } }
.cp-table-wrap { overflow: auto; max-height: calc(100dvh - 300px); border: 1px solid var(--hairline); border-radius: var(--r2); }
.cp-detail { width: 100%; border-collapse: separate; border-spacing: 0; font: 12px/1.4 var(--font-sans); }
.cp-detail th { position: sticky; top: 0; background: var(--paper); text-align: left; padding: 8px 10px; font: 500 9.5px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--hairline); }
.cp-detail td { padding: 7px 10px; border-bottom: 1px solid var(--hairline-2); font-variant-numeric: tabular-nums; vertical-align: top; }
.cp-detail td small { color: var(--slate); font: 10.5px var(--font-mono); display: block; }
.cp-detail .num, .cp-detail th.num { text-align: right; white-space: nowrap; }
.cp-detail tr.has-make td:nth-child(4) { color: var(--steel); }
.cp-detail tr.low td:nth-child(6) { color: var(--warn); font-weight: 600; }
.cp-detail tr.stockout td:nth-child(5), .cp-detail tr.stockout td:nth-child(6) { color: var(--bad); font-weight: 600; }
.cp-foot-note { font: 11px/1.5 var(--font-sans); color: var(--slate); max-width: 640px; }
.wb-dlg-meta strong small { font-weight: 500; color: var(--slate); margin-left: 4px; }
.wb-dlg-meta strong.bad { color: var(--bad); }
.wb-dlg-meta strong.low { color: var(--warn); }
.wb-dlg-meta strong.stockout { color: var(--bad); }
.wb-dlg-foot { display: flex; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--hairline); background: var(--paper); flex: none; }
.wb-spacer { flex: 1; }
.wb-field { display: flex; flex-direction: column; gap: 5px; }
.wb-field > span { font: 500 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.wb-field input, .wb-field select { height: 32px; padding: 0 9px; border: 1px solid var(--hairline-2); border-radius: var(--r2); background: var(--paper); color: var(--ink); font: 500 12px var(--font-sans); }
/* The demand panel's cover line */
.demand-cover { margin: 8px 0 0; font: 10.5px/1.5 var(--font-sans); color: var(--slate); }
.demand-cover b { color: var(--ink); }
.demand-cover.low b { color: var(--warn); }
.demand-cover.stockout b { color: var(--bad); }
@media (max-width: 900px) { .cp-explain { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .cp-ledger .cp-sticky { min-width: 150px; max-width: 170px; } .cp-bar input[type="search"] { width: 140px; } }