/* Squadified — clean, multi-sport athletic theme on top of Pico.css. */

:root {
  --sq-green: #2563eb;        /* team blue (primary/brand) */
  --sq-green-deep: #17307a;   /* deep navy */
  --sq-green-soft: #eef3fe;   /* soft tint */
  --sq-accent: #f97316;       /* whistle orange (calls to action) */
  --sq-accent-deep: #ea580c;
  --sq-ink: #0f172a;          /* headings */
  --sq-body: #334155;         /* body text */
  --sq-muted: #64748b;        /* muted text */
  --sq-line: #e8e6e1;         /* warm hairline */
  --sq-bg: #f7f6f3;           /* warm off-white */
  --sq-surface: #ffffff;      /* cards */
  --sq-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --sq-shadow-md: 0 4px 14px rgba(16, 24, 40, .06), 0 14px 40px rgba(16, 24, 40, .07);
  --sq-shadow-lg: 0 24px 60px rgba(16, 24, 40, .12), 0 8px 20px rgba(16, 24, 40, .06);
  /* Corner-radius scale — one source of truth for every shape. */
  --sq-r-btn: 10px;      /* buttons, inputs, small controls */
  --sq-r-note: 12px;     /* inline callouts & note panels   */
  --sq-r-card: 16px;     /* cards & surfaces                */
  --sq-r-card-lg: 22px;  /* hero & large surfaces           */
  --sq-r-pill: 999px;    /* pills, chips & tags             */
  --sq-radius: var(--sq-r-card);        /* alias (legacy) */
  --sq-radius-lg: var(--sq-r-card-lg);  /* alias (legacy) */
  --sq-max: 900px;
  --sq-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pico-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pico-border-radius: var(--sq-r-btn);
  --pico-color: var(--sq-body);
  --pico-h1-color: var(--sq-ink);
  --pico-h2-color: var(--sq-ink);
  --pico-h3-color: var(--sq-ink);
  --pico-muted-color: var(--sq-muted);
}
body {
  background: var(--sq-bg);
  color: var(--sq-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -.006em;
}
main.container { max-width: var(--sq-max); }

.ico {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -.16em;
  margin-right: .45em;
  flex: none;
}
button, [role="button"], .tip-amt, .cal-add {
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
    box-shadow .15s ease, transform .12s ease;
}
button:disabled { cursor: not-allowed; }
/* Consistent click affordance: every action control lifts + shadows on hover, presses on click.
   :where() keeps specificity low so a button with a richer hover (e.g. the hero CTA) still wins. */
:where(button, [role="button"], .tip-amt, .cal-add):not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(16, 24, 40, .10);
}
:where(button, [role="button"], .tip-amt, .cal-add):not(:disabled):active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}
input:focus, select:focus, textarea:focus {
  --pico-form-element-active-border-color: var(--sq-green);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16) !important;
}

/* Accessibility: visible keyboard focus, skip link, sr-only, busy states. */
:where(a, button, [role="button"], summary):focus-visible {
  outline: 3px solid var(--sq-green);
  outline-offset: 2px;
  border-radius: 6px;
}
.tabs button:focus-visible { outline: 3px solid var(--sq-green); outline-offset: -3px; }
.skip-link {
  position: absolute; left: .75rem; top: -3.5rem; z-index: 100;
  padding: .65rem 1.1rem; border-radius: var(--sq-r-btn);
  background: var(--sq-green-deep); color: #fff; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: .75rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.is-busy { opacity: .6; pointer-events: none; }
.inline-spin { color: var(--sq-green-deep); font-weight: 600; font-size: .85rem; }
/* Spinning ring so file-parsing / AI actions visibly show they're working. */
.inline-spin::before {
  content: ""; display: inline-block; width: .8em; height: .8em;
  margin-right: .4em; vertical-align: -.1em;
  border: 2px solid var(--sq-green-soft); border-top-color: var(--sq-green-deep);
  border-radius: 50%; animation: sq-spin .7s linear infinite;
}
.rotation-busy { color: var(--sq-green-deep); font-weight: 600; }

/* Gradient header --------------------------------------------------- */
/* Header + step strip pin together as one unit (see .app-top sticky). */
.app-top {
  position: sticky;
  top: 0;
  z-index: 50;
}
.app-header {
  background:
    radial-gradient(120% 150% at 100% -20%, rgba(255, 255, 255, .14), transparent 55%),
    linear-gradient(125deg, #0f2360, var(--sq-green-deep) 45%, var(--sq-green));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(15, 23, 42, .18);
  margin-bottom: 1.6rem;
  padding-block: 0;
}
.app-header .container {
  max-width: var(--sq-max);
  display: flex; align-items: center; gap: 1.35rem;
  padding-top: .5rem; padding-bottom: .5rem;
}
.brand-mark { display: flex; align-items: center; gap: .6rem; }
.brand .logo { width: 38px; height: 38px; flex: none; }
/* Hairline divider between the menu button and the brand. */
.brand { position: relative; }
.brand::before {
  content: "";
  position: absolute; left: -.7rem; top: 50%; transform: translateY(-50%);
  width: 1px; height: 1.4rem; background: rgba(255, 255, 255, .28);
}
.app-header .brand h1 {
  margin: 0;
  color: #fff;
  font-family: var(--sq-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.analytics-consent {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  max-width: 25rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--sq-border);
  border-radius: 8px;
  box-shadow: var(--sq-shadow-md);
}
.analytics-consent p { margin-bottom: .6rem; }
.analytics-consent-actions { display: flex; gap: .6rem; margin-bottom: .5rem; }
.analytics-consent-actions button { margin: 0; }
.analytics-consent a { font-size: .85rem; }

/* Nav - a clean menu icon leading the brand (app-bar style) + left slide-in drawer. */
.nav-toggle {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 10px;
  color: #fff; box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .16); color: #fff; transform: none; box-shadow: none; }
.nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.nav-toggle .ico { width: 1.65rem; height: 1.65rem; }

.nav-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(15, 23, 42, .45); border: 0; }
.nav-scrim[hidden] { display: none; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
  width: min(84vw, 18rem);
  display: flex; flex-direction: column;
  padding: .7rem;
  background: var(--sq-bg);
  border-right: 1px solid var(--sq-line);
  box-shadow: 6px 0 34px rgba(15, 23, 42, .3);
  transform: translateX(-100%);
  transition: transform .25s ease, visibility 0s .25s;
  visibility: hidden;
}
.drawer.open { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: .2rem .3rem .5rem; }
.drawer-title { font-family: var(--sq-display); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sq-muted); }
.drawer-close {
  width: 2.4rem; height: 2.4rem; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--sq-ink); box-shadow: none;
}
.drawer-close:hover { background: var(--sq-green-soft); color: var(--sq-green-deep); box-shadow: none; transform: none; }
.drawer-close .ico { width: 1.35rem; height: 1.35rem; }

.tabs { display: flex; flex-direction: column; gap: .1rem; }
.tabs button {
  width: 100%; margin: 0; min-height: 2.9rem;
  display: inline-flex; align-items: center; justify-content: flex-start; text-align: left;
  padding: .7rem .8rem;
  background: transparent; color: var(--sq-ink);
  border: 0; border-radius: var(--sq-r-btn);
  font-family: var(--sq-display); font-weight: 500; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.tabs button:hover { background: var(--sq-green-soft); color: var(--sq-green-deep); transform: none; box-shadow: none; }
.tabs button:active { transform: none; box-shadow: none; }
.tabs button.active { background: var(--sq-green-soft); color: var(--sq-green-deep); }

/* Panels & cards ---------------------------------------------------- */
.panel { display: none; }
.panel.active { display: block; }
article {
  background: var(--sq-surface);
  border-radius: var(--sq-radius);
  border: 1px solid var(--sq-line);
  box-shadow: var(--sq-shadow-sm);
}
.panel article { margin: 0 0 1rem; }
.lead { color: var(--sq-muted); margin-top: -.25rem; }
article header strong,
.smart-paste > header strong {
  font-family: var(--sq-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--sq-ink);
  display: inline-flex;
  align-items: center;
}

/* Form -------------------------------------------------------------- */
.hint { display: block; margin: .15rem 0 .35rem; color: var(--sq-muted); font-size: .85rem; font-weight: 400; }
.hint code { font-size: .8em; }
.advanced { margin: .35rem 0 1rem; border-top: 1px solid var(--sq-line); padding-top: .75rem; }
.advanced summary { cursor: pointer; font-weight: 600; color: var(--sq-green); }
.advanced .opt { color: var(--pico-muted-color); font-weight: 400; }
.advanced[open] summary { margin-bottom: .75rem; }

.actions { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; }
.actions button {
  width: auto;
  margin: 0;
  padding-inline: 1.5rem;
  font-weight: 600;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.actions button:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}
.htmx-indicator { opacity: 0; pointer-events: none; transition: opacity .2s; }
.htmx-request .htmx-indicator { opacity: 1; }

/* Animated build state */
.building { display: inline-flex; align-items: center; gap: .5rem; color: var(--sq-green); font-weight: 600; }
.building .ball { display: inline-block; animation: sq-bounce .7s ease-in-out infinite; }
.building .dots::after { content: ''; animation: sq-dots 1.2s steps(1, end) infinite; }
@keyframes sq-bounce {
  0%, 100% { transform: translateY(0) rotate(-20deg); }
  50% { transform: translateY(-5px) rotate(20deg); }
}
@keyframes sq-dots {
  0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; }
}

/* Landing hero */
.hero {
  text-align: center;
  padding: 2.6rem 1.5rem 2.9rem;
  margin: 0 0 2rem;
  border-radius: var(--sq-radius-lg);
  background:
    radial-gradient(90% 130% at 50% -25%, rgba(37, 99, 235, .08), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--sq-bg));
  border: 1px solid var(--sq-line);
  box-shadow: var(--sq-shadow-sm);
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--sq-display);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  color: var(--sq-green);
  background: var(--sq-green-soft);
  padding: .32rem .75rem;
  border-radius: var(--sq-r-pill);
  margin: 0 0 1rem;
}
.hero-title {
  font-family: var(--pico-font-family-sans-serif);
  font-weight: 800;
  font-size: clamp(2.15rem, 5.6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--sq-ink);
  margin: 0 0 .9rem;
}
.hero-sub {
  max-width: 52ch;
  margin: 0 auto 1.5rem;
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--sq-body);
}
.hero-sub strong { color: var(--sq-ink); }
.hero-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .7rem 1.1rem; margin: 0 0 1.7rem;
}
.hero-start {
  width: auto; margin: 0;
  padding: .85rem 1.9rem; font-size: 1.06rem; font-weight: 700;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
  box-shadow: 0 10px 24px rgba(234, 88, 12, .28), 0 2px 6px rgba(234, 88, 12, .2);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.hero-start:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(234, 88, 12, .32), 0 3px 8px rgba(234, 88, 12, .22);
}
.hero-trust {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--sq-muted); font-size: .9rem;
}
.hero-trust .ico { color: var(--sq-green); margin: 0; }
.hero-points {
  list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 1rem;
  text-align: left;
}
.hero-points li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; }
.hero-points .hp-ico { font-size: 1.5rem; line-height: 1; flex: none; }
.hero-points strong { display: block; color: var(--sq-ink); margin-bottom: .15rem; }
.hero-points div { color: var(--sq-muted); font-size: .92rem; }

@media (prefers-reduced-motion: reduce) {
  .building .ball, .building .dots::after,
  .ai-draft.htmx-request .ico { animation: none; }
  .inline-spin::before { animation: none; border-color: var(--sq-green-deep); }
  button, [role="button"], .tip-amt, .cal-add { transition: none; }
  :where(button, [role="button"], .tip-amt, .cal-add):not(:disabled):hover,
  :where(button, [role="button"], .tip-amt, .cal-add):not(:disabled):active { transform: none; box-shadow: none; }
}

.pay-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.pay-actions button { width: auto; margin: 0; }
.pay-actions .contrast {
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.share-file { width: auto; margin: 0; }

/* Send a message via the native share sheet, or a medium-specific direct action. */
.send-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .7rem 0 0; }
.send-share, .send-alt {
  width: auto; margin: 0; min-height: 2.75rem;
  display: inline-flex; align-items: center; font-size: .9rem;
}
.send-share {
  font-weight: 700;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.send-share:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}
.send-alt {
  font-weight: 600;
  --pico-background-color: transparent;
  --pico-color: var(--sq-green-deep);
  --pico-border-color: var(--sq-line);
}
.send-alt:hover { --pico-border-color: var(--sq-green); }
.send-hint { display: block; margin: .45rem 0 0; font-size: .8rem; color: var(--sq-muted); }
.comms-lead { color: var(--sq-body); margin: -.25rem 0 1rem; font-size: .95rem; }

/* Optional mailing-list setup (collapsed by default). */
.email-setup {
  margin: 0 0 1rem; padding: .8rem 1.1rem;
  background: var(--sq-surface); border: 1px solid var(--sq-line);
  border-radius: var(--sq-radius); box-shadow: var(--sq-shadow-sm);
}
.email-setup > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  font-family: var(--sq-display); font-size: 1.05rem; font-weight: 600; color: var(--sq-ink);
}
.email-setup > summary::-webkit-details-marker { display: none; }
.email-setup > summary .opt { color: var(--sq-muted); font-weight: 400; font-size: .85rem; margin-left: .35rem; }
.email-setup[open] > summary { margin-bottom: .6rem; }

/* Tool cards -------------------------------------------------------- */
.step-lead {
  font-family: var(--sq-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sq-green);
  margin: 0 0 1rem;
}
.step-out { margin-bottom: 1rem; }
.step-out .placeholder {
  text-align: center;
  color: var(--sq-muted);
  margin: 0;
  padding: 2.2rem 1.25rem;
  border: 1.5px dashed var(--sq-line);
  border-radius: var(--sq-radius);
  background: var(--sq-surface);
}
.step-out .placeholder::before {
  content: "\1F4CB";
  display: block;
  font-size: 1.7rem;
  margin-bottom: .5rem;
  opacity: .55;
}
/* Game-day control bar: format + live active-count + build. */
.rotation-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1.1rem;
  margin: 0 0 .7rem; padding: .85rem 1.05rem;
  background: var(--sq-surface); border: 1px solid var(--sq-line);
  border-radius: var(--sq-radius); box-shadow: var(--sq-shadow-sm);
}
.rb-format { display: flex; flex-direction: column; gap: .2rem; margin: 0; font-weight: 600; color: var(--sq-ink); }
.rb-format select { margin: 0; min-width: 6.5rem; }
.rb-count {
  display: flex; flex-direction: column; gap: .05rem;
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--sq-muted);
}
.rb-count strong { font-family: var(--sq-display); font-size: 1.5rem; line-height: 1; color: var(--sq-green-deep); }
.rotation-bar .qr-build { margin-left: auto; }

.linky {
  width: auto; margin: 0; padding: .2rem; border: 0; background: transparent;
  color: var(--sq-green); font-weight: 600; font-size: .85rem; text-decoration: underline;
}
.linky:hover { color: var(--sq-green-deep); }

.qr-build {
  width: auto; margin: 0; min-height: 2.75rem;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.qr-build:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}

@media (max-width: 480px) {
  .rotation-bar .qr-build { margin-left: 0; width: 100%; }
}

.tool-card {
  border: 1px solid var(--sq-line);
  border-radius: var(--sq-radius);
  overflow: hidden;
  margin: 0 0 1rem;
  box-shadow: 0 4px 24px rgba(16, 24, 40, .05);
}
.tool-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: .6rem .9rem;
  background: linear-gradient(135deg, var(--sq-green-deep), var(--sq-green));
  color: #fff;
}
.tool-head h3 {
  margin: 0;
  font-family: var(--sq-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
}
.tool-card .copy {
  width: auto;
  margin: 0;
  padding: .35rem .8rem;
  min-height: 2.25rem; display: inline-flex; align-items: center;
  font-size: .75rem;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border: 0;
}
.tool-card .copy:hover { background: rgba(255, 255, 255, .32); }
.tool-head-actions { display: flex; gap: .4rem; align-items: center; }
.tool-card .ai-draft {
  width: auto; margin: 0; padding: .35rem .8rem; font-size: .75rem;
  min-height: 2.25rem; display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, .18); color: #fff; border: 0;
}
.tool-card .ai-draft:hover { background: rgba(255, 255, 255, .34); }
.tool-card .ai-draft:disabled { opacity: .7; }
.ai-draft .ad-busy { display: none; }
.ai-draft.htmx-request .ad-idle { display: none; }
.ai-draft.htmx-request .ad-busy { display: inline; }
.ai-draft.htmx-request .ico { animation: sq-spin .8s linear infinite; }
/* Grey the editable draft while the on-device AI rewrite is in flight. */
#welcome-card:has(.ai-draft.htmx-request) .tool-edit { opacity: .55; pointer-events: none; }
@keyframes sq-spin { to { transform: rotate(360deg); } }
#welcome-card { position: relative; }
.tool-card .tool-edit {
  width: 100%; margin: 0; border: 0; border-radius: 0;
  padding: .95rem 1.1rem; background: var(--sq-surface); color: var(--sq-body);
  font-family: var(--pico-font-family-sans-serif); font-size: .93rem;
  line-height: 1.55; resize: vertical; min-height: 22rem;
}
.tool-card .tool-edit:focus { outline: none; box-shadow: inset 0 0 0 2px var(--sq-green); }
.ai-spin {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .5rem 1.1rem; text-align: center;
  color: var(--sq-green-deep); font-weight: 600; font-size: .85rem;
  background: var(--sq-green-soft);
}
.tool-card pre {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  border-radius: 0;
  padding: .95rem 1.1rem;
  background: var(--sq-surface);
  color: var(--sq-body);
  font-family: var(--pico-font-family-sans-serif);
  font-size: .93rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tool-card pre::first-line {
  font-weight: 700;
  color: var(--sq-ink);
}
.build-done {
  margin: .75rem 0 0;
  padding: .75rem 1rem;
  border-radius: var(--sq-r-note);
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(23, 48, 122, .08));
  border: 1px solid var(--sq-line);
}
.build-done strong {
  font-family: var(--sq-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.build-tip {
  margin: .75rem 0 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--sq-r-note);
  border: 1px solid var(--sq-line);
  background: linear-gradient(135deg, rgba(255, 183, 3, .12), rgba(240, 165, 0, .06));
  text-align: center;
}
.build-tip .build-done { margin: 0; padding: 0; border: 0; background: none; }
.tip-ask { margin: .6rem auto .9rem; max-width: 46ch; color: var(--sq-body); font-size: .98rem; }
.tip-amounts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.tip-amt {
  min-height: 2.75rem; display: inline-flex; align-items: center;
  padding: .5rem 1.2rem; border-radius: var(--sq-r-pill); text-decoration: none;
  font-weight: 700; font-size: 1rem;
  color: var(--sq-green-deep); background: var(--sq-surface);
  border: 1.5px solid var(--sq-line);
}
.tip-amt:hover { border-color: var(--sq-green); background: var(--sq-green-soft); }
.tip-amt.featured { color: #4a3200; background: #ffb703; border-color: #ffb703; }
.tip-amt.featured:hover { background: #f0a500; border-color: #f0a500; }
.tip-share {
  width: auto; margin: 0; min-height: 2.75rem;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem 1.1rem; border-radius: var(--sq-r-pill); font-weight: 700;
  --pico-background-color: transparent;
  --pico-color: var(--sq-green-deep);
  --pico-border-color: var(--sq-line);
}
.tip-share:hover { --pico-border-color: var(--sq-green); }
.pack-thanks {
  margin: .25rem auto 0; padding: 1rem 1.25rem; text-align: center;
  border-top: 1px dashed var(--sq-line);
}
.pack-thanks p { margin: 0 0 .7rem; font-weight: 600; color: var(--sq-ink); }
.support .tip-amounts, .pack-thanks .tip-amounts { justify-content: center; }
.cal-actions {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
}
.cal-actions.is-ready { display: flex; }
.cal-actions .cal { width: auto; margin: 0; padding-inline: 1.4rem; font-weight: 700; }
.cal-actions button { width: auto; margin: 0; }
.cal-actions small { color: var(--pico-muted-color); flex-basis: 100%; margin: 0; }
.cal-intro { color: var(--sq-muted); font-size: .92rem; margin: 0 0 1rem; }

/* Magic schedule paste (calendar tab): paste a league email, get a clean calendar. */
.sched-magic {
  margin: 0 0 1rem; padding: .9rem 1.1rem;
  border: 1px solid rgba(37, 99, 235, .22); border-radius: var(--sq-radius);
  background: linear-gradient(135deg, var(--sq-green-soft), var(--sq-surface));
}
.sched-magic > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  font-family: var(--sq-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .01em; color: var(--sq-ink);
}
.sched-magic > summary::-webkit-details-marker { display: none; }
.sched-magic[open] > summary { margin-bottom: .35rem; }
.sched-magic .lead { color: var(--sq-muted); margin: 0 0 .5rem; font-size: .92rem; }
.sched-magic textarea { margin: 0 0 .6rem; }
.sched-magic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.sched-magic-actions .contrast {
  width: auto; margin: 0;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.sched-magic-actions .contrast:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}
.sched-paste-result { color: var(--sq-green-deep); font-size: .88rem; font-weight: 600; }
.cal-schedule { margin: 0 0 1rem; }
.cal-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 1rem; }
.cal-table th, .cal-table td {
  padding: .5rem .7rem; text-align: left; vertical-align: top;
  border: 1px solid var(--sq-line);
}
.cal-table thead th {
  background: var(--sq-green); color: #fff;
  font-family: var(--sq-display); text-transform: uppercase;
  letter-spacing: .02em; font-size: .85rem;
}
.cal-table tbody th {
  background: var(--sq-green-soft); color: var(--sq-green-deep);
  font-weight: 700; white-space: nowrap;
}
.cal-table tbody tr:nth-child(even) td { background: rgba(37, 99, 235, .05); }
.cal-time { display: block; font-weight: 400; font-size: .8rem; color: var(--sq-muted); margin-top: .1rem; }
.cal-what { font-weight: 600; color: var(--sq-ink); }
.cal-what.practice { color: var(--sq-green-deep); }
.cal-loc { display: block; font-weight: 400; font-size: .82rem; color: var(--sq-muted); margin-top: .1rem; }
.cal-add-cell { white-space: normal; }
.cal-add {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  margin: .1rem .3rem .1rem 0;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  padding: .4rem .9rem; border-radius: var(--sq-r-pill);
  color: var(--sq-green-deep); background: var(--sq-surface);
  border: 1px solid var(--sq-line);
}
.cal-add:hover { border-color: var(--sq-green); background: var(--sq-green-soft); }

/* Mobile: the schedule table becomes stacked cards (no sideways scroll). */
@media (max-width: 560px) {
  .cal-table, .cal-table tbody, .cal-table tr, .cal-table th, .cal-table td { display: block; }
  .cal-table thead { display: none; }
  .cal-table tr {
    margin: 0 0 .7rem; padding: .65rem .8rem;
    border: 1px solid var(--sq-line); border-radius: var(--sq-radius);
    background: var(--sq-surface); box-shadow: var(--sq-shadow-sm);
  }
  .cal-table th, .cal-table td { border: 0; padding: 0; }
  .cal-table tbody th {
    background: transparent; color: var(--sq-ink);
    font-size: 1.05rem; margin: 0 0 .1rem; white-space: normal;
  }
  .cal-table tbody tr:nth-child(even) td { background: transparent; }
  .cal-time { display: inline; margin-left: .45rem; }
  .cal-add-cell { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
  .cal-add { margin: 0; flex: 1 1 8rem; justify-content: center; }
  .cal-actions .cal, .cal-actions .secondary { width: 100%; }
}
.snack-share { margin: .7rem 0 0; }
.snack-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .4rem; }
.snack-actions button, .snack-actions a { width: auto; margin: 0; }
.snack-copy {
  flex: 1 1 15rem; justify-content: center;
  min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 700;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.snack-copy:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}
.snack-new {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: .5rem 1rem; border-radius: var(--sq-r-btn);
  border: 1px solid var(--sq-line); background: var(--sq-surface);
  color: var(--sq-green-deep); font-weight: 600; text-decoration: none;
}
.snack-new:hover { border-color: var(--sq-green); background: var(--sq-green-soft); }
.snack-more { margin: .35rem 0 0; }
.snack-more > summary {
  cursor: pointer; list-style: none; color: var(--sq-green);
  font-weight: 600; font-size: .85rem;
}
.snack-more > summary::-webkit-details-marker { display: none; }
.snack-more .snack-actions { margin: .5rem 0 0; }
.snack-empty-state { text-align: center; padding: .5rem 0 0; }
.snack-load {
  width: auto; margin: .7rem 0 0; min-height: 2.75rem;
  display: inline-flex; align-items: center; font-weight: 700;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.snack-load:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}

/* Footer ------------------------------------------------------------ */
.support {
  display: block;
  margin-top: 1.5rem;
  padding: 1.5rem 0 3rem;
  border-top: 1px solid var(--sq-line);
  color: var(--sq-muted);
}
.support [role="button"] { width: auto; margin: 0; }
.support-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem 1.35rem;
}
.support-primary p { margin: 0; color: var(--sq-body); }
.support-primary .tip-amounts { flex: none; justify-content: flex-end; }
.support .tip {
  --pico-background-color: #ffb703;
  --pico-border-color: #ffb703;
  --pico-color: #4a3200;
}
.support .tip:hover {
  --pico-background-color: #f0a500;
  --pico-border-color: #f0a500;
}
.support-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem 1.25rem;
  margin-top: 1.25rem;
  padding-top: .9rem;
  border-top: 1px solid var(--sq-line);
  font-size: .8rem;
  line-height: 1.4;
}
.support-meta small { margin: 0; }
.support-meta a { color: var(--sq-muted); text-decoration: none; }
.support-meta a:hover { color: var(--sq-green); text-decoration: underline; }

@media (max-width: 640px) {
  .support-primary { align-items: flex-start; flex-direction: column; }
  .support-primary .tip-amounts { justify-content: flex-start; }
}

/* Global season-pack bar — download + save/load, available on every step. */
.pack-bar {
  display: none;
  flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .6rem;
  margin: 2.5rem auto 0;
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--sq-line);
}
.pack-bar.is-ready { display: flex; }
.pack-bar > *:not([hidden]) {
  width: auto; margin: 0;
  min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
}
.pack-bar .contrast {
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.pack-bar .contrast:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}

/* Parent-email pills */
.email-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.email-empty { color: var(--sq-muted); font-size: .9rem; }
.email-pill {
  display: inline-flex; align-items: center;
  background: var(--sq-green-soft);
  border: 1px solid var(--sq-line);
  border-radius: var(--sq-r-pill);
}
.email-pill .ep-text,
.email-pill .ep-x {
  width: auto; margin: 0; border: 0; background: transparent;
  font-size: .85rem; line-height: 1.2;
}
.email-pill .ep-text { padding: .28rem .15rem .28rem .75rem; color: var(--sq-ink); cursor: text; }
.email-pill .ep-x { padding: .28rem .6rem .28rem .3rem; color: var(--sq-muted); font-size: 1.05rem; cursor: pointer; }
.email-pill .ep-x:hover { color: var(--sq-accent); }
.email-pill .ep-edit {
  width: 15rem; max-width: 62vw; margin: 0; border: 0;
  padding: .25rem .7rem; font-size: .85rem; background: #fff; border-radius: var(--sq-r-pill);
}
.email-raw { margin: 0 0 .5rem; }
.email-raw summary { cursor: pointer; color: var(--sq-green); font-weight: 600; font-size: .9rem; }
.email-raw textarea { margin: .45rem 0 .2rem; }
.pills-label { margin-bottom: .35rem; }

/* Errors ------------------------------------------------------------ */
.error {
  color: var(--pico-del-color, #b3261e);
  background: #fff5f5;
  border: 1px solid var(--pico-del-color, #b3261e);
  padding: 1rem;
  border-radius: var(--pico-border-radius);
}

/* Smart-Paste ------------------------------------------------------- */
.smart-paste {
  background: linear-gradient(135deg, var(--sq-green-soft), var(--sq-surface));
  border-color: rgba(37, 99, 235, .22);
}
.smart-paste .privacy { color: var(--pico-muted-color); }
.smart-paste textarea { margin-bottom: .25rem; }
.actions .privacy { margin: 0; }
.assist:empty { display: none; }
.assist-result {
  margin-top: .5rem;
  background: var(--sq-line);
  border-radius: var(--sq-r-note);
  padding: .75rem 1rem;
}
.assist-result p { margin: 0 0 .35rem; }
.assist-result ul { margin: .25rem 0 .5rem 1.1rem; }
.assist-result small { color: var(--pico-muted-color); }

/* Smart-filled fields the coach should verify. */
.needs-review {
  border-color: #f59e0b !important;
  background: #fffbeb;
}
.assist-headline { font-weight: 600; margin-bottom: .4rem; }

/* Non-color cue on flagged fields (colour-blind safe). */
label.review::after {
  content: "⚠ double-check this";
  display: block;
  margin-top: .2rem;
  font-size: .72rem;
  font-weight: 600;
  color: #b45309;
}

/* Smart-Paste collapses to its summary after a fill. */
.smart-paste.filled .lead,
.smart-paste.filled textarea,
.smart-paste.filled .actions { display: none; }
.repaste {
  display: none;
  width: auto;
  margin: .5rem 0 0;
  padding: .3rem .8rem;
  font-size: .8rem;
  background: transparent;
  color: var(--sq-green);
  border: 1px solid var(--sq-line);
}
.smart-paste.filled .repaste { display: inline-block; }

/* "Your season's ready" banner + checklist. */
.season-ready {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: var(--sq-r-note);
  background: linear-gradient(135deg, rgba(37, 99, 235, .12), rgba(23, 48, 122, .08));
  border: 1px solid var(--sq-line);
}
.season-ready-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.season-ready-head strong {
  font-family: var(--sq-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.season-ready p { margin: .35rem 0 .5rem; color: var(--pico-muted-color); }
.season-ready .copy-all { width: auto; margin: 0; padding: .25rem .8rem; font-size: .8rem; }
.got-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.got-list li {
  font-size: .78rem;
  padding: .15rem .55rem;
  background: #fff;
  border: 1px solid var(--sq-line);
  border-radius: var(--sq-r-pill);
}
.got-list li::before { content: "✓ "; color: var(--sq-green); font-weight: 700; }

/* In-game sub-rotation matrix — big and scannable. */
.rotation-wrap { overflow: auto; max-height: 60vh; }
.tool-card .rotation {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 1.05rem;
}
.tool-card .rotation th,
.tool-card .rotation td {
  padding: .55rem .6rem;
  text-align: center;
  border: 1px solid var(--sq-line);
  white-space: nowrap;
}
.tool-card .rotation thead th {
  position: sticky;
  top: 0;
  background: var(--sq-green);
  color: #fff;
  font-family: var(--sq-display);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tool-card .rotation tbody th {
  background: var(--sq-green-deep);
  color: #fff;
  font-weight: 700;
}
.tool-card .rotation tbody tr:nth-child(even) td { background: rgba(37, 99, 235, .06); }
.tool-card .rotation td.bench { color: var(--pico-muted-color); font-size: .9rem; }

/* Game-day sub-rotation. */
.tool-card.gameday { border-top: 3px solid var(--sq-accent); }
.gameday-control { border-left: 3px solid var(--sq-accent); }
.missing-note {
  margin: .7rem .9rem;
  padding: .5rem .7rem;
  border-radius: var(--sq-r-note);
  font-size: .95rem;
}
.missing-note.ok { background: var(--sq-green-soft); color: var(--sq-green-deep); }
.missing-note.out { background: #fff4e6; color: #9a3412; }
.rotation-meta { margin: 0 .9rem .7rem; color: var(--sq-body); font-size: .95rem; }
.rotation-meta strong { color: var(--sq-green-deep); }

/* Snack schedule table (lives in the Snacks & allergies box). */
.snack-out { margin: 1rem 0; }
.snack-empty {
  text-align: center;
  color: var(--sq-muted);
  margin: 0;
  padding: 1.4rem 1rem;
  border: 1.5px dashed var(--sq-line);
  border-radius: var(--sq-radius);
  background: var(--sq-bg);
}
.snack-title {
  font-family: var(--sq-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--sq-green-deep);
  margin: 0 0 .5rem;
}
.snack-out .rotation-meta { margin: 0 0 .7rem; }
.snack-allergy { color: #9a3412; font-weight: 600; }
.rotation.snack { width: 100%; border-collapse: collapse; margin: 0; font-size: 1rem; }
.rotation.snack th, .rotation.snack td {
  padding: .5rem .7rem;
  text-align: left;
  border: 1px solid var(--sq-line);
}
.rotation.snack thead th {
  background: var(--sq-green);
  color: #fff;
  font-family: var(--sq-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .85rem;
}
.rotation.snack tbody th {
  background: var(--sq-green-soft);
  color: var(--sq-green-deep);
  font-weight: 700;
  white-space: nowrap;
}
.rotation.snack tbody tr:nth-child(even) td { background: rgba(37, 99, 235, .05); }
.snack-vs { color: var(--sq-muted); font-weight: 400; font-size: .85em; }
.snack-note { margin: .6rem 0 0; color: var(--sq-muted); font-size: .88rem; }

/* Tap-to-toggle out-players. */
.toggle-hint { margin: .2rem .9rem .5rem; color: var(--sq-muted); font-size: .9rem; }
.roster-toggle { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 .9rem .8rem; }
.chip { position: relative; margin: 0; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding: .5rem 1rem;
  border-radius: var(--sq-r-pill);
  border: 1.5px solid var(--sq-green);
  background: var(--sq-green-soft);
  color: var(--sq-green-deep);
  font-size: .92rem;
  font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.chip span::before { content: "\2713"; font-weight: 800; margin-right: .45rem; }
.chip .chip-name { font-weight: inherit; }
.chip:has(input:checked) span {
  border-color: var(--sq-line);
  background: var(--sq-bg);
  color: var(--sq-muted);
}
.chip:has(input:checked) span::before { content: "\2715"; }
.chip:has(input:checked) .chip-name { text-decoration: line-through; }
.chip:has(input:checked) span::after { content: " (Absent)"; margin-left: .35rem; }
.chip input:focus-visible + span { outline: 2px solid var(--sq-green); outline-offset: 2px; }
.rotation.lineups td { text-align: left; }
.rotation.lineups td.on-field { font-weight: 600; color: var(--sq-ink); }

/* Sub-rotation lineups: names stack & wrap (no horizontal scroll), easy to scan. */
.rotation.lineups th, .rotation.lineups td { white-space: normal; vertical-align: top; }
.rotation.lineups thead th { text-align: left; }
.rotation.lineups thead th:first-child { text-align: center; }
.rotation.lineups tbody th {
  vertical-align: middle;
  width: 3.4rem;
  font-size: 1.25rem;
}
.rotation.lineups td { width: 50%; }
.lineup-list { list-style: none; margin: 0; padding: 0; }
.lineup-list li {
  list-style: none;
  position: relative;
  padding: .18rem 0 .18rem 1.2rem;
  line-height: 1.3;
}
.lineup-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--sq-green);
}
.lineup-list.rest li { color: var(--sq-muted); font-weight: 400; }
.lineup-list.rest li::before { background: transparent; border: 1.5px solid var(--sq-line); }
.all-in { color: var(--sq-green-deep); font-weight: 600; }

/* Coaching resources hub (sport-aware links). */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .9rem;
}
.resource-group {
  margin: 0;
  padding: .85rem 1rem;
  background: var(--sq-green-soft);
  border: 1px solid var(--sq-line);
  border-radius: var(--sq-radius);
}
.resource-group h4 {
  font-family: var(--sq-display);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sq-green-deep);
  margin: 0 0 .4rem;
}
.resource-list { list-style: none; margin: 0; padding: 0; }
.resource-list li { margin: 0; list-style: none; }
.resource-list li + li { border-top: 1px solid var(--sq-line); }
.resource-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .5rem 0;
  font-weight: 600;
  text-decoration: none;
  color: var(--sq-green);
}
.resource-list a:hover { color: var(--sq-green-deep); }
.resource-list .ext { color: var(--sq-muted); font-weight: 400; font-size: 1.1rem; }

/* Mobile: the 3 resource blocks stack into a single column (no squish). */
@media (max-width: 560px) { .resource-grid { grid-template-columns: 1fr; } }

/* Play picker. */
.play-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 .7rem; }
.play-actions button { width: auto; margin: 0; padding: .35rem .8rem; font-size: .85rem; }
.play-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .6rem;
  max-height: 460px;
  overflow: auto;
  padding: .6rem;
  border: 1px solid var(--sq-line);
  border-radius: 10px;
  background: var(--sq-bg);
}
.play-opt {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0;
  padding: .45rem;
  cursor: pointer;
  background: var(--sq-surface);
  border: 1.5px solid var(--sq-line);
  border-radius: 10px;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.play-opt:hover { border-color: var(--sq-green); }
.play-opt:has(.play-check:checked) {
  border-color: var(--sq-green);
  background: var(--sq-green-soft);
  box-shadow: inset 0 0 0 1px var(--sq-green);
}
.play-thumb-wrap {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--sq-line);
}
.play-thumb { width: 100%; height: 100%; object-fit: contain; display: block; }
.play-name {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sq-ink);
}
.play-opt input { width: auto; margin: 0; flex: none; }
.play-opt .core { color: var(--sq-accent); font-style: normal; }
#pick-count { margin: .5rem 0 0; }

/* Save / load setup + email parents. */
.save-load {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
}
.save-load button, .save-load .load-btn { width: auto; margin: 0; }
.save-load small { flex-basis: 100%; color: var(--pico-muted-color); margin: 0; }
.load-btn {
  display: inline-flex;
  align-items: center;
  margin: .75rem 0 0;
  padding: .5rem 1rem;
  border: 1px solid var(--sq-line);
  border-radius: var(--sq-r-btn);
  color: var(--sq-green);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
}
.load-btn:hover { border-color: var(--sq-green); background: var(--sq-green-soft); }
.email-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .35rem; }
.email-actions button { width: auto; margin: 0; }
.email-parents { width: auto; margin: 0; }

/* Every panel's primary action is whistle-orange (matches Build & Download). */
.cal-actions .cal, .email-parents {
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.cal-actions .cal:hover, .email-parents:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}

/* ── Step 1 flow: fast-lane, sub-steps, roster preview, build bar ── */
.smart-paste > header,
.intake-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.fast-pill {
  font-family: var(--sq-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sq-accent);
  padding: .2rem .6rem;
  border-radius: var(--sq-r-pill);
}

/* "or fill it in yourself" divider */
.or-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.25rem 0;
  color: var(--sq-muted);
  font-size: .78rem;
  font-family: var(--sq-display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.or-divider::before, .or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sq-line);
}

/* The Magic Hopper drop zone (Step 1 intake). */
.hopper {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .55rem; margin: 0 0 .6rem; padding: 2.1rem 1.25rem;
  border: 2px dashed var(--sq-line); border-radius: var(--sq-radius-lg);
  background: linear-gradient(180deg, var(--sq-green-soft), var(--sq-surface));
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.hopper.dragover { border-color: var(--sq-accent); background: #fff4e6; }
.hopper.is-busy { opacity: .75; pointer-events: none; }
.hopper-ico { width: 2.4rem; height: 2.4rem; color: var(--sq-green); margin: 0; }
.hopper-headline {
  font-family: var(--sq-display); font-size: 1.4rem; font-weight: 600;
  color: var(--sq-ink); margin: 0;
}
.hopper-sub { max-width: 44ch; margin: 0 0 .2rem; color: var(--sq-body); font-size: .95rem; }
.hopper-browse {
  width: auto; margin: .2rem 0 0; min-height: 2.75rem;
  display: inline-flex; align-items: center; font-weight: 700;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.hopper-browse:hover {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}
.hopper-privacy { display: block; margin: 0 0 .4rem; text-align: center; color: var(--sq-muted); font-size: .8rem; }
.hopper-privacy .ico { color: var(--sq-green); }
/* Brief "Added from screenshot" confirmation; JS toggles .show, then clears it. */
.hopper-note {
  display: none; margin: 0 0 .5rem; text-align: center;
  color: var(--sq-green-deep); font-weight: 600; font-size: .85rem;
}
.hopper-note.show { display: block; }
.hopper-skip { margin: .7rem 0 0; text-align: center; color: var(--sq-muted); font-size: .9rem; }

/* Intake header tools + See-an-example / Clear */
.intake-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.intake-tools .load-btn { margin: 0; padding: .35rem .7rem; font-size: .82rem; }
.ghost-btn {
  width: auto;
  margin: 0;
  padding: .35rem .7rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--sq-green);
  background: transparent;
  border: 1px solid var(--sq-line);
  border-radius: var(--sq-r-btn);
}
.ghost-btn:hover { border-color: var(--sq-green); background: var(--sq-green-soft); }

/* Draft-saved reassurance */
.draft-note {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 1rem;
  font-size: .82rem;
  color: var(--sq-muted);
}
.draft-note .ico { color: var(--sq-green); margin: 0; }

/* Chunked sub-steps */
.substep { margin: 0 0 1.4rem; }
.substep:last-child { margin-bottom: 0; }
.substep-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .6rem;
  font-family: var(--sq-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sq-ink);
}
.substep-head .opt { color: var(--sq-muted); font-weight: 400; font-size: .85rem; }
.substep-num {
  flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sq-green-soft);
  color: var(--sq-green-deep);
  font-size: .85rem;
  font-weight: 700;
}

/* Live roster preview */
.roster-preview { margin: .6rem 0 0; }
.roster-count {
  font-weight: 600;
  color: var(--sq-green-deep);
  margin-bottom: .45rem;
  font-size: .95rem;
}
.roster-chips { display: flex; flex-wrap: wrap; gap: .35rem .45rem; }
.rp-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: var(--sq-r-pill);
  border: 1px solid var(--sq-line);
  background: var(--sq-surface);
  font-size: .85rem;
  color: var(--sq-ink);
}
.rp-chip.is-out { color: var(--sq-muted); text-decoration: line-through; background: var(--sq-bg); }

/* Build bar: live summary + smart CTA */
.build-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  background: var(--sq-surface);
  border: 1px solid var(--sq-line);
  border-radius: var(--sq-radius);
  box-shadow: var(--sq-shadow-md);
}
.build-summary { display: flex; flex-direction: column; min-width: 0; flex: 1 1 12rem; }
.bs-team {
  font-family: var(--sq-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sq-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-meta { color: var(--sq-muted); font-size: .9rem; }
.build-cta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.build-cta button {
  width: auto;
  margin: 0;
  padding: .7rem 1.6rem;
  font-weight: 600;
  --pico-background-color: var(--sq-accent);
  --pico-border-color: var(--sq-accent);
  --pico-color: #fff;
}
.build-cta button:hover:not(:disabled) {
  --pico-background-color: var(--sq-accent-deep);
  --pico-border-color: var(--sq-accent-deep);
}
.build-cta button:disabled {
  --pico-background-color: var(--sq-line);
  --pico-border-color: var(--sq-line);
  --pico-color: var(--sq-muted);
  opacity: 1;
  cursor: not-allowed;
}
.build-hint { color: var(--sq-muted); font-size: .8rem; text-align: right; }
.build-hint.ok { color: var(--sq-green); font-weight: 600; }

@media (max-width: 720px) {
  .build-bar { position: sticky; bottom: 0; z-index: 40; }
  .build-cta { align-items: stretch; flex: 1 1 100%; }
  .build-cta button { width: 100%; }
  .build-hint { text-align: center; }
}

/* ── White-label league branding ─────────────────────────────── */
.league-logo { width: 38px; height: 38px; border-radius: 9px; object-fit: contain; }
.league-rulebook { margin: 0 0 1rem; }
.league-rulebook a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--sq-green-deep); text-decoration: none;
}
.league-rulebook a:hover { text-decoration: underline; }
.comms-app { margin: 0 0 1rem; }
.comms-open {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; min-height: 2.75rem;
  border-radius: var(--sq-r-btn);
  background: var(--sq-green-soft); color: var(--sq-green-deep);
  font-weight: 600; text-decoration: none;
}
.comms-open:hover { background: var(--sq-green); color: #fff; }
.for-leagues { display: block; margin-top: .35rem; }
.for-leagues a { color: var(--sq-muted); text-decoration: none; }
.for-leagues a:hover { color: var(--sq-green); text-decoration: underline; }

/* ── "For Leagues" pitch page ────────────────────────────────── */
a.hero-start { display: inline-flex; align-items: center; text-decoration: none; }
.pitch-back { margin-left: auto; align-self: center; color: rgba(255, 255, 255, .85); text-decoration: none; font-size: .9rem; }
.pitch-back:hover { color: #fff; text-decoration: underline; }
.pitch-hero { text-align: center; max-width: 44rem; margin: 2.5rem auto 1.5rem; }
.pitch-cta { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: center; margin: 1.4rem 0 .8rem; }
.pitch-example { color: var(--sq-green-deep); font-weight: 600; text-decoration: none; }
.pitch-example:hover { text-decoration: underline; }
.pitch-contact { margin: .3rem 0 0; color: var(--sq-muted); font-size: .92rem; }
.pitch-copy { background: none; border: 0; padding: .1rem .15rem; color: var(--sq-green-deep); font-weight: 600; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pitch-copy:hover { color: var(--sq-green); }
.pitch-copied { color: var(--sq-green); font-weight: 600; margin-left: .35rem; }
.pitch-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; max-width: 46rem; margin: 2rem auto; }
.pitch-mock {
  margin: 0; border: 1px solid var(--sq-line); border-radius: var(--sq-r-card);
  overflow: hidden; background: var(--sq-surface); box-shadow: var(--sq-shadow-sm);
}
.pitch-mock.branded { box-shadow: var(--sq-shadow-md); }
.pitch-mock-bar { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; color: #fff; font-family: var(--sq-display); font-weight: 600; }
.pitch-mock-bar.generic { background: linear-gradient(125deg, #0f2360, #17307a 45%, #2563eb); }
.pitch-mock-bar.league { background: linear-gradient(125deg, #063b45, #0b7285); }
.pitch-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.pitch-mock-body { list-style: none; margin: 0; padding: .8rem 1rem; }
.pitch-mock-body li { list-style: none; padding: .4rem 0; border-bottom: 1px solid var(--sq-line); color: var(--sq-body); }
.pitch-mock-body li:last-child { border-bottom: 0; }
.pitch-mock-body strong { color: var(--sq-green-deep); }
.pitch-mock figcaption { padding: .7rem 1rem; color: var(--sq-muted); font-size: .82rem; border-top: 1px solid var(--sq-line); }
.pitch-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 2.5rem auto; max-width: 52rem; }
.pitch-value { padding: 1.2rem; border: 1px solid var(--sq-line); border-radius: var(--sq-r-card); background: var(--sq-surface); }
.pitch-value h3 { margin: 0 0 .4rem; font-size: 1.05rem; color: var(--sq-ink); }
.pitch-value p { margin: 0; color: var(--sq-body); font-size: .92rem; }
.pitch-cta-band { text-align: center; max-width: 44rem; margin: 2.5rem auto; padding: 2rem 1.5rem; border-radius: var(--sq-r-card-lg); background: var(--sq-green-soft); }
.pitch-cta-band h3 { margin: 0 0 .4rem; font-family: var(--sq-display); color: var(--sq-green-deep); }
.pitch-cta-band p { margin: 0 0 1.2rem; color: var(--sq-body); }

@media (max-width: 560px) {
  .pitch-compare { grid-template-columns: 1fr; }
}

/* Landing shortcut: returning coaches jump straight to a step. */
.hero-jump {
  margin: -.6rem 0 1.7rem; text-align: center;
  color: var(--sq-muted); font-size: .92rem;
}
.hero-jump .linky { font-size: .92rem; }

/* Contextual wizard nav — Back / "Step N of 7" / Next on every step panel. */
.step-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: .6rem 1rem; margin-top: 1.6rem; padding-top: 1.1rem;
  border-top: 1px solid var(--sq-line);
}
.step-nav .step-back { width: auto; margin: 0; justify-self: start; }
.step-progress {
  justify-self: center; white-space: nowrap;
  font-family: var(--sq-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sq-muted);
}
.step-nav .step-next {
  width: auto; margin: 0; justify-self: end; text-align: center; font-weight: 600;
  --pico-background-color: var(--sq-green);
  --pico-border-color: var(--sq-green);
  --pico-color: #fff;
}
.step-nav .step-next:hover {
  --pico-background-color: var(--sq-green-deep);
  --pico-border-color: var(--sq-green-deep);
}
.step-nav .step-back:disabled { opacity: .45; }

/* Desktop / large tablet: the drawer becomes a persistent top tab strip (no hamburger). */
@media (min-width: 840px) {
  .nav-toggle { display: none; }
  .brand::before { display: none; }
  .app-header { margin-bottom: 0; }
  .app-top { margin-bottom: 1.6rem; }
  #main { scroll-margin-top: 7rem; }
  .nav-scrim { display: none !important; }
  .drawer {
    position: static; transform: none; visibility: visible;
    width: auto; max-width: none; height: auto;
    margin: 0; padding: 0;
    background: var(--sq-surface);
    border: 0; border-bottom: 1px solid var(--sq-line);
    box-shadow: var(--sq-shadow-sm); transition: none;
  }
  .drawer-head { display: none; }
  .tabs {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: .2rem; max-width: var(--sq-max); margin: 0 auto; padding: .35rem .75rem;
  }
  .tabs button { width: auto; min-height: 2.4rem; padding: .5rem .85rem; font-size: .82rem; }
  .tabs button.active { background: var(--sq-green); color: #fff; }
  .tabs button.active:hover { background: var(--sq-green-deep); color: #fff; }
}