/* The mini Outlay app: Outlay's theme, components and schedule board, as a fixed frame with a guided tour. */
html, body { height: 100%; overflow: hidden; }
@media (min-width: 900px) { html.embed { zoom: 1.15; } html.embed body { height: calc(100vh / 1.15); } html.embed main.page { height: calc(100vh / 1.15 - 52px); } }
.outlay-app { padding-top: 52px; background: var(--paper); }
.outlay-section-nav a i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 7px; border-radius: 50%; font: 600 10px var(--font-mono); font-style: normal; background: var(--paper-2); color: var(--slate); }
.outlay-section-nav a[aria-current] i { background: var(--steel); color: #fff; }
.outlay-state.is-sample { display: inline-flex; color: var(--steel); }
main.page { height: calc(100dvh - 52px); padding: 14px 20px 16px; }
.ol-view { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.ol-view[hidden] { display: none; }
.ol-view .page-head { flex: none; margin-bottom: 12px; padding-bottom: 12px; align-items: center; }
.ol-view .page-head h1 { font-size: 22px; white-space: nowrap; }
.ol-view .page-head .eyebrow { margin-bottom: 4px; }
.ol-view .page-head .actions { display: flex; gap: 8px; align-items: center; }
.ol-view .page-head .actions .button { margin: 0; }
.ol-view .metrics { flex: none; margin-bottom: 12px; }
.ol-view .grow { flex: 1; min-height: 0; margin-bottom: 0; display: flex; flex-direction: column; }
.panel.grow > :last-child { flex: 1; min-height: 0; overflow: auto; }
.empty-state { height: 100%; min-height: 160px; display: grid; place-content: center; text-align: center; gap: 6px; color: var(--slate); }
.empty-state b { font: 600 16px var(--font-display); color: var(--ink); }

/* Families: one hue per area, from the theme */
.fam { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; background: var(--c); }
.sugar { --c: var(--ink); } .sauce { --c: var(--steel); } .cereal { --c: var(--good); } .coffee { --c: #7a5b3a; } .print { --c: var(--slate); }

/* 1 · Demand grid */
.demand-grid table { width: 100%; border-collapse: collapse; }
.demand-grid th { position: sticky; top: 0; background: var(--surface); text-align: left; font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); padding: 9px 16px; border-bottom: 1px solid var(--hairline); }
.demand-grid td { padding: 6px 16px; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.demand-grid td b { font: 600 13px var(--font-display); } .demand-grid td small { display: block; margin-left: 18px; color: var(--slate-2); font-size: 11px; }
.demand-grid .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.demand-grid .cell { display: inline-block; min-width: 56px; padding: 3px 8px; border-radius: 6px; background: var(--steel-soft); color: var(--ink); font-weight: 600; }
.demand-grid .tot { font-weight: 700; color: var(--ink); } .demand-grid .nil { color: var(--slate-3); }
.go .demand-grid .cell { animation: pop .45s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--k) * 26ms); }
.go .demand-grid tbody tr { animation: rise .4s ease backwards; }

/* Outlay's board inside a panel: the board itself, without its own status bar and ledgers */
.board-area { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.board-area > .schedule-board { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 0; }
.board-area .sb-statusbar, .board-area .sb-readout, .board-area .sb-details, .board-area .sb-notices, .board-area .sb-draft-note { display: none; }
.board-area .sb-board { flex: 1; min-height: 0; max-height: none; }
.board-area .sb-legend { flex: none; }
.go .sb-plan { animation: place .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--k) * 60ms + 120ms); }
.day-pick { display: flex; gap: 6px; } .day-pick .button { margin: 0; min-width: 52px; }

/* 3 · People */
.people-main { display: grid !important; grid-template-columns: 1.7fr 1fr; gap: 14px; }
.people-main .panel { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.shifts { flex: 1; min-height: 0; }
.shifts table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.shifts th { font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); padding: 8px 10px; text-align: left; }
.shifts tbody th { font: 600 13px var(--font-display); text-transform: none; letter-spacing: 0; color: var(--ink); width: 120px; border-top: 1px solid var(--hairline); }
.shifts tbody th small { display: block; font: 10px var(--font-mono); color: var(--slate-2); margin-top: 3px; }
.sh { padding: 10px; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); vertical-align: middle; }
.sh-fig { font: 500 13px var(--font-mono); color: var(--slate); } .sh-fig b { font-size: 22px; color: var(--ink); }
.sh-bar { position: relative; height: 8px; border-radius: 4px; background: var(--paper-2); margin: 8px 0 6px; }
.sh-bar .need { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--steel); }
.sh-bar .on { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.sh span { font-size: 11px; color: var(--slate); }
.sh.short { background: var(--bad-soft); } .sh.short .sh-bar .need { background: var(--bad); } .sh.short span { color: var(--bad); font-weight: 600; }
.sh.idle { background: repeating-linear-gradient(135deg, var(--paper) 0 6px, var(--surface) 6px 12px); } .sh.idle span { color: var(--slate-2); }
.sh.ok span { color: var(--good); font-weight: 600; }
.go .sh { animation: pop .45s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--k) * 40ms + 100ms); }
.go .sh-bar .need { animation: grow .8s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--k) * 40ms + 250ms); }
.ahead { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.ahead li { border: 1px solid var(--hairline); border-left: 4px solid var(--steel); border-radius: 10px; padding: 12px 14px; background: var(--surface); }
.ahead li b { display: block; font: 600 14px var(--font-display); margin-bottom: 3px; } .ahead li span { font-size: 12px; color: var(--slate); line-height: 1.5; }
.ahead li.bad { border-left-color: var(--bad); } .ahead li.warn { border-left-color: var(--warn); } .ahead li.idle { border-left-color: var(--slate-3); }
.go .ahead li { animation: slide .5s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--k) * 180ms + 900ms); }

/* 4 · Run */
.run-ctl .run-clock { display: flex; flex-direction: column; align-items: flex-end; margin-right: 6px; line-height: 1.1; }
.run-ctl .run-clock small { font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); }
.run-ctl .run-clock b { font: 600 22px var(--font-mono); font-variant-numeric: tabular-nums; }
.run-main { display: grid !important; grid-template-columns: 1fr 270px; gap: 14px; }
.run-main .panel { margin: 0; display: flex; flex-direction: column; min-height: 0; }
.feed ol { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.feed li { border: 1px solid var(--hairline); border-left: 4px solid var(--slate-3); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.45; opacity: .3; cursor: pointer; transition: opacity .3s; }
.feed li.seen { opacity: 1; } .feed li.latest { box-shadow: var(--sh2); }
.feed li b { display: block; font: 600 11px var(--font-mono); margin-bottom: 2px; }
.feed li.bad { border-left-color: var(--bad); } .feed li.warn { border-left-color: var(--warn); } .feed li.good { border-left-color: var(--good); }

/* The guided tour */
.tour-spot { position: fixed; z-index: 200; border-radius: 10px; box-shadow: 0 0 0 3px var(--gold), 0 0 0 9999px rgba(5,36,56,.42); pointer-events: none; transition: left .55s cubic-bezier(.2,.8,.2,1), top .55s cubic-bezier(.2,.8,.2,1), width .55s cubic-bezier(.2,.8,.2,1), height .55s cubic-bezier(.2,.8,.2,1); }
.tour { position: fixed; z-index: 201; width: 340px; background: var(--surface); border-radius: 12px; box-shadow: var(--sh3); padding: 16px 18px 14px; border-top: 4px solid var(--gold); transition: left .55s cubic-bezier(.2,.8,.2,1), top .55s cubic-bezier(.2,.8,.2,1); }
.tour h3 { font: 600 17px var(--font-display); margin: 6px 0 6px; color: var(--ink); }
.tour p { font-size: 13px; line-height: 1.55; color: var(--slate); margin: 0 0 12px; }
.tour-progress { display: flex; gap: 3px; } .tour-progress i { flex: 1; height: 3px; border-radius: 2px; background: var(--paper-2); } .tour-progress i.done { background: var(--steel); } .tour-progress i.on { background: var(--gold); }
.tour-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .tour-nav .button { margin: 0; } .tour-nav span { font: 500 11px var(--font-mono); color: var(--slate-2); }

@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes place { from { opacity: 0; transform: translateX(-60px); } }
@keyframes grow { from { width: 0; } }
@keyframes slide { from { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .go *, .tour, .tour-spot { animation: none !important; transition: none !important; } }

/* Colour on the actuals, not the plans (as in the Outlay cockpit) */
.board-area .sb-plan.sb-blocked, .board-area .sb-plan.sb-late { border-color: var(--ink); box-shadow: var(--sh1); }
.board-area .sb-plan.sb-blocked .sb-card-top { color: inherit; }
.board-area .sb-actual.ol-green { background: var(--good-soft); color: var(--good); border-color: var(--good); }
.board-area .sb-actual.ol-amber { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.board-area .sb-actual.ol-red { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.board-area .sb-actual.ol-green .sb-card-bottom, .board-area .sb-actual.ol-amber .sb-card-bottom, .board-area .sb-actual.ol-red .sb-card-bottom { opacity: 1; }
/* Dependencies: a view you switch on. Links run behind the cards, never across them; linked runs stand out
   and the rest step back (still solid, so a link passing behind one is hidden, not drawn through it) */
.head-ctl { display: flex; align-items: center; gap: 14px; }
.ol-deps { height: 32px; min-height: 32px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); font: 600 12px var(--font-sans); cursor: pointer; white-space: nowrap; }
.ol-deps:has(input:checked) { border-color: var(--steel); background: var(--steel-soft); color: var(--ink); }
.board-area .sb-card { transition: background .3s, color .3s, border-color .3s; }
.board-area.deps-on .sb-card:not(.ol-linked) { background: var(--paper); border-color: var(--hairline); color: var(--slate-3); box-shadow: none; }
.board-area.deps-on .sb-card:not(.ol-linked) * { color: inherit; }
.board-area.deps-on .sb-plan.ol-linked { border-color: var(--steel); box-shadow: 0 0 0 2px var(--steel-soft), var(--sh1); }
.board-area .sb-flows { z-index: 2; }
.board-area .ol-halo { fill: none; stroke: var(--surface); stroke-width: 8px; stroke-linejoin: round; stroke-linecap: round; }
.board-area .sb-flow { stroke: var(--steel); stroke-width: 2.5px; stroke-dasharray: none; opacity: 1; fill: none; }
.board-area .sb-flow.ol-knock { stroke: var(--bad); stroke-width: 3px; }
.board-area.deps-in .sb-flow, .board-area.deps-in .ol-halo { stroke-dasharray: 1; animation: draw 1.1s cubic-bezier(.4,0,.2,1) backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* 1 · Demand by week, in Outlay's 16-week plan layout, filling the panel */
.demand-grid:has(.ol-weeks) { overflow: hidden; display: flex; flex-direction: column; }
.ol-weeks { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ol-weeks .wb-ledger-body { flex: 1; min-height: 0; }
.ol-weeks table { width: 100%; table-layout: fixed; }
.ol-weeks th.cp-sticky, .ol-weeks td.cp-sticky { width: 230px; }
.ol-weeks th:last-child { width: 86px; }
.ol-weeks td.cp-product b { font: 600 13px var(--font-display); } .ol-weeks td.cp-product small { margin-left: 18px; }
.ol-weeks .cp-cell { padding: 3px 10px; } .ol-weeks td.cp-product { padding-top: 3px; padding-bottom: 3px; }
.ol-weeks .cp-cell .cp-cover { font-size: 11px; color: var(--slate-2); }
.ol-weeks .cp-cell .cp-make { font-size: 13px; }
.ol-weeks .cp-week-date small { display: block; margin: 2px 0 0; }
.ol-weeks .cp-load { height: 15px; }
.ol-weeks .num { text-align: right; font-family: var(--font-mono); padding-right: 14px; }
.ol-ahead { display: block; text-align: right; font: 600 10px var(--font-mono) !important; color: var(--steel) !important; margin-top: 2px; }
.go .ol-weeks .cp-cell { animation: pop .45s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--k) * 8ms); }
.panel-head .head-ctl .badge { margin: 0; }

/* Shift patterns on the board: the time a line has no shift is hatched, and each line names its pattern */
.ol-crewed { display: block; font: 600 9.5px var(--font-mono); letter-spacing: .03em; color: var(--steel); }
.ol-sic { display: block; margin-top: 2px; font: 500 9px var(--font-mono); color: var(--slate-2); }
.ol-closed { position: absolute; top: 0; bottom: 0; z-index: 1; background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, transparent 6px 12px); border-left: 1px dashed var(--slate-3); pointer-events: none; }
.ol-closed span { position: absolute; left: 8px; top: calc(6px + var(--sb-card-height) / 2); transform: translateY(-50%); font: 600 10px var(--font-mono); color: var(--slate-2); background: var(--surface); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }

/* Planning only: one lane a line. Short interval control, when added, opens a second lane on every line */
.plan-only .sb-actual-label, .plan-only .sb-axis-label span, .plan-only .sb-site-label, .plan-only .sb-idle-actual, .plan-only .sb-legend { display: none; }
.plan-only .sb-row { min-height: 0; }
.plan-only .sb-resource { justify-content: center; padding-top: 6px; padding-bottom: 6px; gap: 3px; }
.sic-in .sb-row { overflow: hidden; min-height: 0; }
.sic-in .sb-actual, .sic-in .sb-no-capture, .sic-in .ol-clean-actual { animation: ol-fade .5s .45s both; }
.sic-in .sb-actual-label { animation: ol-fade .6s .5s both; }
@keyframes ol-fade { from { opacity: 0; } to { opacity: 1; } }
/* Allergen clean-downs are named on the board, in the warning colour */
.board-area .sb-setup.ol-clean { background: repeating-linear-gradient(135deg, var(--warn-soft) 0 6px, #fff 6px 12px); border: 1px solid var(--warn); color: var(--warn); }
.board-area .sb-setup.ol-clean, .board-area .sb-setup.ol-wash { display: flex; align-items: center; justify-content: center; }
/* The clean as it happened, in the actual lane */
.ol-clean-actual { position: absolute; top: calc(6px + var(--sb-lane-height)); height: var(--sb-card-height); z-index: 2; border: 1px solid var(--warn); border-radius: 4px; background: repeating-linear-gradient(135deg, var(--warn-soft) 0 6px, #fff 6px 12px); display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; }
.ol-clean-actual.wash { border-color: var(--steel); background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, #fff 6px 12px); }
.ol-clean-actual span { font: 700 9px var(--font-mono); color: var(--warn); white-space: nowrap; } .ol-clean-actual.wash span { color: var(--steel); }
.board-area .sb-setup.ol-wash span { writing-mode: horizontal-tb; font: 700 9px var(--font-mono); white-space: nowrap; }
.board-area .sb-setup.ol-clean span { writing-mode: horizontal-tb; font: 700 9px var(--font-mono); white-space: nowrap; color: var(--warn); }
/* What short interval control adds: an option, set out before it is switched on */
.feed li.adds { display: block; opacity: 1; cursor: default; border-left: 3px dashed var(--steel); padding-left: 12px; }
.feed li.adds b { display: block; margin-bottom: 3px; color: var(--ink); }
.outlay-section-nav .opt { margin-left: 6px; font: 500 9px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--slate-2); border: 1px dashed var(--slate-3); border-radius: 4px; padding: 1px 4px; }
/* The tour card's words fade in as it moves to each step */
.tour.go h3, .tour.go p { animation: ol-fade .45s both; }

/* People tabs: shifts, who can run each line, the skills matrix */
.ol-tabs { flex: none; display: flex; gap: 4px; border-bottom: 1px solid var(--hairline); margin: 0 0 12px; }
.ol-tabs button { height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 13px var(--font-display); color: var(--slate); cursor: pointer; }
.ol-tabs button.on { color: var(--ink); border-bottom-color: var(--steel); }
.ol-tabs button b { font: 600 11px var(--font-mono); background: var(--paper-2); color: var(--slate); border-radius: 9px; padding: 1px 7px; }
.ol-tabs button .dot, .sk-matrix .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); display: inline-block; margin-left: 4px; }
.ol-tabs button:disabled { opacity: .5; cursor: default; }
.ol-pane[hidden] { display: none !important; }
.ol-pane.go { animation: ol-fade .45s both; }
.sk-wrap { flex: 1; min-height: 0; overflow: auto; }
.sk-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sk-wrap thead th, .sk-wrap thead td { position: sticky; z-index: 2; background: var(--surface); }
.sk-wrap th { text-align: left; font-weight: 400; }
.sk-lines thead th { top: 0; font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); padding: 8px 12px; border-bottom: 1px solid var(--hairline); }
.sk-lines thead th:first-child { width: 190px; }
.sk-lines tbody th, .sk-lines td { padding: 8px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.sk-lines tbody th b { display: block; font: 600 13px var(--font-display); color: var(--ink); } .sk-lines tbody th small { font: 10px var(--font-mono); color: var(--slate-2); }
.sk-count { display: block; font: 600 10px var(--font-mono); color: var(--steel); margin-bottom: 5px; }
.sk-who { display: flex; flex-wrap: wrap; gap: 4px; }
.sk-who i { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--paper-2); color: var(--ink); white-space: nowrap; }
.sk-who i.l3 { background: var(--steel-soft); color: var(--steel); font-weight: 600; }
td.sk-short { background: var(--bad-soft); box-shadow: inset 3px 0 0 var(--bad); } td.sk-short .sk-count { color: var(--bad); }
td.sk-off { color: var(--slate-3); font: 10px var(--font-mono); background: repeating-linear-gradient(135deg, var(--paper) 0 6px, transparent 6px 12px); }

.sk-matrix thead tr:first-child th { top: 0; height: 30px; font: 600 11px var(--font-display); color: var(--ink); padding: 6px 8px; text-align: center; }
.sk-matrix thead tr:first-child th:first-child { text-align: left; }
.sk-matrix .sk-sum th, .sk-matrix .sk-sum td { height: 22px; font: 500 10px var(--font-mono); color: var(--slate); padding: 3px 8px; text-align: center; }
.sk-matrix .sk-sum th { text-align: left; color: var(--slate-2); letter-spacing: .03em; }
.sk-matrix thead tr:nth-child(2) > * { top: 30px; } .sk-matrix thead tr:nth-child(3) > * { top: 58px; } .sk-matrix thead tr:nth-child(4) > * { top: 86px; border-bottom: 1px solid var(--hairline-2); }
.sk-sum td span { display: inline-block; min-width: 12px; } .sk-sum td i { font-style: normal; color: var(--slate-3); margin: 0 3px; }
.sk-sum td span.gap { color: var(--bad); font-weight: 700; }
.sk-sum.train td { color: var(--bad); font-weight: 600; } .sk-sum.train td .ok { color: var(--good); }
.sk-matrix tbody th { font-size: 12px; color: var(--ink); padding: 4px 8px; border-bottom: 1px solid var(--hairline); }
.sk-matrix tbody th small { margin-left: 6px; font: 9px var(--font-mono); color: var(--slate-2); }
.sk-matrix tbody td { text-align: center; border-bottom: 1px solid var(--hairline); padding: 4px; }
.sk-matrix .sk-group th { font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); background: var(--paper); padding: 5px 8px; }
.lv { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--steel); vertical-align: middle; }
.lv.l3 { background: var(--steel); }
.people-main[hidden] { display: none !important; }
/* The matrix: its summary rows stay put above the people, who scroll */
.sk-wrap[data-matrix] { display: flex; flex-direction: column; overflow: hidden; }
.sk-head { flex: none; overflow: hidden; scrollbar-gutter: stable; border-bottom: 1px solid var(--hairline-2); }
.sk-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }

.sk-matrix thead tr > * { position: static !important; }

/* Replanning: drag a run; moved runs glide, late runs turn red, the repair that caused it is shown on its line */
[data-plan-board] .sb-plan[data-op] { cursor: grab; touch-action: none; }
[data-plan-board] .sb-plan.ol-dragging { cursor: grabbing; z-index: 8 !important; box-shadow: var(--sh3); transition: none !important; }
[data-plan-board] .sb-row.ol-drop .sb-track { background: var(--steel-soft); }
.board-area .sb-plan.ol-moved { border-color: var(--steel); box-shadow: 0 0 0 2px var(--steel-soft); }
.board-area .sb-plan.ol-late { border-color: var(--bad); background: var(--bad-soft); }
.ol-late-tag { position: absolute; right: 6px; top: -9px; font: 700 9px var(--font-mono); color: #fff; background: var(--bad); border-radius: 4px; padding: 1px 5px; }
.ol-repair { position: absolute; top: 6px; height: var(--sb-card-height); z-index: 2; border: 1px solid var(--bad); border-radius: 4px; background: repeating-linear-gradient(135deg, var(--bad-soft) 0 6px, #fff 6px 12px); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ol-repair span { font: 700 10px var(--font-mono); color: var(--bad); white-space: nowrap; }
.replan-note { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 20px; border-bottom: 1px solid var(--hairline); background: var(--steel-soft); font-size: 12px; color: var(--ink); }
.replan-note[hidden] { display: none; }
.replan-note b { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
.replan-note span.late { color: var(--bad); font-weight: 600; }
.replan-note .button { margin-left: auto; }
/* The Dependencies switch: box and word on one centre line */
.board-area ~ * .ol-deps, .ol-deps { display: inline-flex !important; flex-direction: row; align-items: center; gap: 8px; line-height: 1; box-sizing: border-box; }
.ol-deps input { margin: 0; width: 15px; height: 15px; flex: none; position: static; top: auto; align-self: center; }

/* Skills matrix tab: the radar beside the matrix */
.sk-wrap[data-matrix] { flex-direction: row !important; gap: 0; }
.sk-radar { flex: none; width: 470px; display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; border-right: 1px solid var(--hairline); }
.sk-radar-head { display: flex; flex-direction: column; gap: 8px; }
.sk-radar-head b { font: 600 13px var(--font-display); color: var(--ink); }
.sk-pick { display: flex; gap: 4px; }
.sk-pick button { height: 32px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: 8px; background: var(--surface); font: 600 11px var(--font-sans); color: var(--slate); cursor: pointer; }
.sk-pick button.on { border-color: var(--steel); background: var(--steel-soft); color: var(--ink); }
.sk-radar-svg { width: 100%; flex: 1; min-height: 0; overflow: visible; }
.sk-radar-svg .grid { fill: none; stroke: var(--hairline-2); stroke-width: 1; }
.sk-radar-svg .have { fill: var(--steel); fill-opacity: .22; stroke: var(--steel); stroke-width: 2; }
.sk-radar-svg .need { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 5 4; }
.sk-radar-svg .gapdot, .sk-key i.gapdot { fill: var(--bad); }
.sk-radar-svg text { font: 600 9.5px var(--font-sans); fill: var(--ink); }
.sk-radar-svg text tspan { font: 500 9px var(--font-mono); fill: var(--slate); }
.sk-radar-svg text.short, .sk-radar-svg text.short tspan { fill: var(--bad); }
.sk-radar-svg .grow { animation: radar-in .8s cubic-bezier(.2,.8,.2,1) both; }
.sk-radar-svg .grow.in { animation: radar-in .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes radar-in { from { transform: scale(.2); opacity: 0; } }
.sk-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--slate); }
.sk-key span { display: inline-flex; align-items: center; gap: 6px; }
.sk-key i { width: 14px; height: 10px; border-radius: 2px; }
.sk-key i.have { background: var(--steel); opacity: .5; } .sk-key i.need { border: 2px dashed var(--bad); height: 8px; }
.sk-key i.gapdot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.sk-tablecol { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .sk-radar-svg .grow { animation: none; } }
/* No scroll anchoring: as actual cards grow, the browser would keep re-picking one as its anchor and nudge the
   board up and down to hold it still */
html, body, .sb-scroll, .feed ol, .sk-wrap, .sk-body, .wb-ledger-body { overflow-anchor: none; }