/* /team/control/: the control room. Colour comes from the site tokens (themes.css); nothing here names a colour
   except the state hues, which are mixed from tokens. Scoped under #control-root so site pages are untouched.
   Wall mode (?wall=1) is the body class ctl-wall: bigger type, site chrome hidden, dark theme set by control.js. */

main:has(> #control-root), body.ctl-on main { max-width: none; padding-left: clamp(12px, 1.2vw, 32px); padding-right: clamp(12px, 1.2vw, 32px); }
#control-root { --st-working: var(--accent); --st-blocked: var(--red); --st-waiting: var(--yellow); --st-review: var(--info-ink);
  --st-done: var(--dim2); --st-paused: var(--dim2); --ok: var(--accent); --bad: var(--red); --amber: var(--yellow);
  --gap: .9rem; font-size: 1rem; color: var(--fg); }
body.ctl-wall #control-root { font-size: clamp(18px, 1.1vw, 34px); }
body.ctl-wall nav.site, body.ctl-wall footer.site, body.ctl-wall .pbar, body.ctl-wall main > h1, body.ctl-wall main > .kicker,
body.ctl-wall main > .lead, body.ctl-wall .skip { display: none !important; }
body.ctl-wall main { padding-top: .6rem; padding-bottom: .6rem; }

#control-root *, #control-root *::before, #control-root *::after { box-sizing: border-box; }
#control-root button { font: inherit; color: inherit; cursor: pointer; }
#control-root :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
#control-root h2 { font-size: 1.05em; margin: 0 0 .6rem; padding: 0; border: 0; color: var(--head); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
#control-root h2 .sub { font-size: .78em; font-weight: 400; color: var(--dim); }
#control-root .num { font-variant-numeric: tabular-nums; }
#control-root .mono { font-family: var(--mono); }
.ctl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- top strip ---- */
.ctl-top { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: stretch; margin-bottom: var(--gap); }
.ctl-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .8rem; box-shadow: var(--shadow); min-width: 7.5em; flex: 0 1 auto; }
.ctl-tile .k { font-size: .7em; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); display: block; }
.ctl-tile .v { font-size: 1.6em; font-weight: 700; line-height: 1.15; color: var(--head); font-variant-numeric: tabular-nums; }
.ctl-tile .v small { font-size: .5em; font-weight: 400; color: var(--dim); margin-left: .3em; }
.ctl-tile.clock .v { font-family: var(--mono); font-size: 2em; letter-spacing: .02em; }
.ctl-tile.hot { border-color: var(--bad); }
.ctl-tile.hot .v { color: var(--bad); }
.ctl-tile.ed .v { color: var(--head); }
.ctl-tile.good { border-color: var(--ok); } .ctl-tile.good .v { color: var(--ok); }
.ctl-tile.warn { border-color: var(--amber); } .ctl-tile.warn .v { color: var(--amber); }
.ctl-tile.bad { border-color: var(--bad); } .ctl-tile.bad .v { color: var(--bad); }
.ctl-tools { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.ctl-btn { background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: .4rem .8rem; min-height: 2.4em; }
.ctl-btn:hover { border-color: var(--accent); }
.ctl-btn[aria-pressed="true"] { background: var(--tint-solid); border-color: var(--accent); color: var(--head); font-weight: 600; }
.ctl-msg { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: 8px; padding: .5rem .8rem; margin-bottom: var(--gap); }
.ctl-msg[hidden] { display: none; }

/* ---- panels ---- */
.ctl-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem 1rem; margin-bottom: var(--gap); box-shadow: var(--shadow); }
.ctl-group[hidden] { display: none; }
.ctl-panels.rotating .ctl-group { animation: ctlfade .5s ease; }
@keyframes ctlfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ctl-rot { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .8em; color: var(--dim); }
.ctl-rot .bar { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ctl-rot .bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.ctl-rot .bar i.run { width: 100%; transition: width 20s linear; }
.ctl-rot .pg { padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--line2); }
.ctl-rot .pg[aria-current="true"] { background: var(--tint-solid); color: var(--head); border-color: var(--accent); font-weight: 600; }

/* ---- pipeline lane ---- */
.ctl-lane { display: flex; align-items: stretch; gap: 0; overflow: visible; }
.ctl-stage { flex: 1 1 0; min-width: 0; position: relative; text-align: left; background: color-mix(in srgb, var(--sc, var(--dim2)) 10%, var(--panel)); border: 2px solid var(--sc, var(--line2));
  border-radius: 10px; padding: .55rem .7rem; display: flex; flex-direction: column; gap: .15rem; }
.ctl-stage .nm { font-weight: 700; text-transform: capitalize; color: var(--head); font-size: 1.05em; }
.ctl-stage .stt { font-weight: 600; color: var(--sc, var(--dim)); display: flex; gap: .3em; align-items: center; }
.ctl-stage .ln { font-size: .8em; color: var(--text); }
.ctl-stage .ln b { font-weight: 600; color: var(--head); }
.ctl-stage.miss { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 35%, transparent); border-style: dashed; border-color: var(--bad); }
.ctl-stage .alert { color: var(--bad); font-weight: 700; font-size: .8em; }
.ctl-stage:hover { box-shadow: var(--shadow-pop); }
.ctl-arrow { flex: 0 0 1.6em; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 1.3em; }
.ctl-arrow::before { content: "\2192"; }

/* ---- state colours (class on the element sets --sc) ---- */
.s-working { --sc: var(--st-working); } .s-blocked { --sc: var(--st-blocked); } .s-waiting { --sc: var(--st-waiting); }
.s-review { --sc: var(--st-review); } .s-done { --sc: var(--st-done); } .s-paused { --sc: var(--st-paused); } .s-none { --sc: var(--dim2); }
.ctl-badge { display: inline-flex; align-items: center; gap: .3em; font-size: .78em; font-weight: 700; padding: .05rem .5rem; border-radius: 999px;
  border: 1.5px solid var(--sc, var(--line2)); color: var(--sc, var(--text)); background: color-mix(in srgb, var(--sc, var(--dim)) 9%, var(--panel)); white-space: nowrap; }
.s-waiting .stt, .s-waiting.ctl-badge { color: var(--warn-ink); }
.s-waiting .stt { color: color-mix(in srgb, var(--yellow) 70%, var(--head)); }

/* ---- timeline ---- */
.ctl-tl { --lab: 11em; display: grid; grid-template-columns: var(--lab) 1fr; row-gap: 0; align-items: center; }
.ctl-tl .lab { font-size: .85em; padding-right: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; color: var(--head); }
.ctl-tl .lab small { color: var(--dim); text-transform: none; margin-left: .3em; }
.ctl-tl .axis, .ctl-tl .track { position: relative; height: 2.4em; }
.ctl-tl .lab { height: 2.4em; line-height: 2.4em; border-bottom: 1px solid var(--line); }
.ctl-tl .axis { height: 1.4em; font-size: .72em; color: var(--dim); }
.ctl-tl .axis span { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.ctl-tl .axis span:first-child { transform: none; } .ctl-tl .axis span:last-child { transform: translateX(-100%); }
.ctl-tl .track { background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ctl-tl .quiet { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--dim2) 20%, transparent) 0 6px, color-mix(in srgb, var(--dim2) 8%, transparent) 6px 12px); }
.ctl-tl .now { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px solid var(--bad); z-index: 3; pointer-events: none; }
.ctl-tl .nowlab { position: absolute; font-size: .72em; font-weight: 700; color: var(--bad); transform: translateX(-50%); white-space: nowrap; }
.ctl-tl .overlay { position: relative; grid-column: 2; height: 0; }
.ctl-dot { position: absolute; top: 50%; width: 1.35em; height: 1.35em; margin: -.675em 0 0 -.675em; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .8em; font-weight: 800; line-height: 1; color: var(--panel); background: var(--sc); border: 2px solid var(--sc); z-index: 2; }
.ctl-dot.ok { --sc: var(--ok); } .ctl-dot.late { --sc: var(--bad); } .ctl-dot.soon { --sc: var(--dim2); background: var(--panel); color: var(--dim); }
.ctl-dot.due { --sc: var(--amber); background: var(--panel); color: var(--amber); }
.ctl-dot.warnrun { --sc: var(--amber); }
.ctl-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .78em; color: var(--text); margin-top: .6rem; align-items: center; }
.ctl-legend .ctl-dot { position: static; display: inline-flex; margin: 0 .35em 0 0; vertical-align: middle; }
.ctl-legend .sw { display: inline-block; width: 1.5em; height: .9em; vertical-align: middle; margin-right: .35em; border: 1px solid var(--line2); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--dim2) 30%, transparent) 0 4px, transparent 4px 8px); }
.ctl-empty { color: var(--dim); font-style: italic; }

/* ---- agent cards ---- */
.ctl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: .7rem; }
.ctl-card { text-align: left; display: flex; flex-direction: column; gap: .25rem; background: color-mix(in srgb, var(--sc) 8%, var(--panel)); border: 1px solid var(--line2);
  border-left: 7px solid var(--sc); border-radius: 10px; padding: .6rem .75rem; min-height: 8.2em; width: 100%; }
.ctl-card:hover { box-shadow: var(--shadow-pop); border-color: var(--sc); }
.ctl-card .hd { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.ctl-card .nm { font-weight: 700; color: var(--head); overflow-wrap: anywhere; line-height: 1.25; }
.ctl-card .cost { font-family: var(--mono); font-size: .85em; color: var(--text); white-space: nowrap; }
.ctl-card .wt { font-size: .85em; color: var(--text); }
.ctl-card .wt.ed { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); border-radius: 6px; padding: .1rem .4rem; font-weight: 600; align-self: flex-start; max-width: 100%; overflow-wrap: anywhere; }
.ctl-card .wt, .ctl-card .nm { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ctl-card .ctl-badge { align-self: flex-start; }
.ctl-card, .ctl-stage, .ctl-qi { min-width: 0; }
.ctl-card .ag { font-size: .8em; color: var(--dim); margin-top: auto; }
.ctl-card .ag.old { color: var(--bad); font-weight: 600; }
.ctl-states { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }

/* ---- queue ---- */
.ctl-filters { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin-bottom: .6rem; font-size: .85em; }
.ctl-filters .gl { color: var(--dim); margin-right: .1rem; }
.ctl-chip { background: var(--panel); border: 1px solid var(--line2); border-radius: 999px; padding: .15rem .7rem; min-height: 2em; }
.ctl-chip[aria-pressed="true"] { background: var(--tint-solid); border-color: var(--accent); color: var(--head); font-weight: 700; }
.ctl-q { display: grid; grid-template-columns: repeat(auto-fill, minmax(21em, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: 0; }
.ctl-q li { margin: 0; }
.ctl-qi { display: flex; gap: .65rem; align-items: flex-start; width: 100%; text-align: left; background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px; padding: .6rem .75rem; }
.ctl-qi:hover { border-color: var(--accent); }
.ctl-qi .box { flex: 0 0 1.5em; height: 1.5em; border: 2px solid var(--dim); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--on-accent); margin-top: .1em; }
.ctl-qi[aria-pressed="true"] { opacity: .65; }
.ctl-qi[aria-pressed="true"] .box { background: var(--accent); border-color: var(--accent); }
.ctl-qi[aria-pressed="true"] .tt { text-decoration: line-through; }
.ctl-qi .tt { display: block; color: var(--head); overflow-wrap: anywhere; }
.ctl-qi .mt { display: block; font-size: .78em; color: var(--dim); margin-top: .2rem; }
.ctl-qi .mt b { color: var(--text); }
.ctl-qi.dec { border-left: 6px solid var(--yellow); }

/* ---- extra row: branches and freshness ---- */
.ctl-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(22em, 1fr)); gap: var(--gap); }
.ctl-list { list-style: none; margin: 0; padding: 0; font-size: .88em; }
.ctl-list li { margin: 0; padding: .3rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.ctl-list li:first-child { border-top: 0; }
.ctl-list .a { color: var(--head); font-weight: 600; } .ctl-list .d { color: var(--dim); display: block; font-size: .92em; }

/* ---- drawer ---- */
.ctl-veil { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; }
.ctl-veil[hidden], .ctl-drawer[hidden] { display: none; }
.ctl-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(34em, 100vw); background: var(--panel); color: var(--fg); z-index: 100; border-left: 4px solid var(--sc, var(--line2));
  box-shadow: -8px 0 30px rgba(0,0,0,.28); overflow-y: auto; padding: 1rem 1.1rem 2rem; font-size: 1rem; }
body.ctl-wall .ctl-drawer { font-size: clamp(18px, 1.1vw, 30px); }
.ctl-drawer h2 { margin: 0 2.5rem .3rem 0; font-size: 1.2em; }
.ctl-drawer h3 { margin: 1.1rem 0 .3rem; font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ctl-drawer p { margin: .2rem 0; overflow-wrap: anywhere; }
.ctl-drawer .x { position: absolute; top: .7rem; right: .8rem; background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; min-width: 2.4em; min-height: 2.4em; }
.ctl-run { border-top: 1px solid var(--line); padding: .45rem 0; font-size: .9em; }
.ctl-run .r1 { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.ctl-run .sm { color: var(--text); margin-top: .15rem; overflow-wrap: anywhere; }
.o-ok { --sc: var(--ok); } .o-idle { --sc: var(--dim2); } .o-partial { --sc: var(--amber); } .o-failed { --sc: var(--bad); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ctl-lane { flex-direction: column; }
  .ctl-arrow { flex-basis: 1.6em; height: 1.6em; } .ctl-arrow::before { content: "\2193"; }
  .ctl-tl { --lab: 6.5em; }
  .ctl-tl .lab small { display: none; }
  .ctl-tools { margin-left: 0; width: 100%; }
  .ctl-tile { min-width: 6.4em; flex: 1 1 6.4em; }
  .ctl-tile.clock { flex-basis: 100%; }
  .ctl-q, .ctl-two { grid-template-columns: 1fr; }
  .ctl-tl .axis span.alt { display: none; }
}
body.ctl-wall .ctl-lane { gap: 0; }
body.ctl-wall .ctl-card { min-height: 9em; }
@media (prefers-reduced-motion: reduce) {
  #control-root *, .ctl-drawer { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) { .ctl-dot, .ctl-stage, .ctl-card { border: 2px solid CanvasText; } }