:root {
  --ink: #0a0a0a;
  --ink-soft: #45494a;
  --lime: #c2fa07;
  --lime-hover: #aee000;
  --bg: #ffffff;
  --bg-soft: #f6f8f1;
  --border: #e6e8e1;
  --radius: 10px;
  --max-width: 1120px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The browser's native [hidden] { display: none } rule loses to ANY author
   rule that sets `display` on the same element at equal specificity, since
   author styles always beat user-agent styles regardless of source order.
   Reasserted here, once, with !important, so `hidden` reliably wins no
   matter what other classes an element has — instead of chasing this down
   one selector at a time with `:not([hidden])`, which raises that selector's
   specificity and can silently break other rules relying on the original
   (lower) specificity to lose ties, e.g. .btn-secondary's border-color
   override losing to .btn's border shorthand. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
}

/* .dashboard-body just hosts two children: the fixed-position sidebar rail
   and .dashboard-body-content (header/main/footer, offset to the right of
   it — see the dashboard shell rules further down for both). */
.dashboard-body {
  min-height: 100vh;
}

/* Classic sticky-footer layout, applied to the offset content column: keeps
   the footer pinned to the bottom of the viewport on short views (like
   Overview with one kid card) instead of riding up right under the content.
   Long views (like Edit Profile) just push the footer down naturally. */
.dashboard-body-content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: 240px;
  transition: margin-left 0.2s ease;
}

.dashboard-body-content main {
  flex: 1;
}

/* The dashboard already has its own dedicated rail (the sidebar) eating
   into the viewport, so the shared marketing-site .container max-width
   (1120px, meant for a centered single column with no side nav) leaves it
   cramped. Scoped to .dashboard-body-content specifically — not .container
   itself — so marketing pages and the kid-facing dashboard (no sidebar)
   are unaffected. */
.dashboard-body-content .container {
  max-width: 1400px;
}

h1, h2, h3, h4 {
  font-family: "Poppins", "Inter", sans-serif;
  line-height: 1.15;
  font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); }
h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.375rem; font-weight: 600; }

p { color: var(--ink-soft); }

a {
  color: inherit;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

*:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.section-on-dark *:focus-visible {
  outline-color: var(--lime);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--lime);
  color: var(--ink);
}

.btn-primary:hover {
  background-color: var(--lime-hover);
}

.btn-secondary {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn-secondary:hover {
  background-color: var(--ink);
  color: #fff;
}

.btn-secondary-on-dark {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}

.btn-secondary-on-dark:hover {
  background-color: #fff;
  color: var(--ink);
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* Site banner */

.site-banner {
  background-color: var(--ink);
  padding: 0.65rem var(--space-4);
  text-align: center;
}

.site-banner p {
  color: #ffffff;
  margin: 0;
  font-size: 0.875rem;
}

.site-banner a {
  color: var(--lime);
  font-weight: 600;
  text-decoration: underline;
}

.site-banner a:hover {
  color: #ffffff;
}

/* Nav */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  gap: var(--space-3);
}

.site-nav .logo {
  display: flex;
  align-items: center;
  margin-right: var(--space-6);
  flex-shrink: 0;
}

.site-nav .logo img {
  height: 44px;
  width: auto;
  max-width: none;
}

.nav-links {
  display: flex;
  gap: var(--space-4);
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}

.nav-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -220px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 250, 7, 0.16), rgba(194, 250, 7, 0) 70%);
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-inner {
  max-width: 720px;
  margin: 0 auto;
}

.hero h1 {
  margin-bottom: var(--space-3);
}

.hero-subhead {
  font-size: 1.1875rem;
  max-width: 580px;
  margin: 0 auto var(--space-4);
}

.eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

/* Generic section spacing */

section {
  padding: var(--space-12) 0;
}

.section-soft {
  background-color: var(--bg-soft);
}

.section-header {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

.section-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-header p {
  margin-top: var(--space-2);
  font-size: 1.0625rem;
}

/* What GoGritter is: comparison panels */

.story-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.story-text p + p {
  margin-top: var(--space-3);
}

.callout {
  margin-top: var(--space-4);
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-left: 3px solid var(--lime);
  padding-left: var(--space-3);
}

.compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compare-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.compare-card h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.compare-card.before {
  background-color: #eceeea;
}

.compare-card.after {
  background-color: #f7ffd9;
  border-color: var(--lime);
  box-shadow: inset 0 0 0 1px var(--lime);
}

.compare-card p {
  font-size: 0.95rem;
  margin: 0;
}

/* Kid-voice section */

.kid-voice {
  background-color: var(--ink);
  color: #fff;
  padding: var(--space-16) 0;
}

.kid-voice .eyebrow {
  color: var(--lime);
}

.kid-voice-text {
  max-width: 780px;
  margin: 0 auto;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
}

.kid-voice-text .highlight {
  color: var(--lime);
}

/* How it works */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--lime);
  color: var(--ink);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.step h3 {
  margin-bottom: var(--space-1);
}

.step p {
  font-size: 0.9688rem;
}

/* Safety */

.safety-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
}

.safety-lead .eyebrow {
  color: var(--ink-soft);
}

.safety-lead p {
  margin-top: var(--space-3);
}

.safety-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.safety-list li {
  display: flex;
  gap: var(--space-3);
}

.safety-check {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--lime);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.safety-list h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.safety-list p {
  font-size: 0.9688rem;
  margin: 0;
}

/* Pricing */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  align-items: stretch;
  max-width: 760px;
  margin: 0 auto;
}

.price-card {
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.price-card h2,
.price-card h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.price-amount {
  font-family: "Poppins", sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  margin: var(--space-2) 0;
}

.price-amount span {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.price-note {
  font-size: 0.8438rem;
  margin-top: -0.5rem;
  margin-bottom: var(--space-3);
}

.billing-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.billing-toggle-list {
  display: flex;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
}

.billing-toggle-label {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.price-card:has(#grow-billing-monthly:checked) label[for="grow-billing-monthly"],
.price-card:has(#grow-billing-season:checked) label[for="grow-billing-season"] {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.price-card:has(#grow-billing-monthly:focus-visible) label[for="grow-billing-monthly"],
.price-card:has(#grow-billing-season:focus-visible) label[for="grow-billing-season"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.billing-panel-season {
  display: none;
}

.price-card:has(#grow-billing-season:checked) .billing-panel-monthly {
  display: none;
}

.price-card:has(#grow-billing-season:checked) .billing-panel-season {
  display: block;
}

.savings-badge {
  display: inline-block;
  background-color: var(--lime);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-right: 0.25rem;
}

.price-card ul {
  list-style: none;
  margin: var(--space-3) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  flex-grow: 1;
}

.price-card ul li {
  position: relative;
  padding-left: 1rem;
}

.price-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ink);
}

.addon-section {
  margin-top: var(--space-6);
}

.addon-section > .eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

.addon-item {
  background-color: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.addon-item h3,
.addon-item h4 {
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.addon-item p {
  font-size: 0.8438rem;
  margin: 0;
}

.addon-note {
  margin-top: var(--space-2);
  font-size: 0.8438rem;
  color: var(--ink-soft);
}

/* FAQ */

.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-list details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
}

.faq-list summary {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.faq-list details[open] summary::after {
  content: "\2212";
}

.faq-list p {
  margin-top: var(--space-2);
  font-size: 0.9688rem;
}

.faq-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.faq-tab-list {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.faq-tab-label {
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.faq-tabs:has(#faq-tab-parents:checked) label[for="faq-tab-parents"],
.faq-tabs:has(#faq-tab-kids:checked) label[for="faq-tab-kids"] {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.faq-tabs:has(#faq-tab-parents:focus-visible) label[for="faq-tab-parents"],
.faq-tabs:has(#faq-tab-kids:focus-visible) label[for="faq-tab-kids"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.faq-panel-kids {
  display: none;
}

.faq-tabs:has(#faq-tab-kids:checked) .faq-panel-parents {
  display: none;
}

.faq-tabs:has(#faq-tab-kids:checked) .faq-panel-kids {
  display: block;
}

/* Final CTA */

.final-cta {
  background-color: var(--ink);
  color: #fff;
  text-align: center;
}

.final-cta h2 {
  margin-bottom: var(--space-2);
}

.final-cta p {
  color: #d7d7d7;
  max-width: 480px;
  margin: 0 auto var(--space-4);
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-8) 0 var(--space-4);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.footer-brand img {
  height: 26px;
  margin-bottom: var(--space-2);
}

.footer-brand p {
  font-size: 0.9375rem;
}

.footer-links {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.footer-col h5 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col a {
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  font-size: 0.8438rem;
  color: var(--ink-soft);
}

/* Get Started page */

.setup-form {
  max-width: 640px;
  margin: 0 auto;
}

.form-step {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.form-step:last-child {
  border-bottom: none;
}

.form-step h2 {
  font-size: 1.375rem;
  font-weight: 600;
  margin: var(--space-2) 0 0.25rem;
}

.field-hint {
  font-size: 0.8438rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.field-optional {
  font-weight: 400;
  color: var(--ink-soft);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--space-3);
  max-width: 360px;
}

.field label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.field-narrow {
  max-width: 120px;
}

.field-pin {
  max-width: 150px;
}

.field-password-wrap {
  position: relative;
}

.field-password-wrap input {
  width: 100%;
  padding-right: 2.75rem;
}

/* Edge/IE inject their own built-in password reveal + clear icons in the same
   top-right spot as our custom toggle, which is what made fields look like
   they had no real masking — this is the one place a browser's native UI
   should lose to ours, since we're providing an equivalent control. */
.field-password-wrap input::-ms-reveal,
.field-password-wrap input::-ms-clear {
  display: none;
}

.field-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--ink-soft);
  border-radius: var(--radius);
  cursor: pointer;
}

.field-password-toggle:hover {
  color: var(--ink);
}

.field-password-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="date"],
.field select {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background-color: var(--bg);
}

.field input:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

.custom-service-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.custom-service-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.custom-service-row input[type="text"] {
  flex: 1;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background-color: var(--bg);
}

.custom-service-row input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

.btn-remove-custom-service {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: transparent;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.btn-remove-custom-service:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-add-custom-service {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--ink);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.btn-add-custom-service:hover {
  background-color: var(--ink);
  color: #fff;
}

.service-location-group {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
  margin-bottom: var(--space-6);
}

.service-location-group:last-of-type {
  margin-bottom: var(--space-4);
}


.service-location-group h3 {
  font-family: "Poppins", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--lime);
}

.service-location-group .field-hint {
  margin-top: 0.4rem;
  margin-bottom: var(--space-2);
}

.service-location-group .service-group:last-child {
  margin-bottom: 0;
}

.service-group {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

.service-group legend {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--space-2);
  padding: 0;
}

.service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.service-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
  cursor: pointer;
}

.service-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.service-chip:has(input:checked) {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.service-chip:has(input:focus-visible) {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.confirm-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: fit-content;
  max-width: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  font-size: 0.9375rem;
  cursor: pointer;
}

.confirm-checkbox input {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  accent-color: var(--ink);
}

.form-message {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.form-message-error {
  background-color: #fdeceb;
  color: #7a1f1f;
}

.form-message-info {
  background-color: var(--bg-soft);
  color: var(--ink-soft);
}

.form-message-success {
  background-color: #eefbe0;
  color: #24401a;
}

.service-boundary h2 {
  font-size: 1.375rem;
  font-weight: 600;
  margin: var(--space-2) 0 0.25rem;
}

.boundary-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.boundary-toggle-list {
  display: flex;
  gap: 0.5rem;
  margin: var(--space-2) 0 var(--space-3);
}

.boundary-toggle-label {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.boundary-toggle:has(#boundary-mode-draw:checked) label[for="boundary-mode-draw"],
.boundary-toggle:has(#boundary-mode-radius:checked) label[for="boundary-mode-radius"] {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #ffffff;
}

.boundary-toggle:has(#boundary-mode-draw:focus-visible) label[for="boundary-mode-draw"],
.boundary-toggle:has(#boundary-mode-radius:focus-visible) label[for="boundary-mode-radius"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.search-results {
  position: relative;
  z-index: 5;
  margin-top: -0.25rem;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background-color: var(--bg);
  max-width: 360px;
  overflow: hidden;
}

.search-result-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.9rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
}

.search-result-item:hover,
.search-result-item:focus-visible {
  background-color: var(--bg-soft);
}

.service-area-map {
  height: 360px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: var(--space-3);
  overflow: hidden;
}

.boundary-controls {
  margin-bottom: var(--space-3);
}

.boundary-controls label {
  font-weight: 600;
  font-size: 0.9375rem;
  display: block;
  margin-bottom: 0.5rem;
}

.boundary-controls input[type="range"] {
  width: 100%;
  max-width: 360px;
  accent-color: var(--ink);
}

/* Responsive */

@media (max-width: 860px) {
  .site-nav nav {
    display: none;
  }

  .story-grid,
  .safety-grid {
    grid-template-columns: 1fr;
  }

  .steps,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-menu-toggle {
    display: inline-flex;
  }

  .dashboard-collapse-toggle {
    display: none;
  }

  .dashboard-sidebar {
    left: -280px;
    height: 100vh;
    width: 260px;
    overflow-y: auto;
  }

  .dashboard-sidebar.is-open {
    left: 0;
  }

  /* The outer panel is already pinned to the viewport (position: fixed,
     set unconditionally above), so an inner sticky wrapper would be
     redundant at best — reset it to plain static positioning for the
     drawer. */
  .dashboard-sidebar-inner {
    position: static;
  }

  /* The sidebar is off-canvas here, not occupying any static horizontal
     space, so the content column shouldn't be offset for it. */
  .dashboard-body-content {
    margin-left: 0;
  }
}

@media (max-width: 520px) {
  section {
    padding: var(--space-8) 0;
  }

  .nav-actions .btn-secondary {
    display: none;
  }

  /* The rule above is meant for marketing pages, where "Sign In" is a
     secondary action next to a more important "Get Started" CTA. On the
     dashboard, Sign Out is the ONLY nav action — hiding it would leave no
     way to sign out on mobile at all, so it's exempted by id (higher
     specificity than the class-combo rule above, so this wins). */
  #sign-out-btn {
    display: inline-flex;
  }

  .site-nav .logo {
    margin-right: var(--space-1);
  }

  .site-nav .logo img {
    height: 30px;
  }
}

@media (max-width: 340px) {
  .site-nav .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .site-nav .logo {
    margin-right: 0;
  }
}

.legal-page {
  padding: var(--space-8) 0 var(--space-12);
}

.legal-content {
  max-width: 720px;
}

.legal-content h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: var(--space-1);
}

.legal-updated {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin-bottom: var(--space-6);
}

.legal-content h2 {
  font-size: 1.5rem;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.legal-content h3 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}

.legal-content p {
  margin-bottom: var(--space-2);
}

.legal-list {
  color: var(--ink-soft);
  margin: 0 0 var(--space-2) var(--space-4);
}

.legal-list li {
  margin-bottom: var(--space-1);
}

/* Auth pages (sign in / reset password) */

.auth-page {
  padding: var(--space-8) 0 var(--space-12);
  display: flex;
  justify-content: center;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
}

.auth-card h1 {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}

.auth-card .field-hint {
  margin-bottom: var(--space-3);
}

.auth-card form {
  display: flex;
  flex-direction: column;
}

.auth-card .btn {
  margin-top: var(--space-1);
}

.link-button {
  display: inline-block;
  margin-top: var(--space-3);
  background: none;
  border: none;
  padding: 0;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--ink);
}

.auth-alt-action {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.role-choice-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

#parent-sign-in-section #back-from-parent,
#kid-sign-in-section #back-from-kid {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.dashboard-pin-form {
  margin-top: var(--space-3);
}

/* Dashboard */

.dashboard-page {
  padding: var(--space-8) 0 var(--space-12);
}

.dashboard-page h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  margin-bottom: var(--space-4);
}

.dashboard-page h2 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.dashboard-kids {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dashboard-kid-card {
  background-color: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.dashboard-kid-card h3 {
  margin-bottom: 0.25rem;
}

.dashboard-kid-tagline {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin-bottom: var(--space-2);
}

.dashboard-kid-status {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background-color: var(--border);
  color: var(--ink-soft);
}

.dashboard-kid-status-live {
  background-color: var(--lime);
  color: var(--ink);
}

/* Force the per-card action links (Edit profile, Set/reset PIN) to stack —
   .link-button is inline-block elsewhere on the site, which would let two
   adjacent ones sit side by side unpredictably inside a narrow card. */
.dashboard-kid-card .link-button {
  display: block;
}

#dashboard-view-edit #edit-view-back {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

#dashboard-edit-form {
  margin-top: var(--space-3);
}

.dashboard-price-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 480px;
}

.dashboard-price-service {
  padding: var(--space-2) var(--space-3) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
}

.dashboard-price-service h4 {
  font-size: 0.9375rem;
}

.dashboard-price-service-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dashboard-service-picker-panel {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.dashboard-price-tiers {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
}

.dashboard-price-tier-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-tier-name {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--ink);
  background-color: var(--bg);
}

.dashboard-tier-name:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

.dashboard-price-input {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.dashboard-price-input input {
  width: 5.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--ink);
  background-color: var(--bg);
}

.dashboard-price-input input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
}

/* Dashboard sidebar — a true docked rail: `position: fixed` spanning the
   full viewport height (top: 0 to bottom: 0), independent of the header/
   main/footer's own document flow rather than sized to match a sibling's
   height. .dashboard-body-content (header+main+footer) is offset via
   margin-left to make room for it. This is what makes it read as genuinely
   docked rather than a panel that merely stretches to match nearby
   content — it runs the full screen from top to bottom regardless of how
   tall the current view's content is.
   Two independent responsive behaviors:
   - Desktop: the sidebar can collapse to a narrow icon-only rail via
     body.is-sidebar-collapsed (toggled by the user, persisted in
     localStorage — see dashboard.html). Both the sidebar's width and the
     content column's margin-left animate together.
   - Mobile (see the 768px breakpoint below): the sidebar becomes an
     off-canvas drawer instead — a completely different, pre-existing
     mechanism (.is-open) that this collapse feature doesn't touch; the
     content column drops its margin-left entirely there since the sidebar
     no longer occupies any static horizontal space. */
/* `left` and `width` are deliberately NOT set here — both differ between
   desktop (docked, left: 0, collapsible 240px/64px) and mobile (off-canvas
   drawer, left: -280px by default, fixed 260px) in ways that would conflict
   if declared unconditionally: equal-specificity CSS rules resolve ties by
   source order, not by "which media query sounds more specific," so an
   unguarded value here would beat whichever media query's value happens to
   be declared earlier in the file, regardless of the actual viewport. Kept
   split into the two @media blocks below instead. */
.dashboard-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 100;
  background-color: var(--bg-soft);
  border-right: 1px solid var(--border);
  transition: width 0.2s ease, left 0.2s ease;
}

.dashboard-sidebar-inner {
  position: sticky;
  top: var(--space-4);
  padding: var(--space-2);
}

.dashboard-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0 var(--space-2) auto;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.dashboard-collapse-toggle:hover {
  background-color: var(--border);
  color: var(--ink);
}

.dashboard-collapse-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
  pointer-events: none;
}

.dashboard-sidebar-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.dashboard-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.dashboard-sidebar-link:hover {
  background-color: var(--border);
  color: var(--ink);
}

.dashboard-sidebar-link.is-active {
  background-color: var(--ink);
  color: #fff;
}

.dashboard-sidebar-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Collapse behavior only exists at desktop widths — kept inside this
   min-width guard rather than relying on specificity to beat the mobile
   .dashboard-sidebar rule below, since body.is-sidebar-collapsed's
   two-class specificity would otherwise win over the mobile media query's
   plain .dashboard-sidebar rule regardless of viewport (a media-query-less
   rule applies at every width; only the min-width guard actually excludes
   it on phones — this exact class of bug already bit the grid-based
   version of this sidebar once). */
@media (min-width: 769px) {
  .dashboard-sidebar {
    left: 0;
    width: 240px;
  }

  body.is-sidebar-collapsed .dashboard-sidebar {
    width: 64px;
  }

  body.is-sidebar-collapsed .dashboard-body-content {
    margin-left: 64px;
  }

  body.is-sidebar-collapsed .dashboard-collapse-toggle {
    margin: 0 auto var(--space-2);
  }

  body.is-sidebar-collapsed .dashboard-collapse-toggle svg {
    transform: rotate(180deg);
  }

  body.is-sidebar-collapsed .dashboard-sidebar-link {
    justify-content: center;
    padding: 0.6rem;
  }

  body.is-sidebar-collapsed .dashboard-sidebar-link-text {
    display: none;
  }
}

.dashboard-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
  color: var(--ink);
  cursor: pointer;
  margin-bottom: var(--space-3);
}

.dashboard-menu-toggle svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.dashboard-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.4);
  z-index: 90;
}

.dashboard-footer {
  text-align: center;
}

.dashboard-footer p {
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.dashboard-footer a {
  color: var(--ink-soft);
}

/* Public kid profile page */

.kid-profile-page {
  padding: var(--space-8) 0 var(--space-12);
}

.kid-profile-header {
  margin-bottom: var(--space-6);
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: var(--lime);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.kid-profile-header h1 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: var(--space-1);
}

.kid-profile-tagline {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.kid-profile-services {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-6);
  max-width: 480px;
}

.kid-profile-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-soft);
}

.kid-profile-service-price {
  font-weight: 600;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.kid-profile-service-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.65rem 0.9rem;
  background-color: var(--bg-soft);
}

.kid-profile-service-block h4 {
  font-size: 0.9375rem;
  margin-bottom: 0.4rem;
}

.kid-profile-service-block .kid-profile-service-row {
  border: none;
  background: none;
  padding: 0.2rem 0;
}

.kid-profile-reviews {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  max-width: 480px;
}

.kid-profile-review {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-soft);
}

.kid-profile-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.kid-profile-review-stars {
  color: var(--ink);
  letter-spacing: 0.05em;
}

/* Parent dashboard — Bookings view */

/* Each booking is a genuinely separate card — bordered, shadowed, gapped
   from its neighbors — rather than a flush divided row. Earlier passes on
   this dashboard deliberately favored one continuous "docked panel" for
   organization; this view now trades that for clearer per-booking scanning,
   per explicit request. A 4px left-border accent (transparent by default)
   is reserved for pending approvals below, so that's the one status that
   visually jumps out of the list. */
.dashboard-booking-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dashboard-booking-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-soft);
  padding: var(--space-3);
  box-shadow: 0 1px 3px rgba(10, 10, 10, 0.06);
}

.dashboard-booking-card[data-status="pending_parent_approval"] {
  border-left-color: var(--lime);
  background-color: var(--bg);
  box-shadow: 0 2px 6px rgba(10, 10, 10, 0.08);
}

.dashboard-booking-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.dashboard-booking-customer {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

/* Service + kid is a quiet label under the customer's name — a parent
   scanning this list is looking for "who's asking" first, "what for"
   second. The kid segment is only added in JS when it's actually needed
   (more than one kid, viewing "All kids") — repeating a kid's name on every
   card while already filtered to just them is pure noise. */
.dashboard-booking-service {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The one prominent date/time row per card — its own line, its own chip,
   so a parent doesn't have to hunt through paragraph text for "when." */
.dashboard-booking-schedule-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
  font-weight: 600;
  font-size: 0.9375rem;
}

.dashboard-booking-schedule-row svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink-soft);
}

.dashboard-booking-schedule-row-preferred {
  font-weight: 500;
  color: var(--ink-soft);
}

.dashboard-booking-schedule-row-empty {
  font-weight: 400;
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.75;
}

/* Quiet metadata — contact/address are secondary information a parent
   references, not headlines, so this is deliberately smaller than the rest
   of the card. Laid out as a wrapping row (not a stack) so it makes use of
   the wider card instead of leaving a lot of empty space beside it. */
.dashboard-booking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem var(--space-4);
  margin-bottom: var(--space-2);
}

.dashboard-booking-meta p {
  font-size: 0.8438rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.dashboard-booking-unspecified {
  font-style: italic;
  opacity: 0.7;
}

.dashboard-booking-notes {
  font-size: 0.8438rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}

/* Status badges — a deliberate progression rather than one color repeated:
   gray while waiting, an ink outline once approved but not yet locked in,
   solid ink once scheduled, and lime reserved for the actual payoff
   (completed) so it keeps meaning "success" instead of just "not pending."
   Declined/cancelled reuse the same red already established for
   .form-message-error rather than inventing a new color. */
.dashboard-booking-status-approved {
  background-color: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}

.dashboard-booking-status-scheduled {
  background-color: var(--ink);
  color: #fff;
}

.dashboard-booking-status-completed {
  background-color: var(--lime);
  color: var(--ink);
}

.dashboard-booking-status-declined,
.dashboard-booking-status-cancelled {
  background-color: #fdeceb;
  color: #7a1f1f;
}

/* One primary action + a quiet overflow menu, instead of several same-weight
   buttons. .dashboard-booking-card-footer-end right-aligns the menu on
   statuses (declined/cancelled) that have no primary action left. */
.dashboard-booking-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.dashboard-booking-card-footer-end {
  justify-content: flex-end;
}

.dashboard-schedule-form,
.dashboard-complete-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.dashboard-schedule-form .field,
.dashboard-complete-form .field {
  margin-bottom: 0;
}

/* The footer (primary submit + more menu) always gets its own full-width
   line within these forms, rather than sitting shoulder-to-shoulder with
   the date/time/amount fields as just another flex item. */
.dashboard-schedule-form .dashboard-booking-card-footer,
.dashboard-complete-form .dashboard-booking-card-footer {
  flex-basis: 100%;
}

.dashboard-time-selects {
  display: flex;
  gap: 0.4rem;
}

.dashboard-time-selects select {
  width: 5rem;
}

/* Overflow menu — secondary actions (decline, cancel, block) live here so
   the one primary action per card isn't competing for attention. */
.dashboard-more-menu {
  position: relative;
  flex-shrink: 0;
}

.dashboard-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.dashboard-more-toggle svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.dashboard-more-toggle:hover {
  background-color: var(--border);
  color: var(--ink);
}

.dashboard-more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  min-width: 190px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg);
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.14);
  overflow: hidden;
  z-index: 10;
}

.dashboard-more-item {
  display: block;
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: none;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.dashboard-more-item:hover {
  background-color: var(--bg-soft);
}

.dashboard-more-item-destructive {
  color: #7a1f1f;
}

.dashboard-blocked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  max-width: 480px;
}

.dashboard-blocked-row .link-button {
  margin-top: 0;
}

/* Empty state — an invitation to act (share the link that gets the first
   booking), not a blank page. */
.dashboard-empty-state {
  padding: var(--space-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-soft);
  max-width: 620px;
}

.dashboard-empty-state-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.25rem;
}

.dashboard-share-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

.dashboard-share-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

/* QR codes need a solid white quiet zone to scan reliably, even against
   this card's own bg-soft/dashed-border background — hence the explicit
   white fill here rather than inheriting the page background. */
.dashboard-share-row-qr {
  flex-shrink: 0;
  display: flex;
  padding: 0.4rem;
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  line-height: 0;
}

.dashboard-share-row-qr svg {
  display: block;
}

.dashboard-share-row-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 0.35rem;
}

.dashboard-share-row-kid {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.dashboard-share-row-url {
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* Earnings */

.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-6);
  max-width: 720px;
}

#dashboard-earnings-by-service,
#dashboard-earnings-by-month {
  max-width: 480px;
  margin-bottom: var(--space-4);
}

.dashboard-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-soft);
}

.dashboard-stat-value {
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
}

.dashboard-stat-label {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.dashboard-price-row-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Goals */

.dashboard-goal-card {
  max-width: 640px;
}

.dashboard-goal-bar {
  height: 10px;
  border-radius: 999px;
  background-color: var(--border);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.dashboard-goal-bar-fill {
  height: 100%;
  background-color: var(--lime);
  border-radius: 999px;
}

/* Kid filter — Bookings / Earnings / Goals */

.dashboard-kid-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
}

.dashboard-kid-filter-pill {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background-color: var(--bg);
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}

.dashboard-kid-filter-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.dashboard-kid-filter-pill.is-active {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Docked panel — the shared "organized list" primitive reused across
   Edit Profile's kid selector, Bookings, Earnings breakdowns, and Goals:
   one bordered panel with items separated by internal dividers, rather than
   each item being its own independently-bordered, margined, "floating"
   card. This is the base fix for the dashboard feeling like a scatter of
   disconnected boxes instead of one organized surface. */
.dashboard-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-soft);
  overflow: hidden;
}

.dashboard-panel-row {
  display: block;
  width: 100%;
  padding: var(--space-3);
  border: none;
  border-bottom: 1px solid var(--border);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: default;
}

.dashboard-panel-row:last-child {
  border-bottom: none;
}

button.dashboard-panel-row {
  cursor: pointer;
}

/* Edit Profile — master-detail: kid selector list + the selected kid's
   editor, both visible at once (no click-through between a "list" screen
   and a "form" screen — see dashboard.html's selectKidForEditing()). */
.dashboard-edit-shell {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.dashboard-kid-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.dashboard-kid-select-row:hover {
  background-color: var(--border);
}

.dashboard-kid-select-row.is-active {
  background-color: var(--ink);
  color: #fff;
}

.dashboard-kid-select-name {
  font-weight: 600;
}

.dashboard-edit-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dashboard-pin-panel,
.dashboard-add-goal-panel {
  padding: var(--space-3);
  margin-top: var(--space-4);
  max-width: 480px;
}

.dashboard-pin-panel h3,
.dashboard-add-goal-panel h3 {
  font-size: 1.0625rem;
  margin-bottom: var(--space-1);
}

.dashboard-add-goal-panel form {
  margin-top: var(--space-2);
}

@media (max-width: 768px) {
  .dashboard-edit-shell {
    grid-template-columns: 1fr;
  }
}