/* office.css — the Transformation Office places (round 7, agent office-ui):
   views/office*.js, people.js, my-role.js. Additive only: every rule targets
   a class introduced here. Tokens only, no raw colour. */

/* ── Human / augmented / autonomous blend bar ───────────────────────────── */
.mai-blend { display: grid; gap: 4px; min-width: 140px; }
.mai-blend-track { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--mai-seg-off); }
.mai-blend-seg { height: 100%; min-width: 0; }
.mai-blend-seg.is-human { background: var(--mai-ink-3); }
.mai-blend-seg.is-augmented { background: var(--mai-info); }
.mai-blend-seg.is-autonomous { background: var(--mai-accent); }
.mai-blend-text { font-size: var(--fs-xs); color: var(--mai-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mai-blend-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--mai-ink-2); }
.mai-blend-legend .mai-blend-key { display: inline-flex; align-items: center; gap: 6px; }
.mai-blend-legend .mai-blend-swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.mai-blend-legend .mai-blend-swatch.is-human { background: var(--mai-ink-3); }
.mai-blend-legend .mai-blend-swatch.is-augmented { background: var(--mai-info); }
.mai-blend-legend .mai-blend-swatch.is-autonomous { background: var(--mai-accent); }
.mai-blend-pair { display: grid; gap: 6px; }
.mai-blend-pair .mai-eyebrow { font-size: 11px; }

/* ── Risk heatmap (likelihood × impact, 5 × 5) ──────────────────────────── */
.mai-risk-grid { display: grid; grid-template-columns: auto repeat(5, minmax(44px, 1fr)); gap: 3px; align-items: stretch; max-width: 460px; }
.mai-risk-grid .mai-risk-axis { font-size: 11px; color: var(--mai-ink-2); display: flex; align-items: center; justify-content: center; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.mai-risk-cell { border: 1px solid var(--mai-line); border-radius: 4px; min-height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--mai-mono); font-size: var(--fs-sm); background: var(--mai-surface); color: var(--mai-ink); cursor: pointer; }
.mai-risk-cell:disabled { cursor: default; color: var(--mai-ink-3); }
.mai-risk-cell.is-low { background: var(--mai-good-soft); }
.mai-risk-cell.is-medium { background: var(--mai-warn-soft); }
.mai-risk-cell.is-high { background: var(--mai-crit-soft); border-color: var(--mai-crit); color: var(--mai-crit-ink); }
/* r8 #55: the critical band is the loudest cell on the map. */
.mai-risk-cell.is-critical { background: var(--mai-crit); border-color: var(--mai-crit); color: var(--mai-accent-ink); font-weight: 600; }
.mai-risk-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-size: 11px; color: var(--mai-ink-2); max-width: 460px; }
.mai-risk-legend .mai-risk-cell { min-height: 0; width: 12px; height: 12px; display: inline-block; cursor: default; vertical-align: middle; margin-right: 4px; }
.mai-risk-cell[aria-pressed='true'] { outline: 2px solid var(--mai-focus); outline-offset: 1px; }
.mai-risk-caption { display: flex; justify-content: space-between; max-width: 460px; font-size: 11px; color: var(--mai-ink-2); }

/* ── Office overview: a grid of place cards (label + figures + link) ────── */
.mai-office-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.mai-office-card { background: var(--mai-surface); border: 1px solid var(--mai-line); border-radius: var(--mai-radius); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); color: inherit; text-decoration: none; transition: background var(--mai-t); }
.mai-office-card:hover, .mai-office-card:focus-visible { background: var(--mai-surface-2); }
.mai-office-card h3 { margin: 0; font-size: var(--fs-base); }
.mai-office-card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3); font-size: var(--fs-sm); }
.mai-office-card dt { color: var(--mai-ink-2); }
.mai-office-card dd { margin: 0; font-family: var(--mai-mono); text-align: right; }
.mai-office-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Role families → people → skills ────────────────────────────────────── */
.mai-skill-level { display: inline-flex; gap: 2px; vertical-align: middle; }
.mai-skill-level > span { width: 10px; height: 6px; border-radius: 2px; background: var(--mai-seg-off); }
.mai-skill-level > span.is-on { background: var(--mai-accent); }
.mai-skill-level > span.is-target { background: transparent; outline: 1px solid var(--mai-accent); outline-offset: -1px; }
.mai-path { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.mai-path > li { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-2); align-items: baseline; font-size: var(--fs-sm); }
.mai-path-mark { font-family: var(--mai-mono); color: var(--mai-ink-3); }
.mai-path > li.is-done .mai-path-mark { color: var(--mai-good-ink); }
.mai-path > li.is-current .mai-path-mark { color: var(--mai-accent-text); }
.mai-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
.mai-toolbar .mai-field { min-width: 160px; }

/* ── Discovery profile, read as a document (legacy "DPV" layout) ────────── */
.mai-profile { display: grid; gap: var(--space-4); }
.mai-profile-lead { margin: 0; font-size: var(--fs-base); }
.mai-profile-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mai-profile-chip { border: 1px solid var(--mai-line); border-radius: 999px; padding: 2px 10px; font-size: var(--fs-sm); background: var(--mai-surface-2); }
.mai-profile-chip b { font-weight: 600; margin-right: 4px; }
.mai-profile-section { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--mai-line); }
.mai-profile-section:first-child { border-top: none; padding-top: 0; }
.mai-profile-section > h3 { margin: 0; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mai-ink-2); }
.mai-profile-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.mai-profile-card { border: 1px solid var(--mai-line); border-radius: var(--mai-radius); padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.mai-profile-card > h4 { margin: 0; font-size: var(--fs-sm); }
.mai-profile-card ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: var(--fs-sm); }
.mai-profile-card dl { margin: 0; display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 2px var(--space-3); font-size: var(--fs-sm); }
.mai-profile-card dt { color: var(--mai-ink-2); }
.mai-profile-card dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .mai-risk-grid { grid-template-columns: auto repeat(5, minmax(32px, 1fr)); }
  .mai-profile-card dl { grid-template-columns: 1fr; }
}

/* ── r8: clamp long proposal text to two lines (full text in the panel) ── */
.mai-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mai-link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-sm); }
.mai-warn-text { color: var(--mai-warn-ink); }
.mai-task-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.mai-task-cols ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: var(--fs-sm); }

/* ── r8 #17: roadmap timeline (bars by programme, quarters, dependencies) ── */
.mai-tl { display: grid; gap: 0; overflow-x: auto; }
.mai-tl-row { display: grid; grid-template-columns: minmax(200px, 280px) minmax(480px, 1fr) 150px; gap: var(--space-3); align-items: center; padding: 6px 0; border-top: 1px solid var(--mai-line); cursor: pointer; }
.mai-tl-row:hover, .mai-tl-row:focus-visible { background: var(--mai-surface-2); outline: none; }
.mai-tl-head { cursor: default; border-top: none; padding: 0 0 6px; }
.mai-tl-head:hover { background: none; }
.mai-tl-label { display: grid; gap: 2px; font-size: var(--fs-sm); padding-left: var(--space-2); }
.mai-tl-track { position: relative; min-height: 40px; }
.mai-tl-head .mai-tl-track { min-height: 18px; }
.mai-tl-q { position: absolute; top: 0; font-size: 11px; color: var(--mai-ink-2); font-family: var(--mai-mono); padding-left: 4px; border-left: 1px solid var(--mai-line-2); white-space: nowrap; }
.mai-tl-grid { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--mai-line); }
.mai-tl-today { position: absolute; top: 0; height: 18px; border-left: 2px solid var(--mai-accent); }
.mai-tl-bar { position: absolute; top: 6px; height: 12px; border-radius: 6px; background: var(--mai-good); }
.mai-tl-bar.is-at_risk, .mai-tl-bar.is-no_date { background: var(--mai-warn); }
.mai-tl-bar.is-late { background: var(--mai-crit); }
.mai-tl-bar.is-done { background: var(--mai-info); }
.mai-tl-meta { display: grid; gap: 2px; justify-items: start; white-space: nowrap; }
.mai-tl-deps { position: absolute; top: 22px; font-size: 11px; color: var(--mai-ink-2); white-space: nowrap; }
.mai-tl-deps.is-blocked { color: var(--mai-warn-ink); }
.mai-tl-group { padding: var(--space-3) 0 var(--space-1) var(--space-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mai-ink-2); border-top: 1px solid var(--mai-line); }
/* Phone: a 480px track cannot fit — the row keeps what to do, who, status, date and £; the bars need a wider screen. */
@media (max-width: 640px) {
  .mai-tl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mai-tl-track { display: none; }
  .mai-tl-head { display: none; }
  .mai-tl-meta { justify-items: end; }
}

/* ── r8 #5/#50: "Needs me" list on the office landing ─────────────────── */
.mai-needs { list-style: none; margin: 0; padding: 0; display: grid; }
.mai-needs > li { display: grid; grid-template-columns: minmax(160px, 220px) 1fr auto; gap: var(--space-3); align-items: baseline; padding: 8px var(--space-4); border-top: 1px solid var(--mai-line); font-size: var(--fs-sm); }
.mai-needs > li:first-child { border-top: none; }
.mai-needs-kind { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mai-ink-2); }
.mai-link-plain { color: inherit; text-decoration: none; }
.mai-link-plain:hover, .mai-link-plain:focus-visible { text-decoration: underline; }
@media (max-width: 640px) { .mai-needs > li { grid-template-columns: 1fr; gap: 2px; } }

/* r8 #48-style: dates and figures in office tables never wrap mid-value. */
:is(#okr-table, #goal-table, #risk-register, #decision-log, #decisions-pending, #programme-table, #scenario-table, #scenario-compare, #roadmap-table, #roadmap-undated, #process-table, #system-table, #om-grid) td.mai-num { white-space: nowrap; }

/* ── hotfix (My role): each course its own line — link · status · action ── */
.mai-courses { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mai-course { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); font-size: var(--fs-sm); }
.mai-course.is-done .mai-num { color: var(--mai-good-ink); }
.mai-course .btn, .mai-course-status .btn { padding-top: 0; padding-bottom: 0; }
.mai-course-status { display: inline-flex; flex-wrap: wrap; gap: 2px var(--space-2); align-items: baseline; justify-content: flex-end; }

/* ── hotfix (people drawers): a people figure / role-family cell is a button ── */
.bd-fig[role='button'] { cursor: pointer; }
.bd-fig[role='button']:focus-visible, .bd-num-btn:focus-visible { outline: 2px solid var(--mai-focus); outline-offset: 2px; }
.bd-num-btn { background: none; border: 0; padding: 0 2px; font: inherit; color: var(--mai-accent-text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; font-variant-numeric: tabular-nums; }
.bd-num-btn:hover { color: var(--mai-accent-hover); }
.mai-people-def { margin: 0; padding: var(--space-2) var(--space-3); background: var(--mai-surface-2); border-left: 3px solid var(--mai-accent); font-size: var(--fs-sm); }

/* Goal & operating model (department-plan.js) */
.dp-status{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.dp-kv{font-size:var(--fs-sm)}
.dp-goal{font-size:var(--fs-lg);font-weight:600;margin:0 0 var(--space-3)}
.dp-goal-empty{font-weight:400;color:var(--mai-muted)}
.dp-amt{font-family:var(--mai-mono);font-weight:600}
.dp-moves{display:grid;gap:var(--space-3)}
.dp-moves-h{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-3);flex-wrap:wrap}
.dp-move-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.dp-move{display:grid;align-content:start}
.dp-move:first-child{border-top:3px solid var(--mai-accent)}
.dp-move-h{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--mai-line)}
.dp-move-h h3{flex:1;min-width:0;font-size:var(--fs-sm);margin:0}
.dp-rank{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--mai-accent);color:var(--mai-surface);font-size:var(--fs-xs)}
.dp-dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);padding:var(--space-3) var(--space-4);margin:0;font-size:var(--fs-sm)}
.dp-dl dt{color:var(--mai-muted)}
.dp-dl dd{margin:0}
.dp-losses{display:grid;gap:var(--space-3)}
.dp-loss{display:grid;grid-template-columns:minmax(0,2fr) minmax(80px,1.2fr) auto minmax(0,1.2fr);gap:var(--space-3);align-items:center}
.dp-loss-l{display:grid;gap:2px;min-width:0}
.dp-loss-name{font-weight:600;font-size:var(--fs-sm)}
.dp-bar{height:10px;background:var(--mai-track,var(--mai-line));border-radius:2px;overflow:hidden}
.dp-bar-none{background:transparent}
.dp-bar-fill{display:block;height:100%;background:var(--mai-crit-ink,var(--mai-accent))}
.dp-loss-v{text-align:right;white-space:nowrap;font-size:var(--fs-sm)}
.dp-missing{margin-top:var(--space-3)}
.dp-missing ul{margin:var(--space-1) 0 0;padding-left:var(--space-4)}
.dp-rec{margin:0 0 var(--space-3);font-size:var(--fs-sm)}
.dp-trail{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1);font-size:var(--fs-sm)}
.dp-filters{flex-wrap:wrap;margin-bottom:var(--space-3)}
@media (max-width: 900px){
  .dp-move-cards{grid-template-columns:1fr}
  .dp-loss{grid-template-columns:1fr auto}
  .dp-bar,.dp-loss-a{grid-column:1 / -1}
}