/* BEACON — a warm, paper-toned chat interface.
 *
 * Two themes, both defined as tokens on :root. The light theme is the default;
 * dark is applied by `data-theme="dark"` on <html>, which main.js sets from the
 * stored preference or the system setting. Nothing outside this token block
 * should name a raw colour.
 */

:root {
  --bcn-bg: #faf9f5;
  --bcn-bg-sunken: #f3f1ea;
  --bcn-sidebar: #f5f3ec;
  --bcn-surface: #ffffff;
  --bcn-surface-raised: #ffffff;
  --bcn-user-bubble: #ecebe3;

  --bcn-text: #32302c;
  --bcn-text-muted: #6d685f;
  --bcn-text-faint: #918b80;

  --bcn-border: #e3e0d6;
  --bcn-border-strong: #d2cec2;

  --bcn-accent: #c2603d;
  --bcn-accent-hover: #ad5334;
  --bcn-accent-soft: #f6e6de;
  --bcn-accent-text: #ffffff;

  --bcn-danger: #b3392c;
  --bcn-danger-soft: #fae9e6;
  --bcn-warn: #a9711c;
  --bcn-warn-soft: #f9efdc;
  --bcn-ok: #4a7c52;

  --bcn-code-bg: #f4f2ea;
  --bcn-code-border: #e3e0d6;

  --bcn-shadow-sm: 0 1px 2px rgba(45, 40, 32, .06);
  --bcn-shadow-md: 0 4px 14px rgba(45, 40, 32, .09), 0 1px 3px rgba(45, 40, 32, .06);
  --bcn-shadow-lg: 0 12px 38px rgba(45, 40, 32, .14);

  --bcn-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --bcn-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --bcn-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bcn-col: 46rem;
  /* How wide a figure may grow when it breaks out of the reading column.
     88rem is a little over a mermaid Gantt's natural canvas, so on a large
     screen one fits without scrolling. Nothing is stretched to reach it — each
     diagram also keeps its own natural max-width, so a small flowchart stays
     small. The viewport term keeps it inside the window while the sidebar is
     taking space. */
  --bcn-figure: min(88rem, calc(100vw - var(--bcn-sidebar-w) - 4.5rem));
  --bcn-radius: 12px;
  /* Narrow on purpose. The sidebar holds seven nav rows, the thread list and
     the account button, and nothing else — the company card that used to need
     the width is gone, and so is the getting-started button, which now sits in
     the top bar. What is left is all short. */
  --bcn-sidebar-w: 13.5rem;
}

[data-theme="dark"] {
  --bcn-bg: #262624;
  --bcn-bg-sunken: #1f1e1d;
  --bcn-sidebar: #1f1e1d;
  --bcn-surface: #2f2e2b;
  --bcn-surface-raised: #35332f;
  --bcn-user-bubble: #35332f;

  --bcn-text: #e9e6df;
  --bcn-text-muted: #a8a299;
  --bcn-text-faint: #837d74;

  --bcn-border: #3b3936;
  --bcn-border-strong: #4c4945;

  --bcn-accent: #d0795a;
  --bcn-accent-hover: #dd8a6c;
  --bcn-accent-soft: #3a2c26;
  --bcn-accent-text: #1c1a17;

  --bcn-danger: #e08374;
  --bcn-danger-soft: #3a2724;
  --bcn-warn: #d6a44f;
  --bcn-warn-soft: #362c1d;
  --bcn-ok: #7fae86;

  --bcn-code-bg: #1c1b1a;
  --bcn-code-border: #3b3936;

  --bcn-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --bcn-shadow-md: 0 4px 14px rgba(0, 0, 0, .34), 0 1px 3px rgba(0, 0, 0, .3);
  --bcn-shadow-lg: 0 12px 38px rgba(0, 0, 0, .46);
}

* { box-sizing: border-box; }

/* The `hidden` attribute is how this page shows and hides the send/stop buttons,
   the thinking dots and the tool bodies — but the UA rule behind it is only
   `display:none` at the weakest specificity, so any explicit `display` here
   would silently defeat it. Make it win everywhere. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

body.bcn-body,
body.bcn-locked-body {
  background: var(--bcn-bg);
  color: var(--bcn-text);
  font-family: var(--bcn-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

::selection { background: var(--bcn-accent-soft); color: var(--bcn-text); }

:focus-visible {
  outline: 2px solid var(--bcn-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Locked screen ──────────────────────────────────────────────────────── */

.bcn-lock {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(60rem 40rem at 50% -10%, var(--bcn-accent-soft), transparent 70%),
    var(--bcn-bg);
}

.bcn-lock-card {
  width: min(26rem, 100%);
  text-align: center;
}

.bcn-lock-mark {
  font-size: 2rem;
  color: var(--bcn-accent);
  line-height: 1;
  margin-bottom: 1.25rem;
}

.bcn-lock-title {
  font-family: var(--bcn-serif);
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
}

.bcn-lock-sub {
  color: var(--bcn-text-muted);
  margin: 0 0 2rem;
  font-size: .95rem;
  text-wrap: balance;
}

.bcn-lock-btn {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .7rem 1.25rem;
  border: 1px solid var(--bcn-border-strong);
  border-radius: 999px;
  background: var(--bcn-surface);
  color: var(--bcn-text);
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--bcn-shadow-sm);
  transition: background .15s, border-color .15s, transform .12s;
}
.bcn-lock-btn:hover { background: var(--bcn-bg-sunken); border-color: var(--bcn-text-faint); }
.bcn-lock-btn:active { transform: translateY(1px); }

.bcn-lock-note {
  margin: 1.5rem 0 0;
  font-size: .8125rem;
  color: var(--bcn-text-faint);
}

.bcn-lock-back {
  display: inline-block;
  margin-top: 2.5rem;
  font-size: .8125rem;
  color: var(--bcn-text-faint);
  text-decoration: none;
}
.bcn-lock-back:hover { color: var(--bcn-text-muted); }

/* ─── Boot veil ──────────────────────────────────────────────────────────── */

.bcn-boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--bcn-bg);
  z-index: 50;
  transition: opacity .25s ease;
}
.bcn-boot.is-gone { opacity: 0; pointer-events: none; }
.bcn-boot-mark {
  font-size: 1.75rem;
  color: var(--bcn-accent);
  animation: bcn-pulse 1.6s ease-in-out infinite;
}
@keyframes bcn-pulse {
  0%, 100% { opacity: .35; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* ─── Shell ──────────────────────────────────────────────────────────────── */

.bcn-shell {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */

.bcn-sidebar {
  width: var(--bcn-sidebar-w);
  flex: 0 0 var(--bcn-sidebar-w);
  background: var(--bcn-sidebar);
  border-right: 1px solid var(--bcn-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: margin-left .22s ease;
}
.bcn-shell.is-collapsed .bcn-sidebar { margin-left: calc(var(--bcn-sidebar-w) * -1); }

.bcn-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .875rem .75rem .5rem 1rem;
}

.bcn-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  color: var(--bcn-text);
}
.bcn-brand-mark { color: var(--bcn-accent); font-size: 1rem; }
.bcn-brand-name {
  font-family: var(--bcn-serif);
  font-size: 1.15rem;
  letter-spacing: -.01em;
}

.bcn-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--bcn-text-muted);
  cursor: pointer;
  transition: background .13s, color .13s;
}
.bcn-icon-btn:hover { background: var(--bcn-bg-sunken); color: var(--bcn-text); }
/* The gear opens a view but has no sidebar row to light up, so it carries the
   same active treatment a nav row would. */
.bcn-icon-btn.is-active { background: var(--bcn-accent-soft); color: var(--bcn-text); }

.bcn-new-chat {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem .75rem .75rem;
  padding: .5rem .75rem;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--bcn-accent);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .13s;
}
.bcn-new-chat:hover { background: var(--bcn-accent-soft); }

.bcn-threads {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 .5rem .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bcn-border-strong) transparent;
}
.bcn-threads::-webkit-scrollbar { width: 8px; }
.bcn-threads::-webkit-scrollbar-thumb { background: var(--bcn-border-strong); border-radius: 4px; }
.bcn-threads::-webkit-scrollbar-track { background: transparent; }

.bcn-thread-group {
  padding: .875rem .75rem .25rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}

.bcn-thread {
  display: flex;
  align-items: center;
  gap: .375rem;
  width: 100%;
  padding: .4375rem .5rem .4375rem .625rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--bcn-text-muted);
  cursor: pointer;
  text-align: left;
  transition: background .13s, color .13s;
}
.bcn-thread:hover { background: var(--bcn-bg-sunken); color: var(--bcn-text); }
.bcn-thread.is-active { background: var(--bcn-bg-sunken); color: var(--bcn-text); font-weight: 500; }

.bcn-thread-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
}

.bcn-thread-menu {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--bcn-text-faint);
  cursor: pointer;
  opacity: 0;
  transition: opacity .13s, background .13s, color .13s;
}
.bcn-thread:hover .bcn-thread-menu,
.bcn-thread.is-active .bcn-thread-menu,
.bcn-thread-menu:focus-visible { opacity: 1; }
.bcn-thread-menu:hover { background: var(--bcn-border); color: var(--bcn-text); }

.bcn-threads-empty {
  padding: 1.25rem .75rem;
  font-size: .8125rem;
  color: var(--bcn-text-faint);
}

.bcn-sidebar-foot {
  position: relative;
  border-top: 1px solid var(--bcn-border);
  padding: .625rem .75rem;
}

.bcn-account {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .4375rem .5rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .13s;
}
.bcn-account:hover { background: var(--bcn-bg-sunken); }
.bcn-account-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--bcn-accent);
  color: var(--bcn-accent-text);
  font-size: .75rem;
  font-weight: 600;
}
.bcn-account-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .8125rem;
  color: var(--bcn-text-muted);
}

/* ─── Main column ────────────────────────────────────────────────────────── */

.bcn-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.bcn-topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 3.25rem;
  padding: 0 .875rem;
  flex: 0 0 auto;
}

.bcn-expand { display: none; }
.bcn-shell.is-collapsed .bcn-expand { display: inline-grid; }

.bcn-topbar-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
  color: var(--bcn-text-muted);
}

/* `relative` so the getting-started menu can hang off it. */
.bcn-topbar-actions { position: relative; display: flex; gap: .125rem; }

.bcn-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--bcn-border-strong) transparent;
}
.bcn-scroll::-webkit-scrollbar { width: 10px; }
.bcn-scroll::-webkit-scrollbar-thumb { background: var(--bcn-border-strong); border-radius: 5px; }
.bcn-scroll::-webkit-scrollbar-track { background: transparent; }

.bcn-transcript {
  max-width: var(--bcn-col);
  margin: 0 auto;
  padding: .5rem 1rem 2rem;
}

/* The empty state hoists the composer into the middle of the column, the way a
   fresh chat does, then hands it back to the dock on the first message. */
.bcn-scroll.is-empty { display: grid; place-items: center; }

.bcn-welcome {
  max-width: var(--bcn-col);
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
  text-align: center;
}
.bcn-welcome-mark {
  font-size: 1.5rem;
  color: var(--bcn-accent);
  margin-bottom: .75rem;
}
.bcn-welcome-title {
  font-family: var(--bcn-serif);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 0 0 1.75rem;
  text-wrap: balance;
}

/* Holds the composer while the welcome screen is up. The composer element is
   moved in and out of here, so it needs no width of its own. */
.bcn-welcome-composer { text-align: left; }

.bcn-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
}
.bcn-suggestion {
  padding: .4375rem .8125rem;
  border: 1px solid var(--bcn-border);
  border-radius: 999px;
  background: var(--bcn-surface);
  color: var(--bcn-text-muted);
  font-size: .8125rem;
  cursor: pointer;
  transition: border-color .13s, color .13s, background .13s;
}
.bcn-suggestion:hover {
  border-color: var(--bcn-border-strong);
  color: var(--bcn-text);
  background: var(--bcn-bg-sunken);
}

/* ─── Messages ───────────────────────────────────────────────────────────── */

.bcn-turn { margin: 1.5rem 0; }
.bcn-turn:first-child { margin-top: 1rem; }

.bcn-turn-user {
  display: flex;
  justify-content: flex-end;
}
.bcn-user-bubble {
  max-width: 85%;
  padding: .625rem .9375rem;
  border-radius: var(--bcn-radius);
  background: var(--bcn-user-bubble);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bcn-turn-assistant { display: block; }

.bcn-prose { overflow-wrap: anywhere; }
.bcn-prose > :first-child { margin-top: 0; }
.bcn-prose > :last-child { margin-bottom: 0; }

.bcn-prose p { margin: 0 0 1rem; }
.bcn-prose h1, .bcn-prose h2, .bcn-prose h3, .bcn-prose h4 {
  font-weight: 600;
  line-height: 1.3;
  margin: 1.75rem 0 .75rem;
  letter-spacing: -.01em;
}
.bcn-prose h1 { font-size: 1.5rem; font-family: var(--bcn-serif); font-weight: 500; }
.bcn-prose h2 { font-size: 1.25rem; }
.bcn-prose h3 { font-size: 1.0625rem; }
.bcn-prose h4 { font-size: .9375rem; }

.bcn-prose ul, .bcn-prose ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.bcn-prose li { margin: .25rem 0; }
.bcn-prose li > ul, .bcn-prose li > ol { margin: .25rem 0; }

.bcn-prose blockquote {
  margin: 0 0 1rem;
  padding: .125rem 0 .125rem 1rem;
  border-left: 2px solid var(--bcn-border-strong);
  color: var(--bcn-text-muted);
}

.bcn-prose hr {
  border: none;
  border-top: 1px solid var(--bcn-border);
  margin: 1.75rem 0;
}

.bcn-prose a { color: var(--bcn-accent); text-decoration: underline; text-underline-offset: 2px; }
.bcn-prose a:hover { color: var(--bcn-accent-hover); }

.bcn-prose code {
  font-family: var(--bcn-mono);
  font-size: .875em;
  padding: .125em .375em;
  border-radius: 4px;
  background: var(--bcn-code-bg);
  border: 1px solid var(--bcn-code-border);
}

.bcn-prose strong { font-weight: 600; }

.bcn-code-block {
  position: relative;
  margin: 0 0 1rem;
  border: 1px solid var(--bcn-code-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-code-bg);
  overflow: hidden;
}

/* ─── Getting started, from the sidebar ──────────────────────────────────── */

/* Hangs from the help icon in the top bar. Anchored to the right edge of the
   action group so it opens inward over the page rather than off the window. */
.bcn-start-menu {
  position: absolute;
  top: calc(100% + .375rem);
  right: 0;
  z-index: 50;
  width: 17rem;
  max-width: calc(100vw - 2rem);
  padding: .25rem;
  border: 1px solid var(--bcn-border);
  border-radius: .625rem;
  background: var(--bcn-surface-raised);
  box-shadow: var(--bcn-shadow-lg);
}
.bcn-start-item {
  display: flex;
  flex-direction: column;
  gap: .0625rem;
  width: 100%;
  padding: .5rem .625rem;
  border: 0;
  border-radius: .5rem;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bcn-start-item:hover { background: var(--bcn-bg-sunken); }
.bcn-start-item-label { font-size: .8125rem; font-weight: 550; }
.bcn-start-item-detail { font-size: .6875rem; color: var(--bcn-text-faint); line-height: 1.35; }

/* ─── Onboarding: A Week in Your Life ────────────────────────────────────── */

/* Full-screen and opaque rather than a translucent modal. The week is a place
   you go, and a half-visible dashboard behind it would keep pulling the eye. */
.bcn-onb-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bcn-bg);
  overflow-y: auto;
  animation: bcn-onb-in .28s ease both;
}
.bcn-onb-scrim.is-leaving { animation: bcn-onb-out .2s ease both; }
@keyframes bcn-onb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bcn-onb-out { to { opacity: 0; } }

.bcn-onb-stage {
  width: 100%;
  max-width: 34rem;
  transition: opacity .14s ease, transform .14s ease;
}

.bcn-onb-card {
  padding: 1.75rem;
  border: 1px solid var(--bcn-border);
  border-radius: 16px;
  background: var(--bcn-surface);
  box-shadow: var(--bcn-shadow-lg);
}

.bcn-onb-head { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.125rem; }
.bcn-onb-act {
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bcn-accent);
  flex: none;
}
.bcn-onb-progress { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.bcn-onb-track { flex: 1; height: 3px; border-radius: 2px; background: var(--bcn-bg-sunken); overflow: hidden; }
.bcn-onb-fill { height: 100%; background: var(--bcn-accent); transition: width .3s ease; }
.bcn-onb-count { font-size: .6875rem; color: var(--bcn-text-faint); font-variant-numeric: tabular-nums; }

/* The timestamp is what turns a questionnaire into a week. */
.bcn-onb-when {
  font-family: var(--bcn-mono);
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--bcn-text-faint);
  margin-bottom: .5rem;
}
.bcn-onb-title { margin: 0 0 .75rem; font-family: var(--bcn-serif); font-size: 1.5rem; line-height: 1.25; font-weight: 500; }
.bcn-onb-prose { font-size: .9375rem; line-height: 1.6; }
.bcn-onb-prose p { margin: 0 0 .625rem; }
.bcn-onb-prose p:last-child { margin-bottom: 0; }

/* Consent, at the moment of answering. Quiet but not hidden. */
.bcn-onb-notice {
  display: flex;
  gap: .5rem;
  margin-top: .875rem;
  padding: .5rem .625rem;
  border-radius: .5rem;
  background: var(--bcn-bg-sunken);
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}
.bcn-onb-notice-mark { color: var(--bcn-accent); flex: none; }

.bcn-onb-choices { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.125rem; }
.bcn-onb-choice {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  width: 100%;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: .625rem;
  background: var(--bcn-surface);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
}
.bcn-onb-choice:hover { border-color: var(--bcn-border-strong); background: var(--bcn-bg-sunken); }
.bcn-onb-choice:active { transform: scale(.995); }
.bcn-onb-choice.is-picked { border-color: var(--bcn-accent); background: var(--bcn-accent-soft); }
.bcn-onb-choice-label { font-size: .875rem; line-height: 1.4; }
/* The joke line. Muted, so it reads as an aside rather than part of the choice. */
.bcn-onb-choice-aside { font-size: .75rem; color: var(--bcn-text-faint); font-style: italic; }

.bcn-onb-text { margin-top: 1.125rem; }
.bcn-onb-text textarea { width: 100%; }
.bcn-onb-actions { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.bcn-onb-actions.is-wide { margin-top: 1.375rem; flex-wrap: wrap; }
.bcn-onb-skip {
  border: 0;
  background: none;
  padding: .25rem 0;
  font: inherit;
  font-size: .75rem;
  color: var(--bcn-text-faint);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bcn-onb-skip:hover { color: var(--bcn-text-muted); }
.bcn-onb-foot { margin-top: 1.25rem; padding-top: .875rem; border-top: 1px solid var(--bcn-border); }

/* The read-back. Lines arrive one after another, because being read back to
   should feel like being listened to rather than like a results page. */
.bcn-onb-readback { margin: 1rem 0 0; }
.bcn-onb-line {
  margin: 0 0 .75rem;
  padding-left: .875rem;
  border-left: 2px solid var(--bcn-accent);
  font-family: var(--bcn-serif);
  font-size: 1.0625rem;
  line-height: 1.5;
  opacity: 0;
  animation: bcn-onb-line-in .4s ease forwards;
}
@keyframes bcn-onb-line-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .bcn-onb-line { animation: none; opacity: 1; }
  .bcn-onb-scrim, .bcn-onb-stage { animation: none; transition: none; }
}

/* A grid rather than flex-wrap: four chips in a row of three left one stranded
   across the full width, which read as a mistake. */
.bcn-onb-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .625rem;
  margin-top: 1.25rem;
}
.bcn-onb-chip {
  padding: .625rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: .625rem;
  background: var(--bcn-bg-sunken);
}
.bcn-onb-chip-value { display: block; font-size: 1.375rem; font-weight: 600; line-height: 1.1; }
.bcn-onb-chip-label { display: block; margin-top: .125rem; font-size: .6875rem; color: var(--bcn-text-muted); line-height: 1.35; }

.bcn-onb-kept {
  margin-top: 1.125rem;
  padding: .75rem .875rem;
  border-radius: .625rem;
  background: var(--bcn-accent-soft);
}
.bcn-onb-kept-head { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bcn-text-muted); }
.bcn-onb-kept-text { margin: .375rem 0 0; font-family: var(--bcn-serif); font-size: .9375rem; line-height: 1.45; }

.bcn-onb-applied { margin: 1rem 0 0; padding-left: 1.125rem; font-size: .875rem; line-height: 1.6; }
.bcn-onb-applied li { margin-bottom: .375rem; }

/* ─── The walkthrough ────────────────────────────────────────────────────── */

.bcn-tour { position: fixed; inset: 0; z-index: 210; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.bcn-tour.is-ready { opacity: 1; }
.bcn-tour.is-leaving { opacity: 0; }

/* The hole. One box, one enormous spread shadow — everything outside it dims,
   the box itself stays clear, and moving one element animates the spotlight. */
.bcn-tour-spot {
  position: fixed;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(24, 20, 16, .62);
  outline: 2px solid var(--bcn-accent);
  outline-offset: 0;
  pointer-events: none;
  transition: top .32s cubic-bezier(.4, 0, .2, 1), left .32s cubic-bezier(.4, 0, .2, 1),
              width .32s cubic-bezier(.4, 0, .2, 1), height .32s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="dark"] .bcn-tour-spot { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72); }

.bcn-tour-bubble {
  position: fixed;
  width: min(21rem, calc(100vw - 2rem));
  padding: .875rem 1rem 1rem;
  border: 1px solid var(--bcn-border);
  border-radius: 12px;
  background: var(--bcn-surface);
  box-shadow: var(--bcn-shadow-lg);
  pointer-events: auto;
  transition: top .32s cubic-bezier(.4, 0, .2, 1), left .32s cubic-bezier(.4, 0, .2, 1);
}
.bcn-tour-step {
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-tour-title { margin: .1875rem 0 .375rem; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.bcn-tour-body { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--bcn-text-muted); }
.bcn-tour-actions { display: flex; align-items: center; gap: .5rem; margin-top: .875rem; }
.bcn-tour-spacer { flex: 1; }
.bcn-tour-skip {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .75rem;
  color: var(--bcn-text-faint);
  cursor: pointer;
}
.bcn-tour-skip:hover { color: var(--bcn-text-muted); }

@media (prefers-reduced-motion: reduce) {
  .bcn-tour-spot, .bcn-tour-bubble { transition: none; }
}

/* ─── Offer to remember something ────────────────────────────────────────── */

/* Framed as a decision, not a notice: nothing has been stored when this appears,
   and a settled one keeps its outcome so scrolling back shows what was agreed. */
.bcn-memory-offer {
  margin-top: .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-left: 3px solid var(--bcn-accent);
  border-radius: .5rem;
  background: var(--bcn-surface);
}
.bcn-memory-offer.is-settled { border-left-color: var(--bcn-border-strong); opacity: .8; }
.bcn-memory-kicker {
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-memory-text {
  margin-top: .25rem;
  font-size: .875rem;
  font-weight: 550;
  line-height: 1.45;
}
.bcn-memory-why {
  margin: .3125rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}
.bcn-memory-meta {
  margin-top: .3125rem;
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}
.bcn-memory-actions { display: flex; gap: .375rem; margin-top: .625rem; }
.bcn-memory-settled {
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
}

/* ─── Knowledge graph ────────────────────────────────────────────────────── */

.bcn-graph { display: block; width: 100%; height: auto; }

.bcn-graph-edges line {
  stroke: var(--bcn-border-strong);
  opacity: .85;
}

/* Concern as one hue, light to dark, four steps. Not the status tokens — those
   are reserved for real states, and "this comes up a lot" is not an alarm. */
.bcn-graph-node circle,
.bcn-graph-node polygon {
  fill: var(--bcn-bg-sunken);
  stroke: var(--bcn-border-strong);
  stroke-width: 1.4;
  transition: stroke-width .12s;
}
.bcn-graph-node[data-concern="1"] circle,
.bcn-graph-node[data-concern="1"] polygon { fill: var(--bcn-accent-soft); }
.bcn-graph-node[data-concern="2"] circle,
.bcn-graph-node[data-concern="2"] polygon { fill: var(--bcn-accent); fill-opacity: .55; }
.bcn-graph-node[data-concern="3"] circle,
.bcn-graph-node[data-concern="3"] polygon { fill: var(--bcn-accent); fill-opacity: .85; }

/* A theme nobody filed. Dashed, because it exists only in conversation — and
   that is usually the one worth acting on. */
.bcn-graph-node.is-unfiled circle,
.bcn-graph-node.is-unfiled polygon { stroke-dasharray: 3 2.5; }

.bcn-graph-node:hover circle,
.bcn-graph-node:hover polygon,
.bcn-graph-node:focus-visible circle,
.bcn-graph-node:focus-visible polygon { stroke-width: 2.6; stroke: var(--bcn-text); }
.bcn-graph-node { cursor: help; outline: none; }

/* Text wears ink tokens, never the mark's colour. */
.bcn-graph-label {
  font-family: var(--bcn-sans);
  font-size: 10.5px;
  fill: var(--bcn-text-muted);
  pointer-events: none;
}
.bcn-graph-node:hover .bcn-graph-label { fill: var(--bcn-text); }

.bcn-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .875rem;
  margin-top: .5rem;
  font-size: .6875rem;
  color: var(--bcn-text-muted);
}
.bcn-graph-key { display: inline-flex; align-items: center; gap: .3125rem; }
.bcn-graph-key-mark {
  width: .625rem;
  height: .625rem;
  flex: none;
  border: 1.4px solid var(--bcn-border-strong);
  background: var(--bcn-accent-soft);
}
.bcn-graph-key.is-topic .bcn-graph-key-mark { border-radius: 50%; }
.bcn-graph-key.is-problem .bcn-graph-key-mark { transform: rotate(45deg); }
.bcn-graph-key.is-unfiled .bcn-graph-key-mark { border-radius: 50%; border-style: dashed; }
.bcn-graph-key.is-concern .bcn-graph-key-mark {
  border-radius: 2px;
  background: var(--bcn-accent);
  opacity: .85;
}
.bcn-graph-key.is-size .bcn-graph-key-mark {
  border-radius: 50%;
  width: .875rem;
  height: .875rem;
}
.bcn-graph-withheld {
  margin: .5rem 0 0;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--bcn-text-faint);
}

/* ─── Mermaid diagrams ───────────────────────────────────────────────────── */

/* Until it is drawn, a mermaid block *is* a code block and inherits everything
   above. These rules only describe the drawn state. */
.bcn-mermaid { margin: 0 0 1rem; }
.bcn-mermaid[data-rendered="1"] {
  width: var(--bcn-figure);
  margin-left: calc((100% - var(--bcn-figure)) / 2);
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
  overflow: hidden;
}
/* Scrolls rather than shrinks. A wide flowchart squeezed into the column is
   unreadable in a way that a scrollbar is not. */
/*
 * Figures break out of the reading column.
 *
 * The transcript is 46rem because that is the right measure for prose — a
 * paragraph 1,600px wide is unreadable. A diagram is not prose. On a 1920px
 * screen the old rule left 460px empty on each side while a Gantt squeezed into
 * 696px and scrolled, which is the worst of both: wasted screen *and* an
 * illegible chart.
 *
 * So text keeps its measure and anything that is really a picture widens to what
 * the window can spare. The width is capped rather than fluid, because a chart
 * stretched across an ultrawide monitor is its own kind of unreadable, and the
 * `100vw` term keeps it inside the window when the sidebar is taking space.
 */
.bcn-figure-wide {
  width: var(--bcn-figure);
  /* Centred on the column's own axis, so the figure grows evenly either side
     rather than sliding off to the left. */
  margin-left: calc((100% - var(--bcn-figure)) / 2);
}

/* Below this the sidebar is an overlay rather than a column, so the reserved
   21rem is wrong and there is nothing to break out of. */
@media (max-width: 64rem) {
  .bcn-figure-wide,
  .bcn-mermaid[data-rendered="1"],
  .bcn-chat-chart {
    width: 100%;
    margin-left: 0;
  }
}

.bcn-mermaid-figure {
  padding: .5rem;
  overflow-x: auto;
  text-align: center;
}
.bcn-mermaid-figure svg { max-width: 100%; height: auto; }
/* A diagram that opted out of fitting keeps its own size; the figure scrolls.
   Without this the rule above clamps it straight back to the column. */
.bcn-mermaid-figure.is-wide { text-align: left; }
.bcn-mermaid-figure.is-wide svg { max-width: none; }
.bcn-mermaid-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .25rem .5rem;
  border-top: 1px solid var(--bcn-border);
  background: var(--bcn-bg-sunken);
}
.bcn-mermaid-btn {
  border: 0;
  background: none;
  padding: .125rem .375rem;
  border-radius: 4px;
  color: var(--bcn-text-faint);
  font: inherit;
  font-size: .6875rem;
  cursor: pointer;
}
.bcn-mermaid-btn:hover { color: var(--bcn-text); background: var(--bcn-surface); }
/* What was dropped to make the diagram render. Left of the Source button. */
.bcn-mermaid-note {
  margin-right: auto;
  padding: .125rem .375rem;
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}
.bcn-mermaid-source {
  margin: 0;
  padding: .75rem .875rem;
  border-top: 1px solid var(--bcn-border);
  background: var(--bcn-code-bg);
  font-family: var(--bcn-mono);
  font-size: .75rem;
  line-height: 1.5;
  overflow-x: auto;
}
/* A diagram that could not be drawn says so under its source, rather than
   vanishing or leaving the reader to wonder whether it was meant to be there. */
.bcn-mermaid-error {
  margin: -.5rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}
.bcn-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .3125rem .625rem .3125rem .875rem;
  border-bottom: 1px solid var(--bcn-code-border);
  font-size: .75rem;
  color: var(--bcn-text-faint);
}
.bcn-code-lang { font-family: var(--bcn-mono); }
.bcn-copy {
  border: none;
  background: transparent;
  color: var(--bcn-text-faint);
  font-size: .75rem;
  padding: .125rem .375rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.bcn-copy:hover { background: var(--bcn-border); color: var(--bcn-text); }
.bcn-code-block pre {
  margin: 0;
  padding: .875rem;
  overflow-x: auto;
  font-family: var(--bcn-mono);
  font-size: .8125rem;
  line-height: 1.6;
}
.bcn-code-block pre code { background: none; border: none; padding: 0; font-size: inherit; }

.bcn-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.bcn-prose table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.bcn-prose th, .bcn-prose td {
  border: 1px solid var(--bcn-border);
  padding: .4375rem .625rem;
  text-align: left;
}
.bcn-prose th { background: var(--bcn-bg-sunken); font-weight: 600; }

/* ─── Tool chips ─────────────────────────────────────────────────────────── */

.bcn-tools { margin: 0 0 .875rem; display: flex; flex-direction: column; gap: .375rem; }

.bcn-tool {
  border: 1px solid var(--bcn-border);
  border-radius: 9px;
  background: var(--bcn-surface);
  overflow: hidden;
}

.bcn-tool-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .4375rem .625rem;
  border: none;
  background: transparent;
  color: var(--bcn-text-muted);
  font-size: .8125rem;
  cursor: pointer;
  text-align: left;
}
.bcn-tool-head:hover { background: var(--bcn-bg-sunken); }

.bcn-tool-dot {
  flex: 0 0 auto;
  width: .4375rem;
  height: .4375rem;
  border-radius: 999px;
  background: var(--bcn-text-faint);
}
.bcn-tool.is-running .bcn-tool-dot { background: var(--bcn-accent); animation: bcn-blink 1.1s ease-in-out infinite; }
.bcn-tool.is-ok .bcn-tool-dot { background: var(--bcn-ok); }
.bcn-tool.is-failed .bcn-tool-dot { background: var(--bcn-danger); }
@keyframes bcn-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.bcn-tool-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcn-tool-label b { font-weight: 500; color: var(--bcn-text); }

.bcn-tool-caret {
  flex: 0 0 auto;
  color: var(--bcn-text-faint);
  transition: transform .15s;
}
.bcn-tool.is-open .bcn-tool-caret { transform: rotate(90deg); }

.bcn-tool-body {
  border-top: 1px solid var(--bcn-border);
  padding: .625rem .75rem;
  font-family: var(--bcn-mono);
  font-size: .75rem;
  line-height: 1.55;
  color: var(--bcn-text-muted);
  max-height: 22rem;
  overflow: auto;
}
.bcn-tool-body h4 {
  margin: 0 0 .25rem;
  font-family: var(--bcn-sans);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-tool-body pre { margin: 0 0 .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.bcn-tool-body pre:last-child { margin-bottom: 0; }

/* ─── Thinking indicator ─────────────────────────────────────────────────── */

.bcn-thinking {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--bcn-text-faint);
  font-size: .875rem;
}
.bcn-thinking-dots { display: inline-flex; gap: .1875rem; }
.bcn-thinking-dots span {
  width: .3125rem;
  height: .3125rem;
  border-radius: 999px;
  background: currentColor;
  animation: bcn-bounce 1.3s ease-in-out infinite;
}
.bcn-thinking-dots span:nth-child(2) { animation-delay: .16s; }
.bcn-thinking-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes bcn-bounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

.bcn-turn-error {
  margin-top: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--bcn-danger);
  border-radius: 9px;
  background: var(--bcn-danger-soft);
  color: var(--bcn-danger);
  font-size: .8125rem;
}

.bcn-turn-foot {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .5rem;
  opacity: 0;
  transition: opacity .15s;
}
.bcn-turn-assistant:hover .bcn-turn-foot,
.bcn-turn-foot:focus-within { opacity: 1; }
.bcn-turn-meta {
  margin-left: .375rem;
  font-size: .75rem;
  color: var(--bcn-text-faint);
}

/* ─── Composer ───────────────────────────────────────────────────────────── */

.bcn-composer-dock {
  flex: 0 0 auto;
  padding: 0 1.25rem 1.125rem;
  background: linear-gradient(to top, var(--bcn-bg) 62%, transparent);
}

.bcn-composer {
  max-width: var(--bcn-col);
  margin: 0 auto;
  border: 1px solid var(--bcn-border-strong);
  border-radius: 16px;
  background: var(--bcn-surface);
  box-shadow: var(--bcn-shadow-md);
  transition: border-color .15s, box-shadow .15s;
}
.bcn-composer:focus-within {
  border-color: var(--bcn-text-faint);
  box-shadow: var(--bcn-shadow-lg);
}

.bcn-composer-input {
  display: block;
  width: 100%;
  max-height: 18rem;
  min-height: 3.25rem;
  padding: .9375rem 1rem .25rem;
  border: none;
  background: transparent;
  resize: none;
  overflow-y: auto;
  line-height: 1.55;
  scrollbar-width: thin;
}
.bcn-composer-input:focus { outline: none; }
.bcn-composer-input::placeholder { color: var(--bcn-text-faint); }

.bcn-composer-foot {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .5rem .5rem .625rem;
}

/* ─── Attachments ────────────────────────────────────────────────────────── */

/* The composer border is the drop target, so it is the thing that reacts. A
   full-screen overlay would be more obvious and much easier to leave stuck. */
.bcn-composer.is-dropping {
  border-color: var(--bcn-accent);
  box-shadow: 0 0 0 3px var(--bcn-accent-soft), var(--bcn-shadow-md);
}

.bcn-composer-tray {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  padding: .625rem .625rem 0;
}

.bcn-composer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--bcn-text-faint);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.bcn-composer-btn:hover:not(:disabled) { background: var(--bcn-bg-sunken); color: var(--bcn-text); }
.bcn-composer-btn:disabled { opacity: .4; cursor: default; }
/* Recording is a state worth being unmistakable about — a microphone left live by
   accident is the kind of thing that costs trust rather than time. */
.bcn-composer-btn.is-recording {
  background: var(--bcn-danger-soft);
  color: var(--bcn-danger);
  animation: bcn-pulse 1.6s ease-in-out infinite;
}
@keyframes bcn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .bcn-composer-btn.is-recording { animation: none; }
}
.bcn-composer-timer {
  font-family: var(--bcn-mono);
  font-size: .6875rem;
  color: var(--bcn-danger);
  font-variant-numeric: tabular-nums;
}

.bcn-attachment-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 100%;
  padding: .3125rem .4375rem;
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-bg-sunken);
  font-size: .75rem;
}
.bcn-attachment-chip.is-uploading { opacity: .7; }
.bcn-attachment-chip.is-error { border-color: var(--bcn-danger); background: var(--bcn-danger-soft); }
.bcn-attachment-chip.is-error .bcn-attachment-meta { color: var(--bcn-danger); }

.bcn-attachment-thumb {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bcn-surface);
}
.bcn-attachment-glyph {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--bcn-surface);
  border: 1px solid var(--bcn-border);
  color: var(--bcn-text-faint);
}
.bcn-attachment-body { min-width: 0; display: flex; flex-direction: column; gap: .0625rem; }
.bcn-attachment-label {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcn-attachment-meta { font-size: .6875rem; color: var(--bcn-text-faint); }
.bcn-attachment-audio { height: 2rem; max-width: 15rem; }
.bcn-attachment-drop {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--bcn-text-faint);
  font-size: .625rem;
  line-height: 1;
  cursor: pointer;
}
.bcn-attachment-drop:hover { background: var(--bcn-surface); color: var(--bcn-danger); }

/* In the transcript: right-aligned to sit with the user's own bubble. */
.bcn-attachment-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .375rem;
  margin-bottom: .375rem;
}
.bcn-attachment-row .bcn-attachment-chip { background: var(--bcn-user-bubble); }
/* A single image is worth more than a chip's worth of space. */
.bcn-attachment-row .bcn-attachment-chip.is-image .bcn-attachment-thumb {
  width: 7rem;
  height: 7rem;
}

.bcn-picker { position: relative; }

.bcn-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;
  padding: .3125rem .5rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--bcn-text-muted);
  font-size: .8125rem;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.bcn-picker-btn:hover { background: var(--bcn-bg-sunken); color: var(--bcn-text); }
.bcn-picker-btn .bcn-glyph { color: var(--bcn-accent); }

.bcn-picker-menu {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 0;
  z-index: 20;
  width: 19rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: .3125rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface-raised);
  box-shadow: var(--bcn-shadow-lg);
}
.bcn-picker-menu[hidden] { display: none; }

.bcn-picker-item {
  display: block;
  width: 100%;
  padding: .5rem .625rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .13s;
}
.bcn-picker-item:hover { background: var(--bcn-bg-sunken); }
.bcn-picker-item.is-active { background: var(--bcn-accent-soft); }
.bcn-picker-name {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 500;
}
.bcn-picker-name .bcn-glyph { color: var(--bcn-accent); }
.bcn-picker-blurb {
  margin-top: .0625rem;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}

.bcn-composer-spacer { flex: 1; }

.bcn-send {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: var(--bcn-accent);
  color: var(--bcn-accent-text);
  cursor: pointer;
  transition: background .13s, opacity .13s;
}
.bcn-send:hover:not(:disabled) { background: var(--bcn-accent-hover); }
.bcn-send:disabled { opacity: .32; cursor: default; }

.bcn-stop {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--bcn-border-strong);
  border-radius: 8px;
  background: var(--bcn-surface);
  color: var(--bcn-text);
  cursor: pointer;
}
.bcn-stop:hover { background: var(--bcn-bg-sunken); }

.bcn-composer-hint {
  max-width: var(--bcn-col);
  margin: .4375rem auto 0;
  text-align: center;
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}

/* ─── Tools panel ────────────────────────────────────────────────────────── */

.bcn-panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(30, 26, 20, .32);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
[data-theme="dark"] .bcn-panel-scrim { background: rgba(0, 0, 0, .55); }

.bcn-panel {
  width: min(34rem, 100%);
  max-height: min(34rem, 84vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bcn-border);
  border-radius: 14px;
  background: var(--bcn-surface-raised);
  box-shadow: var(--bcn-shadow-lg);
  overflow: hidden;
}
.bcn-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--bcn-border);
}
.bcn-panel-title { font-family: var(--bcn-serif); font-size: 1.125rem; }
.bcn-panel-body { overflow-y: auto; padding: .75rem 1rem 1rem; }
.bcn-panel-group {
  margin: 1rem 0 .375rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-panel-group:first-child { margin-top: 0; }
.bcn-panel-tool {
  padding: .5rem 0;
  border-bottom: 1px solid var(--bcn-border);
}
.bcn-panel-tool:last-child { border-bottom: none; }
.bcn-panel-tool-name {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
}
.bcn-panel-tool-name code {
  font-family: var(--bcn-mono);
  font-size: .75rem;
  font-weight: 400;
  color: var(--bcn-text-faint);
}
.bcn-panel-tool-desc {
  margin-top: .125rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--bcn-text-muted);
}
.bcn-panel-note {
  margin: 1rem 0 0;
  padding-top: .875rem;
  border-top: 1px solid var(--bcn-border);
  font-size: .75rem;
  line-height: 1.55;
  color: var(--bcn-text-faint);
}
.bcn-panel-note code { font-family: var(--bcn-mono); }

/* ─── Toast ──────────────────────────────────────────────────────────────── */

.bcn-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 80;
  padding: .5rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: 9px;
  background: var(--bcn-surface-raised);
  box-shadow: var(--bcn-shadow-md);
  font-size: .8125rem;
  animation: bcn-rise .2s ease;
}
.bcn-toast.is-error { border-color: var(--bcn-danger); color: var(--bcn-danger); }
@keyframes bcn-rise {
  from { opacity: 0; transform: translate(-50%, .5rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ─── Small screens ──────────────────────────────────────────────────────── */

.bcn-sidebar-scrim { display: none; }

@media (max-width: 52rem) {
  .bcn-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    box-shadow: var(--bcn-shadow-lg);
  }
  .bcn-shell:not(.is-collapsed) .bcn-sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(30, 26, 20, .3);
  }
  .bcn-expand { display: inline-grid; }
  .bcn-transcript, .bcn-composer, .bcn-composer-hint { max-width: 100%; }
  .bcn-user-bubble { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══ Views ═══════════════════════════════════════════════════════════════════
 * Chat, Plans, Scoreboard and Settings share the main column. Only one is ever
 * un-hidden, and each fills the column itself.
 */

.bcn-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* The document views scroll as one page rather than pinning a composer. */
.bcn-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 1rem 4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--bcn-border-strong) transparent;
}
.bcn-pane::-webkit-scrollbar { width: 10px; }
.bcn-pane::-webkit-scrollbar-thumb { background: var(--bcn-border-strong); border-radius: 5px; }
/* A share of the pane rather than a fixed measure.
   These pages are tables, cards and forms, not prose — a 58rem cap was the
   right rule for a paragraph and the wrong one here, and on a wide screen it
   left most of the window empty while the rows it was protecting wrapped. */
.bcn-pane > * { max-width: 80%; margin-inline: auto; }

.bcn-loading { padding: 3rem 0; text-align: center; color: var(--bcn-text-faint); }

/* ─── Sidebar navigation ─────────────────────────────────────────────────── */

.bcn-nav {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .25rem .5rem .5rem;
  border-bottom: 1px solid var(--bcn-border);
  margin-bottom: .5rem;
}

.bcn-nav-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .625rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--bcn-text-muted);
  font-size: .875rem;
  cursor: pointer;
  text-align: left;
  transition: background .13s, color .13s;
}
.bcn-nav-item:hover { background: var(--bcn-bg-sunken); color: var(--bcn-text); }
.bcn-nav-item.is-active { background: var(--bcn-accent-soft); color: var(--bcn-text); font-weight: 500; }
.bcn-nav-glyph { color: var(--bcn-accent); width: 1rem; text-align: center; }

.bcn-sidebar-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.bcn-account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bcn-account-role { font-size: .6875rem; color: var(--bcn-text-faint); text-transform: capitalize; }

/* ─── Page and section scaffolding ───────────────────────────────────────── */

.bcn-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  padding: 1.5rem 0 1.25rem;
}
.bcn-page-title {
  font-family: var(--bcn-serif);
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 0;
  flex: 0 0 auto;
}
.bcn-page-sub {
  flex: 1 1 18rem;
  margin: 0;
  font-size: .875rem;
  color: var(--bcn-text-muted);
  text-wrap: pretty;
}

.bcn-section {
  padding: 1.25rem 0;
  border-top: 1px solid var(--bcn-border);
}
.bcn-section-head { margin-bottom: .875rem; }
.bcn-section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.005em;
}
.bcn-section-desc {
  margin: .25rem 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--bcn-text-muted);
  max-width: 44rem;
  text-wrap: pretty;
}

.bcn-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--bcn-text-muted);
}
.bcn-empty p { margin: 0 0 1rem; text-wrap: balance; }
.bcn-inline-empty {
  margin: .5rem 0;
  font-size: .8125rem;
  color: var(--bcn-text-faint);
}

/* ─── Controls ───────────────────────────────────────────────────────────── */

.bcn-btn {
  padding: .4375rem .75rem;
  border: 1px solid var(--bcn-border-strong);
  border-radius: 8px;
  background: var(--bcn-surface);
  color: var(--bcn-text);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .13s, border-color .13s, color .13s;
}
.bcn-btn:hover:not(:disabled) { background: var(--bcn-bg-sunken); border-color: var(--bcn-text-faint); }
.bcn-btn:disabled { opacity: .5; cursor: default; }
.bcn-btn.is-primary {
  background: var(--bcn-accent);
  border-color: var(--bcn-accent);
  color: var(--bcn-accent-text);
}
.bcn-btn.is-primary:hover:not(:disabled) { background: var(--bcn-accent-hover); border-color: var(--bcn-accent-hover); }
.bcn-btn.is-danger { color: var(--bcn-danger); border-color: transparent; background: transparent; }
.bcn-btn.is-danger:hover:not(:disabled) { background: var(--bcn-danger-soft); border-color: var(--bcn-danger); }

.bcn-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .625rem;
  align-items: center;
}

.bcn-field { display: block; margin-bottom: .875rem; }
.bcn-field-label {
  display: block;
  margin-bottom: .25rem;
  font-size: .8125rem;
  font-weight: 500;
}
.bcn-field-hint {
  display: block;
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--bcn-text-faint);
}

.bcn-input {
  display: block;
  width: 100%;
  padding: .4375rem .625rem;
  border: 1px solid var(--bcn-border-strong);
  border-radius: 8px;
  background: var(--bcn-surface);
  color: var(--bcn-text);
  font-size: .875rem;
}
.bcn-input:focus { outline: none; border-color: var(--bcn-accent); box-shadow: 0 0 0 3px var(--bcn-accent-soft); }
.bcn-input:disabled { background: var(--bcn-bg-sunken); color: var(--bcn-text-muted); }
.bcn-textarea { resize: vertical; line-height: 1.55; font-family: inherit; }
.bcn-select { cursor: pointer; }

.bcn-upload-status { font-size: .8125rem; color: var(--bcn-text-muted); }

/* ─── Badges and progress ────────────────────────────────────────────────── */

.bcn-badge {
  display: inline-block;
  padding: .0625rem .375rem;
  border-radius: 5px;
  background: var(--bcn-bg-sunken);
  border: 1px solid var(--bcn-border);
  color: var(--bcn-text-muted);
  font-size: .6875rem;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
}
.bcn-badge.is-ok { background: color-mix(in srgb, var(--bcn-ok) 14%, transparent); border-color: var(--bcn-ok); color: var(--bcn-ok); }
.bcn-badge.is-warn { background: var(--bcn-danger-soft); border-color: var(--bcn-danger); color: var(--bcn-danger); }
.bcn-badge.is-active { background: var(--bcn-accent-soft); border-color: var(--bcn-accent); color: var(--bcn-accent); }
.bcn-badge.is-muted { opacity: .8; }

.bcn-progress {
  flex: 1;
  height: .375rem;
  border-radius: 999px;
  background: var(--bcn-bg-sunken);
  border: 1px solid var(--bcn-border);
  overflow: hidden;
}
.bcn-progress-fill {
  height: 100%;
  /* Quiet by default, because most bars mean nothing more than "in progress".
     This used to be the terracotta accent, a near-twin of the danger red the
     `is-warn` bar uses — so a Plans page of perfectly healthy goals at 25% and
     33% read as a wall of alarm, and the one bar that was actually a warning
     had nothing left to distinguish it. Colour is reserved for the two states
     that mean something: finished, and in trouble. */
  background: var(--bcn-text-faint);
  border-radius: 999px;
  transition: width .3s ease;
}
.bcn-progress-fill.is-ok { background: var(--bcn-ok); }
.bcn-progress-fill.is-warn { background: var(--bcn-danger); }
/* Where the bar is the subject rather than a row decoration, the accent is
   still the right weight — a KPI tile has one bar and no wall to become. */
.bcn-kpi .bcn-progress-fill:not(.is-ok):not(.is-warn) { background: var(--bcn-accent); }
.bcn-progress-label {
  flex: 0 0 auto;
  font-size: .75rem;
  color: var(--bcn-text-faint);
  white-space: nowrap;
}

/* ─── Plans ──────────────────────────────────────────────────────────────── */

.bcn-plan {
  margin-bottom: 1.5rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
}
.bcn-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.bcn-plan-title-wrap { min-width: 0; }
.bcn-plan-title {
  font-family: var(--bcn-serif);
  font-size: 1.375rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: -.01em;
}
.bcn-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--bcn-text-faint);
  align-items: center;
}
.bcn-plan-head .bcn-row-actions { margin-top: 0; }

.bcn-plan-narrative { margin: .875rem 0; }
.bcn-plan-narrative summary {
  cursor: pointer;
  font-size: .8125rem;
  color: var(--bcn-accent);
  padding: .25rem 0;
}
.bcn-plan-narrative .bcn-prose {
  margin-top: .625rem;
  padding: .875rem 1rem;
  border-left: 2px solid var(--bcn-border-strong);
  background: var(--bcn-bg-sunken);
  border-radius: 0 8px 8px 0;
  font-size: .9375rem;
}

.bcn-goal {
  margin-top: .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-bg);
}
.bcn-goal-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: space-between;
}
.bcn-goal-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.bcn-caret { color: var(--bcn-text-faint); transition: transform .15s; flex: 0 0 auto; }
.bcn-caret.is-open { transform: rotate(90deg); }
.bcn-goal-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcn-goal-status { display: flex; gap: .25rem; flex: 0 0 auto; }

.bcn-goal-facts,
.bcn-objective-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: .375rem 0 .5rem 1.25rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
}
.bcn-metric { font-family: var(--bcn-mono); font-size: .7188rem; }

.bcn-goal-progress,
.bcn-objective-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: 1.25rem;
}
.bcn-goal-body { margin: .875rem 0 0 1.25rem; }
.bcn-goal-desc { margin: 0 0 .5rem; font-size: .875rem; color: var(--bcn-text-muted); }

.bcn-objectives { margin-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.bcn-objective {
  padding: .625rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: 9px;
  background: var(--bcn-surface);
}
.bcn-objective-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.bcn-objective-title { font-size: .9375rem; font-weight: 500; min-width: 0; }
.bcn-objective-tags { display: flex; align-items: center; gap: .375rem; flex: 0 0 auto; }
.bcn-objective-goal { font-size: .75rem; color: var(--bcn-text-faint); margin-bottom: .25rem; }
.bcn-objective .bcn-objective-facts,
.bcn-objective .bcn-objective-progress { margin-left: 0; }
.bcn-points { font-size: .75rem; color: var(--bcn-accent); font-weight: 500; white-space: nowrap; }
.bcn-checkin {
  margin: .5rem 0 0;
  font-size: .8125rem;
  color: var(--bcn-text-muted);
  font-style: italic;
}

/* ─── People table ───────────────────────────────────────────────────────── */

.bcn-table {
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: .875rem;
}
.bcn-table-row {
  display: grid;
  /* Every track is a fixed size, including the last one.
     It used to end in `auto`, and each row is its own grid — so the header row,
     whose final cell is empty, sized that track to nothing while the body rows
     sized it to an Edit and a Remove button. The 2.2fr absorbed the difference
     and every column in the header landed about 128px right of the data it was
     labelling: "219%" sat under CAPACITY and the hours under GROUP. */
  grid-template-columns: minmax(10rem, 2.2fr) 6rem 8rem 6rem 6rem 4rem 8.5rem;
  gap: .5rem;
  align-items: center;
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--bcn-border);
  font-size: .8125rem;
}
.bcn-table-row:last-child { border-bottom: none; }
.bcn-table-row.is-header {
  background: var(--bcn-bg-sunken);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-table-cell { min-width: 0; overflow-wrap: anywhere; text-transform: capitalize; }
.bcn-table-row.is-header .bcn-table-cell { text-transform: uppercase; }
.bcn-table-actions { display: flex; gap: .25rem; justify-content: flex-end; text-transform: none; }
.bcn-person-name {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-weight: 500;
  text-transform: none;
}
.bcn-person-sub {
  font-size: .75rem;
  color: var(--bcn-text-faint);
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Documents and groups ───────────────────────────────────────────────── */

.bcn-doc-list, .bcn-group-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-top: .875rem;
}
.bcn-doc, .bcn-group {
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-surface);
}
.bcn-doc-head, .bcn-group-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: space-between;
}
.bcn-doc-name, .bcn-group-name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.bcn-group-count { font-size: .75rem; color: var(--bcn-text-faint); flex: 0 0 auto; }
.bcn-doc-summary, .bcn-group-charter {
  margin: .375rem 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--bcn-text-muted);
}
.bcn-doc-error { margin: .375rem 0 0; font-size: .8125rem; color: var(--bcn-danger); }
.bcn-doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--bcn-text-faint);
}

/* ─── Scoreboard ─────────────────────────────────────────────────────────── */

.bcn-board {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-top: .875rem;
}
.bcn-board-row {
  display: grid;
  grid-template-columns: 2rem minmax(8rem, 1.4fr) minmax(4rem, 2fr) 4rem;
  gap: .75rem;
  align-items: center;
  padding: .5rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: 9px;
  background: var(--bcn-surface);
}
.bcn-board-row.is-me { border-color: var(--bcn-accent); background: var(--bcn-accent-soft); }
.bcn-board-rank {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 999px;
  background: var(--bcn-bg-sunken);
  color: var(--bcn-text-muted);
  font-size: .75rem;
  font-weight: 600;
}
.bcn-board-rank.is-first { background: var(--bcn-accent); color: var(--bcn-accent-text); }
.bcn-board-who { min-width: 0; }
.bcn-board-name {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-weight: 500;
  font-size: .9375rem;
}
.bcn-board-sub { font-size: .75rem; color: var(--bcn-text-faint); }
.bcn-board-bar { display: flex; align-items: center; }
.bcn-board-points {
  text-align: right;
  font-weight: 600;
  font-family: var(--bcn-mono);
  font-size: .875rem;
}

/* ─── Dialog ─────────────────────────────────────────────────────────────── */

.bcn-dialog { width: min(32rem, 100%); }
.bcn-panel-foot {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--bcn-border);
}
.bcn-dialog-error { font-size: .8125rem; color: var(--bcn-danger); }

/* ─── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 64rem) {
  /* 80% of a small window is not a comfortable measure, it is a wasted tenth
     down each side of an already narrow page. */
  .bcn-pane > * { max-width: 100%; }
}

@media (max-width: 52rem) {
  .bcn-pane { padding-inline: .75rem; }
  .bcn-table-row {
    grid-template-columns: 1fr auto;
    row-gap: .25rem;
  }
  /* Drop the columns that only make sense side by side; the name cell still
     carries the email and title, which is what identifies the row. */
  .bcn-table-row .bcn-table-cell:nth-child(3),
  .bcn-table-row .bcn-table-cell:nth-child(4) { display: none; }
  .bcn-table-row.is-header { display: none; }
  .bcn-board-row { grid-template-columns: 1.75rem 1fr 3.5rem; }
  .bcn-board-bar { display: none; }
}

/* ─── Gate failure ───────────────────────────────────────────────────────────
 * Shown when the page and the API disagree about whether this session is
 * allowed. Deliberately a dead end rather than another reload: the whole point
 * is to stop the loop and hand over something actionable.
 */

.bcn-fatal {
  max-width: 30rem;
  padding: 2rem;
  text-align: center;
}
.bcn-fatal-title {
  font-family: var(--bcn-serif);
  font-size: 1.25rem;
  margin: 0 0 .75rem;
  text-wrap: balance;
}
.bcn-fatal-detail {
  margin: 0 0 1.5rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--bcn-text-muted);
  text-wrap: pretty;
}
.bcn-fatal .bcn-btn { margin: 0 .25rem; }

/* ═══ Layout corrections ═════════════════════════════════════════════════════
 * Appended after the base rules so these win on equal specificity. Each block
 * says what was wrong, because "it looked rough" is otherwise unmaintainable.
 */

/* ─── Picker menus ───────────────────────────────────────────────────────────
 * Was absolutely positioned inside the picker, which put it inside the
 * transcript's scroll container on an empty chat: clipped at every width below
 * 1400px, and 24px off the top of the window at 900px tall. Fixed positioning
 * escapes every ancestor's overflow; ui.js places it and keeps it on screen.
 */
.bcn-picker-menu {
  position: fixed;
  inset: auto;
  bottom: auto;
  left: 0;
  top: 0;
  width: 19rem;
  max-width: calc(100vw - 1rem);
  z-index: 60;
  overscroll-behavior: contain;
}

/* ─── Readable measure for form controls ─────────────────────────────────────
 * Inputs stretched the full 58rem pane, so a company-name field ran ~1300px.
 * Nothing is easier to read for being wider than the text it holds.
 */
.bcn-field { max-width: 34rem; }
.bcn-field .bcn-input { width: 100%; }
/* Short, known-length values get a short box — but only the box. Constraining
   the whole field squeezed the hint underneath it into a three-line column. */
.bcn-field:has(input[type="number"]) .bcn-input,
.bcn-field:has(input[type="date"]) .bcn-input { max-width: 11rem; }
/* Prose fields earn the full measure. */
.bcn-field:has(textarea) { max-width: 44rem; }
.bcn-dialog .bcn-field,
.bcn-dialog .bcn-field:has(textarea) { max-width: none; }

/* ─── Page header ────────────────────────────────────────────────────────────
 * Title, subtitle and action were baseline-aligned in one row, so the subtitle
 * hung off the title's baseline and wrapped raggedly. Give the text a column
 * and let the action sit opposite it.
 */
.bcn-page-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .75rem 1.5rem;
  padding: 1.75rem 0 1.25rem;
}
.bcn-page-title { grid-column: 1; line-height: 1.15; }
.bcn-page-sub {
  grid-column: 1;
  margin-top: .25rem;
  max-width: 42rem;
}
.bcn-page-head > .bcn-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
}

/* ─── Progress bars ──────────────────────────────────────────────────────────
 * Stretched the full card, leaving the label a thousand pixels from the bar it
 * described. A meter only needs enough width to read a proportion.
 */
.bcn-goal-progress,
.bcn-objective-progress { max-width: 30rem; }
.bcn-progress { max-width: 22rem; }
.bcn-board-bar .bcn-progress { max-width: none; }

/* ─── Nesting weight ─────────────────────────────────────────────────────────
 * Plan → goal → objective was three nested boxes, each with its own border and
 * fill. The boxes competed with the content. Keep the outer plan as a card, and
 * express the two levels below it with indentation and a single rule.
 */
.bcn-goal {
  border: none;
  border-top: 1px solid var(--bcn-border);
  border-radius: 0;
  background: transparent;
  margin-top: 0;
  padding: 1rem 0 1.125rem;
}
.bcn-plan .bcn-goal:first-of-type { border-top: none; }

.bcn-goal-body {
  margin-left: 1.25rem;
  padding-left: 1rem;
  border-left: 2px solid var(--bcn-border);
}

.bcn-objectives { gap: 0; }
.bcn-objective {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: .75rem 0;
  border-top: 1px dashed var(--bcn-border);
}
.bcn-objectives > .bcn-objective:first-child { border-top: none; }

/* A Collaborator sees objectives on their own, with no goal card around them,
   so there they keep a card of their own to sit in. */
.bcn-section > .bcn-objective {
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-surface);
  padding: .75rem .875rem;
  margin-bottom: .625rem;
}

/* ─── Row actions ────────────────────────────────────────────────────────────
 * Every objective carried three fully-bordered buttons, permanently. On a plan
 * with a dozen objectives that is three dozen competing chrome elements. Make
 * them quiet text, and let the destructive one stay recessed until wanted.
 */
.bcn-goal-body .bcn-row-actions .bcn-btn,
.bcn-objective .bcn-row-actions .bcn-btn {
  border-color: transparent;
  background: transparent;
  padding: .25rem .4375rem;
  color: var(--bcn-text-muted);
}
.bcn-goal-body .bcn-row-actions .bcn-btn:hover:not(:disabled),
.bcn-objective .bcn-row-actions .bcn-btn:hover:not(:disabled) {
  background: var(--bcn-bg-sunken);
  border-color: var(--bcn-border);
  color: var(--bcn-text);
}
.bcn-objective .bcn-row-actions { margin-top: .4375rem; }

/* Revealing these on hover was tried and reverted: a zero opacity still reserves
   the row, so every objective carried a blank band under it that read as a
   layout bug. Now that the buttons are quiet text rather than chrome, showing
   them always is both calmer and honest about what is clickable. */

/* ─── Goal facts ─────────────────────────────────────────────────────────────
 * A run of unlabelled values with only whitespace between them. Separate them.
 */
.bcn-goal-facts,
.bcn-objective-facts { gap: 0; align-items: baseline; }
.bcn-goal-facts > * + *,
.bcn-objective-facts > * + * {
  padding-left: .5rem;
  margin-left: .5rem;
  border-left: 1px solid var(--bcn-border);
}

/* ─── Chat welcome ───────────────────────────────────────────────────────────
 * The suggestion chips wrapped 1/2/1 and centred, which read as debris under
 * the composer. Two even columns hold their shape at every width.
 */
.bcn-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: 1.5rem;
}
.bcn-suggestion {
  text-align: left;
  padding: .625rem .875rem;
  border-radius: 10px;
  line-height: 1.4;
}
@media (max-width: 40rem) {
  .bcn-suggestions { grid-template-columns: 1fr; }
}

/* ─── Section rhythm ─────────────────────────────────────────────────────────
 * Sections ran together; the first one carried a rule against the page header.
 */
.bcn-section { padding: 1.75rem 0; }
.bcn-section:first-of-type { border-top: none; padding-top: .5rem; }

/* ─── Folded sections ─────────────────────────────────────────────────────────
 * Reference material a role is allowed to see but should not have to scroll
 * through. A folded section reads as one line with a count, so the decision to
 * open it is made from the heading rather than by scrolling past the contents.
 */
.bcn-fold > summary {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  cursor: pointer;
  list-style: none;
  border-radius: 8px;
  padding: .25rem .5rem;
  margin: -.25rem -.5rem;
  transition: background .13s;
}
.bcn-fold > summary::-webkit-details-marker { display: none; }
.bcn-fold > summary:hover { background: var(--bcn-bg-sunken); }
.bcn-fold > summary:focus-visible { outline: 2px solid var(--bcn-accent); outline-offset: 2px; }
/* The twisty, drawn rather than inherited so it matches the rest of the page. */
.bcn-fold > summary::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: .4rem;
  height: .4rem;
  margin-right: .125rem;
  border-right: 1.5px solid var(--bcn-text-faint);
  border-bottom: 1.5px solid var(--bcn-text-faint);
  transform: rotate(-45deg);
  transition: transform .15s ease;
}
.bcn-fold[open] > summary::before { transform: rotate(45deg); }
/* A collapsed heading is one line: the description is what you get on opening. */
.bcn-fold > summary .bcn-section-head { margin-bottom: 0; flex: 1; min-width: 0; }
.bcn-fold:not([open]) > summary .bcn-section-desc { display: none; }
.bcn-fold[open] > summary { margin-bottom: .875rem; }
.bcn-fold-count {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--bcn-bg-sunken);
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--bcn-text-muted);
}
.bcn-section > .bcn-btn { margin-top: .25rem; }

/* ─── Documents and groups ───────────────────────────────────────────────── */
/* The card fills the column; the one paragraph inside it keeps a measure.
   Capping the whole card at 44rem was the same mistake as capping the page —
   it protected the summary by stranding the name, the badge, the metadata and
   the buttons in a column half the width of the one they sit in. */
.bcn-doc-summary, .bcn-group-charter { max-width: 62rem; }
.bcn-doc .bcn-row-actions,
.bcn-group .bcn-row-actions { margin-top: .5rem; }

/* ═══ Board, Overview, Archive ═══════════════════════════════════════════════ */

/* The board and the dashboard want everything the window has. */
.bcn-pane.is-wide > * { max-width: 100%; }

/* ─── Filters ────────────────────────────────────────────────────────────── */

.bcn-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding-bottom: 1.25rem;
}
.bcn-filter-select { width: auto; min-width: 9rem; }
.bcn-filter-search { width: auto; min-width: 14rem; flex: 1 1 14rem; max-width: 22rem; }

.bcn-segmented {
  display: inline-flex;
  border: 1px solid var(--bcn-border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bcn-surface);
}
.bcn-segment {
  padding: .4375rem .75rem;
  border: none;
  border-right: 1px solid var(--bcn-border);
  background: transparent;
  color: var(--bcn-text-muted);
  font-size: .8125rem;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.bcn-segment:last-child { border-right: none; }
.bcn-segment:hover { background: var(--bcn-bg-sunken); color: var(--bcn-text); }
.bcn-segment.is-active { background: var(--bcn-accent-soft); color: var(--bcn-accent); font-weight: 500; }

/* ─── Kanban ─────────────────────────────────────────────────────────────── */

.bcn-board-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(15rem, 1fr));
  gap: .875rem;
  align-items: start;
}

.bcn-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bcn-bg-sunken);
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  padding: .75rem .625rem;
}
.bcn-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 .25rem;
}
.bcn-column-title { font-weight: 600; font-size: .875rem; }
.bcn-column-count {
  min-width: 1.375rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--bcn-surface);
  border: 1px solid var(--bcn-border);
  color: var(--bcn-text-muted);
  font-size: .75rem;
  text-align: center;
}
.bcn-column-hint {
  padding: .125rem .25rem .625rem;
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}

/* Min-height so an empty column is still a visible drop target. */
.bcn-column-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 5rem;
  border-radius: 8px;
  transition: background .13s, box-shadow .13s;
}
.bcn-column-body.is-drop-target {
  background: var(--bcn-accent-soft);
  box-shadow: inset 0 0 0 2px var(--bcn-accent);
}
.bcn-column-empty {
  padding: 1.25rem .5rem;
  text-align: center;
  font-size: .75rem;
  color: var(--bcn-text-faint);
}

/* Done is quieter — it is a record, not a queue. */
.bcn-column.is-done .bcn-card { opacity: .82; }
.bcn-column.is-blocked { border-color: var(--bcn-danger); }

/* ─── Cards ──────────────────────────────────────────────────────────────── */

.bcn-card {
  padding: .625rem .6875rem;
  border: 1px solid var(--bcn-border);
  border-radius: 9px;
  background: var(--bcn-surface);
  box-shadow: var(--bcn-shadow-sm);
  cursor: pointer;
  transition: border-color .13s, box-shadow .13s, transform .1s;
}
.bcn-card:hover { border-color: var(--bcn-border-strong); box-shadow: var(--bcn-shadow-md); }
.bcn-card:active { transform: scale(.995); }
.bcn-card.is-dragging { opacity: .45; }
.bcn-card.is-locked { cursor: default; }
/* The left edge is owned by attention.js, which decides severity from every
   signal rather than from the due date alone. Overdue raises at-risk, so a
   late card still gets an edge — amber unless something worse is also true. */
.bcn-card.is-critical { border-left: 3px solid var(--bcn-danger); }
.bcn-card.is-blocked { border-left: 3px solid var(--bcn-accent); }
.bcn-card.is-at-risk { border-left: 3px solid var(--bcn-warn); }

/* The reason, in words, under the owner. */
.bcn-card-flag {
  display: flex;
  align-items: baseline;
  gap: .3125rem;
  margin-top: .375rem;
  font-size: .6875rem;
  line-height: 1.35;
}
.bcn-card-flag-dot {
  flex: none;
  width: .375rem;
  height: .375rem;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-.0625rem);
}
/* Clipped to two lines. An issue title can be a sentence, and a card that
   grows to fit one pushes the rest of the column off the screen. */
.bcn-card-flag > span:not([class]) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bcn-card-flag-more { flex: none; opacity: .7; }
.bcn-card-flag.is-critical { color: var(--bcn-danger); }
.bcn-card-flag.is-blocked { color: var(--bcn-accent); }
.bcn-card-flag.is-at-risk { color: var(--bcn-warn); }

.bcn-card-goal {
  font-size: .6875rem;
  color: var(--bcn-text-faint);
  margin-bottom: .1875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcn-card-title {
  margin: 0 0 .4375rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
}
.bcn-card-meta { display: flex; align-items: center; gap: .375rem; margin-bottom: .4375rem; }
.bcn-card-avatar {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--bcn-accent);
  color: var(--bcn-accent-text);
  font-size: .625rem;
  font-weight: 600;
  flex: 0 0 auto;
}
.bcn-card-avatar.is-empty { background: var(--bcn-border-strong); color: var(--bcn-text-muted); }
.bcn-card-owner {
  font-size: .75rem;
  color: var(--bcn-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcn-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}
.bcn-card-due.is-overdue { color: var(--bcn-danger); font-weight: 500; }
.bcn-card-points { margin-left: auto; color: var(--bcn-accent); }
.bcn-card-note {
  margin: .4375rem 0 0;
  padding-top: .4375rem;
  border-top: 1px dashed var(--bcn-border);
  font-size: .75rem;
  font-style: italic;
  color: var(--bcn-text-muted);
}

.bcn-card-panel { width: min(34rem, 100%); }
.bcn-card-panel-goal {
  padding: .625rem .75rem;
  margin-bottom: .875rem;
  border-left: 2px solid var(--bcn-accent);
  background: var(--bcn-bg-sunken);
  border-radius: 0 8px 8px 0;
}

/* ─── Stat tiles ─────────────────────────────────────────────────────────── */

.bcn-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .625rem;
  margin-bottom: .5rem;
}
.bcn-stat {
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-surface);
}
.bcn-stat.is-warn { border-color: var(--bcn-danger); background: var(--bcn-danger-soft); }
.bcn-stat.is-ok { border-color: var(--bcn-ok); }
.bcn-stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; font-family: var(--bcn-mono); }
.bcn-stat.is-warn .bcn-stat-value { color: var(--bcn-danger); }
.bcn-stat-label { margin-top: .125rem; font-size: .75rem; color: var(--bcn-text-muted); }

/* ─── Overview rows ──────────────────────────────────────────────────────── */

.bcn-goal-rows, .bcn-load-rows, .bcn-gap-rows {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .875rem;
}

.bcn-goal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem);
  gap: 1rem;
  align-items: center;
  padding: .625rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: 9px;
  background: var(--bcn-surface);
}
.bcn-goal-row.is-overdue { border-left: 3px solid var(--bcn-danger); }
.bcn-goal-row-main { min-width: 0; }
.bcn-goal-row-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  flex-wrap: wrap;
}
.bcn-goal-row-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: .1875rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
}
.bcn-goal-row-sub > * + * {
  padding-left: .5rem;
  margin-left: .5rem;
  border-left: 1px solid var(--bcn-border);
}
.bcn-goal-row-meter { display: flex; align-items: center; gap: .5rem; }

.bcn-load-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.2fr) minmax(6rem, 2fr) 5.5rem auto;
  gap: .875rem;
  align-items: center;
  padding: .5rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: 9px;
  background: var(--bcn-surface);
}
.bcn-load-who { min-width: 0; }
.bcn-load-name { font-weight: 500; font-size: .875rem; }
.bcn-load-sub { font-size: .75rem; color: var(--bcn-text-faint); }
.bcn-load-bar { display: flex; align-items: center; }
.bcn-load-bar .bcn-progress { max-width: none; }
.bcn-load-figure { display: flex; flex-direction: column; align-items: flex-end; }
.bcn-load-pct { font-family: var(--bcn-mono); font-size: .875rem; font-weight: 600; }
.bcn-load-hours { font-size: .6875rem; color: var(--bcn-text-faint); }

.bcn-gap-row {
  padding: .625rem .75rem;
  border: 1px solid var(--bcn-border);
  border-left-width: 3px;
  border-radius: 9px;
  background: var(--bcn-surface);
}
.bcn-gap-row.is-high { border-left-color: var(--bcn-danger); }
.bcn-gap-row.is-medium { border-left-color: var(--bcn-accent); }
.bcn-gap-row.is-low { border-left-color: var(--bcn-border-strong); }
.bcn-gap-head { display: flex; align-items: center; gap: .5rem; }
.bcn-gap-subject { font-weight: 500; min-width: 0; }
.bcn-gap-detail { margin-top: .25rem; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-gap-remedy { margin-top: .1875rem; font-size: .8125rem; color: var(--bcn-accent); }

/* ─── Timeline ───────────────────────────────────────────────────────────── */

.bcn-timeline { margin-top: .625rem; display: flex; flex-direction: column; }
.bcn-timeline-row {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: .625rem;
  padding-bottom: .75rem;
  position: relative;
}
/* The connecting rule, drawn behind the dots and stopped at the last row. */
.bcn-timeline-row:not(:last-child)::before {
  content: "";
  position: absolute;
  left: .4375rem;
  top: .875rem;
  bottom: 0;
  width: 1px;
  background: var(--bcn-border);
}
.bcn-timeline-dot {
  width: .5rem;
  height: .5rem;
  margin-top: .375rem;
  border-radius: 999px;
  background: var(--bcn-accent);
  position: relative;
  z-index: 1;
}
.bcn-timeline-content { font-size: .8125rem; min-width: 0; }
.bcn-timeline-meta { font-size: .6875rem; color: var(--bcn-text-faint); }

/* ─── Archive ────────────────────────────────────────────────────────────── */

.bcn-record {
  margin-top: .875rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
}
.bcn-record-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.bcn-record-title {
  margin: 0;
  font-family: var(--bcn-serif);
  font-size: 1.25rem;
  font-weight: 400;
}
.bcn-record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
}
.bcn-record-meta > * + * {
  padding-left: .5rem;
  margin-left: .5rem;
  border-left: 1px solid var(--bcn-border);
}
.bcn-record .bcn-metric { display: block; margin-top: .625rem; font-size: .75rem; }
.bcn-record-details { margin-top: .75rem; }
.bcn-record-details summary {
  cursor: pointer;
  font-size: .8125rem;
  color: var(--bcn-accent);
  padding: .25rem 0;
}
.bcn-record-body { margin-top: .625rem; }
.bcn-record-objective {
  padding: .75rem 0;
  border-top: 1px dashed var(--bcn-border);
}
.bcn-record-objective:first-child { border-top: none; padding-top: .25rem; }
.bcn-record-objective-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.bcn-record-objective-title { font-weight: 500; font-size: .9375rem; min-width: 0; }

/* ─── Narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 68rem) {
  /* Two columns still show the flow; four would be unreadable slivers. */
  .bcn-board-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 52rem) {
  .bcn-board-columns { grid-template-columns: 1fr; }
  .bcn-goal-row { grid-template-columns: 1fr; gap: .5rem; }
  .bcn-load-row { grid-template-columns: 1fr auto; row-gap: .375rem; }
  .bcn-load-bar { grid-column: 1 / -1; }
  .bcn-filter-search { max-width: none; }
  .bcn-record-head { flex-direction: column; gap: .5rem; }
}

/* ═══ Notifications and metric readings ══════════════════════════════════════ */

/* ─── Bell ───────────────────────────────────────────────────────────────── */

.bcn-bell { position: relative; }
.bcn-bell.has-unread { color: var(--bcn-accent); }
.bcn-bell-count {
  position: absolute;
  top: .125rem;
  right: .0625rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 .1875rem;
  border-radius: 999px;
  background: var(--bcn-accent);
  color: var(--bcn-accent-text);
  font-size: .625rem;
  font-weight: 600;
  line-height: 1rem;
  text-align: center;
}

/* Fixed, like the pickers, so no ancestor's overflow can clip it. */
.bcn-notif-panel {
  position: fixed;
  z-index: 70;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface-raised);
  box-shadow: var(--bcn-shadow-lg);
  overflow: hidden;
}
.bcn-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--bcn-border);
}
.bcn-notif-title { font-weight: 600; font-size: .875rem; }
.bcn-notif-body { overflow-y: auto; overscroll-behavior: contain; }
.bcn-notif-empty {
  margin: 0;
  padding: 1.5rem 1rem;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--bcn-text-faint);
  text-align: center;
}

.bcn-notif-item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: .625rem;
  width: 100%;
  padding: .625rem .75rem;
  border: none;
  border-bottom: 1px solid var(--bcn-border);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .13s;
}
.bcn-notif-item:last-child { border-bottom: none; }
.bcn-notif-item:hover:not(:disabled) { background: var(--bcn-bg-sunken); }
.bcn-notif-item:disabled { cursor: default; }
/* A left rule rather than a fill, so unread reads at a glance without shouting. */
.bcn-notif-item.is-unread { box-shadow: inset 2px 0 0 var(--bcn-accent); }
.bcn-notif-icon { color: var(--bcn-accent); font-size: .875rem; line-height: 1.4; }
.bcn-notif-content { min-width: 0; }
.bcn-notif-item-title { font-size: .8125rem; font-weight: 500; line-height: 1.4; }
.bcn-notif-item.is-unread .bcn-notif-item-title { font-weight: 600; }
.bcn-notif-item-body {
  margin-top: .125rem;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}
.bcn-notif-when { margin-top: .1875rem; font-size: .6875rem; color: var(--bcn-text-faint); }

/* ─── The two axes ───────────────────────────────────────────────────────────
 * A goal now reports work and metric separately, because they routinely
 * disagree and reporting effort alone implies a result that may not exist.
 */

.bcn-axis-label {
  flex: 0 0 2.75rem;
  font-size: .6875rem;
  color: var(--bcn-text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bcn-no-reading {
  font-size: .75rem;
  color: var(--bcn-text-faint);
  font-style: italic;
}

.bcn-divergence {
  margin: .375rem 0 0 1.25rem;
  padding: .4375rem .625rem;
  border-left: 2px solid var(--bcn-border-strong);
  border-radius: 0 6px 6px 0;
  background: var(--bcn-bg-sunken);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--bcn-text-muted);
  max-width: 44rem;
}
/* The finding the product exists to surface gets the loud treatment. */
.bcn-divergence.is-effort_ahead,
.bcn-divergence.is-regressing {
  border-left-color: var(--bcn-danger);
  background: var(--bcn-danger-soft);
  color: var(--bcn-danger);
}
.bcn-divergence.is-metric_ahead { border-left-color: var(--bcn-accent); }
.bcn-divergence.is-unmeasured { font-style: italic; }

@media (max-width: 52rem) {
  .bcn-axis-label { flex-basis: 2.25rem; }
  .bcn-divergence { margin-left: 0; }
}

/* ─── Home dashboard ─────────────────────────────────────────────────────────
 *
 * The role-scoped landing screen. Deliberately not the blue-gradient corporate
 * dashboard look: this is the same warm paper surface as the rest of Beacon,
 * and tone is carried by a single accent edge and by the figures themselves
 * rather than by filling large areas with colour. A dashboard where everything
 * is emphasised has nothing left to emphasise the one number that matters.
 */

.bcn-dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
}
.bcn-dash-head-text { min-width: 0; flex: 1 1 22rem; }
.bcn-dash-head .bcn-page-title { margin: 0; }
.bcn-dash-head .bcn-page-sub { margin: .375rem 0 0; max-width: 44rem; }
.bcn-dash-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Button sizes the dashboard needs and the forms did not. */
.bcn-btn.is-small { padding: .3125rem .625rem; font-size: .75rem; }
.bcn-btn.is-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--bcn-text-muted);
}
.bcn-btn.is-ghost:hover:not(:disabled) {
  background: var(--bcn-bg-sunken);
  border-color: var(--bcn-border);
  color: var(--bcn-text);
}

/* A "View all" that sits on the baseline of the section heading.
 *
 * Scoped to this view on purpose. `.bcn-section-head` is shared with Overview,
 * Plans, Settings and Archive, where the head is a stacked title and paragraph
 * and should stay that way — turning it into a flex row globally re-laid out
 * four pages nobody asked to change. */
#bcn-overview .bcn-section-head { display: flex; align-items: baseline; gap: .875rem; flex-wrap: wrap; }
#bcn-overview .bcn-section-head > .bcn-section-title { flex: 0 0 auto; }
#bcn-overview .bcn-section-head > .bcn-section-desc { flex: 1 1 14rem; margin-top: 0; }
.bcn-section-link {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bcn-accent);
}
.bcn-section-link:hover { color: var(--bcn-accent-hover); text-decoration: underline; }

.bcn-basis-note {
  margin: .625rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--bcn-text-faint);
  max-width: 46rem;
}

/* ─── KPIs ──────────────────────────────────────────────────────────────── */

.bcn-kpis {
  display: grid;
  grid-template-columns: minmax(16rem, 20rem) 1fr;
  gap: .875rem;
  align-items: stretch;
}
.bcn-kpi-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .875rem;
}

.bcn-kpi-hero,
.bcn-kpi {
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
  box-shadow: var(--bcn-shadow-sm);
}

/* The headline figure: ring on the left, the reading of it on the right. */
.bcn-kpi-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem;
  border-left: 3px solid var(--bcn-border-strong);
}
.bcn-kpi-hero.is-ok { border-left-color: var(--bcn-ok); }
.bcn-kpi-hero.is-warn { border-left-color: var(--bcn-danger); }
.bcn-kpi-hero.is-accent { border-left-color: var(--bcn-accent); }
.bcn-kpi-hero-dial { flex: 0 0 5.5rem; }
.bcn-kpi-hero-body { min-width: 0; }
.bcn-kpi-hero-detail {
  margin-top: .1875rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.4;
}
.bcn-kpi-basis {
  margin: .5rem 0 0;
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--bcn-text-faint);
  /* The derivation is always present but never competes with the number.
     It clamps to three lines and opens on hover or focus, because the longest
     of these — the definition of the headline figure — was being cut off
     mid-sentence with no way at all to read the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: help;
}
.bcn-kpi-hero:hover .bcn-kpi-basis,
.bcn-kpi-basis:focus-visible { -webkit-line-clamp: unset; }

.bcn-kpi { padding: .875rem .9375rem; }
.bcn-kpi-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-kpi-value {
  margin-top: .25rem;
  font-family: var(--bcn-mono);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.bcn-kpi.is-warn .bcn-kpi-value { color: var(--bcn-danger); }
.bcn-kpi.is-ok .bcn-kpi-value { color: var(--bcn-ok); }
.bcn-kpi.is-accent .bcn-kpi-value { color: var(--bcn-accent); }
.bcn-kpi-detail {
  margin-top: .1875rem;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}
.bcn-kpi .bcn-progress { margin-top: .5rem; max-width: none; }

/* ─── Budget ────────────────────────────────────────────────────────────── */

.bcn-budget {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.125rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
}
.bcn-budget-dial { flex: 0 0 7rem; }
.bcn-budget-figures { flex: 1 1 18rem; min-width: 0; }
.bcn-budget-row {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  flex-wrap: wrap;
  padding: .3125rem 0;
  border-bottom: 1px dashed var(--bcn-border);
}
.bcn-budget-row:last-of-type { border-bottom: none; }
.bcn-budget-row-label { font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-budget-row-value {
  margin-left: auto;
  font-family: var(--bcn-mono);
  font-size: .9375rem;
  font-weight: 500;
}
.bcn-budget-row-note { font-size: .6875rem; color: var(--bcn-text-faint); flex-basis: 100%; text-align: right; }
.bcn-budget-row.is-warn .bcn-budget-row-value,
.bcn-budget-row.is-warn .bcn-budget-row-note { color: var(--bcn-danger); }
.bcn-budget-hours {
  margin-top: .5rem;
  font-size: .6875rem;
  color: var(--bcn-text-faint);
  font-family: var(--bcn-mono);
}

.bcn-overruns { margin-top: .75rem; display: flex; flex-direction: column; gap: .375rem; }
.bcn-overrun {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .75rem;
  border-radius: 8px;
  background: var(--bcn-danger-soft);
  font-size: .8125rem;
}
.bcn-overrun-title { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcn-overrun-figure { margin-left: auto; font-family: var(--bcn-mono); font-size: .75rem; color: var(--bcn-danger); }

/* ─── Alerts ────────────────────────────────────────────────────────────── */

.bcn-alerts { display: flex; flex-direction: column; gap: .5rem; }
.bcn-alert {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-left: 3px solid var(--bcn-border-strong);
  border-radius: 8px;
  background: var(--bcn-surface);
}
.bcn-alert.is-high { border-left-color: var(--bcn-danger); }
.bcn-alert.is-medium { border-left-color: var(--bcn-accent); }
.bcn-alert.is-good { border-left-color: var(--bcn-ok); }
.bcn-alert-main { flex: 1 1 20rem; min-width: 0; }
.bcn-alert-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bcn-alert-title { font-size: .875rem; font-weight: 550; }
.bcn-alert-detail {
  margin-top: .1875rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--bcn-text-muted);
  text-wrap: pretty;
}
.bcn-alert-actions { display: flex; gap: .375rem; flex-shrink: 0; margin-left: auto; }

/* ─── Priority list ─────────────────────────────────────────────────────── */

.bcn-priority { display: flex; flex-direction: column; gap: .5rem; }
.bcn-priority-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  width: 100%;
  padding: .8125rem .9375rem;
  border: 1px solid var(--bcn-border);
  border-left: 3px solid var(--bcn-border-strong);
  border-radius: 8px;
  background: var(--bcn-surface);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .12s ease, transform .12s ease;
}
.bcn-priority-row:hover { border-color: var(--bcn-text-faint); transform: translateX(2px); }
.bcn-priority-row:focus-visible { outline: 2px solid var(--bcn-accent); outline-offset: 2px; }
/* The row's own action. It sits at the end and must not inherit the row's
   translate on hover, or it slides out from under the cursor. */
.bcn-priority-row > .bcn-btn { flex: 0 0 auto; margin-left: auto; }
.bcn-priority-row.is-warn { border-left-color: var(--bcn-danger); }
.bcn-priority-row.is-ok { border-left-color: var(--bcn-ok); }
.bcn-priority-main { flex: 1 1 18rem; min-width: 0; }
.bcn-priority-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bcn-priority-title { font-size: .9375rem; font-weight: 550; }
.bcn-priority-sub {
  margin-top: .1875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
}
.bcn-priority-sub .is-overdue { color: var(--bcn-danger); font-weight: 500; }
.bcn-priority-metric {
  margin-top: .25rem;
  font-family: var(--bcn-mono);
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}
.bcn-priority-meter {
  flex: 0 1 19rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.bcn-priority-meter .bcn-progress { flex: 1; max-width: none; }

/* ─── Charts ────────────────────────────────────────────────────────────── */

.bcn-chart {
  width: 100%;
  height: auto;
  display: block;
  margin: .5rem 0;
  color: var(--bcn-accent);
  overflow: visible;
}
.bcn-trend.is-warn .bcn-chart { color: var(--bcn-danger); }
.bcn-chart-line { stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bcn-chart-dot { fill: var(--bcn-surface); stroke: currentColor; stroke-width: 1.75; }
.bcn-chart-dot.is-last { fill: currentColor; }
.bcn-chart-ref { stroke-width: 1; stroke-dasharray: 3 3; }
.bcn-chart-ref.is-target { stroke: var(--bcn-ok); }
.bcn-chart-ref.is-baseline { stroke: var(--bcn-border-strong); }
.bcn-chart-reflabel { font-size: 10px; font-family: var(--bcn-mono); }
.bcn-chart-reflabel.is-target { fill: var(--bcn-ok); }
.bcn-chart-reflabel.is-baseline { fill: var(--bcn-text-faint); }
.bcn-chart-axis { font-size: 10px; font-family: var(--bcn-mono); fill: var(--bcn-text-faint); }

.bcn-spark { width: 7.5rem; height: 1.75rem; color: var(--bcn-accent); }
.bcn-spark-line { stroke: currentColor; stroke-width: 1.5; }
.bcn-spark-dot { fill: currentColor; }

.bcn-ring { width: 100%; height: auto; display: block; color: var(--bcn-accent); }
.bcn-ring.is-ok { color: var(--bcn-ok); }
.bcn-ring.is-warn { color: var(--bcn-danger); }
.bcn-ring.is-neutral { color: var(--bcn-text-faint); }
.bcn-ring-track { stroke: var(--bcn-bg-sunken); }
.bcn-ring-fill { stroke: currentColor; }
/* Drawn under the fill and dimmed: a projection is not a measurement. */
.bcn-ring-overshoot { stroke: currentColor; opacity: .28; }
.bcn-ring-value {
  font-family: var(--bcn-mono);
  font-size: 26px;
  font-weight: 600;
  fill: var(--bcn-text);
}
.bcn-ring-caption {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--bcn-text-faint);
}

.bcn-dualbar { width: 100%; max-width: 19rem; height: auto; display: block; }
.bcn-dualbar-label { font-size: 10px; fill: var(--bcn-text-faint); letter-spacing: .04em; text-transform: uppercase; }
.bcn-dualbar-value { font-size: 11px; font-family: var(--bcn-mono); fill: var(--bcn-text-muted); }
.bcn-dualbar-track { fill: var(--bcn-bg-sunken); }
.bcn-dualbar-fill.is-effort { fill: var(--bcn-text-faint); }
.bcn-dualbar-fill.is-metric { fill: var(--bcn-accent); }
.bcn-dualbar-fill.is-warn { fill: var(--bcn-danger); }

/* ─── Metric trend cards ────────────────────────────────────────────────── */

.bcn-trends {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: .875rem;
}
.bcn-trend {
  padding: .9375rem 1rem 1rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
  box-shadow: var(--bcn-shadow-sm);
  min-width: 0;
  /* Grid stretches these to equal height, so the verdicts — which run to one
     line or four — would leave the actions floating at different heights across
     a row. Pinning the foot to the bottom keeps them on one line. */
  display: flex;
  flex-direction: column;
}
.bcn-trend > .bcn-trend-foot { margin-top: auto; }
.bcn-trend.is-warn { border-color: color-mix(in srgb, var(--bcn-danger) 40%, var(--bcn-border)); }
.bcn-trend-head { display: flex; align-items: flex-start; gap: 1rem; }
.bcn-trend-title { min-width: 0; flex: 1; }
.bcn-trend-metric { display: block; font-size: .875rem; font-weight: 600; }
.bcn-trend-goal {
  display: block;
  margin-top: .0625rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcn-trend-figure { text-align: right; flex-shrink: 0; }
.bcn-trend-percent {
  display: block;
  font-family: var(--bcn-mono);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--bcn-accent);
}
.bcn-trend-percent.is-warn { color: var(--bcn-danger); }
.bcn-trend-percent-label {
  font-size: .625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-trend-verdict {
  margin-top: .375rem;
  padding: .4375rem .625rem;
  border-left: 2px solid var(--bcn-border-strong);
  border-radius: 0 6px 6px 0;
  background: var(--bcn-bg-sunken);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--bcn-text-muted);
  text-wrap: pretty;
}
.bcn-trend-verdict.is-regressing,
.bcn-trend-verdict.is-effort_ahead {
  border-left-color: var(--bcn-danger);
  background: var(--bcn-danger-soft);
  color: var(--bcn-danger);
}
.bcn-trend-verdict.is-metric_ahead { border-left-color: var(--bcn-accent); }
.bcn-trend-foot { margin-top: .5rem; display: flex; gap: .375rem; }

/* ─── Team ──────────────────────────────────────────────────────────────── */

.bcn-team { display: flex; flex-direction: column; gap: .125rem; }
/* A button, because each row goes somewhere — that person's cards on the
   Board. Styled as a row rather than as a control; the affordance is the hover. */
.bcn-team-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  padding: .5rem .25rem;
  border: none;
  border-bottom: 1px solid var(--bcn-border);
  border-radius: 6px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .13s;
}
.bcn-team-row:hover { background: var(--bcn-bg-sunken); }
.bcn-team-row:focus-visible { outline: 2px solid var(--bcn-accent); outline-offset: -2px; }
.bcn-team-row:last-child { border-bottom: none; }
.bcn-team-who { display: flex; align-items: center; gap: .5rem; flex: 1 1 12rem; min-width: 0; }
.bcn-team-avatar {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bcn-accent-soft);
  color: var(--bcn-accent);
  font-size: .75rem;
  font-weight: 600;
}
.bcn-team-text { min-width: 0; }
.bcn-team-name { font-size: .875rem; font-weight: 500; }
.bcn-team-sub { font-size: .6875rem; color: var(--bcn-text-muted); }
.bcn-team-bar { flex: 1 1 8rem; }
.bcn-team-bar .bcn-progress { max-width: none; }
.bcn-team-pct {
  flex: 0 0 2.75rem;
  text-align: right;
  font-family: var(--bcn-mono);
  font-size: .8125rem;
}

/* ─── Arriving from an alert ────────────────────────────────────────────── */

/* Marks the record that sent you here. Without it, "Open on board" drops the
   reader into forty cards with no indication which one was meant. */
@keyframes bcn-flash {
  0%, 62% { box-shadow: 0 0 0 2px var(--bcn-accent), var(--bcn-shadow-md); }
  100% { box-shadow: 0 0 0 2px transparent, var(--bcn-shadow-sm); }
}
.is-flash { animation: bcn-flash 2.2s ease-out; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .is-flash { animation: none; box-shadow: 0 0 0 2px var(--bcn-accent); }
  .bcn-priority-row:hover { transform: none; }
}

@media (max-width: 68rem) {
  .bcn-kpis { grid-template-columns: 1fr; }
}

@media (max-width: 52rem) {
  .bcn-dash-head { align-items: flex-start; flex-direction: column; gap: .875rem; }
  .bcn-dash-actions { width: 100%; }
  .bcn-dash-actions .bcn-btn { flex: 1; justify-content: center; }
  .bcn-kpi-hero { flex-direction: column; align-items: flex-start; }
  .bcn-kpi-hero-dial { flex: 0 0 auto; width: 5.5rem; }
  .bcn-alert-actions { margin-left: 0; width: 100%; }
  .bcn-priority-meter { flex: 1 1 100%; }
  .bcn-dualbar { max-width: none; }
  .bcn-budget-dial { flex: 0 0 6rem; }
  .bcn-trends { grid-template-columns: 1fr; }
}

/* ─── Return ─────────────────────────────────────────────────────────────────
 *
 * Shares the budget card's layout deliberately: cost and return are one
 * decision, and putting them in matching frames next to each other is most of
 * what makes them get read together.
 */

.bcn-returns { margin-top: .75rem; display: flex; flex-direction: column; gap: .375rem; }

.bcn-return-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: 8px;
  background: var(--bcn-surface);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color .12s ease;
}
.bcn-return-row:hover { border-color: var(--bcn-text-faint); }
.bcn-return-rank {
  flex: 0 0 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bcn-bg-sunken);
  font-family: var(--bcn-mono);
  font-size: .75rem;
  color: var(--bcn-text-muted);
}
.bcn-return-main { flex: 1 1 12rem; min-width: 0; }
.bcn-return-title { font-size: .875rem; font-weight: 550; }
.bcn-return-sub {
  margin-top: .125rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .6875rem;
  color: var(--bcn-text-muted);
}
.bcn-return-figure { text-align: right; flex-shrink: 0; }
.bcn-return-rate {
  display: block;
  font-family: var(--bcn-mono);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--bcn-ok);
}
.bcn-return-rate-label {
  font-size: .5625rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}

/* Unvalued work is called out rather than ranked last. The styling says
   "unanswered question", not "low priority". */
.bcn-unvalued {
  margin-top: .75rem;
  padding: .75rem .875rem;
  border: 1px dashed var(--bcn-border-strong);
  border-radius: 8px;
  background: var(--bcn-bg-sunken);
}
.bcn-unvalued-head { font-size: .8125rem; font-weight: 550; color: var(--bcn-text-muted); }
.bcn-unvalued-list { margin: .375rem 0 .5rem; display: flex; flex-wrap: wrap; gap: .375rem; }
.bcn-unvalued-item {
  padding: .1875rem .5rem;
  border-radius: 999px;
  background: var(--bcn-surface);
  border: 1px solid var(--bcn-border);
  font-size: .75rem;
}

@media (max-width: 52rem) {
  .bcn-return-row { flex-wrap: wrap; }
  .bcn-return-figure { margin-left: auto; }
}

/* A limitation that must travel with the figure it qualifies. */
.bcn-caution {
  margin: .625rem 0 0;
  padding: .5rem .75rem;
  border-left: 2px solid var(--bcn-accent);
  border-radius: 0 6px 6px 0;
  background: var(--bcn-accent-soft);
  font-size: .75rem;
  line-height: 1.5;
  color: var(--bcn-text);
  max-width: 46rem;
  text-wrap: pretty;
}

/* ─── Proposal review ────────────────────────────────────────────────────────
 *
 * The review panel for what Beacon read out of a document. Styled to slow the
 * reader down rather than speed them up: applying this sends real invitations
 * and creates goals the company will be measured against, so every row shows
 * its evidence and nothing reads as a formality to click past.
 */

.bcn-proposal { max-width: 46rem; width: 100%; }
.bcn-proposal-group { margin-bottom: 1.5rem; }
.bcn-proposal-group:last-child { margin-bottom: 0; }
.bcn-proposal-heading {
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-proposal-caution {
  margin: 0 0 .625rem;
  padding: .5rem .625rem;
  border-left: 2px solid var(--bcn-accent);
  border-radius: 0 6px 6px 0;
  background: var(--bcn-accent-soft);
  font-size: .75rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.bcn-proposal-row {
  display: flex;
  gap: .625rem;
  align-items: flex-start;
  padding: .625rem .75rem;
  margin-bottom: .375rem;
  border: 1px solid var(--bcn-border);
  border-left: 3px solid var(--bcn-border-strong);
  border-radius: 8px;
  background: var(--bcn-surface);
  cursor: pointer;
}
.bcn-proposal-row:hover { border-color: var(--bcn-text-faint); }
.bcn-proposal-row input[type="checkbox"] { margin-top: .1875rem; flex-shrink: 0; }
.bcn-proposal-row.is-plan { border-left-color: var(--bcn-accent); background: var(--bcn-bg-sunken); }
.bcn-proposal-row.is-invite { border-left-color: var(--bcn-ok); }
.bcn-proposal-row.is-update { border-left-color: var(--bcn-accent); }
.bcn-proposal-row.is-conflict { border-left-color: var(--bcn-danger); }
.bcn-proposal-row.is-disabled { opacity: .45; cursor: default; }

.bcn-proposal-main { min-width: 0; flex: 1; }
.bcn-proposal-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .875rem;
  font-weight: 550;
}
.bcn-proposal-sub {
  margin-top: .1875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
}
.bcn-proposal-sub .is-missing { color: var(--bcn-danger); }
.bcn-proposal-metric {
  margin-top: .1875rem;
  font-family: var(--bcn-mono);
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}
.bcn-proposal-narrative {
  margin: .375rem 0 0;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--bcn-text-muted);
}

/* The sentence the row came from. Without it a proposal is an assertion. */
.bcn-proposal-evidence {
  margin: .375rem 0 0;
  padding-left: .625rem;
  border-left: 2px solid var(--bcn-border);
  font-size: .75rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--bcn-text-faint);
  text-wrap: pretty;
}

.bcn-proposal-diff { margin-top: .375rem; display: flex; flex-direction: column; gap: .125rem; }
.bcn-proposal-diff-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: .6875rem;
  font-family: var(--bcn-mono);
}
.bcn-proposal-diff-field { flex: 0 0 9rem; color: var(--bcn-text-faint); }
.bcn-proposal-diff-from { color: var(--bcn-text-muted); text-decoration: line-through; }
.bcn-proposal-diff-arrow { color: var(--bcn-text-faint); }
.bcn-proposal-diff-to { color: var(--bcn-accent); font-weight: 500; }

.bcn-proposal-questions {
  margin: 0;
  padding-left: 1.125rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--bcn-text-muted);
}
.bcn-proposal-questions li { margin-bottom: .25rem; }
.bcn-proposal-notes { font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-proposal-summary { font-size: .75rem; color: var(--bcn-text-muted); }

@media (max-width: 52rem) {
  .bcn-proposal-diff-row { flex-wrap: wrap; }
  .bcn-proposal-diff-field { flex-basis: 100%; }
}

/* ─── History ────────────────────────────────────────────────────────────── */

.bcn-linechart { color: var(--bcn-accent); }
.bcn-linechart.is-warn { color: var(--bcn-danger); }
.bcn-chart-ref.is-threshold { stroke: var(--bcn-danger); stroke-dasharray: 2 3; opacity: .55; }
/* Days with no snapshot. Shaded so absence reads as absence, not as calm. */
.bcn-chart-gap { fill: var(--bcn-text-faint); opacity: .09; }

.bcn-strain { margin-top: .875rem; display: flex; flex-direction: column; gap: .25rem; }
.bcn-strain-head {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
  margin-bottom: .25rem;
}
.bcn-strain-row {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .375rem .25rem;
  border-bottom: 1px solid var(--bcn-border);
}
.bcn-strain-row:last-child { border-bottom: none; }
.bcn-strain-who { flex: 0 1 12rem; min-width: 0; }
.bcn-strain-name { font-size: .875rem; font-weight: 500; }
.bcn-strain-sub { font-size: .6875rem; color: var(--bcn-text-muted); }
.bcn-strain-chart { flex: 1 1 14rem; min-width: 0; }
.bcn-strain-chart .bcn-chart { margin: 0; }
.bcn-strain-pct {
  flex: 0 0 3rem;
  text-align: right;
  font-family: var(--bcn-mono);
  font-size: .8125rem;
}

@media (max-width: 52rem) {
  .bcn-strain-row { flex-wrap: wrap; }
  .bcn-strain-chart { flex: 1 1 100%; order: 3; }
}

/* ─── Destructive actions ────────────────────────────────────────────────── */

/* Styled to slow the reader down. Everything else in Settings is a form; this
   is the one control with no undo, so it does not look like the others. */
.bcn-danger-zone {
  padding: 1rem;
  border: 1px solid var(--bcn-danger);
  border-radius: var(--bcn-radius);
  background: var(--bcn-danger-soft);
}
.bcn-danger-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--bcn-danger);
  margin-bottom: .5rem;
}
.bcn-danger-counts { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .625rem; }
.bcn-danger-count {
  padding: .1875rem .5rem;
  border-radius: 999px;
  background: var(--bcn-surface);
  border: 1px solid var(--bcn-border);
  font-size: .75rem;
}
.bcn-danger-count strong { font-family: var(--bcn-mono); }
.bcn-danger-loading { font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-danger-note {
  margin: 0 0 .75rem;
  font-size: .75rem;
  line-height: 1.55;
  color: var(--bcn-text-muted);
  max-width: 44rem;
}
.bcn-danger-zone .bcn-field { margin-bottom: .625rem; max-width: 24rem; }
.bcn-danger-zone .bcn-btn.is-danger {
  border-color: var(--bcn-danger);
  background: var(--bcn-surface);
}
.bcn-danger-zone .bcn-btn.is-danger:disabled { opacity: .45; }

/* ─── The mark ───────────────────────────────────────────────────────────── */

/* It was a text glyph in five places and is now an SVG, so each spot sizes the
   box rather than the font. `display:block` on the svg kills the inline
   baseline gap that would otherwise push it off-centre against the wordmark. */
.bcn-brand-mark,
.bcn-boot-mark,
.bcn-lock-mark,
.bcn-welcome-mark { display: inline-block; line-height: 0; color: var(--bcn-accent); }
.bcn-brand-mark svg,
.bcn-boot-mark svg,
.bcn-lock-mark svg,
.bcn-welcome-mark svg { display: block; width: 100%; height: 100%; }

.bcn-brand-mark { width: 1.25rem; height: 1.25rem; }
.bcn-boot-mark { width: 2.5rem; height: 2.5rem; }
.bcn-lock-mark { width: 3rem; height: 3rem; margin-inline: auto; }
.bcn-welcome-mark { width: 2.25rem; height: 2.25rem; margin-bottom: .75rem; }

/* ─── Mode tabs ──────────────────────────────────────────────────────────── */

.bcn-modes {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--bcn-border);
  border-radius: 8px;
  background: var(--bcn-bg-sunken);
  margin-left: auto;
}
.bcn-mode {
  padding: .3125rem .75rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: .8125rem;
  color: var(--bcn-text-muted);
  cursor: pointer;
}
.bcn-mode.is-active {
  background: var(--bcn-surface);
  color: var(--bcn-text);
  box-shadow: var(--bcn-shadow-sm);
}
.bcn-page-head { display: flex; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.bcn-page-head > .bcn-page-title { flex: 0 0 auto; }
.bcn-page-head > .bcn-page-sub { flex: 1 1 100%; order: 4; margin-top: .25rem; }

/* ─── Flow ───────────────────────────────────────────────────────────────── */

/*
 * Connectors are borders on the boxes rather than drawn lines, which is what
 * lets the whole chart reflow with the pane and collapse to an indented tree on
 * a phone. An SVG version would have needed a measuring pass and a resize
 * observer to say the same thing.
 *
 * The geometry: each column of children carries a left rail, and each child
 * grows an elbow from that rail to itself.
 */
.bcn-flow { display: flex; flex-direction: column; gap: 1.5rem; }
.bcn-flow-plan { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }

.bcn-flow-node {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
  box-shadow: var(--bcn-shadow-sm);
}
button.bcn-flow-node { cursor: pointer; }
button.bcn-flow-node:hover { border-color: var(--bcn-text-faint); }

.bcn-flow-node.is-plan {
  flex: 0 0 15rem;
  width: 15rem;
  border-left: 3px solid var(--bcn-accent);
  align-self: flex-start;
  /* Follows its own goals down the page. The plan is one small node against a
     column that can run for screens, and without this the left third of the
     chart is empty for most of the scroll. */
  position: sticky;
  top: .25rem;
}
.bcn-flow-node.is-goal {
  border-left: 3px solid var(--bcn-border-strong);
  margin-bottom: .5rem;
}
.bcn-flow-node.is-goal.is-late { border-left-color: var(--bcn-danger); }

.bcn-flow-kind {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
  margin-bottom: .1875rem;
}
.bcn-flow-title { font-size: .875rem; font-weight: 550; line-height: 1.35; }
.bcn-flow-owner { font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-flow-node-head { display: flex; align-items: flex-start; gap: .5rem; }
.bcn-flow-node-text { min-width: 0; flex: 1; }
.bcn-flow-metric {
  margin-top: .375rem;
  font-family: var(--bcn-mono);
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}
.bcn-flow-meta {
  margin-top: .375rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  font-size: .6875rem;
  color: var(--bcn-text-muted);
}
.bcn-flow-bar { margin-top: .5rem; display: flex; align-items: center; gap: .5rem; }
.bcn-flow-bar .bcn-progress { flex: 1; max-width: none; }
.bcn-flow-pct {
  flex: 0 0 2.5rem;
  text-align: right;
  font-family: var(--bcn-mono);
  font-size: .75rem;
  color: var(--bcn-text-muted);
}

.bcn-flow-avatar {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bcn-accent-soft);
  color: var(--bcn-accent);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.bcn-flow-avatar.is-empty {
  background: var(--bcn-bg-sunken);
  color: var(--bcn-text-faint);
  border: 1px dashed var(--bcn-border-strong);
}

/* The goals column, hung off the plan by a rail and an elbow each. */
.bcn-flow-goals {
  flex: 1 1 22rem;
  min-width: 0;
  padding-left: 2rem;
  position: relative;
}
.bcn-flow-goals::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  /* Stops at the last elbow rather than running to the bottom of the column. */
  bottom: calc(100% - var(--bcn-rail, 100%));
  height: auto;
  border-left: 1.5px solid var(--bcn-border-strong);
}
.bcn-flow-branch { position: relative; margin-bottom: 1rem; }
.bcn-flow-branch:last-child { margin-bottom: 0; }
.bcn-flow-branch::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 1.4rem;
  width: 1rem;
  border-top: 1.5px solid var(--bcn-border-strong);
}
/* The rail should die at the last branch's elbow, not overshoot it. */
.bcn-flow-branch:last-child::after {
  content: "";
  position: absolute;
  left: -1.05rem;
  top: 1.4rem;
  bottom: -1px;
  width: 2px;
  background: var(--bcn-bg);
}

.bcn-flow-objectives {
  padding-left: 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.bcn-flow-objectives::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--bcn-border);
}

.bcn-flow-leaf {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: .4375rem .625rem;
  border: 1px solid var(--bcn-border);
  border-left: 2px solid var(--bcn-border-strong);
  border-radius: 7px;
  background: var(--bcn-surface);
}
.bcn-flow-leaf:hover { border-color: var(--bcn-text-faint); }
.bcn-flow-leaf::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: 50%;
  width: 1rem;
  border-top: 1px dashed var(--bcn-border);
}
.bcn-flow-leaf.is-done { border-left-color: var(--bcn-ok); opacity: .72; }
.bcn-flow-leaf.is-blocked, .bcn-flow-leaf.is-late { border-left-color: var(--bcn-danger); }
.bcn-flow-leaf.is-active { border-left-color: var(--bcn-accent); }
.bcn-flow-leaf.is-cancelled { opacity: .45; text-decoration: line-through; }

.bcn-flow-leaf-text { flex: 1 1 8rem; min-width: 0; }
.bcn-flow-leaf-title {
  font-size: .8125rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcn-flow-leaf-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  font-size: .625rem;
  color: var(--bcn-text-muted);
}
.bcn-flow-leaf-meta .is-late { color: var(--bcn-danger); font-weight: 500; }
.bcn-flow-leaf-bar { flex: 0 1 7rem; display: flex; align-items: center; gap: .375rem; }
.bcn-flow-leaf-bar .bcn-progress { flex: 1; max-width: none; height: 4px; }

.bcn-flow-none {
  padding: .5rem .75rem;
  font-size: .75rem;
  color: var(--bcn-text-faint);
  font-style: italic;
  border: 1px dashed var(--bcn-border);
  border-radius: 7px;
}

/* Below this the columns stack, so the chart becomes an indented tree. The
   rails and elbows keep working because they were never absolute positions on
   a canvas — they are borders on boxes that have simply moved. */
@media (max-width: 60rem) {
  .bcn-flow-plan { flex-direction: column; }
  .bcn-flow-node.is-plan { flex: 1 1 auto; width: 100%; }
  .bcn-flow-goals { width: 100%; padding-left: 1.25rem; margin-top: .75rem; }
  .bcn-flow-goals::before { left: .5rem; }
  .bcn-flow-branch::before { left: -.75rem; width: .75rem; }
  .bcn-flow-branch:last-child::after { left: -.8rem; }
  .bcn-flow-objectives { padding-left: 1.25rem; }
  .bcn-flow-objectives::before { left: .5rem; }
  .bcn-flow-leaf::before { left: -.75rem; width: .75rem; }
}

@media (max-width: 40rem) {
  .bcn-flow-leaf { flex-wrap: wrap; }
  .bcn-flow-leaf-bar { flex: 1 1 100%; }
  .bcn-modes { margin-left: 0; }
}

/* ─── Offered choices ────────────────────────────────────────────────────── */

/*
 * A decision the assistant has put to you, as buttons. Sits between the prose
 * and the turn footer: the model frames the choice, then you make it.
 */
.bcn-choices-slot { margin-top: .75rem; }
.bcn-choices {
  padding: .875rem;
  border: 1px solid var(--bcn-border);
  border-left: 3px solid var(--bcn-accent);
  border-radius: var(--bcn-radius);
  background: var(--bcn-bg-sunken);
}
.bcn-choices-q {
  font-size: .875rem;
  font-weight: 550;
  margin-bottom: .625rem;
  text-wrap: pretty;
}
.bcn-choice-list { display: flex; flex-direction: column; gap: .375rem; }

.bcn-choice {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: .5rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: 8px;
  background: var(--bcn-surface);
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}
.bcn-choice:hover:not(:disabled) { border-color: var(--bcn-accent); transform: translateX(2px); }
.bcn-choice:disabled { cursor: default; opacity: .5; }

.bcn-choice-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bcn-choice-label { font-size: .8125rem; font-weight: 550; }
.bcn-choice-tag {
  font-size: .5625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .125rem .375rem;
  border-radius: 999px;
  background: var(--bcn-accent-soft);
  color: var(--bcn-accent);
}
.bcn-choice-detail {
  margin-top: .1875rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--bcn-text-muted);
  text-wrap: pretty;
}
.bcn-choice.is-recommended { border-color: var(--bcn-accent); }
/* Multi-select: picked but not yet sent. */
.bcn-choice.is-picked { border-color: var(--bcn-accent); background: var(--bcn-accent-soft); }
/* Taken. Kept full-strength while the rest fade, so a reopened thread still
   reads as a conversation rather than a row of dead buttons. */
.bcn-choice.is-chosen {
  opacity: 1;
  border-color: var(--bcn-accent);
  background: var(--bcn-accent-soft);
}
.bcn-choice.is-chosen .bcn-choice-label::after {
  content: " ✓";
  color: var(--bcn-accent);
}

.bcn-choices-foot {
  margin-top: .625rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
/* Deliberately plain. Three options on screen imply those are the only three,
   and they never are — this is the way out, not a fourth option. */
.bcn-choice-other {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .75rem;
  color: var(--bcn-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bcn-choice-other:hover { color: var(--bcn-text); }

@media (prefers-reduced-motion: reduce) {
  .bcn-choice:hover:not(:disabled) { transform: none; }
}

/* ─── Priority ranking ───────────────────────────────────────────────────── */

.bcn-rank-list { display: flex; flex-direction: column; gap: .375rem; }

.bcn-rank-row {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .5rem .625rem;
  border: 1px solid var(--bcn-border);
  border-radius: .5rem;
  background: var(--bcn-surface);
  cursor: grab;
}
.bcn-rank-row:active { cursor: grabbing; }
.bcn-rank-row.is-dragging { opacity: .4; }
/* The insertion point, drawn on the row being displaced rather than as a
   separate element — one less thing that can be left behind on a failed drop. */
.bcn-rank-row.is-over { border-color: var(--bcn-accent); box-shadow: inset 0 2px 0 var(--bcn-accent); }

.bcn-rank-pos {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: .375rem;
  background: var(--bcn-accent-soft);
  color: var(--bcn-accent);
  font-size: .75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.bcn-rank-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.bcn-rank-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bcn-rank-owner { font-size: .6875rem; color: var(--bcn-text-muted); }

.bcn-rank-score { display: flex; align-items: baseline; gap: .375rem; }
.bcn-rank-score-value {
  font-size: .75rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--bcn-accent);
}
/* Not styled as an error. An unscored goal is one nobody has finished
   describing, which is a prompt, not a fault. */
.bcn-rank-score-value.is-unscored { color: var(--bcn-text-muted); font-weight: 550; font-style: italic; }
.bcn-rank-score-note { font-size: .6875rem; color: var(--bcn-text-muted); }

.bcn-rank-moves { flex: none; display: flex; flex-direction: column; gap: .125rem; }
.bcn-rank-move {
  border: 1px solid var(--bcn-border);
  background: none;
  border-radius: .25rem;
  width: 1.25rem;
  height: 1rem;
  padding: 0;
  font-size: .5rem;
  line-height: 1;
  color: var(--bcn-text-muted);
  cursor: pointer;
}
.bcn-rank-move:hover:not(:disabled) { border-color: var(--bcn-accent); color: var(--bcn-accent); }
.bcn-rank-move:disabled { opacity: .3; cursor: default; }

/* Touch has no drag-and-drop here, so the arrows are the interaction rather
   than the fallback, and they need to be tappable. */
@media (max-width: 40rem) {
  .bcn-rank-move { width: 1.75rem; height: 1.5rem; font-size: .625rem; }
}

/* ─── The plan tree: measurements, lines of effort, outcomes ─────────────── */

/* A heading inside a goal body, marking the shift from one level to the next.
   Without these the six levels read as one long list of boxes. */
.bcn-level-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin: 1rem 0 .5rem;
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bcn-text-muted);
}

.bcn-measures, .bcn-loes, .bcn-outcomes {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.bcn-measure {
  padding: .625rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: .5rem;
  background: var(--bcn-surface);
}
.bcn-measure-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bcn-measure-title { font-size: .8125rem; font-weight: 550; }
.bcn-measure-gap {
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--bcn-accent);
  white-space: nowrap;
}

/* Indented, because the nesting is the meaning: a line of effort sits under a
   goal, outcomes under it, deliverables under those. */
.bcn-loe {
  padding: .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: .5rem;
  background: var(--bcn-surface);
}
.bcn-loe-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bcn-loe-title { font-size: .875rem; font-weight: 600; }
.bcn-loe-cost {
  margin-top: .375rem;
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--bcn-text-muted);
}

.bcn-outcome {
  margin-top: .5rem;
  padding: .625rem .75rem;
  border-left: 2px solid var(--bcn-border);
  border-radius: 0 .375rem .375rem 0;
  background: transparent;
}
.bcn-outcome-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bcn-outcome-title { font-size: .8125rem; font-weight: 550; }
.bcn-outcome-state {
  margin-top: .25rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
}

/* Not an error state. A gap in the plan is a prompt, and styling it as a
   failure makes people stop reading them. */
.bcn-inline-warn {
  margin: .375rem 0 0;
  font-size: .75rem;
  color: var(--bcn-danger);
}

/* ─── The priority score ─────────────────────────────────────────────────── */

.bcn-score {
  margin: .75rem 0;
  padding: .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: .5rem;
  background: var(--bcn-accent-soft);
}
.bcn-score.is-unscored { background: transparent; border-style: dashed; }

.bcn-score-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bcn-score-label {
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bcn-text-muted);
}
.bcn-score-value {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bcn-accent);
}
.bcn-score.is-unscored .bcn-score-value {
  font-size: .8125rem;
  font-style: italic;
  font-weight: 550;
  color: var(--bcn-text-muted);
}

/* Four factors across, so the product is read as what it is made of rather
   than as one number. Wraps to two columns on a phone. */
.bcn-score-factors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .5rem;
}
@media (max-width: 34rem) {
  .bcn-score-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bcn-score-factor { display: flex; flex-direction: column; gap: .125rem; }
.bcn-score-factor-label {
  font-size: .625rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bcn-text-muted);
}
.bcn-score-factor-value {
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bcn-score-factor.is-missing .bcn-score-factor-value { color: var(--bcn-text-muted); font-weight: 450; }

.bcn-score-note {
  margin: .5rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}
.bcn-score-cost {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--bcn-border);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.bcn-score-budget { color: var(--bcn-text-muted); }
.bcn-score-budget.is-over { color: var(--bcn-danger); font-weight: 600; }

/* A line-of-effort header inside the flow chart's leaf column, so a goal's
   deliverables read as belonging to somebody rather than as one flat list. */
.bcn-flow-loe {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  margin: .5rem 0 .125rem;
  font-size: .625rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-flow-loe:first-child { margin-top: 0; }
.bcn-flow-loe-title { font-weight: 650; }
.bcn-flow-loe-owner { text-transform: none; letter-spacing: 0; }

/* ─── Labels, issues and discussion ──────────────────────────────────────── */

.bcn-label-row { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .375rem; }
.bcn-label {
  padding: .0625rem .3125rem;
  border-radius: 4px;
  background: var(--bcn-bg-sunken);
  border: 1px solid var(--bcn-border);
  font-size: .625rem;
  color: var(--bcn-text-muted);
  white-space: nowrap;
}

.bcn-issue {
  margin-top: .5rem;
  padding: .5rem .625rem;
  border: 1px solid var(--bcn-border);
  border-left-width: 3px;
  border-radius: .375rem;
  background: var(--bcn-surface);
}
/* Severity on the left edge only. A critical bug should be findable by eye in
   a list of twelve without shouting over the text of the others. */
.bcn-issue.is-critical { border-left-color: var(--bcn-danger); }
.bcn-issue.is-high { border-left-color: var(--bcn-accent); }
.bcn-issue.is-closed { opacity: .6; }

.bcn-issue-head { display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }
.bcn-issue-kind {
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-issue-title { flex: 1; min-width: 0; font-size: .8125rem; font-weight: 550; }
.bcn-issue-meta {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .1875rem;
  font-size: .6875rem;
  color: var(--bcn-text-muted);
}
/* An issue in nobody's queue is not being tracked, it is being stored. */
.bcn-issue-stranded { color: var(--bcn-danger); font-weight: 600; }
.bcn-issue-detail {
  margin: .375rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}

.bcn-issue-thread { margin-top: .375rem; }
.bcn-issue-thread .bcn-comment { margin-top: .375rem; }

.bcn-comment {
  margin-top: .5rem;
  padding-left: .625rem;
  border-left: 2px solid var(--bcn-border);
}
.bcn-comment-meta { font-size: .6875rem; color: var(--bcn-text-muted); margin-bottom: .125rem; }
.bcn-comment-compose { display: flex; gap: .375rem; align-items: flex-end; margin-top: .625rem; }
.bcn-comment-compose textarea { flex: 1; }

/* ─── Checklists and attachments ─────────────────────────────────────────── */

/* The row is a <label> so the whole line is a hit target, which matters more
   here than anywhere else on the card: this is the one control people use
   repeatedly, often on a phone. */
.bcn-step {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .3125rem .375rem;
  border-radius: .25rem;
  font-size: .8125rem;
  line-height: 1.4;
  cursor: pointer;
}
.bcn-step:hover { background: var(--bcn-bg-sunken); }
.bcn-step input[type="checkbox"] { margin-top: .1875rem; flex: none; accent-color: var(--bcn-accent); }
.bcn-step input[type="checkbox"]:disabled { cursor: default; }
.bcn-step-title { flex: 1; min-width: 0; }
/* Struck through rather than hidden. A finished checklist is the record of what
   the work turned out to consist of, and that is worth still being able to read. */
.bcn-step.is-done .bcn-step-title { text-decoration: line-through; color: var(--bcn-text-muted); }
.bcn-step-by { flex: none; font-size: .6875rem; color: var(--bcn-text-faint); }
.bcn-step-drop {
  flex: none;
  padding: 0 .25rem;
  border: 0;
  border-radius: .25rem;
  background: none;
  color: var(--bcn-text-faint);
  font-size: .75rem;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}
.bcn-step:hover .bcn-step-drop,
.bcn-attachment:hover .bcn-step-drop,
.bcn-step-drop:focus-visible { opacity: 1; }
.bcn-step-drop:hover { color: var(--bcn-danger); }
.bcn-step-hint {
  margin: .25rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}

.bcn-attachment {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3125rem .375rem;
  border-radius: .25rem;
  font-size: .8125rem;
}
.bcn-attachment:hover { background: var(--bcn-bg-sunken); }
.bcn-attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcn-attachment-state { flex: none; font-size: .6875rem; color: var(--bcn-text-faint); }

.bcn-card-clip { font-size: .6875rem; color: var(--bcn-text-faint); }

/* ─── Dependencies on a board card ───────────────────────────────────────── */

.bcn-card-deps { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .375rem; }
.bcn-card-dep {
  padding: .0625rem .3125rem;
  border-radius: 4px;
  border: 1px solid var(--bcn-border);
  font-size: .625rem;
  color: var(--bcn-text-muted);
  white-space: nowrap;
  cursor: help;
}
/* Waiting on something overdue is the state worth reacting to. */
.bcn-card-dep.is-late { border-color: var(--bcn-danger); color: var(--bcn-danger); }
/* Holding others up reads as weight rather than alarm — it is not a fault,
   it is a fact about what a slip would cost. */
.bcn-card-dep.is-blocking { border-color: var(--bcn-accent); color: var(--bcn-accent); }

/* The same tags on a Plans row. Only the spacing differs — a row is wider than
   a card and the tags sit inline with the rest of the facts rather than stacked
   above the footer. */
.bcn-objective-deps {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: .375rem 0 0;
}
.bcn-objective-deps .bcn-card-dep { font-size: .6875rem; padding: .09375rem .375rem; }

/* ─── Exposure: what the plan rests on ───────────────────────────────────── */

.bcn-exposure-row {
  display: block;
  width: 100%;
  margin-bottom: .375rem;
  padding: .625rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: .5rem;
  background: var(--bcn-surface);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.bcn-exposure-row:hover { border-color: var(--bcn-accent); }
/* A broken fatal assumption is the most important row in the product. */
.bcn-exposure-row.is-fatal { border-color: var(--bcn-danger); background: var(--bcn-danger-soft); }

.bcn-exposure-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.bcn-exposure-goal { font-size: .8125rem; font-weight: 600; }
.bcn-exposure-tags { display: flex; gap: .25rem; flex-wrap: wrap; }
.bcn-exposure-verdict {
  margin-top: .25rem;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}
.bcn-exposure-assumption {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  margin-top: .375rem;
  font-size: .75rem;
}
.bcn-exposure-status {
  flex: none;
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-exposure-status.is-broken { color: var(--bcn-danger); }
.bcn-exposure-inherited { font-size: .6875rem; color: var(--bcn-text-faint); white-space: nowrap; }

/* ─── Charts in the transcript ───────────────────────────────────────────── */

.bcn-charts-slot { margin: .5rem 0 .75rem; }

.bcn-chat-chart {
  width: var(--bcn-figure);
  margin: 0 0 .75rem calc((100% - var(--bcn-figure)) / 2);
  padding: .625rem;
  border: 1px solid var(--bcn-border);
  border-radius: .5rem;
  background: var(--bcn-surface);
}
.bcn-chat-chart-title {
  margin-bottom: .5rem;
  font-size: .6875rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bcn-text-muted);
}
.bcn-chat-chart-sub { margin-bottom: .25rem; font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-chat-chart-series + .bcn-chat-chart-series {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--bcn-border);
}

/* A tall Gantt scrolls rather than shrinking its rows into slivers. */
.bcn-chat-chart-frame { max-height: 26rem; overflow-y: auto; overflow-x: hidden; }
.bcn-chat-chart-frame > svg,
.bcn-chat-chart-series > svg { width: 100%; height: auto; display: block; }

/* The line chart is drawn in a 360-unit viewBox for a narrow dashboard card.
   Stretched to the full width of a chat turn its type scales with it and the
   axis labels come out twice the size of the prose around them, so it keeps
   close to its native width and sits left. */
.bcn-chat-chart-series > svg.bcn-linechart { max-width: 26rem; }

.bcn-chart-grid { stroke: var(--bcn-border); stroke-width: 1; }
.bcn-gantt-label { font-size: 10px; fill: var(--bcn-text); }

.bcn-gantt-bar { fill: var(--bcn-accent); opacity: .35; }
.bcn-gantt-bar.is-late { fill: var(--bcn-danger); opacity: .4; }
.bcn-gantt-bar.is-done { fill: var(--bcn-ok); opacity: .3; }
.bcn-gantt-progress { fill: var(--bcn-accent); }
.bcn-gantt-today { stroke: var(--bcn-danger); stroke-width: 1.5; stroke-dasharray: 3 2; }

.bcn-bar { fill: var(--bcn-accent); }
.bcn-bar.is-warn { fill: var(--bcn-danger); }

/* Staff time solid, bought cost hatched — the distinction the chart exists to
   make, and one that survives being printed in greyscale. */
.bcn-spend-labour { fill: var(--bcn-accent); opacity: .85; }
.bcn-spend-direct { fill: var(--bcn-accent); opacity: .35; }

.bcn-chart-key {
  display: flex;
  gap: .75rem;
  margin-top: .5rem;
  font-size: .6875rem;
  color: var(--bcn-text-muted);
}
.bcn-chart-key span::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border-radius: 1px;
  background: var(--bcn-accent);
}
.bcn-chart-key-direct::before { opacity: .35; }

/* ─── The extraction report on a proposal ────────────────────────────────── */

.bcn-proposal-triage {
  margin-bottom: 1rem;
  padding: .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: .5rem;
  background: var(--bcn-bg-sunken);
}
.bcn-proposal-reading { margin: 0 0 .5rem; font-size: .8125rem; }

.bcn-proposal-passes { display: flex; flex-direction: column; gap: .25rem; }
.bcn-proposal-pass {
  display: grid;
  grid-template-columns: 7rem 4.5rem 1fr;
  gap: .5rem;
  align-items: baseline;
  font-size: .6875rem;
}
@media (max-width: 40rem) {
  .bcn-proposal-pass { grid-template-columns: 1fr; gap: .125rem; }
}
.bcn-proposal-pass-name { font-weight: 600; }
.bcn-proposal-pass-status { text-transform: uppercase; letter-spacing: .03em; color: var(--bcn-text-faint); }
.bcn-proposal-pass.is-ok .bcn-proposal-pass-status { color: var(--bcn-ok); }
.bcn-proposal-pass.is-failed .bcn-proposal-pass-status { color: var(--bcn-danger); }
.bcn-proposal-pass-detail { color: var(--bcn-text-muted); }

/* A gap is a prompt, not a failure. Styled to be read, not to alarm. */
.bcn-proposal-gap {
  margin: .375rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-danger);
}

.bcn-proposal-tree { margin-top: .5rem; font-size: .75rem; }
.bcn-proposal-tree > summary { cursor: pointer; color: var(--bcn-text-muted); }
.bcn-proposal-loe {
  margin: .5rem 0 0 .5rem;
  padding-left: .625rem;
  border-left: 2px solid var(--bcn-border);
}
.bcn-proposal-loe-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bcn-proposal-loe-title { font-weight: 600; }
.bcn-proposal-loe-owner { font-size: .6875rem; color: var(--bcn-text-muted); }
.bcn-proposal-outcome { margin-top: .375rem; font-style: italic; color: var(--bcn-text-muted); }
.bcn-proposal-deliverable {
  margin-left: .75rem;
  color: var(--bcn-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ─── The ranked portfolio on Overview ───────────────────────────────────── */

.bcn-rank-board { display: flex; flex-direction: column; gap: .375rem; }

.bcn-rank-board-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .5rem .625rem;
  border: 1px solid var(--bcn-border);
  border-radius: .5rem;
  background: var(--bcn-surface);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.bcn-rank-board-row:hover { border-color: var(--bcn-accent); }
.bcn-rank-board-row.is-unscored { border-style: dashed; }
.bcn-rank-board-row.is-unscored .bcn-rank-pos {
  background: transparent;
  color: var(--bcn-text-faint);
}

.bcn-rank-board-text { flex: 1; min-width: 0; }
.bcn-rank-board-title { font-size: .8125rem; font-weight: 550; }
.bcn-rank-board-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .125rem;
  font-size: .6875rem;
  color: var(--bcn-text-muted);
  font-variant-numeric: tabular-nums;
}
.bcn-rank-board-score {
  flex: none;
  font-size: .9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bcn-accent);
}

/* ─── Roster table, collapsed ────────────────────────────────────────────── */

/* Below 52rem the header row is gone, so each cell introduces itself from its
   data-label. Without this the row is a column of bare values — a dash and a
   zero under someone's name, with nothing to say which is which. */
@media (max-width: 52rem) {
  .bcn-table-row .bcn-table-cell[data-label]:not(.bcn-table-actions) {
    display: flex;
    align-items: baseline;
    gap: .5rem;
  }
  .bcn-table-row .bcn-table-cell[data-label]::before {
    content: attr(data-label);
    flex: 0 0 4.5rem;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bcn-text-faint);
  }
  /* Group and Capacity were hidden to save width; with labels they are useful
     again, and they are the two a Manager most often wants. */
  .bcn-table-row .bcn-table-cell:nth-child(3),
  .bcn-table-row .bcn-table-cell:nth-child(4) { display: flex; }
}

/* ═══ Signals ════════════════════════════════════════════════════════════════
 *
 * The three systems that had no screen: recurring themes, the topic graph, and
 * what one group could lend another. Leader-only, and the layout leans on that
 * — these are things you read and think about, not things you action, so the
 * rows are roomy and nothing here carries a button.
 */

/* How current the index is. Stated rather than assumed, because the reading
   below it is only as fresh as the last extraction pass. */
.bcn-signal-state {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: .25rem 0 .5rem;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-bg-sunken);
}
.bcn-signal-state-text { flex: 1; min-width: 14rem; }
.bcn-signal-state-line { font-size: .8125rem; }
.bcn-signal-state-sub {
  margin-top: .25rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--bcn-text-faint);
  max-width: 52rem;
}

.bcn-themes { display: flex; flex-direction: column; gap: .625rem; margin-top: .875rem; }
.bcn-theme {
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-left: 3px solid var(--bcn-border-strong);
  border-radius: 10px;
  background: var(--bcn-surface);
}
/* Still being raised, rather than something the company already moved past. */
.bcn-theme.is-recent { border-left-color: var(--bcn-accent); }
.bcn-theme-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bcn-theme-label { font-weight: 550; }
.bcn-theme-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .375rem;
  font-size: .75rem;
  color: var(--bcn-text-faint);
}
.bcn-theme-evidence {
  margin: .5rem 0 0;
  padding-left: 1.1rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--bcn-text-muted);
  max-width: 62rem;
}
/* The merge, shown so it can be disputed. Reconciling by meaning is what makes
   four people describing one blocker five ways count as four. */
.bcn-theme-spellings {
  margin: .5rem 0 0;
  font-size: .6875rem;
  color: var(--bcn-text-faint);
}

.bcn-graph-figure {
  margin-top: .875rem;
  padding: .5rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
  overflow-x: auto;
}

.bcn-matches { display: flex; flex-direction: column; gap: .625rem; margin-top: .875rem; }
.bcn-match {
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-surface);
}
.bcn-match-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bcn-match-what { font-weight: 550; }
.bcn-match-route { margin-top: .25rem; font-size: .8125rem; color: var(--bcn-accent); }
.bcn-match-detail { margin: .375rem 0 0; font-size: .8125rem; line-height: 1.5; max-width: 62rem; }
.bcn-match-basis {
  margin: .375rem 0 0;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--bcn-text-faint);
  max-width: 62rem;
}

.bcn-group-ledger { margin-top: 1rem; border-top: 1px solid var(--bcn-border); }
.bcn-group-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 9rem 9rem auto;
  align-items: center;
  gap: .75rem;
  padding: .5rem .25rem;
  border-bottom: 1px solid var(--bcn-border);
  font-size: .8125rem;
}
.bcn-group-row-name { font-weight: 500; }
.bcn-group-row-load { color: var(--bcn-text-muted); font-variant-numeric: tabular-nums; }
.bcn-group-row-spare { color: var(--bcn-text-muted); font-variant-numeric: tabular-nums; }
.bcn-group-row-spare.is-short { color: var(--bcn-danger); }
.bcn-group-row-extras { display: flex; gap: .375rem; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 52rem) {
  .bcn-group-row { grid-template-columns: 1fr auto; row-gap: .25rem; }
  .bcn-group-row-extras { grid-column: 1 / -1; justify-content: flex-start; }
}

/* A graph too small to be a graph. Same content, laid out as what it is. */
.bcn-graph-stub { display: flex; flex-direction: column; gap: .25rem; margin-top: .75rem; }
.bcn-graph-stub-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .4375rem .625rem;
  border-left: 3px solid var(--bcn-border-strong);
  border-radius: 0 6px 6px 0;
  background: var(--bcn-bg-sunken);
  font-size: .8125rem;
}
.bcn-graph-stub-row.is-problem { border-left-color: var(--bcn-accent); }
.bcn-graph-stub-label { font-weight: 500; }
.bcn-graph-stub-meta { color: var(--bcn-text-faint); font-size: .75rem; white-space: nowrap; }

/* Assignee and due date on a card, for whoever may change them. */
.bcn-card-edit {
  display: grid;
  grid-template-columns: 1fr 10rem;
  gap: .625rem;
  margin: .75rem 0 .25rem;
}
.bcn-card-edit .bcn-field { max-width: none; margin: 0; }
@media (max-width: 34rem) {
  .bcn-card-edit { grid-template-columns: 1fr; }
}

/* The workspace switcher. Only drawn for somebody with a seat in more than one
   company, which is why it sits above the account button rather than in the
   top bar — it is identity, not navigation, and most people never see it. */
.bcn-workspace {
  display: block;
  padding: .375rem .5rem .5rem;
}
.bcn-workspace-label {
  display: block;
  margin-bottom: .25rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-workspace .bcn-select { width: 100%; font-size: .8125rem; padding: .3125rem .5rem; }

/* ═══ Connected sources ══════════════════════════════════════════════════════
 *
 * A person's own Google Drive and Microsoft 365, on the Documents page. Cards
 * for the connections, and a picker for browsing and searching them.
 */
.bcn-sources { margin: .25rem 0 1.5rem; }
.bcn-sources-head { margin-bottom: .75rem; }
.bcn-source-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: .625rem;
}
.bcn-source-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-surface);
}
.bcn-source-card.is-connected { border-left: 3px solid var(--bcn-ok); }
.bcn-source-card.is-expired { border-left: 3px solid var(--bcn-danger); }
.bcn-source-card.is-unset { opacity: .7; }
.bcn-source-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .875rem;
  color: #fff;
  background: var(--bcn-text-faint);
}
/* Brand-adjacent, not brand: a hint of which system it is, not a logo. */
.bcn-source-icon.is-google { background: #4a7fd6; }
.bcn-source-icon.is-microsoft { background: #3f6fb0; }
.bcn-source-text { flex: 1; min-width: 0; }
.bcn-source-name { font-weight: 550; font-size: .875rem; }
.bcn-source-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin-top: .125rem;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--bcn-text-muted);
}
.bcn-source-used { color: var(--bcn-text-faint); }
.bcn-source-actions { display: flex; gap: .375rem; flex: 0 0 auto; }
.bcn-sources > .bcn-row-actions { margin-top: .75rem; }

/* Provenance on an imported document. */
.bcn-doc-source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: .375rem 0 0;
  font-size: .75rem;
  color: var(--bcn-text-faint);
}
.bcn-doc-source-link { color: var(--bcn-accent); text-decoration: none; }
.bcn-doc-source-link:hover { text-decoration: underline; }

/* The picker. */
.bcn-filepick {
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100vh - 3rem));
  display: flex;
  flex-direction: column;
}
.bcn-filepick-tabs { margin: .75rem 1rem 0; align-self: flex-start; }
.bcn-filepick-bar { padding: .625rem 1rem 0; }
.bcn-filepick-search { width: 100%; }
.bcn-filepick-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  padding: .5rem 1rem;
  font-size: .75rem;
  color: var(--bcn-text-muted);
  border-bottom: 1px solid var(--bcn-border);
}
.bcn-filepick-crumb {
  border: 0;
  background: none;
  padding: .125rem .25rem;
  border-radius: 4px;
  font: inherit;
  color: var(--bcn-accent);
  cursor: pointer;
}
.bcn-filepick-crumb:disabled { color: var(--bcn-text); cursor: default; font-weight: 550; }
.bcn-filepick-crumb:not(:disabled):hover { background: var(--bcn-bg-sunken); }
.bcn-filepick-sep { color: var(--bcn-text-faint); }
.bcn-filepick-list {
  flex: 1;
  min-height: 12rem;
  overflow-y: auto;
  padding: .25rem .5rem;
}
.bcn-filepick-row {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .5rem;
  border-radius: 6px;
  cursor: pointer;
}
.bcn-filepick-row:hover { background: var(--bcn-bg-sunken); }
.bcn-filepick-row.is-unreadable { opacity: .55; cursor: default; }
.bcn-filepick-row input[type=checkbox] { flex: 0 0 auto; }
.bcn-filepick-folder { flex: 0 0 auto; width: 13px; text-align: center; color: var(--bcn-text-faint); }
.bcn-filepick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bcn-filepick-name { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcn-filepick-row.is-folder .bcn-filepick-name { font-weight: 550; }
.bcn-filepick-meta { font-size: .6875rem; color: var(--bcn-text-faint); }
.bcn-filepick-open { flex: 0 0 auto; font-size: .75rem; color: var(--bcn-accent); text-decoration: none; }
.bcn-filepick-open:hover { text-decoration: underline; }
.bcn-filepick-problem { margin: .5rem .5rem 0; font-size: .75rem; color: var(--bcn-danger); }
.bcn-filepick-foot { display: flex; align-items: center; gap: .5rem; }
.bcn-filepick-status { flex: 1; font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-filepick-clear {
  border: 0;
  background: none;
  padding: .25rem .375rem;
  font: inherit;
  font-size: .75rem;
  color: var(--bcn-accent);
  cursor: pointer;
}
.bcn-filepick-clear:hover { text-decoration: underline; }

/* ─── Activity log ───────────────────────────────────────────────────────── */

.bcn-act-feed { display: flex; flex-direction: column; }
.bcn-act-feed.is-page { margin-top: .75rem; }
.bcn-act-day {
  margin: 1.125rem 0 .25rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-act-feed > .bcn-act-day:first-child { margin-top: .25rem; }
.bcn-act-row {
  padding: .5rem 0 .5rem .75rem;
  border-left: 2px solid var(--bcn-border);
  font-size: .875rem;
}
.bcn-act-row.is-created { border-left-color: var(--bcn-ok); }
.bcn-act-row.is-deleted { border-left-color: var(--bcn-danger); }
.bcn-act-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .25rem; line-height: 1.45; }
.bcn-act-who { font-weight: 600; color: var(--bcn-text); }
.bcn-act-verb { color: var(--bcn-text-muted); white-space: pre; }
.bcn-act-name { color: var(--bcn-text); font-weight: 500; overflow-wrap: anywhere; }
.bcn-act-name.is-link {
  border: none; background: none; padding: 0; font: inherit; font-weight: 500;
  color: var(--bcn-text); text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--bcn-border-strong); text-underline-offset: 2px;
}
.bcn-act-name.is-link:hover { color: var(--bcn-accent); text-decoration-color: currentColor; }
.bcn-act-via {
  font-size: .75rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--bcn-bg-sunken);
  color: var(--bcn-text-muted);
}
.bcn-act-via.is-assistant { background: var(--bcn-accent-soft); color: var(--bcn-accent); }
.bcn-act-via.is-sync { background: var(--bcn-warn-soft); color: var(--bcn-warn); }
.bcn-act-time { margin-left: auto; padding-left: .75rem; font-size: .75rem; color: var(--bcn-text-faint); white-space: nowrap; }
.bcn-act-changes { list-style: none; margin: .25rem 0 0; padding: 0; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-act-changes li { margin: .125rem 0; overflow-wrap: anywhere; }
.bcn-act-field { color: var(--bcn-text-faint); }
.bcn-act-from { color: var(--bcn-text-faint); }
.bcn-act-to { color: var(--bcn-text); }
.bcn-act-arrow { color: var(--bcn-text-faint); }
.bcn-act-note { margin-top: .25rem; font-size: .8125rem; color: var(--bcn-warn); }
.bcn-act-more { margin-top: .75rem; align-self: flex-start; }

/* On a card: closed until asked for. */
.bcn-act-card { margin-top: .5rem; }
.bcn-act-card > summary { cursor: pointer; list-style: none; }
.bcn-act-card > summary::-webkit-details-marker { display: none; }
.bcn-act-card > summary::before { content: "▸ "; }
.bcn-act-card[open] > summary::before { content: "▾ "; }
.bcn-act-card .bcn-act-row { padding-top: .375rem; padding-bottom: .375rem; }

/* The account button's menu, opening upward from the sidebar foot. */
.bcn-account-menu {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: calc(100% - .25rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: .25rem;
  border: 1px solid var(--bcn-border);
  border-radius: 10px;
  background: var(--bcn-surface-raised);
  box-shadow: var(--bcn-shadow-md);
}
.bcn-account-menu-item {
  padding: .5rem .625rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--bcn-text);
  font: inherit;
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
}
.bcn-account-menu-item:hover,
.bcn-account-menu-item:focus-visible { background: var(--bcn-bg-sunken); outline: none; }

@media (max-width: 40rem) {
  .bcn-act-time { margin-left: 0; padding-left: 0; width: 100%; }
}

/* ─── Two-way sync ───────────────────────────────────────────────────────── */

.bcn-sync { display: flex; flex-direction: column; gap: 1rem; }
.bcn-sync-trackers { display: flex; flex-direction: column; gap: .5rem; }
.bcn-sync-unset { margin-top: .25rem; }
.bcn-source-icon.is-jira { background: #2f6fdb; color: #fff; }
.bcn-source-icon.is-asana { background: #e3616a; color: #fff; }
.bcn-source-icon.is-planner { background: #3e8a4f; color: #fff; }
.bcn-source-icon.is-faketracker { background: var(--bcn-text-muted); color: var(--bcn-bg); }
.bcn-sync-links { display: flex; flex-direction: column; gap: .625rem; }
.bcn-sync-link {
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
}
.bcn-sync-link.is-error { border-color: var(--bcn-danger); }
.bcn-sync-link.is-paused { opacity: .75; }
.bcn-sync-link-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bcn-sync-link-head .bcn-source-icon { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
.bcn-sync-link-title { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.bcn-sync-project { color: var(--bcn-text); }
a.bcn-sync-project { text-decoration: underline; text-decoration-color: var(--bcn-border-strong); text-underline-offset: 2px; }
a.bcn-sync-project:hover { color: var(--bcn-accent); }
.bcn-sync-arrow { color: var(--bcn-text-faint); font-weight: 400; }
.bcn-sync-link-meta { margin-top: .25rem; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-sync-error {
  margin-top: .5rem;
  padding: .375rem .5rem;
  border-radius: 6px;
  background: var(--bcn-danger-soft);
  color: var(--bcn-danger);
  font-size: .8125rem;
}
.bcn-sync-problems { margin-top: .375rem; font-size: .8125rem; color: var(--bcn-warn); }
.bcn-sync-problems summary { cursor: pointer; }
.bcn-sync-problems ul { margin: .25rem 0 0; padding-left: 1.125rem; color: var(--bcn-text-muted); }
.bcn-sync-link-actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }

/* On a board card. */
.bcn-sync-chip {
  margin-left: auto;
  padding: 0 .4rem;
  border-radius: 999px;
  border: 1px solid var(--bcn-border);
  font-size: .6875rem;
  line-height: 1.5;
  color: var(--bcn-text-muted);
  white-space: nowrap;
  text-decoration: none;
}
a.bcn-sync-chip:hover { color: var(--bcn-accent); border-color: var(--bcn-accent); }
.bcn-sync-chip.is-gone { color: var(--bcn-warn); border-color: var(--bcn-warn); }

/* ─── Starter plans ──────────────────────────────────────────────────────── */

.bcn-panel.bcn-starters { width: min(64rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); }
.bcn-starters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.bcn-starter {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: .875rem 1rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
}
.bcn-starter-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--bcn-text); }
.bcn-starter-outcome { margin: 0; font-size: .875rem; color: var(--bcn-text); }
.bcn-starter-when { margin: 0; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-starter-meta { font-size: .75rem; color: var(--bcn-text-faint); }
.bcn-starter-steps { font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-starter-steps summary { cursor: pointer; color: var(--bcn-text-muted); }
.bcn-starter-steps ol { margin: .375rem 0 0; padding-left: 1.25rem; }
.bcn-starter-steps li { margin: .125rem 0; }
.bcn-starter-actions { margin-top: auto; padding-top: .375rem; }
.bcn-starter-form { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: .375rem; }
.bcn-starter-field { display: flex; flex-direction: column; gap: .2rem; font-size: .75rem; color: var(--bcn-text-muted); }

/* ─── Growth ─────────────────────────────────────────────────────────────── */

.bcn-growth-usage {
  font-size: .75rem;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: var(--bcn-bg-sunken);
  color: var(--bcn-text-muted);
  white-space: nowrap;
}
.bcn-growth-usage.is-high { background: var(--bcn-warn-soft); color: var(--bcn-warn); }
.bcn-growth-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin: 0 0 .75rem;
  padding: .625rem .875rem;
  border-radius: var(--bcn-radius);
  background: var(--bcn-accent-soft);
  color: var(--bcn-text);
  font-size: .875rem;
}
.bcn-growth-nudge.is-warn { background: var(--bcn-warn-soft); }
.bcn-growth-tabs {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--bcn-border);
  margin-bottom: 1rem;
}
.bcn-growth-tab {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .75rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--bcn-text-muted);
  font: inherit;
  font-size: .875rem;
  cursor: pointer;
  margin-bottom: -1px;
}
.bcn-growth-tab:hover { color: var(--bcn-text); }
.bcn-growth-tab.is-active { color: var(--bcn-text); border-bottom-color: var(--bcn-accent); font-weight: 600; }
.bcn-growth-count {
  min-width: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--bcn-accent);
  color: var(--bcn-accent-text);
  font-size: .6875rem;
  font-weight: 600;
  text-align: center;
}
.bcn-growth-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .875rem; }
.bcn-growth-meta { font-size: .8125rem; color: var(--bcn-text-faint); }
.bcn-growth-section { margin-top: 1.5rem; }
.bcn-growth-h { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 600; color: var(--bcn-text); }
details.bcn-growth-section > summary { cursor: pointer; }
.bcn-growth-caveat { margin: .5rem 0 0; font-size: .8125rem; color: var(--bcn-warn); }
.bcn-table-scroll { overflow-x: auto; }

/* Opportunities */
.bcn-opps { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .75rem; }
.bcn-opp, .bcn-competitor, .bcn-post, .bcn-review {
  padding: .875rem 1rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
}
.bcn-opp.is-dismissed { opacity: .7; }
.bcn-opp-head { display: flex; align-items: flex-start; gap: .5rem; }
.bcn-opp-title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--bcn-text); overflow-wrap: anywhere; }
.bcn-opp-facts { display: flex; flex-wrap: wrap; gap: .75rem; margin: .375rem 0; font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-opp-value.is-high { color: var(--bcn-ok); font-weight: 600; }
.bcn-opp-deadline { color: var(--bcn-warn); font-weight: 600; }
.bcn-opp-why { margin: .25rem 0; font-size: .875rem; color: var(--bcn-text); }
.bcn-opp-note { margin: .25rem 0; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-opp-steps { margin: .375rem 0; padding-left: 1.25rem; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-opp-sources { display: flex; flex-wrap: wrap; gap: .25rem .625rem; margin: .5rem 0; font-size: .75rem; }
.bcn-opp-sources-label { color: var(--bcn-text-faint); }
.bcn-opp-sources a { color: var(--bcn-accent); overflow-wrap: anywhere; }
.bcn-opp-accept, .bcn-post-schedule {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; font-size: .8125rem;
}
.bcn-opp-accept .bcn-select, .bcn-post-schedule .bcn-input { width: auto; }

/* Content */
.bcn-growth-compose {
  padding: 1rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-bg-sunken);
}
.bcn-growth-compose-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.bcn-growth-compose-row .bcn-select { width: auto; flex: 1 1 auto; }
.bcn-post { margin-bottom: .625rem; }
.bcn-post.is-posted { opacity: .75; }
.bcn-post-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.bcn-post-title { flex: 1 1 12rem; width: auto; font-weight: 600; }
.bcn-post-when { font-size: .75rem; color: var(--bcn-text-muted); white-space: nowrap; }
.bcn-post-body { width: 100%; resize: vertical; font-size: .875rem; line-height: 1.5; }
.bcn-post-count { text-align: right; font-size: .6875rem; color: var(--bcn-text-faint); }
.bcn-post-count.is-over { color: var(--bcn-danger); font-weight: 600; }
.bcn-post-alts { margin-top: .375rem; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-post-alts summary { cursor: pointer; }
.bcn-post-alt { margin: .375rem 0; padding: .5rem .625rem; border-left: 2px solid var(--bcn-border); }
.bcn-post-alt p { margin: 0 0 .25rem; white-space: pre-wrap; color: var(--bcn-text); }

/* Contacts */
.bcn-pipeline { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: .875rem; }
.bcn-pipe-stage {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 5.5rem; padding: .5rem .75rem;
  border: 1px solid var(--bcn-border); border-radius: 10px;
  background: var(--bcn-surface); cursor: pointer; font: inherit; color: var(--bcn-text);
}
.bcn-pipe-stage.is-active { border-color: var(--bcn-accent); background: var(--bcn-accent-soft); }
.bcn-pipe-n { font-size: 1.125rem; font-weight: 600; }
.bcn-pipe-label { font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-chip-toggle {
  padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--bcn-border);
  background: var(--bcn-surface); color: var(--bcn-text-muted); font: inherit; font-size: .8125rem; cursor: pointer;
}
.bcn-chip-toggle.is-on { border-color: var(--bcn-accent); background: var(--bcn-accent-soft); color: var(--bcn-accent); }
.bcn-contacts { border: 1px solid var(--bcn-border); border-radius: var(--bcn-radius); overflow: hidden; background: var(--bcn-surface); }
.bcn-contact + .bcn-contact { border-top: 1px solid var(--bcn-border); }
.bcn-contact-row {
  display: grid;
  grid-template-columns: minmax(10rem, 2fr) 7.5rem minmax(5rem, 1fr) 5rem minmax(5rem, 1fr) 9.5rem 6rem;
  gap: .5rem;
  align-items: center;
  padding: .375rem .75rem;
  font-size: .8125rem;
}
.bcn-contact-row.is-head { background: var(--bcn-bg-sunken); color: var(--bcn-text-faint); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; border-bottom: 1px solid var(--bcn-border); }
.bcn-contact-name { display: flex; flex-direction: column; align-items: flex-start; border: none; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--bcn-text); }
.bcn-contact-name span { font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-contact-name:hover strong { color: var(--bcn-accent); }
.bcn-contact-row .bcn-input { padding: .25rem .375rem; font-size: .8125rem; }
.bcn-contact-follow.is-late { border-color: var(--bcn-danger); color: var(--bcn-danger); }
.bcn-contact-follow.is-today { border-color: var(--bcn-warn); color: var(--bcn-warn); }
.bcn-contact-source, .bcn-contact-last { color: var(--bcn-text-muted); }
.bcn-contact-detail { padding: .5rem .75rem .875rem; background: var(--bcn-bg-sunken); font-size: .8125rem; }
.bcn-contact-facts { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--bcn-text-muted); }
.bcn-contact-facts a { color: var(--bcn-accent); }
.bcn-contact-notes { margin: .375rem 0; white-space: pre-wrap; }
.bcn-contact-log { display: grid; grid-template-columns: 7rem 1fr 9.5rem auto; gap: .375rem; margin: .5rem 0; }
.bcn-contact-touches { display: flex; flex-direction: column; gap: .25rem; margin: .375rem 0; }
.bcn-contact-touch { display: flex; gap: .5rem; flex-wrap: wrap; }
.bcn-contact-touch-meta { color: var(--bcn-text-faint); white-space: nowrap; }

/* What works */
.bcn-channel-table { width: 100%; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.bcn-channel-table th { text-align: right; font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bcn-text-faint); padding: .375rem .5rem; border-bottom: 1px solid var(--bcn-border); }
.bcn-channel-table th:first-child, .bcn-channel-table td:first-child { text-align: left; }
.bcn-channel-table td { text-align: right; padding: .4375rem .5rem; border-bottom: 1px solid var(--bcn-border); color: var(--bcn-text); }
.bcn-channel-table td.is-missing { color: var(--bcn-text-faint); }
.bcn-channel-table td.is-good { color: var(--bcn-ok); font-weight: 600; }
.bcn-channel-table td.is-bad { color: var(--bcn-danger); }
.bcn-channel-name { text-transform: capitalize; font-weight: 500; }
.bcn-spend-form { display: grid; grid-template-columns: 1.5fr 9rem 6rem 6rem 1.5fr auto; gap: .375rem; margin: .5rem 0; }
.bcn-spend-list { display: flex; flex-direction: column; }
.bcn-spend-row { display: grid; grid-template-columns: 1.5fr 6rem 6rem 4rem 2fr auto; gap: .5rem; align-items: center; padding: .25rem 0; border-bottom: 1px solid var(--bcn-border); font-size: .8125rem; }
.bcn-spend-note { color: var(--bcn-text-muted); }

/* Reviews */
.bcn-review-tiles { display: flex; gap: .625rem; flex-wrap: wrap; margin-bottom: 1rem; }
.bcn-review-tile { min-width: 8rem; padding: .625rem .875rem; border: 1px solid var(--bcn-border); border-radius: var(--bcn-radius); background: var(--bcn-surface); }
.bcn-review-tile-value { font-size: 1.375rem; font-weight: 600; color: var(--bcn-text); }
.bcn-review-tile-label { font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-themes { display: flex; flex-direction: column; gap: .375rem; }
.bcn-theme { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: .875rem; }
.bcn-theme-name { font-weight: 500; }
.bcn-theme-quote { color: var(--bcn-text-muted); font-style: italic; }
.bcn-reviews { display: flex; flex-direction: column; gap: .5rem; }
.bcn-review-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bcn-review-stars { color: var(--bcn-warn); letter-spacing: .05em; }
.bcn-review-text { margin: .375rem 0; font-size: .875rem; white-space: pre-wrap; }

/* Competitors */
.bcn-competitors { display: flex; flex-direction: column; gap: .625rem; }
.bcn-competitor-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.bcn-competitor-change { margin: .5rem 0; padding: .5rem .625rem; border-radius: 8px; background: var(--bcn-bg-sunken); font-size: .875rem; }
.bcn-competitor-change.is-material { background: var(--bcn-warn-soft); color: var(--bcn-text); border-left: 3px solid var(--bcn-warn); }
.bcn-competitor-notes { font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-competitor-notes summary { cursor: pointer; }
.bcn-competitor-notes p { white-space: pre-wrap; color: var(--bcn-text); }

/* Overview: this week */
.bcn-week-list { margin: .25rem 0 .5rem; padding-left: 1.5rem; }
.bcn-week-item { margin: .25rem 0; }
.bcn-week-go { display: inline-flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; border: none; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--bcn-text); }
.bcn-week-go:hover .bcn-week-title { color: var(--bcn-accent); text-decoration: underline; }
.bcn-week-title { font-weight: 500; }
.bcn-week-detail { font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-week-item.is-overdue .bcn-week-detail, .bcn-week-item.is-deadline .bcn-week-detail { color: var(--bcn-danger); }
.bcn-week-also, .bcn-week-company { margin: .25rem 0; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-week-news { margin: .25rem 0; font-size: .8125rem; color: var(--bcn-warn); }

@media (max-width: 52rem) {
  .bcn-contact-row { grid-template-columns: 1fr 7rem 8.5rem; }
  .bcn-contact-row > :nth-child(3), .bcn-contact-row > :nth-child(4), .bcn-contact-row > :nth-child(5), .bcn-contact-row > :nth-child(7) { display: none; }
  .bcn-contact-log, .bcn-spend-form, .bcn-spend-row { grid-template-columns: 1fr; }
  .bcn-opps { grid-template-columns: 1fr; }
}

/* Sign-in: one button per provider, stacked, the same width. */
.bcn-lock-card .bcn-lock-btn { width: min(17rem, 100%); justify-content: center; }
.bcn-lock-card .bcn-lock-btn + .bcn-lock-btn { margin-top: .625rem; }

/* ─── Confirmation card ──────────────────────────────────────────────────── */

.bcn-confirm {
  margin-top: .75rem;
  border: 1px solid var(--bcn-border);
  border-left: 3px solid var(--bcn-accent);
  border-radius: .5rem;
  background: var(--bcn-surface);
  overflow: hidden;
}
.bcn-confirm.is-settled { border-left-color: var(--bcn-border-strong); }
.bcn-confirm-head { padding: .625rem .875rem .25rem; }
.bcn-confirm-kicker {
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
}
.bcn-confirm-item { padding: .625rem .875rem; border-top: 1px solid var(--bcn-border); }
.bcn-confirm-head + .bcn-confirm-item { border-top: none; }
.bcn-confirm-top { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.bcn-confirm-kind {
  font-size: .6875rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: var(--bcn-accent-soft);
  color: var(--bcn-accent);
  white-space: nowrap;
}
.bcn-confirm-title { font-weight: 600; color: var(--bcn-text); overflow-wrap: anywhere; }
.bcn-confirm-lines { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-confirm-actions { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin-top: .5rem; }
.bcn-confirm-status { font-size: .8125rem; font-weight: 600; }
.bcn-confirm-status.is-confirmed { color: var(--bcn-ok); }
.bcn-confirm-status.is-confirmed::before { content: "✓ "; }
.bcn-confirm-status.is-declined, .bcn-confirm-status.is-expired { color: var(--bcn-text-faint); }
.bcn-confirm-status.is-failed { color: var(--bcn-danger); }
.bcn-confirm-error { font-size: .8125rem; color: var(--bcn-danger); }
.bcn-confirm-foot {
  display: flex;
  gap: .375rem;
  padding: .5rem .875rem;
  border-top: 1px solid var(--bcn-border);
  background: var(--bcn-bg-sunken);
}

/* The 1-3-1 review on a plan */
.bcn-review131 {
  margin-top: .625rem;
  padding: .625rem .75rem;
  border-radius: 8px;
  background: var(--bcn-bg-sunken);
  font-size: .875rem;
}
.bcn-review131-label {
  font-size: .625rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bcn-text-faint);
  margin-top: .5rem;
}
.bcn-review131-label:first-child { margin-top: 0; }
.bcn-review131-problem { margin: .125rem 0 0; color: var(--bcn-danger); font-weight: 500; }
.bcn-review131-remedies { margin: .25rem 0 0; padding-left: 1.25rem; }
.bcn-review131-remedies li { margin: .25rem 0; }
.bcn-review131-remedies li.is-recommended { color: var(--bcn-text); }
.bcn-review131-remedy { display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; }
.bcn-review131-detail { font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-review131-reasoning { margin: .125rem 0 0; color: var(--bcn-text); }

/* ─── Plan simulator ─────────────────────────────────────────────────────── */

.bcn-panel.bcn-sim { width: min(78rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
.bcn-sim-subject { font-size: .8125rem; color: var(--bcn-text-muted); margin-top: .125rem; }
.bcn-sim-body { position: relative; }
.bcn-confirm-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }

.bcn-sim-levers {
  position: sticky;
  top: -1px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.5rem;
  padding: .75rem 0 1rem;
  background: var(--bcn-surface);
  border-bottom: 1px solid var(--bcn-border);
}
.bcn-sim-lever { display: flex; flex-direction: column; gap: .25rem; }
.bcn-sim-lever-top { display: flex; justify-content: space-between; align-items: baseline; }
.bcn-sim-lever-name { font-weight: 600; font-size: .875rem; color: var(--bcn-text); }
.bcn-sim-lever-value { font-family: var(--bcn-mono); font-size: .9375rem; font-weight: 600; color: var(--bcn-accent); }
.bcn-sim-lever-hint { font-size: .6875rem; color: var(--bcn-text-faint); }
.bcn-sim-slider { width: 100%; accent-color: var(--bcn-accent); }

.bcn-sim-results { padding-top: 1rem; transition: opacity .15s; }
.bcn-sim-results.is-busy { opacity: .55; }
.bcn-sim-error { padding: 1rem; color: var(--bcn-danger); }

.bcn-sim-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .625rem; }
.bcn-sim-tile {
  padding: .625rem .75rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
}
.bcn-sim-tile-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bcn-text-faint); font-weight: 600; }
.bcn-sim-tile-value { font-size: 1.5rem; font-weight: 600; color: var(--bcn-text); line-height: 1.2; margin-top: .125rem; font-variant-numeric: tabular-nums; }
.bcn-sim-tile-detail { font-size: .75rem; color: var(--bcn-text-muted); margin-top: .125rem; }
.bcn-sim-verdict { display: inline-block; font-weight: 600; text-transform: capitalize; }
.bcn-sim-verdict.is-ok { color: var(--bcn-ok); }
.bcn-sim-verdict.is-ok::before { content: "✓ "; }
.bcn-sim-verdict.is-warn { color: var(--bcn-warn); }
.bcn-sim-verdict.is-warn::before { content: "▲ "; }
.bcn-sim-verdict.is-danger { color: var(--bcn-danger); }
.bcn-sim-verdict.is-danger::before { content: "✕ "; }
.bcn-sim-reasons { margin: .5rem 0 0; font-size: .875rem; color: var(--bcn-text-muted); }

.bcn-sim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1rem; }
.bcn-sim-card {
  margin: 0;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-radius: var(--bcn-radius);
  background: var(--bcn-surface);
  min-width: 0;
}
.bcn-sim-results > .bcn-sim-card { margin-top: .75rem; }
.bcn-sim-card-title { font-weight: 600; font-size: .9375rem; color: var(--bcn-text); }
.bcn-sim-card-sub { font-size: .75rem; color: var(--bcn-text-muted); margin: .125rem 0 .5rem; }

.bcn-sim-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bcn-sim-scroll { overflow-x: auto; }
.bcn-sim-scroll .bcn-sim-svg { min-width: 40rem; }
.bcn-sim-axis, .bcn-sim-value { font-size: 10px; font-family: var(--bcn-mono); fill: var(--bcn-text-faint); }
.bcn-sim-value { fill: var(--bcn-text-muted); }
.bcn-sim-row-label { font-size: 11px; fill: var(--bcn-text); }
.bcn-sim-axis-line { stroke: var(--bcn-border-strong); stroke-width: 1; }
.bcn-sim-gridline { stroke: var(--bcn-border); stroke-width: 1; }
.bcn-sim-bar { fill: var(--bcn-accent); }
.bcn-sim-bar.is-past { fill: var(--bcn-danger); opacity: .8; }
.bcn-sim-line { stroke: var(--bcn-accent); stroke-width: 2; stroke-linejoin: round; }
.bcn-sim-hit { fill: transparent; cursor: default; }
.bcn-sim-hit:hover { fill: var(--bcn-text); fill-opacity: .05; }
.bcn-sim-rule { stroke-width: 1.25; stroke-dasharray: 3 3; }
.bcn-sim-rule.is-deadline { stroke: var(--bcn-danger); stroke-dasharray: none; }
.bcn-sim-rule.is-q { stroke: var(--bcn-text-faint); }
.bcn-sim-rule.is-today { stroke: var(--bcn-text-faint); }
.bcn-sim-rule.is-ref { stroke: var(--bcn-danger); opacity: .6; }
.bcn-sim-rule-label { font-size: 10px; font-family: var(--bcn-mono); fill: var(--bcn-text-muted); }
.bcn-sim-rule-label.is-deadline { fill: var(--bcn-danger); font-weight: 600; }
rect.bcn-sim-range { fill: var(--bcn-accent); fill-opacity: .28; stroke: var(--bcn-accent); stroke-width: 1; }
rect.bcn-sim-range.is-late { fill: var(--bcn-danger); stroke: var(--bcn-danger); }
.bcn-sim-mid { fill: var(--bcn-accent); stroke: var(--bcn-surface); stroke-width: 2; }
.bcn-sim-mid.is-late { fill: var(--bcn-danger); }
.bcn-sim-due { fill: var(--bcn-surface); stroke: var(--bcn-text); stroke-width: 1.25; }
.bcn-sim-hbar { fill: var(--bcn-accent); }
.bcn-sim-hbar.is-warn { fill: var(--bcn-warn); }
.bcn-sim-hbar.is-danger { fill: var(--bcn-danger); }

.bcn-sim-heat-table { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: .75rem; font-variant-numeric: tabular-nums; }
.bcn-sim-heat-table th { font-weight: 500; color: var(--bcn-text-faint); font-family: var(--bcn-mono); font-size: .6875rem; padding: .25rem; }
.bcn-sim-heat-corner { text-align: left; white-space: nowrap; }
.bcn-sim-heat-table td {
  text-align: center;
  padding: .5rem .25rem;
  border-radius: 4px;
  color: var(--bcn-text);
  background: color-mix(in srgb, var(--bcn-accent) calc(var(--level) * 100%), var(--bcn-surface));
}
.bcn-sim-heat-table td.is-dark { color: var(--bcn-accent-text); }
.bcn-sim-heat-table td.is-here { outline: 2px solid var(--bcn-text); outline-offset: -2px; font-weight: 700; }

.bcn-sim-snags { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; font-size: .875rem; }
.bcn-sim-snag { display: grid; grid-template-columns: 4.5rem 7rem 1fr; gap: .5rem; align-items: baseline; }
.bcn-sim-sev {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  padding: 0 .375rem;
  border-radius: 999px;
}
.bcn-sim-sev.is-high { background: var(--bcn-danger-soft); color: var(--bcn-danger); }
.bcn-sim-sev.is-medium { background: var(--bcn-warn-soft); color: var(--bcn-warn); }
.bcn-sim-sev.is-low { background: var(--bcn-bg-sunken); color: var(--bcn-text-muted); }
.bcn-sim-snag-area { color: var(--bcn-text-faint); font-size: .8125rem; }

.bcn-sim-tables, .bcn-sim-how { margin-top: .75rem; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-sim-tables summary, .bcn-sim-how summary { cursor: pointer; }
.bcn-sim-table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.bcn-sim-table th, .bcn-sim-table td { text-align: left; padding: .25rem .5rem; border-bottom: 1px solid var(--bcn-border); }
.bcn-sim-table th { color: var(--bcn-text-faint); font-weight: 600; }

.bcn-sim-tip {
  position: absolute;
  z-index: 5;
  max-width: 22rem;
  padding: .375rem .5rem;
  border-radius: 6px;
  background: var(--bcn-text);
  color: var(--bcn-bg);
  font-size: .75rem;
  line-height: 1.35;
  pointer-events: none;
  box-shadow: var(--bcn-shadow-md);
}

/* In the chat */
.bcn-sim-chat {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: .75rem .875rem;
  border: 1px solid var(--bcn-border);
  border-left: 3px solid var(--bcn-accent);
  border-radius: .5rem;
  background: var(--bcn-surface);
}
.bcn-sim-chat-top { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.bcn-sim-chat-levers { font-family: var(--bcn-mono); font-size: .75rem; color: var(--bcn-text-faint); }
.bcn-sim-chat-facts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .875rem; color: var(--bcn-text); }
.bcn-sim-chat-snag { font-size: .8125rem; color: var(--bcn-warn); }
.bcn-sim-chat .bcn-btn { align-self: flex-start; }

@media (max-width: 64rem) {
  .bcn-sim-tiles { grid-template-columns: repeat(2, 1fr); }
  .bcn-sim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .bcn-sim-levers { grid-template-columns: 1fr; position: static; }
  .bcn-sim-snag { grid-template-columns: 4.5rem 1fr; }
  .bcn-sim-snag-area { display: none; }
}

/* ─── Stage gates and the pre-mortem ──────────────────────────────────────── */
.bcn-gates, .bcn-premortem { margin: .75rem 0; }
.bcn-gate-list, .bcn-premortem-list { margin: .25rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.bcn-gate { padding: .5rem .75rem; border: 1px solid var(--bcn-border); border-radius: 8px; background: var(--bcn-surface); }
.bcn-gate.is-current { border-color: var(--bcn-accent); }
.bcn-gate-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.bcn-gate-criteria { margin: .375rem 0; padding-left: 1rem; font-size: .875rem; }
.bcn-gate-next { font-size: .8125rem; color: var(--bcn-text-muted); margin: .25rem 0; }
.bcn-premortem-list p { margin: .125rem 0; font-size: .875rem; }
.bcn-premortem-meta { color: var(--bcn-text-muted); }

/* ─── Plan drafts ─────────────────────────────────────────────────────────── */
.bcn-draft { margin-top: .75rem; padding: 1rem; border: 1px solid var(--bcn-border); border-radius: 10px; background: var(--bcn-surface); display: flex; flex-direction: column; gap: .75rem; }
.bcn-draft-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bcn-draft-title { margin: 0; font-size: 1.125rem; }
.bcn-draft-goal { border-top: 1px solid var(--bcn-border); padding-top: .625rem; }
.bcn-draft-goal-head { display: flex; gap: .5rem; align-items: center; }
.bcn-draft-meta { font-size: .8125rem; color: var(--bcn-text-muted); margin: .25rem 0; }
.bcn-draft-desc { font-size: .875rem; margin: .25rem 0; }
.bcn-draft-measures { margin: .25rem 0 .5rem; padding-left: 1.125rem; font-size: .875rem; }
.bcn-draft-work { width: 100%; border-collapse: collapse; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.bcn-draft-work th, .bcn-draft-work td { text-align: left; padding: .25rem .5rem; border-bottom: 1px solid var(--bcn-border); }
.bcn-draft-work th { color: var(--bcn-text-faint); font-weight: 600; }
.bcn-draft-section ul { margin: .25rem 0; padding-left: 1.125rem; font-size: .875rem; }
.bcn-draft-assumptions { list-style: none; padding-left: 0 !important; display: flex; flex-direction: column; gap: .25rem; }
.bcn-draft-sim .bcn-sim-chat-facts { margin: .375rem 0; }
.bcn-draft-sim .bcn-sim-snags { margin: .5rem 0; }
.bcn-draft-foot { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.bcn-draft-foot textarea { flex: 1 1 100%; }
.bcn-confirm-body { margin: .375rem 0; font-size: .875rem; }
.bcn-confirm-body summary { cursor: pointer; color: var(--bcn-accent); }
@media (max-width: 40rem) { .bcn-draft-work { display: block; overflow-x: auto; } }

/* ─── No company yet ──────────────────────────────────────────────────────── */
.bcn-lock-create { display: flex; flex-direction: column; gap: .5rem; width: min(20rem, 100%); margin: .5rem auto 0; text-align: left; }
.bcn-lock-label { font-size: .8125rem; font-weight: 600; color: var(--bcn-text-muted); }
.bcn-lock-create .bcn-lock-btn { width: 100%; justify-content: center; }
.bcn-lock-btn.is-primary { background: var(--bcn-accent); color: var(--bcn-accent-text); border-color: var(--bcn-accent); }
.bcn-lock-btn.is-primary:hover { filter: brightness(1.05); background: var(--bcn-accent); }
.bcn-lock-btn:disabled { opacity: .6; cursor: progress; }
.bcn-lock-hint { font-size: .8125rem; color: var(--bcn-text-muted); margin: .25rem 0 0; line-height: 1.45; }
.bcn-lock-link { background: none; border: 0; padding: 0; color: var(--bcn-accent); font: inherit; font-size: .8125rem; cursor: pointer; align-self: flex-start; }
.bcn-lock-link:hover { text-decoration: underline; }

/* ─── Self-updating measures ──────────────────────────────────────────────── */
.bcn-measure-live { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: .8125rem; color: var(--bcn-text-muted); margin: .25rem 0; }
.bcn-measure-live-src { font-weight: 500; }
.bcn-measure-live-parts { font-variant-numeric: tabular-nums; }

/* ─── Set up from the website ─────────────────────────────────────────────── */
.bcn-setup { width: min(46rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem); display: flex; flex-direction: column; }
.bcn-setup-body { overflow-y: auto; padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.bcn-setup-lead { margin: 0; color: var(--bcn-text-muted); font-size: .9375rem; line-height: 1.5; }
.bcn-setup-ask { display: flex; gap: .5rem; flex-wrap: wrap; }
.bcn-setup-ask .bcn-input { flex: 1 1 16rem; }
.bcn-setup-progress { margin: 0; font-weight: 500; }
.bcn-setup-pages { margin: 0; padding-left: 1.125rem; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-setup-spinner { width: 1.5rem; height: 1.5rem; border: 2px solid var(--bcn-border); border-top-color: var(--bcn-accent); border-radius: 50%; animation: bcn-spin .9s linear infinite; }
@keyframes bcn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bcn-setup-spinner { animation: none; } }
.bcn-setup-section { border-top: 1px solid var(--bcn-border); padding-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.bcn-setup-h { margin: 0; font-size: .9375rem; }
.bcn-setup-tick { display: flex; gap: .5rem; align-items: flex-start; font-size: .9375rem; cursor: pointer; }
.bcn-setup-tick input { margin-top: .2rem; }
.bcn-setup-item { display: flex; flex-direction: column; gap: .125rem; }
.bcn-setup-meta { margin: 0 0 0 1.5rem; font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-setup-section > .bcn-setup-meta { margin-left: 0; }
.bcn-setup-source { margin-left: 1.5rem; font-size: .75rem; color: var(--bcn-accent); word-break: break-all; }
.bcn-setup-foot { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .5rem; }
.bcn-setup-done { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: .25rem; }
.bcn-setup-card { padding: 1rem 1.25rem; border: 1px solid var(--bcn-accent); border-radius: 10px; background: var(--bcn-surface); margin-bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.bcn-setup-card-title { margin: 0; font-size: 1.0625rem; }
.bcn-setup-card p { margin: 0; color: var(--bcn-text-muted); }
.bcn-lock-optional { font-weight: 400; color: var(--bcn-text-faint); }

/* ─── Retros and lessons ──────────────────────────────────────────────────── */
.bcn-retro-card { padding: 1rem 1.25rem; border: 1px solid var(--bcn-accent); border-radius: 10px; background: var(--bcn-surface); margin-bottom: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.bcn-retro-title { margin: 0; font-size: 1.0625rem; }
.bcn-retro-sub { margin: 0; color: var(--bcn-text-muted); font-size: .875rem; }
.bcn-retro { border-top: 1px solid var(--bcn-border); padding-top: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.bcn-retro-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.bcn-retro-kind { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bcn-text-faint); font-weight: 600; }
.bcn-lesson { padding: .625rem 0; border-bottom: 1px solid var(--bcn-border); }
.bcn-lesson-line { margin: .25rem 0 0; font-size: .875rem; }
.bcn-lesson-date { font-size: .75rem; color: var(--bcn-text-faint); margin-left: auto; }

/* ─── Experiments ─────────────────────────────────────────────────────────── */
.bcn-exp-group { margin: 1rem 0 .5rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bcn-text-faint); }
.bcn-experiments { display: flex; flex-direction: column; gap: .625rem; }
.bcn-experiment { padding: .75rem 1rem; border: 1px solid var(--bcn-border); border-radius: 8px; background: var(--bcn-surface); display: flex; flex-direction: column; gap: .375rem; }
.bcn-experiment.is-focus { border-color: var(--bcn-accent); }
.bcn-exp-top { display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bcn-exp-score { font-family: var(--bcn-mono); font-size: .75rem; color: var(--bcn-text-muted); }
.bcn-exp-hyp { margin: 0; font-size: .875rem; }
.bcn-exp-progress { display: flex; gap: .5rem; align-items: center; }
.bcn-exp-progress .bcn-progress { flex: 1; }
.bcn-exp-result { margin: 0; font-size: .875rem; font-weight: 500; }

/* ─── Cash and runway ─────────────────────────────────────────────────────── */
.bcn-cash-card { padding: 1rem 1.25rem; border: 1px solid var(--bcn-border); border-radius: 10px; background: var(--bcn-surface); margin: 1rem 0; }
.bcn-cash-head { display: flex; justify-content: space-between; align-items: center; }
.bcn-cash-title { margin: 0; font-size: 1rem; }
.bcn-cash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-top: .75rem; }
.bcn-cash-tile { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .75rem; border-radius: 8px; background: var(--bcn-bg-sunken); }
.bcn-cash-tile.is-warn .bcn-cash-value { color: var(--bcn-danger); }
.bcn-cash-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bcn-text-faint); }
.bcn-cash-value { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.bcn-cash-sub { font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-cash-basis { margin: .5rem 0 0; font-size: .75rem; color: var(--bcn-text-faint); }
.bcn-fin-table { margin-top: .75rem; }

/* ─── Forecast ────────────────────────────────────────────────────────────── */
.bcn-measure-forecast { margin: .125rem 0; font-size: .8125rem; color: var(--bcn-text); }
.bcn-measure-forecast.is-low { color: var(--bcn-danger); }
.bcn-pipeline-forecast { margin: .25rem 0 .75rem; font-size: .875rem; color: var(--bcn-text-muted); }

/* ─── Company facts ───────────────────────────────────────────────────────── */
.bcn-fact { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; padding: .5rem .625rem; border: 1px solid var(--bcn-border); border-radius: 8px; }
.bcn-fact.is-accepted { border-color: var(--bcn-ok); background: color-mix(in srgb, var(--bcn-ok) 7%, var(--bcn-surface)); }
.bcn-fact.is-rejected { border-color: var(--bcn-danger); background: color-mix(in srgb, var(--bcn-danger) 6%, var(--bcn-surface)); }
.bcn-fact.is-rejected .bcn-fact-top { text-decoration: line-through; color: var(--bcn-text-muted); }
.bcn-fact-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.bcn-fact-top { display: flex; gap: .5rem; align-items: baseline; font-size: .9375rem; }
.bcn-fact-date { font-family: var(--bcn-mono); font-size: .75rem; color: var(--bcn-text-muted); white-space: nowrap; }
.bcn-fact-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.bcn-fact-meta .bcn-setup-source { margin-left: 0; }
.bcn-fact-origin { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--bcn-text-faint); font-weight: 600; }
.bcn-fact-origin.is-web { color: var(--bcn-accent); }
.bcn-fact-buttons { display: flex; gap: .25rem; flex-shrink: 0; }
.bcn-fact-yes[aria-pressed="true"], .bcn-fact-yes[aria-pressed="true"]:hover { background: var(--bcn-ok); border-color: var(--bcn-ok); color: #fff; }
.bcn-fact-no[aria-pressed="true"], .bcn-fact-no[aria-pressed="true"]:hover { background: var(--bcn-danger); border-color: var(--bcn-danger); color: #fff; }
.bcn-website-card { padding: 1.125rem 1.25rem; border: 1px solid var(--bcn-accent); border-radius: 10px; background: var(--bcn-surface); margin-bottom: 1rem; display: flex; flex-direction: column; gap: .625rem; }
.bcn-website-card h2 { margin: 0; font-size: 1.125rem; }
.bcn-website-card p { margin: 0; color: var(--bcn-text-muted); }
.bcn-website-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.bcn-website-form .bcn-input { flex: 1 1 16rem; }
.bcn-facts-list { display: flex; flex-direction: column; gap: .375rem; margin-top: .5rem; }
.bcn-history { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.bcn-history li { display: flex; gap: .75rem; }
@media (max-width: 40rem) { .bcn-fact { flex-direction: column; } }

.bcn-lock-choice { border: 0; margin: .25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bcn-lock-option { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; font-size: .9375rem; }
.bcn-lock-option input { margin-top: .25rem; }
.bcn-lock-option small { display: block; color: var(--bcn-text-muted); font-size: .8125rem; line-height: 1.4; }
.bcn-lock-choice .bcn-input { margin-left: 1.5rem; width: calc(100% - 1.5rem); }

/* ─── Invitations on the welcome page ─────────────────────────────────────── */
.bcn-lock-invites { width: min(20rem, 100%); margin: .5rem auto 0; text-align: left; display: flex; flex-direction: column; gap: .5rem; }
.bcn-lock-invite { display: flex; gap: .75rem; align-items: center; justify-content: space-between; padding: .625rem .75rem; border: 1px solid var(--bcn-border); border-radius: 10px; background: var(--bcn-surface); margin-bottom: .375rem; }
.bcn-lock-invite small { display: block; color: var(--bcn-text-muted); font-size: .8125rem; }
.bcn-lock-invite-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.bcn-lock-invite .bcn-lock-btn { width: auto; padding: .375rem .875rem; }
.bcn-lock-or { margin: .5rem 0 0; font-size: .875rem; color: var(--bcn-text-muted); }

/* ─── Connecting an app (consent page) ─────────────────────────────────────── */
.bcn-connect-form { display: flex; flex-direction: column; gap: .625rem; width: min(24rem, 100%); margin: .75rem auto 0; text-align: left; }
.bcn-connect-who { padding: .75rem .875rem; border: 1px solid var(--bcn-border); border-radius: 8px; background: var(--bcn-bg-sunken); }
.bcn-connect-app { font-weight: 600; font-size: 1rem; color: var(--bcn-text); overflow-wrap: anywhere; }
.bcn-connect-select { font: inherit; padding: .5rem .625rem; border: 1px solid var(--bcn-border); border-radius: 6px; background: var(--bcn-bg); color: var(--bcn-text); }
.bcn-connect-actions { display: flex; gap: .5rem; margin-top: .25rem; }
.bcn-connect-actions .bcn-lock-btn { flex: 1; justify-content: center; width: auto; margin: 0; }
.bcn-connect .bcn-lock-option span { line-height: 1.4; }

/* ─── Connected apps (Settings) ────────────────────────────────────────────── */
.bcn-apps-url { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.bcn-apps-url code, .bcn-apps-token code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; padding: .375rem .5rem; border: 1px solid var(--bcn-border); border-radius: 6px; background: var(--bcn-bg-sunken); overflow-wrap: anywhere; }
.bcn-apps-list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bcn-apps-item { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .625rem .75rem; border: 1px solid var(--bcn-border); border-radius: 8px; }
.bcn-apps-meta { font-size: .8125rem; color: var(--bcn-text-muted); }
.bcn-apps-token { margin-top: .75rem; padding: .75rem; border: 1px solid var(--bcn-accent); border-radius: 8px; display: flex; flex-direction: column; gap: .5rem; }
.bcn-apps-howto { margin-top: .75rem; font-size: .875rem; color: var(--bcn-text-muted); }
.bcn-apps-howto li { margin: .25rem 0; }
.bcn-apps-howto summary { cursor: pointer; color: var(--bcn-text); font-weight: 500; }
.bcn-apps-make { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin-top: 1rem; }
.bcn-apps-make .bcn-input { flex: 1 1 16rem; min-width: 0; }
.bcn-apps-make .bcn-lock-option { font-size: .875rem; white-space: nowrap; align-items: center; }
.bcn-apps-make .bcn-lock-option input { margin: 0; }