/* ==========================================================================
   CORTEX CONNECT GUIDE  —  cx-docs-*
   --------------------------------------------------------------------------
   One stylesheet for the guide, loaded by BOTH shells that render it:

     public  /docs/connect/          -> marketing shell (styles.css)
     account /account/docs/connect/  -> account shell   (account.css)

   Why a dedicated file. The guide's partial is shared, but the two shells
   have different stylesheets and only one of them had any cx-docs rules.
   The public page therefore rendered the partial completely unstyled: no
   number chips, and the numbered steps stacked as loose "1" / "2" digits.
   Keeping the guide's CSS in one file that both shells load means the two
   copies cannot drift apart again, and the guide never depends on shell
   internals it does not own.

   Design notes
     - Paper-light, instrument-grade. One accent (Forest Green), everything
       else neutral. Colour is reserved for meaning: the accent marks the
       current section, a live value, or a required field. Nothing glows.
     - Type carries the hierarchy, not boxes. Sections are separated by
       hairlines and space, not by stacking cards. Grouped rows over panels.
     - Monospace means "this is an identifier you will type": slugs, URLs,
       field names, model ids, error codes. Prose stays in Geist.
     - Motion is limited to opacity + transform, is decorative only, and is
       fully disabled under prefers-reduced-motion.

   The tokens below are literal brand values rather than shell variables,
   and deliberately so: --body / --heading / --surface / --green-ink exist
   in account.css but NOT in styles.css, so reading them here would render
   the public copy in fallback black. These values are the shared ground
   both shells agree on.
   ========================================================================== */

.cx-docs {
    /* ---- Ink ramp ---- */
    --cxd-ink:       #272826;              /* Heavy Metal — headings, key values */
    --cxd-body:      #4a4947;              /* running prose */
    --cxd-muted:     #636261;              /* Ironside — secondary */
    --cxd-faint:     #6f6e6c;              /* labels, eyebrows (AA on white) */

    /* ---- One accent: Forest Green ---- */
    --cxd-accent:    #33a425;
    --cxd-accent-d:  #496a33;              /* Chalet Green — accent text needing AA */
    --cxd-accent-i:  #14663a;              /* accent body text, measured AA on white */
    --cxd-tint:      rgba(51, 164, 37, 0.07);
    --cxd-tint-hi:   rgba(51, 164, 37, 0.15);

    /* ---- Surfaces ---- */
    --cxd-panel:     #ffffff;
    --cxd-well:      rgba(39, 40, 38, 0.035);
    --cxd-well-hi:   rgba(39, 40, 38, 0.055);

    /* ---- Hairlines ---- */
    --cxd-line:      rgba(39, 40, 38, 0.09);
    --cxd-line-hi:   rgba(39, 40, 38, 0.16);

    /* ---- Type ---- */
    --cxd-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    /* ---- Motion ----
       One easing for entrances, one for state changes. Apple's guidance:
       springs for anything the user can grab and reverse (none here), eased
       curves for everything the interface decides (all of this). */
    --cxd-ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --cxd-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   SECTION SHELL
   -------------------------------------------------------------------------- */

.cx-docs-section {
    padding: 40px 0;
    border-bottom: 1px solid var(--cxd-line);
    scroll-margin-top: 96px;
}

.cx-docs-section:first-child { padding-top: 4px; }
.cx-docs-section:last-child  { border-bottom: 0; padding-bottom: 8px; }

/* Heading row: number chip, then the title block. The chip is the wayfinding
   anchor, so it aligns with the section's own text baseline, not the top. */
.cx-docs-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}

/* Grid/flex children default to min-width:auto and will not shrink below
   their content, which lets a long <code> push the whole heading row wide. */
.cx-docs-head > div { min-width: 0; }

.cx-docs-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    border-radius: 9px;
    background: var(--cxd-tint);
    color: var(--cxd-accent-i);
    font-family: var(--cxd-mono);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background 180ms var(--cxd-ease-out), color 180ms var(--cxd-ease-out);
}

.cx-docs-head h2 {
    margin: 0;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.021em;   /* larger text needs negative tracking */
    color: var(--cxd-ink);
}

/* The one-line answer that sits under a section title. Optional: only
   sections whose title does not already say it carry one.
   Written as p.cx-docs-lede rather than .cx-docs-lede on purpose: the base
   `.cx-docs p` rule further down is (0,1,1) and would otherwise win the
   margin and font-size back, collapsing the gap under every section title. */
.cx-docs p.cx-docs-lede {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--cxd-muted);
    max-width: 62ch;
}

/* ---- Prose ---- */

.cx-docs p {
    margin: 0 0 15px;
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--cxd-body);
}

.cx-docs p:last-child { margin-bottom: 0; }

.cx-docs strong {
    color: var(--cxd-ink);
    font-weight: 600;
}

.cx-docs a {
    color: var(--cxd-accent-d);
    text-decoration: underline;
    text-decoration-color: rgba(51, 164, 37, 0.35);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 140ms var(--cxd-ease-out), text-decoration-color 140ms var(--cxd-ease-out);
}

.cx-docs a:hover {
    color: var(--cxd-accent-i);
    text-decoration-color: currentColor;
}

.cx-docs a:focus-visible {
    outline: 2px solid var(--cxd-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

.cx-docs h3 {
    margin: 24px 0 10px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.008em;
    color: var(--cxd-ink);
}

/* Plain bullet lists. Square markers, because round bullets at 15.5px read
   as dust on light paper; a 5px rounded square holds its edge. */
.cx-docs ul {
    margin: 0 0 15px;
    padding: 0;
    list-style: none;
}

.cx-docs ul li {
    position: relative;
    margin-bottom: 9px;
    padding-left: 20px;
    font-size: 15.5px;
    line-height: 1.72;
    color: var(--cxd-body);
}

.cx-docs ul li:last-child { margin-bottom: 0; }

.cx-docs ul li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 1.5px;
    background: var(--cxd-accent);
    opacity: 0.5;
}

/* ---- Inline code ----
   Reads as a physical key you could press: hairline, tint, mono. */
.cx-docs code {
    font-family: var(--cxd-mono);
    font-size: 0.85em;
    padding: 1.5px 6px;
    border-radius: 5px;
    background: var(--cxd-tint);
    border: 1px solid var(--cxd-tint-hi);
    color: var(--cxd-accent-d);
    white-space: nowrap;
}

/* Inside a link or heading the chip would fight the surrounding colour. */
.cx-docs a code { color: inherit; }

/* --------------------------------------------------------------------------
   THE REQUEST SPECIMEN — the page's one signature element
   --------------------------------------------------------------------------
   The whole guide reduces to "anything that serves this shape works", so the
   shape is the thesis and it opens the page. It is also the only place the
   guide spends weight: a raised panel with a bright top edge, so it reads as
   a material sitting on the page rather than another box drawn on it. */
.cx-docs-spec {
    margin: 22px 0;
    border-radius: 14px;
    background: var(--cxd-panel);
    border: 1px solid var(--cxd-line-hi);
    /* Inner highlight on the top edge = light catching a raised surface.
       Outer shadow is wide and shallow so it lifts the panel without a halo. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(39, 40, 38, 0.05),
        0 10px 24px -14px rgba(39, 40, 38, 0.22);
    overflow: hidden;
}

.cx-docs-spec-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--cxd-line);
    background: linear-gradient(180deg, var(--cxd-well), transparent);
}

.cx-docs-spec-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.085em;   /* small text needs positive tracking */
    text-transform: uppercase;
    color: var(--cxd-faint);
}

/* Right-aligned pill: the request method, in the one colour the page uses
   for "this is the live bit". */
.cx-docs-spec-method {
    margin-left: auto;
    font-family: var(--cxd-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2.5px 8px;
    border-radius: 999px;
    color: var(--cxd-accent-i);
    background: var(--cxd-tint);
    border: 1px solid var(--cxd-tint-hi);
}

.cx-docs-spec-body {
    padding: 16px;
    font-family: var(--cxd-mono);
    font-size: 13px;
    line-height: 1.85;
    color: var(--cxd-muted);
}

/* A two-column grid rather than <pre> plus padded spaces: the template stays
   normally indented and the label gutter still aligns to the pixel. */
.cx-docs-spec-line {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
}
.cx-docs-spec-line + .cx-docs-spec-line { margin-top: 2px; }

.cx-docs-spec-key { color: var(--cxd-faint); }           /* header names */
.cx-docs-spec-var { color: var(--cxd-accent-d); font-weight: 500; }  /* <base_url> */
.cx-docs-spec-fix { color: var(--cxd-ink); }             /* the fixed tail */

/* --------------------------------------------------------------------------
   ASSURANCE ROWS — promises, guarantees, checklist items
   --------------------------------------------------------------------------
   A single hairline-divided block. Deliberately not a row of cards: these
   are parallel claims about one thing, and boxing each one would imply four
   separate things. */
.cx-docs-assure {
    margin: 20px 0;
    border: 1px solid var(--cxd-line);
    border-radius: 12px;
    overflow: hidden;
}

.cx-docs-assure-row {
    display: flex;
    gap: 13px;
    padding: 15px 17px;
    background: var(--cxd-panel);
}

.cx-docs-assure-row + .cx-docs-assure-row {
    border-top: 1px solid var(--cxd-line);
}

.cx-docs-assure-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 6px;
    background: var(--cxd-tint);
    color: var(--cxd-accent-i);
}

.cx-docs-assure-mark svg { width: 12px; height: 12px; }

.cx-docs-assure-text {
    min-width: 0;
    font-size: 15px;
    line-height: 1.68;
    color: var(--cxd-body);
}

.cx-docs-assure-text b {
    display: block;
    margin-bottom: 2px;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--cxd-ink);
}

/* --------------------------------------------------------------------------
   TRIAGE SPLIT — "what works" against "what does not"
   --------------------------------------------------------------------------
   Asymmetric on purpose (1.35fr / 1fr): the working set is the longer list
   and the one people are here to read. Collapses to one column under 900px. */
.cx-docs-split {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 26px;
    align-items: start;
    margin: 20px 0 0;
}

.cx-docs-group + .cx-docs-group { margin-top: 18px; }

.cx-docs-group-label {
    display: block;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--cxd-faint);
}

/* The providers themselves, as chips. Wrapping rows of mono chips scan far
   faster than the comma sentence they replace, and the eye can count them. */
.cx-docs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cx-docs-chip {
    font-family: var(--cxd-mono);
    font-size: 12px;
    line-height: 1.5;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--cxd-well);
    border: 1px solid var(--cxd-line);
    color: var(--cxd-ink);
    white-space: nowrap;
}

.cx-docs-chip-note {
    font-family: inherit;
    color: var(--cxd-faint);
}

/* The one thing to configure per group. Sits under the chips so the list of
   providers stays the thing your eye lands on. */
.cx-docs p.cx-docs-group-note {
    margin: 9px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cxd-muted);
}

.cx-docs-group-note code { font-size: 11.5px; }

/* The "not yet" side. Muted well instead of a white panel, so it recedes
   the way a caveat should — visible, but never competing with the answer. */
.cx-docs-note {
    padding: 16px 17px;
    border-radius: 12px;
    background: var(--cxd-well);
    border: 1px solid var(--cxd-line);
}

.cx-docs-note-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--cxd-ink);
}

.cx-docs-note-title svg {
    flex: 0 0 auto;
    color: var(--cxd-faint);
}

.cx-docs-note p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--cxd-muted);
    margin-bottom: 10px;
}

.cx-docs-note p:last-child { margin-bottom: 0; }

.cx-docs-note ul li {
    font-size: 14px;
    line-height: 1.65;
    color: var(--cxd-muted);
}

.cx-docs-note code {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--cxd-line);
    color: var(--cxd-accent-d);
}

/* --------------------------------------------------------------------------
   FIELD REFERENCE — the four things the Add-provider dialog asks for
   --------------------------------------------------------------------------
   A definition list that behaves like a table. The field name is a fixed
   gutter so the four descriptions align down one axis and the eye can
   scan them without reading the prose. */
.cx-docs-fields {
    margin: 20px 0 0;
    border-top: 1px solid var(--cxd-line);
}

.cx-docs-field {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid var(--cxd-line);
}

/* The UA gives dd a 40px inline start margin and dl a 1em block margin. Both
   would fight the grid, so they are cleared here rather than at each use. */
.cx-docs-field-name,
.cx-docs-field-body { margin: 0; }

.cx-docs-field-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--cxd-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--cxd-ink);
}

/* Order marker. These four are filled in top-to-bottom in one dialog, so the
   index is real information: it is the position in the form. */
.cx-docs-field-index {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--cxd-faint);
    opacity: 0.7;
}

.cx-docs-field-opt {
    display: inline-block;
    margin-top: 4px;
    font-family: var(--cxd-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cxd-faint);
}

.cx-docs-field-body {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cxd-body);
    min-width: 0;
}

.cx-docs-field-body p { font-size: 14.5px; margin-bottom: 8px; }
.cx-docs-field-body p:last-child { margin-bottom: 0; }

/* A short qualifier after an example value ("that is the Ollama default"). */
.cx-docs-field-hint {
    margin-left: 9px;
    font-size: 13px;
    color: var(--cxd-faint);
}

/* The one-line footnote that closes out a section. Muted, no box: it is a
   rider on the section, not a new thought. */
.cx-docs p.cx-docs-after {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--cxd-faint);
}

/* --------------------------------------------------------------------------
   CONTEXT-WINDOW SCALE
   --------------------------------------------------------------------------
   The one field where both directions fail. A number in a sentence hides
   that; three zones do not. Purely informational, so it carries a real
   accessible label rather than being read out as decoration. */
.cx-docs-scale { margin: 18px 0 20px; }

.cx-docs-scale-track {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--cxd-well-hi);
    border: 1px solid var(--cxd-line);
}

.cx-docs-scale-zone { display: block; }
.cx-docs-scale-low  { flex: 0 0 26%; background: rgba(39, 40, 38, 0.16); }
.cx-docs-scale-ok   { flex: 1;       background: var(--cxd-accent); opacity: 0.55; }
.cx-docs-scale-high { flex: 0 0 26%; background: rgba(39, 40, 38, 0.16); }

.cx-docs-scale-keys {
    display: grid;
    grid-template-columns: 26% 1fr 26%;
    gap: 0;
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cxd-faint);
}

.cx-docs-scale-keys span:nth-child(2) { text-align: center; }
.cx-docs-scale-keys span:nth-child(3) { text-align: right; }

.cx-docs-scale-keys b {
    display: block;
    font-weight: 650;
    color: var(--cxd-muted);
}

/* --------------------------------------------------------------------------
   SEQUENCE — the four steps inside the IDE
   --------------------------------------------------------------------------
   A genuine ordered procedure, so the numbers are earned and the connector
   between them is drawn. Mirrored on a single axis so the path in and the
   path out are the same line. */
.cx-docs-seq {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: cxd-seq;
    position: relative;
}

.cx-docs-seq li {
    counter-increment: cxd-seq;
    position: relative;
    padding: 0 0 20px 42px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--cxd-body);
}

.cx-docs-seq li:last-child { padding-bottom: 0; }

/* The connector. Stops short of the last item so the line does not dangle. */
.cx-docs-seq li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 30px;
    bottom: 6px;
    width: 1px;
    background: var(--cxd-line-hi);
}

.cx-docs-seq li::before {
    content: counter(cxd-seq);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--cxd-accent);
    color: #ffffff;
    font-family: var(--cxd-mono);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cx-docs-seq li b {
    color: var(--cxd-ink);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   TABLES — the CSV column reference
   --------------------------------------------------------------------------
   Real tables, because this is real tabular data. Required columns sort
   first: the common path is "which of these must I type", and the optional
   tail is one level down. */
.cx-docs-table-wrap {
    margin: 16px 0 26px;
    border: 1px solid var(--cxd-line);
    border-radius: 12px;
    overflow-x: auto;
    background: var(--cxd-panel);
}

.cx-docs-table-wrap:last-child { margin-bottom: 0; }

.cx-docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.cx-docs-table caption {
    padding: 13px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--cxd-faint);
    border-bottom: 1px solid var(--cxd-line);
    background: linear-gradient(180deg, var(--cxd-well), transparent);
    white-space: nowrap;
}

.cx-docs-table th,
.cx-docs-table td {
    padding: 11px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--cxd-line);
    line-height: 1.6;
}

.cx-docs-table tr:last-child td { border-bottom: 0; }

.cx-docs-table th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--cxd-faint);
    background: var(--cxd-well);
    white-space: nowrap;
}

/* Column one is always an identifier. */
.cx-docs-table td:first-child {
    font-family: var(--cxd-mono);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cxd-ink);
    white-space: nowrap;
}

.cx-docs-table td:last-child { color: var(--cxd-muted); }

/* Required rows get the accent rail. Scannable in one pass. */
.cx-docs-table tr[data-required] td:first-child {
    box-shadow: inset 2px 0 0 var(--cxd-accent);
    padding-left: 14px;
}

.cx-docs-table code {
    font-size: 11.5px;
    padding: 1px 5px;
}

/* A short qualifier beside a field name, e.g. "default 128000". */
.cx-docs-table .cx-docs-def {
    font-family: var(--cxd-mono);
    font-size: 11.5px;
    color: var(--cxd-faint);
}

/* --------------------------------------------------------------------------
   RULES — quotas, URLs, headers
   -------------------------------------------------------------------------- */
.cx-docs-rules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;                        /* the gap IS the hairline */
    margin: 20px 0 0;
    border: 1px solid var(--cxd-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--cxd-line);
}

.cx-docs-rule-col {
    padding: 16px 17px;
    background: var(--cxd-panel);
}

.cx-docs-rule-col ul li {
    font-size: 13.5px;
    line-height: 1.62;
    margin-bottom: 10px;
    padding-left: 17px;
}

.cx-docs-rule-col ul li::before {
    top: 8px;
    width: 4px;
    height: 4px;
}

.cx-docs-rule-col code {
    font-size: 11.5px;
    padding: 1px 5px;
    white-space: normal;
    word-break: break-word;
}

.cx-docs-rule-col ul li:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   FLOW — submitting a provider for review
   -------------------------------------------------------------------------- */
.cx-docs-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 20px 0 22px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--cxd-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--cxd-line);
    counter-reset: cxd-flow;
}

.cx-docs-flow li {
    counter-increment: cxd-flow;
    position: relative;
    padding: 17px 18px 17px 18px;
    background: var(--cxd-panel);
}

.cx-docs-flow-n {
    display: block;
    margin-bottom: 9px;
    font-family: var(--cxd-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cxd-accent-i);
}

.cx-docs-flow li b {
    display: block;
    margin-bottom: 5px;
    font-size: 14.5px;
    font-weight: 650;
    color: var(--cxd-ink);
}

.cx-docs-flow li span:last-child {
    display: block;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--cxd-muted);
}

/* The last node is the outcome rather than another step, so it is tinted and
   its label changes. Same shape, different kind of thing. */
.cx-docs-flow li:last-child { background: var(--cxd-tint); }
.cx-docs-flow li:last-child span:last-child { color: var(--cxd-accent-i); }

/* --------------------------------------------------------------------------
   TROUBLESHOOTING — symptom, then cause
   --------------------------------------------------------------------------
   Kept visible rather than collapsed into accordions: people arrive here by
   Ctrl+F for an error string, and an accordion hides exactly what they are
   searching for. Hierarchy plus the error chip do the scanning instead. */
.cx-docs-qa {
    margin: 20px 0 0;
    border-top: 1px solid var(--cxd-line);
}

.cx-docs-qa-item {
    padding: 17px 0;
    border-bottom: 1px solid var(--cxd-line);
}

.cx-docs-qa-item:last-child { border-bottom: 0; }

/* Written with the extra .cx-docs so it outranks the base `.cx-docs h3`
   rule below, which is (0,1,1) and would otherwise reinstate a 24px top
   margin on every question. */
.cx-docs .cx-docs-qa-q {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.006em;
    color: var(--cxd-ink);
}

/* Error codes are identifiers, so they are mono and chipped. Reading the
   list becomes "find the chip that matches what I saw". */
.cx-docs-qa-code {
    font-family: var(--cxd-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--cxd-well);
    border: 1px solid var(--cxd-line);
    color: var(--cxd-muted);
    white-space: nowrap;
}

.cx-docs-qa-item p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cxd-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   COPY AFFORDANCE
   --------------------------------------------------------------------------
   One, and only one, on the page. A copy button earns its place where the
   value is something you would otherwise retype by hand (a base URL); it
   would be noise anywhere else. Feedback fires on the causal event. */
.cx-docs-copyable {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

.cx-docs-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--cxd-line);
    border-radius: 6px;
    background: var(--cxd-panel);
    color: var(--cxd-faint);
    cursor: pointer;
    transition:
        color 140ms var(--cxd-ease-out),
        border-color 140ms var(--cxd-ease-out),
        background 140ms var(--cxd-ease-out),
        transform 90ms var(--cxd-ease-out);
}

.cx-docs-copy:hover {
    color: var(--cxd-accent-i);
    border-color: var(--cxd-tint-hi);
    background: var(--cxd-tint);
}

/* Press feedback on pointer-down feel: a 1px push, no duration games. */
.cx-docs-copy:active { transform: scale(0.94); }

.cx-docs-copy:focus-visible {
    outline: 2px solid var(--cxd-accent);
    outline-offset: 2px;
}

.cx-docs-copy svg { width: 13px; height: 13px; }
.cx-docs-copy .cx-docs-copy-tick { display: none; }

.cx-docs-copy[data-copied] {
    color: var(--cxd-accent-i);
    background: var(--cxd-tint);
    border-color: var(--cxd-tint-hi);
}

.cx-docs-copy[data-copied] .cx-docs-copy-glyph { display: none; }
.cx-docs-copy[data-copied] .cx-docs-copy-tick  { display: block; }

/* Hit area. A 24px chip is the right size for a mouse, which lands where it
   is aimed, and the wrong size for a finger, which does not: it measured
   24x24 on a 390px viewport, well under the 44px a finger needs. Growing the
   control itself would inflate the line box it sits in, so the visual stays
   exactly as designed and only the hit area grows, via a transparent
   pseudo-element centred on the chip. It carries no content and is not
   announced, and the two elements it overlaps are a code value and a hint,
   neither of them interactive, so nothing else loses its clicks.

   Deliberately not behind @media (pointer: coarse): the chip is easier to
   hit with any pointer, and gating it would silently do nothing on a touch
   laptop or any device that also reports a mouse. */
.cx-docs-copy {
    position: relative;
}
.cx-docs-copy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   CONTENTS LIST
   --------------------------------------------------------------------------
   The two shells list the sections differently and both are legitimate: the
   public page uses the site's sticky rail (.legal-toc, styled by styles.css)
   because it has a whole column to spare, while the account shell renders a
   wrapping strip above the guide because its content column is narrower.
   Only the strip lives here; the rail stays with the shell that owns it. */
.cx-docs-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 7px;
    padding: 13px 15px;
    margin-bottom: 22px;
    border: 1px solid var(--cxd-line);
    border-radius: 12px;
    background: var(--cxd-panel);
}

.cx-docs-toc a {
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cxd-muted);
    text-decoration: none;
    transition: color 160ms var(--cxd-ease-out), background 160ms var(--cxd-ease-out);
}

.cx-docs-toc a:hover { color: var(--cxd-accent-i); background: var(--cxd-tint); }

/* Written as .cx-docs-toc a.active rather than relying on the shell's own
   .active rule: this list is shared, and it should not depend on whichever
   stylesheet happens to be loaded around it. */
.cx-docs-toc a.active {
    color: var(--cxd-accent-i);
    background: var(--cxd-tint);
}

.cx-docs-toc a:focus-visible,
.legal-toc-link:focus-visible {
    outline: 2px solid var(--cxd-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   ENTRANCE
   --------------------------------------------------------------------------
   Opacity and a short rise, nothing else. Gated on html.cx-anim, which an
   inline guard in <head> sets before first paint, and only when motion is
   welcome. The gating is what makes this safe without scripting: no guard,
   no class, no hiding, and the guide renders fully visible.

   It is NOT safe on its own when scripting is on but the behaviour file does
   not arrive. The guard sets the class, so these rules hide every reveal
   element, and connect-docs.js is what un-hides them - nothing else would.
   Blocking that one request left all 31 elements at opacity 0: a page of
   invisible sections caused by one failed file. So the guard arms a failsafe
   timer and the script stands it down once the observer is actually running.
   If the timer ever fires it sets html.cx-fallback and drops cx-anim, which
   is the rule at the end of this block. */
html.cx-anim .cx-docs [data-cxd-reveal] {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
}

html.cx-anim .cx-docs [data-cxd-reveal].cx-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
        opacity 520ms var(--cxd-ease-out),
        transform 520ms var(--cxd-ease-out);
    transition-delay: var(--cxd-delay, 0ms);
}

/* The behaviour file did not arrive in time. The guide is a reference, so
   the content wins: hide nothing. The copy chips go with it, because a
   button that copies nothing is worse than no button - it announces "Copy
   the Ollama base URL" and then does not. Hidden rather than removed so the
   document the server sent stays the document in the DOM. */
html.cx-fallback .cx-docs [data-cxd-reveal] {
    opacity: 1;
    transform: none;
}
html.cx-fallback .cx-docs-copy {
    display: none;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

/* The two-up splits fold to one column well before the shell's own 768px
   breakpoint, because a 168px field gutter plus prose stops being readable
   while the shell still thinks there is room. */
@media (max-width: 900px) {
    .cx-docs-split { grid-template-columns: 1fr; gap: 20px; }
    .cx-docs-rules { grid-template-columns: 1fr; }
    .cx-docs-flow  { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .cx-docs-section { padding: 30px 0; }
    .cx-docs-section:first-child { padding-top: 0; }

    .cx-docs-head { gap: 11px; margin-bottom: 14px; }
    .cx-docs-head h2 { font-size: 21px; }
    .cx-docs-num { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }

    .cx-docs-lede { font-size: 15px; }
    .cx-docs p,
    .cx-docs ul li { font-size: 15px; }

    /* Field name moves above its description instead of beside it. */
    .cx-docs-field {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 14px 0;
    }

    .cx-docs-spec-body { font-size: 12px; padding: 14px; }

    .cx-docs-scale-keys {
        grid-template-columns: 1fr;
        gap: 6px;
        text-align: left;
    }
    .cx-docs-scale-keys span:nth-child(2),
    .cx-docs-scale-keys span:nth-child(3) { text-align: left; }

    .cx-docs-table { font-size: 12.5px; }
    .cx-docs-table th,
    .cx-docs-table td { padding: 10px 12px; }
    .cx-docs-table td:first-child { white-space: normal; }

    .cx-docs-seq li { padding-left: 38px; font-size: 14.5px; }
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
    .cx-docs-section { border-color: #ddd; page-break-inside: avoid; }
    .cx-docs-spec,
    .cx-docs-assure,
    .cx-docs-table-wrap,
    .cx-docs-rules,
    .cx-docs-flow,
    .cx-docs-note { box-shadow: none; }
    .cx-docs-copy { display: none; }
    html.cx-anim .cx-docs [data-cxd-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY PREFERENCES
   -------------------------------------------------------------------------- */

/* Reduced motion: keep the hierarchy the transitions were expressing, drop
   the movement. A cross-fade is the non-vestibular equivalent of a rise. */
@media (prefers-reduced-motion: reduce) {
    .cx-docs *,
    .cx-docs *::before,
    .cx-docs *::after {
        transition-duration: 0.01ms !important;
    }
    html.cx-anim .cx-docs [data-cxd-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* More contrast: hairlines become real borders and muted text darkens, so
   the grouping the layout depends on survives a low-contrast display. */
@media (prefers-contrast: more) {
    .cx-docs {
        --cxd-line:    rgba(39, 40, 38, 0.28);
        --cxd-line-hi: rgba(39, 40, 38, 0.45);
        --cxd-body:    #33322f;
        --cxd-muted:   #4a4947;
        --cxd-faint:   #55534f;
    }
    .cx-docs-assure,
    .cx-docs-table-wrap,
    .cx-docs-rules,
    .cx-docs-flow,
    .cx-docs-note,
    .cx-docs-spec { border-width: 1.5px; }
}