/*
 * 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 0 6px;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.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: 64px 1fr;
  height: 100dvh;
}

.topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  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-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--mint), var(--mint-2));
  display: grid;
  place-items: center;
  color: var(--navy);
  font-weight: 800;
}

.topbar .spacer {
  flex: 1;
}

.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);
}

/* --------------------------------------------------------------------------
   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;
}

.conversation-head {
  display: flex;
  align-items: center;
  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;
}

.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: 780px;
}

.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;
}

/*
 * 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;
}

@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);
}

.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: min(620px, 100%);
  max-height: 86dvh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

.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;
}

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

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

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

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

.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: 64px 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;
  }
}

/* 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;
  border-radius: 50%;
  font-size: 15px;
}

.brand-mark.large {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 17px;
}

.brand-mark.huge {
  width: 84px;
  height: 84px;
  border-radius: 26px;
  font-size: 30px;
  margin: 0 auto 18px;
}

.msg .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 13px;
  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);
}

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

/* 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-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;
}

@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;
}

/* ---------------------------------------------------------------------------
   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(220px, 42vh, 460px);
  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);
}

.constellation-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.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);
}

@media (max-width: 520px) {
  .constellation-frame {
    height: clamp(180px, 34vh, 260px);
  }
}

/* ---------------------------------------------------------------------------
   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;
}