/* ============================================================
   ARMADILLO — ICON SYSTEM
   ============================================================
   Two icon families are used in the Armadillo brand:

   1) UI LINE ICONS  (Lucide-style)
      • 24×24 viewBox
      • currentColor stroke, no fill
      • stroke-width 1.5 (1.1 inside small dotted glyphs / found-icons)
      • stroke-linecap / linejoin: round
      • Used for nav, inline actions, list bullets, "yes/no/partial"
        compare-table glyphs.
      • Source: Lucide (https://lucide.dev) is the de-facto CDN.
        Substitute the closest match if a needed icon isn't there.

   2) BRAND CONCEPT GLYPHS  (custom, Armadillo-only)
      • 40×40 or 48×48 viewBox
      • Mix of stroke + small filled dots
      • Always pair with the ⌐ ⌐ "coordinate frame" corner-tick chrome
        (.found-icon::before / ::after — see fournd-icons section)
      • Used on foundation / value-prop cards. Concept-led, NEVER
        decorative. One glyph per concept, hand-drawn in SVG.
   ============================================================ */

/* ─── 1. UI LINE ICONS ──────────────────────────────────── */
.ic,
.icon {
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: -2px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-sm { width: 12px; height: 12px; }
.ic-md { width: 18px; height: 18px; }
.ic-lg { width: 24px; height: 24px; }
.ic-xl { width: 32px; height: 32px; }

/* compare-table "yes" check */
.ic-check circle { stroke-opacity: 0.25; }
/* compare-table "no" cross */
.ic-x circle { stroke-opacity: 0.25; }
/* compare-table "partial" minus */
.ic-minus circle { stroke-opacity: 0.25; }


/* ─── 2. BRAND CONCEPT GLYPHS ───────────────────────────── */
/* Container with corner-tick "coordinate frame" chrome.
   Apply to any wrapper around a 40×40 svg to get the Armadillo
   "drawing-board" framing. */
.brand-glyph {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  color: var(--ink);
  margin-bottom: 28px;
  transition: color var(--t-med) var(--ease-out);
}
.brand-glyph::before,
.brand-glyph::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid var(--line-strong);
  transition: width var(--t-med) var(--ease-out),
              height var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
.brand-glyph::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.brand-glyph::after  { bottom: 0; right: 0; border-left: none; border-top: none; }
.brand-glyph .accent-dot {
  position: absolute; top: -2px; right: -2px;
  width: 5px; height: 5px;
  background: var(--ink);
  border-radius: 1px;
}
.brand-glyph > svg {
  width: 38px; height: 38px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-glyph svg circle[fill="currentColor"] { stroke: none; }

/* Hover affordance: ticks grow, border darkens */
.brand-glyph:hover::before,
.brand-glyph:hover::after {
  width: 12px; height: 12px;
  border-color: var(--ink);
}


/* ─── 3. STATUS DOT ─────────────────────────────────────── */
/* Small live indicator used in chips and "Now" pills.
   Scoped to :empty so it never hijacks brand-wordmark
   punctuation (e.g. <span class="dot">.</span>). */
.dot:empty {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: 1px;
}
.dot-live:empty {
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
  animation: dot-pulse 1.6s ease-in-out infinite;
}
.dot-radar {
  background: var(--ink);
  box-shadow: 0 0 0 0 rgba(20,20,18,0.55);
  animation: dot-radar 1.8s var(--ease-out) infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}
@keyframes dot-radar {
  0%   { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(20,20,18,0.55); }
  70%  { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(20,20,18,0); }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(20,20,18,0); }
}


/* ─── 4. EMOJI POLICY ───────────────────────────────────── */
/* DO NOT use emoji anywhere in product chrome, marketing, slides,
   or print. Armadillo uses iconography, type, and quiet greys to
   carry meaning. The only exception is user-generated content
   (chat messages, customer-authored comments) where emoji is
   inherent to the medium. */