/*
 * 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);
}


/* Size lives on the host (not `.seal`) specifically so `max-width: 100%`
   has something real to resolve against: a flex/grid item's automatic
   minimum size is `auto` by default, meaning it won't shrink below its
   own content's preferred size on its own (the Aanpak ISO band's `xl`
   seal — up to 320px — overflowing its column and getting clipped on one
   side once the track is narrower than that). `aspect-ratio` keeps it a
   true circle at whatever width it's actually given, capped or not,
   instead of only being correct at the clamp's own preferred size. */
:host {
  display: inline-block;
  max-width: 100%;
  width: clamp(7.5rem, 6.5rem + 3.6vw, 8.75rem);
  aspect-ratio: 1 / 1;
}

:host([size='small']) {
  width: 5rem;
}

:host([size='large']) {
  width: 10rem;
}

/* The Aanpak ISO band's seal is a hero-scale device, not just "large" —
   the artboard clamps it 220px to 320px. */
:host([size='xl']) {
  width: clamp(13.75rem, 9rem + 16vw, 20rem);
}

.seal {
  display: block;
  width: 100%;
  height: 100%;
}

:host([rotate]) .seal {
  transform: rotate(-10deg);
}

svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ring {
  /* Context-aware (not a bare token): `ds-card.inverse` re-points both of
     these locally, so a seal nested in a dark card (Aanpak's ISO band)
     renders ink-fill/gold-stroke instead of this light-mode default. */
  fill: var(--elvaio-color-seal-ring);
  stroke: var(--elvaio-color-seal-ring-stroke);
  stroke-width: 5;
}

.ring-inner {
  fill: none;
  stroke: var(--elvaio-color-accent);
  stroke-width: 3;
}

.label {
  font-family: var(--elvaio-font-mono);
  font-size: 9.5px;
  font-weight: var(--elvaio-font-weight-semibold);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  fill: var(--elvaio-color-seal-text);
}

.mark {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Gold-filled circle; the slotted mark glyph needs the on-accent
     (cream) color to read against it, not another gold (invisible). */
  color: var(--elvaio-color-on-accent);
  background: var(--elvaio-color-accent);
}

.mark ::slotted(*) {
  width: 60%;
  height: 60%;
}