/* A small, local example that works with both site themes. */
.activity-plan[hidden], .plan-result[hidden], #activity-plan-try[hidden] { display: none; }
.activity-plan { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.plan-intro h2 { max-width: 500px; }
.plan-intro p { max-width: 400px; }
.plan-panel { padding: clamp(24px, 4vw, 36px); border: 1px solid var(--card-border); border-radius: 22px; background: var(--card-bg); }
.plan-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.plan-fields label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 700; }
.plan-fields select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--button-bg); color: var(--text); font: inherit; }
.plan-fields select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.plan-result { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.plan-result h3 { margin: 12px 0; font-size: clamp(24px, 3vw, 32px); }
.plan-result h3:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.plan-result p { margin: 0 0 18px; }
.plan-note { margin: 24px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (max-width: 800px) { .activity-plan { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 480px) { .plan-fields { grid-template-columns: minmax(0, 1fr); } }