/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


:host {
  display: grid;
  grid-template-rows: subgrid;
  /* 6, not 5: the optional `note` row (empty/collapsed when unused) needs
     a real subgrid track too — an item placed past the end of a subgrid's
     inherited tracks doesn't get its own new row, it overlaps the last
     one instead. */
  grid-row: span 6;
  row-gap: var(--elvaio-space-04);
  position: relative;
  padding: clamp(1.5rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.5rem) 1.5rem;
  background: var(--elvaio-color-card);
  /* Both this card's own backgrounds are light; set text color explicitly
     rather than letting slotted content inherit an ambient color from
     wherever the card happens to be placed (e.g. nested inside an inverse
     `ds-card`, which would otherwise leak near-white text onto this light
     background, see axe finding this fixes). */
  color: var(--elvaio-color-text);
  border: 1.5px solid var(--elvaio-color-border-decorative);
  border-radius: var(--elvaio-radius-card);
}

:host([featured]) {
  background: var(--elvaio-color-accent-soft);
  border: 2px solid var(--elvaio-color-text);
}

/* Ink background + cream text regardless of `featured`: the reference only
   swaps to a gold flag (plus a ring) when the whole card sits on a dark
   band, a context this component doesn't have today. Kept small and
   subtle — no shadow/ring by default. */
.flag {
  position: absolute;
  top: calc(-1 * var(--elvaio-space-04));
  left: var(--elvaio-space-05);
  background: var(--elvaio-color-text);
  color: var(--elvaio-color-text-inverse);
  font-family: var(--elvaio-font-body);
  font-weight: var(--elvaio-font-weight-button);
  font-size: var(--elvaio-font-size-caption);
  /* Not the inherited 1.65 body line-height: that reads as roughly double
     the intended vertical padding on a single short line of pill text. */
  line-height: 1;
  padding: var(--elvaio-space-02) var(--elvaio-space-03);
  border-radius: var(--elvaio-radius-pill);
}

.head {
  display: flex;
  flex-direction: column;
  gap: var(--elvaio-space-02);
  min-height: 4.5rem;
}

.label {
  font-family: var(--elvaio-font-mono);
  font-size: var(--elvaio-font-size-label);
  letter-spacing: var(--elvaio-letter-spacing-label);
  text-transform: uppercase;
  color: var(--elvaio-color-text-muted);
}

.name {
  margin: 0;
  font-size: var(--elvaio-font-size-subheading);
}

.amount {
  display: flex;
  align-items: baseline;
  gap: var(--elvaio-space-02);
  padding-block: var(--elvaio-space-04);
  border-block: 1px solid var(--elvaio-color-border-decorative);
}

.amount-prefix {
  font-family: var(--elvaio-font-mono);
  color: var(--elvaio-color-text-muted);
}

.amount-value {
  font-family: var(--elvaio-font-mono);
  font-size: var(--elvaio-font-size-heading-small);
  line-height: 1;
}

.pitch {
  min-height: 3.3em;
  color: var(--elvaio-color-text-muted);
}

.outcomes {
  align-self: start;
}

.action {
  align-self: end;
}

.action ::slotted(*) {
  width: 100%;
}

/* Optional, e.g. Situatie's single-package card ("Alle pakketten
   vergelijken") — the multi-card grids (Home/Pricing) never pass this, so
   it stays collapsed there. */
.note {
  text-align: center;
}

.note:empty {
  display: none;
}

.note ::slotted(*) {
  font-size: var(--elvaio-font-size-small);
}