/* ============================================================================
   Owner Workspace — command center
   Anvil2 (light) faithful. Status colors (red/yellow/green) used ONLY for
   business-health signals; blue-600 for primary actions; no glows/gradients.
   ========================================================================== */

:root {
  --rail-w: 72px;
  --rail-bg: #0c1118;
  --rail-fg: #ffffff;
  --topbar-h: 48px;
  --ow-ground: var(--a2-color-blue-grey-10);
  --ow-gutter: 28px;
  --ow-card-radius: var(--a2-radius-4);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--a2-font-family-base);
  color: var(--a2-foreground-color-default);
  background: var(--ow-ground);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ───────────────────────── App shell ───────────────────────── */
.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "rail topbar" "rail content";
  background: var(--ow-ground);
}

.topbar {
  grid-area: topbar;
  background: #fff;
  border-bottom: 1px solid var(--a2-color-neutral-80);
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  z-index: 5;
}
.topbar__brand { display: inline-flex; align-items: center; gap: 8px; }
.topbar__brand img { height: 20px; width: auto; display: block; }
.topbar__search {
  display: flex; align-items: center; gap: 8px; height: 32px;
  background: #fff; border: 1px solid var(--a2-color-neutral-80);
  border-radius: 6px; padding: 0 10px 0 12px; max-width: 460px; width: 100%;
  justify-self: center; color: var(--a2-color-neutral-500);
}
.topbar__search-text { flex: 1; font: 400 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.topbar__search-kbd {
  font: 400 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500);
  background: var(--a2-color-neutral-20); border: 1px solid var(--a2-color-neutral-80);
  border-radius: 4px; padding: 3px 7px;
}
.topbar__search-kbd b { color: var(--a2-color-neutral-700); font-weight: 600; }
.topbar__utils { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.topbar__utils img { height: 36px; width: auto; display: block; }

/* side rail */
.rail { grid-area: rail; background: var(--rail-bg); color: var(--rail-fg); display: flex; flex-direction: column; z-index: 6; }
.rail__nav { flex: 1; padding: 6px 0 4px; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.rail__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; margin: 0 6px; padding: 7px 2px 6px; border-radius: 8px;
  color: rgba(255,255,255,.82); cursor: pointer; text-decoration: none; border: 0; background: transparent;
  transition: background 120ms ease, color 120ms ease;
}
.rail__item:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail__item.is-active { background: rgba(255,255,255,.10); color: #fff; }
.rail__icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }
.rail__icon .material-icons-round { font-size: 22px; }
.rail__label { font-size: 10.5px; line-height: 12px; white-space: nowrap; font-weight: 600; }
.rail__item--atlas { color: #fff; }
.rail__item--atlas:hover { background: transparent; }
.rail__atlas-badge {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(150deg, #2f7bff 0%, #1c5fe0 100%);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.rail__atlas-badge svg { width: 19px; height: 19px; display: block; }
.rail__foot { padding: 8px 6px 12px; }
.rail__collapse {
  width: 100%; height: 38px; border: 0; cursor: pointer; border-radius: 8px;
  background: transparent; color: rgba(255,255,255,.62);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.rail__collapse:hover { background: rgba(255,255,255,.06); color: #fff; }
.rail__collapse .material-icons-round { font-size: 22px; }

.content { grid-area: content; overflow: auto; position: relative; }

/* ───────────────────────── Command center frame ───────────────────────── */
.ow { min-height: 100%; padding: var(--ow-gutter) var(--ow-gutter) 64px; }
.ow__inner { max-width: 1480px; margin: 0 auto; }

/* page header */
.ow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.ow-head__l { min-width: 0; }
.ow-head__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 12px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase;
  color: var(--a2-color-neutral-500);
}
.ow-head__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a2-color-green-500); box-shadow: 0 0 0 3px var(--a2-background-color-success-faint); }
.ow-head__title { margin: 9px 0 0; font-family: var(--a2-font-family-display); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; color: var(--a2-color-neutral-950); }
.ow-head__sub { margin: 7px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--a2-color-neutral-600); }
.ow-head__sub b { color: var(--a2-color-neutral-900); font-weight: 700; }

.ow-pulse { display: flex; align-items: stretch; gap: 0; background: #fff; border: 1px solid var(--a2-border-color-subdued); border-radius: var(--a2-radius-3); overflow: hidden; flex: 0 0 auto; }
.ow-pulse__cell { padding: 11px 18px; display: flex; flex-direction: column; gap: 3px; border-left: 1px solid var(--a2-color-neutral-80); }
.ow-pulse__cell:first-child { border-left: 0; }
.ow-pulse__k { font: 700 11px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.ow-pulse__v { font: 800 20px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px; }
.ow-pulse__v .pct { font-size: 12px; font-weight: 700; }
.ow-pulse__v .pct--up { color: var(--a2-color-green-600); }
.ow-pulse__v .pct--down { color: var(--a2-color-red-600); }
.ow-pulse__cell--alert .ow-pulse__v { color: var(--a2-color-red-600); }

/* two-column grid */
.ow-grid { display: grid; grid-template-columns: minmax(380px, 0.82fr) minmax(0, 1.18fr); gap: 24px; align-items: start; }
.ow-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.ow-col--insights { order: 1; }
.ow-col--health { order: 2; }
.ow[data-layout="metrics-left"] .ow-col--insights { order: 2; }
.ow[data-layout="metrics-left"] .ow-col--health { order: 1; }

/* generic panel */
.panel { background: #fff; border: 1px solid var(--a2-border-color-subdued); border-radius: var(--ow-card-radius); }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 12px; }
.panel__title { display: inline-flex; align-items: center; gap: 9px; font-family: var(--a2-font-family-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--a2-color-neutral-950); }
.panel__title .material-icons-round { font-size: 19px; color: var(--a2-color-neutral-500); }
.panel__sub { font-size: 13px; color: var(--a2-color-neutral-500); }
.panel__meta { font-size: 12px; font-weight: 700; color: var(--a2-color-neutral-500); letter-spacing: .03em; text-transform: uppercase; }

/* small primitives */
.btn { font: 600 13.5px/1 var(--a2-font-family-base); border-radius: var(--a2-radius-2); border: 1px solid transparent; padding: 9px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; }
.btn .material-icons-round { font-size: 17px; }
.btn--primary { background: var(--a2-background-color-primary); color: var(--a2-foreground-color-on-primary); }
.btn--primary:hover { background: var(--a2-background-color-primary-hover); }
.btn--ghost { background: transparent; color: var(--a2-foreground-color-primary); border-color: transparent; padding: 7px 10px; }
.btn--ghost:hover { background: var(--a2-background-color-primary-faint); }
.btn--outline { background: #fff; color: var(--a2-color-neutral-800); border-color: var(--a2-color-neutral-100); }
.btn--outline:hover { background: var(--a2-background-color-secondary); }
.btn--sm { padding: 6px 10px; font-size: 12.5px; }

.chip { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--a2-font-family-base); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.chip .material-icons-round { font-size: 13px; }

/* status tokens */
.is-red    { --status: var(--a2-color-red-600);    --status-bg: var(--a2-background-color-danger-faint);  --status-soft: #fdecea; }
.is-yellow { --status: var(--a2-color-yellow-700);  --status-bg: var(--a2-background-color-warning-faint); --status-soft: #fff5db; }
.is-green  { --status: var(--a2-color-green-600);   --status-bg: var(--a2-background-color-success-faint); --status-soft: #e7f6ef; }

.status-chip { background: var(--status-bg); color: var(--status); }
.status-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status); }

/* ════════════════════════ Health dashboard ════════════════════════ */
.health__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 4px 16px 18px; }

.metric {
  position: relative; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--a2-border-color-subdued);
  border-radius: var(--a2-radius-3); padding: 15px 15px 14px;
  display: flex; flex-direction: column; gap: 11px;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
  font-family: var(--a2-font-family-base);
}
.metric::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--status, var(--a2-color-neutral-200)); border-radius: var(--a2-radius-3) var(--a2-radius-3) 0 0; }
.metric:hover { border-color: var(--a2-color-neutral-200); box-shadow: var(--a2-shadow-small); transform: translateY(-1px); }
.metric:focus-visible { outline: var(--a2-focus-ring-width) solid var(--a2-focus-ring-color); outline-offset: var(--a2-focus-ring-offset); }

/* status style variants */
.ow[data-status="rail"] .metric::before { inset: 0 auto 0 0; height: auto; width: 3px; border-radius: var(--a2-radius-3) 0 0 var(--a2-radius-3); }
.ow[data-status="dot"]  .metric::before { display: none; }

.metric__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.metric__name { font: 700 13.5px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.metric__drill { color: var(--a2-color-neutral-300); display: inline-flex; transition: color 120ms ease; }
.metric:hover .metric__drill { color: var(--a2-foreground-color-primary); }
.metric__drill .material-icons-round { font-size: 18px; }

.metric__valrow { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.metric__value { font: 800 30px/0.95 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.metric__trend { display: inline-flex; align-items: center; gap: 2px; font: 700 12.5px/1 var(--a2-font-family-base); }
.metric__trend .material-icons-round { font-size: 15px; }
.metric__trend--up   { color: var(--a2-color-green-600); }
.metric__trend--down { color: var(--a2-color-red-600); }
.metric__trend--warn { color: var(--a2-color-yellow-700); }
.metric__trend--flat { color: var(--a2-color-neutral-500); }

.metric__statusline { display: flex; align-items: center; gap: 8px; }
.metric__target { font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }

/* human vs AI block (rendered by JS into here) */
.metric__hvai { margin-top: 1px; }
.hv { display: flex; flex-direction: column; gap: 7px; }
.hv-row { display: grid; grid-template-columns: 64px 1fr 40px; align-items: center; gap: 8px; }
.hv-row__lbl { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.hv-row__lbl .tagdot { width: 7px; height: 7px; border-radius: 2px; }
.hv-row__lbl .tagdot--h { background: var(--a2-color-blue-grey-500); }
.hv-row__lbl .tagdot--ai { background: var(--a2-color-blue-600); }
.hv-bar { height: 7px; border-radius: 999px; background: var(--a2-color-neutral-60); overflow: hidden; display: block; }
.hv-bar__fill { height: 100%; border-radius: 999px; display: block; }
.hv-bar__fill--h { background: var(--a2-color-blue-grey-500); }
.hv-bar__fill--ai { background: var(--a2-color-blue-600); }
.hv-row__val { font: 700 12px/1 var(--a2-font-family-base); text-align: right; color: var(--a2-color-neutral-800); font-variant-numeric: tabular-nums; }

/* hvai — side by side */
.hv-sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hv-sbs__cell { background: var(--a2-background-color-secondary); border-radius: var(--a2-radius-2); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.hv-sbs__lbl { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 var(--a2-font-family-base); text-transform: uppercase; letter-spacing: .04em; color: var(--a2-color-neutral-500); }
.hv-sbs__lbl .tagdot { width: 7px; height: 7px; border-radius: 2px; }
.hv-sbs__lbl .tagdot--h { background: var(--a2-color-blue-grey-500); }
.hv-sbs__lbl .tagdot--ai { background: var(--a2-color-blue-600); }
.hv-sbs__v { font: 800 17px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }

/* hvai — split pill */
.hv-pill { display: flex; height: 34px; border-radius: 999px; overflow: hidden; border: 1px solid var(--a2-color-neutral-80); }
.hv-pill__seg { display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--a2-font-family-base); color: #fff; min-width: 44px; padding: 0 6px; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.hv-pill__seg span { overflow: hidden; text-overflow: ellipsis; }
.hv-pill__seg--h { background: var(--a2-color-blue-grey-500); }
.hv-pill__seg--ai { background: var(--a2-color-blue-600); }
.hv-leg { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.hv-leg__i { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.hv-leg__i .tagdot { width: 7px; height: 7px; border-radius: 2px; }
.hv-leg__i .tagdot--h { background: var(--a2-color-blue-grey-500); }
.hv-leg__i .tagdot--ai { background: var(--a2-color-blue-600); }

/* automation footer */
.metric__autos { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 11px; border-top: 1px solid var(--a2-color-neutral-70); }
.auto-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--a2-font-family-base); padding: 4px 7px 4px 5px; border-radius: 6px; white-space: nowrap; }
.auto-chip .material-icons-round { font-size: 12px; }
.auto-chip--on { background: var(--a2-background-color-success-faint); color: var(--a2-color-green-700); }
.auto-chip--off { background: var(--a2-color-neutral-30); color: var(--a2-color-neutral-500); }
.auto-chip--off .material-icons-round { color: var(--a2-color-neutral-400); }

/* ════════════════════════ Insights (Atlas) ════════════════════════ */
.insights__list { display: flex; flex-direction: column; gap: 10px; padding: 2px 16px 18px; }
.insight { border: 1px solid var(--a2-border-color-subdued); border-radius: var(--a2-radius-3); overflow: hidden; background: #fff; }
.insight__bar { height: 3px; background: var(--status, var(--a2-color-neutral-200)); }
.insight__head { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; cursor: pointer; }
.insight__icon { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--status-bg); color: var(--status); }
.insight__icon .material-icons-round { font-size: 18px; }
.insight__headtext { flex: 1; min-width: 0; }
.insight__problem { font: 700 14.5px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.insight__sub { margin-top: 3px; font: 400 13px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }
.insight__chev { flex: 0 0 auto; color: var(--a2-color-neutral-400); transition: transform 160ms ease; }
.insight__chev .material-icons-round { font-size: 20px; }
.insight.is-open .insight__chev { transform: rotate(180deg); }

.insight__body { display: none; padding: 0 14px 14px 56px; }
.insight.is-open .insight__body { display: block; }
.insight__detail { font: 400 13.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-700); margin: 0 0 12px; }
.insight__detail b { color: var(--a2-color-neutral-950); font-weight: 700; }

.actions { display: flex; flex-direction: column; gap: 8px; }
.action { display: flex; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid var(--a2-color-neutral-70); border-radius: var(--a2-radius-2); background: var(--a2-background-color-default); transition: border-color 120ms ease, background 120ms ease; }
.action:hover { border-color: var(--a2-color-neutral-200); background: var(--a2-background-color-secondary); }
.action__txt { flex: 1; min-width: 0; }
.action__title { font: 700 13px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.action__why { margin-top: 2px; font: 400 12px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.action__impact { flex: 0 0 auto; font: 700 12px/1 var(--a2-font-family-base); color: var(--a2-color-green-600); white-space: nowrap; }
.action__cta { flex: 0 0 auto; }

.insight__ask { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--a2-color-neutral-100); }
.insight__ask-q { display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1.3 var(--a2-font-family-base); color: var(--a2-foreground-color-primary); background: var(--a2-background-color-primary-faint); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; text-align: left; }
.insight__ask-q:hover { background: var(--a2-background-color-primary-faint-hover); }
.insight__ask-q .material-icons-round { font-size: 16px; }

/* ════════════════════════ Atlas inline Q&A ════════════════════════ */
.atlas { background: #fff; border: 1px solid var(--a2-border-color-subdued); border-radius: var(--ow-card-radius); display: flex; flex-direction: column; }
.atlas__thread { padding: 16px 18px 6px; display: flex; flex-direction: column; gap: 16px; max-height: 460px; overflow: auto; }
.msg { display: flex; gap: 11px; }
.msg--user { flex-direction: row-reverse; }
.msg__av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--a2-font-family-base); }
.msg__av--atlas { background: linear-gradient(150deg, #2f7bff, #1c5fe0); color: #fff; }
.msg__av--atlas svg { width: 17px; height: 17px; }
.msg__av--user { background: var(--a2-color-blue-grey-100); color: var(--a2-color-blue-grey-700); }
.msg__bubble { max-width: 86%; }
.msg--user .msg__bubble { background: var(--a2-background-color-primary); color: var(--a2-foreground-color-on-primary); border-radius: 14px 14px 4px 14px; padding: 10px 14px; font: 400 14px/1.45 var(--a2-font-family-base); }
.msg--atlas .msg__bubble { color: var(--a2-color-neutral-800); }
.msg__text { font: 400 14px/1.55 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.msg__text b { font-weight: 700; color: var(--a2-color-neutral-950); }
.msg__text + .msg__text { margin-top: 9px; }

/* inline comparison chart inside an Atlas message */
.cmp { margin: 12px 0 4px; border: 1px solid var(--a2-color-neutral-70); border-radius: var(--a2-radius-3); padding: 13px 14px; background: var(--a2-background-color-secondary); }
.cmp__title { font: 700 11.5px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin-bottom: 12px; }
.cmp__row { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: 10px; margin-bottom: 10px; }
.cmp__row:last-child { margin-bottom: 0; }
.cmp__lbl { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1.1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.cmp__lbl .tagdot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.cmp__track { height: 10px; border-radius: 999px; background: var(--a2-color-neutral-60); overflow: hidden; display: block; }
.cmp__fill { height: 100%; border-radius: 999px; display: block; }
.cmp__val { font: 800 14px/1 var(--a2-font-family-base); text-align: right; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.cmp__note { margin-top: 11px; font: 400 12.5px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }

.atlas__reasons { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.atlas__reasons li { display: flex; gap: 9px; font: 400 13.5px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.atlas__reasons li b { color: var(--a2-color-neutral-950); font-weight: 700; }
.atlas__reasons .rk { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--a2-color-blue-grey-100); color: var(--a2-color-blue-grey-700); font: 700 11px/18px var(--a2-font-family-base); text-align: center; }

.atlas__suggest { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.suggest-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.suggest-chip:hover { border-color: var(--a2-border-color-primary); color: var(--a2-foreground-color-primary); }
.suggest-chip .material-icons-round { font-size: 15px; }

.atlas__composer { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--a2-color-neutral-70); }
.atlas__input { flex: 1; height: 40px; border: 1px solid var(--a2-color-neutral-100); border-radius: 999px; padding: 0 16px; font: 400 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900); background: #fff; }
.atlas__input::placeholder { color: var(--a2-color-neutral-400); }
.atlas__input:focus-visible { outline: var(--a2-focus-ring-width) solid var(--a2-focus-ring-color); outline-offset: 1px; border-color: transparent; }
.atlas__send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--a2-background-color-primary); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.atlas__send:hover { background: var(--a2-background-color-primary-hover); }
.atlas__send:disabled { background: var(--a2-color-neutral-50); color: var(--a2-color-neutral-300); cursor: not-allowed; }
.atlas__send .material-icons-round { font-size: 20px; }

.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--a2-color-neutral-300); animation: tdot 1s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ════════════════════════ Delegate composer ════════════════════════ */
.delegate { background: #fff; border: 1px solid var(--a2-border-color-subdued); border-radius: var(--ow-card-radius); }
.delegate__head { display: flex; align-items: center; gap: 9px; padding: 16px 18px 10px; }
.delegate__head .material-icons-round { font-size: 19px; color: var(--a2-color-neutral-500); }
.delegate__title { font-family: var(--a2-font-family-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--a2-color-neutral-950); }
.delegate__from { margin-left: auto; font: 600 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); display: inline-flex; align-items: center; gap: 5px; }
.delegate__body { padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font: 700 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.field__outcome { width: 100%; resize: none; border: 1px solid var(--a2-color-neutral-100); border-radius: var(--a2-radius-2); padding: 11px 13px; font: 600 15px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-950); background: #fff; min-height: 58px; }
.field__outcome:focus-visible { outline: var(--a2-focus-ring-width) solid var(--a2-focus-ring-color); outline-offset: 1px; border-color: transparent; }

.assignee-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.assignee { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 999px; padding: 5px 14px 5px 6px; cursor: pointer; }
.assignee:hover { border-color: var(--a2-border-color-primary); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px/1 var(--a2-font-family-base); color: #fff; flex: 0 0 auto; }
.assignee__meta { display: flex; flex-direction: column; gap: 1px; }
.assignee__name { font: 700 13px/1.1 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.assignee__role { font: 400 11.5px/1.1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.assignee__chev { color: var(--a2-color-neutral-400); display: inline-flex; }
.assignee__chev .material-icons-round { font-size: 18px; }

.due { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.due .material-icons-round { font-size: 16px; color: var(--a2-color-neutral-500); }

.delegate__context { display: flex; align-items: center; gap: 8px; font: 600 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-600); background: var(--a2-background-color-secondary); border-radius: var(--a2-radius-2); padding: 9px 11px; }
.delegate__context .material-icons-round { font-size: 15px; color: var(--a2-color-blue-600); flex: 0 0 auto; }
.delegate__context b { color: var(--a2-color-neutral-900); font-weight: 700; }
.delegate__context .x { margin-left: auto; color: var(--a2-color-neutral-400); cursor: pointer; display: inline-flex; }
.delegate__context .x .material-icons-round { font-size: 16px; color: inherit; }

.delegate__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.delegate__hint { font: 400 12px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }

/* ════════════════════════ Monitoring ════════════════════════ */
.watch__list { display: flex; flex-direction: column; }
.watch-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--a2-color-neutral-70); }
.watch-row:first-child { border-top: 0; }
.watch-row__meta { flex: 1; min-width: 0; }
.watch-row__name { font: 700 13px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.watch-row__name span { font-weight: 400; color: var(--a2-color-neutral-500); }
.watch-row__task { margin-top: 2px; font: 400 13px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-row__status { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.watch-row__due { font: 700 11.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); white-space: nowrap; }
.statusbadge { font: 700 10.5px/1 var(--a2-font-family-base); padding: 4px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.statusbadge--progress { background: var(--a2-background-color-primary-faint); color: var(--a2-foreground-color-primary); }
.statusbadge--todo { background: var(--a2-color-neutral-30); color: var(--a2-color-neutral-600); }
.statusbadge--done { background: var(--a2-background-color-success-faint); color: var(--a2-color-green-700); }
.watch-row__remind { flex: 0 0 auto; }
.watch-row.is-new { animation: rowin 420ms var(--a2-transition-ease); }
@keyframes rowin { from { opacity: 0; transform: translateY(-6px); background: var(--a2-background-color-primary-faint); } to { opacity: 1; transform: none; } }

/* toast */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--a2-color-neutral-950); color: #fff; font: 600 13.5px/1 var(--a2-font-family-base); padding: 12px 18px; border-radius: var(--a2-radius-2); box-shadow: var(--a2-shadow-large); display: inline-flex; align-items: center; gap: 9px; opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; z-index: 80; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .material-icons-round { font-size: 17px; color: var(--a2-color-green-400); }

/* ════════════════════════ Metric deep-dive ════════════════════════ */
.deepdive { display: none; }
.deepdive.is-open { display: block; }
.ow.dd-open .ow__inner { display: none; }
.dd { max-width: 1180px; margin: 0 auto; padding: 22px 28px 64px; }
.dd__back { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 var(--a2-font-family-base); color: var(--a2-foreground-color-primary); background: none; border: 0; cursor: pointer; padding: 6px 8px 6px 4px; border-radius: var(--a2-radius-2); margin-bottom: 16px; }
.dd__back:hover { background: var(--a2-background-color-primary-faint); }
.dd__back .material-icons-round { font-size: 18px; }

.dd__hero { display: flex; align-items: flex-start; gap: 18px; background: #fff; border: 1px solid var(--a2-border-color-subdued); border-radius: var(--ow-card-radius); padding: 20px 22px; position: relative; overflow: hidden; }
.dd__hero::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--status); }
.dd__hero-main { flex: 1; min-width: 0; }
.dd__hero-name { font: 700 13px/1 var(--a2-font-family-base); letter-spacing: .04em; text-transform: uppercase; color: var(--a2-color-neutral-500); }
.dd__hero-val { margin: 8px 0 0; display: flex; align-items: baseline; gap: 12px; }
.dd__hero-num { font: 800 42px/0.95 var(--a2-font-family-base); letter-spacing: -0.02em; color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.dd__atlas-say { flex: 1.1; display: flex; gap: 11px; align-items: flex-start; background: var(--a2-background-color-secondary); border-radius: var(--a2-radius-3); padding: 13px 15px; }
.dd__atlas-say .msg__av { width: 28px; height: 28px; }
.dd__atlas-say p { margin: 0; font: 400 13.5px/1.5 var(--a2-font-family-base); color: var(--a2-color-neutral-700); }
.dd__atlas-say p b { color: var(--a2-color-neutral-950); font-weight: 700; }

.dd__cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.dd-card { background: #fff; border: 1px solid var(--a2-border-color-subdued); border-radius: var(--ow-card-radius); padding: 18px 20px; }
.dd-card__title { display: flex; align-items: center; gap: 8px; font-family: var(--a2-font-family-display); font-weight: 700; font-size: 16px; color: var(--a2-color-neutral-950); margin: 0 0 4px; }
.dd-card__title .material-icons-round { font-size: 18px; color: var(--a2-color-neutral-500); }
.dd-card__sub { font: 400 12.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); margin: 0 0 16px; }

.driver { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; padding: 13px 0; border-top: 1px solid var(--a2-color-neutral-70); }
.driver:first-of-type { border-top: 0; padding-top: 4px; }
.driver__rk { width: 22px; height: 22px; border-radius: 50%; background: var(--a2-color-neutral-100); color: var(--a2-color-neutral-700); font: 800 12px/22px var(--a2-font-family-base); text-align: center; }
.driver__main { min-width: 0; }
.driver__name { font: 700 13.5px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.driver__why { margin-top: 3px; font: 400 12.5px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.driver__track { margin-top: 8px; height: 6px; border-radius: 999px; background: var(--a2-color-neutral-60); overflow: hidden; display: block; }
.driver__fill { height: 100%; border-radius: 999px; background: var(--a2-color-red-500, #f0432a); display: block; }
.driver__impact { font: 800 15px/1 var(--a2-font-family-base); color: var(--a2-color-red-600); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

.gauge { margin: 6px 0 4px; }
.gauge__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.gauge__now { font: 800 26px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-950); font-variant-numeric: tabular-nums; }
.gauge__goal { font: 700 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.gauge__track { position: relative; height: 12px; border-radius: 999px; background: var(--a2-color-neutral-60); overflow: visible; }
.gauge__fill { height: 100%; border-radius: 999px; background: var(--a2-color-yellow-500); display: block; }
.gauge__marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--a2-color-neutral-700); }
.gauge__marker::after { content: "Goal"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font: 700 9.5px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-600); white-space: nowrap; }
.gauge__legend { margin-top: 14px; font: 400 12.5px/1.45 var(--a2-font-family-base); color: var(--a2-color-neutral-600); }

.spark { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 14px; }
.spark__bar { flex: 1; background: var(--a2-color-blue-grey-100); border-radius: 3px 3px 0 0; min-height: 4px; }
.spark__bar.is-now { background: var(--a2-color-yellow-500); }

.soln { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--a2-color-neutral-70); }
.soln:first-of-type { border-top: 0; padding-top: 2px; }
.soln__ico { width: 30px; height: 30px; border-radius: 8px; background: var(--a2-background-color-success-faint); color: var(--a2-color-green-700); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.soln__ico .material-icons-round { font-size: 17px; }
.soln__ico--sug { background: var(--a2-background-color-primary-faint); color: var(--a2-foreground-color-primary); }
.soln__main { flex: 1; min-width: 0; }
.soln__name { font: 700 13px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-900); }
.soln__meta { margin-top: 2px; font: 400 12px/1.35 var(--a2-font-family-base); color: var(--a2-color-neutral-500); }
.soln__impact { font: 700 12.5px/1 var(--a2-font-family-base); color: var(--a2-color-green-600); white-space: nowrap; }

/* ════════════════════════ Density variant ════════════════════════ */
.ow[data-density="compact"] .health__grid { gap: 10px; }
.ow[data-density="compact"] .metric { padding: 12px 12px 11px; gap: 9px; }
.ow[data-density="compact"] .metric__value { font-size: 26px; }
.ow[data-density="compact"] .ow-grid { gap: 18px; }
.ow[data-density="compact"] .ow-col { gap: 18px; }

/* ════════════════════════ Responsive ════════════════════════ */
@media (max-width: 1180px) {
  .ow-grid { grid-template-columns: 1fr; }
  .ow-col--insights { order: 2; }
  .ow-col--health { order: 1; }
  .ow[data-layout="metrics-left"] .ow-col--insights { order: 2; }
  .ow[data-layout="metrics-left"] .ow-col--health { order: 1; }
  .dd__cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .health__grid { grid-template-columns: 1fr 1fr; }
  .ow-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .ow-pulse { width: 100%; }
}
@media (max-width: 520px) {
  .health__grid { grid-template-columns: 1fr; }
}

/* ════════════════════════ Full-screen Atlas conversation ════════════════════════ */
.afs {
  position: fixed; inset: 0; z-index: 90;
  background: var(--a2-background-color-default);
  display: none; flex-direction: column;
  font-family: var(--a2-font-family-base);
}
.afs.is-open { display: flex; }

.afs__top {
  flex: 0 0 auto; height: 60px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 18px; border-bottom: 1px solid var(--a2-color-neutral-80);
}
.afs__top-l { display: inline-flex; justify-self: start; }
.afs__top-r { display: inline-flex; gap: 4px; justify-self: end; }
.afs__title { justify-self: center; font: 600 17px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-950); max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.afs__icon {
  width: 40px; height: 40px; border-radius: var(--a2-radius-2); border: 0; background: transparent;
  color: var(--a2-color-neutral-600); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.afs__icon:hover { background: var(--a2-background-color-secondary); color: var(--a2-color-neutral-900); }
.afs__icon svg { width: 22px; height: 22px; display: block; }

.afs__body { flex: 1; min-height: 0; display: flex; }

/* left history rail */
.afs__nav {
  flex: 0 0 272px; width: 272px; border-right: 1px solid var(--a2-color-neutral-80);
  display: flex; flex-direction: column; padding: 16px 14px; gap: 16px; overflow: hidden;
  transition: margin-left 200ms var(--a2-transition-ease);
}
.afs.is-nav-hidden .afs__nav { margin-left: -272px; }
.afs__newchat {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; border: 1px solid var(--a2-color-neutral-100); border-radius: var(--a2-radius-3);
  background: #fff; cursor: pointer; font: 600 14px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-900);
}
.afs__newchat:hover { background: var(--a2-background-color-secondary); }
.afs__newchat svg { width: 17px; height: 17px; }
.afs__hist-label { font: 700 11px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-400); padding: 0 8px; }
.afs__history { display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.afs__hist {
  text-align: left; border: 0; background: transparent; cursor: pointer;
  font: 500 14px/1.3 var(--a2-font-family-base); color: var(--a2-color-neutral-700);
  padding: 9px 10px; border-radius: var(--a2-radius-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.afs__hist:hover { background: var(--a2-background-color-secondary); color: var(--a2-color-neutral-900); }
.afs__hist.is-active { background: var(--a2-background-color-strong); color: var(--a2-color-neutral-950); font-weight: 600; }

/* center conversation */
.afs__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.afs__thread { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; }
.afs__thread-inner { width: 100%; min-width: 360px; max-width: 768px; padding: 30px 24px 24px; display: flex; flex-direction: column; gap: 22px; }

.amsg { display: flex; flex-direction: column; gap: 6px; }
.amsg--user { align-items: flex-end; }
.amsg--user .amsg__bubble { background: var(--a2-background-color-strong); color: var(--a2-color-neutral-950); border-radius: 16px; padding: 12px 16px; font: 400 15px/1.5 var(--a2-font-family-base); max-width: 86%; }
.amsg--atlas { align-items: flex-start; }
.amsg__who { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.amsg__who .msg__av { width: 24px; height: 24px; }
.amsg__prose { font: 400 15px/1.65 var(--a2-font-family-base); color: var(--a2-color-neutral-800); }
.amsg__prose p { margin: 0 0 13px; }
.amsg__prose p:last-child { margin-bottom: 0; }
.amsg__prose b { font-weight: 700; color: var(--a2-color-neutral-950); }
.amsg__prose .inlinelink { color: var(--a2-foreground-color-primary); font-weight: 600; cursor: pointer; }
.amsg__prose .inlinelink:hover { text-decoration: underline; }
.amsg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* composer */
.afs__composer-wrap { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding: 8px 24px 14px; }
.afs__composer { width: 100%; min-width: 360px; max-width: 768px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--a2-color-neutral-100); border-radius: 26px; padding: 8px 10px 8px 14px; box-shadow: var(--a2-shadow-xsmall); }
.afs__c-plus { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--a2-color-neutral-700); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.afs__c-plus:hover { background: var(--a2-background-color-secondary); }
.afs__c-plus svg { width: 20px; height: 20px; }
.afs__c-input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 15px/1.4 var(--a2-font-family-base); color: var(--a2-color-neutral-900); height: 32px; }
.afs__c-input::placeholder { color: var(--a2-color-neutral-400); }
.afs__c-mic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--a2-color-neutral-600); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.afs__c-mic:hover { background: var(--a2-background-color-secondary); }
.afs__c-mic svg { width: 19px; height: 19px; }
.afs__c-voice { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--a2-color-neutral-950); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 120ms ease; }
.afs__c-voice:hover { background: var(--a2-color-neutral-800); }
.afs__c-voice svg { width: 19px; height: 19px; }
.afs__disclaimer { margin-top: 10px; font: 400 12px/1 var(--a2-font-family-base); color: var(--a2-color-neutral-400); text-align: center; }

/* right panel — opens at 560, drag wider, never below 560 */
.afs__panel { position: relative; flex: 0 0 auto; width: 560px; min-width: 560px; border-left: 1px solid var(--a2-color-neutral-80); display: flex; flex-direction: column; background: #fff; }
.afs.is-panel-hidden .afs__panel { display: none; }
.afs__resize { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 2; }
.afs__resize::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background 120ms ease; }
.afs__resize:hover::after, .afs.is-resizing .afs__resize::after { background: var(--a2-border-color-primary); }
.afs__panel-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px 12px; }
.afs__panel-name { font: 700 14px/1.2 var(--a2-font-family-base); color: var(--a2-color-neutral-950); }
.afs__panel-close { width: 30px; height: 30px; border: 0; background: transparent; color: var(--a2-color-neutral-500); cursor: pointer; border-radius: var(--a2-radius-2); display: inline-flex; align-items: center; justify-content: center; }
.afs__panel-close:hover { background: var(--a2-background-color-secondary); color: var(--a2-color-neutral-900); }
.afs__panel-close svg { width: 18px; height: 18px; }
.afs__panel-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 20px 24px; }
.afs__panel-lead { font: 400 14px/1.6 var(--a2-font-family-base); color: var(--a2-color-neutral-700); margin: 0 0 18px; }
.afs__panel-lead b { color: var(--a2-color-neutral-950); font-weight: 700; }
.afs-block { border: 1px solid var(--a2-color-neutral-70); border-radius: var(--a2-radius-3); padding: 15px 16px; margin-bottom: 14px; }
.afs-block__title { font: 700 11.5px/1 var(--a2-font-family-base); letter-spacing: .05em; text-transform: uppercase; color: var(--a2-color-neutral-500); margin-bottom: 14px; }

@media (max-width: 1100px) {
  .afs__panel { width: 460px; min-width: 460px; }
}
@media (max-width: 860px) {
  .afs__nav { flex-basis: 240px; width: 240px; }
  .afs.is-nav-hidden .afs__nav { margin-left: -240px; }
  .afs__panel { display: none; }
}