/* =========================================================================
   netex · pages/capability-planning-copilot.css · planning & copilot · the operator tablet, the schedule shuffle, material fills
   Loaded only on that page, after pages/capability.css (netex_capabilities_enqueue_page_css()).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* Material colours (planning): outlined fills, never brand colours. */
.cap-draw .gblock { stroke: var(--line-art); stroke-width: 1.2; }
.cap-draw .gblock--w { fill: #e9e6dd; }
.cap-draw .gblock--g { fill: #8b8f98; }
.cap-draw .gblock--r { fill: #8e4b42; }
.cap-draw .gblock--k { fill: #1d2029; }

.cap-key { display: inline-block; width: 22px; height: 14px; }
/* The hidden-cost hatch (the one sanctioned −47°): Molten for the purge, silver for the mould change. */
.cap-key--purge { color: var(--molten); box-shadow: inset 0 0 0 1.5px var(--molten); background: var(--hatch); }
.cap-key--mould { color: var(--silver); box-shadow: inset 0 0 0 1.5px var(--silver); background: var(--hatch); }

/* =========================================================================
   s8 planning · ask-line: the operator tablet (A) and the schedule shuffle (B)
   ========================================================================= */
.al-stage { display: grid; gap: var(--s-8); }
.al-disclaimer { font-size: var(--t-small); color: var(--fg-2); max-width: 70ch; }
.al-tablet { display: grid; max-width: 52rem; padding: 18px; background: var(--ink-3); border-radius: 22px; box-shadow: inset 0 0 0 1.5px var(--silver), 0 0 0 6px var(--ink-2); }
.al-tablet__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: 4px 6px var(--s-3); }
.al-tablet__hdr { font: 600 .8125rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--paper); }
.al-tablet__screen { display: grid; gap: var(--s-4); align-content: start; min-height: 22rem; max-height: 34rem; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4); background: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 6px; }
.al-thread { display: grid; gap: var(--s-5); }
.al-thread:empty { display: none; }
.al-qa { display: grid; gap: var(--s-3); }
.al-msg { max-width: 46rem; }
.al-msg--q { justify-self: end; padding: var(--s-2) var(--s-4); background: var(--paper); color: var(--ink); font: italic 400 1.0625rem/1.45 var(--f-serif); clip-path: var(--clip-ui); }
.al-msg--a { display: grid; gap: var(--s-3); padding: var(--s-4); background: var(--ink-2); box-shadow: inset 2px 0 0 var(--cyan); }
.al-msg--off, .al-msg--sys { color: var(--fg-2); font-size: var(--t-small); }
.al-msg--sys { padding: var(--s-2) var(--s-3); box-shadow: inset 2px 0 0 var(--rule); }
.al-badge { justify-self: start; padding: 2px 8px; font: 600 .6875rem/1.4 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: var(--cyan); }
.al-badge.is-rule { background: var(--molten); }
.al-lead { font: var(--w-strong) 1.0625rem/1.4 var(--f-sans); }
.al-steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--s-2); }
.al-steps li::marker { font: 600 .8125rem var(--f-mono); color: var(--cyan); }
.al-escalate { font-size: var(--t-small); color: var(--fg); padding-left: var(--s-3); box-shadow: inset 2px 0 0 var(--fg-2); }
.al-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.al-sent { font: 500 .8125rem var(--f-mono); color: var(--cyan); }
.al-sources__label { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); margin-bottom: var(--s-2); }
.al-sources__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.al-source { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-3); background: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.al-source__name { font: 500 .8125rem/1.4 var(--f-mono); }
.al-source__open { min-height: 32px; font: 600 .75rem var(--f-sans); color: var(--cyan); text-decoration: underline; text-underline-offset: .2em; }
.al-preview { flex-basis: 100%; display: flex; align-items: flex-start; gap: var(--s-3); padding-top: var(--s-2); }
.al-preview[hidden] { display: none; }
.al-preview__page { width: 96px; height: auto; }
.al-preview__page path { fill: none; stroke: var(--silver); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.al-preview__page path:first-child { fill: var(--ink-3); }
.al-preview__lines { opacity: .55; }
.al-preview__hl { fill: var(--cyan); opacity: .18; }
.al-preview__chip { cursor: default; }
.al-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-small); color: var(--fg-2); }
.al-fb { min-height: 32px; min-width: 44px; padding: 0 10px; box-shadow: inset 0 0 0 1px var(--rule); font: 600 .8125rem var(--f-sans); color: var(--fg); }
.al-fb[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.al-feedback__thanks { flex-basis: 100%; font-size: .8125rem; color: var(--fg); }
.al-feedback__thanks:empty { display: none; }
.al-another { justify-self: start; }
.al-suggest { display: grid; gap: var(--s-2); }
.al-suggest__label { font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.al-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.al-chip { min-height: 40px; padding: .45em .95em; text-align: left; border: var(--bw) solid color-mix(in srgb, var(--fg) 40%, transparent); border-radius: 20px; font: 500 .875rem/1.3 var(--f-sans); color: var(--fg); }
@media (hover: hover) { .al-chip:hover { border-color: var(--fg); background: var(--ink-2); } }
.al-input { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2); margin-top: var(--s-3); }
.al-input__text { min-height: 48px; padding: 0 14px; border: 0; border-bottom: 1.5px solid var(--paper); background: var(--ink); color: var(--paper); font: 400 1rem var(--f-sans); border-radius: 0; }
.al-input__text::placeholder { color: var(--paper-72); }
.al-input__text:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }
.al-mic { min-height: 48px; padding: 0 12px; box-shadow: inset 0 0 0 1.5px var(--paper-72); font: 600 .8125rem var(--f-sans); color: var(--paper); clip-path: var(--clip-ui); }
@media (max-width: 559px) { .al-input { grid-template-columns: minmax(0, 1fr) auto; } .al-mic { grid-column: 1 / -1; order: 3; } }

.sh-wrap { display: grid; gap: var(--s-4); max-width: 72rem; }
.sh-title { font-size: var(--t-h3); }
.sh-intro { margin-top: var(--s-2); max-width: 60ch; color: var(--fg-2); }
.sh-head p:last-child { margin-top: var(--s-3); }
.sh-readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); }
@media (min-width: 900px) { .sh-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sh-readouts .nx-readout { align-content: start; }
.sh-readouts .nx-readout__value { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.25rem); }
.sh-board { position: relative; display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-3) var(--s-3); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.sh-axis { position: relative; height: 18px; margin-left: 92px; }
.sh-axis span { position: absolute; left: var(--x); transform: translateX(-50%); font: 500 .6875rem/1 var(--f-mono); color: var(--fg-2); }
.sh-axis span:first-child { transform: none; }
.sh-axis span:last-child { transform: translateX(-100%); }
.sh-lane { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; align-items: center; }
.sh-lane__name { font: 600 .75rem/1.2 var(--f-mono); color: var(--fg); }
.sh-lane__track { position: relative; height: 64px; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 12.5%); box-shadow: inset 0 -1px 0 var(--rule); }
.sh-card { position: absolute; top: 4px; bottom: 4px; left: var(--x, 0); width: var(--w, 10%); display: grid; align-content: center; gap: 1px; padding: 0 6px; overflow: hidden; text-align: left; font: 600 .75rem/1.15 var(--f-mono); color: var(--ink); background: #e9e6dd; box-shadow: inset 0 0 0 1px var(--ink); transition: left var(--dur-mech) var(--ease-mech), width var(--dur-mech) var(--ease-mech); }
.sh-card__meta { font-weight: 500; font-size: .625rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-card--grey { background: #8b8f98; }
.sh-card--red { background: #8e4b42; color: var(--paper); }
.sh-card--black { background: #1d2029; color: var(--paper); box-shadow: inset 0 0 0 1px var(--silver); }
.sh-card.is-late { box-shadow: inset 0 0 0 2px var(--molten); }
.sh-card__late { font-size: .5625rem; letter-spacing: .06em; text-transform: uppercase; color: var(--molten-deep); font-weight: 700; }
.sh-card--red .sh-card__late, .sh-card--black .sh-card__late { color: var(--molten); }
.sh-gap { position: absolute; top: 4px; bottom: 4px; left: var(--x); width: var(--w); transition: left var(--dur-mech) var(--ease-mech), width var(--dur-mech) var(--ease-mech); }
.sh-gap--purge { color: var(--molten); background: repeating-linear-gradient(47deg, currentColor 0 1.5px, transparent 1.5px 6px); box-shadow: inset 0 0 0 1px var(--molten); }
.sh-gap--mould { background: repeating-linear-gradient(-47deg, var(--silver) 0 1px, transparent 1px 6px); box-shadow: inset 0 0 0 1px var(--silver); opacity: .7; }
.sh-rush { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.sh-rush[hidden] { display: none; }
.sh-rush__hint { font: 500 .8125rem/1.4 var(--f-mono); color: var(--fg-2); }
.sh-rush .sh-card { position: relative; inset: auto; width: auto; min-height: 52px; padding: 6px 14px; font-size: .8125rem; }
.sh-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.sh-msg { min-height: 1.5em; font: 500 .9375rem/1.5 var(--f-mono); color: var(--fg); max-width: 90ch; }
.sh-msg:empty { display: none; }
.sh-keys { font: 500 .75rem/1.5 var(--f-mono); color: var(--fg-2); }
.sh-rules summary { font: 500 .8125rem var(--f-mono); color: var(--fg); min-height: 32px; display: flex; align-items: center; gap: .6em; cursor: pointer; list-style: none; }
.sh-rules summary::-webkit-details-marker { display: none; }
.sh-rules summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--cyan); }
.sh-rules[open] summary::before { content: "\2212"; }
.sh-rules summary:hover { color: var(--cyan); }
.sh-rules ul { margin: var(--s-2) 0 0; padding: 0 0 0 1.2em; display: grid; gap: var(--s-1); font-size: var(--t-small); color: var(--fg-2); }
/* Phones: the day fits the screen (a board that scrolled sideways would fight the drag). Lane names sit
   above their track, the hour ticks thin out, cards keep their order number (the colour is the fill;
   the full card is in its accessible name). */
@media (max-width: 767px) {
	.sh-board { padding-inline: var(--s-2); }
	.sh-lane { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.sh-axis { margin-left: 0; }
	.sh-axis span:nth-child(even) { display: none; }
	.sh-lane__track { height: 52px; }
	.sh-card { padding: 0 3px; font-size: .6875rem; }
	.sh-card__meta { display: none; }
}

} /* end @layer pages */