/* Vision – wave 2 "Work" pages: service pages, Team & workload, TaxFix Jobs. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wk-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wk-cols { grid-template-columns: 1fr 1fr; margin: 18px 0; }
[data-page="svc"] > .panel, [data-page="team"] > .panel, [data-page="team"] > .kpis { margin-bottom: 18px; }
.wk-note { margin: -6px 0 12px; }
.bad { color: var(--red); }
.warn { color: var(--amber); }
.err-text { color: var(--red); margin: 4px 0 0; }

/* Where the work is: one stacked bar with a legend */
.wk-stack { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--line-2); }
.wk-stack i { display: block; height: 100%; }
.wk-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 0; margin: 12px 0 8px; font-size: 12px; }
.wk-legend li { display: inline-flex; align-items: center; gap: 6px; }
.wk-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid var(--line); }
.wk-legend b { margin-left: 2px; }

/* Clients list */
.wk-clients { max-height: 240px; overflow-y: auto; margin: 0 -8px; }
.wk-client { display: flex; justify-content: space-between; gap: 12px; padding: 8px; border-bottom: 1px solid var(--line-2); }
.wk-client.late { box-shadow: inset 3px 0 0 var(--red); }
.wk-client-name { font-weight: 600; }
.wk-client-due { text-align: right; color: var(--muted); white-space: nowrap; }
.wk-client-due b { color: var(--ink); font-weight: 600; }

/* Jobs register */
.wk-tbl td { vertical-align: top; }
.wk-tbl th.wk-stripe-h, .wk-tbl td.wk-stripe { width: 4px; padding: 0 !important; }
.wk-stripe.late { background: var(--red); }
.wk-stripe.soon { background: var(--amber); }
.wk-group td { background: var(--grey-soft); font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; padding-top: 8px; padding-bottom: 8px; }
.wk-group.late td { color: var(--red); }
.wk-count { display: inline-block; margin-left: 6px; font: 700 11px var(--font); padding: 1px 7px; border-radius: 99px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); }

/* Progress: track + fill with "n/m", and the status pill under it (as the old hub's .prog) */
.prog { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.prog .track { flex: 1; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.prog .fill { height: 100%; background: var(--green); }
.prog .t { font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.prog + .badge { margin-top: 6px; }
.steps-late { font-size: 12px; font-weight: 600; color: var(--red); margin-top: 2px; }
.next-step { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.next-step b { font-weight: 600; color: var(--muted); }

/* Expandable job rows (service pages, Team, Deadlines) */
tr.job-row { cursor: pointer; }
tr.job-row[aria-expanded="true"] td:not(.wk-stripe) { background: var(--line-2); }
.sodium-btn { white-space: nowrap; }
tr.job-steps > td { background: var(--line-2); padding: 4px 16px 14px 28px; }
.job-steps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.job-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(90px, auto) minmax(90px, auto); gap: 10px; align-items: baseline; font-size: 12.5px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.job-steps li.done { color: var(--muted); }
.job-steps li.done .nm { text-decoration: line-through; }
.job-steps .tick { font-weight: 700; color: var(--muted); }
.job-steps li.done .tick { color: var(--green); }
.job-steps h4 { margin: 10px 0 4px; font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.job-steps .late { color: var(--red); }

/* Team: people cards (as the old hub's drawPeople) */
.tm-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tm-card { border: 1px solid var(--line); border-top: 4px solid var(--tm-c, var(--pma-blue)); border-radius: 8px; background: var(--panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tm-name { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.tm-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tm-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-nums div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-nums b { font: 700 26px/1 var(--display); font-variant-numeric: tabular-nums; }
.tm-nums span { font-size: 11.5px; color: var(--muted); }
.tm-nums .crit b { color: var(--red); }
.tm-nums .ok b { color: var(--green); }
.tm-share { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; color: var(--muted); }
.tm-share .track { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.tm-share .fill { height: 100%; background: var(--tm-c, var(--pma-blue)); }
.tm-facts { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.tm-facts li { display: flex; justify-content: space-between; gap: 8px; }
.tm-facts li span:first-child { color: var(--muted); }
.linkish { align-self: flex-start; background: none; border: 0; padding: 0; font: 600 13px var(--font); color: var(--pma-blue); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.tm-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Team: next 8 weeks (SVG, as the old hub's drawLoad) */
#tm-weeks { overflow-x: auto; }
#tm-weeks svg { width: 100%; min-width: 600px; height: auto; display: block; }
#tm-weeks svg text { font: 11px var(--font); fill: var(--muted); }
#tm-weeks svg text.vlab { font-weight: 700; fill: var(--ink); }
#tm-weeks svg line.grid { stroke: var(--line); stroke-width: 1; }
.tm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12px; }

/* Team: WIP by age (as drawAge) and where work is stuck (as drawSteps) */
.tm-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tm-bars li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 5.5rem; gap: 10px; align-items: center; font-size: 13px; }
.tm-bars .track { height: 10px; border-radius: 5px; background: var(--line-2); overflow: hidden; }
.tm-bars .fill { height: 100%; background: var(--pma-blue); }
.tm-bars li.old .fill { background: var(--red); }
.tm-bars li.mid .fill { background: var(--amber); }
.tm-bars .n { text-align: right; font-variant-numeric: tabular-nums; }
.tm-bars .n i { font-style: normal; color: var(--red); font-size: 11.5px; display: block; }
.tm-sum { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.tm-steps { list-style: none; margin: 0 -8px; padding: 0; max-height: 520px; overflow-y: auto; }
.tm-step > button { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px; border: 0; border-top: 1px solid var(--line-2); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tm-step > button:hover, .tm-step.open > button { background: var(--line-2); }
.tm-step .sub2 { display: block; font-size: 12px; color: var(--muted); }
.tm-step .r { text-align: right; white-space: nowrap; }
.tm-step.old .r b { color: var(--red); }
.tm-step .chev { display: inline-block; width: 12px; color: var(--muted); transition: transform .15s; }
.tm-step.open .chev { transform: rotate(90deg); }
.tm-step-jobs { padding: 4px 8px 10px 28px; background: var(--line-2); }
.tm-step-jobs table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tm-step-jobs td, .tm-step-jobs th { padding: 5px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tm-step-jobs th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* Horizontal bars (WIP by age, time logged) */
.wk-hbar { display: grid; grid-template-columns: 110px 1fr 70px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.wk-hbar .bar { height: 10px; }
.wk-hbar b { text-align: right; }
.wk-hbar small { color: var(--muted); font-weight: 400; }
.wk-time { grid-template-columns: 140px 1fr 100px; }
.wk-tbar { position: relative; overflow: visible; }
.wk-tbar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.wk-stuck .tbl th:first-child, .wk-stuck .tbl td:first-child { padding-left: 0; }
.wk-confirm { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 340px; }

/* TaxFix board */
.tf-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 12px; }
#tf-unknown { margin-bottom: 12px; }
.tf-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 18px; }
.tf-col { background: var(--grey-soft); border-radius: 10px; padding: 10px; min-height: 120px; border: 2px dashed transparent; }
.tf-col.over { border-color: var(--pma-blue); }
.tf-col h3 { font-size: 14px; margin: 2px 2px 10px; }
.tf-empty { margin: 4px; }
.tf-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; display: grid; gap: 3px; }
.tf-card[draggable=true] { cursor: grab; }
.tf-card.late { border-left-color: var(--red); background: var(--red-soft); }
.tf-card.soon { border-left-color: var(--amber); background: var(--amber-soft); }
.tf-card.unknown { outline: 2px dashed var(--amber); }
.tf-card.late .tf-due { color: var(--red); }
.tf-card.soon .tf-due { color: var(--amber); }
.tf-name { font-weight: 700; }
.tf-actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.tf-actions select { min-height: 30px; padding: 4px 8px; font-size: 12px; max-width: 150px; }
.tf-notes ul { margin: 6px 0; padding-left: 16px; font-size: 12px; max-height: 180px; overflow-y: auto; }
.tf-notes form { display: grid; gap: 6px; }
.tf-notes textarea { width: 100%; resize: vertical; }

@media (max-width: 1180px) { .wk-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .wk-hbar, .wk-time { grid-template-columns: 90px 1fr 70px; } .tm-bars li { grid-template-columns: 5rem minmax(0, 1fr) 4.5rem; } .job-steps li { grid-template-columns: 22px minmax(0, 1fr); } }