@layer infine.components {
/* Shared width of the right-hand rail — the marginalia column, plus the RC
   logo card and the Single/Grid toggle above it (see connect-nav.css /
   legacy-layout.css), all pinned to this so their edges line up into one
   vertical rail. Defined on the Connect shell so it cascades to all three.
   Narrows in step with the column at the ≤1280 breakpoint below. */
.connect-content {
    --connect-rail-width: 320px;
    /* The Single/Grid switch joins the rail here, so remap the cross-module
       toggle width (legacy-layout.css) onto it — picks up the ≤1280 narrowing
       below for free. */
    --catalogue-toggle-width: var(--connect-rail-width);
}

@media (max-width: 1280px) {
    .connect-content {
        --connect-rail-width: 280px;
    }
}

/* 3-column layout. The column track sizes are transitioned so collapsing the
   product list (left column → thin rail, see below) animates the form column
   claiming the freed width rather than snapping. */
.connect-single-grid {
    display: grid;
    grid-template-columns: 280px 1fr var(--connect-rail-width);
    gap: var(--mantine-spacing-xl);
    padding: 0 var(--mantine-spacing-xl) var(--mantine-spacing-xl);
    align-items: start;
    transition: grid-template-columns 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1280px) {
    .connect-single-grid {
        grid-template-columns: 240px 1fr var(--connect-rail-width);
    }
}

/* Collapsed product list — the left track shrinks to a thin rail (just wide
   enough for the restore button + a vertical label) and the form column takes
   the rest. The rail width (56px) is kept in sync with the `__full` pin-width
   and rail styles in connect-product-list.css. Higher specificity than the
   base + media rules above, so it wins at every breakpoint; the right track
   tracks --connect-rail-width, so no ≤1280 twin is needed here. */
.connect-single-grid[data-list-collapsed="true"] {
    grid-template-columns: 56px 1fr var(--connect-rail-width);
}

/* Right column — marginalia (Tufte-style sidenotes).

   Entries are positioned next to their fields by `align-marginalia!` in
   cljs (measures each helped field-block's offsetTop and sets the matching
   entry's `top`). The column is a relative positioning context; entries
   are absolute. Min-height is set in JS so the column's height matches the
   bottom of the last entry.

   Each entry carries a numbered marker that matches the numeral on the
   field-side anchor chip — the footnote-style pairing disambiguates dense
   clusters at a glance. State colour deliberately lives elsewhere on the
   page (stripe, pills, error chips); the column itself stays chromatic-
   neutral so the right edge of the form reads as calm reference material,
   not another alert surface. Fields that have been filled drain to a
   quieter opacity; hover or focus on either end (field or entry) restores
   the pair to full presence. */
.connect-marginalia-column {
    position: relative;
    /* No top padding: the tips carousel sits flush at the column top so its
       header band lines up with the form column's progress bar. */
    padding-top: 0;
}

/* Wrapper for the compact tips carousel at the very top of the column. Its own
   white-card surface comes from the reused `.co-help` rules
   (connect-bands.css). The padding-bottom is part of the wrapper's border
   box, so `align-marginalia!` (which floors the first entry at this wrapper's
   bottom edge) treats it as the gap before the first guidance entry. */
.connect-marginalia-help {
    padding-bottom: 10px;
}

.connect-marginalia-entry {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    /* `top` is written by `align-marginalia!` on every render; transitioning
       it on the same element also-running an opacity transition causes the
       opacity tween to stall at its start value in Chromium. Snap on `top`
       (the cost is invisible — alignment only shifts when the form layout
       actually changes) and keep the smooth fade on opacity. */
    transition: background-color 0.18s ease,
                opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quiet-mode baseline — the helper text is reference for unfinished work,
   so by default every entry sits as a quiet ghost. The fade is on opacity
   only; layout / numbering stays put so the column doesn't reflow as
   fields change state. Hover and coupled-focus pop it back to full
   strength below. */
.connect-marginalia-entry {
    opacity: 0.32;
}

/* Hover the entry → tint it AND highlight the field. Focus on the field
   feeds in via `data-coupled` from `use-marginalia-coupling!`. */
.connect-marginalia-entry:hover,
.connect-marginalia-entry[data-coupled="true"] {
    background: var(--mantine-color-gray-1);
    opacity: 1;
}

.connect-marginalia-entry__marker {
    /* Mirrors `.connect-field-help-marker` exactly; pairing is carried
       by the numeral and the soft, identical chrome on both ends.
       Rounded-rectangle shape (not a circle): Raleway's digit kerning
       gets visually cramped inside a 18×18 pill at 11px — Open Sans's
       wider, more open figures sit cleanly inside the badge shape. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    margin-top: 2px;
    flex: 0 0 auto;
    border-radius: 4px;
    background: var(--mantine-color-gray-1);
    color: var(--mantine-color-gray-7);
    font-family: var(--mantine-font-family);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    transition: background-color 0.18s ease,
                color 0.18s ease,
                box-shadow 0.18s ease;
}

.connect-marginalia-entry:hover .connect-marginalia-entry__marker,
.connect-marginalia-entry[data-coupled="true"] .connect-marginalia-entry__marker {
    background: var(--infine-text, var(--mantine-color-gray-9));
    color: white;
    box-shadow: 0 0 0 2px var(--mantine-color-gray-0);
}

.connect-marginalia-entry__body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45;
}

.connect-marginalia-entry__title {
    font-size: var(--mantine-font-size-xs);
    font-weight: 600;
    color: var(--infine-text);
    margin-bottom: 2px;
    letter-spacing: 0.01em;
}

.connect-marginalia-entry__help {
    font-size: var(--mantine-font-size-sm);
    color: var(--mantine-color-gray-7);
}

/* Only paragraphs after the first get spacing, so the single-paragraph
   entries (the large majority) keep exactly the box height they had before
   the help text became multi-block. */
.connect-marginalia-entry__para + .connect-marginalia-entry__para {
    margin-top: 0.5em;
}

/* Links come from the datasheet's own Markdown references. They must read as
   links inside quiet marginalia prose without shouting over it, so they take
   the underline rather than a fill of colour. `overflow-wrap` keeps a long
   URL-ish label from widening the 320px rail. */
.connect-marginalia-entry__link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--mantine-color-gray-5);
    overflow-wrap: anywhere;
}

.connect-marginalia-entry__link:hover,
.connect-marginalia-entry__link:focus-visible {
    color: var(--infine-blue);
    text-decoration-color: currentColor;
}

/* Long-note clamp: entries render at most 4 lines of help by default so one
   tall note can't shove every later entry off its field (the alignment pass
   only ever pushes entries DOWN). Hovering the entry — or its field, via
   data-coupled — removes the clamp. Because entries are absolutely
   positioned, the expansion paints OVER the entries below instead of pushing
   them: nothing in the column moves, so peeking is never jumpy. */
.connect-marginalia-entry__help--clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* The expansion is a DUPLICATE card overlaid on the entry, not an unclamp of
   the in-flow text: `align-marginalia!` measures entry heights on every
   render, so an in-place expansion reflows the whole column the moment any
   render lands mid-hover. The in-flow copy stays clamped at all times; this
   overlay paints the full text over it (and over whatever sits below). Being
   a child of the entry, the pointer stays inside `:hover` even on the part
   that extends past the entry's own box. */
.connect-marginalia-entry__overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--mantine-color-gray-1);
}

.connect-marginalia-entry:hover,
.connect-marginalia-entry[data-coupled="true"] {
    z-index: 2;
}

.connect-marginalia-entry:hover .connect-marginalia-entry__overlay,
.connect-marginalia-entry[data-coupled="true"] .connect-marginalia-entry__overlay {
    display: flex;
}

/* Only entries whose clamp is actually cutting something read as a lifted
   card while expanded — the shadow marks "this is overlapping what's below".
   data-overflowing comes from mark-overflowing-entries!; CSS can't observe
   overflow itself. A non-truncated entry's overlay is pixel-identical to the
   entry it covers, so it stays shadowless and invisible as an overlay. */
.connect-marginalia-entry[data-overflowing="true"] .connect-marginalia-entry__overlay {
    box-shadow: var(--mantine-shadow-md);
}

/* Popover-opening variant of the help link: a <button> for a11y, stripped of
   its UA chrome so it sits in the running text exactly like the anchors. */
.connect-marginalia-entry__popover-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.connect-marginalia-popover {
    font-size: var(--mantine-font-size-sm);
    line-height: 1.5;
    color: var(--mantine-color-gray-7);
}

.connect-product-list-count {
    color: var(--infine-blue);
    font-family: var(--mantine-font-family-headings);
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

/* Per-field source attribution under inputs */
.connect-source-line {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 11px;
    color: var(--mantine-color-gray-5);
}

/* The whole attribution as one flex child, so its phrases wrap as ordinary text.
   Each phrase used to be its own flex item, and flex items don't wrap:
   a long attributed-to — a work email plus the org name —
   ran straight out of the field and into the marginalia column beside it. */
.connect-source-attribution {
    flex: 1 1 auto;
    min-width: 0;
    /* An email address carries no space to wrap at,
       so it needs permission to break mid-token — otherwise one long address overflows on its own. */
    overflow-wrap: anywhere;
}

.connect-source-line .user-name {
    color: var(--infine-blue);
    font-weight: 600;
}

/* Field group sections — reuse the .criteria-title pattern from Evaluation,
   with one extra trailing column so the completeness pill anchors the right
   end of the divider line and the hover Expand/Contract buttons sit to its

/* Page placeholder */
.connect-placeholder {
    padding: var(--mantine-spacing-xl);
    text-align: center;
    color: var(--mantine-color-gray-6);
    font-size: var(--mantine-font-size-md);
    line-height: 1.6;
}

.connect-placeholder h3 {
    color: var(--infine-blue);
    margin-top: var(--mantine-spacing-xl);
    font-family: var(--mantine-font-family-headings);
    font-weight: 600;
}


/* Data-service offer at the foot of the product form, on the Overview hero's navy with its orange CTA,
   so the one offer on the page reads apart from the groups to fill in above it. */
.connect-data-service {
    display: flex;
    align-items: center;
    gap: var(--mantine-spacing-xl);
    margin-top: var(--mantine-spacing-xl);
    padding: 22px 26px;
    border-radius: 18px;
    background: var(--co-hero-grad);
    box-shadow: 0 16px 32px -24px rgba(0, 51, 102, 0.52);
}
.connect-data-service__text {
    flex: 1 1 auto;
    min-width: 0;
}
.connect-data-service__title {
    font-family: var(--mantine-font-family-headings);
    font-weight: 600;
    font-size: 17px;
    color: #fff;
}
.connect-data-service__body {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
    text-wrap: pretty;
}
.connect-data-service__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--co-status-orange);
    font-family: var(--mantine-font-family-headings);
    font-weight: 700;
    font-size: 14.5px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s ease, transform 0.18s ease;
}
.connect-data-service__cta svg { transition: transform 0.18s ease; }
.connect-data-service__cta:hover {
    background: color-mix(in srgb, var(--infine-yellow-bright) 94%, white);
    transform: translateY(-1px);
}
.connect-data-service__cta:hover svg { transform: translateX(3px); }
.connect-data-service__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 1100px) {
    .connect-data-service {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--mantine-spacing-sm);
    }
}

}