/* ===== ConnectingRx Design System =====
   Brand palette sampled from the style board, applied at the ratios the
   board specifies. Swatch areas measured off the board:

     navy   #062744  43.1%  ->  49% of all colored ink  (dominant)
     blue   #1f80bc  13.9%  ->  16%  (primary action)
     teal   #3c898a  13.8%  ->  16%  (secondary accent)
     mist   #f2f5f7  11.5%  ->  ground, with white (not counted as ink)
     sky    #8ccef1   7.4%  ->   8%  (tint)
     mint   #9fd9da   7.3%  ->   8%  (tint)

   There is no black in this palette. Navy is the darkest value the brand
   owns, so it does every job black would otherwise take: hairlines, the
   logo capsule outline, and the tint under every shadow.

   White is the page ground; mist is the only secondary ground. Everything
   chromatic follows the ratio above: navy carries about as much weight as
   all other colors combined (body text, wordmark, user bubbles, footer),
   blue and teal are equal-weight accents (blue = action, teal = support),
   sky and mint appear only as tints.

   In dark mode the two ends of the board swap jobs: navy becomes the ground
   and WHITE becomes the ink and the light. It is a full member of the
   palette, not just the light-mode paper — it carries primary text, the
   wordmark, the navy-role accent bar, and (as white-alpha) every elevated
   plane and hairline. Navy cannot separate itself from navy, so white does
   the separating: surfaces are white composited over navy at 10-12%, edges
   are white at 38%, which is what keeps planes legible on a dark ground.
   ===== */

/* ===== Brand Tokens ===== */
:root {
    /* Board colors, unmodified */
    --brand-navy: #062744;
    --brand-blue: #1f80bc;
    --brand-teal: #3c898a;
    --brand-mist: #f2f5f7;
    --brand-sky: #8ccef1;
    --brand-mint: #9fd9da;

    /* Darkened accents for small text on white (WCAG AA: 6.8:1 / 6.5:1) */
    --brand-blue-deep: #17608f;
    --brand-teal-deep: #2c6768;
    /* Navy steps for hovers and depth */
    --brand-navy-600: #14507f;
    --brand-navy-700: #0d3c63;

    /* ===== Semantic ===== */
    --crx-primary: var(--brand-blue);
    --crx-primary-dark: var(--brand-blue-deep);
    --crx-primary-light: var(--brand-sky);
    --crx-secondary: var(--brand-teal);
    --crx-secondary-dark: var(--brand-teal-deep);

    --crx-bg: #ffffff;
    --crx-surface: #ffffff;
    --crx-surface-alt: var(--brand-mist);

    --crx-text: var(--brand-navy);
    --crx-text-secondary: #456179;
    --crx-text-muted: #7d93a6;

    --crx-border: #dbe4ea;
    --crx-border-light: #eaf0f4;
    --crx-hairline: rgba(6, 39, 68, 0.10);

    --crx-shadow-sm: 0 1px 2px rgba(6, 39, 68, 0.05);
    --crx-shadow-md: 0 6px 16px rgba(6, 39, 68, 0.10);

    --crx-radius-md: 14px;
    --crx-radius-lg: 20px;
    --crx-radius-full: 9999px;

    /* Type: geometric display to match the wordmark, Inter for reading */
    --crx-font-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
    --crx-font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ===== DaisyUI theme mapping (oklch, daisyUI v4) ===== */
[data-theme="light"] {
    --p: 57.527% 0.1253 242.10;   /* primary   = blue */
    --pc: 100% 0 0;
    --s: 58.270% 0.0754 196.45;   /* secondary = teal */
    --sc: 100% 0 0;
    --a: 81.966% 0.0830 232.28;   /* accent    = sky */
    --ac: 26.689% 0.0657 249.39;
    --n: 26.689% 0.0657 249.39;   /* neutral   = navy */
    --nc: 96.844% 0.0042 236.50;
    --b1: 100% 0 0;               /* base      = white ground */
    --b2: 96.844% 0.0042 236.50;  /*             mist */
    --b3: 91.379% 0.0127 236.64;
    --bc: 26.689% 0.0657 249.39;  /* base text = navy */
    --in: 57.527% 0.1253 242.10;
    --inc: 100% 0 0;
    --su: 47.550% 0.0610 196.81;
    --suc: 100% 0 0;
    --rounded-btn: 2rem;
    --rounded-box: 1rem;
}

/* ===== Base ===== */
body {
    background: var(--crx-bg);
    font-family: var(--crx-font-body);
    color: var(--crx-text);
}

h1, h2, h3, h4,
.crx-display {
    font-family: var(--crx-font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ===== App Container =====
   The shell grows with the viewport instead of sitting at one fixed cap, but
   the transcript inside it does not: prose set 1100px wide is harder to read,
   not easier. So the shell widens for the things that benefit from width —
   the header, the landing hero, the four quick cards — while message rows
   stay at a measure you can actually track line to line. */
.app-container {
    height: 100vh;
    height: 100dvh;
}

.crx-shell {
    width: 100%;
    max-width: 768px;
    margin-inline: auto;
    /* One measure shared by the centered search and the card row beneath it,
       so the hero has a single pair of edges instead of two competing ones.
       It stays inside the shell, which keeps a little air at the margins. */
    --crx-hero-max: 100%;
}

@media (min-width: 1024px) {
    .crx-shell { max-width: 960px; --crx-hero-max: 100%; }
}

@media (min-width: 1440px) {
    .crx-shell { max-width: 1160px; --crx-hero-max: 1040px; }
}

.quick-cards {
    max-width: var(--crx-hero-max);
    margin-inline: auto;
}

/* Transcript rows keep a readable measure whatever the shell is doing.
   #landing is exempt — the hero is meant to use the full width. */
#chat-container > *:not(#landing) {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
}

/* ===== Landing hero =====
   On the landing screen the input area is moved into #search-slot, so the
   search sits mid-page with the cards beneath it. Docked chrome — the top
   hairline, the opaque backdrop, the blur — is for when it is pinned to the
   bottom edge; centered in open space it should read as part of the hero. */
#search-slot:empty {
    display: none;
}

.crx-input-area.is-centered {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: none;
    padding: 0;
    width: 100%;
    max-width: var(--crx-hero-max);
    margin-inline: auto;
}

/* The disclaimer must stay visible on the landing screen — it is a medical
   disclaimer, and the landing screen is where people arrive. It just should
   not float mid-page under a centered search box, so it is pinned to the foot
   of the shell instead (.app-container is the positioned ancestor). It
   returns to normal flow when the input docks. */
.crx-input-area.is-centered .crx-disclaimer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    margin-top: 0;
}

/* Docked input keeps the same measure as the transcript above it. */
.crx-input-area > form,
.crx-input-area > .crx-scope-tabs,
.crx-input-area > .crx-disclaimer {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
}

.crx-input-area.is-centered > form,
.crx-input-area.is-centered > .crx-scope-tabs {
    max-width: none;
}

/* ===== Background Atmosphere =====
   Plain white ground — the atmosphere layer stays in the DOM but carries
   no wash, so nothing tints the page. */
.app-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* ===== Header ===== */
.crx-header {
    position: relative;   /* anchors the mobile nav sheet */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--crx-border-light);
    z-index: 20;
}

/* On the chat screen the header is a flex child of a 100dvh column and never
   scrolls. Company pages scroll the document, so there it sticks. */
.crx-page > .crx-header {
    position: sticky;
    top: 0;
}

/* ===== Header Navigation =====
   Three company links sitting beside the lockup. They borrow the scope tabs'
   treatment — body font, muted at rest, a soft pill on hover — so the two
   navigation rows on the page read as one system rather than two. Below 768px
   they collapse into the sheet, which is where Privacy and Terms live too. */
.crx-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 10px;
}

.crx-nav-link,
.crx-nav-cta {
    display: inline-flex;
    align-items: center;
    border-radius: var(--crx-radius-full);
    font-family: var(--crx-font-body);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.crx-nav-link {
    padding: 6px 13px;
    color: var(--crx-text-muted);
}

.crx-nav-link:hover {
    color: var(--crx-text);
    background: var(--crx-surface-alt);
}

/* The page you are on: navy ink and a tint, same pair the active scope pill
   uses, so "you are here" reads the same way in both rows. */
.crx-nav-link[aria-current="page"] {
    color: var(--crx-text);
    background: rgba(6, 39, 68, 0.08);
}

/* Return path to the assistant. The only outlined control in the header —
   it is the one thing on a company page that leads back to the product. */
.crx-nav-cta {
    padding: 7px 16px;
    color: var(--crx-primary-dark);
    border: 1px solid var(--crx-border);
    background: var(--crx-surface);
}

.crx-nav-cta:hover {
    color: var(--crx-on-primary, #ffffff);
    background: var(--crx-primary);
    border-color: var(--crx-primary);
}

/* Hamburger: hidden until the links collapse */
.crx-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--crx-radius-full);
    background: transparent;
    color: var(--crx-text-muted);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.crx-nav-toggle:hover {
    color: var(--crx-text);
    background: var(--crx-surface-alt);
}

.crx-nav-toggle svg {
    width: 20px;
    height: 20px;
}

.crx-nav-toggle .icon-close { display: none; }
.crx-nav-toggle.is-open .icon-close { display: block; }
.crx-nav-toggle.is-open .icon-menu { display: none; }

/* The sheet drops from the header's bottom edge. It is absolutely positioned
   so it cannot push the chat layout — that column is height-locked. */
.crx-nav-sheet {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--crx-surface);
    border-bottom: 1px solid var(--crx-border-light);
    box-shadow: var(--crx-shadow-md);
    animation: fade-in 0.18s ease-out;
}

.crx-nav-sheet a {
    padding: 12px 14px;    /* 44px tall — touch target */
    border-radius: var(--crx-radius-md);
    color: var(--crx-text-secondary);
    font-family: var(--crx-font-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.crx-nav-sheet a:hover,
.crx-nav-sheet a[aria-current="page"] {
    color: var(--crx-text);
    background: var(--crx-surface-alt);
}

.crx-nav-sheet-rule {
    height: 1px;
    margin: 6px 10px;
    background: var(--crx-border-light);
}

/* Legal links are secondary to the company links above them. */
.crx-nav-sheet .is-legal {
    font-size: 13.5px;
    color: var(--crx-text-muted);
}

@media (max-width: 767px) {
    .crx-nav,
    .crx-nav-cta { display: none; }
    .crx-nav-toggle { display: inline-flex; }
}

/* ===== Company Pages =====
   Unlike the chat screen these scroll the document, so the shell sets a
   minimum rather than a fixed height and the footer sits below the fold. */
.crx-page {
    min-height: 100vh;
    min-height: 100dvh;
}

.crx-doc {
    flex: 1;
    width: 100%;
    padding: 0 20px 72px;
}

/* Prose measure. The shell widens to 1160px on large screens; running body
   copy across that is unreadable, so the column stays put. */
.crx-doc-inner {
    width: 100%;
    max-width: 680px;
    margin-inline: auto;
}

.crx-hero {
    padding: 56px 0 40px;
    border-bottom: 1px solid var(--crx-border-light);
    margin-bottom: 40px;
}

.crx-eyebrow {
    display: block;
    font-family: var(--crx-font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brand-blue-deep);
    margin-bottom: 14px;
}

.crx-doc h1 {
    font-size: 40px;
    font-weight: 300;
    line-height: 1.12;
    letter-spacing: 0.005em;
    color: var(--crx-text);
    margin-bottom: 18px;
}

.crx-lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--crx-text-secondary);
}

.crx-doc section + section {
    margin-top: 40px;
}

.crx-doc h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--crx-text);
    margin-bottom: 12px;
}

.crx-doc h3 {
    font-family: var(--crx-font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--crx-text);
    margin-bottom: 6px;
}

.crx-doc p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--crx-text-secondary);
}

.crx-doc p + p,
.crx-doc h2 + p,
.crx-doc h3 + p {
    margin-top: 12px;
}

.crx-doc ul {
    margin-top: 12px;
    padding-left: 20px;
    list-style: disc;
}

.crx-doc li {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--crx-text-secondary);
    margin-bottom: 6px;
}

.crx-doc a:not(.crx-nav-link):not(.crx-nav-cta):not(.crx-btn) {
    color: var(--crx-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Pull quote — the one place a page states something in the brand's own
   display face at size. Navy bar on the left, matching the card accents. */
.crx-quote {
    margin: 28px 0;
    padding: 4px 0 4px 22px;
    border-left: 4px solid var(--brand-navy);
    font-family: var(--crx-font-display);
    font-size: 22px;
    font-weight: 300;
    line-height: 1.4;
    color: var(--crx-text);
}

/* Card grid for values / pillars / contact routes. Same plane, border and
   lift as the quick-action cards, without the accent rail. */
.crx-tiles {
    display: grid;
    /* 200px lets three tiles share the 680px prose measure. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.crx-tile {
    padding: 18px 20px;
    background: var(--crx-surface);
    border: 1px solid var(--crx-border);
    border-radius: var(--crx-radius-md);
    box-shadow: var(--crx-shadow-sm);
}

.crx-tile p {
    font-size: 14.5px;
}

.crx-tile-icon {
    width: 22px;
    height: 22px;
    margin-bottom: 10px;
    color: var(--brand-blue);
}

/* Placeholder marker. Every page below is scaffolding — this keeps that
   impossible to miss, and greping `crx-placeholder` finds all of it. */
.crx-placeholder {
    display: block;
    margin-bottom: 24px;
    padding: 10px 14px;
    border: 1px dashed var(--brand-blue);
    border-radius: var(--crx-radius-md);
    background: rgba(31, 128, 188, 0.06);
    font-family: var(--crx-font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--brand-blue-deep);
}

.crx-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--crx-radius-full);
    background: var(--crx-primary);
    color: var(--crx-on-primary, #ffffff);
    font-family: var(--crx-font-display);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(6, 39, 68, 0.12);
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.crx-btn:hover {
    background: var(--crx-primary-dark);
    transform: translateY(-1px);
}

/* Closing band — the route back to the assistant from the foot of any page. */
.crx-cta-band {
    margin-top: 48px;
    padding: 32px 24px;
    text-align: center;
    background: var(--crx-surface-alt);
    border: 1px solid var(--crx-border-light);
    border-radius: var(--crx-radius-lg);
}

.crx-cta-band h2 {
    margin-bottom: 8px;
}

.crx-cta-band p {
    margin-bottom: 20px;
}

/* ===== Company Page Content Blocks =====
   Added with the real copy. Stat strip, figures, callouts, the who-list, the
   mission/vision pair, numbered principles, roadmap, contact routes and form.
   All of it lives inside .crx-doc-inner and keeps the 680px measure. */

/* Stat strip — three numbers set in the display face. */
.crx-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 24px 0;
}

.crx-stat {
    padding: 18px 18px 16px;
    background: var(--crx-surface-alt);
    border-radius: var(--crx-radius-md);
}

.crx-stat dd {
    font-family: var(--crx-font-display);
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    color: var(--crx-text);
    letter-spacing: 0.01em;
}

.crx-stat-plus {
    font-size: 22px;
    color: var(--brand-blue);
    margin-left: 1px;
}

.crx-stat dt {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--crx-text-muted);
    margin-bottom: 10px;
    min-height: 2.8em;
}

/* Figures — illustrations and mock-ups that break up long runs of prose. */
.crx-figure {
    margin: 28px 0;
}

.crx-figure svg {
    display: block;
    width: 100%;
    height: auto;
    padding: 18px 12px;
    background: var(--crx-surface-alt);
    border-radius: var(--crx-radius-md);
}

.crx-figure figcaption {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--crx-text-muted);
    text-align: center;
}

/* Diagram parts. Fills and strokes come from tokens so the figures flip
   with the theme like everything else. */
.crx-fig-box rect { fill: var(--crx-surface); stroke: var(--crx-border); stroke-width: 1.5; }
.crx-fig-label text { font-family: var(--crx-font-display); font-size: 15px; font-weight: 500; fill: var(--crx-text); }
.crx-fig-label .crx-fig-sub,
.crx-fig-gaplabel .crx-fig-sub { font-family: var(--crx-font-body); font-size: 12px; font-weight: 400; fill: var(--crx-text-muted); }
.crx-fig-gaplabel text { font-family: var(--crx-font-display); font-size: 16px; font-weight: 400; font-style: italic; fill: var(--brand-blue-deep); }
.crx-fig-line path { fill: none; stroke: var(--brand-blue); stroke-width: 2.5; stroke-linecap: round; }
.crx-fig-line-faint path { fill: none; stroke: var(--brand-blue); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 9; opacity: 0.45; }
.crx-fig-tick path { fill: none; stroke: var(--crx-border); stroke-width: 2; stroke-linecap: round; }
.crx-fig-dot circle { fill: var(--brand-blue); }
.crx-fig-dot-hollow circle { fill: var(--crx-surface-alt); stroke: var(--crx-text-muted); stroke-width: 2; stroke-dasharray: 3 3; }
.crx-fig-person circle,
.crx-fig-person path { fill: var(--brand-navy); }
.crx-fig-bottle rect { fill: var(--crx-surface); stroke: var(--brand-navy); stroke-width: 2; }
.crx-fig-bottle .crx-fig-bottle-label { fill: var(--brand-sky); stroke: none; }

/* Mock answer card — HTML rather than SVG so it inherits real type. */
.crx-sample {
    padding: 18px 20px;
    background: var(--crx-surface-alt);
    border-radius: var(--crx-radius-md);
}

.crx-sample-q {
    font-family: var(--crx-font-display);
    font-size: 16px;
    color: var(--crx-text);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--crx-hairline);
}

.crx-sample-q::before {
    content: "Q";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #ffffff;
    font-family: var(--crx-font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    vertical-align: 2px;
}

.crx-sample-a p {
    font-size: 14.5px;
}

.crx-sample-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.crx-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--crx-radius-full);
    border: 1px solid var(--crx-border);
    background: var(--crx-surface);
    font-size: 12px;
    color: var(--crx-text-secondary);
}

/* Callout — a bounded statement, quieter than the pull quote. */
.crx-callout {
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid var(--crx-border);
    border-left: 4px solid var(--brand-teal);
    border-radius: var(--crx-radius-md);
}

.crx-callout h3 {
    margin-bottom: 6px;
}

/* Who it's for — term/description rows on hairlines. */
.crx-who {
    margin-top: 18px;
    border-top: 1px solid var(--crx-border-light);
}

.crx-who-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid var(--crx-border-light);
}

.crx-who-row dt {
    font-family: var(--crx-font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--crx-text);
    line-height: 1.4;
}

.crx-who-row dd {
    font-size: 15px;
    line-height: 1.6;
    color: var(--crx-text-secondary);
}

/* Mission / vision side by side. */
.crx-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.crx-pair-item {
    padding: 22px 22px 20px;
    background: var(--crx-surface-alt);
    border-radius: var(--crx-radius-md);
}

.crx-pair-item h2 {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-blue-deep);
    margin-bottom: 10px;
}

.crx-pair-item p {
    font-family: var(--crx-font-display);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.45;
    color: var(--crx-text);
}

/* Numbered principles — display-face numerals in the gutter. */
.crx-principles {
    list-style: none;
    counter-reset: principle;
    margin-top: 20px;
    padding: 0;
}

.crx-principles li {
    counter-increment: principle;
    position: relative;
    padding: 18px 0 18px 58px;
    border-top: 1px solid var(--crx-border-light);
}

.crx-principles li:last-child {
    border-bottom: 1px solid var(--crx-border-light);
}

.crx-principles li::before {
    content: counter(principle, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 16px;
    font-family: var(--crx-font-display);
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: var(--brand-blue);
}

.crx-principles h3 {
    margin-bottom: 4px;
}

.crx-principles p {
    font-size: 15px;
}

/* Roadmap — three steps down a rail; the first is marked live. */
.crx-roadmap {
    list-style: none;
    margin-top: 20px;
    padding: 0;
}

.crx-roadmap-step {
    position: relative;
    padding: 4px 0 28px 34px;
}

.crx-roadmap-step::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 24px;
    bottom: -6px;
    border-left: 2px dashed var(--crx-border);
}

.crx-roadmap-step:last-child::before {
    display: none;
}

.crx-roadmap-step::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--crx-text-muted);
    background: var(--crx-bg);
}

.crx-roadmap-step.is-live::after {
    border-color: var(--brand-blue);
    background: var(--brand-blue);
    box-shadow: 0 0 0 4px rgba(31, 128, 188, 0.18);
}

.crx-roadmap-step.is-live::before {
    border-left-style: solid;
    border-left-color: var(--brand-blue);
}

.crx-roadmap-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--crx-font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--crx-text-muted);
    margin-bottom: 6px;
}

.crx-roadmap-tag em {
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: none;
    font-family: var(--crx-font-body);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--crx-radius-full);
    border: 1px solid var(--crx-border);
    color: var(--crx-text-secondary);
}

.is-live .crx-roadmap-tag {
    color: var(--brand-blue-deep);
}

.is-live .crx-roadmap-tag em {
    border-color: var(--brand-blue);
    background: var(--brand-blue);
    color: #ffffff;
}

.crx-roadmap-step p {
    font-size: 15px;
}

/* Safety notice — above the contact routes and form, and impossible to miss.
   Navy bar, mist plane, warning glyph. */
.crx-notice {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 40px;
    padding: 20px 22px;
    background: var(--crx-surface-alt);
    border: 1px solid var(--crx-border);
    border-left: 4px solid var(--brand-navy);
    border-radius: var(--crx-radius-md);
}

.crx-notice-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    color: var(--brand-navy);
}

.crx-notice h2 {
    font-size: 19px;
    margin-bottom: 8px;
}

.crx-notice p {
    font-size: 14.5px;
}

/* Contact form. */
.crx-form {
    margin-top: 20px;
}

.crx-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.crx-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.crx-field label {
    font-family: var(--crx-font-display);
    font-size: 14px;
    font-weight: 500;
    color: var(--crx-text);
}

.crx-field input,
.crx-field select,
.crx-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--crx-border);
    border-radius: 10px;
    background: var(--crx-surface);
    color: var(--crx-text);
    font-family: var(--crx-font-body);
    font-size: 15px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.crx-field textarea {
    resize: vertical;
    min-height: 140px;
}

.crx-field input:focus,
.crx-field select:focus,
.crx-field textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(31, 128, 188, 0.18);
}

.crx-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 4px 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--crx-text-secondary);
    cursor: pointer;
}

.crx-check input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--brand-blue);
}

.crx-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.crx-form-actions .crx-btn {
    border: none;
    cursor: pointer;
}

.crx-form-hint {
    font-size: 13px;
    color: var(--crx-text-muted);
}

.crx-form-error,
.crx-form-success {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
}

.crx-doc p.crx-form-error {
    border: 1px solid #c0392b;
    background: rgba(192, 57, 43, 0.06);
    color: #8e2a1f;
}

.crx-doc .crx-form-success {
    margin-top: 16px;
    border: 1px solid var(--brand-teal);
    background: rgba(60, 137, 138, 0.08);
}

.crx-doc .crx-form-success p {
    font-size: 14px;
    color: var(--brand-teal-deep);
}

.crx-doc .crx-form-success p + p {
    margin-top: 4px;
}

.crx-doc .crx-form-success-sub {
    font-size: 12.5px;
    opacity: 0.85;
}


/* ===== Footer ===== */
.crx-footer {
    border-top: 1px solid var(--crx-border-light);
    background: var(--crx-surface-alt);
    padding: 40px 20px 28px;
}

.crx-footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
    justify-content: space-between;
    max-width: 900px;
    margin-inline: auto;
}

.crx-footer-brand {
    max-width: 280px;
}

.crx-footer-brand p {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--crx-text-muted);
}

.crx-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
}

.crx-footer-col {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.crx-footer-col h2 {
    font-family: var(--crx-font-display);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--crx-text-muted);
    margin-bottom: 2px;
}

.crx-footer-col a {
    font-size: 14px;
    color: var(--crx-text-secondary);
    text-decoration: none;
}

.crx-footer-col a:hover {
    color: var(--crx-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.crx-footer-legal {
    max-width: 900px;
    margin: 32px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--crx-border-light);
    font-size: 12px;
    line-height: 1.6;
    color: var(--crx-text-muted);
}

/* ===== Logo Lockup =====
   Rebuilt from the brand artwork: geometric wordmark, tracked tagline in
   brand blue, capsule mark, "Rx". Everything scales from the lockup's
   font-size; the wordmark sets the width and the row below fills it. */
.crx-lockup {
    display: inline-block;
    font-family: var(--crx-font-display);
    font-size: 26px;              /* wordmark size; drives the whole lockup */
    line-height: 1;
    color: var(--crx-text);
    text-decoration: none;
    flex-shrink: 0;
}

.crx-lockup-word {
    display: block;
    font-weight: 300;
    font-size: 1em;
    letter-spacing: 0.055em;
    line-height: 0.82;
    text-transform: uppercase;
    white-space: nowrap;
}

.crx-lockup-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.18em;
    margin-top: 0.16em;
}

.crx-lockup-tag {
    font-size: 0.21em;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.32em;   /* matches the artwork's tracking */
    text-transform: uppercase;
    color: var(--brand-blue);
    white-space: nowrap;
}

.crx-lockup-pill {
    height: 0.7em;
    width: auto;
    flex-shrink: 0;
}

.crx-lockup-rx {
    font-weight: 300;
    font-size: 0.95em;
    line-height: 0.78;
    letter-spacing: 0.01em;
}

/* Capsule mark on its own (welcome screen, empty states) */
.crx-mark {
    display: block;
    height: 56px;
    width: auto;
    margin: 0 auto;
}

/* ===== Chat Container ===== */
#chat-container {
    scroll-behavior: smooth;
}

#chat-container:has(> :last-child) {
    overflow-anchor: auto;
}

/* ===== Landing Screen ===== */
#landing {
    position: relative;
    animation: landing-fade 0.3s ease-out;
}

@keyframes landing-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Floating decorative shapes — tints only (sky / mint), capsule-shaped
   to echo the mark */
.landing-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: var(--crx-radius-full);
    opacity: 0;
}

.shape-1 {
    width: 36px;
    height: 36px;
    background: rgba(140, 206, 241, 0.35);
    top: 10%;
    left: 8%;
    animation: shape-enter 0.6s 0.3s ease-out forwards,
               float-a 10s 0.9s ease-in-out infinite;
}

.shape-2 {
    width: 42px;
    height: 22px;
    background: rgba(159, 217, 218, 0.40);
    top: 15%;
    right: 12%;
    animation: shape-enter 0.6s 0.5s ease-out forwards,
               float-b 12s 1.1s ease-in-out infinite;
}

.shape-3 {
    width: 28px;
    height: 28px;
    background: rgba(31, 128, 188, 0.14);
    top: 55%;
    left: 5%;
    animation: shape-enter 0.6s 0.4s ease-out forwards,
               float-a 11s 1.0s ease-in-out infinite;
}

.shape-4 {
    width: 44px;
    height: 24px;
    background: rgba(140, 206, 241, 0.28);
    top: 45%;
    right: 6%;
    animation: shape-enter 0.6s 0.6s ease-out forwards,
               float-b 9s 1.2s ease-in-out infinite;
}

.shape-5 {
    width: 18px;
    height: 18px;
    background: rgba(60, 137, 138, 0.16);
    top: 25%;
    left: 35%;
    animation: shape-enter 0.6s 0.7s ease-out forwards,
               float-a 13s 1.3s ease-in-out infinite;
}

.shape-6 {
    width: 32px;
    height: 18px;
    background: rgba(159, 217, 218, 0.32);
    bottom: 20%;
    right: 25%;
    animation: shape-enter 0.6s 0.55s ease-out forwards,
               float-b 11s 1.15s ease-in-out infinite;
}

@keyframes shape-enter {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes float-a {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-10px) rotate(2deg); }
    66% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes float-b {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14px) rotate(-2deg); }
}

/* Landing welcome entrance */
.landing-entrance {
    opacity: 0;
    animation: entrance-up 0.6s ease-out 0.1s forwards;
}

.crx-welcome-icon {
    opacity: 0;
    animation: icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}

.crx-welcome-title {
    font-family: var(--crx-font-display);
    font-weight: 400;
    letter-spacing: 0.005em;
    color: var(--crx-text);
}

.crx-welcome-sub {
    color: var(--crx-text-secondary);
}

@keyframes icon-pop {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes entrance-up {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Third-party overrides =====
   Tailwind/DaisyUI ship a default rgba(0,0,0,0.05) shadow on .btn. The brand
   owns no black, so restate it in navy rather than inherit theirs. */
.btn {
    box-shadow: none;
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(6, 39, 68, 0.12);
}

/* ===== Theme Toggle =====
   The icon shows the theme you would switch TO, not the one you are in:
   a sun while dark, a moon while light. */
.theme-toggle {
    color: var(--crx-text-muted);
    transition: color 0.2s ease, background-color 0.2s ease;
}

.theme-toggle:hover {
    color: var(--crx-text);
}

.theme-icon {
    width: 18px;
    height: 18px;
}

.theme-icon-sun { display: none; }

[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }

/* ===== Quick Action Cards ===== */
.quick-card {
    display: flex;
    align-items: stretch;
    background: var(--crx-surface);
    border: 1px solid var(--crx-border);
    border-radius: var(--crx-radius-md);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    box-shadow: var(--crx-shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    opacity: 0;
    animation: card-enter 0.5s ease-out forwards;
}

.quick-card:nth-child(1) { animation-delay: 0.2s; }
.quick-card:nth-child(2) { animation-delay: 0.3s; }
.quick-card:nth-child(3) { animation-delay: 0.4s; }
.quick-card:nth-child(4) { animation-delay: 0.5s; }

.quick-card:hover {
    transform: translateY(-2px);
    border-color: var(--crx-border);
    box-shadow: var(--crx-shadow-md);
}

.quick-card:active {
    transform: scale(0.98);
}

@keyframes card-enter {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.quick-card-accent {
    width: 4px;
    flex-shrink: 0;
}

/* Accent bars follow the board ratio: navy leads, blue and teal equal,
   one tint. */
.accent-navy { background: var(--brand-navy); }
.accent-blue { background: var(--brand-blue); }
.accent-teal { background: var(--brand-teal); }
.accent-sky  { background: var(--brand-sky); }

.quick-card-content {
    padding: 14px 16px;
    flex: 1;
    min-width: 0;   /* let the text wrap instead of forcing the column wider */
}

/* Four across: the columns are roughly half as wide as they were at two up,
   so the label loses some of its letter-spacing and the question drops a
   point. The accent bar stays put — it is what ties each card to its scope. */
@media (min-width: 1024px) {
    .quick-cards .quick-card-content {
        padding: 12px 13px;
    }

    .quick-cards .quick-card-label {
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    .quick-cards .quick-card-text {
        font-size: 13px;
        line-height: 1.35;
    }
}

.quick-card-label {
    font-family: var(--crx-font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.label-navy { color: var(--brand-navy); }
.label-blue { color: var(--brand-blue-deep); }
.label-teal { color: var(--brand-teal-deep); }

.quick-card-text {
    font-size: 14px;
    color: var(--crx-text-secondary);
}

/* ===== Chat Messages ===== */
.chat {
    animation: msg-enter 0.3s ease-out;
}

@keyframes msg-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* User bubble — navy, the dominant brand color */
.chat-end .chat-bubble {
    background: var(--brand-navy) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--crx-radius-lg) var(--crx-radius-lg) 6px var(--crx-radius-lg);
    box-shadow: 0 2px 8px rgba(6, 39, 68, 0.18);
}

/* AI bubble — mist ground, navy text, ink hairline */
.chat-start .chat-bubble:not([class*="error"]) {
    background: var(--crx-surface-alt) !important;
    color: var(--crx-text) !important;
    border: 1px solid var(--crx-border) !important;
    border-radius: var(--crx-radius-lg) var(--crx-radius-lg) var(--crx-radius-lg) 6px;
    box-shadow: none;
}

/* Error bubble — keep DaisyUI error colors, match radius */
.chat-start .chat-bubble[class*="error"] {
    border-radius: var(--crx-radius-lg) var(--crx-radius-lg) var(--crx-radius-lg) 6px;
}

/* Markdown rendering inside chat bubbles */
.chat-bubble p {
    margin-bottom: 0.75rem;
}

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

.chat-bubble ul,
.chat-bubble ol {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
}

.chat-bubble ul {
    list-style-type: disc;
}

.chat-bubble ol {
    list-style-type: decimal;
}

.chat-bubble li {
    margin-bottom: 0.25rem;
}

.chat-bubble strong {
    color: inherit;
    font-weight: 700;
}

.chat-bubble em {
    opacity: 0.8;
}

.chat-start .chat-bubble h1,
.chat-start .chat-bubble h2,
.chat-start .chat-bubble h3 {
    font-family: var(--crx-font-display);
    font-weight: 500;
    color: var(--brand-navy);
}

/* ===== Buttons ===== */
.btn {
    font-family: var(--crx-font-display);
    font-weight: 500;
    letter-spacing: 0.03em;
}

.btn-primary {
    background-color: var(--crx-primary) !important;
    border-color: var(--crx-primary) !important;
    color: var(--crx-on-primary, #ffffff) !important;
}

.btn-primary:hover {
    background-color: var(--crx-primary-dark) !important;
    border-color: var(--crx-primary-dark) !important;
}

/* ===== Thinking Animation ===== */
.crx-thinking {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    animation: msg-enter 0.3s ease-out;
}

.thinking-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.thinking-dots span {
    width: 7px;
    height: 7px;
    background: var(--crx-primary);
    border-radius: 50%;
    animation: dot-bounce 1.4s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* ===== Tool Status ===== */
#tool-status {
    color: var(--crx-secondary-dark);
}

#tool-status.htmx-swapping {
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

/* ===== Input Area ===== */
.crx-input-area {
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--crx-border-light);
}

/* ===== Search Scope Tabs =====
   A four-up pill row floating above the input. Each scope owns one board
   color and carries it in a small dot, so all four are legible at rest —
   the range of what ConnectingRx searches is stated by the row itself
   rather than by a label. Only the active pill takes a fill, and that fill
   is the scope's own hue at low alpha, which keeps the row quieter than
   the send button beside it.

   Ink stays navy on every active pill. The board only holds three inks that
   clear AA at this size (navy, blue-deep, teal-deep), so color is carried by
   the dot and the tint instead of the text — subtler, and it survives the
   dark-mode inversion where white becomes the only primary ink. */
.crx-scope-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.crx-scope-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border: none;
    border-radius: var(--crx-radius-full);
    background: transparent;
    color: var(--crx-text-muted);
    font-family: var(--crx-font-body);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.crx-scope-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    /* The glyph carries the scope colour, the label stays navy — same split as
       the dot it replaces, so the four still read as a set rather than four
       differently-coloured words. currentColor lets each icon mix stroked and
       filled parts off one value. */
    color: var(--scope-hue, var(--brand-navy));
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.crx-scope-tab:hover {
    color: var(--crx-text-secondary);
    background: var(--crx-surface-alt);
}

.crx-scope-tab:hover .crx-scope-icon {
    opacity: 0.85;
}

.crx-scope-tab.is-active {
    color: var(--crx-text);
    background: var(--scope-tint, rgba(6, 39, 68, 0.08));
}

.crx-scope-tab.is-active .crx-scope-icon {
    opacity: 1;
}

.crx-scope-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 128, 188, 0.28);
}

/* Board ratio: navy leads, blue and teal are equal accents, sky is the tint */
.crx-scope-tab[data-scope="all"] {
    --scope-hue: var(--brand-navy);
    --scope-tint: rgba(6, 39, 68, 0.08);
}
.crx-scope-tab[data-scope="drugs"] {
    --scope-hue: var(--brand-blue);
    --scope-tint: rgba(31, 128, 188, 0.12);
}
.crx-scope-tab[data-scope="devices"] {
    --scope-hue: var(--brand-teal);
    --scope-tint: rgba(60, 137, 138, 0.12);
}
.crx-scope-tab[data-scope="food"] {
    --scope-hue: var(--brand-sky);
    --scope-tint: rgba(140, 206, 241, 0.22);
}

.crx-input {
    width: 100%;
    border-radius: var(--crx-radius-full);
    border: 2px solid var(--crx-border);
    padding: 12px 20px;
    font-size: 15px;
    font-family: inherit;
    color: var(--crx-text);
    background: var(--crx-surface);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.crx-input::placeholder {
    color: var(--crx-text-muted);
}

.crx-input:focus {
    border-color: var(--crx-primary);
    box-shadow: 0 0 0 3px rgba(31, 128, 188, 0.15);
}

.crx-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--crx-primary);
    color: var(--crx-on-primary, #ffffff);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, transform 0.15s;
}

.crx-send-btn:hover {
    background: var(--crx-primary-dark);
    transform: scale(1.05);
}

.crx-send-btn:active {
    transform: scale(0.95);
}

.crx-disclaimer {
    color: var(--crx-text-muted);
}

/* ===== Suggestion Chips — teal, the secondary accent ===== */
.suggestion-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--crx-radius-full);
    border: 1px solid var(--crx-secondary);
    color: var(--crx-secondary-dark);
    font-family: var(--crx-font-display);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.15s;
}

.suggestion-chip:hover {
    background: var(--crx-secondary);
    color: white;
}

.suggestion-chip:active {
    transform: scale(0.97);
}

/* ===== Utility: Fade In ===== */
.animate-fade-in {
    animation: fade-in 0.2s ease-out;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Focus Indicators (WCAG 2.4.7) ===== */
:focus-visible {
    outline: 3px solid var(--crx-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

:focus:not(:focus-visible) {
    outline: none;
}

.crx-input:focus-visible {
    outline: none; /* uses box-shadow instead */
}

/* ===== Dark Mode (follows system preference) =====
   Same ratio, inverted ground: navy becomes the surface, so the tints
   carry the accent weight that navy carries on white. */
[data-theme="dark"] {
    --p: 81.966% 0.0830 232.28;   /* primary   = sky */
    --pc: 26.689% 0.0657 249.39;
    --s: 84.610% 0.0592 197.43;   /* secondary = mint */
    --sc: 26.689% 0.0657 249.39;
    --a: 57.527% 0.1253 242.10;
    --ac: 100% 0 0;
    --n: 18.170% 0.0165 210.18;
    --nc: 96.844% 0.0042 236.50;
    --b1: 26.689% 0.0657 249.39; /* base = navy */
    --b2: 34.750% 0.0838 248.51;
    --b3: 41.907% 0.0982 247.20;
    --bc: 96.844% 0.0042 236.50;
    --rounded-btn: 2rem;
    --rounded-box: 1rem;

    --crx-primary: var(--brand-sky);
    --crx-primary-dark: #a9dcf5;
    --crx-on-primary: var(--brand-navy);
    --crx-secondary: var(--brand-mint);
    --crx-secondary-dark: var(--brand-mint);
    /* White is the light source in dark mode. Navy stays the ground, so the
       board ratio holds — white does the separating work navy-on-navy could
       not: pure white for primary ink, white-alpha for elevated planes and
       hairlines. Surfaces are white composited over navy, so every plane
       stays on-brand while reading as a distinct layer. */
    --crx-bg: var(--brand-navy);
    --crx-surface: #425b71;      /* white 24% over navy — 2.15:1 off ground */
    --crx-surface-alt: #385269;  /* white 20% over navy */
    --crx-text: #ffffff;
    --crx-text-secondary: #dae6ef;
    --crx-text-muted: #b3c6d6;
    --crx-border: rgba(255, 255, 255, 0.38);      /* 3.37:1 on ground */
    --crx-border-light: rgba(255, 255, 255, 0.14);
    /* Navy, not black — on a navy ground the depth comes from the white
       borders above, so these only need to seat an element, not darken it. */
    --crx-shadow-sm: 0 1px 2px rgba(6, 39, 68, 0.55);
    --crx-shadow-md: 0 6px 16px rgba(6, 39, 68, 0.65);
}

[data-theme="dark"] body {
    background: var(--brand-navy);
}

[data-theme="dark"] .crx-header {
    background: rgba(6, 39, 68, 0.88);
    border-bottom-color: var(--crx-border-light);
}

[data-theme="dark"] .crx-input-area {
    background: rgba(6, 39, 68, 0.92);
    border-top-color: var(--crx-border-light);
}

/* Nav on navy: white takes navy's role, so the current page is marked with a
   white tint rather than the navy one used on the light ground. */
[data-theme="dark"] .crx-nav-link:hover,
[data-theme="dark"] .crx-nav-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .crx-nav-link[aria-current="page"] {
    background: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .crx-nav-cta {
    color: var(--brand-sky);
    background: transparent;
}

[data-theme="dark"] .crx-nav-cta:hover {
    color: var(--brand-navy);
    background: var(--brand-sky);
    border-color: var(--brand-sky);
}

[data-theme="dark"] .crx-nav-sheet {
    background: var(--crx-surface);
    border-bottom-color: var(--crx-border-light);
}

[data-theme="dark"] .crx-nav-sheet a:hover,
[data-theme="dark"] .crx-nav-sheet a[aria-current="page"] {
    background: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .crx-eyebrow {
    color: var(--brand-sky);
}

/* The quote's navy bar would vanish into a navy ground; white carries it,
   as it carries every other navy-role mark in dark mode. */
[data-theme="dark"] .crx-quote {
    border-left-color: #ffffff;
}

[data-theme="dark"] .crx-tile {
    background: var(--crx-surface);
    border-color: var(--crx-border);
}

[data-theme="dark"] .crx-tile-icon {
    color: var(--brand-sky);
}

[data-theme="dark"] .crx-placeholder {
    border-color: var(--brand-sky);
    background: rgba(140, 206, 241, 0.10);
    color: var(--brand-sky);
}

[data-theme="dark"] .crx-cta-band {
    background: var(--crx-surface-alt);
    border-color: var(--crx-border-light);
}

[data-theme="dark"] .crx-footer {
    background: rgba(255, 255, 255, 0.04);
    border-top-color: var(--crx-border-light);
}

/* Company page content blocks in dark mode. Navy-role marks go white, blue
   accents step up to sky, and planes use the white-alpha surfaces. */
[data-theme="dark"] .crx-stat-plus,
[data-theme="dark"] .crx-fig-gaplabel text,
[data-theme="dark"] .crx-pair-item h2,
[data-theme="dark"] .crx-principles li::before,
[data-theme="dark"] .is-live .crx-roadmap-tag {
    color: var(--brand-sky);
    fill: var(--brand-sky);
}

[data-theme="dark"] .crx-fig-line path,
[data-theme="dark"] .crx-fig-line-faint path {
    stroke: var(--brand-sky);
}

[data-theme="dark"] .crx-fig-dot circle {
    fill: var(--brand-sky);
}

[data-theme="dark"] .crx-fig-person circle,
[data-theme="dark"] .crx-fig-person path {
    fill: #ffffff;
}

[data-theme="dark"] .crx-fig-bottle rect {
    stroke: #ffffff;
}

[data-theme="dark"] .crx-sample-q::before {
    background: #ffffff;
    color: var(--brand-navy);
}

[data-theme="dark"] .crx-callout {
    border-left-color: var(--brand-mint);
}

[data-theme="dark"] .crx-roadmap-step.is-live::after,
[data-theme="dark"] .is-live .crx-roadmap-tag em {
    border-color: var(--brand-sky);
    background: var(--brand-sky);
    color: var(--brand-navy);
}

[data-theme="dark"] .crx-roadmap-step.is-live::after {
    box-shadow: 0 0 0 4px rgba(140, 206, 241, 0.18);
}

[data-theme="dark"] .crx-roadmap-step.is-live::before {
    border-left-color: var(--brand-sky);
}

[data-theme="dark"] .crx-notice {
    border-left-color: #ffffff;
}

[data-theme="dark"] .crx-notice-icon {
    color: #ffffff;
}

[data-theme="dark"] .crx-field input:focus,
[data-theme="dark"] .crx-field select:focus,
[data-theme="dark"] .crx-field textarea:focus {
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 3px rgba(140, 206, 241, 0.20);
}

[data-theme="dark"] .crx-doc p.crx-form-error {
    border-color: #f0a396;
    background: rgba(240, 163, 150, 0.10);
    color: #f6c1b8;
}

[data-theme="dark"] .crx-doc .crx-form-success {
    border-color: var(--brand-mint);
    background: rgba(159, 217, 218, 0.10);
}

[data-theme="dark"] .crx-doc .crx-form-success p {
    color: var(--brand-mint);
}


[data-theme="dark"] .crx-doc a:not(.crx-nav-link):not(.crx-nav-cta):not(.crx-btn) {
    color: var(--brand-sky);
}

[data-theme="dark"] .crx-input {
    background: var(--crx-surface);
}

[data-theme="dark"] .crx-input:focus {
    box-shadow: 0 0 0 3px rgba(140, 206, 241, 0.20);
}

/* Scope tabs on navy: white takes the navy role as it does everywhere else in
   dark mode, and the two tints step up to carry the blue and teal accents. */
[data-theme="dark"] .crx-scope-tab:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .crx-scope-tab.is-active {
    color: #ffffff;
}

[data-theme="dark"] .crx-scope-tab:focus-visible {
    box-shadow: 0 0 0 3px rgba(140, 206, 241, 0.35);
}

[data-theme="dark"] .crx-scope-tab[data-scope="all"] {
    --scope-hue: #ffffff;
    --scope-tint: rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] .crx-scope-tab[data-scope="drugs"] {
    --scope-hue: var(--brand-sky);
    --scope-tint: rgba(140, 206, 241, 0.22);
}
[data-theme="dark"] .crx-scope-tab[data-scope="devices"] {
    --scope-hue: var(--brand-mint);
    --scope-tint: rgba(159, 217, 218, 0.22);
}
[data-theme="dark"] .crx-scope-tab[data-scope="food"] {
    --scope-hue: var(--brand-blue);
    --scope-tint: rgba(31, 128, 188, 0.38);
}

/* Logo: wordmark and Rx invert to mist, tagline lifts to sky, capsule
   outline lightens so the mark keeps its contrast on navy */
[data-theme="dark"] .crx-lockup {
    color: #ffffff;
}

[data-theme="dark"] .crx-lockup-tag {
    color: var(--brand-sky);
}

[data-theme="dark"] .crx-pill-outline {
    stroke: #ffffff;
}

[data-theme="dark"] .crx-pill-body {
    fill: var(--brand-navy);
}

[data-theme="dark"] .chat-end .chat-bubble {
    background: var(--brand-blue) !important;
    box-shadow: 0 2px 8px rgba(6, 39, 68, 0.55);
}

[data-theme="dark"] .chat-start .chat-bubble:not([class*="error"]) {
    background: var(--crx-surface-alt) !important;
}

[data-theme="dark"] .chat-start .chat-bubble h1,
[data-theme="dark"] .chat-start .chat-bubble h2,
[data-theme="dark"] .chat-start .chat-bubble h3 {
    color: var(--brand-sky);
}

[data-theme="dark"] .quick-card {
    background: var(--crx-surface);
    border-color: var(--crx-border);
}

/* Hover lifts the plane and brightens the white edge toward the light */
[data-theme="dark"] .quick-card:hover {
    background: #4f687d;
    border-color: rgba(255, 255, 255, 0.72);
}

/* Navy's role inverts to white: the dominant brand color becomes the
   dominant light. Sky and mint stay the tints they are on the board. */
[data-theme="dark"] .label-navy { color: #ffffff; }
[data-theme="dark"] .label-blue { color: var(--brand-sky); }
[data-theme="dark"] .label-teal { color: var(--brand-mint); }
[data-theme="dark"] .accent-navy { background: #ffffff; }

[data-theme="dark"] .shape-1 { background: rgba(140, 206, 241, 0.14); }
[data-theme="dark"] .shape-2 { background: rgba(159, 217, 218, 0.14); }
[data-theme="dark"] .shape-3 { background: rgba(31, 128, 188, 0.28); }
[data-theme="dark"] .shape-4 { background: rgba(140, 206, 241, 0.10); }
[data-theme="dark"] .shape-5 { background: rgba(60, 137, 138, 0.30); }
[data-theme="dark"] .shape-6 { background: rgba(159, 217, 218, 0.10); }

[data-theme="dark"] .suggestion-chip {
    border-color: rgba(159, 217, 218, 0.45);
    color: var(--brand-mint);
}

[data-theme="dark"] .suggestion-chip:hover {
    background: var(--brand-mint);
    color: var(--brand-navy);
}

[data-theme="dark"] #tool-status {
    color: var(--brand-mint);
}

/* ===== Accessibility — Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .landing-shapes {
        display: none;
    }

    .quick-card,
    .landing-entrance,
    .crx-welcome-icon {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===== Mobile: Hide floating shapes on touch ===== */
@media (pointer: coarse) {
    .landing-shapes {
        display: none;
    }
}

/* ===== Mobile: Layout & Touch Targets ===== */
@media (max-width: 640px) {
    .crx-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    .crx-lockup {
        font-size: 21px;
    }

    /* 16px prevents iOS zoom-on-focus */
    .crx-input {
        padding: 10px 16px;
        font-size: 16px;
    }

    .quick-card-content {
        padding: 12px 14px;
    }

    /* Four pills have to clear 320px without wrapping, and the icon is more
       than twice the width of the dot it replaced. */
    .crx-scope-tab {
        padding: 5px 9px;
        font-size: 12px;
        gap: 5px;
    }

    .crx-scope-icon {
        width: 13px;
        height: 13px;
    }

    .crx-scope-tabs {
        gap: 2px;
        margin-bottom: 8px;
    }

    .crx-hero {
        padding: 36px 0 28px;
        margin-bottom: 28px;
    }

    .crx-doc h1 {
        font-size: 30px;
    }

    .crx-lead {
        font-size: 16.5px;
    }

    .crx-doc h2 {
        font-size: 21px;
    }

    .crx-quote {
        font-size: 19px;
        padding-left: 18px;
    }

    .crx-footer-nav {
        gap: 32px;
    }

    .crx-stats {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .crx-stat {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        padding: 12px 16px;
    }

    .crx-stat dt {
        margin-bottom: 0;
        min-height: 0;
    }

    .crx-stat dd {
        font-size: 28px;
        min-width: 84px;
    }

    .crx-figure svg {
        padding: 10px 6px;
    }

    .crx-who-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .crx-pair,
    .crx-form-grid {
        grid-template-columns: 1fr;
    }

    .crx-principles li {
        padding-left: 44px;
    }

    .crx-principles li::before {
        font-size: 22px;
    }

    .crx-notice {
        padding: 16px;
        gap: 12px;
    }

    /* 16px prevents iOS zoom-on-focus */
    .crx-field input,
    .crx-field select,
    .crx-field textarea {
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .crx-lockup {
        font-size: 18px;
    }
}

/* ===== Safe Area for Notch Devices ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .crx-input-area {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
}