/**
 * IMM status indicator — component styles for the `wu-imm-status` custom element.
 *
 * WHY THIS IS A STYLESHEET AND NOT BRICKS GLOBAL CLASSES
 * Bricks compiles a global class only for elements that carry its id in
 * `_cssGlobalClasses`, and emits it as `.name.brxe-<element>` — scoped to the Bricks
 * element type. A custom PHP element renders its own inner markup, which no Bricks
 * element owns, so global-class settings never reach it. Verified on the rendered page:
 * with the classes defined, not one `.imm-*` rule was emitted.
 *
 * Every value here is a design token, so colour and spacing stay editable in the Bricks
 * UI (Variables + Palette) even though the rules live in a file. Only the structure is
 * fixed here.
 *
 * Geometry is exact from Figma node 2193:785: 40px nodes, 5px connector, 24px radius.
 * The rail is a flex row whose connectors grow, which reproduces all three of the
 * design's layouts without per-variant positioning:
 *   orange  147 + 50 + 40 + 50 + 40 = 327
 *   blue     40 + 68 + 111 + 68 + 40 = 327
 *   green    40 + 62 + 40 + 62 + 123 = 327
 */

/* ---------- the rail ---------------------------------------------------- */

.imm-rail {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  /* 32.8rem is the design width; the min() stops it overflowing a phone column */
  max-inline-size: min(32.8rem, 100%);
}

.imm-rail__node {
  flex: 0 0 auto;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: 50%;
  background-color: var(--status-track);
}

.imm-rail__track {
  flex: 1 1 0%;
  min-inline-size: 2rem;
  block-size: 0.5rem;
  background-color: var(--status-track);
}

/* ---------- the pill ---------------------------------------------------- */

.imm-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  block-size: 4rem;
  padding-inline: var(--space-24);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  /* Figma renders Inter Extra Bold as a stand-in — Helvetica Neue has no 800 weight,
     so the design intent is the site's normal bold. */
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.imm-pill--orange { background-color: var(--status-orange); }
.imm-pill--blue   { background-color: var(--status-blue); }
.imm-pill--green  { background-color: var(--status-green); }

/* Listing-card variant: sized to sit beside .portfolio-card__tag */
.imm-pill--sm {
  block-size: auto;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  font-size: 1.1rem;
  line-height: 1.4;
  letter-spacing: 0.15rem;
}

/* ---------- the status card on a company profile ------------------------ */

/* Geometry from the supplied 1368x218 spec: the card is 1312 wide (the container), 24
   radius, white with a 2px --ink stroke, and the export's two drop shadows
   (dy10/blur28 @7%, dy1/blur2 @6% on #103F6A) are exactly --shadow-card. */
.imm-status--rail {
  display: flex;
  /* Column at every width: as a row the head took a whole column (148px + the 64px gap),
     which left .imm-status__row only ~1017 of 1229 and capped the statement at ~641 — well
     short of its 75ch. Stacking the head gives the row the full width. */
  flex-direction: column;
  gap: var(--space-48);
  inline-size: 100%;
  padding: var(--space-32);
  border: var(--rule-medium) solid var(--ink);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  box-shadow: var(--shadow-card);
}

.imm-status__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-12);
}

/* Only ever rendered by the rail — the listing cards supply their own label element.
   "IMM STATUS" measures ~150px in the spec, which is Helvetica Bold at 24px with NO
   tracking; the previous 0.08em pushed it ~15px wide. --text-xl resolves to 2.4rem here. */
.imm-status__label {
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-xl);
  text-transform: uppercase;
  /*text-decoration: underline;
  text-decoration-thickness: var(--rule-small);
  text-decoration-color: var(--status-track);
  text-underline-offset: 0.4rem;*/
  /* 1.25 puts the label's box at exactly the 30px icon height, so the head row is the
     icon's own height as in the spec. Inheriting 1.45 made the row 34.8 and pushed the
     rail (and the card's base) 4.8px down. */
  line-height: 1.25;
}

/* The wrapper is both the hover target and the tooltip's positioning context. */
.imm-status__info-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

/* The disc belongs to the icon, not the button — the built-in SVG fills it with
   currentColor, so a library icon or an uploaded SVG drops in without fighting a
   background. */
.imm-status__info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  /* the supplied icon's own fill, as a token so it stays editable */
  color: var(--slate-400);
  line-height: 0;
  cursor: pointer;
  transition: color var(--motion-hover);
}

.imm-status__info:hover,
.imm-status__info[aria-expanded="true"] {
  color: var(--ink);
}

.imm-status__info:focus-visible {
  outline: var(--rule-thick) solid var(--ink);
  outline-offset: 0.2rem;
  border-radius: 50%;
}

.imm-status__info-svg,
.imm-status__info-glyph {
  display: block;
  /* the spec places the mark at its full 30x30 (the listing card scales it down) */
  inline-size: 3rem;
  block-size: 3rem;
  font-size: 3rem;
}

/* ---------- the tooltip ------------------------------------------------- */

/* Floating rather than in flow: it belongs to the control it describes, and in flow it
   would push the KPI cards down every time it opened. */
.imm-tip,
.imm-status__info-wrap .imm-key {
  position: absolute;
  inset-block-start: calc(100% + var(--space-8));
  inset-inline-start: 0;
  z-index: 5;
  /* Wide and shallow: the longest status runs to four lines here instead of the eight
     it took at 42rem, so the panel stays close to the control it belongs to. */
  inline-size: min(62rem, 90vw);
  padding: var(--space-20);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  box-shadow: var(--shadow-card-hover);
  text-align: start;
}

.imm-tip[hidden] {
  display: none;
}

/* In the top layer the panel is positioned against the viewport, so JS sets left/top from
   the button's rect. Without this the UA centres it. */
.imm-tip:popover-open,
.imm-status__info-wrap .imm-key:popover-open {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  overflow: visible;
}

/* The listing card clips its overflow and transforms on hover, so an absolutely
   positioned panel is trapped inside it and `position: fixed` would be caught by the
   transform's containing block. The top layer escapes both. */
.imm-status--pill .imm-tip:not(:popover-open) {
  display: none;
}

/* The status's own tag, so the panel states which colour it is describing. */
.imm-tip__head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  margin-block-end: var(--space-8);
}

.imm-tip__head .imm-pill {
  flex: 0 0 auto;
}

/* A step down from the key's sizes — the tooltip is a glance, not a section. These are
   scoped to .imm-tip so the standalone status key keeps its reading sizes. */
.imm-tip .imm-key__title {
  font-size: var(--text-xl);
  line-height: 1.25;
}

.imm-tip .imm-key__body {
  font-size: var(--text-s);
  line-height: 1.5;
}

/* The gloss sits under the status copy, set apart by a rule and quieter type so it
   reads as a footnote rather than a second paragraph of the status. */
.imm-tip__def {
  margin: var(--space-16) 0 0;
  padding-block-start: var(--space-12);
  border-block-start: var(--rule) solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  line-height: 1.45;
}

/* Sends the reader to the IMM explainer further down the page. Sits under the gloss, so
   the panel reads: status -> what IMM means -> where to read more. */
.imm-tip__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-block-start: var(--space-12);
  color: var(--ink);
  font-weight: 700;
  font-size: var(--text-2xs);
  /* The rule lives on the text span, not the link: a decoration on the <a> paints straight
     through its descendants, and `text-decoration: none` on the arrow cannot lift it. */
  text-decoration: none;
  transition: gap var(--motion-hover);
}

.imm-tip__more-text {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.imm-tip__more:hover,
.imm-tip__more:focus-visible {
  gap: var(--space-12);
}

.imm-tip__more:focus-visible {
  outline: var(--rule-thick) solid var(--ink);
  outline-offset: 0.2rem;
}

.imm-tip__more-arrow {
  line-height: 1;
}

.imm-status__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  /* rail ends at x389, statement starts at x438 */
  column-gap: var(--space-48);
  row-gap: var(--space-16);
}

.imm-status__statement {
  flex: 1 1 0;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 75ch;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  /* same cap height as the label in the spec */
  font-size: var(--text-xl);
  line-height: 1.4;
}

/* ---------- the pill variant on a listing card --------------------------- */

/* One line — "IMM STATUS (i) [ORANGE]" — because a card has no room for the rail's
   stacked head. It wraps rather than overflowing when the column is narrow. */
.imm-status--pill {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.imm-status--pill .imm-status__head {
  gap: var(--space-4);
}

.imm-status--pill .imm-status__label {
  font-size: var(--text-2xs);
  text-decoration: none;
}

.imm-status--pill .imm-status__info-svg,
.imm-status--pill .imm-status__info-glyph {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  font-size: 1.6rem;
}

/* ---------- the key: the info panel AND the Explainer section ----------- */

.imm-key {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

/* An author `display` beats the `hidden` attribute's user-agent `display: none`, so the
   panel would ship open without this. */
.imm-key[hidden] {
  display: none;
}

/* As a standalone section the key is centred under its heading rather than run to the
   full container width, which matches the Figma frame. */
.imm-status--key .imm-key__list {
  max-inline-size: 113.6rem;
  margin-inline: auto;
}

.imm-key__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  margin: 0;
  padding: 0;
  list-style: none;
}

.imm-key__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  column-gap: var(--space-48);
  row-gap: var(--space-16);
}

/* A definite basis, not `auto`: the rail's own `width: 100%` resolves against this, and
   against an auto-width parent it would collapse its connectors to their min-width. */
.imm-key__rail {
  flex: 0 0 32.8rem;
  max-inline-size: 100%;
}

.imm-key__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-8);
  min-inline-size: 0;
  max-inline-size: var(--measure);
}

.imm-key__title {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--heading-xs);
  line-height: 1.2;
}

.imm-key__body {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-l);
  line-height: 1.45;
}

.imm-key__lead { font-weight: 700; }

/* The rail's nodes and pill are `flex: 0 0 auto`, so below the tablet breakpoint the
   328px design width could not shrink into the column it sits in and the last node ran
   past the card's border (272px of children in a 203px rail at 390). Scale the rail's
   parts down together so it keeps the design's proportions instead of overflowing.
   Scoped to `.imm-rail` so the listing card's `.imm-pill--sm` is untouched. */
@media (max-width: 767px) {
  .imm-rail .imm-pill {
    block-size: 2.8rem;
    padding-inline: var(--space-12);
    font-size: var(--text-s);
  }

  .imm-rail__node {
    inline-size: 2.8rem;
    block-size: 2.8rem;
  }

  .imm-rail__track {
    min-inline-size: 1.2rem;
  }
}

/* Below 1024 the rail and the statement stack too.

   This is a breakpoint rather than intrinsic wrapping on purpose: .imm-status__row already
   sets flex-wrap: wrap, but the statement's `flex: 1 1 0` + `min-inline-size: 0` means it
   can always shrink further, so it would squeeze to a sliver rather than ever wrap.

   1024 is not one of the site's Bricks breakpoints (1279 / 991 / 767 / 478), so it cannot
   be expressed through the native breakpoint controls. The KPI grid drops to one column at
   the same width, in style.css. */
@media (max-width: 1024px) {
  .imm-status__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The rail needs about 270px before its connectors collapse, so below the tablet
   breakpoint the key stacks rather than squeezing. */
@media (max-width: 767px) {
  .imm-key__list { gap: var(--space-32); }
  .imm-key__row  { flex-direction: column; }

  /* flex-basis follows the main axis, so the 32.8rem that sets the rail's WIDTH in a row
     becomes its HEIGHT once the row stacks — a 328px gap under every rail. */
  .imm-key__rail { flex-basis: auto; }
}

/* On a dark ground (the profile sections are --bg-dark) the key inverts. */
.section--dark .imm-status--key .imm-key__title,
.section--dark .imm-status--key .imm-key__body {
  color: var(--text-on-dark);
}