/* Material planning — page layout and the page's own diagrams (the 24 h order track and item cells, the coverage
   line, the places tree, the policy bar). Everything else is the kit. Positions arrive as data (--at, --l, --w). */
@layer page {
  /* ── Orders ahead: 24 h of due times, items as cells, shifts behind ── */
  .pl-oa { --oa-l: 250px; --oa-r: 250px; }
  .pl-oa__row, .pl-oa__axis { display: grid; grid-template-columns: var(--oa-l) minmax(0, 1fr) var(--oa-r); gap: 0 var(--s5); align-items: center; }
  .pl-oa__axis { padding: var(--s3) var(--s5) var(--s2); font-size: var(--t-cap); color: var(--text-3); }
  .pl-oa__row { padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }
  .pl-oa__order { display: contents; }
  .pl-oa__ticks { position: relative; height: 34px; }
  .pl-oa__ticks span { position: absolute; bottom: 0; left: calc(var(--at, 0) * 1%); transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pl-oa__ticks span::after { content: ''; position: absolute; left: 50%; top: calc(100% + 2px); width: 1px; height: 5px; background: var(--line-2); }
  .pl-oa__ticks .pl-oa__band { top: 0; bottom: auto; transform: none; font-weight: 600; color: var(--text-2); }
  .pl-oa__ticks .pl-oa__band::after { display: none; }
  .pl-oa__ticks .pl-oa__now { left: 0; transform: none; font-weight: 650; color: var(--text); }
  .pl-oa__who { display: grid; gap: 2px; min-width: 0; }
  .pl-oa__who > a { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; }
  @media (pointer: coarse) { .pl-oa__who > a { min-height: 44px; } }
  .pl-oa__track { --night-a: 31.1%; --night-b: 64.4%; position: relative; height: 46px; border-radius: var(--r2); background: linear-gradient(90deg, transparent var(--night-a), var(--sheet-sunk) var(--night-a) var(--night-b), transparent var(--night-b)); }
  .pl-oa__track::before { content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: var(--line-2); }
  .pl-oa__lead { position: absolute; left: 0; top: 27px; width: calc(var(--at, 0) * 1%); height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--accent) 22%, transparent); }
  .pl-oa__due { position: absolute; top: 24px; left: calc(var(--at, 0) * 1%); width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 2px var(--sheet); }
  .pl-oa__due[data-tone] { background: var(--tone-dot); }
  .pl-oa__due[data-at="late"] { left: 0; margin-left: 0; }
  .pl-oa__lbl { position: absolute; top: 2px; left: calc(var(--at, 0) * 1%); transform: translateX(-50%); font-size: var(--t-cap); font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pl-oa__lbl[data-at="late"] { left: 16px; transform: none; color: var(--tone-fg); }
  .pl-oa__items { display: grid; gap: var(--s1); justify-items: start; min-width: 0; }
  .pl-oa__cells { display: flex; gap: 3px; flex-wrap: wrap; }
  .pl-oa__case { display: grid; gap: var(--s4); padding: var(--s5) var(--s5) var(--s6) calc(var(--oa-l) + var(--s5) * 2); border-top: 1px solid var(--line); background: var(--sheet-2); }
  .pl-oa__cover { max-width: 760px; }
  /* A lever's submit says what it does: the words of the checked lever (by position, in CSS). */
  .pl-lever [data-then] { display: none; }
  .pl-lever:has(.optcard:nth-child(1) input:checked) [data-then]:nth-child(1),
  .pl-lever:has(.optcard:nth-child(2) input:checked) [data-then]:nth-child(2) { display: revert; }
  @media (max-width: 1180px) { .pl-oa { --oa-l: 200px; --oa-r: 200px; } }
  @media (max-width: 760px) {
    .pl-oa__axis { grid-template-columns: minmax(0, 1fr); padding-inline: var(--s4); }
    .pl-oa__axis > :not(.pl-oa__ticks) { display: none; }
    .pl-oa__ticks .pl-oa__band, .pl-oa__ticks .pl-oa__minor { display: none; }
    .pl-oa__ticks { height: 20px; }
    .pl-oa__row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s4); }
    .pl-oa__track { grid-row: 3; }
    .pl-oa__case { padding: var(--s4); }
  }

  /* ── Parts at risk: the coverage line (above the minimum → below → runs out; the act-by band and mark) ── */
  .pl-cov { position: relative; height: 62px; margin-top: var(--s1); }
  .pl-cov__track { position: absolute; left: 0; right: 0; top: 24px; height: 10px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
  .pl-cov__seg { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); background: var(--tone-fill); }
  .pl-cov__seg[data-tone="bad"] { background: repeating-linear-gradient(135deg, var(--tone-fill) 0 3px, var(--tone-bg) 3px 6px); }
  .pl-cov__band { position: absolute; top: 18px; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); height: 22px; z-index: 1; background: color-mix(in oklab, var(--info-bg) 55%, transparent); border: 1.5px solid var(--info-fg); border-radius: 3px; }
  .pl-cov__mark { position: absolute; top: 15px; left: calc(var(--at) * 1%); width: 2px; height: 28px; z-index: 2; background: var(--accent); border-radius: 2px; }
  .pl-cov__lbl { position: absolute; left: calc(var(--at) * 1%); font-size: var(--t-cap); color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pl-cov__lbl[data-at="top"] { top: 0; }
  .pl-cov__lbl[data-at="bot"] { top: 44px; }
  .pl-cov__lbl b { color: var(--text); font-weight: 600; }
  .pl-cov__lbl b.pl-cov__act { color: var(--accent-text); }
  .pl-cov__lbl[data-align="r"] { transform: translateX(-100%); }
  .pl-cov__lbl:is([data-align="c"], [data-align="min"], [data-align="empty"]) { transform: translateX(-50%); }
  .pl-stock { max-width: 520px; }
  @media (max-width: 760px) {
    .pl-cov__lbl[data-align="min"] { transform: translateX(calc(-100% + 4px)); }
    .pl-cov__lbl[data-align="empty"] { transform: translateX(-4px); }
  }

  /* ── Changes since yesterday: the time column ── */
  .pl-digest__t { font-weight: 400; }

  /* ── Configure: the places tree and the policy bar ── */
  .pl-tree { display: grid; font-size: var(--t-data); min-width: 0; margin: 0; padding: 0; list-style: none; }
  .pl-tree ul { margin: 0 0 0 18px; padding-left: var(--s4); list-style: none; border-left: 1px solid var(--line-2); }
  .pl-tree__node { display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s2); flex-wrap: wrap; white-space: nowrap; }
  @media (min-width: 761px) { .pl-tree__node { flex-wrap: nowrap; } }
  .pl-polbar { display: flex; height: 28px; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line-2); background: var(--sheet-sunk); font-size: var(--t-cap); font-weight: 600; }
  .pl-polbar > span { display: flex; align-items: center; padding: 0 var(--s2); white-space: nowrap; overflow: hidden; }
  .pl-polbar > span[style] { width: calc(var(--w) * 1%); }
  .pl-polbar__lead { background: var(--info-bg); color: var(--info-fg); }
  .pl-polbar__guard { background: var(--warn-bg); color: var(--warn-fg); }
}