/* The parents' forms (withdraw.html, reschedule.html) in the dashboard's look (2026-10-11, Emilio: "use the new
   UI colors and branding from the dashboard so it looks very friendly and easy to use"). Loaded after each form's
   own styles, so it only re-dresses them: the sidebar's navy gradient as a welcome banner with the logo, the
   pool-water backdrop, frosted white cards, the portal's blue buttons (navy on hover), roomy rounded fields and
   choices that are easy to tap on a phone. Tokens match schedule.css. */
:root { --navy: #1B4B72; --blue: #2773b1; --sky: #6FBED7; --lime: #c4e538; --water: #f2f8fc; --line: #dbe5ee; }
body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', Inter, system-ui, sans-serif;
  background: radial-gradient(55% 45% at 85% 0%, rgba(111,190,215,.35), transparent 70%), radial-gradient(45% 40% at 30% 100%, rgba(196,229,56,.16), transparent 70%),
    radial-gradient(60% 50% at 0% 40%, rgba(39,115,177,.12), transparent 70%), #eef5f9; background-attachment: fixed; }
.wrap { padding-top: 24px; }

/* Welcome banner: the dashboard sidebar's gradient, the logo in a white ring */
.head { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; margin-bottom: 16px; padding: 24px 26px;
  border-radius: 22px; color: #fff; background: linear-gradient(165deg, #1f5885, #103452); box-shadow: 0 18px 40px -22px rgba(16,52,82,.7); position: relative; overflow: hidden; }
.head::after { content: ''; position: absolute; right: -40px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(111,190,215,.35), transparent 70%); pointer-events: none; }
.head img { grid-row: 1 / span 2; width: 72px; height: 72px; box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 8px 20px -8px rgba(0,0,0,.4); }
.head h1 { margin: 0; color: #fff; font-size: clamp(24px, 4.4vw, 30px); letter-spacing: -.02em; }
.head p { margin: 0; max-width: none; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.5; }

/* The form: a frosted card, like the dashboard's panels */
.card { background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.95); border-radius: 22px; box-shadow: 0 1px 2px rgba(18,33,46,.04), 0 18px 40px -22px rgba(27,75,114,.45); padding: 26px 26px 24px; }
.test { background: rgba(255,244,224,.9); color: #8a5a00; border: 1px solid rgba(163,93,0,.14); border-radius: 14px; }
.note { border-radius: 14px; }
.note.info { background: var(--water); border: 1px solid #e1edf6; }
.note.warn { border: 1px solid rgba(163,93,0,.12); }

/* Questions: clear labels, roomy fields */
legend, .lbl { font-size: 16px; letter-spacing: -.005em; }
fieldset { margin-bottom: 26px; }
input[type=text], input[type=tel], input[type=email], textarea, .ns-btn { border-radius: 12px; padding: 13px 14px; min-height: 50px; border-color: var(--line); background: #fff; }
input:not([type=radio]):not([type=checkbox]):focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(39,115,177,.15); }
/* A radio or tick box never rings itself (2026-10-13, Emilio: "when I click on one of these it has a square box around
   the circle"): the halo above and the page's :focus-visible outline both drew around the input's square box. The
   card around it shows the pick, and a keyboard user gets the ring on the whole rounded card instead. */
input[type=radio], input[type=checkbox] { box-shadow: none; }
input[type=radio]:focus-visible, input[type=checkbox]:focus-visible { outline: none; }
.cards label:has(input:focus-visible), .swim-pick label:has(input:focus-visible), .ways label:has(input:focus-visible),
.checks label:has(input:focus-visible), .follow .chips label:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
.cards label, .swim-pick label, .ways label, .checks label, .follow .chips label { -webkit-tap-highlight-color: transparent; }
input[readonly] { background: var(--water); color: var(--navy); }
.cards label, .swim-pick label, .ways label { border-radius: 14px; padding: 15px 16px; background: #fff; transition: border-color .15s, background .15s; }
.cards label:hover, .swim-pick label:hover, .ways label:hover { border-color: #b9d6ea; }
.cards label:has(input:checked), .swim-pick label:has(input:checked) { border-color: var(--blue); background: var(--water); box-shadow: 0 0 0 1px var(--blue); }

/* Buttons: the portal's blue, navy on hover */
.submit, .stay, .offer .stay, .pay .stay { background: var(--blue); border-radius: 14px; min-height: 54px; font-size: 16.5px; box-shadow: 0 10px 22px -12px rgba(39,115,177,.8); transition: background .15s, transform .15s; }
.submit:hover, .stay:hover, .offer .stay:hover, .pay .stay:hover { background: var(--navy); }
.submit:active, .stay:active { transform: translateY(1px); }
.find { background: var(--blue); border-color: var(--blue); color: #fff; border-radius: 12px; min-height: 48px; padding: 0 20px; }
.find:hover { background: var(--navy); border-color: var(--navy); }
.leave, .add { border-radius: 14px; }
.times button { min-height: 46px; }
.times button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); }

/* The "Before you go" step and the fee: friendly panels */
.offer { border: 0; background: linear-gradient(180deg, #f5fbe3, #fff 70%); box-shadow: 0 0 0 2px var(--lime), 0 14px 30px -20px rgba(77,92,0,.5); border-radius: 18px; }
.pay { border-radius: 18px; box-shadow: 0 14px 30px -22px rgba(27,75,114,.5); }
.who { border: 1px solid #e1edf6; }
.done h2 { font-size: 24px; }

@media (max-width: 560px) {
  .wrap { padding: 14px 12px 48px; }
  .head { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 22px 18px; }
  .head img { grid-row: auto; width: 64px; height: 64px; }
  .card { padding: 20px 16px 18px; border-radius: 20px; }
}

/* The top of the forms, light (2026-10-11, "this wall of text doesn't look good"): the test bar is one line with
   its button beside it, the notes are two short tips, the reschedule policy is three tags. */
.test { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; padding: 8px 8px 8px 14px; font-size: 13px; }
/* display:flex above beat the hidden attribute, so the live forms showed families "Test mode" (review, 2026-10-12).
   The bar is hidden in the markup and the practice pages show it. */
.test[hidden] { display: none; }
.test .test-fill { margin: 0; min-height: 38px; padding: 8px 14px; font-size: 13.5px; }
.tips { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.tips li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.tips svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.tips li:first-child svg { stroke: #a35d00; }
.tips b { color: var(--navy); }
.tips a { color: var(--blue); font-weight: 700; }
.policy { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.policy li { padding: 6px 12px; border-radius: 99px; background: var(--water); border: 1px solid #dbe9f4; color: var(--navy); font-size: 13.5px; font-weight: 600; }
#moreDays { background: #fff; color: var(--blue); border: 1.5px solid #b9d6ea; }   /* secondary: the main button is the move */
#moreDays:hover { background: var(--water); color: var(--navy); border-color: var(--blue); }