/* compatibility.php: the Compatibility Reading. Buttons, fields, lists and the section titles are the Sky Calendar's (sc- in
   sky-calendar.css); this file adds the form layout and the reading's own parts. Colours are tokens, so the forest light band
   restyles it; the forest titles are in themes/forest.css. */
.cp-gate { max-width: 560px; margin: 8px 0 40px; }
.cp-gate p { margin: 0 0 18px; font-size: calc(0.96875rem * var(--text-scale)); line-height: 1.65; color: var(--frost); }
a.sc-btn { display: inline-block; text-decoration: none; }

/* the form */
.cp-form { max-width: 720px; }
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-bottom: 14px; }
.cp-field { min-width: 0; }
.cp-wide { grid-column: 1 / -1; }
.cp-label { display: block; margin: 0 0 6px; font-family: var(--font-heading); font-size: calc(0.71875rem * var(--text-scale)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.cp-opt { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-style: italic; color: var(--frost); }
.cp-check { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: calc(0.84375rem * var(--text-scale)); color: var(--frost); }
.cp-combo { max-width: none; }
.cp-tzline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 6px; font-size: calc(0.8125rem * var(--text-scale)); color: var(--frost); }
.cp-privacy { margin: 0 0 14px; font-size: calc(0.8125rem * var(--text-scale)); font-style: italic; color: var(--frost); }
.cp-link { background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: var(--font-body); font-size: calc(0.8125rem * var(--text-scale)); color: var(--frost); text-decoration: underline; }
.cp-link:hover { color: var(--gold); }
.cp-link[hidden] { display: none; }
.cp-choice { margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cp-choice p { flex: 1 0 100%; margin: 0; color: var(--frost); font-size: calc(0.875rem * var(--text-scale)); }
.cp-choice[hidden] { display: none; }
.cp-go { padding: 12px 26px; }
.cp-go:disabled { opacity: 0.45; cursor: default; }
.cp-go:disabled:hover { background: transparent; }

/* saved readings */
.cp-open { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.cp-open:hover { color: var(--gold); text-decoration: underline; }
.cp-del { flex: none; background: none; border: 0; padding: 2px 4px; cursor: pointer; font-family: var(--font-body); font-size: calc(0.75rem * var(--text-scale)); color: var(--frost); opacity: 0.7; }
.cp-del:hover { opacity: 1; color: var(--error); }

/* the reading */
.cp-title { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 400; font-size: calc(1.625rem * var(--text-scale)); color: var(--gold); }
.cp-rel { margin: 0 0 14px; font-size: calc(0.6875rem * var(--text-scale)); letter-spacing: 0.16em; color: var(--frost); }
.cp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.cp-chips li { padding: 5px 14px; border: 1px solid rgba(var(--gold-rgb), 0.4); border-radius: 999px; font-size: calc(0.8125rem * var(--text-scale)); color: var(--bone); }
.cp-h { margin: 28px 0 12px; font-family: var(--font-heading); font-weight: 400; font-size: calc(0.875rem * var(--text-scale)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.cp-p { margin: 0 0 12px; max-width: 70ch; font-size: calc(0.96875rem * var(--text-scale)); line-height: 1.7; color: var(--bone); }
.cp-item { margin: 0 0 14px; }
.cp-item h4 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 400; font-size: calc(0.90625rem * var(--text-scale)); color: var(--bone); }
.cp-item h4 small { margin-left: 8px; font-family: var(--font-body); font-style: italic; font-size: calc(0.75rem * var(--text-scale)); color: var(--frost); }
.cp-item .cp-p { margin: 0; }
.cp-bul { margin: 0 0 8px; padding-left: 20px; max-width: 70ch; }
.cp-bul li { margin: 0 0 10px; font-size: calc(0.96875rem * var(--text-scale)); line-height: 1.7; color: var(--bone); }
.cp-closing { margin: 24px 0 18px; max-width: 70ch; font-style: italic; font-size: calc(1rem * var(--text-scale)); line-height: 1.7; color: var(--gold); }
.cp-failed { max-width: 60ch; margin: 18px 0; font-style: italic; line-height: 1.6; color: var(--frost); }

.cp-thinking { padding: 30px 0; text-align: center; color: var(--frost); }
.cp-thinking p { margin: 6px 0; font-size: calc(0.9375rem * var(--text-scale)); }
.cp-thinking small { font-size: calc(0.78125rem * var(--text-scale)); opacity: 0.7; }
.cp-runes { margin-bottom: 8px; font-size: calc(1.875rem * var(--text-scale)); letter-spacing: 0.3em; color: var(--gold); font-family: var(--font-rune), 'Segoe UI Symbol', 'Noto Sans Runic', serif; }
.cp-runes span { opacity: 0.18; animation: cp-rune 2.2s ease-in-out infinite; }
.cp-runes span:nth-child(2) { animation-delay: .3s; }
.cp-runes span:nth-child(3) { animation-delay: .6s; }
.cp-runes span:nth-child(4) { animation-delay: .9s; }
.cp-runes span:nth-child(5) { animation-delay: 1.2s; }
@keyframes cp-rune { 0%, 100% { opacity: 0.18; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cp-runes span { animation: none; opacity: 0.7; } }

@media (max-width: 600px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-title { font-size: calc(1.3125rem * var(--text-scale)); }
}