/**
 * SKIA Crest bullets — brand standard (§4 design_bible.md).
 * Card-body rows: 18×18, 22px icon column, 3px top offset vs 15px body copy.
 * Compact prose lists: 12×12 (rare — prefer card-body size in Tier 2 rows).
 */
strong, b { font-weight: 400; }

:root {
  --skia-crest-bullet-color: #d4af37;
  --skia-crest-bullet-size-compact: 12px;
  --skia-crest-bullet-size-body: 18px;
  --skia-crest-bullet-col-width: 22px;
  --skia-crest-bullet-col-gap: 10px;
  --skia-crest-bullet-offset: 3px;
}

/* ── Crest wrapper ── */
.item-crest {
  flex-shrink: 0;
  line-height: 0;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--skia-crest-bullet-color);
}

.item-crest svg {
  display: block;
  flex-shrink: 0;
}

/* Compact 12×12 — inline prose only (not Tier 2 card rows) */
.item-crest:not(.item-crest--body) {
  margin-top: 2px;
}

.item-crest:not(.item-crest--body) svg {
  width: var(--skia-crest-bullet-size-compact);
  height: var(--skia-crest-bullet-size-compact);
  max-width: var(--skia-crest-bullet-size-compact);
  max-height: var(--skia-crest-bullet-size-compact);
}

/* Card-body 18×18 — crest beside 15px copy (docs .item, checklists, triage, kc rows) */
.item-crest--body,
.item > .item-crest,
.check-item > .item-crest,
.triage-item > .item-crest,
.kc-item > .item-crest,
.kc-item--row > .item-crest {
  margin-top: var(--skia-crest-bullet-offset);
  width: var(--skia-crest-bullet-size-body);
  height: var(--skia-crest-bullet-size-body);
}

.item-crest--body svg,
.item > .item-crest svg,
.check-item > .item-crest svg,
.triage-item > .item-crest svg,
.kc-item > .item-crest svg,
.kc-item--row > .item-crest svg {
  width: var(--skia-crest-bullet-size-body) !important;
  height: var(--skia-crest-bullet-size-body) !important;
  max-width: var(--skia-crest-bullet-size-body);
  max-height: var(--skia-crest-bullet-size-body);
}

/* Explicit crest row — matches skia.ca .skia-crest-bullet-row */
.skia-crest-bullet-row {
  display: grid;
  grid-template-columns: var(--skia-crest-bullet-col-width) minmax(0, 1fr);
  column-gap: var(--skia-crest-bullet-col-gap);
  align-items: start;
  width: 100%;
}

.skia-crest-bullet-icon {
  width: var(--skia-crest-bullet-size-body);
  height: var(--skia-crest-bullet-size-body);
  margin-top: var(--skia-crest-bullet-offset);
  line-height: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  color: var(--skia-crest-bullet-color);
}

.skia-crest-bullet-icon--body {
  width: var(--skia-crest-bullet-size-body);
  height: var(--skia-crest-bullet-size-body);
}

.skia-crest-bullet-icon svg {
  display: block;
  width: var(--skia-crest-bullet-size-body) !important;
  height: var(--skia-crest-bullet-size-body) !important;
  max-width: var(--skia-crest-bullet-size-body);
  max-height: var(--skia-crest-bullet-size-body);
  flex-shrink: 0;
}

.skia-crest-bullet-text {
  min-width: 0;
}

/* Legacy empty div markers — background fallback if any remain */
.item-dot,
.kc-bullet,
.triage-dot,
.check-box,
.check-item .check-icon:empty {
  display: block;
  border-radius: 0;
  border: none;
  background-color: transparent;
  background-image: url("/icons/skia-crest-bullet.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  flex-shrink: 0;
}

.item-dot {
  width: var(--skia-crest-bullet-size-body);
  height: var(--skia-crest-bullet-size-body);
  margin-top: var(--skia-crest-bullet-offset);
}

.item .item-dot,
.kc-bullet,
.triage-dot,
.check-box {
  width: var(--skia-crest-bullet-size-body);
  height: var(--skia-crest-bullet-size-body);
  margin-top: var(--skia-crest-bullet-offset);
}

.check-item .check-icon svg {
  display: none;
}