/* ============================================================
   WORK — the runtime page. Rows and buttons come from org.css;
   only the type tabs, the status controls and the generated form's
   own quirks live here.
   ============================================================ */

.wk-tabs {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 16px;
}
.wk-tab {
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; color: inherit;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
}
.wk-tab:hover { background: rgba(255,255,255,.09); }
.wk-tab.on { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.wk-tabs .wk-new { margin-left: auto; }

/* the status a row is at, readable without opening it */
.wk-pill {
  flex: none; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16); opacity: .8;
}

/* ---- the generated form ---- */
.wk-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wk-check input { width: auto; margin: 0; }
.wk-multi { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }

.wk-statuses { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-status {
  font: inherit; font-size: 13px; cursor: pointer;
  padding: 9px 14px; border-radius: 10px; color: inherit;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13);
}
.wk-status:hover { background: rgba(255,255,255,.1); }
/* the status it is AT reads as a statement, not an offer */
.wk-status.on { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); cursor: default; }

.wk-errs {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: rgba(226,90,70,.12); border: 1px solid rgba(226,90,70,.3);
}
.wk-errs p { margin: 0 0 4px; font-size: 13.5px; }
.wk-errs p:last-child { margin-bottom: 0; }

/* ---- the baton ---- */
.wk-baton {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 15px; border-radius: 10px; margin: 0 0 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 3px solid rgba(255,255,255,.22);
}
.wk-baton b { font-size: 14.5px; }
.wk-baton small { font-size: 12.5px; opacity: .58; }
/* only one state shouts, and it is the one that needs somebody to act */
.wk-baton.mine { border-left-color: #3fb98f; background: rgba(63,185,143,.08); }
.wk-baton.stuck { border-left-color: #d08a4e; background: rgba(208,138,78,.08); }
.wk-baton.done { border-left-color: rgba(255,255,255,.3); opacity: .75; }

.wk-trail { display: flex; flex-direction: column; margin: 0 0 14px; }
.wk-leg { display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; position: relative; }
/* the line joining the stops says these happened in order */
.wk-leg:not(:last-child)::before {
  content: ""; position: absolute; left: 4.5px; top: 20px; bottom: -7px;
  width: 1px; background: rgba(255,255,255,.13);
}
.wk-leg-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px;
  border: 1.5px solid rgba(255,255,255,.3); background: transparent;
}
.wk-leg.done .wk-leg-dot { background: rgba(255,255,255,.4); border-color: transparent; }
.wk-leg-main { display: flex; flex-direction: column; min-width: 0; }
.wk-leg-main b { font-size: 13.5px; font-weight: 600; }
.wk-leg-main small { font-size: 11.5px; opacity: .5; }

/* ---- late ---- */
/* the only thing on a row allowed to shout, because it is the only thing
   asking somebody to do something about it */
.wk-late {
  flex: none; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; padding: 3px 8px; border-radius: 999px;
  color: #e8a06a;
  background: rgba(208,138,78,.14);
  border: 1px solid rgba(208,138,78,.32);
}
.wk-due {
  font-size: 12.5px; opacity: .6; margin: -6px 0 14px;
}
.wk-due.late { color: #d9a273; opacity: 1; font-weight: 600; }

/* The repair tab: work whose type is gone, reachable from no other tab. */
.wk-tab-broken{ color:#ff8a80; }
.wk-tab-broken.on{ color:#fff; }
.wk-tab-n{
  display:inline-block; min-width:1.15rem; margin-left:.35rem; padding:0 .3rem;
  border-radius:999px; background:rgba(255,138,128,.2); color:#ff8a80;
  font-size:.72rem; font-weight:700; text-align:center;
}
.wk-row-broken{ border-color:rgba(255,138,128,.25); cursor:default; }
.wk-cant{ border-left:2px solid rgba(255,138,128,.4); padding-left:.7rem; }
.wk-cant b{ color:#ff8a80; }