/* ============================================================
   PROPERTY ORDER CONVENTION
   1. Layout      (display, position)
   2. Box model   (margin, padding, border, width, height)
   3. Visual      (background, color, shadow)
   4. Typography  (font-size, font-weight, text-decoration)
   5. Interactive (cursor, transition)
   ============================================================ */


/* ============================================================
   TOKENS
   ============================================================ */

:root {
  --color-primary:       #4e7339;
  --color-primary-hover: #365227;
  --color-bg:            #f5f0e8;
  --color-bg-secondary:  #ece6d8;
  --color-text:          #2a1f0e;
  --color-text-muted:    #7c6e54;
  --color-border:        #c8b99a;
  --color-error:         #c44;
  --color-error-hover:   #a33;

  --font-body: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
}


/* ============================================================
   COLUMN WIDTHS — NPC FAVOR TABLE
   ============================================================ */

.col-npc      { width: 160px; }
.col-rank     { width: 120px; }
.col-favor    { width: 90px; }
.col-progress { width: 90px; }
.col-next     { width: 150px; }
.col-accepts  { width: 130px; }
.col-prefs    { width: auto; }


/* ============================================================
   COLUMN WIDTHS — STORAGE TABLE
   ============================================================ */

.col-vault-name  { width: 180px; }
.col-vault-slots { width: 60px; }
.col-vault-items { width: 160px; }
.col-vault-rank  { width: 120px; }
.col-vault-notes { width: auto; }


/* ============================================================
   SUBROW ROLE CLASSES
   ============================================================ */

.subrow-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.subrow-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.subrow-content {
  flex: 1;
  font-size: var(--font-size-sm);
}


/* ============================================================
   KV-VALUE
   ============================================================ */

.kv-value {
  color: var(--color-primary);
}


/* ============================================================
   SUGGESTION BOX
   ============================================================ */

/* Accented panel variant — draws attention to current action */
.suggestion-box {
  margin: 0 0 var(--space-lg);
  border-color: var(--color-primary);
  background: var(--color-bg-secondary);
}

.suggestion-label {
  margin: 0 0 var(--space-sm);
}

.odds-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}


/* ============================================================
   FEEDBACK COLORS
   ============================================================ */

.fb-correct {
  color: var(--color-primary);
}

.fb-wrong {
  color: var(--color-text-muted);
}

.correct-val {
  color: var(--color-primary);
}

.wrong-val {
  color: var(--color-text-muted);
}

/* Inline pair showing correct/wrong counts */
.guess-feedback {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}


/* ============================================================
   REFERENCE PANEL
   ============================================================ */

.reference-panel {
  margin: 0 0 var(--space-lg);
}

/* Single item: symbol above label */
.reference-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
}

.reference-num {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}