/* White Sand OS — My Work v2: Employee Operating Inbox (EOX-10, #2146)
   ---------------------------------------------------------------------------
   The persona-bound queue view that sits under the six federation lanes
   (the v1 .mw-* rules stay in components.css untouched). Scoped entirely
   under .mw-queues so nothing here can match another screen.

   Rules of this sheet:
   • colour comes from the ramp / --ds-* aliases (tokens-convergence.css), so
     every shell theme (light / black / sand / midnight / ocean / hc) is
     inherited; status is never colour-only — every chip carries an icon AND
     a word, tone only decorates;
   • density: row padding and control heights derive from --ds-density-scale
     (set data-density="compact|comfortable" on any ancestor);
   • logical properties only (AR/EN direction comes from <html dir>);
   • focus is always visible (--ds-focus-ring on the roving list items and
     on every affordance);
   • responsive by container: the category grid collapses under 720px.

   Link position: after navigation-simplifier.css and BEFORE primitives.css
   (primitives must stay the last stylesheet — designSystem.test.mjs B9). */

.mw-queues{display:flex;flex-direction:column;gap:var(--ds-space-3, var(--sp-3));margin-block-start:var(--ds-space-4, var(--sp-4));padding-block-start:var(--ds-space-4, var(--sp-4));border-block-start:1px solid var(--ds-color-border-subtle, var(--line))}
.mw-queues-head{display:flex;flex-wrap:wrap;gap:var(--ds-space-2, var(--sp-2));align-items:flex-start;justify-content:space-between}
.mw-queues-title{margin:0;font-size:var(--ds-text-lg, var(--fs-lg))}

/* persona strip — the server's resolution, verbatim */
.mw-persona{display:flex;flex-wrap:wrap;gap:var(--ds-space-1, var(--sp-1));align-items:center}
.mw-persona-reason{flex-basis:100%;margin:var(--ds-space-1, var(--sp-1)) 0 0;color:var(--ds-color-text-secondary, var(--text-2));font-size:var(--ds-text-sm, var(--fs-sm))}
.mw-queues[data-persona-state="not_resolved"] .mw-persona,
.mw-queues[data-persona-state="observe"] .mw-persona{padding:var(--ds-space-2, var(--sp-2));border:1px dashed var(--ds-color-status-warning-border, var(--warn));border-radius:var(--ds-radius-md, 10px)}

/* icon + word chips (status is never colour-only) */
.mw-chip{display:inline-flex;align-items:center;gap:4px}
.mw-ico{flex:0 0 auto;inline-size:14px;block-size:14px}

/* categories → queues */
.mw-qcats{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--ds-space-3, var(--sp-3))}
.mw-qcat{display:flex;flex-direction:column;gap:var(--ds-space-2, var(--sp-2));min-inline-size:0;border:1px solid var(--ds-color-border-default, var(--line));border-radius:var(--ds-radius-lg, 12px);background:var(--ds-color-surface-raised, var(--surface));padding:var(--ds-space-3, var(--sp-3))}
.mw-qcat-title{margin:0;font-size:var(--ds-text-sm, var(--fs-sm));display:flex;align-items:center;gap:var(--ds-space-1, var(--sp-1))}
.mw-qcat[data-count="0"] .mw-qcat-title{color:var(--ds-color-text-secondary, var(--text-2))}
.mw-queue{display:flex;flex-direction:column;gap:var(--ds-space-1, var(--sp-1));min-inline-size:0;padding-block:var(--ds-space-1, var(--sp-1))}
.mw-queue + .mw-queue{border-block-start:1px solid var(--ds-color-border-subtle, var(--line))}
.mw-queue-title{margin:0;font-size:var(--ds-text-sm, var(--fs-sm));display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1, var(--sp-1))}
.mw-queue[data-queue-state="unavailable"] .mw-queue-title,
.mw-queue[data-queue-state="error"] .mw-queue-title,
.mw-queue[data-queue-state="unauthorized"] .mw-queue-title{color:var(--ds-color-status-danger-fg, var(--danger))}
.mw-queue[data-queue-state="stale"] .mw-queue-title,
.mw-queue[data-queue-state="degraded"] .mw-queue-title{color:var(--ds-color-status-warning-fg, var(--warn))}
.mw-qerrors{display:flex;flex-wrap:wrap;gap:var(--ds-space-1, var(--sp-1))}

/* entries — a roving-tabindex list; the whole item is the focus target, Enter opens */
.mw-qlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-space-1, var(--sp-1))}
.mw-qentry{display:flex;flex-direction:column;gap:var(--ds-space-1, var(--sp-1));padding-block:var(--ds-row-padding-block, var(--sp-2));padding-inline:var(--ds-row-padding-inline, var(--sp-2));border:1px solid var(--ds-color-border-default, var(--line));border-radius:var(--ds-radius-md, 10px);background:var(--ds-color-surface-raised, var(--surface));min-inline-size:0}
.mw-qentry:hover{background:var(--ds-color-surface-hover, var(--surface-2))}
.mw-qentry:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:var(--ds-focus-ring-offset, 2px)}
.mw-qentry[data-mandatory="1"]{box-shadow:inset 3px 0 0 var(--ds-color-status-danger-fg, var(--danger))}
.mw-qentry[data-owner-is-caller="1"]{border-inline-start:3px solid var(--ds-color-accent, var(--brand))}
.mw-qentry-head{display:flex;flex-wrap:wrap;gap:var(--ds-space-1, var(--sp-1));align-items:center}
.mw-qentry-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-inline-size:24px;min-block-size:24px}
@media (pointer:coarse),(max-width:834px){.mw-qentry-link{min-inline-size:44px;min-block-size:44px}}
.mw-qentry-link:hover{text-decoration:underline}
.mw-qentry-link:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:var(--ds-focus-ring-offset, 2px);border-radius:var(--ds-radius-xs, 4px)}

/* the five answers */
.mw-qanswers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--ds-space-1, var(--sp-1)) var(--ds-space-2, var(--sp-2));margin:0;font-size:var(--ds-text-xs, var(--fs-xs))}
.mw-qanswers > div{min-inline-size:0}
.mw-qanswers dt{color:var(--ds-color-text-secondary, var(--text-2));font-weight:var(--ds-weight-medium, 500);margin:0}
.mw-qanswers dd{margin:0;display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;overflow-wrap:anywhere}
.mw-qevidence{grid-column:1 / -1}
.mw-qfact{display:inline-flex;gap:4px;padding-inline-end:var(--ds-space-2, var(--sp-2))}
.mw-qblocked{margin:0;display:flex;align-items:flex-start;gap:4px;font-size:var(--ds-text-xs, var(--fs-xs));color:var(--ds-color-status-danger-fg, var(--danger))}
.mw-qblocked code{font-family:var(--ds-font-mono, monospace);font-size:inherit}
.mw-qrow-sla{display:flex;flex-wrap:wrap;gap:var(--ds-space-1, var(--sp-1));align-items:center}

/* actions — a visible one is a deep link; a hidden one is a blocked statement with its reason */
.mw-qactions{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--ds-space-1, var(--sp-1))}
.mw-qaction{display:inline-flex;align-items:center;gap:4px;min-block-size:var(--ds-control-height-sm, 30px);font-size:var(--ds-text-xs, var(--fs-xs))}
a.mw-qaction:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:var(--ds-focus-ring-offset, 2px)}
.mw-qaction-blocked,.mw-qaction-owner{padding-inline:var(--ds-space-2, var(--sp-2));border:1px dashed var(--ds-color-border-strong, var(--line));border-radius:var(--ds-radius-pill, 999px);color:var(--ds-color-text-secondary, var(--text-2))}
.mw-qaction-blocked[data-action-visible="0"]{border-color:var(--ds-color-status-warning-border, var(--warn))}

/* not-bound registry entries: shown, never read */
.mw-notbound{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--ds-space-2, var(--sp-2));font-size:var(--ds-text-xs, var(--fs-xs))}
.mw-notbound code{font-family:var(--ds-font-mono, monospace)}
.mw-notbound-wrap>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ds-text-muted, var(--muted))}
.mw-notbound-wrap[open]>.mw-notbound{margin-top:var(--ds-space-2, var(--sp-2))}

@media (max-width:720px){
  .mw-qcats{grid-template-columns:1fr}
  .mw-qanswers{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){.mw-qentry,.mw-qaction{transition:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   EOX-14 (#2150) — Queue → Record → Context
   The work-context tab bar (open records, above the lanes) and the record
   context drawer (a read-only projection of the Business Thread). Same rules
   as above: ramp / --ds-* colour only, icon + word for every status, logical
   properties only, visible focus rings, touch targets ≥ 44px.

   Responsive tiers (three breakpoints):
   • desktop (> 1100px): three regions — the tab bar strip, the queue, and the
     context drawer docked at the inline-end edge (min(560px, 42vw)) so the
     queue stays readable next to it;
   • tablet (≤ 1100px, the components.css .ws-frame breakpoint): two columns —
     the drawer widens to min(680px, 78vw) over the queue;
   • mobile (≤ 720px, the my-work.css breakpoint): the drawer is full-bleed
     over the list; the tab bar scrolls horizontally.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── work-context tab bar ─────────────────────────────────────────────────── */
.mw-tabbar{margin-block:var(--ds-space-2, var(--sp-2)) var(--ds-space-3, var(--sp-3))}
.mw-tabbar[hidden]{display:none}
.mw-tabbar-list{display:flex;flex-wrap:wrap;gap:var(--ds-space-1, var(--sp-1));padding-block-end:var(--ds-space-1, var(--sp-1));border-block-end:1px solid var(--ds-color-border-subtle, var(--line))}
.mw-wtab{display:inline-flex;align-items:stretch;min-inline-size:0;max-inline-size:100%;border:1px solid var(--ds-color-border-default, var(--line));border-block-end:none;border-start-start-radius:var(--ds-radius-md, 10px);border-start-end-radius:var(--ds-radius-md, 10px);background:var(--ds-color-surface-raised, var(--surface))}
.mw-wtab.active{background:var(--ds-color-accent-tint, var(--brand-tint));border-color:var(--ds-color-accent, var(--brand));box-shadow:inset 0 -3px 0 var(--ds-color-accent, var(--brand))}
.mw-wtab-btn{display:inline-flex;align-items:center;gap:6px;min-block-size:44px;min-inline-size:0;padding-inline:var(--ds-space-3, var(--sp-3)) var(--ds-space-2, var(--sp-2));border:0;background:transparent;color:inherit;font:inherit;font-size:var(--ds-text-sm, var(--fs-sm));cursor:pointer;text-align:start}
.mw-wtab-btn .mw-wtab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-inline-size:18ch}
.mw-wtab.active .mw-wtab-btn{font-weight:var(--ds-weight-semibold, 600)}
.mw-wtab-close{min-inline-size:44px;min-block-size:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-inline-start:1px solid var(--ds-color-border-subtle, var(--line));background:transparent;color:var(--ds-color-text-secondary, var(--text-2));cursor:pointer}
.mw-wtab-close:hover{color:var(--ds-color-status-danger-fg, var(--danger))}
.mw-wtab-btn:focus-visible,.mw-wtab-close:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:-2px;border-radius:var(--ds-radius-xs, 4px)}

/* the entry's context affordance (a read-only open, never a command) */
.mw-qctx{display:inline-flex;align-items:center;gap:4px;min-block-size:44px;min-inline-size:44px;margin-inline-start:auto;font-size:var(--ds-text-xs, var(--fs-xs))}
.mw-qctx:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:var(--ds-focus-ring-offset, 2px)}
.mw-qentry[data-context="1"]{cursor:pointer}

/* ── context drawer ───────────────────────────────────────────────────────── */
.mw-ctx-host{position:fixed;inset:0;z-index:150;background:rgba(6,8,14,.45);backdrop-filter:blur(3px)}
.mw-ctx{position:absolute;inset-block:0;inset-inline-end:0;inline-size:min(560px,42vw);max-inline-size:100vw;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);background:var(--ds-color-surface-raised, var(--surface));color:inherit;box-shadow:var(--ds-shadow-lg, 0 12px 40px rgba(0,0,0,.25));border-inline-start:1px solid var(--ds-color-border-default, var(--line));outline:none}
.mw-ctx:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:-2px}
.mw-ctx-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-2, var(--sp-2));padding:var(--ds-space-3, var(--sp-3));padding-block-end:var(--ds-space-2, var(--sp-2));border-block-end:1px solid var(--ds-color-border-subtle, var(--line))}
.mw-ctx-label{font-size:var(--ds-text-lg, var(--fs-lg));min-inline-size:0;overflow-wrap:anywhere}
.mw-ctx-close{margin-inline-start:auto;min-inline-size:44px;min-block-size:44px;display:inline-flex;align-items:center;justify-content:center}
.mw-ctx-back,.mw-ctx-open,.mw-ctx-link{min-block-size:44px;display:inline-flex;align-items:center;gap:4px}
.mw-ctx-back:focus-visible,.mw-ctx-open:focus-visible,.mw-ctx-link:focus-visible,.mw-ctx-close:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:var(--ds-focus-ring-offset, 2px)}
.mw-ctx-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1, var(--sp-1));margin:0;padding-inline:var(--ds-space-3, var(--sp-3));padding-block:var(--ds-space-1, var(--sp-1));font-size:var(--ds-text-xs, var(--fs-xs))}
.mw-ctx-tabs{display:flex;gap:2px;padding-inline:var(--ds-space-3, var(--sp-3));border-block-end:1px solid var(--ds-color-border-subtle, var(--line));overflow-x:auto}
.mw-ctx-tab{min-block-size:44px;display:inline-flex;align-items:center;gap:6px;padding-inline:var(--ds-space-3, var(--sp-3));border:0;border-block-end:3px solid transparent;background:transparent;color:var(--ds-color-text-secondary, var(--text-2));font:inherit;font-size:var(--ds-text-sm, var(--fs-sm));cursor:pointer;white-space:nowrap}
.mw-ctx-tab.active{color:var(--ds-color-accent, var(--brand));border-block-end-color:var(--ds-color-accent, var(--brand));font-weight:var(--ds-weight-semibold, 600)}
.mw-ctx-tab:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:-2px;border-radius:var(--ds-radius-xs, 4px)}
.mw-ctx-body{min-block-size:0;overflow:auto;overscroll-behavior:contain;padding:var(--ds-space-3, var(--sp-3));display:flex;flex-direction:column;gap:var(--ds-space-3, var(--sp-3))}
.mw-ctx-body:focus-visible{outline:var(--ds-focus-ring-width, 2px) solid var(--ds-color-focus-ring, var(--brand));outline-offset:-2px}
.mw-ctx[data-ctx-state="stale"] .mw-ctx-head,.mw-ctx[data-ctx-state="degraded"] .mw-ctx-head{border-block-end-color:var(--ds-color-status-warning-border, var(--warn))}
.mw-ctx[data-ctx-state="unavailable"] .mw-ctx-head,.mw-ctx[data-ctx-state="error"] .mw-ctx-head,.mw-ctx[data-ctx-state="unauthorized"] .mw-ctx-head{border-block-end-color:var(--ds-color-status-danger-border, var(--danger))}

/* panes */
.mw-ctx-section{display:flex;flex-direction:column;gap:var(--ds-space-1, var(--sp-1))}
.mw-ctx-section h4,.mw-ctx-next h4{margin:0;display:flex;align-items:center;gap:4px;font-size:var(--ds-text-sm, var(--fs-sm))}
.mw-ctx-section h5{margin:var(--ds-space-1, var(--sp-1)) 0 0;display:flex;align-items:center;gap:4px;font-size:var(--ds-text-xs, var(--fs-xs));font-weight:var(--ds-weight-medium, 500)}
.mw-ctx-next{padding:var(--ds-space-2, var(--sp-2));border:1px solid var(--ds-color-border-default, var(--line));border-inline-start:3px solid var(--ds-color-accent, var(--brand));border-radius:var(--ds-radius-md, 10px)}
.mw-ctx-next p{margin:var(--ds-space-1, var(--sp-1)) 0 0;font-size:var(--ds-text-xs, var(--fs-xs))}
.mw-ctx-nodes,.mw-ctx-lsgroup ul,.mw-ctx-blockers,.mw-ctx-evidence,.mw-ctx-events,.mw-ctx-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ds-space-1, var(--sp-1))}
.mw-ctx-nodes li,.mw-ctx-blockers li,.mw-ctx-evidence li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-1, var(--sp-1));padding-block:var(--ds-row-padding-block, var(--sp-2));padding-inline:var(--ds-row-padding-inline, var(--sp-2));border:1px solid var(--ds-color-border-subtle, var(--line));border-radius:var(--ds-radius-md, 10px);font-size:var(--ds-text-xs, var(--fs-xs));min-inline-size:0}
.mw-ctx-nodes li[data-hidden="1"]{border-style:dashed;color:var(--ds-color-text-secondary, var(--text-2))}
.mw-ctx-nodes .mw-ctx-link{margin-inline-start:auto}
.mw-ctx-lsgroup li,.mw-ctx-events li,.mw-ctx-timeline li{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;font-size:var(--ds-text-xs, var(--fs-xs));padding-inline-start:var(--ds-space-2, var(--sp-2));border-inline-start:2px solid var(--ds-color-border-subtle, var(--line))}
.mw-ctx-lsgroup[data-link-status="MISSING"] li,.mw-ctx-lsgroup[data-link-status="UNKNOWN_LINK"] li{border-inline-start-color:var(--ds-color-status-warning-border, var(--warn))}
.mw-ctx-lsgroup[data-link-status="HIDDEN_BY_SCOPE"] li{border-inline-start-style:dashed}
.mw-ctx-blockers li{border-inline-start:3px solid var(--ds-color-status-danger-fg, var(--danger))}
.mw-ctx-facts{display:flex;flex-wrap:wrap;gap:var(--ds-space-2, var(--sp-2));flex-basis:100%;color:var(--ds-color-text-secondary, var(--text-2))}
.mw-ctx-none{margin:0;display:flex;align-items:center;gap:4px}
.mw-ctx-status{font-weight:600}
.mw-ctx-reason{font-weight:600;color:var(--ds-color-text-primary, var(--text))}
.mw-ctx-redaction,.mw-ctx-stages{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mw-ctx .ws-state{margin-block-end:0}

@media (max-width:1100px){
  .mw-ctx{inline-size:min(680px,78vw)}
}
@media (max-width:720px){
  .mw-ctx{inline-size:100vw;inset-inline-start:0;border-inline-start:0}
  .mw-ctx-head{padding-inline:var(--ds-space-2, var(--sp-2))}
  .mw-tabbar-list{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain}
  .mw-wtab{flex:0 0 auto}
  .mw-qctx{margin-inline-start:0;flex-basis:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.mw-ctx-host,.mw-ctx{animation:none;transition:none}}

/* Phones: provider strip folds into one summary line (myWorkView.providerStripHtml) */
.mw-prov-fold { margin: 6px 0; border: 1px solid var(--line, #e4dfd6); border-radius: 10px; background: var(--surface-1, #fff); }
.mw-prov-fold > summary { cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; font-size: 13px; font-weight: 600; list-style-position: inside; }
.mw-prov-fold > summary:focus-visible { outline: 2px solid var(--brand, #ED322D); outline-offset: 2px; }
.mw-prov-fold[open] > summary { border-bottom: 1px solid var(--line, #e4dfd6); }
.mw-prov-fold .mw-providers { padding: 8px 10px; margin: 0; }