/*
 * Olympus command centre.
 *
 * Palette and typography come from the marketing site so the product and the
 * page that sells it look like one thing. The tokens below are asserted against
 * apps/web/src/theme.ts by a test; changing one here without changing it there
 * fails the build rather than drifting quietly.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/dm-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

:root {
  --paper: #f3f6f2;
  --paper-soft: #f8faf7;
  --ink: #091720;
  --navy: #07151d;
  --navy-2: #0b202a;
  --mint: #65ebce;
  --mint-2: #1cc7a5;
  --coral: #ff765f;
  --muted: #5d6b70;
  --line: #dbe2df;
  --white: #ffffff;
  --shadow: 0 30px 80px rgba(7, 21, 29, 0.12);
  --shadow-sm: 0 2px 10px rgba(7, 21, 29, 0.06);
  --radius: 18px;
  --radius-sm: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--mint);
  color: var(--navy);
}

/* A visible focus ring on the coral, matching the site. Never removed: keyboard
   navigation is the only way some people use this at all. */
:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

.hidden {
  display: none !important;
}

.mono {
  font-family: "DM Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
  letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   Sign in
   -------------------------------------------------------------------------- */

.signin {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.signin-card {
  width: min(420px, 100%);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px;
}

.signin-card h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.signin-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}

.signin-brand h1 span,
.signin-brand h1 small {
  display: block;
}

.signin-brand h1 small {
  /* Mint is a background accent; its darker ink counterpart remains readable on white. */
  color: #0b6b58;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.signin-card p.lede {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
}

.field {
  display: block;
  margin-bottom: 16px;
}

.field span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--navy);
}

.field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  transition: border-color 0.15s ease;
}

.field input:hover {
  border-color: #c6d1cb;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.15s ease;
}

.button:hover:not(:disabled) {
  background: var(--navy-2);
  transform: translateY(-1px);
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.button.wide {
  width: 100%;
}

.button.ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line);
}

.button.ghost:hover:not(:disabled) {
  background: var(--paper-soft);
}

.notice {
  margin-top: 14px;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
}

.notice.error {
  border-color: rgba(255, 118, 95, 0.45);
  background: rgba(255, 118, 95, 0.08);
  color: #8c2f1e;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: 268px 1fr;
  grid-template-rows: 72px 1fr;
  height: 100dvh;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  background: var(--navy);
  color: var(--white);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-copy,
.brand-name,
.brand-product {
  display: block;
}

.brand-copy {
  line-height: 1.02;
}

.brand-name {
  font-size: 14px;
}

.brand-product {
  color: var(--mint);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/*
 * The mark is an image now, not a letter in a coloured chip.
 *
 * The chip was a placeholder that read as one, and it said nothing the word "Olympus" beside it
 * did not already say. The SVG carries its own gradient, so the rule that used to paint the
 * background is gone rather than left to fight with it.
 *
 * The other `.brand-mark` rules below resize it — `.large`, `.huge`, the one inside a message.
 * They set width and height, which an `img` honours, so they need no change.
 */
.brand-mark {
  width: 30px;
  height: 30px;
  display: block;
  flex: none;
}

.topbar .spacer {
  flex: 1;
}

.interaction-mode-picker {
  display: inline-flex;
  flex: none;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.interaction-mode-picker label {
  position: relative;
  cursor: pointer;
}

.interaction-mode-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.interaction-mode-picker span {
  display: block;
  padding: 5px 9px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.interaction-mode-picker input:checked + span {
  background: var(--mint);
  color: var(--navy);
}

.interaction-mode-picker input:focus-visible + span {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
}

.topbar button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.topbar button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.topbar button.top-primary {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--navy);
  font-weight: 700;
}

.topbar button.top-primary:hover {
  background: var(--mint-2);
}

.workspace-menu {
  position: relative;
}

.workspace-menu summary {
  list-style: none;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.workspace-unread-count:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.workspace-menu summary::-webkit-details-marker {
  display: none;
}

.workspace-menu[open] summary,
.workspace-menu summary:hover {
  background: rgba(255, 255, 255, 0.16);
}

.workspace-menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(260px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.topbar .workspace-menu-panel button {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--navy);
  padding: 10px 12px;
  text-align: left;
}

.topbar .workspace-menu-panel button#open-reports {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.topbar .workspace-menu-panel #reports-unread-count {
  background: var(--paper-soft);
}

.topbar .workspace-menu-panel button:hover {
  background: var(--paper-soft);
}

.workspace-menu-divider {
  display: block;
  height: 1px;
  margin: 6px 4px;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   Employee rail
   -------------------------------------------------------------------------- */

.rail {
  background: var(--white);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 14px 12px 24px;
}

.rail h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 10px 8px 8px;
}

.employee {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease;
}

.employee:hover {
  background: var(--paper-soft);
}

.employee[aria-pressed="true"] {
  background: var(--paper-soft);
  border-color: var(--line);
}

.employee img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  /* The accent ring is what carries each employee's identity at this size, and
     it is set per element from the shared theme rather than hard-coded here. */
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent, var(--mint));
  flex: 0 0 auto;
}

.employee .who {
  min-width: 0;
}

.employee .who strong {
  display: block;
  font-size: 14px;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.employee .who small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail .thread {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px 7px 62px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  border-radius: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail .thread:hover {
  background: var(--paper-soft);
  color: var(--ink);
}

.rail .thread[aria-current="true"] {
  color: var(--navy);
  font-weight: 600;
  background: var(--paper-soft);
}

/* --------------------------------------------------------------------------
   Conversation
   -------------------------------------------------------------------------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/*
 * The private conversation is one composition: presenter on the left, thread
 * on the right. The aside is also the permanent mount point for a future
 * same-session LemonSlice/LiveKit video track. Until that reviewed provider
 * path is configured it displays the local WebGL/audio-reactive portrait, so a
 * missing key never leaves a black rectangle or removes the conversation.
 */
.conversation-workspace {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.conversation-workspace.has-private-avatar {
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
}

.conversation-thread {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
}

.private-avatar-stage {
  --accent: var(--mint);
  min-width: 0;
  min-height: 0;
  padding: clamp(16px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 42%),
    var(--white);
}

.private-avatar-portrait {
  position: relative;
  isolation: isolate;
  width: min(100%, 286px);
  max-height: min(57vh, 470px);
  aspect-ratio: 2 / 3;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: calc(var(--radius) + 8px);
  background: var(--navy);
  box-shadow: 0 24px 58px rgba(7, 21, 29, 0.16);
}

.private-avatar-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transform: translate3d(0, var(--portrait-lift, 0), 0)
    rotate(var(--portrait-tilt, 0deg)) scale(var(--portrait-scale, 1));
  transform-origin: 50% 72%;
  transition: transform 160ms ease-out, filter 220ms ease-out;
}

.private-avatar-video {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: var(--navy);
}

.private-avatar-audio {
  display: none;
}

.private-avatar-copy {
  width: min(100%, 286px);
  margin-inline: auto;
  text-align: center;
}

.private-avatar-copy strong {
  display: block;
  color: var(--navy);
  font-size: 18px;
  letter-spacing: -0.02em;
}

.private-avatar-copy span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.private-avatar-mode {
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.35;
}

.avatar-live-toggle {
  margin: 10px auto 0;
}

.conversation-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.conversation-head img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--accent, var(--mint));
}

.conversation-head h1 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.conversation-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.conversation-action-menu {
  position: relative;
  margin-left: auto;
}

.conversation-stop-action {
  margin-left: auto;
}

.conversation-stop-action + .conversation-action-menu {
  margin-left: 0;
}

.conversation-action-menu > summary {
  list-style: none;
}

.conversation-action-menu > summary::-webkit-details-marker {
  display: none;
}

.conversation-action-menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 6px;
  min-width: 260px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow);
}

.conversation-action-menu-panel .button {
  justify-content: flex-start;
  width: 100%;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.empty {
  margin: auto;
  max-width: 460px;
  text-align: center;
  color: var(--muted);
}

.empty img {
  width: 132px;
  height: 198px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.empty h2 {
  color: var(--navy);
  font-size: 19px;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.msg {
  display: flex;
  gap: 12px;
  max-width: min(920px, 100%);
}

.msg.from-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.msg img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--accent, var(--mint));
}

.msg .initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.bubble {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 16px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.msg.from-user .bubble {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.bubble p {
  margin: 0 0 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble p:last-child {
  margin-bottom: 0;
}

.executive-update {
  width: min(1120px, 100%);
  /* This card lives in the vertically scrolling `.messages` flex column.
     `overflow: hidden` makes its automatic flex minimum zero, so a long
     council used to shrink every report down to its coloured top border.
     Keep the natural, content-driven height and let the parent scroll. */
  flex-shrink: 0;
  align-self: center;
  display: grid;
  grid-template-columns: minmax(280px, 34%) 1fr;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--accent, var(--mint));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.speaking-portrait {
  position: relative;
  isolation: isolate;
  min-height: 375px;
  overflow: hidden;
  background: var(--navy);
}

.speaking-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transform: translate3d(0, var(--portrait-lift, 0), 0)
    rotate(var(--portrait-tilt, 0deg)) scale(var(--portrait-scale, 1));
  transform-origin: 50% 68%;
  transition: transform 160ms ease-out, filter 220ms ease-out;
}

.executive-update-copy {
  min-width: 0;
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.executive-update-copy p {
  margin: 0 0 14px;
  font-size: clamp(16px, 2vw, 21px);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bulletin-video {
  width: min(720px, 100%);
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 18px;
  background: var(--navy);
  box-shadow: 0 18px 50px rgb(7 22 29 / 14%);
}

.brief-kicker {
  margin-bottom: 18px;
  color: var(--muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brief-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brief-group-head {
  width: min(1120px, 100%);
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--mint);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

.brief-group-label {
  display: grid;
  gap: 2px;
}

.brief-group-head .report-meta {
  margin: 0;
}

.consolidated-update {
  grid-template-columns: 120px 1fr;
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
  border-top-color: var(--accent, var(--mint));
}

.consolidated-update .brand-mark {
  width: 72px;
  height: 72px;
  align-self: center;
  justify-self: center;
}

.consolidated-update .brief-kicker,
.consolidated-update .provenance {
  color: var(--muted);
}

@media (max-width: 720px) {
  .brief-group-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .executive-update,
  .consolidated-update {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .speaking-portrait {
    min-height: 220px;
    max-height: 300px;
  }

  .consolidated-update .brand-mark {
    margin-top: 28px;
  }
}

/*
 * BUB/CUB brief player — fullscreen-capable 16:9 presentation.
 *
 * Layout: left slide content, right photorealistic portrait, persistent dark
 * subtitle bar along the bottom, compact controls overlay. The stage enforces
 * 16:9 aspect ratio; the whole overlay can go native fullscreen.
 */

.brief-player-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
}

.brief-player-frame {
  position: relative;
  width: min(1280px, 96vw);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}

.brief-player-stage {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 38%);
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border-top: 4px solid var(--accent, var(--mint));
  background: var(--white);
}

.brief-player-slide {
  min-width: 0;
  padding: clamp(20px, 3vw, 48px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.brief-player-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.brief-player-kicker {
  color: var(--muted);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.brief-player-slide-title {
  margin: 0 0 clamp(18px, 3vw, 34px);
  color: var(--navy);
  font-size: clamp(24px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.brief-player-bullets {
  margin: 0;
  padding: 0 0 0 1.4em;
  flex: 0 0 auto;
  overflow-y: visible;
  list-style: disc;
}

.brief-player-bullets li {
  margin: 0 0 10px;
  font-size: clamp(14px, 1.6vw, 19px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.brief-player-portrait {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy);
}

.brief-player-portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transform: translate3d(0, var(--portrait-lift, 0), 0)
    rotate(var(--portrait-tilt, 0deg)) scale(var(--portrait-scale, 1));
  transform-origin: 50% 72%;
  transition: transform 160ms ease-out, filter 220ms ease-out;
}

.brief-player-video {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: var(--navy);
}

/*
 * Tier A moves the portrait as one piece over a same-origin WebGL aura. Mini
 * mode may add the local Canvas 2D mouth overlay between the portrait and the
 * signal. That overlay is amplitude-reactive, not phoneme-aligned lip sync.
 */
.avatar-motion-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(0.22 + var(--motion-glow, 0));
  transition: opacity 220ms ease-out;
}

.avatar-viseme-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translate3d(0, var(--portrait-lift, 0), 0)
    rotate(var(--portrait-tilt, 0deg)) scale(var(--portrait-scale, 1));
  transform-origin: 50% 72%;
  transition: transform 160ms ease-out;
}

.speaking-portrait .avatar-viseme-layer {
  transform-origin: 50% 68%;
}

.avatar-motion-signal {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
  padding: 7px 9px;
  opacity: 0;
  border: 1px solid color-mix(in srgb, var(--accent, var(--mint)) 46%, transparent);
  border-radius: 999px;
  background: rgba(5, 24, 30, 0.76);
  backdrop-filter: blur(8px);
  transition: opacity 180ms ease-out;
}

.avatar-motion-signal i {
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: var(--accent, var(--mint));
  transform: scaleY(var(--signal-scale, 0.18));
  transform-origin: center bottom;
  transition: transform 70ms linear;
}

[data-motion-state="playing"] .avatar-motion-signal,
[data-motion-state="loading"] .avatar-motion-signal {
  opacity: 1;
}

[data-motion-state="playing"] img {
  filter: saturate(1.035) contrast(1.015);
}

[data-motion-state="loading"] .avatar-motion-signal i {
  animation: avatar-signal-wait 720ms ease-in-out infinite alternate;
}

[data-motion-state="loading"] .avatar-motion-signal i:nth-child(2),
[data-motion-state="loading"] .avatar-motion-signal i:nth-child(4) {
  animation-delay: 160ms;
}

@keyframes avatar-signal-wait {
  from { transform: scaleY(0.18); }
  to { transform: scaleY(0.72); }
}

.brief-player-subtitle {
  padding: 10px clamp(16px, 3vw, 48px);
  background: var(--navy);
  color: var(--white);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.45;
  min-height: 2.4em;
}

.brief-player-manual-hint,
.brief-player-narration-error {
  display: inline-block;
  margin-inline-start: 0.75rem;
  color: var(--mint);
  font-size: 0.82em;
}

.brief-player-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px clamp(12px, 2vw, 24px);
  background: rgba(0, 0, 0, 0.55);
}

.brief-player-controls .button {
  font-size: 13px;
  padding: 5px 12px;
}

.brief-player-mode-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 0;
  color: var(--white);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
}

.brief-player-mode-label select {
  min-height: 31px;
  padding: 4px 24px 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
}

.brief-player-controls .button.ghost {
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  border-color: rgba(255, 255, 255, 0.5);
}

.brief-player-controls .button.ghost:hover:not(:disabled) {
  background: var(--white);
}

.brief-player-controls .button:disabled {
  opacity: 0.55;
}

.brief-player-voice-availability {
  flex: 1 0 100%;
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  font-size: 12px;
  line-height: 1.4;
}

.brief-player-report {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  padding: clamp(16px, 3vw, 40px);
  background: var(--white);
  overflow-y: auto;
}

.brief-player-report p {
  margin: 0 0 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.brief-player-frame.show-report .brief-player-stage {
  display: none;
}

.brief-player-frame.show-report .brief-player-subtitle {
  display: none;
}

.brief-player-frame.show-report .brief-player-report {
  display: block;
}

/* Fullscreen state — let the stage fill the screen */
.brief-player-overlay.brief-player-fullscreen .brief-player-frame,
.brief-player-frame:fullscreen {
  width: 100vw;
  max-height: 100vh;
  border-radius: 0;
}

/* Responsive: stack vertically on narrow viewports */
@media (max-width: 720px) {
  .brief-player-frame {
    width: 100%;
    max-height: 100vh;
  }

  .brief-player-stage {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .brief-player-portrait {
    min-height: 200px;
    max-height: 35vh;
  }
}

/* Reduced motion: stop auto-advance animation cue */
@media (prefers-reduced-motion: reduce) {
  .brief-player-stage,
  .brief-player-subtitle {
    transition: none;
  }

  .speaking-portrait img,
  .brief-player-portrait img,
  .private-avatar-portrait img {
    transform: none !important;
    transition: none;
  }

  .avatar-motion-field,
  .avatar-viseme-layer,
  .avatar-motion-signal {
    display: none;
  }

  .private-avatar-stage {
    background: var(--white);
  }
}

/*
 * Provenance line under every employee message.
 *
 * Not decoration. Model output is untrusted until validated, and a reader
 * looking at a paragraph has no other way to tell which profile version and
 * which provider stand behind it.
 */
.provenance {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 11px;
}

.tag.untrusted {
  border-color: rgba(255, 118, 95, 0.4);
  background: rgba(255, 118, 95, 0.09);
  color: #8c2f1e;
}

.status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}

.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint-2);
  animation: pulse 1.4s ease-in-out infinite;
}

.reference-use {
  display: block;
  border-radius: 14px;
  max-width: min(680px, 92%);
}

.reference-use summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 700;
}

.reference-use-list {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .status .dot { animation: none; opacity: 1; }
  .button:hover:not(:disabled) { transform: none; }
}

.composer {
  border-top: 1px solid var(--line);
  background: var(--white);
  padding: 14px 26px 18px;
}

.composer form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  max-width: 900px;
}

.composer textarea {
  flex: 1;
  resize: none;
  min-height: 48px;
  max-height: 220px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

@media (max-width: 480px) {
  .composer form {
    align-items: center;
  }

  .composer textarea {
    min-height: 100px;
  }

  .composer form .attach,
  .composer form .mic {
    align-self: center;
    min-height: 48px;
  }
}

.composer .hint {
  max-width: 900px;
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(7, 21, 29, 0.45);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 10;
}

.drawer-card {
  width: 80vw;
  max-width: 1080px;
  max-height: 86dvh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.drawer-card.oversight-card {
  width: 90vw;
  max-width: 1280px;
}

@media (max-width: 720px) {
  .drawer-card {
    width: 100%;
  }
}

.drawer-card h2 {
  margin: 0 0 4px;
  color: var(--navy);
  letter-spacing: -0.02em;
}

.drawer-card > p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
}

.cred {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.cred .grow {
  flex: 1;
  min-width: 0;
}

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: var(--paper-soft);
  color: var(--muted);
}

.pill.ok {
  border-color: rgba(28, 199, 165, 0.45);
  background: rgba(28, 199, 165, 0.12);
  color: #0b6b58;
}

.pill.bad {
  border-color: rgba(255, 118, 95, 0.45);
  background: rgba(255, 118, 95, 0.1);
  color: #8c2f1e;
}

.pill.waiting {
  background: rgba(246, 207, 104, 0.22);
  color: var(--navy);
}

.media-readiness-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.media-readiness-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  padding: 14px;
}

.media-readiness-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.media-readiness-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 15px;
}

.media-checks {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.media-check[data-ready="true"] .media-check-mark {
  color: var(--mint-2);
}

.media-check strong,
.media-check small {
  display: block;
}

.media-check strong {
  color: var(--ink);
  font-size: 13px;
}

.media-check small {
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

@media (max-width: 720px) {
  .media-readiness-grid {
    grid-template-columns: 1fr;
  }
}

.drawer-card fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 20px 0 0;
  background: var(--white);
}

#projects fieldset {
  min-width: 0;
}

.drawer-card legend {
  padding: 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.drawer-card .settings-advanced {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 20px 0 0;
  background: var(--white);
}

.settings-advanced summary {
  cursor: pointer;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

.settings-advanced[open] summary { margin-bottom: 14px; }

.baseline-form {
  display: grid;
  gap: 12px;
}

.baseline-form textarea,
.baseline-form input {
  width: 100%;
}

.baseline-actions {
  margin-top: 4px;
}

.baseline-result {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

.baseline-result code {
  overflow-wrap: anywhere;
}

.baseline-result pre {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.baseline-history {
  margin-top: 18px;
}

.baseline-history-row {
  margin-bottom: 8px;
}

.first-party-email-card {
  max-width: 980px;
}

.first-party-email-form {
  display: grid;
  gap: 14px;
}

.first-party-email-form fieldset {
  margin-top: 0;
}

.first-party-email-form textarea,
.first-party-email-form input {
  width: 100%;
}

.first-party-email-form textarea {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  resize: vertical;
}

.first-party-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.first-party-grid.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.proof-hash {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  overflow-wrap: anywhere;
}

.first-party-confirmation {
  align-items: flex-start;
  margin: 8px 0 0;
}

@media (max-width: 720px) {
  .first-party-grid,
  .first-party-grid.two-columns {
    grid-template-columns: 1fr;
  }
}

.row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

/* CSP forbids inline style attributes, so the two spacings the drawers used to
   carry inline live here instead. */
.row-spaced {
  margin-top: 10px;
}

.drawer-close-row {
  margin-top: 22px;
}

.row .field {
  flex: 1;
  margin-bottom: 0;
}

#projects .row .field {
  min-width: 0;
}

@media (max-width: 720px) {
  #projects .row {
    flex-wrap: wrap;
  }

  #projects .row .field {
    flex: 1 1 220px;
  }

  #projects .cred {
    flex-wrap: wrap;
  }

  #projects .cred .grow {
    flex: 1 1 100%;
  }
}

.field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

@media (max-width: 860px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: 72px auto 1fr;
  }
  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 168px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rail h2,
  .rail .thread {
    display: none;
  }
  .employee {
    flex-direction: column;
    width: auto;
    min-width: 78px;
    text-align: center;
  }
  .employee .who small {
    display: none;
  }
  .messages,
  .composer {
    padding-inline: 16px;
  }
}

@media (max-width: 1180px) {
  .conversation-workspace.has-private-avatar {
    grid-template-columns: minmax(190px, 25vw) minmax(0, 1fr);
  }

  .private-avatar-stage {
    padding: 14px;
  }

  .private-avatar-portrait {
    max-height: 43vh;
  }
}

@media (max-width: 720px) {
  .conversation-workspace.has-private-avatar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .private-avatar-stage {
    min-height: 0;
    padding: 10px 16px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    justify-content: start;
    align-items: center;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .private-avatar-portrait {
    width: 64px;
    height: 78px;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 16px;
  }

  .private-avatar-copy {
    width: auto;
    margin: 0;
    text-align: left;
  }

  .private-avatar-copy strong {
    font-size: 15px;
  }

  .private-avatar-mode {
    margin: 5px 0 0;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .conversation-head {
    padding-inline: 16px;
  }

  .conversation-action-menu-panel {
    min-width: min(260px, calc(100vw - 32px));
  }

  .topbar {
    gap: 4px;
    padding-inline: 6px;
  }

  .brand-copy,
  .topbar #open-oversight {
    display: none;
  }

  .topbar > .brand .brand-mark {
    width: 24px;
    height: 24px;
  }

  .topbar button,
  .workspace-menu summary {
    padding-inline: 8px;
    font-size: 12px;
  }

  .venture-picker {
    min-width: 0;
  }

  .venture-picker select {
    width: 68px;
    max-width: 68px;
    padding-inline: 8px;
    font-size: 12px;
  }

  .locale-picker select {
    width: 64px;
    max-width: 64px;
    padding-inline: 6px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .topbar {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px 78px minmax(0, 1fr) 64px;
    grid-template-rows: auto auto;
    gap: 6px 4px;
    padding-block: 6px;
  }

  .topbar > .brand { grid-area: 1 / 1; }
  .topbar > .venture-picker { grid-area: 1 / 2; }
  .topbar > .interaction-mode-picker { grid-area: 1 / 3 / 2 / 5; justify-self: start; }
  .topbar > .spacer { display: none; }
  .topbar > #open-brain { grid-area: 2 / 2; justify-self: start; }
  .topbar > .workspace-menu { grid-area: 2 / 3; justify-self: start; }
  .topbar > .locale-picker { grid-area: 2 / 4; }
}

/* An employee no key can serve. Dimmed rather than hidden: it is part of the
   team, it just cannot work yet, and hiding it would make the roster look
   wrong rather than incomplete. */
.employee.unreachable img {
  filter: grayscale(1);
  opacity: 0.55;
}

.employee.unreachable .who strong {
  color: var(--muted);
}

.employee.unreachable .who small {
  color: var(--coral);
}

/* Project picker in the top bar. */
.venture-picker select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  padding: 6px 12px;
  border-radius: 999px;
  max-width: 240px;
}

.venture-picker select option {
  color: var(--ink);
  background: var(--white);
}

/* Connector setup guide. The instructions are the product here, so they are
   given room rather than hidden behind a link. */
.guide {
  border-left: 2px solid rgba(255, 255, 255, 0.16);
  padding-left: 14px;
  margin: 12px 0;
  font-size: 0.9rem;
}

.guide h4 {
  margin: 12px 0 4px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.guide ul,
.guide ol {
  margin: 0;
  padding-left: 20px;
}

.guide li {
  margin: 3px 0;
}

/* What a connection refuses to do, marked so it is not read as a feature. */
.guide .refuses li {
  color: var(--coral);
}

.guide-link {
  display: inline-block;
  margin: 8px 12px 0 0;
  color: var(--accent);
}

/* Files going out with the next message. */
.composer-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.composer-files:empty {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.85rem;
  max-width: 100%;
}

.chip strong {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.chip-x {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 4px;
}

.chip-x:hover {
  color: var(--white);
}

.composer form .attach {
  padding: 0 12px;
  font-size: 1.1rem;
  line-height: 1;
  align-self: stretch;
}

/* The whole conversation is the drop target, not a small corner of it. */
.messages.dropping {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
}

/* Language picker, top right.
   Deliberately not in a drawer: choosing the wrong language hides every label
   you would need to read to undo it, so the way back must stay on screen. */
.locale-picker select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--white);
  padding: 6px 10px;
  border-radius: 999px;
  max-width: 190px;
}

.locale-picker select option {
  color: var(--ink);
  background: var(--white);
}

/* Stay-signed-in, on the sign-in card. */
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 14px;
  font-size: 0.92rem;
  color: var(--muted);
  cursor: pointer;
}

.check input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.drawer-card .hint {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 14px;
}

.field input[type="file"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

/* The Sanctuary: part of the rail, deliberately not part of the roster. */
.employee.sanctuary {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(101, 235, 206, 0.12), transparent);
  margin-bottom: 6px;
}

.employee.sanctuary .brand-mark {
  width: 40px;
  height: 40px;
}

.brand-mark.large {
  width: 46px;
  height: 46px;
}

.brand-mark.huge {
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
}

.msg .brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Activity and approvals

   The approval card is deliberately the heaviest thing in the drawer. It is the
   one place in the product where a click authorises something, and a decision
   button that looks like every other button is a decision made by habit.
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0 14px;
  border-bottom: 1px solid var(--line);
}

.tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 12px;
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

.tab[aria-selected="true"] {
  color: var(--navy);
  border-bottom-color: var(--mint-2);
}

.ovs-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--paper-soft);
}

.ovs-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--navy);
}

/* The shared coral label is too light on this card; review warnings must remain
   readable at WCAG AA on the soft-paper Activity surface. */
.ovs-review-bundle .report-caveat {
  color: #8c2f1e;
}

.prospecting-result {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  gap: 8px;
}

.prospecting-result > h3,
.prospecting-result > .hint,
.prospecting-result > .prospecting-result-detail,
.prospecting-result > .prospecting-result-more,
.prospecting-result > .report-caveat {
  flex-basis: 100%;
}

.prospecting-result-detail {
  min-width: 0;
}

.prospecting-lineage > .prospecting-child {
  display: block;
  width: calc(100% - 32px);
  margin-block: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--navy);
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.prospecting-lineage > .prospecting-child:hover,
.prospecting-lineage > .prospecting-child:focus-visible {
  border-color: var(--mint-2);
}

.prospecting-result-more > summary {
  cursor: pointer;
  color: var(--navy);
  font-weight: 600;
}

.prospecting-result-more > .button {
  margin: 8px 8px 0 0;
}

.ovs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  margin: 6px 0;
}

.ovs-steps {
  display: grid;
  gap: 8px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.activity-diagnostics {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.activity-diagnostics > summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 600;
}

.activity-diagnostics > summary:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.ovs-step {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}

.ovs-step-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--navy);
}

.ovs-step-error {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--coral);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--coral) 8%, var(--white));
  color: var(--navy);
  font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Monospace, wrapped, scrollable: these are the exact bytes the hash covers, and
   a payload that is visually reflowed is a payload the approver did not read. */
.ovs-payload {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 240px;
  overflow: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 8px 0;
}

.ovs-view-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 0;
  border-bottom: 1px solid var(--line);
}

.ovs-preview-panel,
.ovs-code-panel {
  min-width: 0;
}

.ovs-preview-context {
  margin: 10px 0 6px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ovs-preview-context strong {
  color: var(--navy);
}

.ovs-preview-frame {
  display: block;
  width: 100%;
  min-height: clamp(280px, 48vh, 620px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}

@media (max-width: 620px) {
  .ovs-preview-frame {
    min-height: 58vh;
  }
}

.ovs-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.ovs-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* Risk is a word the owner should be able to see without reading the sentence
   around it. */
.ovs-risk {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--mint);
  color: var(--navy);
}

.ovs-risk[data-risk="financial_commitment"],
.ovs-risk[data-risk="destructive_or_irreversible"],
.ovs-risk[data-risk="privilege_or_credential_change"] {
  background: var(--coral);
  color: var(--white);
}

/* Provenance travels with the content it describes. A viewer that renders
   model output exactly as it renders the owner's own launders provenance. */
.ovs-untrusted {
  border-left: 3px solid var(--coral);
  padding-left: 10px;
  font-size: 13px;
  color: var(--muted);
  margin: 8px 0;
}

.ovs-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.ovs-row:last-child {
  border-bottom: 0;
}

.ovs-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.ovs-empty {
  color: var(--muted);
  padding: 18px 0;
}

/* ---------------------------------------------------------------------------
   Le tableau de flux.

   Les colonnes defilent horizontalement plutot que de se comprimer : cinq
   colonnes ecrasees sur un telephone donnent cinq bandes illisibles, et une
   carte dont le titre est coupe ne dit plus de quelle tache il s'agit. La
   couleur de la pastille est posee par le script depuis la table des colonnes,
   parce que la meme table sert au canvas -- deux palettes ecrites deux fois
   sont deux palettes qui divergeront.
   --------------------------------------------------------------------------- */

.activity-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.activity-filter select {
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.board-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.board-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.board-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.board-title {
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}

.board-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
}

.board-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 6px 0;
  margin: 0;
}

.board-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.board-card:hover,
.board-card:focus-visible {
  border-color: var(--navy);
}

.board-card-title {
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Le statut exact, sous le titre. La colonne le range ; elle ne le remplace
   pas, et `verifying` et `retrying` restent deux choses differentes a lire. */
.board-card-status {
  font-size: 12px;
  color: var(--muted);
}

.board-badge {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--coral);
  color: var(--coral);
  font-size: 12px;
  font-weight: 600;
}

/* L'explication d'un refus, une fois demandee. Retraite pour se lire comme une
   reponse a la ligne au-dessus plutot que comme une ligne de plus. */
.import-explain {
  margin: 4px 0 10px 12px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  max-width: 60ch;
}

@media (max-width: 620px) {
  .board {
    grid-auto-columns: minmax(190px, 78vw);
  }
}

@media (max-width: 620px) {
  .ovs-row {
    flex-direction: column;
    gap: 4px;
  }
}

.link {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--mint-2);
  text-align: left;
  cursor: pointer;
}

.link:hover {
  text-decoration: underline;
}

/* The server is running code older than what is built.
   Coral rather than the usual notice colour: this is not a status, it is a reason to
   stop and restart before believing anything the page says. */
.stale-build {
  background: var(--coral);
  color: var(--white);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Outreach and finances
   ---------------------------------------------------------------------------
   Two screens that are mostly lists of facts, so almost all of the work is
   making a figure legible beside its qualifier. A number a reader has to go
   looking for the freshness of is a number they will quote without it. */

.campaign {
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 12px;
  padding: 10px 0;
}

.campaign-name {
  flex: 1;
  font-weight: 600;
}

.metric {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  padding: 8px 0;
}

.metric-label {
  color: var(--muted);
}

/* Tabular figures, so a column of amounts lines up on the decimal instead of
   drifting by digit width — the difference between a table you can scan and one
   you have to read. */
.metric-value {
  font-family: "DM Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* An anomaly is coloured by what it costs, not by how loud it is. A fall in
   revenue and a rise of the same size are both flagged; only one of them is
   worth interrupting somebody for. */
.anomaly-high,
.anomaly-critical {
  border-left: 3px solid var(--coral);
  padding-left: 10px;
}

.anomaly-warning {
  border-left: 3px solid var(--mint-2);
  padding-left: 10px;
}

.anomaly-info {
  border-left: 3px solid var(--line);
  padding-left: 10px;
}

/* The required CSV columns. Monospace because they are strings to be copied
   exactly, and a proportional font makes an underscore ambiguous. */
.hint.mono {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  word-break: break-word;
}

/* Plutus' expense register stays a light, dense working surface inside the finance drawer. The
   import and correction forms are collapsed until requested so the primary view remains a short
   register rather than another wall of controls. */
.expense-register {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--navy);
  margin-top: 28px;
  padding: clamp(16px, 3vw, 24px);
}

.cfo-cockpit {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--navy);
  margin-top: 28px;
  padding: clamp(18px, 3vw, 28px);
}

.cfo-cockpit-heading,
.cfo-meta,
.cfo-calibration-row {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.cfo-cockpit h3,
.cfo-cockpit h4,
.cfo-cockpit .eyebrow { margin-top: 0; }
.cfo-version-field { min-width: min(100%, 260px); }
.cfo-boundary { border-left: 3px solid var(--mint); }
.cfo-meta { justify-content: flex-start; margin: 18px 0; }
.cfo-section { border-top: 1px solid var(--line); padding: 18px 0 4px; }
.cfo-metric-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cfo-management-controls { align-items: end; display: flex; flex-wrap: wrap; gap: 10px; }
.cfo-management-controls .button { margin-bottom: 1px; }
.cfo-owner-blocker { border-left: 4px solid var(--coral); }
.cfo-section h5 { margin: 14px 0 8px; }
.professional-review-import {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin: 18px 0;
  padding: 12px 0;
}
.professional-review-import summary { cursor: pointer; font-weight: 700; margin-bottom: 10px; }
.professional-review .review-attributed { border-left: 4px solid var(--mint); }
.professional-review .review-pending { border-left: 4px solid var(--coral); }

.cfo-metric-card,
.cfo-alert-card,
.cfo-calibration-row,
.cfo-list-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 14px;
}

.cfo-metric-label { color: var(--muted); margin: 0 0 6px; }
.cfo-metric-value { display: block; font-family: "DM Mono", ui-monospace, monospace; font-size: 20px; }
.cfo-calibration-row > span { font-family: "DM Mono", ui-monospace, monospace; }
.cfo-trace { margin-top: 10px; }
.cfo-trace summary { color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; }
.cfo-trace-grid { display: grid; font-size: 12px; gap: 4px 10px; grid-template-columns: max-content minmax(0, 1fr); }
.cfo-trace-grid dt { color: var(--muted); }
.cfo-trace-grid dd { margin: 0; overflow-wrap: anywhere; }

.expense-register h3,
.expense-register h4 {
  margin-top: 0;
}

.expense-boundary {
  border-left: 3px solid var(--mint);
}

.expense-import {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin: 18px 0;
  padding: 12px 0;
}

.expense-import summary {
  cursor: pointer;
  font-weight: 700;
  margin-bottom: 10px;
}

.expense-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.expense-summary .tag {
  color: var(--navy);
}

.expense-disputed {
  border-color: var(--coral);
}

.expense-unreconciled {
  border-color: var(--mint-2);
}

.expense-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.expense-table {
  border-collapse: collapse;
  min-width: 720px;
  width: 100%;
}

.expense-table th,
.expense-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
}

.expense-table th {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.expense-table td:nth-child(2) {
  font-family: "DM Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.expense-correct {
  min-height: 34px;
  padding: 6px 10px;
}

.expense-correction {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 16px;
  padding: 16px;
}

.expense-correction-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .expense-correction-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   La constellation

   Le canvas a une hauteur fluide plafonnée : sur un téléphone il doit rester
   lisible sans pousser le tableau hors de l'écran, et sur un grand moniteur il
   ne doit pas devenir un mur. Le fond est un dégradé sombre pour que la lueur
   additive des nœuds ait quelque chose contre quoi se détacher.
   --------------------------------------------------------------------------- */

.constellation-frame {
  position: relative;
  width: 100%;
  height: clamp(300px, 52vh, 560px);
  margin: 0 0 0.75rem;
  border-radius: 14px;
  overflow: hidden;
  /*
     Deux teintes, et deux seulement, prises telles quelles dans la palette. La première
     version en inventait une troisième — un bleu nuit plus sombre, « assez proche » — et le
     test du thème l'a refusée. C'est précisément ce qu'il surveille : trois menthes dans un
     an et plus personne ne sait laquelle est la bonne.
  */
  background:
    radial-gradient(120% 100% at 50% 0%, var(--navy-2) 0%, var(--navy) 100%);
  border: 1px solid var(--line);
}

/* Two quiet hemispheres behind the WebGL network make the promised brain legible at first
   glance. They carry no state; every real task and employee remains drawn by WebGL and repeated
   in the accessible table below. */
.constellation-frame::before {
  content: "";
  position: absolute;
  inset: 9% 12% 8%;
  border: 1px solid rgba(101, 235, 206, 0.22);
  border-radius: 46% 46% 40% 40% / 38% 38% 58% 58%;
  background:
    radial-gradient(circle at 31% 34%, rgba(101, 235, 206, 0.09), transparent 25%),
    radial-gradient(circle at 69% 34%, rgba(101, 235, 206, 0.09), transparent 25%);
  box-shadow: inset 0 0 70px rgba(101, 235, 206, 0.05);
}

.constellation-frame::after {
  content: "";
  position: absolute;
  top: 13%;
  bottom: 16%;
  left: 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(101, 235, 206, 0.3), transparent);
}

.constellation-frame canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.brain-overlay {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 18px;
  display: grid;
  pointer-events: none;
}

.brain-overlay span {
  color: var(--mint);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
}

.brain-overlay strong {
  color: var(--white);
  font-size: 15px;
}

.brain-launch {
  margin-top: 8px;
}

.constellation-frame .notice {
  position: absolute;
  inset: auto 1rem 1rem;
}

/* La description textuelle n'est pas cachée : elle sert aussi de légende. */
#constellation-alt {
  margin: 0 0 0.75rem;
}

.constellation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.constellation-table caption {
  text-align: left;
  padding-bottom: 0.4rem;
  color: var(--muted);
}

.constellation-table th,
.constellation-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
}

.constellation-table td:nth-child(n + 2),
.constellation-table th:nth-child(n + 2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Une pastille de la couleur de l'employé, pour relier la ligne au point. */
.constellation-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: baseline;
}

/* Un employé au repos n'est pas une erreur : il est simplement plus discret. */
.constellation-table tr[data-idle="true"] td {
  color: var(--muted);
}

.constellation-employee-action {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.constellation-employee-action:hover {
  color: var(--navy);
}

@media (max-width: 520px) {
  .constellation-frame {
    height: clamp(240px, 42vh, 340px);
  }
}

/* ---------------------------------------------------------------------------
   La pastille de non-lus

   Ce qui fait que le travail de la nuit s'annonce. Elle n'est pas rouge :
   du nouveau n'est pas une erreur, et une interface qui alarme pour chaque
   note du matin apprend à être ignorée en une semaine. La menthe est la
   couleur d'Olympus, ce qui est le sens exact — quelque chose vous attend.
   --------------------------------------------------------------------------- */

.unread {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 1.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--mint-2);
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/*
   Le titre d'un fil prend la place restante, la pastille reste à droite.

   Sélecteur `.rail .thread` et non `.thread` : la règle d'origine, plus haut, a deux
   niveaux de spécificité et l'emportait en silence — la pastille se retrouvait sous le
   titre au lieu d'être à côté, sans qu'aucun test ne puisse le voir.
*/
.rail .thread {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.thread-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail .thread .unread {
  background: transparent;
  color: var(--mint-2);
  border: 1px solid var(--mint-2);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Rapports

   Une liste de travaux achevés, puis le rapport ouvert. La réserve — partiel,
   preuves insuffisantes, données de test — est en coral parce que c'est la
   seule chose de cette carte qui change la façon de lire tout le reste.
   --------------------------------------------------------------------------- */

.report-card {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}

.report-card:hover {
  background: var(--paper-soft);
}

.report-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.report-head strong {
  flex: 1;
  min-width: 0;
}

.report-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.report-caveat {
  margin-top: 6px;
  color: var(--coral);
  font-size: 12px;
  font-weight: 600;
}

.report-summary {
  line-height: 1.6;
}

/* Le contenu brut reste lisible et ne pousse jamais la page en largeur. */
.report-raw {
  max-height: 50vh;
  overflow: auto;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  border: 1px solid var(--line);
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.legal-report-section {
  margin: 1.35rem 0;
}

.legal-report-section h4 {
  color: var(--ink);
  font-size: 1rem;
  margin: 0 0 0.65rem;
}

.legal-report-list {
  display: grid;
  gap: 0.65rem;
}

.legal-report-row {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mint-2);
  border-radius: 10px;
  color: var(--ink);
  padding: 0.8rem 0.9rem;
}

.legal-report-row p {
  margin: 0.35rem 0 0;
  white-space: pre-wrap;
}

.legal-report-row small {
  color: var(--muted);
  display: block;
  margin-top: 0.4rem;
  overflow-wrap: anywhere;
}

.legal-report-row .legal-report-row {
  background: var(--white);
  margin-top: 0.65rem;
}

.report-download {
  display: inline-flex;
  margin-top: 1rem;
  text-decoration: none;
}

.website-audit-overview {
  display: grid;
  grid-template-columns: minmax(110px, 0.35fr) minmax(220px, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin: 1rem 0 1.4rem;
}

.website-audit-score,
.website-audit-facts,
.website-audit-finding {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.website-audit-score {
  display: grid;
  place-content: center;
  min-height: 120px;
  text-align: center;
}

.website-audit-score strong {
  color: var(--mint-2);
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  line-height: 1;
}

.website-audit-score span {
  color: var(--muted);
  margin-top: 0.35rem;
}

.website-audit-facts {
  display: grid;
  align-content: center;
  gap: 0.4rem;
  padding: 1rem;
  overflow-wrap: anywhere;
}

.website-audit-facts p {
  margin: 0;
}

.website-audit-category-head,
.website-audit-finding-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.website-audit-category-head h4 {
  margin-right: auto;
}

.website-audit-findings {
  display: grid;
  gap: 0.7rem;
}

.website-audit-finding {
  border-left: 4px solid var(--line);
  padding: 0.85rem 0.95rem;
}

.website-audit-finding.severity-critical,
.website-audit-finding.severity-high {
  border-left-color: var(--coral);
}

.website-audit-finding.severity-medium,
.website-audit-finding.severity-low {
  border-left-color: var(--muted);
}

.website-audit-finding.severity-pass {
  border-left-color: var(--mint-2);
}

.website-audit-finding p {
  margin: 0.45rem 0 0;
}

.website-audit-recommendation {
  font-weight: 650;
}

.website-audit-finding small {
  color: var(--muted);
  display: block;
  margin-top: 0.5rem;
}

.security-readiness-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0;
}

.security-readiness-gate {
  background: var(--paper-soft);
  border: 1px solid var(--coral);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 0.9rem 1rem;
}

.security-readiness-gate p {
  margin: 0.4rem 0 0;
}

@media (max-width: 620px) {
  .website-audit-overview {
    grid-template-columns: 1fr;
  }

  .security-readiness-overview {
    grid-template-columns: 1fr;
  }
}

.strategic-analysis-card {
  max-width: 920px;
}

.strategic-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.strategic-form input,
.strategic-form select {
  width: 100%;
}

.strategic-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(110px, 0.7fr));
  gap: 12px;
}

.strategic-context-card,
.strategic-budget {
  border: 1px solid var(--line);
  border-left: 4px solid var(--mint-2);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  padding: 14px;
}

.strategic-context-card p,
.strategic-budget p {
  margin: 5px 0 0;
}

.strategic-context-card small {
  color: var(--muted);
}

.strategic-budget {
  border-left-color: var(--coral);
}

.prospecting-card {
  max-width: 1040px;
}

.prospecting-form {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

.prospecting-section {
  display: grid;
  min-width: 0;
  gap: 14px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.prospecting-section legend {
  padding: 0 8px;
  color: var(--ink);
  font-weight: 700;
}

.prospecting-form input,
.prospecting-form select,
.prospecting-form textarea {
  width: 100%;
}

.prospecting-form textarea {
  resize: vertical;
}

.prospecting-grid {
  display: grid;
  gap: 12px;
}

.prospecting-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prospecting-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prospecting-grid.four {
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(110px, 0.7fr));
}

.prospecting-task {
  border: 1px solid var(--mint-2);
  border-left: 4px solid var(--mint-2);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  padding: 14px;
}

.prospecting-task p {
  margin: 5px 0;
}

.prospecting-task code {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.button.danger {
  border-color: var(--coral);
  color: var(--coral);
}

@media (max-width: 820px) {
  .prospecting-grid.three,
  .prospecting-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .prospecting-grid.two,
  .prospecting-grid.three,
  .prospecting-grid.four {
    grid-template-columns: 1fr;
  }
}

.image-generation-card {
  max-width: 820px;
}

.image-generation-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.image-generation-form textarea,
.image-generation-form input,
.image-generation-form select {
  width: 100%;
}

.image-generation-form textarea {
  min-height: 150px;
  resize: vertical;
}

.image-generation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.image-budget,
.image-generation-result {
  border: 1px solid var(--line);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  color: var(--ink);
  padding: 14px;
}

.image-budget p,
.image-generation-result p {
  margin: 5px 0 0;
}

.image-generation-result img {
  display: block;
  width: 100%;
  max-height: 58vh;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  object-fit: contain;
}

.image-generation-meta {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.strategic-matrix,
.strategic-organisations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 680px) {
  .image-generation-grid {
    grid-template-columns: 1fr;
  }
}

.strategic-dimension,
.strategic-organisation {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  padding: 14px;
}

.strategic-dimension h5,
.strategic-organisation h5 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0.95rem;
}

.strategic-dimension .legal-report-row {
  background: var(--white);
  margin-top: 8px;
}

.strategic-ffom-group {
  margin-top: 12px;
}

.strategic-ffom-group ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.strategic-table-wrap {
  overflow-x: auto;
}

.strategic-kpi-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

.strategic-kpi-table th,
.strategic-kpi-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
}

.strategic-kpi-table th {
  color: var(--navy);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 760px) {
  .strategic-grid,
  .strategic-matrix,
  .strategic-organisations {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Connector permissions
   ---------------------------------------------------------------------------

   The screen where the owner hands this system a permission it did not have.
   Styled rather than left to the browser because the two things that must be
   legible here -- what a scope grants, and the reason to hesitate -- are the two
   things an unstyled block runs together.

   `.field` sets `input { width: 100% }` and `span { display: block }`, which is
   right for a text field and wrong for a checkbox. `.field.scope` undoes both. */

.scope-host {
  padding: 0 4px;
}

.scope-panel {
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

.scope-panel h4 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--navy);
}

.scope-panel .hint {
  display: block;
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* The caution, and the warning that a platform has no draft at all. Deep red on
   a coral wash rather than the coral itself: coral text on paper is 2.6:1, and
   the sentence that matters most here would be the hardest one to read. */
.scope-panel .hint.bad {
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 118, 95, 0.4);
  background: rgba(255, 118, 95, 0.09);
  color: #8c2f1e;
}

.field.scope {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: start;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.field.scope input {
  width: auto;
  margin-top: 2px;
  grid-column: 1;
  grid-row: 1;
}

.field.scope span {
  grid-column: 2;
  margin-bottom: 0;
  font-family: "DM Mono", ui-monospace, Consolas, monospace;
}

.field.scope .hint {
  grid-column: 2;
}

/* A disabled checkbox still has to look like a fact rather than a fault. */
.field.scope input:disabled {
  opacity: 1;
}

.scope-panel .button {
  margin-top: 16px;
}

.scope-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

/* Anything beyond `read`. Mint rather than coral: the owner granting a scope is
   a deliberate act, not an alarm -- but it has to be distinguishable across the
   row from the `read` every connector carries. */
.tag.granted {
  border-color: rgba(28, 199, 165, 0.45);
  background: rgba(101, 235, 206, 0.12);
  color: #0b6b58;
}

/* A scope that cannot be granted yet. Muted rather than alarming: this is not a
   warning about a risk, it is a row that is not a decision today. */
.field.scope.gated {
  opacity: 0.72;
}

.scope-panel .hint.locked {
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px dashed var(--line);
  background: var(--paper);
}

/* One connection: its row, and its permissions panel when open. */
.connector-block {
  margin-bottom: 10px;
}

.connector-block .cred {
  margin-bottom: 0;
}

.connector-block .scope-host:not(:empty) {
  padding-top: 10px;
}

/* ---------------------------------------------------------------------------
   Voice
   --------------------------------------------------------------------------- */

/* Inline audio controls for BUB/CUB messages and the brief player. */
.voice-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.voice-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-soft);
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s ease,
    transform 0.12s ease;
}

.voice-controls button:hover:not(:disabled) {
  background: var(--white);
  transform: translateY(-1px);
}

.voice-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Recording state panel above the composer. */
.recording-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
}

.recording-panel.hidden {
  display: none;
}

.recording-panel[data-hands-free="true"] #recording-send {
  display: none;
}

.recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  animation: recording-pulse 1.2s ease-in-out infinite;
}

@keyframes recording-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.recording-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

.recording-timer {
  margin-left: auto;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 13px;
  color: var(--muted);
}

.recording-actions {
  display: flex;
  gap: 8px;
}

/* Mic button sits beside the attach button. */
.composer form .mic {
  padding: 0 12px;
  font-size: 0.85rem;
  line-height: 1;
  align-self: stretch;
}

@media (prefers-reduced-motion: reduce) {
  .recording-dot {
    animation: none;
    opacity: 1;
  }

  .voice-controls button:hover:not(:disabled) {
    transform: none;
  }
}

@media (max-width: 480px) {
  .recording-panel {
    flex-wrap: wrap;
  }

  .recording-timer {
    margin-left: 0;
  }

  .recording-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Voice assignment grid in settings. */
.voice-assignment-list {
  display: grid;
  grid-template-columns: 1fr 2fr auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.voice-assignment-row {
  display: contents;
}

.voice-assignment-row label {
  font-weight: 500;
}

.voice-assignment-row select {
  min-width: 0;
}

@media (max-width: 640px) {
  .voice-assignment-list {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .voice-assignment-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  .voice-assignment-row select {
    grid-column: 1 / -1;
  }
}
.work-proposal {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.9rem;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--accent, #65ebce) 55%, transparent);
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent, #65ebce) 8%, transparent);
}

.work-proposal-status {
  width: fit-content;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.work-proposal-objective,
.work-proposal-steps {
  margin: 0;
}

.work-proposal-objective {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.work-proposal-steps {
  padding-inline-start: 1.4rem;
}

.work-proposal-steps li + li {
  margin-top: 0.35rem;
}

.work-proposal-step {
  padding-inline-start: 0.2rem;
}

.work-proposal-step-heading,
.work-proposal-results {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.work-proposal-step-status {
  font-size: 0.7rem;
}

.work-proposal-results {
  margin-top: 0.5rem;
}

.work-proposal-output-group > summary {
  cursor: pointer;
  color: var(--ink);
}

.work-proposal-output-group[open] .work-proposal-result {
  margin: 0.5rem 0.4rem 0 0;
}

.work-proposal-result {
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
}

.work-proposal-refresh-error {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  color: var(--ink);
}

.work-proposal-employee {
  display: block;
  color: var(--ink);
}

.work-proposal-assignment {
  margin: 0.15rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.work-proposal-failure {
  margin: 0.35rem 0 0;
  padding: 0.45rem 0.6rem;
  border-inline-start: 3px solid var(--coral);
  border-radius: 0.25rem;
  background: var(--paper-soft);
  color: var(--ink);
  line-height: 1.4;
}

.work-proposal-technical {
  margin-top: 0.65rem;
}

.work-proposal-technical > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
}

.employee-skills {
  margin-top: 0.35rem;
  max-width: min(32rem, 100%);
  font-size: 0.82rem;
  color: var(--muted);
}

.employee-skills > summary { cursor: pointer; }
.employee-skills > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.employee-skills ul { margin: 0.4rem 0 0; padding-inline-start: 1.2rem; overflow-wrap: anywhere; }