/* ============================================================================
   CiraHub — the modular icon (.ic)
   ----------------------------------------------------------------------------
   One icon = one <span class="ic"> + symbol layers taken from the sprite.
   All configuration is expressed as CSS variables on the element itself, which
   is why no combination exists as a file of its own.

   Layers (z-order, bottom to top):
     .ic-deco   — decoration layer (the dashed template ring), optional
     .ic-base   — the base logo
     .ic-badge  — up to 4 corner badges (bl / br / tl / tr)

   Every internal size is a % of --ic-size, so the icon scales proportionally
   when that single value changes.
   ============================================================================ */

/* ============================================================================
   Colour tokens. The system holds no values of its own — it takes the
   platform's semantic tokens (css/theme-tokens.css); the local literal is only
   a fallback for when icons.css is loaded without them (the tools/icon-system
   gallery):
     --accent  brand accent; build.py rewrites #1079C5 into it inside u-* atoms
     --ui-bg   the colour of the "cut-outs" in monochrome marks (usually the
               surface behind them)
   A mark takes its foreground from currentColor, so setting color on the
   container is enough.
   ============================================================================ */
:root {
  --accent: var(--color-primary, #1b75bb);
  --ui-bg: var(--color-surface, #ffffff);
}

/* The accent inside compositions. See also the automatic #1079C5 → var(--accent)
   rewrite in build.py for two-colour marks. */
.ic-accent { color: var(--accent); }

.ic {
  /* --- configurable variables (default values) --- */
  --ic-size: 40px;               /* overall box */
  --ic-bg: var(--color-surface, #ffffff);          /* plate background; transparent — no plate */
  --ic-border-w: 0.6px;                            /* hairline width */
  --ic-border-color: var(--color-border, #e2e9f0); /* hairline colour */
  --ic-radius: 50%;              /* 50% = circle; e.g. 12px = rounded square */

  /* Padding between the base logo and the edge — a CONSTANT across every step of
     the ladder, exactly like the badge share. The pair (--ic-pad 15%,
     --ic-badge-ratio 0.54) puts the badge at 38% of the overall box — precisely
     the number the component specification fixes — and gives the same
     badge-to-logo proportion as the mockups. A ladder step may be changed; these
     two numbers may not, because the composition is recognisable through them. */
  --ic-pad: 15%;

  /* The badge is a CONSTANT share of the base logo — not of the overall box, and
     not a number picked per ladder step. The logo occupies (100% - 2*--ic-pad)
     and the badge 54% of that (the proportion of the approved mockups), so the
     composition reads the same at any size: change --ic-size and the ratio holds. */
  --ic-badge-ratio: 0.54;
  --ic-badge: calc(var(--ic-badge-ratio) * (100% - 2 * var(--ic-pad)));

  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--ic-size);
  height: var(--ic-size);
  background: var(--ic-bg);
  border: var(--ic-border-w) solid var(--ic-border-color);
  border-radius: var(--ic-radius);
}

/* the base logo */
.ic > .ic-base {
  position: absolute;
  inset: var(--ic-pad);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ic > .ic-base svg { display: block; width: 100%; height: 100%; }

/* decoration layer (e.g. the dashed template ring) */
.ic > .ic-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ic > .ic-deco svg { display: block; width: 100%; height: 100%; }

/* badges: 4 corner slots.
   DETERMINISTIC MODEL: the square (--ic-size) is the outer container. A badge is
   pinned into a corner with its edge on the square's lines (offset 0), i.e. it
   occupies [S-B, S] along each axis and NEVER leaves the square, whatever
   --ic-badge is. The "base + badges" composition therefore always fits inside
   the square by construction — nothing has to be tuned. */
.ic-badge {
  position: absolute;
  z-index: 2;
  width: var(--ic-badge);
  height: var(--ic-badge);
  border-radius: 50%;
  background: var(--badge-bg, var(--color-surface, #fff));
  border: 1px solid var(--badge-line, var(--color-border, #e2e9f0));
  box-shadow: 0 1px 2px rgba(20, 30, 45, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The glyph inside a badge: a share of the disc. 68% leaves a white ring that
   makes the badge read as a separate object on top of the logo rather than a
   blot on it (proportion from the approved mockups: a 110px glyph in a 175px
   disc). */
.ic-badge svg { width: 68%; height: 68%; }

.ic-badge.bl { left: 0; bottom: 0; }
.ic-badge.br { right: 0; bottom: 0; }
.ic-badge.tl { left: 0; top: 0; }
.ic-badge.tr { right: 0; top: 0; }

/* badges that carry their own chip fill (the glyph inside is a white outline).
   The colours come from theme-tokens.css: the --color-success/--color-danger
   roles there are meant for text and are too dark for a ~15px disc, so the chips
   have their own semantic tokens instead of literals here. */
.ic-badge.chip-green { --badge-bg: var(--color-icon-chip-ok, #5AB59A);    --badge-line: var(--color-icon-chip-ok, #5AB59A); }
.ic-badge.chip-red   { --badge-bg: var(--color-icon-chip-error, #DD5E56); --badge-line: var(--color-icon-chip-error, #DD5E56); }

/* ----------------------------------------------------------------------------
   "Template" mode: the dashed ring (#deco-template) draws the background and the
   border itself, the base moves into the "front" circle, and the badges are
   inscribed into the corners of the square (matching the 30×30 original).
   ---------------------------------------------------------------------------- */
.ic.is-template { --ic-bg: transparent; --ic-border-w: 0; }
.ic.is-template > .ic-base {
  inset: auto;
  left: 14%;
  top: 19%;
  width: 62%;
  height: 62%;
}
/* On a template the badge is measured against the template's base (62%) rather
   than the overall box — the same 54% ratio as in the normal mode. */
.ic.is-template > .ic-badge {
  width: calc(var(--ic-badge-ratio) * 62%);
  height: calc(var(--ic-badge-ratio) * 62%);
}
/* Every corner is seated explicitly. There is deliberately no blanket "pin to the
   bottom edge" here: it put the top slots (tl/tr) on top of the bottom ones, and
   the data-kind badge landed on the state badge. */
.ic.is-template > .ic-badge.bl { left: 1%;  right: auto; top: auto; bottom: 1%; }
.ic.is-template > .ic-badge.br { right: 1%; left: auto;  top: auto; bottom: 1%; }
.ic.is-template > .ic-badge.tl { left: 1%;  right: auto; bottom: auto; top: 1%; }
.ic.is-template > .ic-badge.tr { right: 1%; left: auto;  bottom: auto; top: 1%; }