/**
 * Clarifier spread choices — parchment selects, refined labels & actions.
 * FORMAT: FMT-G3-shared — one shared spread menu; medium via Cast staves / Draw tarot.
 * Linked from triangulation, iching, index (tarot), manual-reading.
 */

:root {
  --oracle-select-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%237a6040' stroke-width='1.15' stroke-linecap='round' d='M1 1.5 5.5 5.5 10 1.5'/%3E%3C/svg%3E");
}

/* — Spread select menus — */
.tri-clarify-row select,
.iching-clarify-row select,
.outcome-rune-count-row select,
.clarifier-pick,
.clarifier-spread-select,
.follow-up-wrap.outcome-runes-callout select,
#ichingClarifySpread,
#outcomeClarifySpread,
select.tri-clarify-spread {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: min(100%, 15.5rem);
  flex: 1 1 11rem;
  max-width: 100%;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.38;
  letter-spacing: 0.015em;
  font-weight: 400;
  color: var(--ink, #2a1f0e);
  padding: 0.65rem 2.2rem 0.65rem 0.9rem;
  border: 1px solid var(--parch-deep, #c4a878);
  border-top-color: var(--ink-faint, #a89070);
  border-radius: 2px;
  background-color: #fcf8ee;
  background-image:
    var(--oracle-select-chev),
    linear-gradient(180deg, rgba(252, 248, 238, 0.97) 0%, rgba(245, 234, 208, 0.9) 100%);
  background-repeat: no-repeat, repeat;
  background-position: right 0.78rem center, 0 0;
  background-size: 11px 7px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(42, 31, 14, 0.04);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tri-clarify-row select:hover,
.iching-clarify-row select:hover,
.outcome-rune-count-row select:hover,
.clarifier-pick:hover,
.follow-up-wrap.outcome-runes-callout select:hover {
  border-color: var(--ink-light, #7a6040);
}

.tri-clarify-row select:focus,
.iching-clarify-row select:focus,
.outcome-rune-count-row select:focus,
.clarifier-pick:focus,
.follow-up-wrap.outcome-runes-callout select:focus {
  outline: none;
  border-color: var(--ink-mid, #4a3820);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 2px rgba(196, 168, 120, 0.32);
}

.tri-clarify-row select option,
.iching-clarify-row select option,
.outcome-rune-count-row select option,
.clarifier-pick option,
.follow-up-wrap.outcome-runes-callout select option {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.05rem;
  line-height: 1.4;
  background: #fcf8ee;
  color: var(--ink, #2a1f0e);
}

/* — Field labels — */
.tri-clarify-row label,
.iching-clarify-row label,
.outcome-rune-count-row > span:first-child {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint, #a89070);
}

.tri-clarify-row,
.iching-clarify-row,
.outcome-rune-count-row {
  align-items: center;
  gap: 0.5rem 1rem;
}

.tri-clarify-row label,
.iching-clarify-row label {
  flex: 0 0 4.5rem;
  min-width: 4.5rem;
}

/* — Clarifier text fields — */
.tri-clarify textarea,
.iching-clarify textarea,
.tri-overarch-q,
.follow-up-wrap.outcome-runes-callout textarea {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink, #2a1f0e);
  border: 1px solid var(--parch-deep, #c4a878);
  border-top-color: var(--ink-faint, #a89070);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 254, 248, 0.98) 0%, rgba(250, 246, 236, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  -webkit-font-smoothing: antialiased;
}

.tri-clarify textarea::placeholder,
.iching-clarify textarea::placeholder,
.tri-overarch-q::placeholder,
.follow-up-wrap.outcome-runes-callout textarea::placeholder {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  color: var(--ink-faint, #a89070);
  opacity: 1;
}

.tri-clarify textarea:focus,
.iching-clarify textarea:focus,
.tri-overarch-q:focus,
.follow-up-wrap.outcome-runes-callout textarea:focus {
  outline: none;
  border-color: var(--ink-mid, #4a3820);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 2px rgba(196, 168, 120, 0.28);
}

/* — Action buttons (triangulation / I Ching) — */
.tri-clarify-actions button,
.iching-clarify-actions button,
button.tri-overarch-runes,
button.tri-overarch-tarot {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 0.58rem 1.15rem;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.tri-clarify-actions button,
button.tri-overarch-runes,
button.tri-overarch-tarot {
  border: 1px solid rgba(90, 48, 96, 0.34);
  background: linear-gradient(180deg, rgba(255, 254, 248, 0.96) 0%, rgba(245, 234, 208, 0.78) 100%);
  color: rgba(74, 38, 82, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 1px 2px rgba(42, 31, 14, 0.05);
}

.tri-clarify-actions button:hover:not(:disabled),
button.tri-overarch-runes:hover:not(:disabled),
button.tri-overarch-tarot:hover:not(:disabled) {
  border-color: rgba(90, 48, 96, 0.55);
  background: linear-gradient(180deg, rgba(255, 254, 248, 1) 0%, rgba(240, 228, 205, 0.92) 100%);
  color: var(--spirit, #5a3060);
}

.iching-clarify-actions button {
  border: 1px solid rgba(26, 61, 107, 0.34);
  background: linear-gradient(180deg, rgba(255, 254, 248, 0.96) 0%, rgba(245, 234, 208, 0.78) 100%);
  color: rgba(26, 61, 107, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 1px 2px rgba(42, 31, 14, 0.05);
}

.iching-clarify-actions button:hover:not(:disabled) {
  border-color: rgba(26, 61, 107, 0.55);
  background: linear-gradient(180deg, rgba(255, 254, 248, 1) 0%, rgba(240, 228, 205, 0.92) 100%);
  color: var(--water, #1a3d6b);
}

.tri-clarify-actions button:disabled,
.iching-clarify-actions button:disabled,
button.tri-overarch-runes:disabled,
button.tri-overarch-tarot:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

/* — Tarot outcome clarifier buttons — */
.follow-up-wrap.outcome-runes-callout .outcome-clarify-actions .spread-btn {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.02rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: none;
  padding: 0.58rem 1.15rem;
  border-radius: 2px;
  border: 1px solid rgba(90, 48, 96, 0.34);
  background: linear-gradient(180deg, rgba(255, 254, 248, 0.96) 0%, rgba(245, 234, 208, 0.78) 100%);
  color: rgba(74, 38, 82, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 1px 2px rgba(42, 31, 14, 0.05);
}

.follow-up-wrap.outcome-runes-callout .outcome-clarify-actions .spread-btn:hover:not(:disabled) {
  border-color: rgba(90, 48, 96, 0.55);
  background: linear-gradient(180deg, rgba(255, 254, 248, 1) 0%, rgba(240, 228, 205, 0.92) 100%);
  color: var(--spirit, #5a3060);
}

/* — Section headings — */
.tri-clarify-h,
.iching-clarify-h {
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  letter-spacing: 0.28em;
}

.follow-up-wrap.outcome-runes-callout > label {
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  letter-spacing: 0.24em;
}

/* — Manual reading: clarifier card picks — */
.card-row:has(.clarifier-pick) label {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-light, #7a6040);
}

.card-row .clarifier-pick {
  width: 100%;
}

@media (max-width: 520px) {
  .tri-clarify-row label,
  .iching-clarify-row label {
    flex: 0 0 100%;
    min-width: 0;
  }

  .tri-clarify-row select,
  .iching-clarify-row select,
  .outcome-rune-count-row select {
    flex: 1 1 100%;
  }
}