/* ========================================================= AI ORGANISATION
 * The organisation as a universe: one branch at a time, drawn by
 * os-universe.js, with the chrome floating over it in glass.
 *
 * Every rule is os-org__*. Nothing here redefines an .asgt-* class; the
 * design-system components are used as they are and only POSITIONED from
 * here. Colours, sizes, radii and shadows are tokens. The one documented
 * exception, as on the Knowledge screen, is the sky's own ground: a
 * photograph of nothing has no token, and the light drawn on the canvas is
 * resolved from tokens at runtime by the engine's probe element.
 *
 * Lives in its own file, not tokens-v2.css: that sheet is being deleted
 * screen by screen and a new screen must not tie its life to it.
 */

.os-org {
  position: absolute; inset: 0; overflow: hidden;
  /* one glass recipe for everything that floats over the sky */
  --os-glass-bg: rgba(255,255,255,0.07);
  --os-glass-edge: rgba(255,255,255,0.16);
  --os-glass-lip: inset 0 1px 0 rgba(255,255,255,0.20);
  --os-glass-cast: 0 10px 34px rgba(0,0,0,0.42);
  --os-org-head: 150px;      /* measured by the screen, this is the fallback */
  --os-org-needs: 0px;       /* measured height of the needs-you bar */
  color: var(--asgt-text);
  font-family: var(--asgt-font-ui);
  background: var(--asgt-canvas);
}

/* ------------------------------------------------------------- the sky */
.os-org__sky {
  position: absolute; inset: 0;
  isolation: isolate; cursor: grab;
  background-color: #05060d;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(126,106,214,0.14), transparent 72%),
    radial-gradient(ellipse 95% 80% at 50% 55%, rgba(58,44,122,0.12), transparent 78%),
    radial-gradient(ellipse 82% 86% at 50% 50%, transparent 46%, rgba(4,5,12,0.62) 100%);
}
.os-org__sky.is-dragging { cursor: grabbing; }
.os-org__sky.is-dragging .os-org__lab { opacity: 0.55; }
.os-org__sky[hidden] { display: none; }
.os-org__gl { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.os-org__probe { position: absolute; inline-size: 0; block-size: 0; opacity: 0; }

/* The interactive layer: one real button per form. A coordinate space, not
   text, so it never flips with the writing direction. */
.os-org__hits { position: absolute; inset: 0; z-index: 3; direction: ltr; }
.os-org__hit {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
  transition: opacity 200ms var(--asgt-ease);
}
.os-org__hit:focus-visible { outline: 2px solid var(--asgt-accent); outline-offset: 4px; }

.os-org__labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; direction: ltr; }
.os-org__lab {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; white-space: nowrap; direction: ltr;
  transition: opacity 180ms var(--asgt-ease);
}
.os-org__lab.is-hidden { opacity: 0; }
.os-org__lab b {
  font-size: var(--asgt-t-md); font-weight: 700; letter-spacing: -0.01em; color: var(--asgt-text);
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.85);
}
.os-org__lab.is-on b { font-weight: 800; }
.os-org__lab span {
  font-size: var(--asgt-t-sm); color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.8);
}
.os-org__lab .os-org__kind {
  font-size: var(--asgt-t-2xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
/* Status as text AND colour: the dot carries the colour, the word the meaning. */
.os-org__st {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--asgt-t-sm); font-style: normal; color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
}
.os-org__st i {
  inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.os-org__st--ready     { color: var(--asgt-stock); }
.os-org__st--running   { color: var(--asgt-info); }
.os-org__st--queued    { color: var(--asgt-info); }
.os-org__st--review    { color: var(--asgt-low); }
.os-org__st--attention { color: var(--asgt-out); }
.os-org__st--blocked   { color: var(--asgt-out); }
.os-org__st--paused    { color: var(--asgt-text-faint); }
.os-org__st--planned   { color: var(--asgt-text-faint); }
.os-org__st--done      { color: var(--asgt-stock); }
.os-org__st span, .os-org__st em { font-style: normal; color: inherit; text-shadow: none; }

/* --------------------------------------------------------- the header */
.os-org__head {
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 6;
  padding: var(--asgt-s-5) var(--asgt-s-8) var(--asgt-s-6);
  display: flex; flex-direction: column; gap: var(--asgt-s-4);
  background: linear-gradient(to bottom, rgba(4,5,12,0.94) 10%, rgba(4,5,12,0.66) 55%, transparent);
  pointer-events: none;
}
.os-org__head > * { pointer-events: auto; }
.os-org__bar { display: flex; align-items: center; gap: var(--asgt-s-6); flex-wrap: wrap; }
.os-org__crumb {
  display: flex; align-items: center; gap: var(--asgt-s-2); flex-wrap: wrap;
  font-size: var(--asgt-t-2xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.46);
  margin-block-end: var(--asgt-s-1);
}
.os-org__crumb button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: rgba(255,255,255,0.6);
}
.os-org__crumb button:hover { color: var(--asgt-text); }
.os-org__crumb i { font-style: normal; opacity: 0.5; }
.os-org__title h1 {
  margin: 0; font-size: var(--asgt-t-2xl); font-weight: 800; line-height: 1; color: var(--asgt-text);
  letter-spacing: -0.022em;
}
.os-org__title > span { display: block; margin-block-start: 6px; font-size: var(--asgt-t-sm); color: rgba(255,255,255,0.62); }
.os-org__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--asgt-s-3); flex-wrap: wrap; }
.os-org__pill {
  display: inline-flex; align-items: center; gap: var(--asgt-s-2);
  block-size: var(--asgt-control-h-sm); padding-inline: var(--asgt-s-4);
  border-radius: var(--asgt-r-pill);
  background: var(--os-glass-bg); border: 1px solid var(--os-glass-edge);
  box-shadow: var(--os-glass-lip), var(--os-glass-cast);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  font-size: var(--asgt-t-xs); color: var(--asgt-text-muted); white-space: nowrap;
}
.os-org__pill i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.os-org__pill--live i    { color: var(--asgt-stock); }
.os-org__pill--polling i { color: var(--asgt-info); }
.os-org__pill--fixture i { color: var(--asgt-low); }

.os-org__tools { display: flex; align-items: center; gap: var(--asgt-s-4); flex-wrap: wrap; }
.os-org__tools .asgt-segmented { margin-inline-start: auto; }

.os-org__search {
  position: relative;
  display: flex; align-items: center; gap: var(--asgt-s-3);
  flex: 0 1 640px; min-inline-size: 0;
  block-size: var(--asgt-control-h); padding-inline: var(--asgt-s-4);
  border-radius: var(--asgt-r-pill);
  background: var(--os-glass-bg); border: 1px solid var(--os-glass-edge);
  box-shadow: var(--os-glass-lip), var(--os-glass-cast);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  color: rgba(255,255,255,0.62);
  transition: border-color var(--asgt-dur) var(--asgt-ease), background var(--asgt-dur) var(--asgt-ease);
}
.os-org__search:focus-within { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.11); }
.os-org__search > svg { flex: none; opacity: 0.7; }
.os-org__search-input {
  flex: 1; min-inline-size: 0; background: none; border: 0; outline: none;
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-sm); color: var(--asgt-text);
}
.os-org__search-input::placeholder { color: rgba(255,255,255,0.45); }
.os-org__kbd {
  flex: none; padding: 2px 7px; border-radius: var(--asgt-r-sm);
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14);
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs); color: rgba(255,255,255,0.62);
}
/* Results drop below the pill, in the same glass. */
.os-org__results {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 8px); z-index: 8;
  border-radius: var(--asgt-r-lg);
  /* Denser than the other glass: it floats over tables and text, and a list
     you can read the page through is a list you cannot read. */
  background: linear-gradient(rgba(255,255,255,0.07), rgba(255,255,255,0.03)), rgba(10,12,24,0.94);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 18px 50px rgba(0,0,0,0.6);
  padding: var(--asgt-s-2); max-block-size: 50vh; overflow: auto;
}
.os-org__results[hidden] { display: none; }
.os-org__results-group {
  padding: var(--asgt-s-2) var(--asgt-s-3) var(--asgt-s-1);
  font-size: var(--asgt-t-2xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.os-org__result {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  inline-size: 100%; padding: var(--asgt-s-2) var(--asgt-s-3);
  background: none; border: 0; border-radius: var(--asgt-r-md);
  color: rgba(255,255,255,0.9); font-family: var(--asgt-font-ui); font-size: var(--asgt-t-sm);
  text-align: start; cursor: pointer;
}
.os-org__result:hover, .os-org__result.is-active { background: rgba(255,255,255,0.10); color: var(--asgt-text); }
.os-org__result small { color: rgba(255,255,255,0.5); font-size: var(--asgt-t-xs); margin-inline-start: auto; white-space: nowrap; }
.os-org__result .os-org__kind { font-size: var(--asgt-t-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); min-inline-size: 78px; }
.os-org__results-empty { padding: var(--asgt-s-3); color: rgba(255,255,255,0.55); font-size: var(--asgt-t-sm); }

/* -------------------------------------------------------- the inspector */
.os-org__panel {
  position: absolute; inset-inline-end: var(--asgt-s-5); z-index: 5;
  inset-block-start: calc(var(--os-org-head) + var(--asgt-s-1));
  inline-size: 330px; max-inline-size: calc(100% - var(--asgt-s-8));
  max-block-size: calc(100% - var(--os-org-head) - var(--os-org-needs) - var(--asgt-s-8));
  overflow: auto;
  background: linear-gradient(rgba(255,255,255,0.09), rgba(255,255,255,0.045)), rgba(10,12,24,0.55);
  backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 18px 50px rgba(0,0,0,0.5);
  border-radius: var(--asgt-r-lg);
  padding: var(--asgt-s-5);
  display: flex; flex-direction: column; gap: var(--asgt-s-4);
  animation: os-org-panel 320ms var(--asgt-ease) both;
}
.os-org__panel[hidden] { display: none; }
@keyframes os-org-panel { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.os-org__eyebrow {
  display: flex; align-items: center; gap: var(--asgt-s-2);
  font-size: var(--asgt-t-2xs); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.os-org__panel-title {
  display: flex; align-items: flex-start; gap: var(--asgt-s-3);
}
.os-org__panel-title h3 { margin: 0; font-size: var(--asgt-t-lg); color: var(--asgt-text); font-weight: 800; letter-spacing: -0.015em; }
.os-org__panel-title p { margin: 4px 0 0; font-size: var(--asgt-t-sm); color: rgba(255,255,255,0.66); }
.os-org__close {
  margin-inline-start: auto; inline-size: var(--asgt-control-h-sm); block-size: var(--asgt-control-h-sm); flex: none;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 50%;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85);
  font-size: var(--asgt-t-md); line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.os-org__close:hover { background: rgba(255,255,255,0.18); color: var(--asgt-text); }
.os-org__sep { block-size: 1px; background: rgba(255,255,255,0.10); }
.os-org__facts { display: flex; flex-direction: column; gap: var(--asgt-s-2); }
.os-org__fact { display: flex; align-items: baseline; gap: var(--asgt-s-3); font-size: var(--asgt-t-sm); }
.os-org__fact > span:first-child {
  flex: none; min-inline-size: 84px; font-size: var(--asgt-t-2xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.os-org__fact > span:last-child { color: rgba(255,255,255,0.9); min-inline-size: 0; }
.os-org__rows { display: flex; flex-direction: column; }
.os-org__row {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  inline-size: 100%; padding: var(--asgt-s-2) 0;
  background: none; border: 0; cursor: pointer; text-align: start;
  color: rgba(255,255,255,0.88); font-family: var(--asgt-font-ui); font-size: var(--asgt-t-sm);
  border-block-end: 1px solid rgba(255,255,255,0.06);
}
.os-org__row:last-child { border-block-end: 0; }
.os-org__row:hover { color: var(--asgt-text); }
.os-org__row .asgt-avatar { flex: none; }
.os-org__row > svg:last-child { margin-inline-start: auto; opacity: 0.5; flex: none; }
.os-org__row small { display: block; font-size: var(--asgt-t-xs); color: rgba(255,255,255,0.55); }
.os-org__row > span { min-inline-size: 0; }
.os-org__actions { display: flex; flex-direction: column; gap: var(--asgt-s-2); }
.os-org__actions .asgt-btn { inline-size: 100%; }
.os-org__actions-row { display: flex; gap: var(--asgt-s-2); }
.os-org__actions-row .asgt-btn { flex: 1; }
.os-org__figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--asgt-s-3); }
.os-org__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--asgt-text); text-decoration: underline; text-underline-offset: 3px;
}
.os-org__link:hover { color: var(--asgt-accent-hover); }
.os-org__vacant {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--asgt-t-xs); color: var(--asgt-low);
}
.os-org__vacant::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; border: 1.5px dashed currentColor; }

/* ----------------------------------------------------- floating controls */
.os-org__foot {
  position: absolute; inset-inline-start: var(--asgt-s-8);
  inset-block-end: calc(var(--os-org-needs) + var(--asgt-s-5));
  z-index: 5; display: flex; align-items: center; gap: var(--asgt-s-3); flex-wrap: wrap;
  font-size: var(--asgt-t-2xs); color: rgba(255,255,255,0.62); letter-spacing: 0.04em;
}
.os-org__foot[hidden] { display: none; }
.os-org__glassbtn, .os-org__zoom {
  display: inline-flex; align-items: center; gap: var(--asgt-s-2);
  block-size: var(--asgt-control-h-sm); padding-inline: var(--asgt-s-3);
  border: 1px solid var(--os-glass-edge); border-radius: var(--asgt-r-pill);
  background: var(--os-glass-bg);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: var(--os-glass-lip), var(--os-glass-cast);
  color: rgba(255,255,255,0.86); cursor: pointer;
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-xs); font-weight: 600;
}
.os-org__glassbtn:hover { background: rgba(255,255,255,0.14); color: var(--asgt-text); }
.os-org__glassbtn[aria-pressed="false"] { opacity: 0.6; }
.os-org__glassbtn svg { flex: none; }
.os-org__zoom { padding: 3px; gap: 2px; cursor: default; }
.os-org__zoom button {
  min-inline-size: var(--asgt-control-h-sm); block-size: calc(var(--asgt-control-h-sm) - 8px); border: 0; cursor: pointer;
  background: none; color: rgba(255,255,255,0.8); border-radius: var(--asgt-r-pill);
  font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs);
}
.os-org__zoom button:hover { background: rgba(255,255,255,0.12); color: var(--asgt-text); }
.os-org__zoom output { min-inline-size: 44px; text-align: center; font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs); color: rgba(255,255,255,0.7); }
.os-org__hint { display: inline-flex; align-items: center; gap: 6px; padding-inline-start: var(--asgt-s-2); }
.os-org__hint svg { opacity: 0.6; }

/* ------------------------------------------------------- needs-you bar */
.os-org__needs {
  position: absolute; inset-inline: var(--asgt-s-8); inset-block-end: var(--asgt-s-5); z-index: 5;
  display: flex; align-items: center; gap: var(--asgt-s-4);
  padding: var(--asgt-s-3) var(--asgt-s-5);
  border-radius: var(--asgt-r-lg);
  background: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.04)), rgba(10,12,24,0.6);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 14px 40px rgba(0,0,0,0.45);
  overflow: hidden;
}
.os-org__needs[hidden] { display: none; }
.os-org__needs-label {
  flex: none; font-size: var(--asgt-t-base); font-weight: 800; color: var(--asgt-text);
  padding-inline-end: var(--asgt-s-4); border-inline-end: 1px solid rgba(255,255,255,0.12);
}
.os-org__needs-items { display: flex; align-items: center; gap: var(--asgt-s-2); overflow-x: auto; flex: 1; min-inline-size: 0; }
.os-org__need {
  display: inline-flex; align-items: center; gap: var(--asgt-s-3);
  flex: none; padding-block: 6px; padding-inline: 6px var(--asgt-s-3);
  border: 0; border-radius: var(--asgt-r-pill);
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9);
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-sm); cursor: pointer;
}
.os-org__need:hover { background: rgba(255,255,255,0.14); color: var(--asgt-text); }
.os-org__need i {
  inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--asgt-low-bg); color: var(--asgt-low); flex: none;
}
.os-org__need--out i { background: var(--asgt-out-bg); color: var(--asgt-out); }
.os-org__need--info i { background: var(--asgt-info-bg); color: var(--asgt-info); }
.os-org__need b { font-weight: 700; }
.os-org__need small { color: rgba(255,255,255,0.55); }
.os-org__need > svg:last-child { opacity: 0.5; }
.os-org__needs-empty { font-size: var(--asgt-t-sm); color: rgba(255,255,255,0.6); }
.os-org__needs-mission {
  margin-inline-start: auto; flex: none; display: inline-flex; align-items: center; gap: var(--asgt-s-3);
  padding-inline-start: var(--asgt-s-4); border-inline-start: 1px solid rgba(255,255,255,0.12);
  font-size: var(--asgt-t-sm); color: rgba(255,255,255,0.8);
}

/* -------------------------------------- flat views: chart, directory, pages */
.os-org__view {
  position: absolute; inset-inline: 0; inset-block-start: var(--os-org-head);
  inset-block-end: calc(var(--os-org-needs) + var(--asgt-s-8));
  overflow: auto; z-index: 4;
  padding: var(--asgt-s-2) var(--asgt-s-8) var(--asgt-s-8);
}
.os-org__view[hidden] { display: none; }
.os-org__view--page { inset-block-end: 0; }

/* Org chart: a real tree. Expandable branches, readable manager lines. */
.os-org__tree, .os-org__tree ul { list-style: none; margin: 0; padding: 0; }
.os-org__tree ul { margin-inline-start: 22px; padding-inline-start: 18px; border-inline-start: 1px solid rgba(255,255,255,0.12); }
.os-org__node {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  padding: var(--asgt-s-2) var(--asgt-s-3); margin-block: 2px;
  border-radius: var(--asgt-r-md);
  color: rgba(255,255,255,0.9);
}
.os-org__node:hover { background: rgba(255,255,255,0.06); }
.os-org__node.is-on { background: var(--asgt-accent-tint); }
.os-org__twig {
  inline-size: 26px; block-size: 26px; flex: none;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 50%;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); cursor: pointer;
  display: grid; place-items: center;
}
.os-org__twig[aria-expanded="true"] svg { transform: rotate(90deg); }
.os-org__twig svg { transition: transform var(--asgt-dur) var(--asgt-ease); }
.os-org__twig[disabled] { opacity: 0.3; cursor: default; }
.os-org__node-name {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: start;
  font-family: var(--asgt-font-ui); font-size: var(--asgt-t-base); font-weight: 700; color: var(--asgt-text);
}
.os-org__node-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.os-org__node .os-org__kind {
  font-size: var(--asgt-t-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); min-inline-size: 84px;
}
.os-org__node-meta { font-size: var(--asgt-t-xs); color: rgba(255,255,255,0.6); }
.os-org__node-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--asgt-s-2); flex-wrap: wrap; }
.os-org__node-loading { padding: var(--asgt-s-2) var(--asgt-s-3); color: rgba(255,255,255,0.5); font-size: var(--asgt-t-xs); }

/* Directory: the design system's table on the dark surface, positioned. */
.os-org__dir { max-inline-size: 1600px; margin-inline: auto; }
.os-org__dir .asgt-table tbody tr { cursor: pointer; }
.os-org__dir .asgt-filterbar > .asgt-search { flex: 1 1 260px; }
.os-org__dir .asgt-select { inline-size: auto; min-inline-size: 150px; }

/* Agent and mission workspaces: a page inside the frame. */
.os-org__page-in { max-inline-size: 1600px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--asgt-s-5); }
.os-org__cols { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: var(--asgt-s-5); align-items: start; }
.os-org__cols--2 { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1240px) { .os-org__cols { grid-template-columns: minmax(0, 1fr) 320px; } .os-org__cols > :first-child { grid-column: 1 / -1; } }
@media (max-width: 900px)  { .os-org__cols, .os-org__cols--2 { grid-template-columns: 1fr; } }
.os-org__col { display: flex; flex-direction: column; gap: var(--asgt-s-5); min-inline-size: 0; }
.os-org__pagehead { display: flex; align-items: flex-start; gap: var(--asgt-s-4); flex-wrap: wrap; }
.os-org__pagehead .asgt-avatar--lg { flex: none; }
.os-org__pagehead h2 { margin: 0; font-size: var(--asgt-t-xl); color: var(--asgt-text); font-weight: 800; letter-spacing: -0.02em; }
.os-org__pagehead p { margin: 4px 0 0; color: rgba(255,255,255,0.66); font-size: var(--asgt-t-base); }
.os-org__pagehead-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--asgt-s-2); flex-wrap: wrap; }
.os-org__thread { display: flex; flex-direction: column; gap: var(--asgt-s-3); max-block-size: 52vh; overflow: auto; padding-inline-end: var(--asgt-s-2); }
.os-org__msg { display: flex; gap: var(--asgt-s-3); align-items: flex-start; }
.os-org__msg .asgt-avatar { flex: none; margin-block-start: 2px; }
.os-org__msg-body { min-inline-size: 0; flex: 1; }
.os-org__msg-body b { font-size: var(--asgt-t-sm); }
.os-org__msg-text { white-space: pre-wrap; font-size: var(--asgt-t-sm); color: var(--asgt-text); margin: 2px 0 0; line-height: 1.55; }
.os-org__msg-time { font-family: var(--asgt-font-data); font-size: var(--asgt-t-2xs); color: var(--asgt-text-faint); white-space: nowrap; }
.os-org__composer { display: flex; flex-direction: column; gap: var(--asgt-s-2); }
.os-org__composer-row { display: flex; align-items: center; gap: var(--asgt-s-3); }
.os-org__work { display: flex; flex-direction: column; gap: var(--asgt-s-3); }
.os-org__draft {
  padding: var(--asgt-s-4); border-radius: var(--asgt-r-md);
  background: var(--asgt-well); box-shadow: var(--asgt-shadow-well); border: 1px solid var(--asgt-border);
}
.os-org__draft-head { display: flex; align-items: center; gap: var(--asgt-s-3); margin-block-end: var(--asgt-s-2); font-size: var(--asgt-t-xs); color: var(--asgt-text-muted); }
.os-org__draft-head b { color: var(--asgt-text); font-size: var(--asgt-t-sm); }
.os-org__draft-text { white-space: pre-wrap; font-size: var(--asgt-t-sm); line-height: 1.55; margin: 0; max-block-size: 260px; overflow: auto; }
.os-org__draft-text.is-clamped { max-block-size: 120px; }
.os-org__know { display: flex; flex-direction: column; gap: var(--asgt-s-2); }
.os-org__know-item {
  display: flex; align-items: center; gap: var(--asgt-s-3);
  padding: var(--asgt-s-2) 0; font-size: var(--asgt-t-sm);
  border-block-end: 1px solid var(--asgt-border-hair);
}
.os-org__know-item:last-child { border-block-end: 0; }
.os-org__know-item > i {
  inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--asgt-accent-tint); color: var(--asgt-accent-on-tint);
}
.os-org__know-item small { display: block; color: var(--asgt-text-muted); font-size: var(--asgt-t-xs); }

/* ------------------------------------------------------------ dialogs */
/* Dialogs are <dialog class="asgt-modal"> opened with showModal(): the
   design system styles the element and its ::backdrop; nothing to add. */
.os-org__dialog { max-block-size: 90vh; overflow: auto; }
.os-org__toast {
  position: absolute; inset-inline: 0; inset-block-end: calc(var(--os-org-needs) + var(--asgt-s-12)); z-index: 9;
  display: flex; justify-content: center; pointer-events: none;
}
.os-org__toast > * { pointer-events: auto; }
.os-org__toast[hidden] { display: none; }
.os-org__banner {
  position: absolute; inset-block-start: var(--asgt-s-3); inset-inline-start: 50%; transform: translateX(-50%); z-index: 7;
  display: inline-flex; align-items: center; gap: var(--asgt-s-2);
  padding: 6px var(--asgt-s-4); border-radius: var(--asgt-r-pill);
  background: var(--asgt-low-bg); color: var(--asgt-low); border: 1px solid currentColor;
  font-size: var(--asgt-t-xs); font-weight: 700; white-space: nowrap;
}

/* The blank sky: an honest state, centred. */
.os-org__blank { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--asgt-s-6); z-index: 3; }
.os-org__blank .asgt-placeholder, .os-org__blank .asgt-empty { max-inline-size: 520px; }

@media (prefers-reduced-motion: reduce) {
  .os-org__panel { animation: none; }
  .os-org__lab, .os-org__hit { transition: none; }
}

/* --------------------------------------------------------------- narrow */
@media (max-width: 720px) {
  /* A phone gives the sky about a third of the height a desktop does, so the
     header says less: no counts line, no polling pill, one-line crumb. */
  .os-org__head { padding: var(--asgt-s-3) var(--asgt-s-4) var(--asgt-s-4); gap: var(--asgt-s-3); }
  .os-org__title h1 { font-size: var(--asgt-t-lg); }
  .os-org__title > span { display: none; }
  .os-org__crumb { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-block-end: 0; }
  .os-org__pill:not(.os-org__pill--fixture) { display: none; }
  .os-org__bar { flex-wrap: nowrap; gap: var(--asgt-s-3); align-items: flex-end; }
  .os-org__title { flex: 1; min-inline-size: 0; }
  .os-org__end { margin-inline-start: auto; inline-size: auto; flex: none; }
  .os-org__tools { gap: var(--asgt-s-2); }
  .os-org__tools .asgt-segmented { margin-inline-start: 0; inline-size: 100%; display: flex; }
  .os-org__tools .asgt-segmented__item { flex: 1; }
  .os-org__search { flex-basis: 100%; }
  .os-org__foot .os-org__hint { display: none; }
  /* Touch controls are 44px tall; three of them wrap over the sky. Pinch
     and drag zoom a phone, so the zoom cluster goes and Fit stays. */
  .os-org__zoom button:not([data-zoom="fit"]), .os-org__zoom output { display: none; }
  .os-org__panel {
    inset-inline: 0; inset-block: auto 0; inline-size: auto; max-inline-size: none;
    border-radius: var(--asgt-r-lg) var(--asgt-r-lg) 0 0;
    max-block-size: 62%;
    z-index: 7;   /* over the controls and the needs-you bar while it is open */
  }
  .os-org__panel::before {
    content: ""; display: block; inline-size: 40px; block-size: 4px; border-radius: var(--asgt-r-pill);
    background: rgba(255,255,255,0.3); margin: -6px auto 0;
  }
  .os-org__foot { inset-inline-start: var(--asgt-s-4); }
  .os-org__needs { inset-inline: var(--asgt-s-4); padding: var(--asgt-s-2) var(--asgt-s-3); }
  .os-org__needs-mission { display: none; }
  .os-org__view { padding-inline: var(--asgt-s-4); }
}