@layer infine.components {
/* ==========================================================================
   Connect — shared bands: the "Tips & how-tos" help panel (.co-help*, incl.
   the compact marginalia variant) and the knowledge-base FAQ band (.co-faq*).

   Rendered by infine.connect.help-carousel and infine.connect.ui.faq-band on
   the supplier Overview, the RC supplier roster, and (compact) the form
   marginalia column — so the rules live here, not in any one page's sheet.

   This file loads BEFORE the page stylesheets (same @layer), so a page's own
   placement rules (margins on a caller-supplied class) win equal-specificity
   ties by construction — no compound-selector armoring needed per page.
   ========================================================================== */

/* Shared white-card surface — the bg + border + elevation both bands share
   with the Overview's other white cards (.co-attention / .co-coming keep an
   identical declaration in connect-overview.css). */
.co-faq,
.co-help {
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  box-shadow: var(--co-card-shadow);
}

/* ---- FAQ — headerless full-width teaser ----
   Same white-card family as the Overview boxes, but no heading: just the four
   questions in the larger Raleway headings type, then a footer that REUSES the
   Tips box's knowledge-base footer element (.co-help__foot / .co-help__kb)
   verbatim. Thin column rules (the attention section's idiom) give the
   body-free questions structure. The caller supplies only the placement class. */
.co-faq {
  border-radius: 18px;
  /* No own padding: the question list carries the content inset so the reused
     .co-help__foot band can bleed full-width to the card edges; overflow:hidden
     clips that band to the rounded corners (exactly as .co-help does). */
  overflow: hidden;
}
.co-faq__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* No row gap: the 4 columns sit on one row; the gap is the inter-column gutter
     that the column rules divide. Generous top inset gives the questions room to
     breathe; 0 bottom so the reused footer's own margin-top sets the gap, as in
     the Tips box. */
  gap: 0;
  padding: 36px 26px 0;
}
/* Each question is a link: larger headings type, a touch lighter than a hard
   bold so the questions read as inviting prompts rather than shouting headers.
   display:block makes the whole (stretched) cell the click target; the page's
   blue→bright-blue hover shift is the link affordance, no underline. The column
   rule (and its inset padding) is dropped on the first column. No vertical
   padding — the list inset + the stretched cells handle the breathing room. */
.co-faq__q {
  display: block;
  padding: 0 22px;
  border-left: 1px solid var(--infine-blue-light-fade);
  font-family: var(--mantine-font-family-headings);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--infine-blue);
  text-decoration: none;
  text-wrap: balance;
  transition: color 0.18s ease;
}
.co-faq__q:hover { color: var(--infine-blue-bright); }
.co-faq__q:first-child { padding-left: 0; border-left: none; }
.co-faq__q:last-child { padding-right: 0; }
/* The footer itself is the shared .co-help__foot / .co-help__kb element (defined
   in the Tips-panel section below) — reused as-is, no FAQ-specific footer CSS. */

/* ==========================================================================
   "Tips & how-tos" help panel.

   Same white/blue family as the Overview cards, but deliberately ONE STEP
   BOLDER so it reads as the page's guidance hub rather than another teaser
   card: a larger Raleway title behind a circular brand mark, a deeper
   elevation, and a segmented page indicator.
   ========================================================================== */
.co-help {
  margin-top: 30px;
  border-radius: 20px;
  /* Shares the same surface (bg + border + --co-card-shadow) as the other light
     boxes via the grouped rule above: the pale-blue header now carries the box's
     presence, so the deeper "one step bolder" shadow read as too heavy next to
     the toned-down hero. */
  overflow: hidden;
}

/* ---- title row (always visible, incl. minimized) ---- */
.co-help__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  /* Soft pale-blue band. Gives the header real presence (a clear, branded band,
     not plain white) without the full-navy weight that competed 1:1 with the
     hero — and it steps gently, not starkly, into the white tips area below. The
     gravitas comes from the bold navy title sitting on the tonal field. */
  background: var(--infine-blue-light-fade);
}
.co-help__brand { display: flex; align-items: center; gap: 13px; }
.co-help__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--infine-blue-light-fade);
  flex: 0 0 auto;
}
.co-help__mark img { display: block; }
.co-help__title {
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--infine-blue);
  margin: 0;
}
.co-help__head-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
/* segmented page indicator — one button per page (jumps straight there;
   active = navy). The hit area is taller than the visible 6px bar. */
.co-help__dots { display: flex; align-items: center; gap: 7px; }
.co-help__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.co-help__dot-bar {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  /* muted navy at rest on the pale-blue header, solid navy for the active page */
  background: color-mix(in srgb, var(--infine-blue) 30%, transparent);
  transition: background 0.2s ease;
}
.co-help__dot:hover .co-help__dot-bar { background: color-mix(in srgb, var(--infine-blue) 55%, transparent); }
.co-help__dot--on .co-help__dot-bar { background: var(--infine-blue); }
/* minimize / expand toggle */
.co-help__min-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid var(--infine-blue-light);
  color: var(--infine-blue);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.co-help__min-btn:hover {
  background: #fff;
  border-color: var(--infine-blue);
}

/* ---- collapsible body ----
   No padding on the body itself, so the footer's top border can run the full
   card width; the stage carries the content inset instead. */
.co-help__body { padding: 0; }
.co-help__stage {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 44px 18px 0;
}
/* circular prev / next, sitting at the card edges */
.co-help__nav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
  color: var(--infine-blue);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.co-help__nav:hover {
  background: var(--infine-blue);
  border-color: var(--infine-blue);
  color: #fff;
}
/* viewport: all pages share one grid cell so the box keeps the height of the
   tallest page — switching pages cross-fades in place instead of resizing the
   box (the content below no longer jumps). visibility:hidden keeps the hidden
   pages in layout, so they still contribute to that max height. */
.co-help__viewport {
  flex: 1;
  display: grid;
}
.co-help__page {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.co-help__page--on {
  visibility: visible;
  opacity: 1;
}
/* the three tips per page. No column separators — the framed screenshots plus
   the gutter whitespace divide the columns clearly enough on their own. */
.co-help__tip {
  padding: 0 22px;
}
/* screenshot slot — real image or gray placeholder, same footprint AND same
   framed look (border + pale fill behind), so a real screenshot reads as a
   framed thumbnail rather than floating loose on the card. */
.co-help__shot {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  margin-bottom: 14px;
  object-fit: cover;
  background: var(--infine-blue-bg);
  border: 1px solid var(--infine-blue-light-fade);
}
/* Tip headline. Raleway (headings family) bold navy pairs against the body
   font below — the font/weight/size shift does most of the hierarchy work; a
   slight body softening (see below) finishes it. Sized above
   .co-att__group-title (15px) as the card's own heading, below the 20px section
   titles. */
.co-help__tip-title {
  margin: 0;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--infine-blue);
}
.co-help__tip-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  /* Slightly softened navy so the bold navy title above clearly leads the body.
     color-mix keeps it derived from the brand token, not a hard-coded value. */
  color: color-mix(in srgb, var(--infine-blue) 82%, white);
}

/* ---- real-screenshot treatment: alpha cutout, 3D tilt, lighting, sheen,
   reflection (static — no hover) ----
   Only the tips with a real `:image` use this; the gray placeholder keeps
   the framed `.co-help__shot` look above. The screenshots are tightly-trimmed
   alpha PNGs, so there is no bordered rectangle — the UI fragment floats. Locked
   in the standalone demo (tips-effects-demo.html §17); values mirror it. */

/* Perspective for the tilt lives on the page (the grid of three tips), not the
   viewport: every page carries it, and the inactive pages stay
   visibility:hidden, so the crossfade is unaffected and nothing bleeds through. */
.co-help__page { perspective: 1600px; }

/* Layout slot: a fixed height centres each cutout regardless of its own height
   → aligned captions, even whitespace.
   The bottom margin must clear the reflection, which hangs ~one image-height
   below the cutout — and the cutout (width:86%) scales with the column, so a
   fixed px margin can't keep up (it overlaps the caption on wide screens). A
   percentage margin is resolved against the column width, so it tracks the
   reflection at every width and keeps a steady gap to the caption below. */
.co-help__slot {
  height: 128px;
  margin: 0 auto 28%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image wrapper hugs the image, so the sheen overlay + reflection align to the
   IMAGE box (not the slot). Carries the tilt and the grounding-shadow +
   brand-blue glow lighting. */
.co-help__ph {
  position: relative;
  /* Shrink-wrap to the (height-capped) image rather than a fixed 86% width, so
     the sheen mask (inset:0) and reflection (width:100%) stay aligned to the
     image at any size. max-width still bounds wide cutouts to 86% of the column;
     the height cap that does the actual work lives on .co-help__shot below. */
  width: auto;
  max-width: 86%;
  transform: rotateX(5deg) rotateY(-16deg);
  transform-origin: 62% 50%;
  filter: drop-shadow(-9px -6px 15px rgba(0, 51, 102, 0.22))
          drop-shadow(0 0 17px rgba(0, 107, 214, 0.32));
}

/* The screenshot inside .ph: strip the framed-thumbnail look (border / fill /
   fixed ratio) that the base .co-help__shot rule gives the placeholder — the
   cutout floats at its own natural ratio. */
.co-help__ph .co-help__shot {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* Cap the cutout's rendered height, preserving aspect (width follows). The
     tall fragments (the tooltip card ~100px, the dropdown ~114px) otherwise
     tower over the wide, short cutouts (~45–82px) and trail their reflections
     down toward the captions. 111px reins the tallest in while leaving
     everything already shorter untouched — tuned by eye. Single knob:
     raise/lower max-height. */
  max-height: 111px;
  aspect-ratio: auto;
  object-fit: fill;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Specular sheen: a diagonal light streak masked to the cutout's own alpha (the
   mask url is set inline per image in `tip-card`; only the geometry + gradient
   live here). */
.co-help__sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
  background: linear-gradient(101deg,
              rgba(255, 255, 255, 0) 30%,
              rgba(255, 255, 255, 0.62) 47%,
              rgba(255, 255, 255, 0) 60%);
}

/* Faint flush reflection: a full mirror of the cutout at low flat opacity, with
   no fade mask (by design). top:100% on the tightly-trimmed cutout box keeps it
   flush — no gap. */
.co-help__reflect {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: auto;
  transform: scaleY(-1);
  opacity: 0.09;
  pointer-events: none;
}

/* ---- footer (knowledge-base link) ----
   Full-width top border (the body has no padding); equal vertical padding so the
   link sits centred between that border and the card's bottom edge. 26px left
   inset aligns it under the header title. */
.co-help__foot {
  margin-top: 22px;
  padding: 18px 26px;
  border-top: 1px solid var(--infine-blue-light-fade);
  background: var(--infine-blue-bg);
  /* flex (not a block line-box) so the link's own height defines the band and
     the symmetric padding reads as symmetric — a block line-box adds asymmetric
     leading that left the link looking bottom-heavy. */
  display: flex;
  align-items: center;
}
.co-help__kb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mantine-font-family-headings);
  font-weight: 700;
  font-size: 14px;
  color: var(--infine-blue);
  text-decoration: none;
  transition: color 0.18s ease;
}
.co-help__kb svg { transition: transform 0.18s ease; }
.co-help__kb:hover { color: var(--infine-blue-bright); }
.co-help__kb:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Compact variant — the SAME carousel scaled down for the top of the form
   marginalia column (products single + company data). One tip per page, the
   page dots moved below the stage, no knowledge-base footer, no brand logo, no
   drop shadow. It sits flush at the top of the column (which drops its padding-
   top) so its header band lines up with the form's progress bar. The field-
   specific marginalia entries are floored just beneath it by `align-marginalia!`
   (ui/field.cljs measures `.connect-marginalia-help`'s bottom). The white-card
   surface and the image tilt/sheen/reflection are inherited from the base rules
   above; only dimensions and type scale down. Placed right after the base rules
   so equal-specificity overrides win on source order. */
.co-help--compact {
  margin-top: 0;
  border-radius: 12px;
  /* No elevation here — the box is a quiet reference panel beside the form, not
     a raised card like the Overview hub. The border alone defines it. */
  box-shadow: none;
}

/* header — slimmer; no brand logo (omitted in render), smaller title. White
   (not the Overview's pale-blue band) with a hairline bottom border in the same
   colour as the box border, so it reads as a quiet titled row rather than a
   coloured band. The minimize button border matches the nav buttons. */
.co-help--compact .co-help__head {
  gap: 8px;
  padding: 6px 12px;
  background: #fff;
  border-bottom: 1px solid var(--infine-blue-light-fade);
}
.co-help--compact .co-help__title { font-size: 13px; }
.co-help--compact .co-help__head-right { gap: 6px; }
.co-help--compact .co-help__min-btn {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border-color: var(--infine-blue-light-fade);
}

/* stage — tighter; smaller circular nav buttons hugging the column edges, white
   like the box (not the Overview's pale-blue fill) */
.co-help--compact .co-help__stage { gap: 4px; padding: 10px 8px 0; }
.co-help--compact .co-help__nav { width: 26px; height: 26px; background: #fff; }
/* The base hover fills the button navy and turns the chevron white — invisible
   on the white compact button. Use a quiet hover instead (faint blue tint +
   blue border, chevron stays blue), matching the minimize button's hover. */
.co-help--compact .co-help__nav:hover {
  background: var(--infine-blue-bg);
  border-color: var(--infine-blue);
  color: var(--infine-blue);
}

/* The chevron glyphs render in a 24×24 viewBox; sizing the svg alone leaves
   them visually off-centre in the small round/rounded buttons. Force the icon
   box to fill the button and centre via flex so prev / next / minimize all sit
   dead-centre. */
.co-help--compact .co-help__nav,
.co-help--compact .co-help__min-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-help--compact .co-help__nav svg,
.co-help--compact .co-help__min-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* one tip per page */
.co-help--compact .co-help__page { grid-template-columns: 1fr; }
.co-help--compact .co-help__tip { padding: 0 4px; }

/* image: same alpha-cutout tilt/sheen/reflection, scaled to read clearly in the
   column. `max-width: 100%` (overriding the base 86%) lets the cutout use the
   full tip width; the tall fragments are capped by `max-height`. The negative
   margins pull the cutout up into the slot and the caption up tight beneath it,
   tuned by eye to balance the image against the reflection without wasting
   vertical space. Scoped to compact so the Overview carousel keeps its 86% /
   128px sizing. */
.co-help--compact .co-help__slot { height: 106px; margin: 0 auto -7px; }
.co-help--compact .co-help__ph { max-width: 100%; }
.co-help--compact .co-help__ph .co-help__shot { max-height: 82px; margin-top: -20px; }

/* caption */
.co-help--compact .co-help__tip-title { font-size: 13px; margin-bottom: 2px; }
.co-help--compact .co-help__tip-text { font-size: 12px; line-height: 1.4; }

/* dot row below the stage (replaces the footer band). Holds up to 9 dots:
   small, centred, wrapping only if a future tip count overflows. Bars are a
   hair tall (2px) so the row stays quiet. */
.co-help--compact .co-help__dotrow {
  display: flex;
  justify-content: center;
  padding: 8px 8px;
}
.co-help--compact .co-help__dots { gap: 5px; flex-wrap: wrap; justify-content: center; }
.co-help--compact .co-help__dot { width: 16px; height: 14px; }
.co-help--compact .co-help__dot-bar { height: 2px; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  /* FAQ: below the full 4-up width the column rules can't stay clean across a
     wrap, so drop them and fall back to a gapped 2-col grid. */
  .co-faq__list { grid-template-columns: 1fr 1fr; gap: 22px 40px; }
  .co-faq__q,
  .co-faq__q:first-child,
  .co-faq__q:last-child { padding: 0; border-left: none; }
}
@media (max-width: 880px) {
  .co-faq__list { grid-template-columns: 1fr; }
  .co-faq__q { font-size: 20px; }
  /* Help panel: stack the three tips, drop the inter-column rules. */
  .co-help__page { grid-template-columns: 1fr; gap: 22px; }
  .co-help__tip { padding: 0 8px; }
  .co-help__shot { aspect-ratio: 16 / 7; }
  .co-help__title { font-size: 22px; }
}
}