/* Global "no coloured icon medallions / no coloured edge strips" override.
   Imported here (and NOT from a page module) because card-align.css is the one
   module stylesheet already linked from BOTH layouts, so the override reaches
   every surface — dashboard and portal/public alike. @import must stay at the
   very top, before any rule. Being an import it cannot cache-bust itself by
   mtime, so BUMP ?v BELOW whenever no-medallion.css changes. */
@import url("no-medallion.css?v=2");

/* ============================================================
   card-align.css — GENERIC "the icon sits on the SAME LINE as its title".

   One small, additive rule set for the shared card/tile patterns, so the
   fix is consistent instead of being re-hacked per module. It is written
   to be FOLDED INTO components.css later (see the handover notes at the
   bottom of this file).

   Deliberately conservative:
     • it only adds ALIGNMENT properties (flex row, centring, gap, a fixed
       icon box) — never colours, never the box model, never padding, never
       stacking. So it cannot fight components.css.
     • the row rules are gated behind :has(), i.e. they apply ONLY to a
       title that actually OWNS an icon. Titles without one are untouched,
       and a browser without :has() simply drops those rules and keeps
       today's inline rendering (clean progressive enhancement).
     • `display:inline-flex` matches the convention admin.css already ships
       CMS-wide (`.card__title{display:inline-flex;align-items:center;gap:8px}`)
       and, unlike `flex`, it stays an inline-level box — so a card whose
       parent is `text-align:center` keeps its centred title.

   RTL-first: logical properties only (margin-inline-*), no left/right, and
   no transforms — so the icon lands on the correct side automatically and
   directional glyphs keep their own .pmu-flip-rtl mirroring.

   Loaded via an @import at the TOP of portal-home.css (module CSS may not
   edit the primunity.css manifest).
   ============================================================ */

/* ------------------------------------------------------------
   1. The inline SVG icon box
   ------------------------------------------------------------
   icon() emits `<svg class="icon …">`, an INLINE replaced element, so by
   default its BOTTOM edge sits on the text baseline — it reads ~3px too
   high and drags the line box's descender gap along with it. Modules have
   been patching that one at a time with ad-hoc `vertical-align:-2px/-3px`.
   This is the shared default: a fixed box that never shrinks, optically
   centred against the text it labels.

   `vertical-align` does not apply to flex/grid items, so this is completely
   inert inside an already-correct row — it can only help the inline runs. */
.icon{flex:0 0 auto}

:where(h1,h2,h3,h4,h5,h6,p,label,dt,dd,summary,legend,figcaption,
       .card__title,.card__head,.card__body,.card__foot,.panel__title) > .icon{
  vertical-align:-.18em;
}

/* ------------------------------------------------------------
   2. A title that owns an icon becomes a single centred row
   ------------------------------------------------------------
   Covers both emit conventions: the class on the <svg> itself
   (`icon … xx-ic`) and a wrapping medallion <span class="xx__ic">. */
.card__title:has(> .icon),
.card__title:has(> [class$="__ic"]),
.card__title:has(> [class$="__icon"]),
.panel__title:has(> .icon){
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  flex-wrap:wrap;
  min-width:0;
}

/* The gap now owns the spacing, so drop the legacy leading-icon margin hack
   (only on the LEADING icon — a trailing/affordance icon keeps its own). */
.card__title:has(> .icon) > .icon:first-child,
.panel__title:has(> .icon) > .icon:first-child{
  margin-inline-end:0;
}

/* Fixed-size icon chips never get squashed by a long title. Scoped to card
   headers so the wildcard cannot touch unrelated `__icon…` containers. */
.card__title > [class$="__ic"],
.card__title > [class$="__icon"],
.card__head  > [class$="__ic"],
.card__head  > [class$="__icon"]{
  flex:0 0 auto;
}

/* ------------------------------------------------------------
   3. Opt-in utility
   ------------------------------------------------------------
   For any label/title that is NOT a .card__title but needs the same
   "glyph beside text, vertically centred" row. */
.icon-row{display:inline-flex;align-items:center;gap:var(--s-2);min-width:0}
.icon-row > .icon{flex:0 0 auto}

/* ============================================================
   HANDOVER — fold the three blocks above into components.css:
     • `.icon{flex:0 0 auto}` + the `:where(headings…) > .icon`
       vertical-align default belong next to the .icon sizing helper
       in base.css (they replace the per-module `vertical-align:-2px/-3px`
       hacks in analytics.css .an-panel__ic, notifications.css
       .ntf-head__ic, portal-plan.css .pplan-panel__ic, …).
     • the `.card__title:has(…)` row + margin reset belong right after
       the existing `.card__title` rule in components.css.
     • `.icon-row` belongs with the other utilities.
   ============================================================ */