/* worker page (#w/<key>/<tab>): header, Job view (chart + events + raw lines), History. Prefix .wk- */
.wk-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.wk-id { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.wk-id h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.wk-acts .btn svg { opacity: .7; }
.wk-acts .wk-stop { margin-left: 8px; }
.wk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wk-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--card); border: 1px solid var(--hair); color: var(--ink2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wk-chip.mono { font-family: var(--mono); font-size: 11.5px; }
.wk-chip.prod { background: #E7EEF9; border-color: #D3E1F4; color: var(--info); font-weight: 600; }
.wk-lock { margin-top: 8px; }
.wk-lock:empty { display: none; }
.wk-tabs { margin-top: 12px; }
.wk-tabs .nb { margin-left: 6px; }

/* job switcher: shared .chips (base.css); only spacing and the live dot here */
.wk-switch { margin-bottom: 12px; }
.wk-jchip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.wk-live { width: 7px; height: 7px; border-radius: 50%; background: var(--info); animation: pulse-b 1.6s infinite; }

/* job header + stepper */
.wk-jh { padding: 16px 22px 14px; margin-bottom: 12px; }
.wk-jh-top { display: flex; align-items: flex-start; gap: 12px; }
.wk-jh-name { flex: 1; min-width: 0; }
.wk-jh-name h2 { font-size: 18px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.wk-meta .mono { font-size: 12px; }
.wk-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wk-st { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding-right: 8px; min-width: 0; }
.wk-st::before { content: ""; position: absolute; top: 11px; left: 26px; right: 4px; height: 2px; background: var(--track); border-radius: 1px; }
.wk-st:last-child::before { display: none; }
.wk-st.done::before { background: var(--acc); }
.wk-node { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--plain-d); background: #fff; color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.wk-st b { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.wk-st small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-st.done .wk-node { background: var(--acc-d); border-color: var(--acc-d); }
.wk-st.done b { color: var(--ink); }
.wk-st.now .wk-node { border-color: var(--info); background: var(--info-t); box-shadow: 0 0 0 4px rgba(31, 95, 175, .12); }
.wk-st.now .wk-node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--info); animation: pulse-b 1.6s infinite; }
.wk-st.now b { color: var(--info); }
.wk-st.now small { color: var(--info); font-weight: 600; }
.wk-st.cut .wk-node { border-color: var(--loss); color: var(--loss); }
.wk-st.cut b { color: var(--loss); }
.wk-st.bad .wk-node { background: var(--loss); border-color: var(--loss); }
.wk-st.bad b { color: var(--loss); }
.wk-st.warn .wk-node { background: var(--ns-t); border-color: var(--ns-t); }
.wk-st.warn b { color: var(--ns-t); }

/* KPI tiles */
.wk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.wk-kpi .val { font-size: 26px; }
.wk-kpi .sub { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-kpi.wk-met .val { color: var(--acc-d); }
.wk-meter { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; flex: none; }
.wk-meter i { display: block; height: 100%; background: var(--info); border-radius: 3px; }

/* main row: chart + events */
.wk-main { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(300px, 1fr); gap: 12px; margin-bottom: 12px; align-items: stretch; }
.wk-main.raw { grid-template-columns: minmax(0, 1fr); }
.wk-main .card.xf { padding: 18px 20px; }
.wk-main .xf-head { margin-bottom: 10px; }
.wk-chart { position: relative; }
.wk-svg { width: 100%; min-height: 250px; }
.wk-svg svg { display: block; overflow: visible; }
.wk-svg .wk-ax { font-size: 11px; fill: var(--muted); }
.wk-svg .wk-grid { stroke: var(--hair2); }
.wk-svg .wk-lane { stroke: var(--hair); }
.wk-svg rect.pb { fill: var(--acc-l); } .wk-svg rect.ps { fill: var(--info); } .wk-svg rect.pw { fill: var(--plain); }
.wk-svg .wk-stl { font-size: 10.5px; font-weight: 600; fill: var(--gd); pointer-events: none; }
.wk-svg .wk-stl.ps { fill: #fff; }
.wk-svg .wk-band { fill: rgba(31, 95, 175, .06); stroke: rgba(31, 95, 175, .18); stroke-width: 1; }
.wk-svg .wk-bl { font-size: 11px; fill: var(--info); font-weight: 500; pointer-events: none; }
.wk-svg .wk-tgt { stroke: var(--plain-d); stroke-dasharray: 5 4; stroke-width: 1.4; }
.wk-svg .wk-line { fill: none; stroke: var(--acc); stroke-width: 2.6; stroke-linejoin: round; }
.wk-svg .wk-end { fill: var(--acc-d); }
.wk-svg .wk-endl { font-size: 12px; font-weight: 700; fill: var(--acc-d); }
.wk-svg .wk-now { stroke: var(--info); stroke-width: 1; stroke-dasharray: 2 3; }
.wk-svg .wk-guide { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.wk-svg .wk-mk { transition: opacity .12s; }
.wk-svg .wk-halo { fill: var(--acc-t); stroke: var(--acc); stroke-width: 1.5; opacity: 0; }
.wk-svg .wk-mk.on .wk-halo { opacity: 1; }
.wk-svg .wk-cnt { font-size: 10.5px; font-weight: 700; fill: var(--ink2); }
.wk-chart:hover .wk-mk:not(.on) { opacity: .6; }
.wk-svg .wk-hdot { fill: #fff; stroke: var(--acc-d); stroke-width: 2.5; pointer-events: none; }
.wk-tip { position: absolute; z-index: 3; pointer-events: none; background: var(--gd); color: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.4; box-shadow: var(--sh-pop); max-width: 280px; }
.wk-tip-e { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 8px; align-items: start; padding: 2px 0; }
.wk-tip-e .kico { margin-top: 1px; }
.wk-tip-e b { display: block; font-weight: 600; }
.wk-tip-e > span > span { color: #B5DFCB; }
.wk-tip-e.me b { color: var(--gl); }
.wk-tip-more { color: #B5DFCB; padding-top: 2px; }

/* events feed (shared .feed .ev markup from base.css; here only size, scroll and the hover link) */
.wk-feedcard { display: flex; flex-direction: column; min-width: 0; }
.wk-feed { height: 300px; overflow: auto; overscroll-behavior: contain; padding: 0 6px; border-radius: 8px; }
.wk-feed:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.wk-feed .ev, .wk-feed .ev.ev-ctrl { margin: 0 -6px; padding: 5px 6px; border-radius: 7px; cursor: default; }
.wk-feed .ev .kico { margin-top: 1px; }
.wk-feed.line .ev:not(:last-child)::after, .wk-feed.line .ev.ev-ctrl:not(:last-child)::after { left: 85.5px; top: 23px; bottom: -6px; }
.wk-feed .ev.ev-ctrl { background: var(--acc-t); }
.wk-feed .ev:hover, .wk-feed .ev.on { background: var(--added); }
.wk-feed .ev.on { box-shadow: inset 3px 0 0 var(--acc); }
.wk-feed .ev.ev-good .ev-title { color: var(--acc-d); }
.wk-ev0 { color: var(--muted); padding: 24px 8px; text-align: center; }
.wk-logs { height: 440px; }

/* lower row */
.wk-lower { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wk-lower .card.xf { padding: 18px 20px; }
.wk-pbar { margin-top: 0; }
.wk-plegend { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--muted); margin: 2px 0 14px; }
.wk-plegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.wk-plegend b { color: var(--ink); font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.wk-sublab { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.wk-none { font-size: 12.5px; padding: 6px 0; }
.wk-kv { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.wk-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wk-kv dd .muted { font-weight: 500; font-size: 12.5px; }
.wk-kv .pos dd { color: var(--acc-d); }
.wk-flag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 5px; background: var(--ns-f); border: 1px solid var(--ns-b); color: var(--ns-t); font-size: 11.5px; font-weight: 600; }

/* empty job */
.wk-empty { padding: 28px 24px; }
.wk-empty .btn { margin-top: 12px; }

/* History */
.wk-hist { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.wk-day { position: relative; height: 22px; margin: 2px 0 26px; background: var(--track); border-radius: 5px; }
.wk-dm { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; background: var(--acc); }
.wk-dm.r-infeasible { background: #D99A00; } .wk-dm.r-failed, .wk-dm.r-stopped { background: var(--loss); } .wk-dm.r-running { background: var(--info); }
.wk-dt { position: absolute; top: 26px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.wk-dt.now { transform: translateX(-100%); font-weight: 600; color: var(--ink2); }
.wk-hist .scroll { position: relative; }
.wk-ht td { padding-top: 8px; padding-bottom: 8px; }
.wk-hn { max-width: 360px; }
.wk-took { white-space: nowrap; }
.wk-took b { font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 8px; }
.wk-tb { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--track); vertical-align: middle; overflow: hidden; }
.wk-tb i { display: block; height: 100%; background: var(--plain-d); }
.wk-hj { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wk-open { display: inline-flex; align-items: center; gap: 3px; color: var(--acc-d); font-weight: 600; font-size: 12px; flex: none; padding: 1px 8px; border-radius: 999px; background: var(--acc-t); }
table.t tr.click:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }

@media (max-width: 1180px) {
  .wk-main { grid-template-columns: minmax(0, 1fr); }
  .wk-feed { height: 320px; }
  .wk-hist { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .wk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-lower { grid-template-columns: minmax(0, 1fr); }
  .wk-acts { width: 100%; }
}
@media (max-width: 600px) {
  .wk-jh { padding: 14px 14px 12px; }
  .wk-main .card.xf, .wk-lower .card.xf { padding: 16px 14px; }
  .wk-st b { font-size: 11.5px; } .wk-st small { font-size: 11px; }
  .wk-node { width: 20px; height: 20px; font-size: 11px; }
  .wk-st::before { top: 9px; left: 22px; }
  .wk-kpi .val { font-size: 22px; }
  .wk-acts { flex-wrap: nowrap; gap: 6px; }
  .wk-acts .btn { flex: 1 1 auto; min-height: 30px; padding: 4px 8px; font-size: 12.5px; }
  .wk-acts .wk-stop { margin-left: 0; }
  .wk-hn { max-width: 150px; }
  .wk-ht th, .wk-ht td { padding-left: 6px; padding-right: 6px; }
  .wk-tb { display: none; }
  .wk-hj { flex-direction: column; align-items: flex-start; gap: 2px; }
  .wk-took b { margin-left: 0; }
}
@media (max-width: 370px) { .wk-lg { display: none; } }