/* The form and list shared by the four 擇日 tools (date-selector-ui.js).
   Values on navy use --rt-result-ink, labels --rt-result-muted: see docs/contrast-conventions.md.
   .ads-results reserves its height so the list arriving after paint moves nothing: docs/cls-conventions.md. */
.ads-form { display: flex; flex-direction: column; gap: 14px; }
.ads-disclaimer { padding: 10px 14px; background: #fffbeb; border-left: 3px solid #a16207; border-radius: 0 6px 6px 0; font-size: 12.5px; color: var(--rt-ink-soft); }
.ads-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; background: var(--rt-surface-2); border: 1px solid var(--rt-hairline); border-radius: 8px; }
.ads-wide { grid-column: 1 / -1; }
.ads-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 0; padding: 0; margin: 0; }
.ads-field label, .ads-field legend { font-family: var(--rt-font-mono); font-size: 11px; color: var(--rt-ink-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: 0; }
.ads-field input[type="date"], .ads-field select { padding: 10px 12px; border: 1px solid var(--rt-hairline); border-radius: 6px; font-size: 14px; background: #fff; color: var(--rt-ink); width: 100%; box-sizing: border-box; }
.ads-field input:focus-visible, .ads-field select:focus-visible { outline: 2px solid #a16207; outline-offset: 1px; }
.ads-note { margin: 2px 0 0; font-size: 12px; color: var(--rt-ink-soft); min-height: 1.3em; }
.ads-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.ads-chip { display: flex; }
.ads-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ads-chip span { flex: 1; text-align: center; padding: 8px 2px; font-size: 13px; border: 1px solid var(--rt-hairline); border-radius: 6px; background: #fff; color: var(--rt-ink); cursor: pointer; }
.ads-chip input:checked + span { background: #713f12; border-color: #713f12; color: #fff; }
.ads-chip input:focus-visible + span { outline: 2px solid #a16207; outline-offset: 1px; }
.ads-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.ads-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--rt-ink); min-height: 32px; }
.ads-actions { display: flex; gap: 8px; }
.ads-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; }
.ads-btn-go { background: #854d0e; color: #fff; border: 1px solid #713f12; }
.ads-btn-go:hover { background: #713f12; }
.ads-btn-reset { background: #fff; color: #854d0e; border: 1px solid rgba(133,77,14,.4); }
.ads-results { min-height: 560px; }
.ads-summary { margin: 0 0 10px; padding: 10px 14px; font-size: 13px; line-height: 1.55; color: var(--rt-ink-soft); background: var(--rt-surface-2); border: 1px solid var(--rt-hairline); border-radius: 8px; }
.ads-empty { padding: 18px; text-align: center; color: var(--rt-ink-soft); background: var(--rt-bg-inset); border-radius: 8px; }
.ads-list { display: flex; flex-direction: column; gap: 8px; max-height: 620px; overflow-y: auto; padding-right: 4px; }
.ads-month { margin: 8px 0 0; font-size: 14px; font-family: var(--rt-font-sans); color: var(--rt-ink); }
.ads-month span { font-weight: 400; color: var(--rt-ink-soft); font-size: 12.5px; margin-left: 6px; }
.ads-day { background: var(--rt-result-bg); color: var(--rt-result-ink); border-radius: 10px; }
.ads-day summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; cursor: pointer; }
.ads-day-date { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rt-result-ink); }
.ads-day-lunar { font-size: 13.5px; color: var(--rt-result-muted); }
.ads-day-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ads-tag { padding: 2px 8px; font-size: 12px; border-radius: 4px; border: 1px solid var(--rt-result-muted); color: var(--rt-result-ink); }
.ads-tag-flag { background: #fde68a; border-color: #fde68a; color: #422006; font-weight: 700; }
.ads-day-clash { margin-left: auto; font-size: 12.5px; color: var(--rt-result-muted); }
.ads-day-body { display: flex; flex-direction: column; gap: 7px; padding: 0 14px 14px; font-size: 13px; }
.ads-day-row { display: flex; gap: 10px; }
.ads-day-lbl { flex: 0 0 64px; font-size: 11.5px; color: var(--rt-result-muted); font-weight: 700; padding-top: 1px; }
.ads-word { display: inline-block; color: var(--rt-result-ink); }
.ads-word-on { padding: 0 6px; border-radius: 4px; background: #fde68a; color: #422006; font-weight: 700; }
.ads-flag { margin: 0; padding: 8px 10px; border-radius: 6px; background: #fde68a; color: #422006; font-size: 12.5px; line-height: 1.5; }
.ads-day .ads-note { color: var(--rt-result-muted); }
.ads-rules { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0; }
.ads-rules th, .ads-rules td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--rt-hairline); vertical-align: top; }
.ads-rules th { font-size: 12px; color: var(--rt-ink-soft); }
@media (max-width: 540px) {
    .ads-inputs, .ads-options { grid-template-columns: 1fr; }
    .ads-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ads-day-clash { margin-left: 0; width: 100%; }
    .ads-rules { font-size: 12.5px; }
}