/*
 * AI Day Planner page.
 * Mobile-first at 390px, design tokens only, every text/background pair
 * chosen from combinations already contrast-verified elsewhere in the theme
 * (dark ink on tints, light pink eyebrow on gradient, white on gradient).
 */

.ph-planner { background: var(--ph-color-bg, #f5f7fa); padding-bottom: 64px; }
.ph-planner__wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* Hero: same gradient family as the city hub hero. */
.ph-planner__hero { background: linear-gradient(160deg, #8a2e54, #c2436f 70%, var(--ph-color-primary, #e8568a)); color: #fff; padding: 44px 0 40px; margin-bottom: 26px; }
.ph-planner__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd0e0; }
.ph-planner__title { font-size: 30px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.12; margin: 6px 0 6px; }
.ph-planner__sub { font-size: 14.5px; opacity: 0.94; max-width: 520px; margin: 0; }

/* Form card. */
.ph-planner__form { background: var(--ph-color-surface, #fff); border: 1px solid var(--ph-color-line, #e6e8ee); border-radius: 20px; box-shadow: 0 2px 10px rgba(33, 37, 58, 0.06); padding: 22px; }
.ph-planner__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ph-planner__field { display: block; border: none; padding: 0; margin: 0; }
.ph-planner__label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ph-color-ink-soft, #5a5f73); margin-bottom: 7px; }
.ph-planner__field select { width: 100%; font: inherit; font-size: 14px; font-weight: 600; color: var(--ph-color-ink, #21253a); background: var(--ph-color-bg, #f5f7fa); border: 1px solid var(--ph-color-line, #e6e8ee); border-radius: 12px; padding: 11px 13px; }

.ph-planner__toggle { display: flex; gap: 8px; }
.ph-planner__toggle label { flex: 1; }
.ph-planner__toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ph-planner__toggle span { display: block; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ph-color-ink, #21253a); background: var(--ph-color-bg, #f5f7fa); border: 1.5px solid var(--ph-color-line, #e6e8ee); border-radius: 999px; padding: 10px 12px; min-height: 44px; box-sizing: border-box; cursor: pointer; }
.ph-planner__toggle input:checked + span { background: var(--ph-color-primary, #e8568a); border-color: var(--ph-color-primary, #e8568a); color: #fff; }
.ph-planner__toggle input:focus-visible + span { outline: 2px solid var(--ph-color-ink, #21253a); outline-offset: 2px; }

.ph-planner__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.ph-planner__go { font: inherit; font-size: 15px; font-weight: 800; color: #fff; background: var(--ph-color-primary, #e8568a); border: none; border-radius: 999px; padding: 13px 26px; min-height: 44px; cursor: pointer; }
.ph-planner__go:hover { background: #c23a6c; }
.ph-planner__go:disabled { opacity: 0.6; cursor: wait; }
.ph-planner__quota { font-size: 12.5px; font-weight: 600; color: var(--ph-color-ink-soft, #5a5f73); }

/* Status line. */
.ph-planner__status { margin-top: 16px; font-size: 13.5px; font-weight: 600; border-radius: 12px; padding: 12px 15px; }
.ph-planner__status.is-busy { background: #edeff5; color: var(--ph-color-ink, #21253a); }
.ph-planner__status.is-note { background: #edeff5; color: var(--ph-color-ink-soft, #5a5f73); }
.ph-planner__status.is-error { background: #fbe9e7; color: #a13224; }
.ph-planner__status.is-wall { background: var(--ph-color-surface, #fff); border: 1px solid var(--ph-color-line, #e6e8ee); color: var(--ph-color-ink, #21253a); }
.ph-planner__signup { font-weight: 800; color: #c23a6c; }

/* Result. */
.ph-planner__result { margin-top: 26px; }
.ph-planner__intro { font-size: 16px; font-weight: 600; color: var(--ph-color-ink, #21253a); margin: 0 0 16px; }
.ph-planner__stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: ph-stop; }
.ph-planner__stop { background: var(--ph-color-surface, #fff); border: 1px solid var(--ph-color-line, #e6e8ee); border-radius: 16px; box-shadow: 0 2px 10px rgba(33, 37, 58, 0.06); padding: 16px 18px 16px 54px; position: relative; counter-increment: ph-stop; }
.ph-planner__stop::before { content: counter(ph-stop); position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 50%; background: var(--ph-color-primary, #e8568a); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ph-planner__stop-role { font-size: 11px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ph-color-ink-soft, #5a5f73); }
.ph-planner__stop-head { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; }
.ph-planner__stop-name { font-size: 16.5px; font-weight: 800; color: var(--ph-color-ink, #21253a); text-decoration: none; }
.ph-planner__stop-name:hover { color: #c23a6c; }
.ph-planner__stop-band { font-size: 12.5px; font-weight: 700; color: var(--ph-color-ink-soft, #5a5f73); }
.ph-planner__stop-blurb { font-size: 13.5px; color: var(--ph-color-ink-soft, #5a5f73); margin: 6px 0 0; line-height: 1.5; }
.ph-planner__foot { margin-top: 16px; }
.ph-planner__again { font: inherit; font-size: 13.5px; font-weight: 700; color: var(--ph-color-ink, #21253a); background: var(--ph-color-surface, #fff); border: 1px solid var(--ph-color-line, #e6e8ee); border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; }
.ph-planner__again:hover { border-color: var(--ph-color-primary, #e8568a); color: #c23a6c; }

@media (min-width: 640px) {
	.ph-planner__grid { grid-template-columns: 1fr 1fr; }
	.ph-planner__title { font-size: 36px; }
}