/* Shared component CSS (v0.2.0). Uses semantic and component tokens only; load tokens.css first.
   Classes are namespaced .pm-* so they can sit beside a product's own CSS during migration.
   [data-state="hover|focus"] mirrors :hover / :focus-visible so Storybook can show each state;
   products never need it. */
@layer components {

  /* ---- Button ---- */
  /* A border never changes a button's height (DECISIONS 2026-10-07): every button reserves a
     transparent 1px border and gives it back from the padding. */
  .pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pm-button-gap);
    min-height: var(--pm-button-min-height);
    padding: calc(var(--pm-button-padding-y) - 1px) calc(var(--pm-button-padding-x) - 1px);
    border: 1px solid transparent;
    border-radius: var(--pm-button-radius);
    font-family: var(--pm-font-family-sans);
    font-size: var(--pm-type-body-size);
    font-weight: var(--pm-font-weight-semibold);
    line-height: var(--pm-font-line-height-snug);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--pm-duration-fast) ease, box-shadow var(--pm-duration-fast) ease,
      border-color var(--pm-duration-fast) ease, color var(--pm-duration-fast) ease;
  }
  .pm-btn:focus-visible, .pm-btn[data-state="focus"] {
    outline: var(--pm-focus-ring-width) solid var(--pm-color-focus-ring);
    outline-offset: var(--pm-focus-ring-offset);
  }
  /* Disabled is inert: no pointer events, so no hover, press or lift, and no hover shadow or colour change. */
  .pm-btn:disabled, .pm-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; transform: none; transition: none; }

  .pm-btn--primary {
    background: var(--pm-button-primary-bg);
    background-origin: border-box; /* after the shorthand: keeps the gradient out of the transparent border */
    color: var(--pm-button-primary-text);
    box-shadow: var(--pm-button-primary-shadow);
  }
  .pm-btn--primary:hover, .pm-btn--primary[data-state="hover"] { box-shadow: var(--pm-button-primary-shadow-hover); }

  .pm-btn--ghost {
    background: transparent;
    color: var(--pm-color-text-primary);
    border-color: var(--pm-button-ghost-border);
  }
  .pm-btn--ghost:hover, .pm-btn--ghost[data-state="hover"] {
    border-color: var(--pm-button-ghost-border-hover);
    color: var(--pm-color-text-interactive-hover);
  }

  /* Tertiary: 8px on all sides, 36px tall; below the 44px target by design (DECISIONS 2026-10-07). */
  .pm-btn--tertiary {
    background: transparent;
    color: var(--pm-color-text-secondary);
    min-height: 0;
    border-width: 0; /* no outline to reserve, so 8px padding + 20px line = 36px, matching Figma */
    padding: var(--pm-button-tertiary-padding-y) var(--pm-button-tertiary-padding-x);
  }
  .pm-btn--tertiary:hover, .pm-btn--tertiary[data-state="hover"] { color: var(--pm-color-text-interactive-hover); }

  @media (prefers-reduced-motion: no-preference) {
    .pm-btn--primary:hover:not(:disabled), .pm-btn--primary[data-state="hover"] { transform: translateY(-3px) scale(1.02); }
  }

  /* Icons: an svg with .pm-btn__icon, before the label (leading) or after it (trailing). The icon is as tall as the text
     (1em), takes the button's text colour, and does not change the button's height. Mark the svg aria-hidden. */
  .pm-btn__icon { width: 1em; height: 1em; flex-shrink: 0; }

  /* ---- Icon ---- */
  /* An svg from the shared set (dist/icons.svg): <svg class="pm-icon" aria-hidden="true"><use href="icons.svg#pm-icon-mail"/></svg>.
     As tall as the surrounding text, coloured by it. Decorative by default; give a standalone icon a role="img" and aria-label instead. */
  .pm-icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }
  /* Icon-only: a square the same height as a regular button. Needs an aria-label on the button. */
  .pm-btn--icon-only {
    --_h: calc(var(--pm-type-body-size) * var(--pm-font-line-height-snug) + 2 * var(--pm-button-padding-y));
    width: var(--_h); height: var(--_h); padding: 0;
  }
  .pm-btn--icon-only.pm-btn--tertiary {
    --_h: calc(var(--pm-type-body-size) * var(--pm-font-line-height-snug) + 2 * var(--pm-button-tertiary-padding-y));
  }

  /* Phones (860px and narrower): buttons fill the row and lose the hover lift; Tertiary stays compact. */
  @media (max-width: 860px) {
    .pm-btn { width: 100%; padding: calc(var(--pm-button-padding-y) - 1px) calc(var(--pm-space-6) - 1px); }
    .pm-btn--primary:hover, .pm-btn--primary[data-state="hover"] { transform: none; }
    .pm-btn--tertiary { width: auto; padding: var(--pm-button-tertiary-padding-y) var(--pm-button-tertiary-padding-x); }
    .pm-btn--icon-only, .pm-btn--icon-only.pm-btn--tertiary { width: var(--_h); padding: 0; }
  }

  /* ---- Card ---- */
  .pm-card {
    background: var(--pm-card-bg);
    border: 1px solid var(--pm-card-border);
    border-radius: var(--pm-card-radius);
    padding: var(--pm-card-padding);
    color: var(--pm-color-text-primary);
  }
  /* Accent bar: a 2px coloured line along the top edge, following the corner radius. Drawn inside the card (inset shadow), so it never changes the card's size. */
  .pm-card--accent-primary { box-shadow: inset 0 2px 0 var(--pm-color-accent-primary); }
  .pm-card--accent-secondary { box-shadow: inset 0 2px 0 var(--pm-color-accent-secondary); }
  /* Gradient accent: a 3px brand-gradient bar along the top edge, drawn as a background layer inside the border so it follows the corners and never changes the card's size. */
  .pm-card--accent-gradient { background: var(--pm-gradient-brand) 0 0 / 100% 3px no-repeat var(--pm-card-bg); }

  /* ---- Pill (status) ---- */
  .pm-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--pm-space-2);
    padding: var(--pm-space-2) var(--pm-space-4);
    border: 1px solid var(--pm-color-border-subtle);
    border-radius: var(--pm-radius-full);
    background: var(--pm-color-surface-tint);
    color: var(--pm-color-text-secondary);
    font-size: var(--pm-type-small-size);
    letter-spacing: var(--pm-font-tracking-caps);
  }
  /* Interactive pill (filters and toggles): a <button> with aria-pressed. Hover and selected use the secondary accent. */
  .pm-pill--interactive {
    min-height: var(--pm-layout-target-min);
    font-family: var(--pm-font-family-sans);
    cursor: pointer;
    transition: border-color var(--pm-duration-fast) ease, background-color var(--pm-duration-fast) ease, color var(--pm-duration-fast) ease;
  }
  .pm-pill--interactive:hover, .pm-pill--interactive[data-state="hover"] {
    border-color: var(--pm-color-accent-secondary);
    color: var(--pm-color-text-primary);
  }
  .pm-pill--interactive[aria-pressed="true"], .pm-pill--interactive[aria-selected="true"] {
    border-color: var(--pm-color-accent-secondary);
    background: var(--pm-color-accent-secondary-subtle);
    color: var(--pm-color-text-interactive-hover);
  }
  .pm-pill--interactive:focus-visible, .pm-pill--interactive[data-state="focus"] {
    outline: var(--pm-focus-ring-width) solid var(--pm-color-focus-ring);
    outline-offset: var(--pm-focus-ring-offset);
  }
  .pm-pill--interactive:disabled { opacity: .45; pointer-events: none; transition: none; }
  .pm-pill__count { color: var(--pm-color-text-tertiary); font-variant-numeric: tabular-nums; }
  /* tertiary text is under 4.5:1 on the selected tint, so the count steps up to secondary there */
  .pm-pill--interactive[aria-pressed="true"] .pm-pill__count, .pm-pill--interactive[aria-selected="true"] .pm-pill__count { color: var(--pm-color-text-secondary); }
  @media (max-width: 860px) { .pm-pill { font-size: var(--pm-type-caption-size); letter-spacing: 0; } }
  .pm-pill__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--pm-color-status-success);
    box-shadow: var(--pm-shadow-glow-success);
  }

  /* ---- Tag ---- */
  .pm-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--pm-space-2);
    padding: var(--pm-tag-padding-y) var(--pm-tag-padding-x);
    border: 1px solid var(--pm-tag-border);
    border-radius: var(--pm-tag-radius);
    background: var(--pm-tag-bg);
    color: var(--pm-tag-text);
    font-size: var(--pm-type-caption-size);
    letter-spacing: var(--pm-font-tracking-caps);
    white-space: nowrap;
  }

  /* ---- Stat ---- */
  .pm-stat { display: flex; flex-direction: column; gap: var(--pm-space-1); }
  .pm-stat__value {
    font-family: var(--pm-stat-value-typography-family);
    font-size: var(--pm-stat-value-typography-size);
    font-weight: var(--pm-stat-value-typography-weight);
    line-height: var(--pm-stat-value-typography-line-height);
    letter-spacing: var(--pm-stat-value-typography-tracking);
    color: var(--pm-color-text-primary);
  }
  .pm-stat__label { font-size: var(--pm-type-small-size); color: var(--pm-stat-label-color); }

  /* Stat bar: stats side by side with dividers; stacked with rules between on phones. */
  .pm-stat-bar {
    display: flex;
    border: 1px solid var(--pm-color-border-subtle);
    border-radius: var(--pm-radius-lg);
    background: var(--pm-color-surface-card);
  }
  .pm-stat-bar > .pm-stat { flex: 1; padding: var(--pm-space-5) var(--pm-space-6); border-left: 1px solid var(--pm-color-border-subtle); }
  .pm-stat-bar > .pm-stat:first-child { border-left: none; }
  @media (max-width: 860px) {
    .pm-stat-bar { display: block; padding: var(--pm-space-1) var(--pm-space-5); }
    .pm-stat-bar > .pm-stat { padding: var(--pm-space-5) 0; border-left: none; border-bottom: 1px solid var(--pm-color-border-subtle); }
    .pm-stat-bar > .pm-stat:last-child { border-bottom: none; }
    .pm-stat__value { font-size: var(--pm-type-heading-lg-size); }
    .pm-stat__label { font-size: var(--pm-type-caption-size); }
  }

  /* ---- Step ---- */
  ol.pm-steps, ul.pm-checks { list-style: none; margin: 0; padding: 0; }
  .pm-step { --_num: var(--pm-step-num-size); display: flex; gap: var(--pm-space-6); align-items: flex-start; position: relative; padding-bottom: var(--pm-space-12); }
  .pm-step:last-child { padding-bottom: 0; }
  .pm-step__line {
    position: absolute; left: calc(var(--_num) / 2 - 1px); top: var(--_num); bottom: 0;
    width: 2px; background: var(--pm-step-line-color);
  }
  .pm-step:last-child .pm-step__line { display: none; }
  .pm-step__num {
    width: var(--_num); height: var(--_num); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--pm-color-surface-card);
    border: 1px solid var(--pm-color-border-subtle);
    font-family: var(--pm-font-family-display);
    font-size: var(--pm-type-lead-size);
    color: var(--pm-color-text-primary);
    z-index: var(--pm-z-raised);
  }
  .pm-step__title { margin: 0 0 var(--pm-space-1); font: var(--pm-type-heading-sm-weight) var(--pm-type-heading-sm-size)/var(--pm-type-heading-sm-line-height) var(--pm-type-heading-sm-family); color: var(--pm-color-text-primary); }
  .pm-step__body { margin: 0; color: var(--pm-color-text-secondary); }
  @media (max-width: 860px) {
    .pm-step { --_num: var(--pm-space-10); gap: var(--pm-space-4); padding-bottom: var(--pm-space-8); }
  }

  /* ---- Check item ---- */
  .pm-check-row { display: flex; gap: var(--pm-space-4); align-items: center; padding: var(--pm-space-5) 0; border-bottom: 1px solid var(--pm-color-border-subtle); }
  .pm-check-row:last-child { border-bottom: none; }
  .pm-check-row > p { margin: 0; color: var(--pm-color-text-primary); }
  .pm-check {
    width: var(--pm-check-size); height: var(--pm-check-size); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--pm-check-bg);
    color: var(--pm-color-text-on-accent);
    font-size: var(--pm-type-body-lg-size);
    font-weight: var(--pm-font-weight-bold);
  }
  @media (max-width: 860px) {
    .pm-check-row { padding: var(--pm-space-4) 0; }
    .pm-check { font-size: var(--pm-type-body-size); }
  }

  /* ---- Links ---- */
  /* Text link: for links inside running text. Underlined as well as coloured, so colour is never the only cue (SC 1.4.1). */
  .pm-link {
    color: var(--pm-color-text-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.1em;
    border-radius: var(--pm-space-1);
    /* side room for the focus ring; the negative margin cancels it, so the text never moves */
    padding-inline: var(--pm-space-1);
    margin-inline: calc(-1 * var(--pm-space-1));
    transition: color var(--pm-duration-fast) ease;
  }
  .pm-link:hover, .pm-link[data-state="hover"] { color: var(--pm-color-text-interactive-hover); text-decoration-thickness: 2px; }
  .pm-link:focus-visible, .pm-link[data-state="focus"] {
    outline: var(--pm-focus-ring-width) solid var(--pm-color-focus-ring);
    outline-offset: -1px; /* ring sits mostly inside the link's box: short, and clear of neighbouring lines and of the underline */
  }
  .pm-nav-link:focus-visible, .pm-nav-link[data-state="focus"],
  .pm-skip-link:focus-visible, .pm-skip-link[data-state="focus"] {
    outline: var(--pm-focus-ring-width) solid var(--pm-color-focus-ring);
    outline-offset: var(--pm-focus-ring-offset);
  }
  /* External link: put .pm-link__icon (an svg) and a .pm-visually-hidden "(opens in a new window)" inside the link. */
  .pm-link__icon { width: 0.875em; height: 0.875em; margin-inline-start: var(--pm-space-1); vertical-align: -0.1em; flex-shrink: 0; }
  .pm-visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* Nav link: header and section navigation. aria-current="page" marks where you are. */
  .pm-nav-link {
    position: relative;
    display: inline-flex; align-items: center;
    min-height: var(--pm-layout-target-min);
    padding-inline: var(--pm-space-3);
    border-radius: var(--pm-radius-sm);
    color: var(--pm-nav-link-color);
    text-decoration: none;
    transition: color var(--pm-duration-fast) ease;
  }
  .pm-nav-link:hover, .pm-nav-link[data-state="hover"] { color: var(--pm-nav-link-hover); }
  .pm-nav-link[aria-current="page"] { color: var(--pm-nav-link-hover); }
  /* current-page marker: a straight bar under the label, drawn inside the link so it never shifts the label */
  .pm-nav-link[aria-current="page"]::after {
    content: ""; position: absolute; left: var(--pm-space-3); right: var(--pm-space-3); bottom: 0;
    height: 2px; background: var(--pm-color-accent-primary);
  }

  /* Skip link: first focusable element on a page; off-screen until it receives focus. */
  .pm-skip-link {
    position: absolute; left: var(--pm-space-4); top: calc(-1 * var(--pm-layout-target-min) - var(--pm-space-8));
    z-index: var(--pm-z-toast);
    padding: var(--pm-space-3) var(--pm-space-5);
    background: var(--pm-color-surface-card);
    border: 1px solid var(--pm-color-border-accent);
    border-radius: var(--pm-button-radius);
    color: var(--pm-color-text-primary);
    font-weight: var(--pm-font-weight-semibold);
    text-decoration: none;
  }
  .pm-skip-link:focus, .pm-skip-link[data-state="focus"] { top: var(--pm-space-4); }

  /* Windows high-contrast mode drops colours and shadows, so state cues are redrawn with system colours. */
  @media (forced-colors: active) {
    .pm-pill--interactive[aria-pressed="true"], .pm-pill--interactive[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
    .pm-pill--interactive:focus-visible, .pm-pill--interactive[data-state="focus"] { outline-color: Highlight; outline-offset: var(--pm-focus-ring-offset); }
    .pm-nav-link[aria-current="page"]::after { background: Highlight; }
    .pm-card--accent-primary, .pm-card--accent-secondary { border-top: 2px solid CanvasText; }
    .pm-check { border: 1px solid CanvasText; }
  }
}