/* Qing Palace Chart — 清宮表 生男生女對照 — RT-FAM-011
   Widget styling. The form shell + ad/section styling come from the platform
   tool layout; this file scopes the qp-* components. Neutral AMBER theme
   (accent #B45309) — deliberately NOT blue/pink gender-stereotype colours.
   The qp-disclaimer is the STRONGEST disclaimer in the repo: thick amber/red
   left border, tinted panel, prominent. Loaded automatically by show.blade.php. */

.qp-form { display: flex; flex-direction: column; gap: 14px; }

/* ── STRONGEST disclaimer in the repo — visually unmissable ───────────────── */
.qp-disclaimer {
  padding: 16px 18px;
  background: #FEF2F2;                       /* soft red wash */
  border: 1px solid rgba(180, 83, 9, .30);
  border-left: 6px solid #B91C1C;           /* thick red bar */
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  color: #7F1D1D;
  line-height: 1.6;
}
.qp-disclaimer .qp-disc-head {
  display: block;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .01em;
  margin-bottom: 8px;
  color: #991B1B;
  text-transform: uppercase;
}
.qp-disclaimer ul { margin: 0; padding-left: 1.15em; }
.qp-disclaimer li { margin: 4px 0; }
.qp-disclaimer strong { color: #991B1B; }

.qp-inputs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px;
  background: var(--rt-surface-2); border: 1px solid var(--rt-hairline); border-radius: 8px;
}
@media (max-width: 720px) { .qp-inputs { grid-template-columns: 1fr; } }

.qp-field label {
  font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
  display: block; margin-bottom: 4px;
}
.qp-field input {
  padding: 10px 12px; border: 1px solid var(--rt-hairline); border-radius: 6px;
  font-size: 15px; background: #fff; width: 100%;
}
.qp-field input:focus {
  outline: none; border-color: #B45309; box-shadow: 0 0 0 3px rgba(180,83,9,.12);
}

.qp-actions { display: flex; gap: 8px; }
.qp-btn {
  padding: 10px 18px; font-size: 13px; border-radius: 6px; cursor: pointer;
  font-family: var(--rt-font-mono); text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.qp-btn-go { background: #B45309; color: #fff; border: 1px solid #92400E; }
.qp-btn-go:hover { background: #92400E; }
.qp-btn-reset { background: #fff; color: #92400E; border: 1px solid rgba(180,83,9,.4); }

.qp-results { padding: 0; background: transparent; }
.qp-empty { padding: 16px; text-align: center; color: var(--rt-ink-muted); font-style: italic; }

/* ── Computed lunar meta (虛歲 + 農曆月份) ─────────────────────────────────── */
.qp-meta { padding: 14px 18px; background: var(--rt-bg-inset); border-radius: 8px; margin-bottom: 12px; }
.qp-meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.qp-meta-lbl { color: var(--rt-ink-muted); font-family: var(--rt-font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.qp-meta-val { font-family: var(--rt-font-sans); color: var(--rt-ink); font-size: 15px; text-align: right; font-weight: 600; }

/* ── Result card — NEUTRAL (amber accents, no blue/pink stereotyping) ──────── */
.qp-result-card {
  padding: 20px 22px; text-align: center; border-radius: 12px; margin-bottom: 14px;
  background: var(--rt-result-bg); color: var(--rt-result-ink);
  border: 1px solid rgba(180,83,9,.30); border-top: 4px solid #B45309;
}
.qp-result-lbl { font-family: var(--rt-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rt-result-muted); font-weight: 700; margin-bottom: 8px; }
.qp-result-lead { font-size: 14px; color: var(--rt-result-muted); margin-bottom: 6px; }
.qp-result-val { font-family: var(--rt-font-sans); font-size: 38px; line-height: 1.1; font-weight: 700; color: var(--rt-result-ink); }
/* Both outcomes use the same neutral amber underline — no gendered colour. */
.qp-result-boy .qp-result-val,
.qp-result-girl .qp-result-val { color: var(--rt-result-ink); }

/* ── Matched row (chart context) ──────────────────────────────────────────── */
.qp-row-wrap { padding: 14px 16px; background: #fff; border: 1px solid var(--rt-hairline); border-radius: 8px; margin-bottom: 12px; }
.qp-row-title { font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-bottom: 10px; }
.qp-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
@media (max-width: 560px) { .qp-row { grid-template-columns: repeat(6, 1fr); } }
.qp-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 2px; border-radius: 6px; border: 1px solid var(--rt-hairline);
  background: var(--rt-surface-2); font-size: 11px;
}
.qp-cell-mo { font-family: var(--rt-font-mono); font-size: 10px; color: var(--rt-ink-muted); }
.qp-cell-val { font-size: 11.5px; font-weight: 600; color: var(--rt-ink); }
/* Boy/girl cells: faint warm vs cool tint, kept muted + low-saturation so the
   chart reads as a neutral grid, not a blue/pink gender map. */
.qp-cell-boy { background: #FEFCE8; }
.qp-cell-girl { background: #F5F3FF; }
.qp-cell-match {
  border: 2px solid #B45309; background: #FEF3C7;
  box-shadow: 0 0 0 3px rgba(180,83,9,.14);
}
.qp-cell-match .qp-cell-val { color: #92400E; font-weight: 800; }

/* ── Out-of-range note ────────────────────────────────────────────────────── */
.qp-outrange {
  padding: 14px 16px; background: #FEF3C7; border: 1px solid rgba(180,83,9,.30);
  border-left: 5px solid #B45309; border-radius: 0 8px 8px 0;
  font-size: 13px; color: #78350F; line-height: 1.6;
}

/* ── Per-result reminder (reinforces folklore framing under every result) ──── */
.qp-reminder {
  padding: 11px 15px; background: #FEF2F2; border: 1px solid rgba(180,83,9,.22);
  border-left: 4px solid #B91C1C; border-radius: 0 6px 6px 0;
  font-size: 12.5px; color: #7F1D1D; line-height: 1.55;
}