/* ─── Shared print-sheet styles ─────────────────────────────────────────
 * Imported by every print HTML and by export.html. Defines:
 *   • Type-color CSS variables (used by component CSS)
 *   • Reset
 *   • Body font + base print rules
 *   • Inline icon sizing primitives shared by every <sc-*> element
 *   • Phase-tag styling (since YAML content can produce phase tags anywhere)
 *
 * Keep this file lean — anything component-specific belongs in that
 * component's static styles().
 */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  --ember:   #D48A8A;
  --dew:     #7BA7CC;
  --moss:    #7FB87F;
  --pebble:  #A688BF;
  --neutral: #7F8C8D;
  --card-face: #F5F0E1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { background: #FFF; }

body {
  font-family: 'Fredoka', 'Segoe UI', Arial, sans-serif;
  color: #222;
}

@media print {
  html, body { margin: 0; padding: 0; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .no-print { display: none !important; }
}

/* ─── Inline icon primitives (used by every component) ───────────────── */

.icon-inline   { width: 1em;   height: 1em;   vertical-align: -0.15em; }
.slime-inline  { width: 1.3em; height: 1.3em; vertical-align: -0.3em; }
.big-inline    { width: 1.7em; height: 1.7em; vertical-align: -0.4em; }
.type-sup      { width: 0.65em; height: 0.65em; vertical-align: super; margin-right: -2px; }
.type-sup-r    { width: 0.65em; height: 0.65em; position: absolute; top: -0.2em; right: -0.4em; }
.dormant-sup   { width: 0.7em;  height: 0.7em;  vertical-align: super; margin-left: -3px; }
.leyline-icon  { width: 0.9em;  height: 0.9em; }

.typed-icon  { display: inline-flex; align-items: center; line-height: 1; }
.num-icon    { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }

.dissolve-wrap { display: inline-block; position: relative; }
.dissolve-x { position: absolute; left: 50%; top: 50%;
              transform: translate(-50%, -50%); width: 1.3em; height: 1.3em;
              opacity: 0.95; pointer-events: none; }

/* ─── Phase tag badges ───────────────────────────────────────────────── */

.phase-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-weight: 700;
  color: #FFF;
  letter-spacing: 0.5px;
  vertical-align: 1px;
}
.phase-tag.emerge { background: #E8A83E; }
.phase-tag.mush   { background: #7BA7CC; }
.phase-tag.swarm  { background: #D4644E; }
.phase-tag.settle { background: #8B5FBF; }

/* ─── Cost / AP badge ────────────────────────────────────────────────── */

.ab-cost {
  font-weight: 700;
  font-size: 0.9em;
  letter-spacing: 0.3px;
  opacity: 0.9;
}

/* ─── Base component frame (every <sc-*> element) ─────────────────────
 * The component's renderContent() owns everything inside .safe; these
 * rules just ensure the wrapper boxes don't introduce weird defaults. */

.bleed, .trim, .safe { box-sizing: border-box; }
.trim { /* trim area — content lives here */ }
.safe { /* safe-zone inset — content stays inside this */ }
.guides-layer { /* guides overlay — see lib/guides.js */ }
.guide { /* individual guide outline / line */ }
.empty-item { padding: 0.5in; color: #888; font-family: monospace; font-size: 12px; }