/* ===================================================================
   observe's dashboard stylesheet: flow.engineer's app look, so the
   dashboard at flow.engineer/observe reads as one product with it.
   Copied from flow-mono's design system (web/src/styles/site.css there):
   its brand palette, tokens and the site layer's component classes, minus
   the landing-only parts (public nav and footer, entrance animations, page
   guides) and the dialogs; then the app's element defaults that apply here
   (flow.css there). Copied, never linked: a change in flow-mono cannot
   break this page. Class names are the contract between pages: reuse
   them, do not restyle per page. The dashboard's own additions are in the
   last section, scoped and using only the tokens.
   =================================================================== */

/* ===================================================================
   FONTS — the app's three families (flow-mono's Fonts.astro: Bricolage
   Grotesque for headings, Inter for text, Inter Tight for the top bar),
   served by observe itself: dashboard pages load nothing from another
   origin (AGENTS.md, "Health data"), so not from Google Fonts. Variable
   woff2 files from Fontsource 5.3.0, Latin and Latin Extended only (other
   scripts fall back to the system font). All three are under the SIL Open
   Font License 1.1; the licences sit beside the files (fonts/*-OFL.txt).
   =================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-tight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("fonts/inter-tight-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ===================================================================
   FLOW BRAND PALETTE — SACRED
   The only colours the landing may use. Chosen by the user (29 Sep 2026):
   - Aurora:   #CDDD95 sage, #E9F1F1 mist, #A2C4D5 sky (in this order)
   - Gradient: #DFE6F7 lavender -> #F3E8EE blush -> #FDE9D6 peach, at 135deg
   Change these only when the user asks. Everything else (tokens.css and the
   sections) takes its colours from here: no new hex values in the sections,
   apart from neutrals (white, greys, ink) and the chat apps' own brand colours
   inside the example chats.
   The two "deep" tones are the sage and sky darkened for text, ticks and bars
   on light backgrounds, where the light tones would not be readable.
   =================================================================== */
:root {
  --brand-sage: #CDDD95;
  --brand-mist: #E9F1F1;
  --brand-sky: #A2C4D5;
  --brand-lavender: #DFE6F7;
  --brand-blush: #F3E8EE;
  --brand-peach: #FDE9D6;

  --brand-sage-deep: #6E7F2E;   /* sage, darkened for text/ticks (AA on white) */
  --brand-sky-deep: #3E6E85;    /* sky, darkened for text/ticks (AA on white) */

  --brand-ink: #1C1A17;         /* text, dark buttons */
  --brand-paper: #FAFAFA;       /* page */
  --brand-white: #FFFFFF;

  --brand-aurora: linear-gradient(90deg, var(--brand-sage), var(--brand-mist), var(--brand-sky));
  --brand-aurora-diag: linear-gradient(135deg, var(--brand-sage) 0%, var(--brand-mist) 50%, var(--brand-sky) 100%);
  --brand-gradient: linear-gradient(135deg, var(--brand-lavender) 0%, var(--brand-blush) 55%, var(--brand-peach) 100%);
}
:root {
  color-scheme: light;
  --bg: #fafafa;
  --bg-warm: #F7F1F4;        /* blush, lightened */
  --bg-mint: var(--brand-mist);
  --surface: #ffffff;
  --tile: #efefef;
  --tile-dark: #1c1a17;

  --ink: rgb(28, 26, 23);
  --ink-2: rgba(28, 26, 23, 0.72);
  --ink-3: rgba(28, 26, 23, 0.56);
  --ink-4: rgba(28, 26, 23, 0.4);
  --line: rgba(28, 26, 23, 0.1);
  --guide: rgba(28, 26, 23, 0.14);   /* dashed page guides */

  --accent: var(--brand-sky-deep);      /* small warm accent (links, badges) */
  --yellow: var(--brand-sage);      /* Flow's own yellow, used sparingly */
  --green: var(--brand-sage-deep);
  --violet: var(--brand-sky-deep);
  --blue: var(--brand-sky-deep);

  /* pastel canvas behind product UI */
  --canvas: var(--brand-gradient);  /* same diagonal as before, the soft lavender -> blush -> peach of the platform cards */
  --canvas-soft: linear-gradient(180deg, var(--brand-lavender) 0%, var(--brand-blush) 55%, var(--brand-peach) 100%);

  --head: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --nav-font: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-h1: clamp(2.6rem, 5vw, 4rem);      /* ~64px */
  --fs-h2: clamp(2rem, 3vw, 2.5rem);      /* 40px */
  --fs-h3: 1.125rem;
  --fs-lede: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --r-pill: 999px;
  --r-card: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  --ring: 0 0 0 1px rgba(95, 99, 106, 0.12), 0 1px 4px 0 rgba(43, 43, 48, 0.1);
  --ring-soft: 0 0 0 1px rgba(95, 99, 106, 0.08), 0 1px 1px 0 rgba(43, 43, 48, 0.1);
  --lift: 0 0 0 1px rgba(95, 99, 106, 0.1), 0 12px 32px -8px rgba(43, 43, 48, 0.16);

  --col: 1080px;          /* content column */
  --frame: 1128px;        /* guide-line frame */
  --gutter: 24px;
  --sec-y: clamp(72px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.5 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* type */
.eyebrow { font: 500 0.8125rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.h1 { font: 500 var(--fs-h1)/1.08 var(--head); letter-spacing: -0.02em; }
.h2 { font: 500 var(--fs-h2)/1.2 var(--head); letter-spacing: -0.01em; }
.h3 { font: 500 var(--fs-h3)/1.35 var(--head); letter-spacing: -0.005em; }
.lede { font-size: var(--fs-lede); line-height: 1.4; color: var(--ink-2); font-weight: 500; letter-spacing: -0.01em; }
.body { color: var(--ink-2); }
.muted { color: var(--ink-3); }

/* buttons: pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-pill); font: 500 0.9375rem/1 var(--font); white-space: nowrap; border: 0; cursor: pointer; transition: background .15s, box-shadow .15s; }
.btn--dark { background: var(--tile-dark); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--light { background: var(--surface); color: var(--ink); box-shadow: var(--ring-soft); }
.btn--light:hover { box-shadow: var(--ring); }
.btn--sm { height: 34px; padding: 0 12px; font-size: 0.875rem; }

/* cards */
.card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--ring); }
.tile { background: var(--tile); border-radius: var(--r-card); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--ring-soft); font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.canvas { background: var(--canvas); border-radius: var(--r-xl); position: relative; overflow: hidden; }
.canvas::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(60% 40% at 70% 80%, rgba(255,255,255,.55), transparent 70%), radial-gradient(40% 30% at 20% 20%, rgba(255,255,255,.35), transparent 70%); }

/* ===================================================================
   SITE LAYER — shared by every page of the site and the app (mockups).
   Rules: colours only from the palette above (plus white, greys from
   --ink at alpha, and the chat apps' brand colours inside depictions of
   those apps). Class names are the contract between the pages: reuse,
   do not restyle per page. Page-specific CSS goes in a <style> after
   this one and is scoped to the page (e.g. #dash .x).
   =================================================================== */
:root {
  --field: #ffffff;
  --hover: #f6f5f3;              /* same hover grey as the landing nav */
  --sel: var(--brand-mist);      /* selected row / active list item */
  --ok: var(--brand-sage-deep);  /* ticks, "fine", LIVE text */
  --info: var(--brand-sky-deep); /* links, info, progress */
  --warn-bg: var(--brand-peach); /* needs attention (no red in the palette) */
  --app-h: 64px;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: .8125rem; }
.num { font-variant-numeric: tabular-nums; }
.link { color: var(--info); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hstack { display: flex; align-items: center; gap: 8px; }
.vstack { display: grid; gap: 8px; }
.grow { flex: 1 1 auto; min-width: 0; }
.nowrap { white-space: nowrap; }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- buttons (extends .btn from tokens) ---------- */
.btn--xs { height: 28px; padding: 0 10px; font-size: .8125rem; gap: 6px; }
.btn--lg { height: 48px; padding: 0 22px; font-size: 1rem; }
/* A chat log scrolled up while it grows (lib/useFollow.ts): pinned to the log's foot, back to the newest. */
.jump-latest { position: sticky; bottom: 12px; align-self: center; flex: none; z-index: 2; box-shadow: var(--lift); }
.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--hover); color: var(--ink); }
.btn--outline { background: rgba(255,255,255,.7); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(17,17,17,.3); }
.btn--outline:hover { background: var(--hover); }
.btn--sage { background: var(--brand-sage); color: var(--ink); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-sage); color: var(--ink); font-size: .75rem; font-weight: 600; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tile-dark); color: #fff; cursor: pointer; }

/* ---------- small labels ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--tile); color: var(--ink-2); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.tag--sage { background: color-mix(in srgb, var(--brand-sage) 45%, #fff); color: var(--brand-sage-deep); }
.tag--sky { background: var(--brand-mist); color: var(--brand-sky-deep); }
.tag--warn { background: var(--warn-bg); color: var(--ink); }
.tag--ink { background: var(--ink); color: #fff; }
.tag--line { background: var(--surface); box-shadow: var(--ring-soft); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
/* LIVE / NOT LIVE / DOWN / STARTING: a tag, not a button */
.badge { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px; font: 600 .6875rem/1 var(--font); letter-spacing: .1em; white-space: nowrap; user-select: none; }
.badge .dot { width: 7px; height: 7px; }
.badge--live { background: color-mix(in srgb, var(--brand-sage) 55%, #fff); color: var(--brand-sage-deep); }
.badge--live .dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sage-deep) 22%, transparent); }
.badge--off { background: var(--tile); color: var(--ink-2); }
.badge--off .dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.badge--starting { background: var(--brand-mist); color: var(--brand-sky-deep); }
.badge--down { background: var(--ink); color: #fff; }
.badge--down .dot { background: var(--brand-peach); }

/* ---------- cards, stats, notes ---------- */
.card--pad { padding: 20px 24px; }
.card--flat { box-shadow: var(--ring-soft); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card__title { font: 500 1.0625rem/1.3 var(--head); letter-spacing: -.005em; }
.card__sub { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
.stat { display: grid; gap: 4px; padding: 18px 20px; }
.stat__l { font: 500 .75rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.stat__v { font: 500 2rem/1.1 var(--head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat__n { font-size: var(--fs-sm); color: var(--ink-3); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .grid3, .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); } .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.note { display: block; padding: 14px 16px; border-radius: var(--r-card); background: var(--brand-mist); color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; }
.note--warn { background: var(--warn-bg); }
.note--ok { background: color-mix(in srgb, var(--brand-sage) 35%, #fff); }
.note--plain { background: var(--tile); }
.note b { font-weight: 600; }
.note--row { display: flex; gap: 12px; align-items: flex-start; }   /* icon + text, or text + button */
.panel { background: var(--canvas); border-radius: var(--r-xl); position: relative; overflow: hidden; }   /* soft gradient panel behind product UI */

/* bar charts: bars in sage-deep (Telegram-ish series) and sky-deep (second series) */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-bottom: 1px; border-bottom: 1px solid var(--line); }
.bars > i { flex: 1; min-width: 0; display: flex; flex-direction: column-reverse; border-radius: 4px 4px 0 0; overflow: hidden; }
.bars > i > b { display: block; background: var(--brand-sky-deep); }
.bars > i > b + b { background: var(--brand-sky); }
.bars--one > i { background: var(--brand-sky-deep); }
.axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--ink-3); margin-top: 6px; }
.legend { display: flex; gap: 14px; font-size: .75rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--brand-sky-deep); }
.legend i.b { background: var(--brand-sky); }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
.spark > i { flex: 1; border-radius: 2px 2px 0 0; background: var(--brand-sky); }
.spark > i:last-child { background: var(--brand-sky-deep); }
.meter { height: 6px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--brand-sage-deep); }
.meter--sky > i { background: var(--brand-sky-deep); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.hint { font-size: .8125rem; color: var(--ink-3); }
.input, .select, .textarea { width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--field); box-shadow: inset 0 0 0 1px rgba(28,26,23,.16); font-size: .9375rem; color: var(--ink); outline: 0; }
.textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input--pill { border-radius: 999px; padding: 0 18px; }
.search { position: relative; } .search .input { padding-left: 38px; } .search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: rgba(28,26,23,.2); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch.is-on { background: var(--brand-sage-deep); } .switch.is-on::after { left: 18px; }

/* ---------- tabs and segmented controls ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a, .tabs button { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--ink-3); font-size: .9375rem; font-weight: 500; cursor: pointer; box-shadow: inset 0 -2px 0 transparent; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs [aria-current], .tabs [aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--tile); }
.seg a, .seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg [aria-current], .seg [aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--ring-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip--on { background: var(--ink); color: #fff; box-shadow: none; }
button.chip { border: 0; cursor: pointer; } button.chip:hover { box-shadow: var(--ring); color: var(--ink); }

/* ---------- tables and lists ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbl th { text-align: left; padding: 10px 12px; font: 500 .75rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl tr.is-sel td { background: var(--sel); }
.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; }
.kv { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr); gap: 10px 16px; margin: 0; font-size: var(--fs-sm); }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; color: var(--ink); }
.code { font-family: var(--mono); font-size: .8125rem; line-height: 1.6; background: var(--brand-paper); box-shadow: inset 0 0 0 1px var(--line); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; color: var(--ink); overflow-x: auto; }
.code .k { color: var(--brand-sky-deep); font-weight: 600; } .code .s { color: var(--brand-sage-deep); } .code .c { color: var(--ink-3); }

/* ---------- chat (Flow's own chats: /start, Edit, Try it) ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: min(78%, 560px); padding: 10px 14px; border-radius: 18px; font-size: .9375rem; line-height: 1.45; }
.msg--in { align-self: flex-start; background: var(--surface); box-shadow: var(--ring-soft); border-bottom-left-radius: 6px; }   /* Flow / the bot */
.msg--out { align-self: flex-end; background: var(--brand-sage); color: var(--ink); border-bottom-right-radius: 6px; }        /* the person typing */
.msg--plain { align-self: flex-start; max-width: 640px; padding: 0; background: none; box-shadow: none; }                    /* Flow speaking in the page, no bubble */
.msg__meta { font-size: .75rem; color: var(--ink-3); margin-top: 4px; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--ring-soft); align-self: flex-start; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.composer { background: var(--surface); border-radius: 20px; box-shadow: var(--lift); padding: 8px 8px 8px 16px; display: flex; align-items: flex-end; gap: 8px; }
.composer textarea, .composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; resize: none; padding: 10px 0; font-size: .9375rem; line-height: 1.5; min-height: 44px; }
.composer:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 12px 32px -8px rgba(43,43,48,.16); }
/* the plain-words build/check lines */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .9375rem; }
.steps li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); }
.steps li::before { content: ''; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: color-mix(in srgb, var(--brand-sage) 60%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%236E7F2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.steps li.is-doing { color: var(--ink); }
.steps li.is-doing::before { background: none; box-shadow: inset 0 0 0 2px var(--brand-sky); border-top: 0; animation: spin 1s linear infinite; background-image: conic-gradient(var(--brand-sky-deep) 0 25%, transparent 25%); -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px); mask: radial-gradient(circle, transparent 5.5px, #000 6px); }
.steps li.is-todo { color: var(--ink-4); }
.steps li.is-todo::before { background: none; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.steps li.is-warn::before { background: var(--warn-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v6M12 17h.01' fill='none' stroke='%231C1A17' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; }
@keyframes spin { to { transform: rotate(360deg); } }
/* "or" between two ways to do one thing, on a hairline (the Connect card's Sign in, or a key). */
.orline { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: var(--ink-3); }
.orline::before, .orline::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.checkline {display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--ink-2); }
.checkline::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--brand-sage) 60%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%236E7F2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; }


.numsteps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.numsteps > li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 12px; font-size: .9375rem; color: var(--ink-2); }
.numsteps > li::before { content: counter(s); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-mist); color: var(--brand-sky-deep); font-weight: 600; font-size: .8125rem; }
.numsteps b { color: var(--ink); font-weight: 600; }

/* ---------- brand mark: the logo's chevrons alone (components/Brand.tsx FlowMark) ---------- */
.mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; color: var(--ink); }
a.mark:hover { background: var(--hover); }

/* ---------- signed-in app: the 64px top bar ---------- */
body.app { background: var(--bg); }
.apptop { position: sticky; top: 0; z-index: 100; height: var(--app-h); display: flex; align-items: center; gap: 12px; padding: 0 20px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 1px 0 var(--line); font-family: var(--nav-font); }
.apptop .mark { width: 32px; height: 32px; border-radius: 9px; }
.apptop__title { font: 500 1rem/1 var(--nav-font); }
.apptop__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.switcher { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none; font: 600 .9375rem/1 var(--nav-font); cursor: pointer; white-space: nowrap; max-width: 220px; }
.switcher span:first-child { overflow: hidden; text-overflow: ellipsis; }
.switcher:hover { background: var(--hover); }
.switcher svg { flex: none; color: var(--ink-3); }
.apptop__rule { width: 1px; height: 24px; background: var(--line); flex: none; }
/* the bot page's sidebar: a 56px rail of icons that opens over the page to 184px with labels on
   hover or keyboard focus (nothing reflows); a bottom bar with small labels on phones */
.bot-rail { position: sticky; top: var(--app-h); width: 56px; height: calc(100vh - var(--app-h)); height: calc(100dvh - var(--app-h)); max-height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; overflow: hidden; background: var(--bg); box-shadow: 1px 0 0 var(--line); transition: width .18s ease, box-shadow .18s ease; }
.bot-rail:has(:focus-visible) { width: 184px; box-shadow: 1px 0 0 var(--line), 8px 0 24px -12px rgba(28,26,23,.15); }
@media (hover: hover) { .bot-rail:hover { width: 184px; box-shadow: 1px 0 0 var(--line), 8px 0 24px -12px rgba(28,26,23,.15); } }
.bot-rail__item { flex: none; display: flex; align-items: center; justify-content: flex-start; width: 100%; gap: 12px; height: 40px; padding: 0 10px; border: 0; border-radius: 11px; background: none; color: var(--ink-3); font: 500 .8125rem/1 var(--font); white-space: nowrap; text-decoration: none; cursor: pointer; }
.bot-rail__item svg { flex: none; }
.bot-rail__label { opacity: 0; transition: opacity .12s ease; }
.bot-rail:has(:focus-visible) .bot-rail__label { opacity: 1; }
@media (hover: hover) { .bot-rail:hover .bot-rail__label { opacity: 1; } }
.bot-rail__item:hover { background: var(--tile); color: var(--ink); }
.bot-rail__item[aria-current="page"] { background: var(--ink); color: #fff; }
.bot-rail__item:focus-visible { outline: 2px solid var(--brand-sky-deep); outline-offset: -2px; }
.bot-rail__short { display: none; }
.bot-rail__grow { flex: 1; }
@media (prefers-reduced-motion: reduce) { .bot-rail, .bot-rail__label { transition: none; } }
@media (max-width: 860px) {
  .bot-rail { position: fixed; z-index: 90; inset: auto 0 0 0; top: auto; width: auto; height: auto; max-height: none; flex-direction: row; gap: 2px; padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); background: var(--surface); box-shadow: 0 -1px 0 var(--line); transition: none; }
  .bot-rail:has(:focus-visible), .bot-rail:hover { width: auto; box-shadow: 0 -1px 0 var(--line); }
  .bot-rail__item { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 3px; height: 50px; padding: 0 2px; border-radius: 10px; font-size: .6875rem; }
  .bot-rail__label, .bot-rail__short { max-width: 100%; overflow: hidden; text-overflow: ellipsis; opacity: 1; }
  .bot-rail__item:has(.bot-rail__short) .bot-rail__label { display: none; }
  .bot-rail__short { display: inline; }
  .bot-rail__grow { display: none; }
}
/* trial usage: text + a thin meter, opens Settings */
.credit { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: none; border: 0; font-size: .8125rem; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.credit:hover { background: var(--hover); }
.credit .meter { width: 56px; height: 5px; }
/* phone: one row — the bot and Deploy (the tabs are the bottom bar, .bot-rail) */
@media (max-width: 860px) {
  .apptop--bot { column-gap: 8px; }
  .apptop--bot .credit { display: none; }
  .apptop--bot .switcher { max-width: 150px; padding: 0 6px; }
  .apptop--bot .deploy-btn .long { display: none; }
  .apptop--bot .deploy-btn .short { display: inline; }
  .apptop { padding: 0 12px; }
}
.deploy-btn .short { display: none; }
/* the app page body under the bar */
.appmain { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }
.appmain--wide { max-width: none; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.pagehead h1 { font: 500 clamp(1.75rem, 2.6vw, 2.25rem)/1.15 var(--head); letter-spacing: -.02em; }
.pagehead p { color: var(--ink-2); margin-top: 6px; }
@media (max-width: 560px) { .appmain { padding: 20px 16px 48px; } }

/* reduced motion: no transitions or animations */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- promoted from the page groups ---------- */
.btn svg { flex: none; }
@media (max-width: 560px) { .apptop:not(.apptop--bot) .credit, .apptop:not(.apptop--bot) .apptop__title { display: none; } }
@media (max-width: 860px) {
  .apptop--bot .switcher { max-width: 180px; font-size: .875rem; }
  .apptop--bot .apptop__end { flex: none; }
  .apptop--bot .deploy-btn { padding: 0 10px; }
}


/* ===================================================================
   APP ELEMENT DEFAULTS — from flow-mono's flow.css, which every app page
   there loads after site.css: the type defaults and the logo's box. Its
   button, field and label defaults are left out: every control here
   carries a site.css class (.btn, .input, .select), and its bare `label`
   and `input` rules would re-lay the sign-in form.
   =================================================================== */
body { line-height: 1.45; text-rendering: optimizeLegibility; overflow-x: clip; }
strong, b { font-weight: 600; }
svg { flex: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--head); font-weight: 500; letter-spacing: -0.015em; line-height: 1.24; text-wrap: balance; }
.meta { font-size: 0.8125rem; color: var(--ink-2); }
.fine { margin: 0; font-size: 0.8125rem; line-height: 1.4; font-weight: 400; color: var(--ink-3); }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; color: var(--ink); }
.brand__mark, .brand__word { display: flex; }
.hidden { display: none !important; }


/* ===================================================================
   DASHBOARD — observe's own additions. Scoped under .obs (the <body>),
   colours and sizes only from the tokens above.
   =================================================================== */

/* the shell: top bar, the 56px rail slot (the rail opens over the page), the page */
.obs .shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.obs .shell__frame { flex: 1; min-height: 0; display: flex; }
.obs .shell__rail { flex: none; width: 56px; position: relative; z-index: 50; }
.obs .shell__body { flex: 1; min-width: 0; }
.obs .apptop__who { font-size: var(--fs-sm); color: var(--ink-3); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.obs .apptop__name { font: 600 .9375rem/1 var(--nav-font); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
/* the account and agent: native selects drawn as the app's bot switcher (.switcher, with its chevron) */
.obs .topselect { -webkit-appearance: none; appearance: none; height: 36px; max-width: 220px; padding: 0 28px 0 10px; border: 0; border-radius: 10px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231C1A17' stroke-opacity='.56' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; font: 600 .9375rem/1 var(--nav-font); color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.obs .topselect:hover { background-color: var(--hover); }
.obs .topselect:disabled { cursor: default; background-image: none; padding-right: 10px; }
.obs .topselect:disabled:hover { background-color: transparent; }
.obs .topselect--agent { font-weight: 500; color: var(--ink-2); }
.obs .phase { padding: 6px 20px; background: var(--brand-mist); color: var(--brand-sky-deep); font-size: var(--fs-xs); font-weight: 500; text-align: center; box-shadow: 0 1px 0 var(--line); }
@media (max-width: 860px) {
  .obs .shell { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .obs .shell__rail { width: 0; }
  .obs .apptop__who { display: none; }
  .obs .topselect, .obs .apptop__name { max-width: 140px; font-size: .875rem; }
}
@media (max-width: 560px) { .obs .apptop__rule { display: none; } }

/* states */
.obs .loading { padding: 48px 0; color: var(--ink-3); font-size: var(--fs-sm); }
.obs .empty { display: grid; gap: 6px; justify-items: start; padding: 32px 24px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--ring-soft); color: var(--ink-2); }
.obs .empty__title { font: 500 1.0625rem/1.3 var(--head); color: var(--ink); }
.obs .stack { display: grid; gap: 16px; }
.obs .section { margin-top: 32px; }
.obs .section__title { font: 500 1.125rem/1.3 var(--head); letter-spacing: -.005em; margin-bottom: 12px; }
.obs .sub { color: var(--ink-3); font-size: var(--fs-sm); }
.obs .sep::before { content: '·'; margin: 0 6px; color: var(--ink-4); }
.obs .inline-error { color: var(--ink); background: var(--warn-bg); border-radius: 8px; padding: 6px 10px; font-size: var(--fs-sm); }

/* stat tiles */
.obs .stat--soon { opacity: .55; }
.obs .soon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-3); }
.obs .soon .tag { height: 20px; padding: 0 8px; font-size: .6875rem; color: var(--ink-3); }

/* issues */
.obs .issue { display: grid; gap: 14px; }
.obs .issue__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.obs .issue__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: var(--fs-sm); color: var(--ink-3); }
.obs .issue__label { font: 500 .75rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.obs .issue__evidence { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-sm); }
.obs .issue__fix { display: grid; gap: 8px; }
.obs .issue__why { font-size: var(--fs-sm); color: var(--ink-2); }
.obs .issue__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.obs .issue__actions .grow { flex: 1; }

/* conversations list */
.obs .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.obs .tbl tbody tr.row-link { cursor: pointer; }
.obs .tbl .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.obs .more { display: flex; justify-content: center; padding: 16px 0 0; }
.obs .toolbar .check { align-items: center; color: var(--ink-2); cursor: pointer; }
.obs .toolbar .check input { margin: 0; accent-color: var(--ink); }

/* one conversation: the chat, and the traces beside it */
.obs .convgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .obs .convgrid { grid-template-columns: minmax(0, 1fr); } }
.obs .convhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-2); font-size: var(--fs-sm); }
/* the chat as flow.engineer's Conversations tab draws one (flow-mono's conversations.css): white,
   the member's messages on the page grey with a hairline, the agent's in sage */
.obs .chatcard { padding: 20px 24px 24px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--ring); }
.obs .chatcard .chat { gap: 8px; }
.obs .chatcard .msg { max-width: min(72%, 520px); }
.obs .chatcard .msg--in { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 760px) { .obs .chatcard { padding: 16px 12px 20px; } .obs .chatcard .msg { max-width: 86%; } }
.obs .turn { display: flex; flex-direction: column; gap: 4px; }
.obs .turn--in { align-items: flex-start; }
.obs .turn--out { align-items: flex-end; text-align: left; }
.obs .turn--out .msg__meta { text-align: right; }
.obs .msg__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.obs .msg__gone { font-style: italic; color: var(--ink-3); }
.obs .msg__none { color: var(--ink-3); }
.obs .msg__media { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.obs .msg__media + .msg__media, .obs .msg__text + .msg__media { margin-top: 6px; }
.obs .verdict { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.obs .turn--in .verdict { justify-content: flex-start; }

/* trace timeline */
.obs .trace { display: grid; gap: 10px; }
.obs .trace + .trace { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.obs .trace__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: var(--fs-sm); color: var(--ink-2); }
.obs .span { display: grid; gap: 4px; }
.obs .span__label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.obs .span__name { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.obs .span__track { position: relative; height: 8px; border-radius: 999px; background: var(--tile); }
.obs .span__bar { position: absolute; top: 0; bottom: 0; min-width: 3px; border-radius: 999px; background: var(--brand-sky-deep); }
.obs .span__bar--tool { background: var(--brand-sage-deep); }
.obs .span__bar--retrieval { background: var(--brand-sky); }
.obs .span__bar--agent { background: var(--ink-3); }
.obs .span__bar--other { background: var(--ink-4); }
.obs .span__bar--error { box-shadow: 0 0 0 2px var(--warn-bg); }
.obs .span__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-size: var(--fs-xs); color: var(--ink-3); }
.obs .span .tag { height: 20px; padding: 0 8px; font-size: .6875rem; }

/* usage */
.obs .monthpick { display: inline-flex; align-items: center; gap: 4px; }
.obs .monthpick__label { min-width: 132px; text-align: center; font-weight: 500; }
.obs .usage-bars { gap: 3px; height: 160px; }
.obs .usage-bars > i { align-self: flex-end; }
.obs .chart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

/* sign-in */
.obs [hidden] { display: none !important; }   /* the attribute wins over a class's display (.note) */
.obs .signin { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 16px; background: var(--canvas); }
.obs .signin__card { width: min(100%, 420px); padding: 32px 28px; display: grid; gap: 20px; }
.obs .signin h1 { font: 500 1.75rem/1.2 var(--head); letter-spacing: -.01em; }
.obs .signin__dev, .obs .signin__form { display: grid; gap: 10px; }

/* not found */
.obs .lost { display: grid; gap: 12px; justify-items: start; padding: 48px 0; }
.obs .lead-note { margin-bottom: 16px; }
.obs .chatcard > .sub { margin-bottom: 14px; }
@media (max-width: 560px) {
  .obs .apptop { gap: 6px; }
  .obs .topselect, .obs .apptop__name { max-width: 30vw; padding: 0 4px; }
  .obs .topselect { padding-right: 20px; background-position: right 4px center; }
  .obs .topselect:disabled { padding-right: 4px; }
  .obs .apptop__end .btn { padding: 0 8px; }
}

/* Needs attention: trend, proposed test case, cannot-grade note; evidence focus */
.obs .issue__trend { display: flex; align-items: flex-end; gap: 10px; }
.obs .trend-bars { flex: 0 1 220px; height: 28px; gap: 2px; }
.obs .trend-bars > i { align-self: flex-end; border-radius: 2px 2px 0 0; }
.obs .issue__test { display: grid; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--tile); }
.obs .tags-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.obs .lead-gap { margin-top: 14px; }
.obs .turn--focus .msg { box-shadow: 0 0 0 3px var(--brand-sky-deep); }
.obs .turn--focus { scroll-margin-top: calc(var(--app-h) + 16px); scroll-margin-bottom: 16px; }   /* an evidence link lands below the sticky top bar */
.obs .msg__text mark { background: var(--warn-bg); color: inherit; border-radius: 3px; padding: 0 1px; }

/* setup: agents and their keys (self-serve) */
.obs .agentcard { display: grid; gap: 16px; }
.obs .agentcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.obs .agentcard__name { font: 500 1.125rem/1.3 var(--head); }
.obs .agentcard__keys { gap: 20px; align-items: start; }
.obs .keys { display: grid; gap: 8px; align-content: start; }
.obs .keys__head { display: flex; align-items: center; gap: 10px; }
.obs .keys__title { white-space: nowrap; font: 500 .75rem/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.obs .keytbl td, .obs .keytbl th { padding: 8px 10px; }
.obs .keytbl__revoked td { color: var(--ink-3); }
.obs .secret { display: grid; gap: 8px; padding: 14px 16px; border-radius: 10px; background: var(--brand-mist); box-shadow: inset 0 0 0 1px var(--line); }
.obs .secret__title { font-weight: 600; font-size: var(--fs-sm); }
.obs .secret__row { display: flex; align-items: center; gap: 8px; }
.obs .secret__value { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 8px; background: var(--surface); font-size: .8125rem; overflow-wrap: anywhere; user-select: all; }
.obs .addagent { display: grid; gap: 16px; max-width: 560px; }
.obs .addagent .seg { justify-self: start; }
.obs .seg button:disabled { opacity: .45; cursor: default; }
@media (max-width: 860px) { .obs .agentcard__keys { grid-template-columns: minmax(0, 1fr); } }

/* the account menu in the top bar: the email, then Sign out */
.obs .acctmenu { position: relative; }
.obs .acctmenu__summary { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; cursor: pointer; list-style: none; color: var(--ink-2); }
.obs .acctmenu__summary::-webkit-details-marker { display: none; }
.obs .acctmenu__summary:hover, .obs .acctmenu[open] .acctmenu__summary { background: var(--hover); }
.obs .acctmenu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 260px; display: grid; gap: 4px; padding: 12px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--ring), 0 12px 32px rgba(28,26,23,.12); }
.obs .acctmenu__who { margin: 0 0 6px; padding: 0 4px; font-size: var(--fs-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.obs .acctmenu__who strong { color: var(--ink); font-weight: 500; }
.obs .acctmenu__item { justify-content: flex-start; }
.obs .signin__who { overflow-wrap: anywhere; }
.obs .au-intro { display: grid; gap: 8px; }