/*
 * Styles for the views the shell swaps into its body: the profile, and the
 * sign-in card. Named views.css rather than profile.css from 0.9.6.4, when
 * the second one arrived — a file called profile.css holding the sign-in
 * form is the kind of name that stops being true and never gets fixed.
 *
 * WHY THIS FILE EXISTS
 * 0.9.6 made the profile a VIEW inside court-connectors.html rather than a
 * page of its own. The shell owns the header and the tab bar; this owns the
 * cards that get swapped into the body. Keeping it separate from header.css
 * means the shell only pays for it on the pages that show it, and keeps
 * court-connectors.html from absorbing another 150 lines.
 *
 * Rules for the old page chrome (.header-right, .header-date-pill,
 * .hamburger-btn) were dropped on the way: the fragment has no header, so
 * nothing here can match them.
 */

:root{ --navy:#12203D; --navy-light:#2A4D80; --paper:#EEF1F6; --brick:#B54834; --muted:#8894AC; --amber:#E0B84A; --ball:#CFE267; }
  *{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--paper);min-height:100vh;}
/* Clears the fixed tab bar, same derivation the app uses. */
  .wrap{max-width:720px;margin:0 auto;padding:30px 24px calc(var(--tabbar-h) + 46px + env(safe-area-inset-bottom, 0px));}
/* .backLink removed in 0.9.5 — the tab bar's Home tab is the way back,
     and a second one sitting just above it was the same trip twice. */
  /* Settings moved here from the app's header panel in 0.9.5, when the
     header's account button became a tab in the bottom tab bar and there
     was no longer anything to hang a dropdown off. Both toggles write the
     SAME localStorage keys the app reads — see the script at the bottom —
     so this page is a second writer of that state, not a second copy of it. */
  .settingRow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #EEF1F6;}
  .settingRow[hidden]{display:none;}
.settingRow:last-of-type{border-bottom:none;}
.settingText{min-width:0;}
.settingLabel{font-size:13px;font-weight:600;color:var(--navy);}
.settingHint{font-size:12px;color:var(--muted);margin-top:2px;}
.miniToggle{width:40px;height:23px;border-radius:999px;border:none;background:#DEE4EE;position:relative;cursor:pointer;padding:0;transition:background .15s ease;flex-shrink:0;}
.miniToggle.on{background:var(--skin-avail, var(--ball));}
.miniToggle::after{content:'';width:19px;height:19px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px rgba(0,0,0,0.2);transition:left .15s ease;}
.miniToggle.on::after{left:19px;}
.buildTag{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--brick);margin-top:16px;padding-top:14px;border-top:1px solid #EEF1F6;}
/* Messenger, moved off the app's court grid in 0.9.5. As a floating bubble
     it fought the tab bar and the notification deck for the same corner; as a
     row here it sits with the other things you do to your account rather than
     over the thing you came to read. */
  .contactRow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;
    background:var(--paper);text-decoration:none;color:var(--navy);transition:background .15s ease;}
.contactRow:hover{background:#E4E9F1;}
.contactIcon{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contactIcon svg{width:21px;height:21px;display:block;}
.contactTitle{font-size:13px;font-weight:600;display:block;}
.contactHint{font-size:12px;color:var(--muted);margin-top:1px;}
/* The app's footer in full — version, commit link, copyright. Moved here so
     the court grid simply ends when the courts do. */
  .colophon{text-align:center;font-size:11px;color:var(--muted);line-height:1.7;
    margin-top:4px;padding-top:16px;border-top:1px solid #EEF1F6;}
.colophon a{color:inherit;}
/* The "Courts tracked & upcoming" wall, moved here from the app's footer
     in 0.9.5. Same grayscale-at-rest treatment it had there — these are
     other people's marks and should sit quietly. */
  .wallGrid{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:4px;}
.wallGrid img{height:28px;width:auto;max-width:104px;object-fit:contain;filter:grayscale(70%);opacity:0.6;transition:filter .15s ease,opacity .15s ease;}
@media (hover:hover){ .wallGrid img:hover{filter:grayscale(0%);opacity:1;} }
.card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 1px 2px rgba(16,23,37,0.06),0 4px 14px rgba(16,23,37,0.12);margin-bottom:20px;}
.profileHead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.profileHeadLeft{display:flex;align-items:center;gap:14px;}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--skin-main, var(--navy-light));object-fit:cover;display:block;}
.avatarFallback{width:44px;height:44px;border-radius:50%;background:var(--skin-main, var(--navy-light));color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;}
/* Photo upload placeholder — hover/focus reveals a camera icon over the
     avatar, click opens a file picker and previews the pick locally.
     Nothing is persisted server-side yet (no photo column/upload route),
     this is purely the UI affordance so it's ready when that lands. */
  .avatarWrap{position:relative;width:44px;height:44px;border-radius:50%;cursor:pointer;flex-shrink:0;display:block;overflow:hidden;}
.avatarWrap:hover .avatarUploadOverlay,.avatarWrap:focus-within .avatarUploadOverlay{opacity:1;}
.avatarUploadOverlay{position:absolute;inset:0;border-radius:50%;background:rgba(18,32,61,0.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s ease;pointer-events:none;}
.avatarUploadOverlay svg{width:18px;height:18px;color:#fff;}
.avatarFileInput{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border-radius:50%;margin:0;}
.profileNameRow{display:flex;align-items:center;gap:6px;}
.profileName{font-size:14px;font-weight:600;color:var(--navy);}
.editNameBtn{background:none;border:none;padding:2px;cursor:pointer;color:var(--muted);display:flex;align-items:center;}
.editNameBtn:hover{color:var(--skin-main, var(--navy-light));}
.editNameBtn svg{width:14px;height:14px;}
.editNameForm{display:none;align-items:center;gap:8px;margin:2px 0 4px;}
.editNameForm.open{display:flex;}
.editNameForm input{font-size:14px;padding:6px 10px;border:1.5px solid #DEE4EE;border-radius:6px;color:var(--navy);font-family:'Inter',sans-serif;}
.editNameForm button{padding:6px 12px;font-size:12.5px;font-weight:600;border:none;border-radius:999px;background:var(--navy);color:#fff;cursor:pointer;white-space:nowrap;}
.profileEmail{font-size:12px;color:var(--muted);}
.btnLogout{padding:8px 14px;font-size:11.5px;font-weight:600;border:1.5px solid #DEE4EE;border-radius:999px;background:none;color:var(--muted);cursor:pointer;white-space:nowrap;}
.headActions{display:flex;align-items:center;gap:8px;}
/* Unlike Log out (only turns brick on hover), this is brick-colored at
     rest — irreversible enough that it shouldn't read as just another
     neutral action next to it. */
  .btnDeleteAccount{padding:8px 14px;font-size:11.5px;font-weight:600;border:1.5px solid var(--brick);border-radius:999px;background:none;color:var(--brick);cursor:pointer;white-space:nowrap;}
.btnDeleteAccount:hover{background:var(--brick);color:#fff;}
.deleteModalOverlay{display:none;position:fixed;inset:0;background:rgba(18,32,61,0.55);z-index:2000;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;}
.deleteModalOverlay.open{display:flex;}
.deleteModal{background:#fff;border-radius:14px;padding:24px;max-width:400px;width:100%;box-shadow:0 8px 30px rgba(16,23,37,0.25);box-sizing:border-box;}
.deleteModalTitle{font-size:17px;font-weight:700;color:var(--navy);margin:0 0 8px;}
.deleteModalBody{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 16px;}
.deleteModalBody strong{color:var(--navy);}
.deleteModalHint{font-size:12.5px;color:var(--muted);margin:0 0 8px;}
.deleteModalHint strong{color:var(--navy);}
.deleteModalInput{width:100%;padding:10px 12px;font-size:14px;border:1.5px solid #DEE4EE;border-radius:8px;color:var(--navy);font-family:'Inter',sans-serif;box-sizing:border-box;margin-bottom:16px;}
.deleteModalInput:focus{outline:none;border-color:var(--brick);}
.deleteModalActions{display:flex;gap:10px;justify-content:flex-end;}
.deleteModalCancel{padding:9px 16px;font-size:13px;font-weight:600;border:1.5px solid #DEE4EE;border-radius:999px;background:none;color:var(--muted);cursor:pointer;}
.deleteModalConfirm{padding:9px 16px;font-size:13px;font-weight:600;border:none;border-radius:999px;background:var(--brick);color:#fff;cursor:pointer;}
.deleteModalConfirm:disabled{opacity:0.4;cursor:not-allowed;}
/* Same avatar-button treatment as the dashboard's header hamburger/account
     button — here it's a plain link back to CourtPop, not a dropdown, since
     this page already covers account info and has its own Log out button. */
  /* Static cast-shadow only, matching the dashboard's .ball-icon — its
     hover-scale/spin/squash animation is intentionally left out here. */
  .ball-icon{transform-box:fill-box;transform-origin:center;position:relative;z-index:2;overflow:visible;filter:drop-shadow(0 7px 3px rgba(0,0,0,0.22));}
/* .header-right and .header-date-pill went with the one-row header in
     0.9.5. .hamburger-btn below stays: it is the avatar slot inside the
     tab bar's My Profile tab, resized there by header.css. */
  .hamburger-btn{width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,0.14);color:var(--paper);display:flex;align-items:center;justify-content:center;transition:background .15s ease, transform .15s ease;text-decoration:none;}
.btnLogout:hover{border-color:var(--brick);color:var(--brick);}
.sectionTitle{font-size:14px;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:0.03em;margin:0 0 4px;}
.sectionHint{font-size:12.5px;color:var(--muted);margin:0 0 14px;}
.formRow{margin-bottom:14px;}
.formLabel{display:block;font-size:11.5px;font-weight:600;color:var(--navy);margin-bottom:6px;}
.formInput{width:100%;padding:10px 12px;font-size:14px;font-family:'Inter',sans-serif;border:1.5px solid #DEE4EE;border-radius:8px;color:var(--navy);}
.formInput:focus{outline:none;border-color:var(--skin-main, var(--navy-light));}
/* Starts locked whenever a credential is already on file — greyed out,
     blocks typing, but tapping it (see the script below) unlocks it for
     an in-place update instead of forcing "Remove and opt out" first. */
  .formInput.lockedField{background:#F1F3F7;color:var(--muted);cursor:pointer;}
.formInput.lockedField::placeholder{color:var(--muted);}
.formButtonRow{display:flex;gap:10px;}
.formButtonRow .btnPrimary,.formButtonRow .btnDanger{flex:1;text-align:center;}
/* Narrow phones: side-by-side Save/Remove wraps to 2 lines each — stack
     them full-width instead, same breakpoint header.css already uses. */
  @media (max-width:400px){
    .formButtonRow{flex-direction:column;}
.formButtonRow .btnPrimary,.formButtonRow .btnDanger{flex:none;width:100%;}
  }
.btnPrimary{padding:10px 18px;font-size:13.5px;font-weight:600;border:none;border-radius:999px;background:var(--navy);color:#fff;cursor:pointer;}
.btnPrimary:hover{background:var(--skin-main, var(--navy-light));}
.btnDanger{padding:10px 18px;font-size:13.5px;font-weight:600;border:1.5px solid var(--brick);border-radius:999px;background:none;color:var(--brick);cursor:pointer;}
.btnDanger:not(:disabled):hover{background:#FCEBEB;}
.btnDanger:disabled{border-color:#DEE4EE;color:var(--muted);cursor:not-allowed;}
.cardEyebrow{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;display:flex;align-items:center;gap:5px;margin-bottom:10px;}
.cardEyebrow svg{width:13px;height:13px;flex-shrink:0;}
.venueOutboundLink{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--skin-main, var(--navy-light));text-decoration:none;margin-top:10px;}
.venueOutboundLink:hover{text-decoration:underline;}
.venueOutboundLink svg{width:12px;height:12px;flex-shrink:0;}
.statusOn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#3B6D11;font-weight:600;}
.statusOff{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);font-weight:600;}
/* Same 26px circle size as the dashboard's per-venue update-btn. */
  .statusBadge{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.statusBadge svg{width:14px;height:14px;}
.statusBadge.todo{background:#DEE4EE;color:var(--muted);box-shadow:0 1px 3px rgba(16,23,37,0.18);transition:background .15s ease, box-shadow .15s ease;}
.statusBadge.done{background:var(--skin-avail, var(--ball));color:var(--skin-avail-text, #3B6D11);}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.disclosure{background:var(--paper);border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:1.6;color:var(--navy);margin-bottom:16px;}
.venueRow{border:1px solid #EEF1F6;border-radius:10px;padding:14px;margin-bottom:12px;transition:border-color .15s ease, box-shadow .15s ease;}
.venueRow:last-child{margin-bottom:0;}
/* Collapsed rows are a click target (expand to fix/review) — hover reads
     like a button. Once open it's a form, not a button, so the lift stops. */
  .venueRow:not(.static):not(.open):hover{border-color:var(--skin-main, var(--navy-light));box-shadow:0 2px 8px rgba(16,23,37,0.10);}
.venueHead{display:flex;align-items:center;gap:10px;cursor:pointer;}
/* The venue's badge since 0.9.11 (no venue logos) — it fills the tile. */
.venueLogo{width:32px;height:32px;border-radius:8px;object-fit:cover;background:var(--paper);padding:0;}
.venueName{font-size:15px;font-weight:600;color:var(--navy);flex:1;}
.venueDetail{font-size:12.5px;color:var(--muted);margin:0 0 10px;}
/* Collapsed by default, same click-to-expand pattern as the dashboard's
     connector cards — matters more here as more venues get added (3-6
     login rows all expanded at once would make this page unwieldy). */
  .venueBody{display:none;margin-top:10px;}
.venueRow.open .venueBody{display:block;}
/* Static rows: RQ/Beat need no login at all, so there's nothing to
     expand — shown purely so people know they're already covered. */
  .venueRow.static .venueHead{cursor:default;}

/* ============================================================
   SIGN-IN VIEW
   Folded in from auth_base_style.html when /auth/login became a fragment in
   0.9.6.4. Only the .auth* rules came across: the body, background and font
   rules that template carried belong to the shell now, and bringing them
   would have let a view restyle the page around it.
   ============================================================ */
/* ---------------------------------------------------------------------------
   SIGN-IN VIEW LAYOUT
   ---------------------------------------------------------------------------
   The sign-in card used to be a page of its own, and got its centring from
   that page's <body>. 0.9.6.4 made it a view inside the shell and folded this
   file's .auth* rules across, but not the body-level centring — so the card
   landed flush against the top-left corner.

   :not([hidden]) is load-bearing, not decoration. Both view slots carry the
   `hidden` attribute while they are off-stage, and `hidden` only works
   because the UA stylesheet says display:none. A bare `display:flex` here is
   a more specific rule and would beat it, leaving the sign-in card parked on
   top of the home page permanently.

   Only the sign-in view is centred. #view-profile is a long scrolling page
   and must keep the default block flow.

   100dvh rather than 100vh so that a phone's address bar appearing does not
   push the card off centre — the same unit the notification overlay uses.
--------------------------------------------------------------------------- */
#view-signin:not([hidden]){
  display:flex;
  align-items:center;
  justify-content:center;
  /* The gap between the sticky header and the floating tab bar. */
  min-height:calc(100dvh - var(--header-h, 72px)
                  - var(--tabbar-h, 64px) - var(--tabbar-bottom, 12px) - 20px);
  padding:20px 16px;
  box-sizing:border-box;
}

.authCard{background:#fff;border-radius:14px;padding:26px 24px;width:100%;max-width:380px;
            box-shadow:0 1px 2px rgba(16,23,37,0.06),0 4px 14px rgba(16,23,37,0.12);}
.authTitle{text-align:center;font-size:17px;font-weight:600;color:var(--navy);margin-bottom:4px;}
.authSub{text-align:center;font-size:12px;color:var(--muted);margin-bottom:16px;line-height:1.5;}
.authLabel{display:block;font-size:11.5px;color:#5F6B85;margin-bottom:4px;font-weight:500;}
.authInput{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:10px 11px;
             font-size:16px;font-family:'Inter',sans-serif;color:var(--navy);margin-bottom:10px;}
  /* 16px, not 13px: iOS Safari zooms the whole page in on focus for any
     input under 16px, which throws the layout off centre and cannot be
     undone without a reload. */
  .authInput:focus{outline:none;border-color:var(--skin-main, var(--navy-light));}
.authHint{font-size:11px;color:var(--muted);margin:-6px 0 10px;}
.authBtn{width:100%;padding:11px;border:none;border-radius:999px;background:var(--navy);
           color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;}
.authBtn:hover{background:var(--skin-main, var(--navy-light));}
.authProvider{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;
                padding:10px;border:1.5px solid var(--line);border-radius:999px;background:none;
                font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;
                font-family:'Inter',sans-serif;text-decoration:none;margin-bottom:9px;}
.authProvider:hover{border-color:var(--skin-main, var(--navy-light));}
  /* Providers that do not exist yet. Shown rather than hidden so the
     page reads as "several ways in, more coming" instead of "Google or
     nothing" — and so adding LINE/Facebook later is a one-line change,
     not a redesign. Not a <button>: nothing should focus or click. */
  .authSoon{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;
            padding:10px;border:1.5px solid var(--paper);border-radius:999px;
            font-size:13.5px;font-weight:600;color:#B4BCCB;margin-bottom:9px;cursor:default;}
.authSoonTag{font-size:10px;font-weight:700;letter-spacing:.03em;}
.authDiv{display:flex;align-items:center;gap:8px;margin:12px 0;}
.authDiv span{font-size:11px;color:var(--muted);}
.authDiv i{flex:1;height:1px;background:var(--line);display:block;}
.authFoot{text-align:center;font-size:11px;color:var(--muted);margin-top:12px;}
.authLink{color:var(--skin-main, var(--navy-light));font-weight:600;text-decoration:none;}
.authLink:hover{text-decoration:underline;}
.authErr{background:#F3DAD3;color:var(--brick);border-radius:8px;padding:10px 12px;
           font-size:12px;line-height:1.5;margin-bottom:14px;}
.authBack{display:block;text-align:center;font-size:11px;color:var(--skin-main, var(--navy-light));
            font-weight:600;margin-top:12px;cursor:pointer;background:none;border:none;
            width:100%;font-family:'Inter',sans-serif;}
.authGlogo{width:15px;height:15px;flex:none;}


/* ============================================================
   0.9.17 — MY PROFILE IN HOME'S COLOURS, AND GET IN TOUCH FORMS
   Type and buttons as on Home: 11px card labels, 13-14px rows, 12px grey
   detail, pill buttons. Each card borrows a Home card's colour from the
   theme, so every theme recolours it: account = Best Fit (main), preferences
   = Play Time (accent), Get in touch = Court Radar (main tint), as a band
   across the card's header only; the body stays white.
   ============================================================ */
.cardEyebrow{color:var(--skin-main, var(--navy-light));}
.headActions{width:100%;display:flex;align-items:center;gap:8px;}
.headActions form{flex:1;display:flex;}
.btnLogout{flex:1;padding:11px 14px;font-size:13px;font-weight:800;border:none;border-radius:999px;
  background:color-mix(in srgb, var(--navy) 10%, transparent);color:var(--navy);}
.btnLogout:hover{border:none;color:var(--navy);background:color-mix(in srgb, var(--navy) 16%, transparent);}
.btnDeleteAccount{padding:11px 6px;font-size:13px;font-weight:700;border:none;background:none;color:var(--brick);}
.btnDeleteAccount:hover{background:none;color:var(--brick);text-decoration:underline;}

/* The colour sits in each card's header band only; the body stays white. */
.cardAccount,.cardPrefs,.cardTouch{overflow:hidden;}
.cardAccount > .cardEyebrow,.cardPrefs > .cardEyebrow,.cardTouch > .cardEyebrow{
  margin:-18px -18px 14px;padding:12px 18px;}
.cardAccount > .cardEyebrow{background:var(--skin-main, var(--navy-light));color:var(--paper);}
.cardPrefs > .cardEyebrow{background:var(--skin-accent, var(--ball));color:var(--skin-accent-text, var(--navy));}
.cardTouch > .cardEyebrow{background:color-mix(in srgb, var(--skin-main, var(--navy-light)) 20%, white);color:var(--skin-main, var(--navy-light));}
.cardAccount .avatarFallback{background:var(--skin-main, var(--navy-light));color:#fff;}
.contactRow{appearance:none;border:none;font:inherit;text-align:left;width:100%;cursor:pointer;
  display:flex;align-items:center;gap:12px;padding:11px 0;border-radius:0;background:none;
  border-top:1px solid rgba(18,32,61,0.1);}
.contactRow:first-of-type{border-top:none;}
.contactRow:hover{background:none;}
.contactRow:focus-visible{outline:2px solid var(--skin-main, var(--navy-light));outline-offset:2px;border-radius:8px;}
.contactRow.soon{cursor:default;opacity:.5;}
.contactText{flex:1;min-width:0;}
.contactHint{display:block;}
.contactIcon{width:34px;height:34px;border-radius:10px;color:#fff;}
.contactIcon svg{width:16px;height:16px;}
.contactIcon.gtVenue{background:var(--skin-avail, var(--ball));color:var(--skin-avail-text, var(--navy));}
.contactIcon.gtBug{background:var(--skin-main, var(--navy-light));}
.contactIcon.gtLine{background:#06C755;}   /* LINE's own brand green: a logo colour, allowed outside the theme */
.contactChev{color:var(--muted);font-size:18px;line-height:1;}
.soonTag{font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 8px;white-space:nowrap;
  background:color-mix(in srgb, var(--navy) 10%, transparent);color:var(--navy);}

/* The forms: bottom sheets, like the app's alert sheet. */
.gtSheet{position:fixed;inset:0;z-index:2150;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(18,32,61,0);transition:background .25s ease;}
.gtSheet[hidden]{display:none;}
.gtSheet.on{background:rgba(18,32,61,0.45);}
.gtCard{width:100%;max-width:520px;max-height:88dvh;overflow-y:auto;background:#fff;border-radius:22px 22px 0 0;
  padding:20px 18px calc(18px + env(safe-area-inset-bottom, 0px));transform:translateY(100%);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);box-sizing:border-box;}
.gtSheet.on .gtCard{transform:none;}
.gtTitle{font-size:17px;font-weight:700;color:var(--navy);margin-bottom:14px;}
.gtField{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;}
.gtField > span{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5F6B85;}
/* 16px so iPhone does not zoom the page on focus (see .authInput). */
.gtField input,.gtField textarea{font:500 16px 'Inter',sans-serif;color:var(--navy);border:1px solid #D9DEE7;border-radius:10px;
  padding:11px 12px;background:#fff;width:100%;box-sizing:border-box;}
.gtField textarea{min-height:96px;resize:vertical;}
.gtField input:focus,.gtField textarea:focus{outline:2px solid var(--skin-main, var(--navy-light));outline-offset:0;border-color:transparent;}
.gtAttach{position:relative;display:flex;align-items:center;gap:10px;border:1px dashed #C9D0DC;border-radius:10px;
  padding:11px 12px;font-size:13px;color:#5F6B85;cursor:pointer;}
.gtAttach input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;}
.gtAttach.has{border-style:solid;color:var(--navy);}
.gtNote{font-size:11.5px;color:var(--muted);background:var(--paper);border-radius:10px;padding:9px 11px;line-height:1.5;margin-bottom:14px;}
.gtErr{font-size:12px;line-height:1.5;color:var(--brick);background:#F3DAD3;border-radius:8px;padding:9px 11px;margin-bottom:12px;}
.gtBtns{display:flex;gap:8px;}
.gtSend,.gtCancel{appearance:none;border:none;border-radius:999px;padding:12px 16px;font:800 13.5px 'Inter',sans-serif;cursor:pointer;}
.gtSend{flex:1;background:var(--skin-main, var(--navy-light));color:#fff;}
.gtSend:disabled{opacity:.6;cursor:default;}
.gtCancel{background:color-mix(in srgb, var(--navy) 10%, transparent);color:var(--navy);}
.gtToast{position:fixed;left:50%;bottom:calc(var(--tabbar-h, 64px) + 34px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%,10px);background:var(--navy);color:#fff;font:600 12.5px 'Inter',sans-serif;
  padding:9px 15px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;
  z-index:2200;white-space:nowrap;}
.gtToast.on{opacity:1;transform:translate(-50%,0);}
@media (prefers-reduced-motion:reduce){ .gtSheet,.gtCard,.gtToast{transition:none;} }

/* 0.9.17 audit: account row, name editing, preferences, delete, footer. */
.profileHead{display:block;}
.profileHeadLeft{display:flex;align-items:center;gap:12px;}
.profileWho{flex:1;min-width:0;}
.profileName,.profileEmail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.editNameBtn{width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--navy);justify-content:center;flex-shrink:0;padding:0;}
.editNameBtn:hover{color:var(--navy);background:#E4E9F1;}
.editNameForm{flex:1;min-width:0;flex-direction:column;align-items:stretch;gap:8px;margin:0;}
.editNameForm input{font-size:16px;padding:10px 12px;border:1px solid #D9DEE7;border-radius:10px;width:100%;box-sizing:border-box;}
.editNameForm input:focus{outline:2px solid var(--skin-main, var(--navy-light));border-color:transparent;}
.editNameBtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.editNameForm .editNameSave,.editNameForm .editNameCancel{padding:10px 12px;font-size:13px;font-weight:800;border-radius:999px;border:none;cursor:pointer;}
.editNameForm .editNameSave{background:var(--skin-main, var(--navy-light));color:#fff;}
.editNameForm .editNameCancel{background:color-mix(in srgb, var(--navy) 10%, transparent);color:var(--navy);}
.headActions{margin-top:14px;}

/* Rows draw only a top divider, so a hidden row (Court reminders outside
   the app) can never leave a stray line behind. */
.settingRow{border-bottom:none;padding:12px 0;}
.settingRow + .settingRow{border-top:1px solid #EEF1F6;}
.cardPrefs .settingRow + .settingRow{border-top-color:rgba(18,32,61,0.08);}
.settingHint{margin-top:1px;}

.dangerCard{display:flex;flex-direction:column;gap:8px;padding:16px 18px;margin-bottom:20px;border-radius:14px;
  border:1px solid color-mix(in srgb, var(--brick) 30%, transparent);}
.dangerCard .btnDeleteAccount{width:100%;padding:12px 14px;font-size:13.5px;font-weight:800;border:none;border-radius:999px;
  background:var(--brick);color:#fff;}
.dangerCard .btnDeleteAccount:hover{background:var(--brick);color:#fff;text-decoration:none;filter:brightness(1.05);}
.dangerCard p{margin:0;font-size:12px;color:var(--muted);text-align:center;}

.colophon .buildTag{margin:0 0 4px;padding:0;border:none;color:var(--navy);text-transform:none;letter-spacing:0;font-size:11.5px;}

/* The delete confirmation as a bottom sheet, like the forms. */
.deleteModalOverlay{align-items:flex-end;padding:0;}
.deleteModal{max-width:520px;border-radius:22px 22px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom, 0px));}
.deleteModalInput{font-size:16px;border:1px solid #D9DEE7;border-radius:10px;}
.deleteModalActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.deleteModalCancel,.deleteModalConfirm{padding:12px 16px;font-size:13.5px;font-weight:800;border:none;}
.deleteModalCancel{background:color-mix(in srgb, var(--navy) 10%, transparent);color:var(--navy);}
.settingRow.off .miniToggle{opacity:.45;cursor:default;}
.settingLink{appearance:none;border:none;background:none;padding:0;font:inherit;font-weight:700;color:var(--skin-main, var(--navy-light));text-decoration:underline;cursor:pointer;}
/* Each Get in touch row ends in a call to action (0.9.17): one capsule
   size whatever the words, so the three line up. */
.contactCta{flex-shrink:0;width:96px;text-align:center;box-sizing:border-box;padding:6px 0;border-radius:999px;
  font-size:11.5px;font-weight:800;white-space:nowrap;background:var(--skin-main, var(--navy-light));color:#fff;}
.contactCta.soon{background:color-mix(in srgb, var(--navy) 10%, transparent);color:var(--navy);}

/* CourtPop! Badge on the account card (0.9.18). The balls are the logo's:
   brand lime (a logo colour, allowed outside the theme), seams turned 35deg,
   a soft inner shade and a drop shadow; empty places are greyed out. */
.ballCard{display:block;margin-top:14px;padding:12px;border-radius:12px;background:var(--paper);text-decoration:none;color:var(--navy);}
.ballHead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:#5F6B85;}   /* written as "CourtPop! BADGE": the brand keeps its case */
.ballHead b{font-size:14px;letter-spacing:0;text-transform:none;color:var(--navy);}
.ballGrid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;justify-items:center;}
/* Past 4 rows (0.9.22) the gaps close up so a tall grid stays a grid. */
.ballGrid.dense{gap:3px;}
.ball{width:100%;max-width:26px;aspect-ratio:1;display:block;overflow:visible;filter:drop-shadow(0 2.5px 1.2px rgba(0,0,0,0.2));}
.ball .bf{fill:var(--ball);}
.ball .bs{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;}
.ball .bsh{fill:url(#badgeBallShade);}
.ball.off{filter:none;}
.ball.off .bf{fill:#DEE4EE;}
.ball.off .bs{stroke:#EEF1F6;}
.ball.off .bsh{fill:none;}
.ballNext{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:#5F6B85;}
.ballNext b{color:var(--navy);}

/* Form sheets, tightened (0.9.18): smaller title, labels and boxes. Boxes
   are 14px wherever a mouse is used; on touch screens they stay 16px, the
   smallest size iPhone will not zoom the page in on. */
.gtTitle{font-size:16px;margin-bottom:12px;}
.gtField{gap:4px;margin-bottom:10px;}
.gtField > span{font-size:10.5px;}
.gtField input,.gtField textarea,.editNameForm input,.deleteModalInput{font-size:14px;padding:9px 11px;border-radius:9px;}
.gtField textarea{min-height:80px;}
.gtAttach{padding:9px 11px;font-size:12.5px;}
.gtNote{font-size:11px;padding:8px 10px;margin-bottom:12px;}
.gtSend,.gtCancel{padding:11px 16px;font-size:13px;}
@media (pointer:coarse){
  .gtField input,.gtField textarea,.editNameForm input,.deleteModalInput{font-size:16px;}
}
.colophon{color:var(--navy);}
/* The page under the profile ends where Home's does (0.9.18.2): the body
   already clears the tab bar, so the wrap's own bottom padding doubled it
   and left ~140px of empty space under the footer, against Home's 30. */
#view-profile .wrap{padding-bottom:0;}

/* Welcome cards "See again" (0.9.22): a small capsule in the theme's main
   colour; opens the welcome cards straight away. */
.seeAgainBtn{appearance:none;border:none;flex-shrink:0;border-radius:999px;padding:7px 13px;font:700 11.5px/1.2 'Inter',sans-serif;
  background:var(--skin-main, var(--navy-light));color:var(--white);cursor:pointer;white-space:nowrap;}