/* ═══════════════════════════════════════════════════════════════════════════
   Imago components — the shared building blocks the revamped pages are made
   of (spec 004 §Primitives). Ported from tmp/mockups/handoff/imago-components.css,
   where tmp/mockups/handoff/components.html shows every one in every state.

   - Theme variables only. Tokens only the Imago themes define carry a fallback,
     so these render under all eight themes.
   - The petal radius (--petal*) is RESERVED for content the AI wrote or
     proposed; people's and the database's content is square (--r / --r-lg).
   - Logical properties throughout; the petal is mirrored under [dir="rtl"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Density (spec 015): the mockups' sizes, as tokens ────────────────────────
   Every page sheet reads these as var(--token, <the size it had before>), and
   only the Imago family defines them, so the six older themes and the admin
   console (which never loads this file) keep each fallback, byte for byte.
   They live here, not in the theme files: theme files are linked with no
   cache-buster, so a token put there would reach a returning browser a week
   after the rules that read it; one block cannot drift between Light and Dark;
   and three regex parsers read the theme files.
   Shrink-only (decided 2026-10-22): a token takes the mockup's value unless
   that would enlarge something the app already draws smaller. Never read one
   of these without a fallback — the property would be invalid, and so unset,
   under every theme that does not define it. */
html[data-theme^="imago"] {
  /* type scale; the floor is the smallest text a page may set */
  --type-meta: 12px;
  --type-secondary: 13px;
  --type-body: 14px;
  --type-reading: 15px;
  --type-section: 16px;
  --type-panel-title: 22px;
  --type-floor: 12px;
  --weight-strong: 500;
  /* rows and tables */
  --row-pad-y: 12px;
  --row-pad-x: 16px;
  --row-head-pad-y: 10px;
  --row-gap: 12px;
  --row-tile: 36px;
  --row-sub-wrap: nowrap;
  --row-sub-width: 0;
  --grid-pad-y: 10px;
  --grid-pad-x: 14px;
  --inline-field-pad: 6px 10px;
  /* page, panels, empty states, tabs */
  --page-body-pad: 16px 32px 36px;
  --panel-pad: 24px;
  --panel-gap: 20px;
  --empty-pad: 40px 28px;
  --tab-h: 44px;
  --tab-weight: 400;
  /* small labels: the faint ink is 3.0:1 on white, too light to read */
  --subtle-ink: var(--muted);
  /* side drawers (spec 014: the connection wizard) — the mockup's panel */
  --drawer-w: 380px;
  --drawer-title-size: 22px;
}
/* A desktop pointer can hit a 40px control; a finger needs 44. Controls read
   max(<their height>, var(--touch-min, 0px)), which is their height anywhere
   this is not set. */
@media (max-width: 900px), (pointer: coarse) {
  html[data-theme^="imago"] { --touch-min: 44px; }
}

/* ── Type scale (Readex Pro; weights 300/400/500/600; no italics) ─────────── */
.im-h-display { font: 600 clamp(40px, 6vw, 72px)/1.05 var(--display); letter-spacing: -0.03em; margin: 0; }
/* Arabic: taller ascenders/descenders and no tracking — tight Latin settings
   make lines collide and break letter joins */
:lang(ar) { letter-spacing: 0 !important; }
.im-h-display:lang(ar), .im-h1:lang(ar), .im-h2:lang(ar) { line-height: 1.4; }
.im-h1 { font: 600 32px/1.15 var(--display); letter-spacing: -0.02em; margin: 0; }
.im-h2 { font: 600 20px/1.3 var(--display); margin: 0; }
.im-h3 { font: 600 16px/1.35 var(--display); margin: 0; }
.im-lead { font-size: 17px; color: var(--muted); margin: 0; max-width: 68ch; }
.im-body { font-size: 15px; margin: 0; max-width: 72ch; }
.im-small { font-size: 13px; color: var(--muted); }
.im-kpi-figure { font: 600 34px/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.im-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: var(--r-lg); border: 1px solid transparent; font: 500 15px/1 var(--sans);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.im-btn svg { width: 18px; height: 18px; flex: none; }
.im-btn--primary { background: var(--accent); color: var(--on-accent, #fff); }
.im-btn--primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.im-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--bhi); }
.im-btn--secondary:hover { border-color: var(--accent-dim); background: var(--accent-bg); }
.im-btn--quiet { background: transparent; color: var(--text); padding: 0 12px; }
.im-btn--quiet:hover { background: var(--accent-bg); }
.im-btn--danger { background: var(--surface); color: var(--rose); border-color: currentColor; }
.im-btn--danger:hover { background: color-mix(in srgb, var(--rose) 8%, transparent); }
.im-btn--sm { height: 36px; padding: 0 12px; font-size: 14px; border-radius: var(--r); }
.im-btn--icon { width: 44px; padding: 0; }
.im-btn--icon.im-btn--sm { width: 36px; }
.im-btn:disabled, .im-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .5; }
.im-btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.im-btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--on-accent, #fff); border-inline-end-color: transparent; animation: im-spin .7s linear infinite;
}
.im-btn--secondary[aria-busy="true"]::after { border-color: var(--accent); border-inline-end-color: transparent; }

/* ── Form fields ──────────────────────────────────────────────────────────── */
.im-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.im-input, .im-select, .im-textarea {
  height: 44px; padding: 0 12px; border: 1px solid var(--bhi); border-radius: var(--r);
  background: var(--surface); color: var(--text); font: 400 15px var(--sans);
}
.im-textarea { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.im-input::placeholder, .im-textarea::placeholder { color: var(--faint); }
.im-input:hover, .im-select:hover, .im-textarea:hover { border-color: var(--accent-dim); }
.im-input:focus-visible, .im-select:focus-visible, .im-textarea:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; border-color: var(--focus, var(--accent)); }
.im-field__help { font-weight: 400; font-size: 13px; color: var(--muted); }
.im-field.is-invalid .im-input { border-color: var(--rose); }
.im-field__error { font-weight: 400; font-size: 13px; color: var(--rose); display: flex; gap: 6px; align-items: center; }

/* ── Chips, filters, segmented control, tabs ──────────────────────────────── */
.im-chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill, 9999px);
  border: 1px solid var(--bhi); background: var(--surface); color: var(--text); font: 14px var(--sans); cursor: pointer;
}
.im-chip:hover { border-color: var(--accent-dim); background: var(--accent-bg); }
.im-filter {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding-inline: 12px 4px;
  border-radius: var(--r-pill, 9999px); background: var(--accent-mid); color: var(--text); font-size: 14px;
}
.im-filter button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.im-filter button:hover { background: var(--accent-mid); }
.im-seg { display: inline-flex; flex-wrap: wrap; background: var(--lift); border-radius: var(--r-lg); padding: 4px; gap: 2px; }
.im-seg button { height: 36px; padding: 0 12px; border: 0; border-radius: var(--r); background: transparent; color: var(--muted); font: 14px var(--sans); cursor: pointer; white-space: nowrap; }
.im-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow-sm); }
.im-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.im-tab { height: var(--tab-h, 44px); padding: 0 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: var(--tab-weight, 400) var(--type-reading, 15px) var(--sans); cursor: pointer; white-space: nowrap; }
.im-tab[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.im-tab__count { font-size: 13px; margin-inline-start: 4px; }

/* ── Status pills: lightness + word, never colour alone ───────────────────── */
.im-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill, 9999px); font-size: 13px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.im-pill svg { width: 14px; height: 14px; }
.im-pill--open   { background: var(--pill-open-bg, var(--accent-mid));   color: var(--pill-open-ink, var(--text)); }
.im-pill--active { background: var(--pill-active-bg, transparent); color: var(--pill-active-ink, var(--accent)); border-color: currentColor; }
.im-pill--done   { background: var(--pill-done-bg, var(--accent));   color: var(--pill-done-ink, #fff); }
.im-pill--final  { background: var(--pill-final-bg, var(--text));  color: var(--pill-final-ink, var(--surface)); }
.im-pill--quiet  { background: transparent; color: var(--muted); border-color: var(--bhi); }

/* ── Panels (human / system) and petal cards (AI) ─────────────────────────── */
.im-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.im-panel--sunk { background: var(--lift); border-color: transparent; }
.im-ai {
  background: var(--ai-bg, var(--lift)); border: 1px solid var(--ai-border, var(--accent-dim)); border-radius: var(--petal, 24px 4px 24px 4px);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.im-ai--lg { border-radius: var(--petal-lg, 32px 6px 32px 6px); padding: clamp(18px, 2.5vw, 30px); gap: 20px; }
.im-ai--sm { border-radius: var(--petal-sm, 18px 4px 18px 4px); padding: 14px 16px; }
.im-ai--suspected { background: transparent; border-style: dashed; border-color: var(--accent-dim); }
[dir="rtl"] .im-ai, [dir="rtl"] .im-wing { border-radius: 4px 24px 4px 24px; }
[dir="rtl"] .im-ai--lg, [dir="rtl"] .im-wing { border-radius: 6px 32px 6px 32px; }
[dir="rtl"] .im-ai--sm { border-radius: 4px 18px 4px 18px; }
.im-provenance { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ai-ink, var(--accent)); }
.im-provenance svg { width: 14px; height: 14px; flex: none; }
.im-provenance--human { color: var(--muted); }
.im-petal-dot { width: 10px; height: 10px; flex: none; background: var(--accent); border-radius: 6px 1px 6px 1px; }

/* KPI */
.im-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.im-kpi__label { font-size: 14px; color: var(--muted); }
.im-delta { font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.im-delta__value { font-weight: 600; }
.im-delta--good .im-delta__value { color: var(--accent); }
.im-delta--bad .im-delta__value { color: var(--text); }   /* direction is carried by ▲/▼ and the word */

/* Insight / anomaly callout */
.im-callout { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; font-size: 14px; }
.im-callout svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); }

/* ── Data table ───────────────────────────────────────────────────────────── */
.im-table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow-x: auto; background: var(--surface); }
.im-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.im-table caption { text-align: start; padding: 12px 16px 4px; font-weight: 500; }
.im-table th { text-align: start; font-weight: 500; color: var(--subtle-ink, var(--muted)); padding: var(--row-head-pad-y, 10px) var(--row-pad-x, 16px); border-bottom: 1px solid var(--border); background: var(--lift); white-space: nowrap; vertical-align: bottom; }
.im-table td { padding: var(--row-pad-y, 12px) var(--row-pad-x, 16px); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); white-space: nowrap; }
.im-table td.is-num, .im-table th.is-num { text-align: end; }
.im-table tbody tr:hover td { background: var(--accent-bg); }
.im-table tbody tr[aria-selected="true"] td { background: var(--accent-mid); }
.im-table tbody tr:last-child td { border-bottom: 0; }
.im-profile { display: flex; align-items: flex-end; gap: 2px; height: 18px; margin-bottom: 6px; }   /* column distribution in headers */
/* --series-1, not --seq-*: a distribution is a single-series chart (the
   palette's own rule), and --seq-* exists only in the Imago themes. The empty
   share is outlined and hatched in the same colour — shape, not a second hue,
   says "missing" — after a gap. */
.im-profile span { width: 6px; background: var(--series-1, var(--accent)); border-radius: 1px; flex: none; }
.im-profile .is-null {
  box-sizing: border-box; margin-inline-start: 4px; border: 1px solid var(--series-1, var(--accent));
  background: repeating-linear-gradient(135deg, var(--series-1, var(--accent)) 0 1px, transparent 1px 3px);
}

/* ── Conversation ─────────────────────────────────────────────────────────── */
.im-thread { width: 100%; max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.im-msg-user {
  align-self: flex-end; max-width: min(560px, 90%); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 16px; font-size: 16px;
}
.im-answer-headline { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 500; max-width: 68ch; }
.im-answer-headline strong { color: var(--accent); font-weight: 600; }
.im-steps { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 16px; }
.im-steps summary { cursor: pointer; font-weight: 500; font-size: 14px; }
.im-steps ol { margin: 10px 0 2px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.im-steps li { display: flex; gap: 10px; align-items: center; }
.im-steps li svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.im-steps li.is-running svg { animation: im-spin .9s linear infinite; }
.im-composer { border: 2px solid var(--accent); border-radius: 16px; background: var(--surface); padding: 12px 12px 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.im-composer textarea { border: 0; resize: none; font: 16px var(--sans); background: transparent; color: var(--text); }
.im-composer textarea::placeholder { color: var(--faint); }
.im-composer__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── The agent wing (navy petal panel) ────────────────────────────────────── */
.im-wing {
  background: var(--wing-bg, #384064); color: var(--wing-ink, #FFFFFF); border-radius: var(--petal-lg, 32px 6px 32px 6px);
  padding: 24px 20px 18px; display: flex; flex-direction: column; gap: 16px;
}
.im-wing__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.im-wing__title { display: flex; align-items: center; gap: 10px; font: 600 18px var(--display); margin: 0; }
.im-wing__user { align-self: flex-end; max-width: 90%; background: var(--wing-ink, #FFFFFF); color: var(--wing-bg, #384064); border-radius: var(--r-lg); padding: 10px 14px; font-size: 14px; }
.im-wing__agent { background: var(--wing-raised, #2C3352); border-radius: var(--petal-sm, 18px 4px 18px 4px); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
[dir="rtl"] .im-wing__agent { border-radius: 4px 18px 4px 18px; }
.im-wing__muted { color: var(--wing-muted, #C9D4EA); }
.im-wing__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--wing-muted, #C9D4EA); font-size: 13px; }
.im-wing__tools li { display: flex; gap: 8px; align-items: center; }
.im-wing__tools svg { width: 14px; height: 14px; color: var(--wing-accent, #ACDBFC); flex: none; }
.im-wing__chip { min-height: 36px; padding: 0 12px; border: 1px solid var(--wing-border, #5B6485); border-radius: var(--r-pill, 9999px); background: transparent; color: var(--wing-ink, #FFFFFF); font: 13px var(--sans); cursor: pointer; }
.im-wing__chip:hover { border-color: var(--wing-accent, #ACDBFC); }
.im-wing__input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--wing-border, #5B6485); border-radius: var(--r-lg); background: var(--wing-raised, #2C3352); color: var(--wing-ink, #FFFFFF); font: 14px var(--sans); }
.im-wing__input::placeholder { color: var(--wing-muted, #C9D4EA); }
.im-wing__send { width: 44px; height: 44px; border: 0; border-radius: var(--r-lg); background: var(--wing-accent, #ACDBFC); color: var(--wing-bg, #384064); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.im-wing :focus-visible { outline-color: var(--wing-accent, #ACDBFC); }
.im-wing__log { list-style: none; margin: 0; padding-inline-start: 18px; border-inline-start: 2px solid var(--wing-border, #5B6485); display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.im-wing__log li { position: relative; }
.im-wing__log li::before { content: ""; position: absolute; inset-inline-start: -25px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--wing-accent, #ACDBFC); }

/* ── Stepper (multi-step flows: connect a database) ───────────────────────── */
.im-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; font-size: 13px; }
.im-stepper li { flex: 1; display: flex; flex-direction: column; gap: 6px; color: var(--muted); }
.im-stepper li::before { content: ""; height: 4px; border-radius: 2px; background: var(--border); }
.im-stepper li.is-done, .im-stepper li[aria-current="step"] { color: var(--text); }
.im-stepper li.is-done::before, .im-stepper li[aria-current="step"]::before { background: var(--accent); }
.im-stepper li[aria-current="step"] { font-weight: 600; }

/* ── Check list (connection test, plan progress) ──────────────────────────── */
.im-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.im-checks li { display: flex; gap: 10px; align-items: center; }
.im-checks svg { width: 18px; height: 18px; flex: none; }
.im-checks .is-ok svg { color: var(--accent); }
.im-checks .is-fail { color: var(--rose); }
.im-checks .is-wait { color: var(--muted); }
/* advisory lines: the shape and the spoken word carry them, not a third colour */
.im-checks .is-warn svg { color: var(--text); }
.im-checks .is-info svg { color: var(--muted); }

/* ── Menu (Export) ────────────────────────────────────────────────────────── */
.im-menu { min-width: 280px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; box-shadow: var(--shadow-md); }
.im-menu a, .im-menu button { display: flex; justify-content: space-between; gap: 16px; align-items: center; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-decoration: none; font: 14px var(--sans); text-align: start; cursor: pointer; }
.im-menu a:hover, .im-menu button:hover { background: var(--accent-bg); }
.im-menu__meta { font-size: 12px; color: var(--muted); }
.im-menu hr { border: 0; height: 1px; background: var(--border); margin: 6px 4px; }

/* ── Toast — named after the action that caused it ────────────────────────── */
.im-toast { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--wing-bg, #384064); color: var(--wing-ink, #FFFFFF); font-size: 14px; box-shadow: var(--shadow-md); }
.im-toast a { color: var(--wing-accent, #ACDBFC); font-weight: 500; }

/* ── Empty, loading, error, no-access ─────────────────────────────────────── */
.im-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: var(--empty-pad, 40px); border: 1px dashed var(--bhi); border-radius: var(--r-lg); background: var(--surface); max-width: 560px; }
.im-empty__art { width: 56px; height: 56px; }
.im-skel { background: linear-gradient(90deg, var(--lift) 0%, var(--accent-bg) 50%, var(--lift) 100%); background-size: 200% 100%; border-radius: 6px; animation: im-shimmer 1.4s ease-in-out infinite; }
.im-error { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid var(--rose); background: color-mix(in srgb, var(--rose) 6%, var(--surface)); }
.im-error svg { width: 20px; height: 20px; color: var(--rose); flex: none; margin-top: 2px; }
.im-error__title { font-weight: 600; margin: 0; }
.im-thinking { display: inline-flex; gap: 4px; }
.im-thinking span { width: 8px; height: 8px; background: var(--accent); border-radius: 5px 1px 5px 1px; animation: im-pulse 1.2s ease-in-out infinite; }
.im-thinking span:nth-child(2) { animation-delay: .15s; }
.im-thinking span:nth-child(3) { animation-delay: .3s; }

/* ── Dashboard canvas pieces (Studio) ─────────────────────────────────────── */
.im-board { background: var(--lift); padding: 22px clamp(14px, 2vw, 28px) 32px; display: flex; flex-direction: column; gap: 18px; }
.im-grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .im-grid12 > * { grid-column: 1 / -1 !important; } }
.im-tile-selected { outline: 2px solid var(--accent); outline-offset: -1px; position: relative; }
.im-tile-tools { position: absolute; top: -18px; inset-inline-end: 12px; display: flex; gap: 2px; background: var(--wing-bg, #384064); border-radius: var(--r); padding: 3px; z-index: 5; }
.im-tile-tools button { width: 32px; height: 30px; border: 0; background: transparent; color: var(--wing-ink, #FFFFFF); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.im-tile-tools button:hover { background: var(--wing-raised, #2C3352); }
.im-heat td { text-align: center; padding: 9px 4px; border-radius: 6px; }
.im-heat .s1 { background: var(--seq-1, var(--lift)); } .im-heat .s2 { background: var(--seq-2, var(--accent-bg)); }
.im-heat .s3 { background: var(--seq-3, var(--accent-mid)); color: var(--pill-open-ink, var(--text)); }
.im-heat .s4 { background: var(--seq-4, var(--accent-dim)); color: var(--on-accent, #fff); }
.im-heat .s5 { background: var(--seq-5, var(--accent)); color: var(--on-accent, #fff); }

/* ── Motion ───────────────────────────────────────────────────────────────── */
@keyframes im-spin { to { transform: rotate(360deg); } }
@keyframes im-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes im-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes im-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.im-grow { transform-origin: bottom; animation: im-grow .9s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  [class*="im-"], [class*="im-"]::before, [class*="im-"]::after { animation: none !important; transition: none !important; }
}