/* GENERATED by chat/frontend.py — do not edit here. Sources, in order:
 *   src/_styles/tokens.css   the design tokens, verbatim
 *   src/_styles/fonts.css    the self-hosted faces, URLs made relative
 *   (computed)               Chainlit's theme variables, each from a token
 *   chat/skin/skin.css       what the variables cannot do */

/* AI4BCM design tokens — "Harbour" (spec decisions 31 and 32, 2026-09-11).
 *
 * Navy type on a cool grey page, white cards, hairline borders, one amber accent that is a
 * fill only (always under navy text), dark rust for accent type and strokes, and one pale
 * peach featured card. Values are those of the published Claude Design system "AI4BCM
 * Harbour" (tokens/colors.css), including its contrast pass: muted text is the darker of
 * the two greys it tried, because the lighter one read 4.03:1 on the grey page.
 *
 * No hex value may appear in a comment in this file: chat/test_frontend.py holds every
 * colour in the served skin, comments included, to the values declared below.
 *
 * The NAMES below are kept from Direction A on purpose, and only their values changed.
 * chat/frontend.py builds the question box's skin from this file and maps Chainlit's theme
 * onto these names, so a rename here would silently strip the box of its colours. Read a
 * name as a role: --color-ember-orange is the accent (now rust), --color-ink-black is the
 * ink (now navy), --surface-warm-canvas is the page (now grey). New roles Harbour added —
 * amber, the highlighter, peach — carry new names.
 *
 * Retired, and must not come back: Direction A's cream page and orange accent, violet
 * anything (decision 5), white text on amber (fails contrast).
 */

:root {
  /* Colors: Harbour values under Direction A's names */
  --color-ember-orange: #8a3a14; /* the accent: rust — lines, markers, focus, links */
  --color-sunset-coral: #ffcfb8; /* retired role; peach border if anything asks */
  --color-peach-blush: #ffcfb8; /* peach border and divider */
  --color-burnt-rust: #8a3a14; /* accent type: rust */
  --color-electric-blue: #0b1f3a; /* retired role (chart slot only); navy */
  --color-warm-canvas: #f4f6f8; /* the page: Harbour grey */
  --color-pure-white: #ffffff;
  --color-ink-black: #0b1f3a; /* ink: navy */
  --color-charcoal: #0b1f3a; /* strong outline: navy */
  --color-slate: #4a5a70; /* nav and footer links */
  --color-deep-charcoal: #0b1f3a;
  --color-gunmetal: #4a5a70;
  --color-stone: #5c6b80;
  --color-pewter: #4a5a70; /* body text: slate */
  --color-warm-gray: #5c6b80; /* muted text and eyebrows */
  --color-mist: #5c6b80;
  --color-sand: #d5dce5; /* every hairline */
  --color-driftwood: #d5dce5; /* the route panel's quiet connectors */
  --color-fog: #eef1f5;

  /* Harbour's own roles */
  --color-amber: #f2a900; /* primary button fill — ONLY ever under navy text */
  --color-amber-hover: #d99700;
  --color-amber-wordmark: #9a6700; /* the "BCM" of the wordmark; nothing else */
  --color-highlight: #fde7b0; /* the marker across key words */
  --color-peach: #fff0e8; /* the one featured card */
  --color-peach-text: #5a3a2c; /* body text on the peach card */

  /* Surfaces */
  --surface-warm-canvas: #f4f6f8;
  --surface-card-white: #ffffff;
  --surface-sand-wash: #d5dce5;
  --surface-peach-feature: #fff0e8;
  --surface-coral-feature: #fff0e8;
  --surface-dark-preview: #0b1f3a;

  /* The highlighter, anchored in em rather than percent: a percentage stop resolves
   * against the inline box (font metrics plus line-height) and drifts off the letters as
   * the type grows. From the design system's colors.css. */
  --highlight-marker-image: linear-gradient(var(--color-highlight), var(--color-highlight));
  --highlight-marker-size: 100% 0.36em;
  --highlight-marker-position: 0 0.63em;

  /* Typography — families */
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui,
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  /* Typography — scale. Harbour's whole scale is 12 · 14 · 16 · 18 · 20 · 24 · 32 · 40 · 48
   * · 64: 12px is the floor (the old 11px caption failed it). */
  --text-caption: 12px;
  --leading-caption: 1.2;
  --tracking-caption: -0.01px;
  --text-small: 14px;
  --leading-small: 1.5;
  --text-body: 17px; /* 16px until decision 65; buttons keep 16px */
  --leading-body: 1.55;
  --tracking-body: -0.01px;
  --text-lead: 18px;
  --leading-lead: 1.6;
  --text-subheading: 20px;
  --leading-subheading: 1.2;
  --tracking-subheading: -0.02em;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.2;
  --tracking-heading-sm: -0.03em;
  --text-heading: 32px;
  --leading-heading: 1.05;
  --tracking-heading: -0.03em;
  --text-heading-md: 40px;
  --leading-heading-md: 1.05;
  --tracking-heading-md: -0.035em;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.04em;
  --text-display: 64px;
  --leading-display: 0.95;
  --tracking-display: -0.05em;
  --tracking-eyebrow: 0.12em;

  /* Typography — weights. Harbour sets display and headings at 500, not 700; the
   * wordmark is the one 700. */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 28px;
  --element-gap: 12px;

  /* Border radius. Harbour has three: 6px inputs and small controls, 14px cards, 100px
   * buttons. The Direction A steps that remain are aliased onto those three. */
  --radius-md: 6px;
  --radius-2xl: 14px;
  --radius-2xl-2: 14px;
  --radius-3xl: 14px;
  --radius-3xl-2: 14px;
  --radius-3xl-3: 14px;
  --radius-full: 100px;
  --radius-full-2: 100px;
  --radius-full-3: 100px;
  --radius-full-4: 100px;
  --radius-full-5: 100px;
  --radius-full-6: 999px;

  /* Elevation. Harbour is bordered, not elevated, and that still holds for everything
   * that sits IN the page: cards, the nav, the question box at rest. The one exception,
   * taken by the owner on 2026-09-12: a surface that floats OVER the page — today only
   * the open question-box panel — carries this shadow, because a hairline alone does not
   * say which layer a card is on when it overlaps the text behind it. It is the ink
   * colour at low opacity, never a neutral grey, so it reads warm against the grey page.
   * Anything that is not a floating surface must not use it. */
  --shadow-float: 0 12px 32px rgba(11, 31, 58, 0.1), 0 2px 8px rgba(11, 31, 58, 0.06);

  /* Named radii */
  --radius-nav: 6px;
  --radius-cards: 14px;
  --radius-badges: 6px;
  --radius-inputs: 6px;
  --radius-buttons: 100px;
}

/* Latin subset of the three families the design calls for, downloaded from
 * Google Fonts and served from this origin — the public site makes no
 * third-party request for a font, which keeps the privacy notice short.
 * Space Grotesk and IBM Plex Sans ship as variable fonts (one file each,
 * verified by checksum: Google serves the same file for every weight);
 * IBM Plex Mono ships static per weight. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-var.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-var.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root,
.dark {
  --background: 210 22.2% 96.5%; /* --surface-warm-canvas #f4f6f8 */
  --foreground: 214.5 68.1% 13.5%; /* --color-ink-black #0b1f3a */
  --card: 0 0% 100%; /* --surface-card-white #ffffff */
  --card-foreground: 214.5 68.1% 13.5%; /* --color-ink-black #0b1f3a */
  --popover: 0 0% 100%; /* --surface-card-white #ffffff */
  --popover-foreground: 214.5 68.1% 13.5%; /* --color-ink-black #0b1f3a */
  --primary: 41.9 100% 47.5%; /* --color-amber #f2a900 */
  --primary-foreground: 214.5 68.1% 13.5%; /* --color-ink-black #0b1f3a */
  --ring: 19.3 74.7% 31%; /* --color-ember-orange #8a3a14 */
  --accent: 210 22.2% 96.5%; /* --surface-warm-canvas #f4f6f8 */
  --accent-foreground: 214.5 68.1% 13.5%; /* --color-ink-black #0b1f3a */
  --secondary: 210 22.2% 96.5%; /* --surface-warm-canvas #f4f6f8 */
  --secondary-foreground: 214.5 68.1% 13.5%; /* --color-ink-black #0b1f3a */
  --muted: 210 22.2% 96.5%; /* --surface-warm-canvas #f4f6f8 */
  --muted-foreground: 215 16.4% 43.1%; /* --color-warm-gray #5c6b80 */
  --border: 213.8 23.5% 86.7%; /* --color-sand #d5dce5 */
  --input: 213.8 23.5% 86.7%; /* --color-sand #d5dce5 */
  --destructive: 19.3 74.7% 31%; /* --color-burnt-rust #8a3a14 */
  --destructive-foreground: 0 0% 100%; /* --color-pure-white #ffffff */
  --sidebar-background: 210 22.2% 96.5%; /* --surface-warm-canvas #f4f6f8 */
  --sidebar-foreground: 214.5 68.1% 13.5%; /* --color-ink-black #0b1f3a */
  --sidebar-primary: 19.3 74.7% 31%; /* --color-ember-orange #8a3a14 */
  --sidebar-primary-foreground: 0 0% 100%; /* --color-pure-white #ffffff */
  --sidebar-accent: 214.3 25.9% 94.7%; /* --color-fog #eef1f5 */
  --sidebar-accent-foreground: 214.5 68.1% 13.5%; /* --color-ink-black #0b1f3a */
  --sidebar-border: 213.8 23.5% 86.7%; /* --color-sand #d5dce5 */
  --sidebar-ring: 19.3 74.7% 31%; /* --color-ember-orange #8a3a14 */
  --chart-1: 19.3 74.7% 31%; /* --color-ember-orange #8a3a14 */
  --chart-2: 214.5 68.1% 13.5%; /* --color-electric-blue #0b1f3a */
  --chart-3: 214.5 68.1% 13.5%; /* --color-charcoal #0b1f3a */
  --chart-4: 19.4 100% 86.1%; /* --color-peach-blush #ffcfb8 */
  --chart-5: 19.3 74.7% 31%; /* --color-burnt-rust #8a3a14 */
  --radius: var(--radius-md);
  --font-sans: var(--font-body);
}

/* chat/skin/skin.css — what Chainlit's theme variables cannot do (website ticket 23).
 *
 * chat/frontend.py appends this to tokens.css, fonts.css and the computed theme block, so
 * every var() below resolves to a token and no colour is written here. The colours of the
 * box itself — white surface, ink text, ember send button, canvas composer — are the theme
 * variables, set in frontend.py. This file is the short list the variables cannot reach.
 *
 * What is deliberately NOT here: Chainlit's message layout, its avatar column, its copy
 * button, its edit pencil and its watermark line. Each could be fought with a selector and
 * none should be — a half-overridden framework looks worse than an adopted one, and each
 * fought selector is a thing the next Chainlit upgrade breaks quietly. The watermark says
 * "LLMs can make mistakes. Check important info.", which is true, and stays.
 *
 * The hooks used below were read off the rendered DOM of Chainlit 2.12.0 on 2026-09-11:
 * `#theme-toggle`, `#message-composer`, `.ai-message`, `.message-content`, `.inline-text`
 * (an inline Text element), `#welcome-screen img.logo` (ticket 28), `#new-chat-button` (ticket 29), and the avatar's alt
 * text, "Avatar for <author>". The author is set by chat/app.py and a model's prose cannot
 * set it, which is why the styling of the two halves keys on it and not on anything in the
 * message text.
 */

/* ── A light box, and only light ─────────────────────────────────────────────────────── */
/* config.toml sets default_theme = "light"; the toggle would only offer an untokened dark. */
#theme-toggle {
  display: none;
}

/* ── No Chainlit logo ───────────────────────────────────────────────────────────────── */
/* Ticket 28. The welcome screen is headed by Chainlit's own logo — its red mark and the
 * "Chainlit" wordmark — which is another product's brand on AI4BCM's front door. In a box
 * a few hundred pixels tall it also showed only as a clipped red sliver. */
#welcome-screen img.logo {
  display: none;
}

/* ── The welcome screen does not hang off the top ───────────────────────────────────── */
/* Chainlit pulls #welcome-screen up by 60px so its composer sits optically centred under a
 * title. In a box a few hundred pixels tall that pull puts the composer's TOP EDGE above
 * its own scrolling ancestor, which clips it: at a 200px frame the top 12px of the field —
 * and the whole top of its focus ring — were cut off (owner saw it, 2026-09-12). Measured
 * against the frame it looked fine, which is why it was missed; the box that clips is
 * inside Chainlit, not the iframe.
 *
 * With the pull at 0 the composer sits inside its scroller at every height this box uses,
 * and the frame can be short without either clipping the field or growing a scrollbar.
 * This is a layout override of the kind this file otherwise avoids, and it is here because
 * the alternative is a frame tall enough to hide the pull, with the dead band that costs. */
#welcome-screen {
  margin-top: 0;
}

/* ── No New Chat ────────────────────────────────────────────────────────────────────── */
/* Ticket 29. The panel's own Clear, in the page's header above this frame, is the one way to
 * start again; a second control beside it would suggest the box has a memory to reset. The
 * button stays in the DOM because Clear presses it (skin.js, 5.). */
#new-chat-button {
  display: none;
}

/* ── The composer shows where the cursor is ─────────────────────────────────────────── */
/* Ticket 12: `Ask it` moving the cursor into a field that looks exactly as it did a moment
 * ago is the same as not moving it. The page's own input bar carried this ring; the
 * composer inherits it. */
#message-composer {
  border: 1px solid var(--color-sand);
  /* The one white surface in the frame, and the only box the reader sees at rest. The
   * theme gives the composer --accent, which is the canvas the visitor's own messages use;
   * that pairing is right for a message and wrong for the field, which has to read as a
   * card on the page's grey ground (owner, 2026-09-12). Set here rather than by moving
   * --accent, so the visitor's messages keep their second surface. */
  background: var(--surface-card-white);
}

#message-composer:focus-within {
  border-color: var(--color-ember-orange);
  outline: 2px solid var(--color-ember-orange);
  outline-offset: 2px;
}

/* ── Links, as the page sets them ───────────────────────────────────────────────────── */
/* Chainlit colours links with --primary, which is ember. The site's prose links are rust,
 * underlined, turning ink on hover (src/_styles/site.css, `.prose a`), and a link in the box
 * is a link on the same page, so it is set the same way rather than a third way. */
.message-content a {
  color: var(--color-burnt-rust);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message-content a:hover {
  color: var(--color-ink-black);
}

/* ── Eyebrows ───────────────────────────────────────────────────────────────────────── */
/* chat/render.py opens a message with its eyebrow in bold — "Answered from AI4BCM
 * Guidance · Release 2026.09", "No answer to that one" — so that a client with no styles
 * still says what kind of thing follows. Here that line takes the page's .eyebrow form.
 * `.prose > [role=article]:first-child` is the message's first paragraph and never one
 * inside the general half's blockquote. */
.message-content .prose > [role="article"]:first-child > .font-bold:only-child {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
}

/* ── Source lists: bordered, not elevated ───────────────────────────────────────────── */
/* An inline Text element is a card with a 24px semibold title — louder than the answer it
 * supports. The page is border-driven, so no shadow, and the title is an eyebrow. */
.message-content .bg-card {
  box-shadow: none;
  border-color: var(--color-sand);
}

.message-content .bg-card > :first-child {
  padding: var(--spacing-12) var(--spacing-16) 0;
}

.message-content .bg-card > :first-child > div {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
}

.message-content .bg-card > :last-child {
  padding: 0 var(--spacing-16) var(--spacing-4);
}

/* The unit each section sits in, set like the page's citation chips set it. */
.inline-text li .italic {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-style: normal;
  color: var(--color-warm-gray);
}

/* ── THE ANSWER, AND NOTHING BESIDE IT ───────────────────────────────────────────────
 * The owner, 2026-11-02: "Just straight answer, and as much space for the answer in the chat
 * window as possible." No label over a cited answer (render.py), no rule down its left, no avatar
 * column: the text starts at the panel's own margin.
 *
 * Until then the line between the Guidance and general practice was drawn three ways (tickets 19
 * and 23): the author and avatar, the label, and an ember or driftwood rule down the left. What
 * stays is the label over general practice ("From general practice, not from the Guidance",
 * render.EYEBROW_GENERAL), the author it is signed with (still in the page, read by screen
 * readers, as the avatar's alt text), and the markers: a cited answer's lines open the sections
 * they rest on, and general practice carries no citation, ever (render.Block refuses one).
 */
.ai-message {
  gap: 0;
}

.ai-message > :not(:last-child) {
  display: none;
}

/* Ticket 61: the follow-up question is a Chainlit action button, and Chainlit sets its label on
 * one line (`whitespace-nowrap`, a fixed `h-9`). At 390 px a twelve-word question ran off the
 * edge of the phone (the owner's phone read, 2026-11-01). A text button under an answer wraps
 * and grows instead; the icon buttons beside it (copy) carry an svg and are left as they are. */
[data-step-type="assistant_message"] .flex-wrap > button:not(:has(svg)) {
  white-space: normal;
  height: auto;
  min-height: 2.25rem;
  max-width: 100%;
  padding-block: 0.4rem;
  text-align: left;
  justify-content: flex-start;
}

/* ── The visitor's own message sits in a white box ───────────────────────────────────
 * The owner, 2026-11-02: the question should be visibly boxed, as in Claude Code, and not
 * look like the answer (variant A, white box on the right). The bubble is Chainlit's
 * `.bg-accent` inside a user_message step; its fill is the canvas, so at rest it read as bare
 * text. The same surface and hairline the composer has, the page's 8px corner, kept to the
 * right by Chainlit's own layout. The answer stays unboxed. */
[data-step-type="user_message"] .bg-accent {
  background: var(--surface-card-white);
  border: 1px solid var(--color-sand);
  border-radius: 8px;
}