// ─── Mixins ──────────────────────────────────────────────────────────────────

.cel-section-header() {
  font-family: var(--cel-font-title);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  // Gold instead of vivid green — Art Déco elegance
  color: var(--cel-orange);
  padding-bottom: 4px;
  margin-bottom: 8px;
  position: relative;

  // Ornamental gradient rule underneath — fades to transparent at edges
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--cel-orange) 20%, var(--cel-border) 80%, transparent 100%);
  }
}

.cel-input-std() {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--cel-border);
  border-radius: 2px;
  padding: 2px 4px;
  color: #1a1209;
  font-family: var(--cel-font-body);
}

.cel-box() {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid var(--cel-border);
  border-radius: 2px;
  background: rgba(255,255,255,0.45);
  cursor: pointer;
  &.checked { background: var(--cel-orange); border-color: var(--cel-orange); }
}

.cel-rollable() {
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  &:hover {
    background: rgba(196,154,26,0.15);  // gold tint — more elegant than orange
    color: #1a0a00;
    border-radius: 3px;
  }
}

.cel-item-row() {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(122,92,32,0.25);
  transition: background 0.1s;
  &:hover { background: rgba(196,154,26,0.08); }

  .item-icon {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border: 1px solid var(--cel-border);
    border-radius: 2px;
  }

  .item-name { flex: 1; font-style: italic; }

  .item-value {
    font-weight: bold;
    min-width: 24px;
    text-align: center;
    color: var(--cel-green);
  }

  .item-controls {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    a { color: var(--cel-orange); cursor: pointer; }
  }

  &:hover .item-controls { opacity: 1; }
}