@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-overview.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);
}

.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);
}

.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;
}

}