/*
 * CRAIC Tabs — brand presentation.
 *
 * Wide: a tab strip that WRAPS into further rows rather than clipping (the live Joomla site
 * justified seven tabs across a fixed width and truncated the last to "Appli…" — that failure is
 * why this exists). v1.11.1: a strip beside a floated product-lead photo, or a strip with 7-8 real
 * tabs even at full container width, was overflowing its own box and hard-clipping mid-word with no
 * scroll affordance (`overflow-x:auto` never engaged because nothing told the reader it was there) —
 * wrapping guarantees every tab is always visible, at any width, with no dependency on a runtime
 * script setting `data-overflow`. The active tab is marked by the spectral gradient, a quiet echo of
 * the homepage signature. Narrow: a clean disclosure accordion. No JS: every panel open.
 */

/* The whole widget is a CONTAINED CARD: a hairline border + barely-there lift bound the tab strip
   and its panel into one obvious group, so the product explorer never bleeds into the body copy
   that follows it. The mist strip reads as the card's header; the panel is its body. */
.craic-tabs {
  /* space-6 (not gap-section) so the gap ABOVE the tab block equals the gap BELOW it — the closing
     band sits a space-6 under the tabs, so the tabs sit a space-6 under the content. Balanced. */
  margin-block: 5rem; max-width: none;
  /* On a product page the lead photo floats right beside a short intro (style.css ~L653); with no
     clear here the tab card started rendering INSIDE the float's leftover width (~523px of the real
     902px) and stayed that narrow permanently, hard-clipping the strip after the 3rd tab. The block
     must always start clean, full width, below the float. */
  clear: both;
  border: 1px solid var(--line-ink, rgba(13,14,16,.14));
  border-radius: 2px;
  background: var(--paper, #fff);
  overflow: hidden;                  /* clip the mist header to the rounded corners */
  box-shadow: 0 1px 2px rgba(20, 22, 27, 0.04), 0 12px 32px -24px rgba(20, 22, 27, 0.25);
}

/* ---- Tab strip (wide) = card header ------------------------------------- */
/* display:flex must beat the `hidden` attribute's UA display:none; keep :not([hidden]) so a
   JS-free browser — the case `hidden` exists to serve — never shows a dead strip. */
.craic-tabs__list:not([hidden]) {
  display: flex;
  /* v1.11.1: was nowrap + overflow-x:auto (scroll, never clip) — but an 8-tab strip inside a card
     whose width is set by the surrounding layout (sometimes narrowed further by a floated lead
     photo, see .craic-tabs clear:both above) had nothing telling the reader it could scroll, so it
     read as a hard clip mid-label with 3 whole tabs unreachable. Wrapping needs no runtime affordance
     — every tab is simply visible, in as many rows as the strip needs, at any width. */
  flex-wrap: wrap;
  overflow-x: auto;                  /* belt-and-suspenders: still scrolls if a single tab ever
                                         exceeds the strip's own width outright */
  overflow-y: hidden;
  gap: 0;
  padding: 0 1.25rem;
  background: var(--paper, #F4F4F5);  /* header surface — sets the group apart */
  border-bottom: 1px solid var(--line-ink, rgba(13,14,16,.14));
  margin-bottom: 0;                  /* the panel's own padding provides the gap now */
  /* The native bar sat under the strip as a stray grey rail that looked like a broken element and
     told the reader nothing. Hide it and signal the overflow with a fade instead (below). */
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.craic-tabs__list[hidden] { display: none; }
.craic-tabs__list::-webkit-scrollbar { display: none; }

/* Overflow affordance: the strip fades out at whichever edge still has tabs beyond it, so "there is
   more this way" is visible without a scrollbar. data-overflow is maintained by the runtime; with no
   JS the strip simply doesn't fade, and it still scrolls. */
.craic-tabs__list[data-overflow="end"]   { mask-image: linear-gradient(90deg, #000 88%, transparent 100%); }
.craic-tabs__list[data-overflow="start"] { mask-image: linear-gradient(90deg, transparent 0%, #000 12%); }
.craic-tabs__list[data-overflow="both"]  { mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }

.craic-tabs__list [role="tab"] {
  position: relative;
  appearance: none; background: none; border: 0;
  padding: 0.85rem 1.15rem;
  font-family: var(--font-display, system-ui), system-ui, sans-serif;
  font-size: 0.9rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.005em;
  color: var(--dim-ink, #585B63);
  white-space: nowrap; cursor: pointer; scroll-snap-align: start;
  transition: color 160ms ease;
}
/* Reserve the SELECTED weight's width on every tab. The active tab goes 500 -> 600, which makes it
   measurably wider and pushes every following tab along — clicking through the strip made the whole
   row twitch, and read as uneven spacing. This hidden bold copy fixes each tab's width to its bold
   width, so selection changes weight and colour only, never layout. (::after is taken by the
   active underline, so this uses ::before.) */
.craic-tabs__list [role="tab"]::before {
  content: attr(data-label);
  display: block; height: 0; overflow: hidden;
  font-weight: 600; visibility: hidden; pointer-events: none;
}
.craic-tabs__list [role="tab"]:hover { color: var(--stage, #0D0E10); }
.craic-tabs__list [role="tab"][aria-selected="true"] { color: var(--stage, #0D0E10); font-weight: 600; }

/* Brand-red active underline — the clearest "current tab" signal. (The spectral gradient is
   deliberately ~83% grey, so at tab width it reads as a faint line; red is unambiguous.) */
.craic-tabs__list [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--red, #ee2e24);
}
.craic-tabs__list [role="tab"]:focus-visible {
  outline: 2px solid var(--stage, #0D0E10); outline-offset: -2px; border-radius: 2px;
}

/* ---- Panels = card body ------------------------------------------------- */
.craic-tabs__panel { scroll-margin-top: 6rem; }
/* Tab mode: generous padding gives the active panel room to breathe inside the card. */
.craic-tabs[data-mode="tabs"] .craic-tabs__panel { padding: 3.25rem 2rem; }
.craic-tabs[data-mode="static"] .craic-tabs__panels { padding: 2rem; }
.craic-tabs__panel:focus-visible { outline: 2px solid var(--stage, #0D0E10); outline-offset: -4px; }
.craic-tabs__body > :first-child { margin-top: 0; }
.craic-tabs__body table { width: 100%; }

/* ---- Panel content ------------------------------------------------------ */
/* Panels are a two-column .cols grid (descriptive text | product image), built upstream by
   content-transform.py. Center the two columns to each other so a tall portrait image and a short
   text block don't strand a block of dead space — the "gap" this rewrite set out to kill. */
.craic-tabs__body .cols {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);   /* text gets the larger share */
  align-items: start;                                        /* top-align: on a long feature list the
                                                                image sits at the top, not floating mid-column */
  gap: 3.25rem;
}
/* A text-only panel (e.g. Support) has a single .col and no image, so the reserved image track
   stranded half the panel as dead space. Give a lone column the full width. */
.craic-tabs__body .cols:has(> .col:only-child) { grid-template-columns: 1fr; }
.craic-tabs__body .col { min-width: 0; display: flex; flex-direction: column; justify-content: center; }

/* Quiet every link in a panel: ink text with a brand underline, never red body text (six red
   links stacked read as a warning block). This alone kills the "red wall" for every panel type —
   the definition link, the described-feature links in "More Innovations", the inline sentence links. */
.craic-tabs__body a {
  color: var(--stage, #0D0E10);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: var(--red, #ee2e24); text-underline-offset: 0.18em;
  transition: color 160ms ease;
}
.craic-tabs__body a:hover { color: var(--red, #EE2E24); text-decoration-color: var(--red, #EE2E24); }

/* Pure link lists — every <li> is a lone <a> — are tagged .is-linklist upstream (functions.php).
   These are NAVIGATION links, so they must read as links, not as an accordion. The earlier full-width
   hairline ROWS with a chevron looked exactly like an expandable list — a click promised to expand and
   instead navigated (an affordance contract-break). So: plain underlined text links (the universal
   "this is a link" signal), sized to their text (not full-width rows), with a hover → that says
   "go to page", not "expand". */
.craic-tabs__body ul.is-linklist {
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  display: grid; gap: 0.65rem; justify-items: start;
}
.craic-tabs__body ul.is-linklist li { margin: 0; }
.craic-tabs__body ul.is-linklist li a {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  color: var(--stage, #0D0E10);
  font-family: var(--font-display, system-ui), system-ui, sans-serif;
  font-size: 0.98rem; font-weight: 500; line-height: 1.35;
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--red, #ee2e24) 60%, transparent);
  text-underline-offset: 0.2em;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.craic-tabs__body ul.is-linklist li a::after {
  content: "\2192"; color: var(--red, #ee2e24); font-weight: 600; text-decoration: none;
  opacity: 0; transform: translateX(-0.25rem);
  transition: opacity 160ms ease, transform 160ms ease;
}
.craic-tabs__body ul.is-linklist li a:hover {
  color: var(--red, #EE2E24); text-decoration-color: var(--red, #EE2E24);
}
.craic-tabs__body ul.is-linklist li a:hover::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .craic-tabs__body ul.is-linklist li a::after { transition: none; } }

/* Product image column: NO grey mat. The shot sits on white, centered, grounded by a soft shadow —
   the same clean floating-print treatment used everywhere else. The mat used to fill the column to
   "balance" text and picture, but it read as a grey box around the photo, which the client disliked;
   white space beside a shorter image is quieter than a grey fill. float:none defeats the old Joomla
   align="right" that jammed the image to the edge. */
.craic-tabs__body .col:has(img) {
  align-self: start;                 /* top-align with the text start (see .cols align-items) */
  align-items: center; justify-content: center;
  justify-self: center;              /* grid-native centring — margin-inline:auto didn't take on a
                                        content-sized flex column, so a small shot sat stranded to the
                                        LEFT of a wide track with a void beside it. This centres it. */
}
/* Guard against a page-level rule reaching in here: style.css's `.entry-content .cols > .col:first-
   child { position: sticky }` (the fix for the RIGID .cols component stranding a short supporting
   column beside tall prose) is a plain descendant selector, and a panel's own .cols lives inside
   .entry-content too — so without this it would ALSO make a panel's first column sticky. This file is
   unlayered, so it always wins that one property back regardless of source order. Panels aren't the
   component that bug targets (this file already balances panel image/text columns its own way, see
   above), and a panel is rarely tall enough for sticky to do anything but confuse a reader. */
.craic-tabs__body .col:first-child { position: static; }

/* ---- Long capability list ("Key Features") ------------------------------ */
/* Some panels pair a single product shot with a 20+ item feature list. Beside the image that list
   became a tall thin ribbon and stranded the shot in a column of dead space. When the text column
   carries a long list (14+ items), stop competing for width: stack the panel, flow the list into a
   full-width multi-column capability grid, and drop the product shot below as a centered figure. */
.craic-tabs__body .cols:has(.col > ul:not(.is-linklist) > li:nth-child(14)) {
  grid-template-columns: 1fr;
  gap: 2rem;
}
.craic-tabs__body .cols:has(.col > ul:not(.is-linklist) > li:nth-child(14)) ul:not(.is-linklist) {
  columns: 17rem; column-gap: 3.25rem;
  margin-top: 1.25rem;
}
.craic-tabs__body .cols:has(.col > ul:not(.is-linklist) > li:nth-child(14)) ul:not(.is-linklist) li {
  break-inside: avoid;               /* never split a capability across two columns */
}
/* the shot is now a closing figure, centered, sized to itself — not a full-width empty mat.
   order:1 pins it AFTER the capability grid regardless of which column the source put first, so
   every product page reads the same way: lede -> features -> product shot. (The 2030PV source
   lists text first, the 508PV image first; without this they'd disagree.) */
.craic-tabs__body .cols:has(.col > ul:not(.is-linklist) > li:nth-child(14)) .col:has(img) {
  align-self: center; max-width: 26rem; margin-inline: auto; order: 1;
}
.craic-tabs__body .col img {
  /* !important defeats leftover Joomla inline styles (margin-left:auto jams the shot right;
     stray padding-left/right; width="100%") so the image centres cleanly in its mat. */
  float: none !important; margin: 0 auto !important; padding: 0 !important;
  display: block;
  width: auto !important; max-width: 100%; max-height: 22rem; height: auto;
  border-radius: 2px; background: #fff;
  box-shadow: 0 10px 28px -16px rgba(20, 22, 27, 0.4);
}

/* A panel that is NOT a two-column .cols layout (e.g. the Apollo M "Introduction") had no rule for
   its lone figure, so a tall portrait product shot rendered at full natural height (~700px) and sat
   off-centre — the source sets display:block with no auto margins. Cap and centre it so imagery is
   consistent panel to panel. Lower specificity than `.craic-tabs__body .col img`, so the mat
   treatment inside .cols still wins. */
.craic-tabs__body figure { margin: 1.25rem 0; }
/* LEFT, NOT CENTRED. The note above centres this "so imagery is consistent panel to panel",
   and that is the right instinct aimed at the wrong axis: the COPY in these panels is capped at
   the reading measure and starts at the panel's padding, so a 576px photograph centred in a
   1198px panel puts its middle at x=720 while the paragraph above it runs 121→869. Consistent
   with the other panels, inconsistent with the words beside it. The figure itself is full-width
   (the theme stopped centring it, for the same reason it never centred one inside `.cols`), so
   this is what decides where the picture sits. */
.craic-tabs__body figure > img {
  display: block; margin-inline: 0;
  width: auto; max-width: 100%; max-height: 24rem; height: auto;
  border-radius: 2px;
}

@media (max-width: 760px) {
  .craic-tabs__body .cols { grid-template-columns: 1fr; align-items: stretch; gap: 1.25rem; }
  .craic-tabs__body .col:has(img) { padding: 1.25rem; }
  .craic-tabs__body .col img { max-height: 16rem; }
  .craic-tabs__body figure > img { max-height: 18rem; }
}

/* ---- Disclosure accordion (narrow) ------------------------------------- */
.craic-tabs__heading { font-family: var(--font-display, system-ui), system-ui, sans-serif; margin: 0; }
.craic-tabs__disclosure {
  appearance: none; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; border-top: 1px solid var(--line-ink, rgba(13,14,16,.14));
  padding: 1rem 0;
  font: inherit; font-size: 1.04rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--stage, #0D0E10); text-align: left; cursor: pointer;
}
.craic-tabs__disclosure::after {
  content: ""; flex: 0 0 auto; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms ease;
}
.craic-tabs__disclosure[aria-expanded="true"]::after { transform: rotate(-135deg) translate(-2px, -2px); }
.craic-tabs__disclosure:focus-visible { outline: 2px solid var(--stage, #0D0E10); outline-offset: 2px; }

/* ---- Mode switching ----------------------------------------------------- */
/* data-mode="static" is the server / no-JS rendering: strip hidden, all panels open, headings inert. */
.craic-tabs[data-mode="static"] .craic-tabs__disclosure::after { display: none; }
.craic-tabs[data-mode="static"] .craic-tabs__disclosure { cursor: default; }
/* Tab mode: the per-panel heading is redundant with its tab button. */
.craic-tabs[data-mode="tabs"] .craic-tabs__heading { display: none; }
/* Accordion mode: the card wraps the stacked rows. Inset them, and drop the first row's top rule
   (the card border already draws that line). No last-child bottom rule needed — the card closes it. */
.craic-tabs[data-mode="disclosure"] .craic-tabs__panels { padding: 0 2rem; }
.craic-tabs[data-mode="disclosure"] .craic-tabs__panel:first-child .craic-tabs__disclosure { border-top: 0; }
.craic-tabs[data-mode="disclosure"] .craic-tabs__body { padding-bottom: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .craic-tabs__disclosure::after, .craic-tabs__list [role="tab"] { transition: none; }
}

/* =====================================================================
   Adaptive tab layouts (CPT / [craic_tabs]) — .tabpanel-inner is placed
   inside .craic-tabs__body; the resolved template + link style drive it.

   The panel body is a QUERY CONTAINER: every template below sizes to the
   body's own width (≈48rem in a product page's main column beside the rail,
   ≈74rem in the full-width homepage section), never to the viewport. So one
   set of rules stays balanced whether the tabs are full-width or in a column.
   ===================================================================== */
.craic-tabs__body { container-type: inline-size; container-name: craictab; }
.tabpanel-inner { display: block; }
/* enclose the floated photo so the panel's height includes it */
.tabpanel-inner::after { content: ""; display: block; clear: both; }
/* Every panel's first element starts flush at the top, whatever the template — so switching
   tabs never shifts the content's start position vertically (prevents layout bounce / CLS). */
.tabpanel-inner .tabpanel-text > :first-child { margin-top: 0; }
.tabpanel-media { margin: 0; }
.tabpanel-media img {
  display: block;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(20, 22, 27, .09);
  background: var(--paper, #fff);
}

/* Feature templates FLOAT the photo so the text — a short paragraph OR a long feature list —
   wraps beside it and then fills full width below, instead of stranding empty space under a
   short photo. Widths are a share of the container (capped in rem) so they shrink in a narrow
   main column but never oversize when the tabs run full-width (homepage). */

/* (1) Portrait feature — tall photo floats right. */
.tabfmt--portrait-feature .tabpanel-media {
  float: right; width: min(32%, 20rem);
  margin: .2rem 0 1.5rem 2rem; text-align: center;
}
.tabfmt--portrait-feature .tabpanel-media img { width: auto; max-width: 100%; max-height: 28rem; margin-inline: auto; }

/* (2) Landscape feature — wider photo floats right. */
.tabfmt--landscape-feature .tabpanel-media {
  float: right; width: min(42%, 26rem);
  margin: .2rem 0 1.5rem 2rem;
}
.tabfmt--landscape-feature .tabpanel-media img { width: 100%; height: auto; }

/* (3) Photo aside — small supporting photo floats right, text is primary. The words are the
   first column and the picture the second, in every template that has both: the reader starts
   on the tab's text, and the editor writing that text sees it where it lands (the client's
   note after v1.46.0 — photo first read the wrong way round). */
.tabfmt--photo-aside .tabpanel-media {
  float: right; margin: .2rem 0 1rem 2rem;
}
.tabfmt--photo-aside .tabpanel-media img { width: auto; height: auto; max-width: 12rem; }

/* A panel that is ONE picture and no words (LightBlades' "Results": a 337px spectrum) has no
   text to stand beside, so it is not an aside: no float, and the picture at its own size up to
   the panel's width — not shrunk to 12rem beside an empty column. */
.tabpanel-inner > .tabpanel-media:only-child { float: none; margin: .2rem 0 0; }
.tabpanel-inner > .tabpanel-media:only-child img { max-width: 100%; }

/* (4) Link directory — no photo; full-width intro + link grid. */
.tabfmt--link-directory { grid-template-columns: 1fr; }

/* (5) Compact note — no photo prose. Left-aligned at a readable measure (not a centred outlier).
   Paragraphs stay the SAME size as every other template (standardised); only the CTA is sized up. */
.tabfmt--compact-note { grid-template-columns: 1fr; }
/* The theme's measure, not the sister site's 62rem: on a page with no rail the panel is 1264px
   wide and 62rem set ~110-character lines, where every other paragraph here stops at 68ch. */
.tabfmt--compact-note .tabpanel-text { max-width: var(--measure-block, 62rem); }

/* Call-to-action line — its own second line, sized up, with the brand accent underline. */
.tabpanel-text .tab-cta { margin-top: 2rem; margin-bottom: 0; }
.tabpanel-text .tab-cta a {
  display: inline-block; font-size: 1.3rem; font-weight: 600;
  color: var(--stage, #0D0E10); text-decoration: none;
  border-bottom: 2px solid var(--red, #EE2E24); padding-bottom: 3px;
}
.tabpanel-text .tab-cta a:hover,
.tabpanel-text .tab-cta a:focus-visible { color: var(--red, #EE2E24); }

/* ---- Link rendering -------------------------------------------------
   Chosen by the renderer: `chips` for a genuine pure-link nav list, `flow`
   (clean inline text) for every mixed / short-phrase / feature list.
   feature-list keeps its own cards. DESCENDANT selectors (ul, not > ul) so a
   nested <ul> renders identically to a top-level one — no bullets-vs-chips drift. */
.tabpanel-text ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.tabpanel-text ul ul { margin-top: .25rem; }

/* Chips — pure-link lists only: boxed + arrowed in a responsive grid. The min(100%, …) track floor
   lets a chip shrink to a full row (1-up) when the panel is narrower than the floor, instead of
   overflowing. Compact packs ~4-up on a wide panel; the .chipw--wide variant below widens the track
   so long-label lists (e.g. Raman) flow ~2-up with room to breathe. Auto-picked per tab by label
   length (craic_tab_chipwidth_classify), overridable in the editor. */
.tablinks--chips .tabpanel-text ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .5rem;
}
.chipw--wide.tablinks--chips .tabpanel-text ul {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.tablinks--chips .tabpanel-text li { margin: 0; }
.tablinks--chips .tabpanel-text li > a {
  /* block (not flex) so a long word wraps instead of clipping; arrow pinned right. */
  display: block; position: relative;
  padding: .55rem 1.55rem .55rem .8rem;
  border: 1px solid var(--line-ink, rgba(13,14,16,.14)); border-radius: 6px;
  background: var(--paper, #fff); text-decoration: none; color: var(--stage, #0D0E10);
  overflow-wrap: anywhere; hyphens: auto;
}
.tablinks--chips .tabpanel-text li > a::after {
  content: "\203A"; opacity: .55;
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
}
.tablinks--chips .tabpanel-text li > a:hover,
.tablinks--chips .tabpanel-text li > a:focus-visible { border-color: var(--stage, #0D0E10); }

/* Feature list — a "Term: description" list as tidy cards. */
.tabfmt--feature-list .tabpanel-text > ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem;
}
.tabfmt--feature-list .tabpanel-text > ul > li {
  margin: 0; padding: .8rem 1rem;
  border: 1px solid var(--line-ink, rgba(13,14,16,.14)); border-radius: 6px;
  background: var(--paper, #fff); line-height: 1.5;
}
.tabfmt--feature-list .tabpanel-text > ul > li > strong:first-child { display: block; margin-bottom: .15rem; }
.tabfmt--feature-list .tabpanel-text > ul > li a { color: var(--stage, #0D0E10); text-decoration: none; }
.tabfmt--feature-list .tabpanel-text > ul > li a:hover { text-decoration: underline; }

/* Flow — feature / short-phrase / mixed lists: accent marker, inline underlined links, no boxes.
   Excludes feature-list (which keeps its cards). */
/* ON THIS SITE THE MARKER IS THE THEME'S RED SQUARE, NOT THE SISTER SITE'S CHEVRON. Every list on
   microspectra is marked by the aperture square (`.msa-prose ul`, list-style square); the "›"
   ::before and the hanging indent that makes room for it were drawn as well, so each item carried
   two markers. Measured after the rlta -> craic_tab migration on /products/riq/ and the 508 Coal
   page. The square stays; the chevron and its indent go. */
.tablinks--flow:not(.tabfmt--feature-list) .tabpanel-text li {
  margin: 0 0 .4rem; break-inside: avoid;
}
.tablinks--flow:not(.tabfmt--feature-list) .tabpanel-text li a {
  color: var(--stage, #0D0E10); text-decoration: underline;
  text-decoration-color: var(--red, #EE2E24); text-underline-offset: 2px;
  /* text-indent is INHERITED, and the theme makes a lone link inline-block for its 24px target
     (.craic-tabs__body … > a:only-child). An inline-block inheriting a negative indent shifts its
     own text left over the word before it — "FeaturinLightblades™". Zero it at the link. */
  text-indent: 0;
}
/* Multi-column only when the list runs full-width (no photo beside it): compact-note / link-directory. */
.tabfmt--compact-note.tablinks--flow .tabpanel-text ul,
.tabfmt--link-directory.tablinks--flow .tabpanel-text ul {
  column-width: 15rem; column-gap: 2.5rem;
}

/* ---- Narrow container: the two-column templates stack ---------------
   Container-based (not viewport): fires whenever the PANEL is under 34rem —
   a phone, OR a desktop main column that's been squeezed — so text never
   drops below a readable width beside a photo. */
/* A LANDSCAPE FIGURE IS DATA MORE OFTEN THAN DECORATION — a spectrum, a surface map, a software
   screen — and floated at min(42%, 26rem) in a product page's ~38rem panel it came out ~260px,
   its axis labels unreadable (the v1.46.0 visual review, /products/2030xl/). It stacks above its
   words at its own size, up to the panel's width. Portrait photographs and the photo-aside
   thumbnail are not data and keep their float down to the 34rem stack below. Which tabs are
   data is the tab's own Layout setting (import/feedback-1-fixes.py TAB_LAYOUT). */
/* At EVERY panel width, not only below 48rem: on /products/craic-hardware/ (no rail, a wide
   panel) the surface map still floated right at ~205px among photographs floated left. A data
   figure stacks; the float belongs to photographs (photo-aside, portrait-feature). */
.tabfmt--landscape-feature .tabpanel-media {
  float: none; width: auto; max-width: 100%;
  margin: 0 0 1.5rem;
}
.tabfmt--landscape-feature .tabpanel-media img { display: block; width: auto; max-width: 100%; margin-inline: auto; }
/* A LIST BESIDE A FLOATED PHOTOGRAPH stays a list: as its own block formatting context it sits
   wholly beside the picture instead of wrapping four bullets beside it and the rest beneath
   (/products/craic-software/vitrinite-reflectance/, Key Features). */
.tabfmt--photo-aside .tabpanel-text :is(ul, ol) { display: flow-root; }
@container craictab (max-width: 34rem) {
  .tabfmt--portrait-feature .tabpanel-media,
  .tabfmt--landscape-feature .tabpanel-media,
  .tabfmt--photo-aside .tabpanel-media {
    float: none; width: auto; max-width: 100%;
    margin: 0 0 1.5rem;
  }
  .tabpanel-media img { display: block; max-height: 22rem; margin-inline: auto; }
  /* Stacked, a thumbnail is no longer beside anything: centred and allowed its own width,
     not pinned at 12rem to the left edge with a void beside it (FLEX, 2030XL at 390px). The
     body/inner prefix is SPECIFICITY: `.craic-tabs__body figure > img` (0,1,2) kept the margin
     at 0 and the picture at the left edge. */
  .craic-tabs__body .tabpanel-inner .tabpanel-media img { display: block; margin-inline: auto; }
  .tabfmt--photo-aside .tabpanel-media img { max-width: 100%; }
  /* Stacked, the words still come first: a photograph follows its text, as it does in the
     side-by-side layout, rather than putting a 420px picture between the tab and what it says.
     A data figure (landscape-feature) still leads — it is what the words beneath describe. */
  .tabfmt--photo-aside:has(> .tabpanel-text),
  .tabfmt--portrait-feature:has(> .tabpanel-text) { display: flex; flex-direction: column; }
  .tabfmt--photo-aside > .tabpanel-media,
  .tabfmt--portrait-feature > .tabpanel-media { order: 1; margin: 1.5rem 0 0; }
}
/* Fallback for engines without container queries: unfloat at the phone breakpoint. */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .tabfmt--portrait-feature .tabpanel-media,
    .tabfmt--landscape-feature .tabpanel-media,
    .tabfmt--photo-aside .tabpanel-media {
      float: none; width: auto; max-width: 100%; margin: 0 0 1.5rem;
    }
    .tabpanel-media img { max-height: 22rem; margin-inline: auto; }
  }
}

/* A product Features tab whose body opens with a red standfirst line and a "Key Features*" label
   in the SAME paragraph (…standfirst</span><br><strong>Key Features*</strong>…) rendered them
   touching. Make the standfirst a lead block with space below, and drop the now-redundant <br>. */
.tabpanel-text p > span[style*="red-ink"] {
  display: block; margin-bottom: 1rem;
  font-size: 1.2rem; line-height: 1.4; color: var(--red, #EE2E24);
}
.tabpanel-text p > span[style*="red-ink"] + br { display: none; }

/* A portrait-feature tab whose body is a flow LIST (a tall product shot + a long spec list) laid
   out with the photo floated leaves the single-column list stranding space to the photo's right.
   Give it two top-aligned columns instead — a MULTI-COLUMN list beside the photo — so the list is
   compact and balanced with the photo. Scoped to .tablinks--flow so the homepage chip tabs (which
   are .tablinks--chips) keep their float layout.
   ONLY WHERE THERE IS ROOM FOR TWO COLUMNS. Written unconditionally and after the 34rem stack
   above, it won on a phone: a 284px panel kept a 97px photo column and set the words in the rest,
   "microspectrophot-ometer" broken across lines (Apollo M, the 508 Coal page, at 390px). Below
   34rem the stack applies, as it does to every other photograph. */
@container craictab (min-width: 34.01rem) {
  .tabfmt--portrait-feature.tablinks--flow:has(.tabpanel-text ul) {
    display: grid; grid-template-columns: minmax(0, 1fr) min(34%, 18rem);
    gap: 2rem; align-items: start;
  }
  .tabfmt--portrait-feature.tablinks--flow:has(.tabpanel-text ul) > .tabpanel-media {
    float: none; width: auto; margin: 0; grid-column: 2; grid-row: 1; justify-self: center;
  }
  .tabfmt--portrait-feature.tablinks--flow:has(.tabpanel-text ul) > .tabpanel-text {
    grid-column: 1; grid-row: 1;
  }
  .tabfmt--portrait-feature.tablinks--flow:has(.tabpanel-text ul) .tabpanel-text ul {
    column-width: 13rem; column-gap: 2rem;
  }
}

/* Some imported tab bodies wrap each line in a bare <div> (no margins) instead of <p>/<h>, so a
   bold heading line touches the paragraph under it. Restore the standard spacing so these read the
   same as the <p>/<h> tabs, and drop the empty <figure> left when the image became featured media. */
.tabpanel-text > div { margin: 0 0 1rem; }
.tabpanel-text > div:last-child { margin-bottom: 0; }
.tabpanel-text > div > strong:only-child { display: block; }
.tabpanel-text figure:empty { display: none; }

/* ---------------------------------------------------- the field index inside a panel
   Flattening a nested strip into headed subsections is right, and it left the reader a long
   scroll with no way into it: measured on /solutions/applications/, the UV-Vis-NIR panel is
   3,447px holding seven field subsections, the first of which starts 421px down. Someone who
   works in forensics should not have to scroll past materials science to learn whether
   forensics is covered.

   A row of the section names, not a sidebar and not a stack. It sits above the sections it
   names, wraps to as many lines as it needs, and each entry is a real anchor to a heading id
   the markup already carried. The aperture square marks each one, which is the site's own
   "this is a subject" mark. */
.craic-tabs__index {
  margin: 0 0 3.25rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid rgba(20, 22, 27, 0.12);
}
.craic-tabs__index ul {
  display: flex;
  flex-wrap: wrap;
  /* Seven fields do not fit one 1198px row once each carries its mark and its rule, and they
     should not be squeezed until they do. The row gap is set close to the column gap so a
     wrapped second line reads as the same block continuing rather than as one item orphaned
     under six. */
  gap: 0.85rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.craic-tabs__index li { margin: 0; }
.craic-tabs__index a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  /* THE 24px HIT BOX (WCAG 2.5.8) IS THIS RULE'S TO HOLD. The theme's standalone-link rule
     used to supply it as a side effect and had to stop, because its `display:inline-block`
     was killing the aperture square below; 15px type on 1.4 is a 21px box, three short. */
  padding-block: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--stage, #0D0E10);
  /* A LINK THAT LOOKS LIKE ONE, quietly. Set to `none` these seven field names rendered as a
     row of bold words directly above seven headings of the same names — nothing said the row
     was the way into them, and a reader who does not hover never finds out. The site's prose
     link is a 2px red underline; this is the same idiom at a third of the weight, so the row
     reads as navigation without competing with the chips above it or the headings below. */
  text-decoration-line: underline;
  text-decoration-color: rgba(238, 46, 36, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.craic-tabs__index a::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  flex: 0 0 7px;
  background: var(--red, #ee2e24);
  transform: translateY(-0.15em);
}
.craic-tabs__index a:hover {
  text-decoration-color: var(--red, #ee2e24);
  text-decoration-thickness: 2px;
}
.craic-tabs__index a:focus-visible { outline: 3px solid var(--stage, #0D0E10); outline-offset: 3px; }

/* The jump lands the heading below the sticky masthead rather than under it. */
.craic-tabs__subheading { scroll-margin-block-start: 6.5rem; }

/* ONE COLUMN FOR EVERY SAMPLE PICTURE, and no picture enlarged to fill it.
   MEASURED, all six panels open at 1440: the field subsections' twenty-one pictures came out
   431, 384, 384, 384, 384, 272, 384, 431, 384, 384, 261, 250, 431, 299, 244, 431, 221, 209,
   431, 257 and 211px wide — NINE widths for twenty-one things of the same kind, which a
   reader reads as carelessness rather than as variety. They arrive in three container shapes
   (a figure in a paired column, a bare figure the theme lifts into a reserved column, an
   image loose in a paragraph) and every shape sized differently.

   AND ONE WIDTH FOR THE RASTER IS THE WRONG FIX, which a first attempt made and measurement
   caught: setting every picture to 24rem does produce one width, by ENLARGING nine of them.
   Checked against the media library — six have no original wider than they already are
   (Vitrinite 209px, bonded silicon 211, MEMS contamination 221, Fluorescent Fiber 250,
   Fluorescence 261, Currency Fluorescence 277), so a uniform 24rem raster is those six
   resampled 1.4x to 1.8x, on a page whose whole subject is optical detail. The theme says the
   same thing twelve lines above its own figure rule: a picture never grows past the pixels it
   actually has.

   So the COLUMN is uniform and the picture is not. Every shape reserves the same 24rem and
   every picture sits flush to its trailing edge, which is where the theme's reserved column
   already puts one — so the twenty-one share an edge and a column width, and the six small
   ones stay exactly as sharp as the client's files are.

   WHY THE `!important`s. `.craic-tabs__body .col img` above carries
   `width: auto !important; margin: 0 auto !important`, added to defeat leftover Joomla inline
   styles. An `!important` is only answerable by another one; these two selectors are the more
   specific of the pair, so that defeat still stands everywhere else in the file. */
.craic-tabs__subsection .cols > .col:has(img),
.craic-tabs__subsection > figure:last-child,
.craic-tabs__subsection > p:has(> img) {
  inline-size: 24rem;
  max-inline-size: 100%;
  justify-self: end;
  /* A block in normal flow sits at the leading edge whatever its width, so the paragraph
     shape needs the margin as well as the width — `justify-self` only speaks to the two
     shapes that are grid items. */
  margin-inline-start: auto;
}
/* `:last-child` ON THE FIGURE, because the reserved column can only hold one picture. The
   Raman panel's "Art" subsection has two: one in the flow of the copy and one at the end. The
   end one is what the theme lifts into the reserved column; giving the first one the same
   24rem trailing box put a 250px picture in the middle-right of a 762px copy column at
   x=633-883, aligned with neither the copy beside it nor the series it is not part of. A
   picture inside the copy belongs to the copy and keeps the theme's ordinary figure
   treatment. */
/* THE FLEX CENTRING IS ONE LEVEL UP FROM THE MARGIN. `.col:has(img)` is a column flex
   container set to `align-items: center`, so the FIGURE — not the image — is the item being
   centred: it shrank to its picture's 221px and sat in the middle of the 384px column, and no
   margin on the image inside could move it. Measured, that put the twenty-one right edges at
   nine different x positions between 1232 and 1319. Trailing edge here, so the figure ends
   where the column ends and the image's own margin then has something fixed to sit against. */
.craic-tabs__subsection .cols > .col:has(img) { align-items: flex-end; }
.craic-tabs__subsection :is(figure, p, .col) > img,
.craic-tabs__subsection .cols > .col > figure > img {
  inline-size: auto !important;
  max-inline-size: 100% !important;
  block-size: auto;
  max-block-size: 22rem;
}
/* THE TRAILING MARGIN GOES ONLY WHERE THERE IS A 24rem BOX TO SIT IN. Applied to every
   subsection image it moved the one picture that is NOT part of the series: the Raman panel's
   "Art" subsection has a figure in the flow of its copy as well as the one at its end, that
   figure spans the full 762px copy column, and right-aligning inside it put a 250px picture at
   x=633-883 — the middle of the page, aligned to nothing. A picture inside the copy belongs to
   the copy and starts where the copy starts.
   `display:block` is here because an image loose in a paragraph is INLINE, and `margin:auto`
   on an inline box computes to zero: the rIQ for Glass picture sat at the leading edge of its
   own correctly-placed 384px box, 32px short of the edge every other picture shares. */
.craic-tabs__subsection > p:has(> img) > img {
  display: block;
  margin-inline: auto 0 !important;
}

/* ------------------------------------------------ the instruments a section covers
   A run of link-only blocks above a panel's sections is grouped into one list by
   craic_rlta_kit(); this is what it looks like. Measured before: three <h3> link-headings at
   21px with 40px above each, then a fourth as an 18px <p> — four things of the same kind in two
   sizes, reading as imported markup. As one row of chips they read as what they are, the
   instruments this section's applications are performed on, and each is a real page. */
.craic-tabs__kit {
  /* NOT PROSE, so not capped at the reading measure. The panel's own rule caps every <ul> at
     748px, which is right for a list of sentences and wrong for a row of chips: four chips of
     380-437px each could fit one per row inside that cap, so the "row" was four stacked lines —
     the same stack the grouping set out to remove. */
  max-inline-size: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 3.25rem;
  padding: 0;
  list-style: none;
}
.craic-tabs__kit li { margin: 0; }
.craic-tabs__kit a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(20, 22, 27, 0.18);
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--stage, #0D0E10);
  text-decoration: none;
  transition: border-color 140ms ease;
}
.craic-tabs__kit a::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  flex: 0 0 8px;
  background: var(--red, #ee2e24);
}
/* ONE WEIGHT PER ROW. The client's source marks these four links three ways — three as <h2>
   and the fourth as a <p> whose anchor wraps its text in <strong>. Grouping fixed the
   containers; the <strong> is inside the anchor and survived it, so the fourth chip rendered
   at 700 beside three at 600 and read as the important one, which it is not. The emphasis is
   an inconsistency in the markup rather than a meaning, so it is normalised here in the
   presentation and the client's stored content is left exactly as written. */
.craic-tabs__kit a :is(strong, b),
.craic-tabs__index a :is(strong, b) { font-weight: inherit; }
.craic-tabs__kit a:hover { border-color: var(--stage, #0D0E10); }
.craic-tabs__kit a:focus-visible { outline: 3px solid var(--stage, #0D0E10); outline-offset: 2px; }