/* Brand tokens layered on top of bws-theme.css — never edit the vendor files directly.
   Premium navy + gold look (dark hero/footer, gold accents, serif display headlines). */
:root {
  /* WCAG AA note: --bws-primary is the color plain body-context links/text render in (see
     bws-core.css's `a { color: var(--bws-primary) }`) — it needs real contrast against a WHITE
     card background, unlike --pto-gold below (reserved for text/badges on the dark navy hero/
     footer, where the original brighter gold already has great contrast). The original value
     here (#b8860b) only reached ~3.3:1 on white — a real, Lighthouse-flagged AA failure for
     normal-size text (needs 4.5:1). This darker shade reaches ~5.3:1 while staying in the same
     amber/gold family, so it's a contrast fix, not a rebrand. */
  --bws-primary: #8a6508;
  --pto-navy: #0f1b33;
  --pto-navy-light: #17274a;
  --pto-navy-border: rgba(255, 255, 255, 0.08);
  --pto-gold: #f2b84b;
  --pto-gold-soft: rgba(242, 184, 75, 0.14);
}

body {
  font-family: 'DM Sans', var(--bws-font-sans);
}

.pto-page-shell {
  padding: 32px 16px;
}

@media (max-width: 640px) {
  .bws-container {
    width: calc(100% - 16px);
    max-width: none;
  }

  .pto-page-shell {
    padding: 24px 0 36px;
  }

  .pto-page-shell > .pto-tabs-nav,
  .pto-page-shell > .pto-tab-panel {
    padding-inline: 10px;
  }

  .bws-container[style*="padding:32px 16px"],
  .bws-container[style*="padding: 32px 16px"],
  .bws-container[style*="padding:34px 16px"],
  .bws-container[style*="padding: 34px 16px"] {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   Accessibility (WCAG 2.1 AA baseline) — see /accessibility for the site's full
   statement. Kept together here rather than scattered across the file so this is the one
   place to check what's already handled site-wide.
--------------------------------------------------------------------------- */

/* Visually hides content while keeping it in the accessibility tree — the standard "sr-only"
   recipe (clip instead of display:none/visibility:hidden, which would remove it from screen
   readers too). Used to disambiguate a repeated link's visible text ("Create your PTO page",
   "Read More", ...) with a school/post/business name a sighted user already sees from
   surrounding context, so a screen reader's "links list" doesn't read several identical,
   indistinguishable entries — see WCAG 2.4.4/2.4.9 (Link Purpose). */
.pto-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;
}

/* "Skip to main content" — the first focusable thing on every page (see layout/header.php),
   invisible until a keyboard user actually tabs to it, so it never affects sighted mouse users
   but lets keyboard/screen-reader users bypass the nav on every single page. */
.pto-skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 10000;
  background: var(--pto-navy, #0f1b33);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.pto-skip-link:focus {
  top: 0;
}

/* A visible, high-contrast focus ring on every interactive element, using :focus-visible so it
   only shows for keyboard/switch navigation — not on every mouse click — while still degrading
   safely to plain :focus on the handful of older browsers that don't support :focus-visible. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: 2px solid var(--pto-gold, #f2b84b);
  outline-offset: 2px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pto-gold, #f2b84b);
  outline-offset: 2px;
}

/* Respects a visitor's own OS-level "reduce motion" setting (vestibular disorders, motion
   sensitivity) — near-instant instead of animated for anyone who's asked for that, site-wide,
   without having to find and re-touch every individual transition/animation declaration. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* Directory search bars (/schools, /businesses) — several narrow fields + a button on one
   row on desktop. */
.pto-search-form {
  margin-top: 16px;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
}

.pto-business-directory-subtitle {
  max-width: 760px;
  margin: 8px 0 0;
}
.pto-business-directory-hero {
  padding: 44px 0 34px;
}
.pto-business-directory-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 28px;
  align-items: start;
}
.pto-business-directory-copy {
  min-width: 0;
}
.pto-business-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.pto-business-hero-stats span {
  min-width: 96px;
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pto-business-hero-stats strong {
  color: var(--pto-gold);
  font-size: 1.18rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.pto-business-search-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}
.pto-business-search-wide,
.pto-business-search-actions,
.pto-business-clear-filter {
  grid-column: 1 / -1;
}
.pto-business-search-panel .bws-label {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pto-business-search-panel .bws-input,
.pto-business-search-panel .bws-select {
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.22);
  background: #fff;
}
.pto-business-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}
.pto-business-search-actions .bws-btn {
  min-height: 44px;
}
.pto-business-open-toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.pto-business-open-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pto-business-clear-filter {
  align-self: end;
}
.pto-business-directory-results {
  padding: 34px 16px 42px;
}
.pto-business-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.pto-business-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pto-business-directory-card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-color: rgba(15, 27, 51, 0.1);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.08);
}
.pto-business-card-media {
  position: relative;
  display: block;
  height: 146px;
  background: linear-gradient(135deg, rgba(15, 27, 51, 0.08), rgba(242, 184, 75, 0.12));
}
.pto-business-card-cover {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.pto-business-card-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 27, 51, 0.28);
  font-size: 2rem;
}
.pto-business-card-logo-wrap {
  position: absolute;
  left: 14px;
  bottom: -24px;
  width: 58px;
  height: 58px;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.16);
}
.pto-business-card-logo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(242, 184, 75, 0.14);
  color: #8a6508;
  font-size: 1.25rem;
}
.pto-business-card-featured {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15, 27, 51, 0.88);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.pto-business-card-body {
  display: grid;
  gap: 9px;
  padding-top: 34px;
}

.pto-shop-tab {
  display: grid;
  gap: 18px;
}
.pto-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}
.pto-shop-collections {
  display: grid;
  gap: 14px;
}
.pto-shop-group {
  border: 1px solid rgba(242, 184, 75, 0.34);
  border-radius: 10px;
  background: linear-gradient(135deg, #fffaf0, #fff);
  box-shadow: 0 12px 30px rgba(15, 27, 51, 0.08);
  overflow: hidden;
}
.pto-shop-group-question {
  min-height: 58px;
  padding: 14px 16px;
}
.pto-shop-group-question > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pto-navy, #0f1b33);
  font-weight: 900;
}
.pto-shop-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 27, 51, 0.09);
}
.pto-shop-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 80% 0%, rgba(242, 184, 75, 0.26), transparent 38%),
    linear-gradient(135deg, rgba(15, 27, 51, 0.08), rgba(242, 184, 75, 0.12));
}
.pto-shop-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.22s ease;
}
.pto-shop-card:hover .pto-shop-card-media img,
.pto-shop-card:focus-visible .pto-shop-card-media img {
  transform: scale(1.035);
}
.pto-shop-card-media-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 27, 51, 0.28);
  font-size: 2rem;
}
.pto-shop-card-status {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
}
.pto-shop-card-body {
  display: grid;
  gap: 10px;
  padding: 14px;
  flex: 1;
}
.pto-shop-card-body strong {
  color: var(--pto-navy, #0f1b33);
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: 1.12rem;
  line-height: 1.2;
}
.pto-shop-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8a6508;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pto-shop-card-excerpt {
  color: var(--bws-text-muted, #64748b);
  line-height: 1.45;
  font-size: 0.92rem;
}
.pto-shop-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pto-shop-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 800;
}
.pto-shop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 27, 51, 0.08);
}
.pto-shop-card-price {
  font-weight: 800;
  color: #8a6508;
  font-size: 1.05rem;
}
.pto-shop-card-price-old {
  text-decoration: line-through;
  color: var(--bws-text-muted, #6b7280);
  font-weight: 600;
  margin-right: 4px;
}
.pto-shop-card-price-sale {
  color: #c0392b;
}
.pto-shop-card-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--pto-navy, #0f1b33);
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}
.pto-shop-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}
.pto-shop-product-card {
  overflow: hidden;
  border: 1px solid rgba(15, 27, 51, 0.1);
  box-shadow: 0 18px 48px rgba(15, 27, 51, 0.1);
}
.pto-shop-product-image {
  width: 100%;
  min-height: 260px;
  max-height: 430px;
  object-fit: cover;
  display: block;
}
.pto-shop-product-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.pto-shop-product-meta p {
  margin: 0;
  padding: 10px;
  border-radius: 8px;
  background: #f8fafc;
  color: #475569;
}
.pto-shop-purchase-box {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(242, 184, 75, 0.32);
  border-radius: 10px;
  background: linear-gradient(135deg, #fffaf0, #fff);
}
.pto-shop-related-widget {
  position: sticky;
  top: 90px;
}
.pto-shop-related-widget .bws-card-body {
  display: grid;
  gap: 12px;
}
.pto-shop-related-widget .pto-shop-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.pto-shop-related-widget .pto-shop-card-media {
  aspect-ratio: 16 / 9;
}
@media (max-width: 860px) {
  .pto-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pto-shop-product-layout {
    grid-template-columns: 1fr;
  }
  .pto-shop-related-widget {
    position: static;
  }
}
@media (max-width: 560px) {
  .pto-shop-grid {
    grid-template-columns: 1fr;
  }
  .pto-shop-card-footer,
  .pto-shop-product-meta {
    grid-template-columns: 1fr;
  }
  .pto-shop-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Small rotating "Now in the Shop!" fundraiser ad above Upcoming Events on pto.php
   (pto_render_shop_ad_widget(), core/shop.php) — reuses the generic .pto-cr-slideshow
   auto-rotate engine the Community Requests widget already built; only this compact card
   styling is new (.pto-shop-ad-*, deliberately its own prefix — never .pto-shop-card-*, a
   different, unrelated card shape used on the full Shop grid). Mirrors .pto-volreq-ad-*'s own
   "media object, image fills full card height" layout. */
.pto-shop-ad-wrap {
  margin-bottom: 20px;
}
.pto-shop-ad-card {
  position: relative;
  min-height: 118px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(15, 27, 51, 0.12);
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 184, 75, 0.3), transparent 26%),
    linear-gradient(135deg, #fffaf0, #fff 55%, #fff6e0);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.12);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pto-shop-ad-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 27, 51, 0.3);
  box-shadow: 0 16px 34px rgba(15, 27, 51, 0.16);
}
.pto-shop-ad-card:focus-visible {
  outline: 3px solid rgba(15, 27, 51, 0.42);
  outline-offset: 3px;
}
.pto-shop-ad-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 118px;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  flex: none;
  border: none;
  box-shadow: none;
}
.pto-shop-ad-image-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15, 27, 51, 0.28);
  font-size: 1.6rem;
  background: linear-gradient(135deg, rgba(15, 27, 51, 0.08), rgba(242, 184, 75, 0.14));
}
.pto-shop-ad-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 14px 14px calc(118px + 14px);
  width: 100%;
}
.pto-shop-ad-kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.2);
  color: #8a6508;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pto-shop-ad-title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pto-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pto-shop-ad-price {
  font-size: 0.85rem;
  font-weight: 800;
  color: #8a6508;
}
.pto-shop-ad-price-old {
  text-decoration: line-through;
  color: var(--bws-text-muted, #6b7280);
  font-weight: 600;
  margin-right: 4px;
}
.pto-shop-ad-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #b3261e;
}
.pto-shop-ad-deadline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--bws-text-muted, #6b7280);
}
.pto-shop-ad-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--pto-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.pto-shop-ad-wrap .pto-cr-slideshow-prev,
.pto-shop-ad-wrap .pto-cr-slideshow-next {
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
}
@media (max-width: 640px) {
  .pto-shop-ad-card {
    min-height: 108px;
  }
  .pto-shop-ad-image {
    width: 96px;
  }
  .pto-shop-ad-body {
    padding-left: calc(96px + 12px);
  }
}

.pto-business-card-topline,
.pto-business-card-meta,
.pto-business-card-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pto-business-card-category {
  color: #8a6508;
  font-size: 0.73rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pto-business-card-title {
  color: var(--pto-navy);
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.18;
}
.pto-business-card-meta {
  color: #566176;
  font-size: 0.84rem;
}
.pto-business-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pto-business-card-rating {
  color: #344155;
  font-size: 0.84rem;
}
.pto-business-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin-top: 2px;
  color: #8a6508;
  font-size: 0.84rem;
  font-weight: 900;
}
.pto-business-directory-card:hover .pto-business-card-title,
.pto-business-directory-card:hover .pto-business-card-cta {
  color: #7a4100;
  text-decoration: underline;
}

.pto-business-dashboard {
  padding: 34px 16px 44px;
}
.pto-business-dashboard-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 24px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(15, 27, 51, 0.96), rgba(23, 39, 74, 0.94)),
    radial-gradient(circle at 92% 16%, rgba(242, 184, 75, 0.24), transparent 34%);
  color: #fff;
  box-shadow: 0 16px 38px rgba(15, 27, 51, 0.18);
}
.pto-business-dashboard-hero h1 {
  margin: 8px 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
}
.pto-business-dashboard-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}
.pto-business-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.pto-business-dashboard-stats span {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(15, 27, 51, 0.1);
  border-radius: 10px;
  background: #fff;
  color: #5f6b7a;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.06);
}
.pto-business-dashboard-stats i {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.14));
  color: #8a6508;
}
.pto-business-dashboard-stats strong {
  color: var(--pto-navy, #0f1b33);
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0;
}
.pto-business-dashboard-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.pto-business-dashboard-head p {
  margin: 4px 0 0;
}
.pto-business-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.pto-business-dashboard-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.08);
}
.pto-business-dashboard-media {
  position: relative;
  height: 132px;
  background: linear-gradient(135deg, rgba(15, 27, 51, 0.08), rgba(242, 184, 75, 0.12));
}
.pto-business-dashboard-media > img,
.pto-business-dashboard-media > span {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  color: rgba(15, 27, 51, 0.28);
  font-size: 2rem;
}
.pto-business-dashboard-logo {
  position: absolute;
  left: 16px;
  bottom: -26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  color: #8a6508;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.16);
}
.pto-business-dashboard-logo img,
.pto-business-dashboard-logo i {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.pto-business-dashboard-logo img {
  object-fit: cover;
}
.pto-business-dashboard-logo i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.14));
}
.pto-business-dashboard-card > .bws-card-body {
  display: grid;
  gap: 12px;
  padding: 36px 16px 16px;
}
.pto-business-dashboard-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.pto-business-dashboard-card-head h2 {
  margin: 0;
  color: var(--pto-navy, #0f1b33);
  font-size: 1.35rem;
  line-height: 1.1;
}
.pto-business-dashboard-card-head p {
  margin: 5px 0 0;
}
.pto-business-dashboard-status,
.pto-business-dashboard-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
}
.pto-business-dashboard-status {
  flex: none;
  padding: 6px 9px;
}
.pto-business-dashboard-status-active {
  background: rgba(21, 128, 61, 0.12);
  color: #166534;
}
.pto-business-dashboard-status-pending,
.pto-business-dashboard-renewal-warn {
  background: rgba(242, 184, 75, 0.18);
  color: #7a5707;
}
.pto-business-dashboard-status-muted {
  background: rgba(15, 27, 51, 0.08);
  color: #475569;
}
.pto-business-dashboard-note {
  margin: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: rgba(242, 184, 75, 0.14);
  color: #624605;
  font-size: 0.86rem;
  font-weight: 700;
}
.pto-business-dashboard-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pto-business-dashboard-meta span {
  padding: 7px 9px;
  background: rgba(15, 27, 51, 0.06);
  color: #344155;
}
.pto-business-dashboard-meta .pto-business-dashboard-renewal-ok {
  background: rgba(42, 157, 143, 0.13);
  color: #1f7168;
}
.pto-business-dashboard-meta .pto-business-dashboard-renewal-danger {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}
.pto-business-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}
.pto-business-dashboard-actions .bws-btn {
  min-height: 36px;
}
.pto-business-dashboard-empty .bws-card-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
}
.pto-business-dashboard-empty i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.14));
  color: #8a6508;
  font-size: 1.4rem;
}
.pto-business-dashboard-empty h2,
.pto-business-dashboard-empty p {
  margin: 0 0 8px;
}

.pto-business-edit-page {
  padding: 32px 16px 44px;
  max-width: 1120px;
  margin: 0 auto;
}
.pto-business-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.pto-business-edit-head h1 {
  margin: 6px 0 0;
}
.pto-business-edit-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.pto-tabs-nav.pto-business-edit-tabs {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.08);
  overflow: visible;
}
.pto-tabs-nav.pto-business-edit-tabs .pto-tab-btn {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
  min-height: 42px;
  margin: 0;
  padding: 9px 11px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 8px;
  color: #516071;
  text-align: left;
}
.pto-tabs-nav.pto-business-edit-tabs .pto-tab-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  color: #8a6508;
}
.pto-tabs-nav.pto-business-edit-tabs .pto-tab-btn.pto-tab-active {
  border-left-color: var(--pto-gold, #f2b84b);
  background: rgba(242, 184, 75, 0.14);
  color: var(--pto-navy, #0f1b33);
}
.pto-business-edit-content {
  min-width: 0;
}
.pto-business-edit-content .pto-tab-panel {
  padding-top: 0 !important;
}

@media (max-width: 640px) {
  .pto-business-dashboard {
    padding: 24px 16px 36px;
  }
  .pto-business-dashboard-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 20px;
  }
  .pto-business-dashboard-hero h1 {
    font-size: 1.65rem;
  }
  .pto-business-dashboard-hero .bws-btn {
    width: 100%;
    justify-content: center;
  }
  .pto-business-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pto-business-dashboard-stats span {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 10px;
    font-size: 0.66rem;
  }
  .pto-business-dashboard-stats i {
    width: 32px;
    height: 32px;
  }
  .pto-business-dashboard-stats strong {
    font-size: 1.1rem;
  }
  .pto-business-dashboard-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pto-business-dashboard-card-head {
    flex-direction: column;
  }
  .pto-business-dashboard-actions .bws-btn {
    flex: 1 1 140px;
    justify-content: center;
  }
  .pto-business-dashboard-empty .bws-card-body {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {
  .pto-business-edit-page {
    padding: 24px 16px 36px;
  }
  .pto-business-edit-head {
    align-items: stretch;
    flex-direction: column;
  }
  .pto-business-edit-head .bws-btn {
    width: 100%;
    justify-content: center;
  }
  .pto-business-edit-shell {
    display: block;
  }
  .pto-tabs-nav.pto-business-edit-tabs {
    position: static;
    display: flex;
    gap: 2px;
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    border-bottom: 2px solid var(--bws-border);
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .pto-tabs-nav.pto-business-edit-tabs .pto-tab-btn {
    width: auto;
    flex: 0 0 auto;
    justify-content: center;
    min-height: 40px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    padding: 8px 10px;
  }
  .pto-tabs-nav.pto-business-edit-tabs .pto-tab-btn.pto-tab-active {
    border-bottom-color: var(--pto-gold, #f2b84b);
    background: transparent;
  }
}

@media (max-width: 640px) {
  .pto-search-form {
    grid-template-columns: 1fr;
  }
  .pto-search-form .bws-btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .pto-business-directory-hero {
    padding: 30px 0 24px;
  }
  .pto-business-directory-hero-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pto-business-directory-title {
    font-size: 1.28rem;
    line-height: 1.12;
    margin: 6px 0 12px;
  }
  .pto-business-directory-subtitle {
    font-size: 0.94rem;
  }
  .pto-business-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pto-business-hero-stats span {
    min-width: 0;
    padding: 9px 8px;
    font-size: 0.66rem;
  }
  .pto-business-hero-stats strong {
    font-size: 1rem;
  }
  .pto-business-search-panel {
    padding: 12px;
  }

  form.bws-form-row.pto-search-form.pto-business-search-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  form.bws-form-row.pto-search-form.pto-business-search-form .bws-form-group {
    grid-column: auto !important;
  }
  form.bws-form-row.pto-search-form.pto-business-search-form .pto-business-search-wide,
  form.bws-form-row.pto-search-form.pto-business-search-form .pto-business-search-actions,
  form.bws-form-row.pto-search-form.pto-business-search-form .pto-business-clear-filter {
    grid-column: 1 / -1 !important;
  }
  .pto-business-search-actions .bws-btn,
  .pto-business-open-toggle {
    flex: 1 1 auto;
    justify-content: center;
  }
  .pto-business-results-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .pto-business-results-head .bws-btn {
    width: 100%;
    justify-content: center;
  }
  .pto-business-directory-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pto-business-card-media {
    height: 132px;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .pto-business-directory-hero-inner {
    grid-template-columns: 1fr;
  }
  .pto-business-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Org page headers — keep logo/title compact on mobile; only the action buttons wrap below. */
@media (max-width: 768px) {
  .pto-hero-row {
    flex-direction: row;
    align-items: center !important;
    gap: 12px !important;
  }
  .pto-hero-row > img,
  .pto-hero-row > .pto-school-logo-default {
    width: 64px !important;
    height: 64px !important;
    border-radius: 12px !important;
  }
  .pto-hero-row > div {
    min-width: 0;
  }
  .pto-hero-row .bws-hero-actions {
    width: 100%;
  }
  .pto-hero-row .bws-hero-actions .bws-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .pto-dark-section {
    padding: 26px 0 !important;
  }
  .pto-dark-section .bws-container > .bws-flex.bws-justify-between {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 14px;
  }
  .pto-dark-section h1.bws-text-3xl {
    margin: 0 !important;
    font-size: 1.85rem;
    line-height: 1.08;
  }
  .pto-eyebrow {
    gap: 5px;
    margin-bottom: 8px;
    padding: 4px 10px;
    font-size: 0.68rem;
    line-height: 1.1;
    letter-spacing: 0.03em;
  }
  .bws-hero-actions {
    gap: 8px !important;
    margin-top: 18px !important;
  }
  .pto-hero-actions-menu {
    width: 100%;
  }
  .pto-hero-actions-menu summary {
    width: 100%;
    justify-content: center;
  }
  .pto-hero-actions-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .bws-hero-actions .bws-btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 0.9rem;
  }
  .pto-business-hero-shell {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pto-business-hero-identity {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
  }
  .pto-business-hero-logo {
    width: 66px;
    height: 66px;
    border-radius: 14px;
  }
  .pto-business-hero-meta {
    gap: 6px;
    margin-top: 8px;
  }
  .pto-business-hero-meta .pto-badge-gold,
  .pto-business-hero-meta .pto-business-status {
    max-width: 100%;
    font-size: 0.72rem;
  }
  .pto-business-hero-edit {
    justify-self: start;
  }
}

.pto-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

/* --- Dark navy sections (hero, jumbotron, footer) --------------------- */
.pto-dark-section {
  background: linear-gradient(160deg, var(--pto-navy) 0%, var(--pto-navy-light) 100%);
  color: #f1f5f9;
}

.bws-jumbotron.pto-dark-section.pto-district-self-host {
  border-radius: 0;
}

.pto-dark-section .bws-hero-subtitle,
.pto-dark-section .bws-jumbotron-text,
.pto-dark-section p {
  color: #cbd5e1;
}

.pto-dark-section .pto-hero-row {
  align-items: center !important;
  gap: 16px !important;
}

.pto-dark-section .pto-hero-row > img,
.pto-dark-section .pto-hero-row > .pto-school-logo-default {
  width: 72px !important;
  height: 72px !important;
  border-radius: 14px !important;
  flex: none;
}

.pto-dark-section .pto-hero-row > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.pto-dark-section h1.bws-text-3xl {
  margin: 0 !important;
  line-height: 1.08;
}

.pto-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pto-gold-soft);
  color: var(--pto-gold);
  border: 1px solid rgba(242, 184, 75, 0.35);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.pto-dark-section details.pto-hero-actions-menu {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 16px;
  margin-left: 0;
}

.pto-dark-section details.pto-hero-actions-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid rgba(242, 184, 75, 0.45);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--pto-gold);
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.14);
}

.pto-dark-section details.pto-hero-actions-menu > summary::marker,
.pto-dark-section details.pto-hero-actions-menu > summary::-webkit-details-marker {
  content: "";
  display: none;
}

.pto-dark-section details.pto-hero-actions-menu > summary::after {
  content: "\F282";
  font-family: bootstrap-icons;
  font-size: 0.8rem;
}

.pto-dark-section details.pto-hero-actions-menu[open] > summary::after {
  content: "\F286";
}

.pto-dark-section details.pto-hero-actions-menu > summary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.pto-dark-section .pto-hero-actions-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  max-width: 960px;
}

.pto-business-hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
}

.pto-business-hero-main {
  min-width: 0;
}

.pto-business-hero-identity {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.pto-business-hero-logo {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.pto-business-hero-copy {
  min-width: 0;
}

.pto-business-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.pto-business-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.pto-business-hero-rating:focus-visible,
.pto-business-hero-edit:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .pto-business-hero-section {
    padding: 28px 0 !important;
  }

  .pto-business-hero-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }

  .pto-business-hero-identity {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .pto-business-hero-logo {
    width: 66px;
    height: 66px;
    border-radius: 14px;
  }

  .pto-business-hero-copy h1 {
    font-size: 1.38rem;
    line-height: 1.05;
    white-space: nowrap;
  }

  .pto-business-hero-meta {
    gap: 6px;
    margin-top: 8px;
  }

  .pto-business-hero-meta .pto-badge-gold,
  .pto-business-hero-meta .pto-business-status {
    max-width: 100%;
    font-size: 0.72rem;
  }

  .pto-business-hero-edit {
    justify-self: start;
    min-height: 38px;
    padding: 7px 13px;
  }
}

.pto-dark-section .bws-hero-title,
.pto-dark-section .bws-jumbotron-title {
  color: #ffffff;
}

/* --- Navbar (dark, matches hero) --------------------------------------- */
.pto-navbar-dark {
  background: var(--pto-navy) !important;
  border-bottom: 1px solid var(--pto-navy-border);
}

.pto-navbar-dark .bws-navbar-brand,
.pto-navbar-dark .bws-navbar-link {
  color: #f1f5f9 !important;
}

.pto-navbar-dark .bws-navbar-brand-mark {
  background: linear-gradient(135deg, #b45309 0%, #f59e0b 45%, #fde68a 100%);
  color: #111827;
}

/* Navbar brand name + optional tagline (District Mode shows the district's own name/logo/
   tagline here — see layout/header.php's $navbarBrand). Stacked as its own column so the
   tagline sits in smaller text directly under the name, regardless of which header layout
   (left/right/center/stacked) is active — those only reposition this whole brand block as a
   unit, they don't restructure what's inside it, so this works unchanged in all of them. */
.pto-navbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pto-navbar-brand-tagline {
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.01em;
}

/* "Logo Only" header brand display (Admin > Settings > Site & Domain) — the logo image sits
   alone on its own row (no name text), with the optional tagline stacked directly beneath it
   instead of beside it. Overrides the row layout .bws-flex/.bws-items-center set inline on the
   same <a>, since this one variant needs a column, not a row. */
.pto-navbar-brand-logo-only {
  flex-direction: column;
  align-items: flex-start;
}
.pto-navbar-brand-tagline-standalone {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.75;
  letter-spacing: 0.01em;
}

.pto-navbar-dark .bws-navbar-toggle {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
  border: 1px solid var(--pto-navy-border);
}

/* .bws-btn-outline (vendor) renders as `color: var(--bws-primary); border-color: currentColor` —
   fine on the light page body it's normally used on, but "Log In"/"My Account"/"Log Out" render
   it right on this same dark navy navbar, where a dark amber text+border on dark navy is a real
   contrast failure (this got worse, not better, once --bws-primary was darkened for its OWN
   correct light-background fix — see that variable's comment). Light-on-dark override, scoped to
   this navbar only, matching the light color already used for the plain nav links above. */
.pto-navbar-dark .bws-btn-outline {
  color: #f1f5f9;
  border-color: rgba(241, 245, 249, 0.6);
}
.pto-navbar-dark .bws-btn-outline:hover,
.pto-navbar-dark .bws-btn-outline:focus-visible {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* --- Ads / Announcements (Admin > Ads & Announcements — see core/ads.php) ---------------- */
.pto-ad-zone {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 24px 0;
}
.pto-ad {
  position: relative;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.05);
}
.pto-ad-sponsored { border-left: 3px solid #cbd5e1; }
.pto-ad-announcement { border-left: 3px solid var(--pto-gold, #f2b84b); }
.pto-ad-label {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(17, 24, 39, 0.45);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 6px;
  border-radius: 999px;
}

.pto-ad-shape-horizontal { width: 100%; max-width: 728px; }
.pto-ad-shape-horizontal .pto-ad-image-link,
.pto-ad-shape-horizontal img { display: block; width: 100%; max-height: 180px; object-fit: contain; background: #f8fafc; }

.pto-ad-shape-square { width: 100%; max-width: 300px; }
.pto-ad-shape-square .pto-ad-image-link,
.pto-ad-shape-square img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Shape (Horizontal/Square) only really means anything for an image ad's box. A text
   message/ticker reads better as a full-width strip regardless of which shape is set on it —
   this overrides the width cap above whenever an ad's content is text. */
.pto-ad:has(> .pto-ad-text) { width: 100%; max-width: none; }

/* Text ads — plain/scrolling/blinking, admin-chosen colors, optional CTA button. Plain and
   blinking text wrap normally like any other text; only the scrolling variant needs a single
   unbroken line to slide across (that's the one place white-space:nowrap belongs — applying
   it to every text style, as a past version of this rule did, is what made even a normal-length
   static message overflow past both edges of the box instead of wrapping). */
.pto-ad-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--pto-navy) 0%, var(--pto-navy-light) 100%);
  color: #fff;
  font-weight: 600;
  overflow: hidden;
}
.pto-ad-text-scrolling { overflow: hidden; flex-wrap: nowrap; }
.pto-ad-text-scrolling .pto-ad-text-inner {
  display: inline-block;
  white-space: nowrap;
  animation: pto-ad-scroll 32s linear infinite;
  padding-left: 100%;
}
@keyframes pto-ad-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.pto-ad-text-blinking .pto-ad-text-inner {
  animation: pto-ad-blink 3s ease-in-out infinite;
}
@keyframes pto-ad-blink {
  0%, 60%, 100% { opacity: 1; }
  80% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .pto-ad-text-scrolling .pto-ad-text-inner,
  .pto-ad-text-blinking .pto-ad-text-inner { animation: none; }
}
.pto-ad-btn { flex: none; white-space: nowrap; }

/* Custom "code" ads are whatever the admin pasted — this just keeps an oversized embed from
   blowing out the layout the way an unconstrained third-party iframe/script sometimes does. */
.pto-ad[class*="pto-ad-shape"] iframe,
.pto-ad[class*="pto-ad-shape"] > * { max-width: 100%; }

.pto-ad-zone-footer { margin: 0 0 8px; }
.pto-ad-zone-sidebar,
.pto-ad-zone-forum_sidebar { justify-content: flex-start; }

/* --- Header layout (Admin > Settings > Branding — see pto_header_layout_catalog()) ------
   Only overridden above the mobile toggle breakpoint (760px, set by bws-navbar.css) — below
   it every layout collapses to the same hamburger-driven menu, where a "logo position"
   variant wouldn't mean anything different anyway. "Logo Left" is the base .bws-navbar
   layout itself, so it needs no override rule here. */
@media (min-width: 761px) {
  .pto-header-layout-center.bws-navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .pto-header-layout-center .bws-navbar-brand { grid-column: 2; justify-self: center; }
  .pto-header-layout-center .bws-navbar-collapse { grid-column: 3; justify-self: end; }

  .pto-header-layout-right.bws-navbar { flex-direction: row-reverse; }

  .pto-header-layout-stacked.bws-navbar { flex-direction: column; gap: 12px; }
  .pto-header-layout-stacked .bws-navbar-collapse { justify-content: center; width: 100%; }

  /* Centered and Stacked both give the brand its own visual "moment" (centered alone in the bar,
     or on its own full-width row above the nav links) rather than sharing a row edge-to-edge with
     them the way Left/Right do — so the logo and name/tagline read better sized up to match. */
  .pto-header-layout-center .bws-navbar-brand-logo,
  .pto-header-layout-stacked .bws-navbar-brand-logo {
    height: 5.5rem;
    max-width: 380px;
  }
  .pto-header-layout-center .pto-navbar-brand-text .pto-serif,
  .pto-header-layout-stacked .pto-navbar-brand-text .pto-serif {
    font-size: 1.6rem;
  }
  .pto-header-layout-center .pto-navbar-brand-tagline,
  .pto-header-layout-stacked .pto-navbar-brand-tagline {
    font-size: 0.9rem;
  }
  .pto-header-layout-center .bws-navbar-brand-mark,
  .pto-header-layout-stacked .bws-navbar-brand-mark {
    width: 5.5rem;
    height: 5.5rem;
    font-size: 2.25rem;
  }
}

/* --- Feature cards ------------------------------------------------------ */
.bws-feature-card {
  box-shadow: var(--bws-shadow-sm);
  transition: transform var(--bws-transition), box-shadow var(--bws-transition);
}

.bws-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bws-shadow-md);
}

.pto-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pto-gold-soft);
  color: var(--pto-gold);
  font-size: 1.4rem;
  margin-bottom: 14px;
}

/* --- Footer -------------------------------------------------------------- */
.pto-footer-dark {
  background: var(--pto-navy);
  color: #cbd5e1;
}

.pto-footer-dark a {
  color: #e2e8f0;
}

.pto-footer-dark .bws-footer-grid {
  align-items: start;
  grid-template-columns: minmax(260px, 1fr) max-content max-content max-content minmax(300px, max-content);
  gap: 18px;
}

.pto-footer-dark .bws-footer-grid > div:first-child,
.pto-footer-dark .bws-footer-links {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.pto-footer-dark .bws-footer-brand {
  display: block;
  color: #fff;
  line-height: 1.1;
}

.pto-footer-dark .bws-footer-text {
  max-width: 34ch;
  line-height: 1.55;
}

.pto-footer-dark .bws-footer-title {
  margin: 0 0 10px;
  color: #f1f5f9;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pto-footer-dark .bws-footer-links {
  display: flex;
  flex-direction: column;
  align-content: start;
  gap: 0;
}

.pto-footer-dark .bws-footer-links a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.pto-footer-dark .bws-footer-links a:first-of-type {
  border-top: 0;
}

.pto-footer-dark .bws-footer-links a:hover,
.pto-footer-dark .bws-footer-links a:focus-visible {
  color: var(--pto-gold, #f2b84b);
  text-decoration: none;
}

.pto-footer-dark .bws-footer-links a::after {
  content: "\F285";
  margin-left: auto;
  color: rgba(255, 255, 255, 0.42);
  font-family: "bootstrap-icons";
  font-size: 0.76rem;
  transition: color 0.18s ease, transform 0.18s ease;
}

.pto-footer-dark .bws-footer-links a:hover::after,
.pto-footer-dark .bws-footer-links a:focus-visible::after {
  color: var(--pto-gold, #f2b84b);
  transform: translateX(2px);
}

.pto-footer-current-lang {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.16);
  color: var(--pto-gold, #f2b84b);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pto-footer-dark .pto-footer-legal-links {
  min-width: 300px;
}

.pto-footer-dark .pto-footer-legal-links a,
.pto-footer-dark .pto-footer-language-links a {
  white-space: nowrap;
}

.pto-footer-language-picker {
  color: #fff;
}

.pto-footer-language-picker > summary {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 0;
  border-top: 0;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.pto-footer-language-picker > summary::-webkit-details-marker {
  display: none;
}

.pto-footer-language-picker > summary::after {
  content: "\F282";
  margin-left: auto;
  color: rgba(255, 255, 255, 0.42);
  font-family: "bootstrap-icons";
  font-size: 0.76rem;
}

.pto-footer-language-picker[open] > summary::after {
  content: "\F286";
}

.pto-footer-language-options {
  max-height: 220px;
  margin-top: 6px;
  overflow-y: auto;
  padding-right: 4px;
}

.pto-footer-dark .pto-footer-language-options a {
  min-height: 30px;
  font-size: 0.9rem;
}

.pto-footer-dark .bws-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--pto-navy-border);
  color: #94a3b8;
}
.bws-footer-powered-by {
  margin-left: 4px;
}
.bws-footer-powered-by a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(148, 163, 184, .5);
}
.bws-footer-powered-by a:hover {
  text-decoration-color: currentColor;
}
@media (max-width: 980px) and (min-width: 761px) {
  .pto-footer-dark .bws-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .pto-footer-dark {
    padding: 34px 0 22px;
  }

  .pto-footer-dark .bws-container {
    padding-inline: 16px;
  }

  .pto-footer-dark .bws-footer-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .pto-footer-dark .bws-footer-grid > div:first-child {
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
  }

  .pto-footer-dark .bws-footer-brand {
    display: block;
    font-size: 1.55rem;
    line-height: 1.1;
  }

  .pto-footer-dark .bws-footer-text {
    max-width: 30ch;
    line-height: 1.5;
  }

  .pto-footer-dark .bws-footer-links {
    gap: 0;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
  }

  .pto-footer-dark .bws-footer-title {
    margin: 0 0 8px;
    color: var(--pto-gold, #f2b84b);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .pto-footer-dark .bws-footer-links a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pto-footer-dark .bws-footer-links a::-webkit-scrollbar {
    display: none;
  }

  .pto-footer-dark .bws-footer-links a:first-of-type {
    border-top: 0;
  }

  .pto-footer-dark .bws-footer-links a::after {
    content: "\F285";
    margin-left: auto;
    color: rgba(255, 255, 255, 0.45);
    font-family: "bootstrap-icons";
    font-size: 0.8rem;
  }

  .pto-footer-dark .bws-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    text-align: center;
  }

  .bws-footer-powered-by {
    margin-left: 0;
  }

  .pto-footer-dark .pto-footer-legal-links {
    min-width: 0;
  }
}

/* --- Misc ----------------------------------------------------------------- */
.pto-stat-strip {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.pto-stat-strip strong {
  display: block;
  font-size: 1.5rem;
  color: var(--pto-gold);
}

.pto-stat-strip span {
  color: #cbd5e1;
  font-size: 0.85rem;
}

.pto-district-stat-strip {
  flex-wrap: nowrap;
  gap: clamp(14px, 4vw, 32px);
}

.pto-district-stat-strip > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.pto-district-stat-strip strong {
  display: inline;
}

.pto-district-stat-strip span {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .pto-district-stat-strip {
    gap: 14px;
  }

  .pto-district-stat-strip strong {
    font-size: 1.25rem;
  }

  .pto-district-stat-strip span {
    font-size: 0.74rem;
  }
}

/* --- Form polish: bws-ui ships .bws-checkbox for the <input> itself and
   .bws-form-group/.bws-form for spacing — these fill the gaps it doesn't cover. */
.pto-auth-page {
  background: var(--bws-surface);
  padding: 56px 16px;
  min-height: 60vh;
}

.pto-auth-card {
  max-width: 480px;
  margin: 0 auto;
  box-shadow: var(--bws-shadow-md);
}

.pto-login-page {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  padding: clamp(34px, 6vw, 72px) 16px;
  background:
    linear-gradient(122deg, rgba(15, 27, 51, 0.98) 0%, rgba(18, 43, 78, 0.96) 46%, rgba(104, 18, 50, 0.86) 100%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 16px);
}
.pto-login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(242, 184, 75, 0.16), transparent 24%, transparent 78%, rgba(42, 157, 143, 0.14)),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(255, 255, 255, 0.035) 42px 43px);
  pointer-events: none;
}
.pto-login-shell {
  position: relative;
  z-index: 1;
}
.pto-login-hero {
  max-width: 900px;
  margin-bottom: 22px;
  color: #fff;
}
.pto-login-hero .pto-eyebrow {
  margin-bottom: 10px;
}
.pto-login-hero h1 {
  max-width: 780px;
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.02;
  text-wrap: balance;
}
.pto-login-hero p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  line-height: 1.58;
}
.pto-login-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 18px;
  align-items: stretch;
}
.pto-login-demo-panel,
.pto-login-card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}
.pto-login-demo-panel {
  padding: clamp(18px, 3vw, 28px);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.97), rgba(255, 248, 230, 0.96));
}
.pto-login-card {
  max-width: none;
  margin: 0;
  background: rgba(255, 255, 255, 0.98);
}
.pto-login-card .bws-card-body {
  padding: clamp(20px, 3vw, 30px);
}
.pto-login-card h2 {
  margin: 0 0 16px;
  color: var(--pto-navy, #0f1b33);
}
.pto-login-demo-head {
  max-width: 720px;
  margin-bottom: 16px;
}
.pto-login-demo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #8a0030;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pto-login-demo-head h2 {
  margin: 0 0 6px;
  color: var(--pto-navy, #0f1b33);
  font-size: clamp(1.75rem, 3vw, 2.45rem);
  line-height: 1.06;
}
.pto-login-demo-head p,
.pto-login-demo-note {
  margin: 0;
  color: rgba(15, 27, 51, 0.68);
  line-height: 1.55;
}
.pto-demo-login-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pto-demo-login-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 72px;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  background: #fff;
  color: var(--pto-navy, #0f1b33);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.07);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.pto-demo-login-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 184, 75, 0.5);
  box-shadow: 0 16px 34px rgba(15, 27, 51, 0.12);
}
.pto-demo-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #fff2c7;
  color: #8a6508;
  font-size: 1.1rem;
}
.pto-demo-login-choice strong,
.pto-demo-login-choice small {
  display: block;
}
.pto-demo-login-choice strong {
  color: var(--pto-navy, #0f1b33);
  font-size: 0.94rem;
  line-height: 1.15;
}
.pto-demo-login-choice small {
  margin-top: 3px;
  color: rgba(15, 27, 51, 0.56);
  font-size: 0.76rem;
  font-weight: 750;
}
.pto-demo-login-choice > .bi-arrow-right-short {
  color: rgba(15, 27, 51, 0.45);
  font-size: 1.25rem;
}
.pto-demo-login-choice[data-tone="teal"] .pto-demo-login-icon { background: #dff6f2; color: #0f766e; }
.pto-demo-login-choice[data-tone="gold"] .pto-demo-login-icon { background: #fff2c7; color: #9a6500; }
.pto-demo-login-choice[data-tone="rose"] .pto-demo-login-icon { background: #ffe8ef; color: #be123c; }
.pto-demo-login-choice[data-tone="orange"] .pto-demo-login-icon { background: #ffe8d6; color: #c05621; }
.pto-demo-login-choice[data-tone="blue"] .pto-demo-login-icon { background: #e8f0ff; color: #1d4ed8; }
.pto-demo-login-choice[data-tone="purple"] .pto-demo-login-icon { background: #f0e9ff; color: #6d28d9; }
.pto-login-demo-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(42, 157, 143, 0.18);
  border-radius: 12px;
  background: rgba(42, 157, 143, 0.08);
  font-size: 0.9rem;
}
.pto-login-demo-note i {
  color: #0f766e;
  margin-top: 2px;
}

@media (max-width: 980px) {
  .pto-login-grid {
    grid-template-columns: 1fr;
  }
  .pto-login-card {
    order: 2;
  }
  .pto-login-demo-panel {
    order: 1;
  }
}
@media (max-width: 640px) {
  .pto-login-page {
    padding: 24px 0 34px;
  }
  .pto-login-hero {
    margin-bottom: 16px;
  }
  .pto-login-demo-panel,
  .pto-login-card {
    border-radius: 14px;
  }
  .pto-login-card {
    order: 1;
  }
  .pto-login-demo-panel {
    order: 2;
  }
  .pto-demo-login-grid {
    grid-template-columns: 1fr;
  }
  .pto-demo-login-choice {
    min-height: 64px;
  }
}

.pto-check-list {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.pto-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
}

.pto-check-row .bws-checkbox {
  flex: none;
}

/* ===================================================================
   Stepped registration wizard (register.php + assets/js/pto-register-wizard.js)
   Own .pto-reg-* prefix — this is the onboarding flow's own card/choice styling, unrelated
   to .pto-auth-* (plain login/reset cards) or .pto-check-* (generic checkbox rows). Mobile
   first: one decision per screen, large tap targets, minimal scrolling.
   =================================================================== */
.pto-reg-card { max-width: 560px; }
.pto-reg { display: block; }
.pto-reg-title { margin: 0 0 4px; }

/* Visually-hidden live region (screen-reader step announcements) */
.pto-reg-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Progress indicator */
.pto-reg-progress {
  list-style: none; display: flex; gap: 6px; padding: 0; margin: 14px 0 22px;
  font-size: 0.72rem; font-weight: 700; color: var(--bws-text-muted, #6b7280);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.pto-reg-progress li {
  display: flex; align-items: center; gap: 6px; white-space: nowrap; flex: none;
  padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(15, 27, 51, 0.05);
}
.pto-reg-progress li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(15, 27, 51, 0.18); font-size: 0.7rem;
}
.pto-reg-progress li.is-active {
  color: #fff; background: var(--pto-navy, #0f1b33);
}
.pto-reg-progress li.is-active span {
  background: var(--pto-gold, #f2b84b); border-color: var(--pto-gold, #f2b84b); color: var(--pto-navy, #0f1b33);
}
.pto-reg-progress li.is-done { color: var(--pto-navy, #0f1b33); background: var(--pto-gold-soft, rgba(242, 184, 75, 0.16)); }
.pto-reg-progress li.is-done span::after { content: "\2713"; }
.pto-reg-progress li.is-done span { font-size: 0; }

.pto-reg-step { margin-top: 4px; }
.pto-reg-step h2 { margin: 0 0 14px; outline: none; }

/* First-screen privacy notice */
.pto-reg-notice { display: grid; gap: 12px; margin-bottom: 8px; }
.pto-reg-notice p { margin: 0; line-height: 1.5; }
.pto-reg-notice p i { color: var(--pto-navy, #0f1b33); margin-right: 6px; }

/* Identity choice cards */
.pto-reg-choices { display: grid; gap: 10px; margin: 6px 0 4px; }
.pto-reg-choice { position: relative; display: block; cursor: pointer; }
.pto-reg-choice input {
  position: absolute; top: 14px; left: 14px; width: 20px; height: 20px; margin: 0; cursor: pointer;
}
.pto-reg-choice-body {
  display: block; padding: 14px 14px 14px 46px; border-radius: 14px;
  border: 1.5px solid rgba(15, 27, 51, 0.14); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.pto-reg-choice-body > i {
  position: absolute; right: 14px; top: 14px; font-size: 1.3rem; color: rgba(15, 27, 51, 0.3);
}
.pto-reg-choice:hover .pto-reg-choice-body { border-color: rgba(15, 27, 51, 0.32); }
.pto-reg-choice input:focus-visible + .pto-reg-choice-body { outline: 3px solid var(--pto-gold, #f2b84b); outline-offset: 2px; }
.pto-reg-choice input:checked + .pto-reg-choice-body {
  border-color: var(--pto-navy, #0f1b33);
  box-shadow: 0 0 0 1.5px var(--pto-navy, #0f1b33), 0 10px 24px rgba(15, 27, 51, 0.12);
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.1));
}
.pto-reg-choice input:checked + .pto-reg-choice-body > i { color: var(--pto-navy, #0f1b33); }
.pto-reg-choice-label { display: block; font-weight: 800; color: var(--pto-navy, #0f1b33); }
.pto-reg-choice-blurb { display: block; margin-top: 2px; font-size: 0.85rem; color: var(--bws-text-muted, #6b7280); line-height: 1.35; }

.pto-reg-group-label {
  margin: 20px 0 8px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bws-text-muted, #6b7280);
}
.pto-reg-verify-pill {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 4px;
  padding: 2px 7px; border-radius: 999px; background: rgba(15, 27, 51, 0.08);
  color: var(--pto-navy, #0f1b33); font-size: 0.62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle;
}

/* Invitation confirmation card */
.pto-reg-invite-card {
  padding: 18px; border-radius: 16px; text-align: center;
  background: radial-gradient(circle at 90% 8%, rgba(242, 184, 75, 0.28), transparent 40%),
    linear-gradient(135deg, #fffaf0, #fff 60%);
  border: 1.5px solid rgba(242, 184, 75, 0.5); margin-bottom: 12px;
}
.pto-reg-invite-kicker {
  margin: 0 0 6px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: #8a6508;
}
.pto-reg-invite-school { margin: 0 0 2px; font-size: 1.3rem; font-weight: 800; color: var(--pto-navy, #0f1b33); }

.pto-reg-when { display: block; }
.pto-reg-request-cta { margin: 12px 0 0; font-size: 0.9rem; }
.pto-reg-request-cta button { margin-left: 6px; }

/* Step nav */
.pto-reg-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; }
.pto-reg-nav .bws-btn { flex: 0 1 auto; }

/* Review summary */
.pto-reg-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 18px;
  padding: 14px; border-radius: 12px; background: rgba(15, 27, 51, 0.04);
}
.pto-reg-summary dt { font-weight: 700; color: var(--bws-text-muted, #6b7280); font-size: 0.85rem; }
.pto-reg-summary dd { margin: 0; font-weight: 600; color: var(--pto-navy, #0f1b33); font-size: 0.9rem; word-break: break-word; }

.pto-reg-agree { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 0.9rem; line-height: 1.4; }
.pto-reg-agree .bws-checkbox { flex: none; margin-top: 2px; }

.pto-reg-request-panel { margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--bws-border-color, #e2e2e2); }
.pto-reg-login-link { margin-top: 18px; }

.pto-reg-havecode {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 12px;
  border: 1px solid rgba(242, 184, 75, 0.55); border-left: 4px solid var(--pto-gold, #f2b84b);
  border-radius: 12px; background: linear-gradient(135deg, rgba(242, 184, 75, 0.18), rgba(255, 255, 255, 0.94));
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.08);
  color: var(--pto-navy, #0f1b33); font-size: 0.94rem; font-weight: 700; line-height: 1.35;
}
.pto-reg-havecode i { color: var(--pto-gold, #f2b84b); font-size: 1.1rem; }
.pto-reg-havecode a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 10px; border-radius: 999px; background: var(--pto-navy, #0f1b33);
  color: #fff; font-size: 0.82rem; font-weight: 800; text-decoration: none;
  box-shadow: 0 6px 14px rgba(15, 27, 51, 0.16);
}
.pto-reg-havecode a:hover,
.pto-reg-havecode a:focus-visible { background: #243756; color: #fff; }
.pto-reg-code-form { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.pto-reg-code-form .bws-input { flex: 1; min-width: 180px; }

.pto-payment-settings-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
}
.pto-payment-settings-head h1 {
  margin: 8px 0 6px;
}
.pto-payment-settings-head p {
  margin: 0;
  max-width: 680px;
  line-height: 1.55;
}
.pto-payment-settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}
.pto-payment-settings-main {
  min-width: 0;
}
.pto-payment-settings-main .pto-payment-status-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pto-payment-settings-sidebar {
  position: sticky;
  top: 16px;
}
.pto-payment-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.pto-payment-status-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, rgba(242, 184, 75, 0.09));
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-payment-status-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.18));
  color: #8a6508;
}
.pto-payment-status-card span {
  color: var(--bws-text-muted, #6b7280);
  font-size: 0.78rem;
  font-weight: 700;
}
.pto-payment-status-card strong {
  color: var(--pto-navy, #0f1b33);
  font-size: 0.98rem;
}
.pto-payment-status-card-warn {
  border-color: rgba(242, 184, 75, 0.55);
  background: linear-gradient(135deg, rgba(242, 184, 75, 0.2), #fff);
}
.pto-payment-donation-card .bws-card-header,
.pto-payment-section-heading {
  color: var(--pto-navy, #0f1b33);
}
.pto-payment-donation-card .bws-card-body {
  display: grid;
  gap: 12px;
}
.pto-payment-donation-card .bws-card-body p {
  margin: 0;
  line-height: 1.45;
}
.pto-payment-donation-qr {
  width: 100%;
  max-width: 180px;
  height: auto;
  justify-self: center;
  border: 1px solid var(--bws-border, #e5e7eb);
  border-radius: 10px;
}
.pto-payment-donation-url {
  min-width: 0;
}
.pto-payment-donation-url code {
  display: block;
  max-width: 100%;
  padding: 8px;
  border-radius: 8px;
  background: rgba(15, 27, 51, 0.05);
  white-space: normal;
  overflow-wrap: anywhere;
}
.pto-payment-section-heading {
  margin: 20px 0 12px;
}
.pto-payment-section-heading h2,
.pto-payment-section-heading p {
  margin: 0;
}
.pto-payment-section-heading p {
  margin-top: 4px;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .pto-payment-settings-head {
    flex-direction: column;
  }
  .pto-payment-settings-layout {
    grid-template-columns: 1fr;
  }
  .pto-payment-settings-sidebar {
    position: static;
  }
  .pto-payment-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 460px) {
  .pto-payment-status-grid {
    grid-template-columns: 1fr;
  }
}

.pto-reg-field-error .bws-input,
.pto-reg-field-error .bws-select { border-color: #b3261e; }
.pto-reg-flash { margin: 8px 0 14px; }

@media (max-width: 560px) {
  .pto-reg-progress { font-size: 0.68rem; }
  .pto-reg-progress li { padding: 4px 8px 4px 4px; }
  .pto-reg-nav { flex-direction: column-reverse; align-items: stretch; }
  .pto-reg-nav .bws-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pto-reg-choice-body { transition: none; }
}

/* A visually separated group of fields within a longer form (e.g. the Teaching Profile's
   About My Background / Teaching Philosophy / Fun Facts groups on account.php) — just a top
   rule + spacing, not a full card, since it lives inside one already. */
.pto-about-fieldset {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--bws-border-color, #e2e2e2);
}

/*
 * Nested bws-faq accordions (e.g. careers.php's per-organization accordion, each containing
 * pto_render_job_items()'s own per-job accordion) — vendors/bws-ui/css/bws-faq.css's own
 * ".bws-faq-open .bws-faq-answer{display:block}" rule is an unscoped DESCENDANT selector, so
 * an open outer item (careers.php force-opens the first organization) force-opens every
 * accordion answer nested inside it too, however deep, regardless of that inner item's own
 * open/closed state — this is what made every job under the first organization show fully
 * expanded instead of collapsed. Never edit vendor CSS directly (project convention) — override
 * here instead, with enough specificity (repeated classes) to always win regardless of
 * stylesheet load order.
 */
.bws-faq-answer .bws-faq-answer.bws-faq-answer {
  display: none;
}
.bws-faq-answer .bws-faq-item.bws-faq-open > .bws-faq-answer.bws-faq-answer {
  display: block;
}

/*
 * Event ticket widget (event.php sidebar) — a small stylized mock-up of the actual ticket a
 * buyer will get (see event-ticket-pdf.php), so "Buy Your Ticket" reads as a real product
 * instead of a plain link. Perforated look via a dashed border + a punched-circle notch,
 * matching the classic ticket-stub visual language.
 */
.pto-ticket-widget {
  margin-bottom: 20px;
}
.pto-ticket-mock {
  position: relative;
  display: flex;
  border: 1px solid rgba(242, 184, 75, 0.42);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(242, 184, 75, 0.28), transparent 28%),
    linear-gradient(135deg, #fffaf0 0%, #ffffff 42%, #eef7ff 100%);
  color: var(--pto-navy, #0f1b33);
  box-shadow: 0 16px 34px rgba(15, 27, 51, 0.13);
}
.pto-ticket-mock-main {
  flex: 1;
  min-width: 0;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pto-ticket-mock-org {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 4px;
}
.pto-ticket-mock-org img {
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(15, 27, 51, 0.14);
}
.pto-ticket-mock-kind,
.pto-ticket-mock-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
}
.pto-ticket-mock-kind {
  padding: 5px 9px;
  background: #e6fffb;
  color: #0f766e;
}
.pto-ticket-mock-type {
  padding: 4px 8px;
  background: #fff4d6;
  color: #8a5a00;
}
.pto-ticket-mock-title {
  margin-top: 1px;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pto-ticket-mock-date {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.3;
}
.pto-ticket-mock-date i {
  color: #0f766e;
}
.pto-ticket-mock-stub {
  position: relative;
  flex: none;
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 10px;
  text-align: center;
  border-left: 2px dashed rgba(15, 27, 51, 0.16);
  background: linear-gradient(180deg, var(--pto-navy, #0f1b33), #20365f);
  color: #fff;
}
.pto-ticket-mock-stub::before,
.pto-ticket-mock-stub::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bws-bg, #fff);
  left: -9px;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 51, 0.08);
}
.pto-ticket-mock-stub::before { top: -8px; }
.pto-ticket-mock-stub::after { bottom: -8px; }
.pto-ticket-mock-stub span {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0;
  opacity: 0.88;
}
.pto-ticket-mock-stub strong {
  font-size: 1.28rem;
  color: var(--pto-gold, #f2b84b);
  line-height: 1;
}
.pto-ticket-mock-stub small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.64rem;
  font-weight: 700;
}
.pto-ticket-widget-cta {
  margin-top: 12px;
}
@media (max-width: 480px) {
  .pto-ticket-mock {
    display: block;
  }
  .pto-ticket-mock-stub {
    width: auto;
    min-height: 74px;
    flex-direction: row;
    border-top: 2px dashed rgba(15, 27, 51, 0.16);
    border-left: 0;
  }
  .pto-ticket-mock-stub::before,
  .pto-ticket-mock-stub::after {
    top: -9px;
    left: auto;
  }
  .pto-ticket-mock-stub::before { left: -8px; }
  .pto-ticket-mock-stub::after { right: -8px; bottom: auto; }
}

/* --- Info rows (school/PTO detail cards) --------------------------------- */
.pto-info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.pto-info-row:last-child {
  margin-bottom: 0;
}

.pto-info-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pto-gold-soft);
  color: var(--pto-gold);
  font-size: 1rem;
}

.pto-info-row a {
  word-break: break-word;
  /* Lighthouse "touch targets" — a plain inline link on its own short line (a school/PTO name,
     "Create your PTO page", ...) rendered at its raw font line-height, often well under the
     24x24px CSS-pixel minimum. inline-block + a fixed line-height grows the tappable box without
     forcing the link onto its own line — trailing text after it (" · 3 upcoming events") still
     flows on the same line right after. */
  display: inline-block;
  line-height: 24px;
}

/* A bigger, photo-style variant of .pto-info-row for widgets whose content actually has a real
   photo worth showing prominently (a news post's image, an event's featured image) rather than
   a small identity icon (.pto-info-icon stays for schools/PTOs/forum, which are more "avatar"
   than "photo"). Falls back to a plain icon tile, same footprint, when there's no image. */
.pto-media-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.pto-media-row:last-child {
  margin-bottom: 0;
}
.pto-mini-thumb,
.pto-mini-thumb-placeholder {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 10px;
}
.pto-mini-thumb {
  object-fit: cover;
}
.pto-mini-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pto-gold-soft);
  color: var(--pto-gold);
  font-size: 1.3rem;
}

.pto-section-label {
  display: block;
  /* Was var(--pto-gold) — a bright gold meant for the dark navy hero, only ~1.8:1 against this
     label's actual white/light card background (a real Lighthouse contrast failure). This eyebrow
     label never appears on the dark hero, only inside light .bws-card bodies, so it uses the
     already-AA-safe --bws-primary token instead — see that variable's own comment. */
  color: var(--bws-primary);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pto-badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pto-gold-soft);
  color: #92660a;
  border: 1px solid rgba(184, 134, 11, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.pto-badge-gold-img {
  padding: 3px 12px 3px 3px;
}
.pto-badge-gold-img img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pto-school-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pto-school-card .bws-card-body {
  padding: 1.5rem;
}

.pto-school-card .pto-feature-icon {
  margin-bottom: 10px;
}

.pto-school-directory-hero {
  padding: 44px 0 34px;
}
.pto-school-directory-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 28px;
  align-items: start;
}
.pto-school-directory-copy {
  min-width: 0;
}
.pto-school-directory-title {
  margin: 8px 0 10px;
}
.pto-school-directory-subtitle {
  max-width: 720px;
  margin: 0;
}
.pto-school-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.pto-school-hero-stats span {
  min-width: 96px;
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pto-school-hero-stats strong {
  color: var(--pto-gold);
  font-size: 1.18rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}
.pto-school-search-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
}
.pto-school-search-actions,
.pto-school-location-note,
.pto-school-locate-error {
  grid-column: 1 / -1;
}
.pto-school-search-panel .bws-label {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pto-school-search-panel .bws-input,
.pto-school-search-panel .bws-select {
  min-height: 44px;
  border-color: rgba(255, 255, 255, 0.22);
  background: #fff;
}
.pto-school-search-actions,
.pto-school-location-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pto-school-search-actions .bws-btn {
  min-height: 44px;
}
.pto-school-search-actions .bws-btn-outline {
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
}
.pto-school-search-actions .bws-btn-outline:hover,
.pto-school-search-actions .bws-btn-outline:focus-visible {
  border-color: var(--pto-gold, #f2b84b);
  background: rgba(242, 184, 75, 0.12);
  color: #fff;
}
.pto-school-location-note a {
  color: #fff;
  font-weight: 800;
}
.pto-school-locate-error {
  color: rgba(255, 255, 255, 0.86);
}
.pto-school-directory-results {
  padding: 34px 16px 42px;
}
.pto-school-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.pto-school-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pto-school-directory-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.1);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.08);
}
.pto-school-card-media {
  position: relative;
  display: block;
  min-height: 146px;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(15, 27, 51, 0.08), rgba(242, 184, 75, 0.12));
}
.pto-school-card-media .pto-school-cover-default,
.pto-school-card-media .pto-school-cover-img {
  height: 146px !important;
}
.pto-school-card-logo-wrap {
  position: absolute;
  left: 14px;
  bottom: -24px;
  width: 58px;
  height: 58px;
  padding: 4px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.16);
}
.pto-school-card-logo-wrap .pto-school-logo-img,
.pto-school-card-logo-wrap .pto-school-logo-default {
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px;
}
.pto-school-card-pto-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15, 27, 51, 0.88);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
.pto-school-card-body {
  display: grid;
  gap: 10px;
  padding: 34px 16px 16px;
}
.pto-school-card-title-link {
  display: grid;
  gap: 7px;
  color: inherit;
  text-decoration: none;
}
.pto-school-card-title-link:hover .pto-school-card-title {
  color: #7a4100;
  text-decoration: underline;
}
.pto-school-card-title {
  color: var(--pto-navy);
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: 1.15rem;
  line-height: 1.18;
}
.pto-school-card-meta,
.pto-school-card-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
  color: #566176;
  font-size: 0.84rem;
}
.pto-school-card-meta span,
.pto-school-card-status span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pto-school-card-status span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 27, 51, 0.06);
  color: #344155;
  font-weight: 800;
}
.pto-school-card-status .pto-school-status-claimed {
  background: rgba(42, 157, 143, 0.13);
  color: #1f7168;
}
.pto-school-card-status .pto-school-status-open {
  background: rgba(242, 184, 75, 0.17);
  color: #7a5707;
}
.pto-school-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.pto-school-card-actions .bws-btn {
  min-height: 36px;
}
.pto-school-empty-card {
  grid-column: 1 / -1;
}
.pto-school-empty-card .bws-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pto-school-empty-card i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pto-gold-soft);
  color: #8a6508;
  font-size: 1.25rem;
}
.pto-school-empty-card h2,
.pto-school-empty-card p {
  margin: 0;
}

@media (max-width: 760px) {
  .pto-school-directory-hero {
    padding: 30px 0 24px;
  }
  .pto-school-directory-hero-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pto-school-directory-title {
    font-size: 1.45rem;
    line-height: 1.12;
  }
  .pto-school-directory-subtitle {
    font-size: 0.94rem;
  }
  .pto-school-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pto-school-hero-stats span {
    min-width: 0;
    padding: 9px 8px;
    font-size: 0.66rem;
  }
  .pto-school-hero-stats strong {
    font-size: 1rem;
  }
  form.bws-form-row.pto-search-form.pto-school-search-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  form.bws-form-row.pto-search-form.pto-school-search-form .bws-form-group {
    grid-column: auto !important;
  }
  form.bws-form-row.pto-search-form.pto-school-search-form .pto-school-search-actions,
  form.bws-form-row.pto-search-form.pto-school-search-form .pto-school-location-note,
  form.bws-form-row.pto-search-form.pto-school-search-form .pto-school-locate-error {
    grid-column: 1 / -1 !important;
  }
  .pto-school-search-panel {
    padding: 12px;
  }
  .pto-school-search-actions .bws-btn {
    flex: 1 1 0;
    justify-content: center;
    padding-inline: 10px;
  }
  .pto-school-results-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .pto-school-directory-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .pto-school-card-actions .bws-btn {
    flex: 1 1 0;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  form.bws-form-row.pto-search-form.pto-school-search-form {
    grid-template-columns: 1fr !important;
  }
  form.bws-form-row.pto-search-form.pto-school-search-form .bws-form-group {
    grid-column: 1 / -1 !important;
  }
}

.pto-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.pto-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pto-gold-soft);
  border: 1px solid rgba(242, 184, 75, 0.35);
  color: #92660a;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
}

.pto-chip button {
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font-weight: 700;
  line-height: 1;
  padding: 0;
}

.pto-join-ad {
  display: grid;
  align-items: stretch;
  border: 1px solid rgba(242, 184, 75, 0.4);
  overflow: hidden;
  border-radius: 10px;
  background:
    radial-gradient(circle at top left, rgba(242, 184, 75, 0.18), transparent 34%),
    linear-gradient(135deg, #fffaf0 0%, #fff 58%, #f8fafc 100%);
  box-shadow: 0 14px 32px rgba(15, 27, 51, 0.12);
}

.pto-join-ad-has-image {
  grid-template-columns: minmax(180px, 28%) minmax(0, 1fr);
}

.pto-join-ad-no-image {
  display: block;
}

.pto-join-ad-image {
  width: 100%;
  height: 100%;
  min-height: 188px;
  max-height: 240px;
  object-fit: cover;
  object-position: center;
}

.pto-join-ad-body {
  position: relative;
  min-width: 0;
  padding: 22px 24px;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pto-join-ad-body::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 27, 51, 0.06);
  box-shadow: -18px 20px 0 rgba(242, 184, 75, 0.18);
  pointer-events: none;
}

.pto-join-ad-body h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 620px;
  margin: 9px 0 10px;
  color: var(--pto-navy);
  font-size: 1.45rem;
  line-height: 1.1;
}

.pto-join-ad-body h2 i {
  color: #8a6508;
  font-size: 0.95em;
}

/* Compact "you're already a member" strip that replaces .pto-join-ad for a visitor with a real
   membership record — same card shell/border (.pto-join-ad, shared on purpose: same slot on the
   page, same brand treatment), own small-footprint inner layout since there's nothing to sell. */
.pto-join-ad-status { display: block; }
.pto-join-ad-status-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.pto-join-ad-status-body > i {
  font-size: 1.4rem;
  color: #8a6508;
  flex: none;
}
.pto-join-ad-status-expired .pto-join-ad-status-body > i {
  color: #b3261e;
}
.pto-join-ad-status-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 180px;
}
.pto-join-ad-status-text strong {
  color: var(--pto-navy);
  font-size: 0.98rem;
}
.pto-join-ad-status-text span {
  font-size: 0.85rem;
  color: var(--bws-text-muted, #6b7280);
}
.pto-join-ad-status-expired-text {
  color: #b3261e !important;
  font-weight: 700;
}

.pto-join-tier-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.pto-join-tier-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 7px 10px !important;
  border: 1px solid rgba(15, 27, 51, 0.08) !important;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.75);
}

.pto-join-tier-copy {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.pto-join-tier-copy strong {
  overflow: hidden;
  color: var(--pto-navy);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pto-join-tier-copy small {
  overflow: hidden;
  color: var(--bws-muted);
  font-size: 0.86rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pto-join-tier-list .pto-badge-gold {
  min-width: 46px;
  justify-content: center;
  padding: 4px 8px;
  color: #8a6508;
  font-size: 0.78rem;
}

.pto-join-actions .bws-btn-lg {
  min-height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.pto-join-actions .bws-btn {
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.1);
}

.pto-donation-widget .bws-card-body {
  padding: 16px;
}

.pto-donation-widget .pto-section-label {
  margin-bottom: 8px;
}

.pto-donation-widget p {
  margin: 0 0 12px;
}

.pto-donation-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.pto-donation-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.1);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #fbfcff);
  text-align: center;
}

.pto-donation-method-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--pto-navy);
  font-size: 0.92rem;
  line-height: 1.15;
}

.pto-donation-method-sub {
  min-height: 18px;
  margin: 4px 0 6px !important;
  color: var(--bws-muted);
  font-size: 0.78rem;
  line-height: 1.2;
  word-break: break-word;
}

.pto-donation-method-qr {
  display: block;
  width: min(112px, 80%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: 4px auto 8px;
}

.pto-donation-method-btn {
  width: 100%;
  margin-top: auto;
  padding-inline: 8px;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .pto-join-ad-has-image {
    grid-template-columns: 1fr;
  }

  .pto-join-ad-image {
    height: 128px;
    min-height: 128px;
    max-height: 128px;
  }

  .pto-join-ad-body {
    padding: 16px;
  }

  .pto-join-ad-body h2 {
    font-size: 1.25rem;
  }

  .pto-join-tier-list li {
    min-height: 38px;
    padding: 6px 8px !important;
  }

  .pto-join-tier-copy {
    display: block;
  }

  .pto-join-tier-copy small {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
  }

  .pto-join-actions,
  .pto-join-actions .bws-btn {
    width: 100%;
  }

  .pto-join-actions .bws-btn {
    justify-content: center;
  }

  .pto-donation-widget .bws-card-body {
    padding: 13px;
  }

  .pto-donation-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .pto-donation-method-card {
    padding: 9px;
  }

  .pto-donation-method-qr {
    width: min(98px, 76%);
  }
}

@media (max-width: 360px) {
  .pto-donation-method-grid {
    grid-template-columns: 1fr;
  }
}

.pto-lang-icon {
  width: 18px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 6px;
}

.pto-lang-switcher .bws-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.pto-lang-switcher .bws-dropdown-item {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

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

.pto-password-field input {
  padding-right: 2.5rem;
}

.pto-toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--bws-muted);
  line-height: 1;
}

.pto-toggle-password:hover {
  color: var(--bws-text);
}

.pto-month-calendar {
  overflow: visible;
  border-color: rgba(15, 27, 51, 0.1);
  box-shadow: 0 16px 42px rgba(15, 27, 51, 0.08);
}

.pto-month-calendar .bws-card-body {
  padding: 16px;
}

.pto-cal-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 6px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbff 0%, #fff8e6 100%);
}

.pto-cal-head strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  color: var(--pto-navy, #0f1b33);
  font-size: 1rem;
  letter-spacing: 0;
  text-align: center;
}

.pto-cal-head strong i {
  color: #0f766e;
}

.pto-cal-mobile-hint {
  display: none;
}

.pto-cal-nav {
  width: 38px;
  height: 38px;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  color: #9a6700;
  background: #fff;
}

.pto-cal-scroll {
  max-width: 100%;
  overflow: visible;
  overflow-y: visible;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.pto-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(126px, 1fr));
  gap: 8px;
  min-width: 882px;
}

.pto-cal-grid-weekdays {
  grid-template-columns: repeat(5, minmax(126px, 1fr));
  min-width: 630px;
}

.pto-cal-dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #516071;
  text-transform: uppercase;
  letter-spacing: 0;
  padding: 7px 0;
}

.pto-cal-day {
  position: relative;
  z-index: 1;
  min-height: 132px;
  border: 1px solid rgba(15, 27, 51, 0.09);
  border-radius: 12px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.pto-cal-day-has-image {
  padding: 0;
  overflow: visible;
}

.pto-cal-day:hover {
  z-index: 20;
  border-color: rgba(15, 118, 110, 0.34);
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.12);
  transform: translateY(-1px);
}

.pto-cal-day-empty {
  border: 1px dashed rgba(15, 27, 51, 0.06);
  background: rgba(248, 250, 252, 0.55);
  box-shadow: none;
}

.pto-cal-day-empty:hover {
  border-color: rgba(15, 27, 51, 0.06);
  box-shadow: none;
  transform: none;
}

.pto-cal-today {
  border-color: #0f766e;
  background: linear-gradient(180deg, #ecfeff 0%, #f8fafc 100%);
  box-shadow: inset 0 0 0 2px rgba(15, 118, 110, 0.22), 0 8px 22px rgba(15, 118, 110, 0.12);
}

.pto-cal-daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 800;
  color: #516071;
  background: #eef2f7;
}

.pto-cal-daynum-link {
  text-decoration: none;
}

.pto-cal-daynum-link:hover,
.pto-cal-daynum-link:focus-visible {
  background: #e6fffb;
  color: #0f4f4a;
  outline: 2px solid rgba(15, 118, 110, 0.22);
  outline-offset: 2px;
}

.pto-cal-day-image {
  position: relative;
  display: block;
  flex: 0 0 62px;
  min-height: 62px;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  border-radius: 12px 12px 0 0;
  overflow: visible;
}

.pto-cal-day-image::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(to bottom, rgba(15, 27, 51, 0.02) 0%, rgba(15, 27, 51, 0.5) 100%);
}

.pto-cal-daynum-onimage {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 2;
  color: #fff;
  background: rgba(15, 27, 51, 0.72);
  box-shadow: 0 3px 10px rgba(15, 27, 51, 0.24);
}

.pto-cal-day-create {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(15, 118, 110, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  color: #0f766e;
  font-size: 0.82rem;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(15, 27, 51, 0.12);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.pto-cal-day:hover .pto-cal-day-create,
.pto-cal-day-create:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.pto-cal-day-create:hover,
.pto-cal-day-create:focus-visible {
  border-color: rgba(15, 118, 110, 0.58);
  background: #e6fffb;
  color: #0f4f4a;
}

.pto-cal-daynum-today,
.pto-cal-today > .pto-cal-daynum {
  background: #0f766e;
  color: #fff;
}

.pto-cal-day-hover {
  position: absolute;
  left: 8px;
  top: calc(100% + 8px);
  z-index: 60;
  width: min(280px, calc(100vw - 40px));
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 12px;
  background: #fff;
  color: var(--pto-navy, #0f1b33);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease;
  box-shadow: 0 18px 38px rgba(15, 27, 51, 0.18);
}

.pto-cal-day-hover strong {
  font-size: 0.86rem;
  line-height: 1.25;
}

.pto-cal-day-hover p {
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
  color: #475569;
}

.pto-cal-day-image:hover .pto-cal-day-hover,
.pto-cal-day-image:focus-visible .pto-cal-day-hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pto-cal-day-chips {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  flex: 1;
}

.pto-cal-day-has-image .pto-cal-day-chips {
  padding: 6px;
}

.pto-cal-chip {
  position: relative;
  display: block;
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 5px 7px;
  border: 1px solid rgba(242, 184, 75, 0.36);
  border-radius: 8px;
  background: #fff8e6;
  color: #785100;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pto-cal-chip-label {
  display: block;
}

.pto-cal-chip-preview {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(290px, calc(100vw - 40px));
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 12px;
  background: #fff;
  color: var(--pto-navy, #0f1b33);
  box-shadow: 0 18px 38px rgba(15, 27, 51, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.pto-cal-chip-preview-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 51, 0.08);
}

.pto-cal-chip-preview strong {
  font-size: 0.9rem;
  line-height: 1.22;
}

.pto-cal-chip-preview small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 800;
}

.pto-cal-chip-preview p {
  margin: 0;
  color: #475569;
  font-size: 0.78rem;
  line-height: 1.4;
}

.pto-cal-chip:hover .pto-cal-chip-preview,
.pto-cal-chip:focus-visible .pto-cal-chip-preview,
.pto-cal-chip.pto-cal-chip-open .pto-cal-chip-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pto-cal-chip:hover,
.pto-cal-chip:focus-visible {
  border-color: rgba(15, 118, 110, 0.38);
  background: #e6fffb;
  color: #0f4f4a;
}

.pto-event-hero {
  padding: 42px 0 34px;
}
.pto-event-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 26px;
  align-items: center;
}
.pto-event-hero-copy {
  min-width: 0;
}
.pto-event-hero h1 {
  margin: 10px 0 12px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.pto-event-hero-meta {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 9px;
}
.pto-event-hero-meta span,
.pto-event-hero-meta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
  line-height: 1.25;
  text-decoration: none;
}
.pto-event-hero-meta a {
  color: var(--pto-gold, #f2b84b);
  font-weight: 800;
}
.pto-event-hero-meta a:hover {
  color: #fff;
  text-decoration: underline;
}
.pto-event-hero-meta strong {
  color: #fff;
  font-weight: 800;
}
.pto-event-calendar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.pto-event-calendar-actions .bws-btn-outline,
.pto-event-manage-actions .bws-btn-outline {
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}
.pto-event-calendar-actions .bws-btn-outline:hover,
.pto-event-calendar-actions .bws-btn-outline:focus-visible,
.pto-event-manage-actions .bws-btn-outline:hover,
.pto-event-manage-actions .bws-btn-outline:focus-visible {
  border-color: var(--pto-gold, #f2b84b);
  background: rgba(242, 184, 75, 0.12);
  color: #fff;
}
.pto-event-hero-side {
  display: grid;
  gap: 12px;
  justify-items: end;
}
.pto-event-date-card {
  display: grid;
  justify-items: center;
  min-width: 104px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
}
.pto-event-date-card span,
.pto-event-date-card small {
  color: var(--pto-gold, #f2b84b);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pto-event-date-card strong {
  font-size: 2.4rem;
  line-height: 1;
}
.pto-event-manage-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.pto-event-manage-actions form {
  margin: 0;
}

.pto-event-body {
  padding: 32px 16px 44px;
}
.pto-event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 22px;
  align-items: start;
}
.pto-event-main,
.pto-event-side {
  display: grid;
  gap: 20px;
  min-width: 0;
}
.pto-event-section-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.07);
}
.pto-event-section-card > .bws-card-body {
  padding: 18px;
}
.pto-event-section-card .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--pto-navy, #0f1b33);
}
.pto-event-section-card .pto-section-label i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.14));
  color: #8a6508;
}
.pto-event-description {
  color: #263244;
  font-size: 1rem;
  line-height: 1.65;
}
.pto-event-description p:first-child {
  margin-top: 0;
}
.pto-event-description p:last-child {
  margin-bottom: 0;
}
.pto-event-external-link {
  margin: 14px 0 0;
}
.pto-event-task-list,
.pto-event-promo-list,
.pto-event-discussion-list {
  display: grid;
  gap: 10px;
}
.pto-event-task-row,
.pto-event-detail-row,
.pto-event-promo-row,
.pto-event-discussion-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #fbfcff);
}
.pto-event-task-row .pto-info-icon,
.pto-event-detail-row .pto-info-icon,
.pto-event-promo-row .pto-info-icon,
.pto-event-discussion-row .pto-info-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.pto-event-task-copy,
.pto-event-promo-copy,
.pto-event-discussion-row span:last-child {
  min-width: 0;
  flex: 1;
}
.pto-event-task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pto-event-task-copy p {
  margin: 6px 0 0;
}
.pto-event-promo-row {
  border-color: rgba(242, 184, 75, 0.32);
  background: linear-gradient(135deg, #fffaf0, #fff);
}
.pto-event-promo-row img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
}
.pto-event-promo-copy strong,
.pto-event-promo-copy a,
.pto-event-discussion-row strong,
.pto-event-discussion-row small {
  display: block;
}
.pto-event-promo-copy a {
  width: max-content;
  max-width: 100%;
  color: var(--bws-primary, #8a6508);
  font-weight: 800;
  text-decoration: none;
}
.pto-event-promo-copy a:hover,
.pto-event-discussion-row:hover strong {
  text-decoration: underline;
}
.pto-event-promo-code {
  margin: 6px 0 0;
}
.pto-event-promo-code code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(15, 27, 51, 0.08);
}
.pto-event-discussion-row {
  color: inherit;
  text-decoration: none;
}
.pto-event-discussion-row small {
  margin-top: 3px;
  color: #6b7280;
  font-size: 0.82rem;
}
.pto-event-donate-card {
  border-color: rgba(242, 184, 75, 0.34);
  background: linear-gradient(135deg, #fffaf0, #fff);
}
.pto-event-donate-card p {
  margin: 0 0 12px;
  color: #4b5563;
}
.pto-event-details-card .bws-card-body,
.pto-event-rsvp-card .bws-card-body {
  display: grid;
}
.pto-event-detail-row + .pto-event-detail-row {
  margin-top: 10px;
}
.pto-event-detail-row a {
  color: var(--pto-navy, #0f1b33);
  font-weight: 800;
  text-decoration: none;
}
.pto-event-detail-row a:hover {
  color: var(--bws-primary, #8a6508);
  text-decoration: underline;
}
.pto-event-detail-row span {
  color: #6b7280;
  font-weight: 500;
}
.pto-event-rsvp-current {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(42, 157, 143, 0.12);
  color: #1f7168;
  font-weight: 800;
}
.pto-event-rsvp-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pto-event-rsvp-actions .bws-btn {
  min-height: 38px;
  padding-inline: 8px;
}
.pto-event-rsvp-going,
.pto-event-rsvp-maybe,
.pto-event-rsvp-declined {
  border-color: transparent;
  color: #fff;
  font-weight: 900;
}
.pto-event-rsvp-going {
  background: #15803d;
}
.pto-event-rsvp-going:hover,
.pto-event-rsvp-going:focus-visible {
  background: #166534;
  color: #fff;
}
.pto-event-rsvp-maybe {
  background: #2563eb;
}
.pto-event-rsvp-maybe:hover,
.pto-event-rsvp-maybe:focus-visible {
  background: #1d4ed8;
  color: #fff;
}
.pto-event-rsvp-declined {
  background: #dc2626;
}
.pto-event-rsvp-declined:hover,
.pto-event-rsvp-declined:focus-visible {
  background: #b91c1c;
  color: #fff;
}
.pto-event-virtual-card {
  margin-bottom: 20px;
}

@media (max-width: 760px) {
  .pto-event-hero {
    padding: 28px 0 26px;
  }
  .pto-event-hero-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pto-event-hero h1 {
    font-size: 1.75rem;
    line-height: 1.08;
  }
  .pto-event-hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pto-event-hero-meta span,
  .pto-event-hero-meta a {
    width: 100%;
  }
  .pto-event-calendar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pto-event-calendar-actions .bws-btn {
    min-height: 40px;
    justify-content: center;
    padding-inline: 8px;
    font-size: 0.84rem;
  }
  .pto-event-hero-side {
    justify-items: stretch;
  }
  .pto-event-date-card {
    display: none;
  }
  .pto-event-manage-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pto-event-manage-actions .bws-btn,
  .pto-event-manage-actions form,
  .pto-event-manage-actions button {
    width: 100%;
    justify-content: center;
  }
  .pto-event-body {
    padding: 24px 16px 36px;
  }
  .pto-event-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .pto-event-section-card > .bws-card-body {
    padding: 14px;
  }
  .pto-event-task-row,
  .pto-event-detail-row,
  .pto-event-promo-row,
  .pto-event-discussion-row {
    padding: 10px;
  }
  .pto-event-rsvp-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pto-month-calendar .bws-card-body {
    padding: 10px;
  }
  .pto-cal-head {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
    margin-bottom: 10px;
  }
  .pto-cal-head strong {
    font-size: 0.92rem;
  }
  .pto-cal-mobile-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: -2px 0 10px;
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 800;
  }
  .pto-cal-nav {
    width: 34px;
    height: 34px;
  }
  .pto-cal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }
  .pto-cal-grid {
    grid-template-columns: repeat(7, minmax(74px, 1fr));
    min-width: 518px;
    gap: 6px;
  }
  .pto-cal-grid-weekdays {
    grid-template-columns: repeat(5, minmax(74px, 1fr));
    min-width: 370px;
  }
  .pto-cal-dow {
    font-size: 0.65rem;
    padding: 5px 0;
  }
  .pto-cal-day {
    min-height: 78px;
    border-radius: 10px;
    padding: 5px;
  }
  .pto-cal-day-image {
    flex-basis: 40px;
    min-height: 40px;
  }
  .pto-cal-day-hover {
    display: none;
  }
  .pto-cal-chip-preview {
    left: -8px;
    top: calc(100% + 9px);
    width: min(260px, calc(100vw - 36px));
    max-height: 260px;
    overflow: auto;
    padding: 10px;
  }
  .pto-cal-daynum {
    min-width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 0.7rem;
  }
  .pto-cal-daynum-onimage {
    top: 5px;
    left: 5px;
  }
  .pto-cal-day-create {
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    opacity: 1;
    transform: none;
  }
  .pto-cal-day-chips,
  .pto-cal-day-has-image .pto-cal-day-chips {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    padding: 5px 0 0;
  }
  .pto-cal-day-has-image .pto-cal-day-chips {
    padding: 5px;
  }
  .pto-cal-chip {
    font-size: 0;
    padding: 0;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(15, 118, 110, 0.5);
    border-radius: 5px;
    background: #0f766e;
  }
  .pto-cal-today .pto-cal-chip {
    background: #2563eb;
    border-color: rgba(37, 99, 235, 0.75);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  }
}

.pto-tabs-nav {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--bws-border);
  margin-bottom: 24px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pto-tabs-nav::-webkit-scrollbar {
  display: none;
}

.pto-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--bws-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}

.pto-tab-btn i {
  flex: none;
  font-size: 0.95em;
}

.pto-tab-icon {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 1em;
}

.pto-tab-count-badge {
  position: absolute;
  top: -8px;
  right: -9px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ff6b00;
  color: #fff;
  border: 2px solid var(--bws-surface);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .18);
  transform: translate(3px, -1px);
  z-index: 1;
}

@media (max-width: 640px) {
  .pto-tab-btn {
    padding: 8px 9px;
  }
}

.pto-tab-btn.pto-tab-active {
  color: var(--pto-navy);
  border-bottom-color: var(--pto-gold);
}

.pto-tab-panel {
  display: none;
}

.pto-tab-panel.pto-tab-active {
  display: block;
}

.pto-account-layout {
  margin-top: 24px;
}

.pto-account-main {
  min-width: 0;
}

/* Compact account setup guide. It stays inside .pto-account-layout so its .pto-tab-link CTAs
   are wired up by assets/js/pto-public.js, but lives in the main column so action rows have
   enough room to breathe. */
.pto-setup-card {
  margin: 0 0 16px;
  border-color: rgba(15, 27, 51, 0.1);
  box-shadow: none;
}
.pto-setup-card .bws-card-body {
  padding: 16px;
}
.pto-setup-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pto-setup-card-head strong {
  color: var(--pto-navy);
  font-size: 1.05rem;
  line-height: 1;
}
.pto-setup-progress {
  background: var(--bws-border, #e5e7eb);
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
  margin: 10px 0 12px;
}
.pto-setup-progress-bar {
  background: var(--pto-gold, #f2b84b);
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.pto-setup-checklist-group {
  margin-bottom: 12px;
}
.pto-setup-checklist-group:last-child {
  margin-bottom: 0;
}
.pto-setup-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pto-setup-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.pto-setup-checklist .bi-check-circle-fill {
  color: #16a34a;
  flex: none;
}
.pto-setup-checklist .bi-circle {
  color: var(--bws-text-muted, #9ca3af);
  flex: none;
}
.pto-setup-item-text {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
  line-height: 1.25;
}
.pto-setup-item-done .pto-setup-item-text {
  color: var(--bws-text-muted, #6b7280);
}
.pto-setup-next-steps-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--bws-text-muted, #6b7280);
  margin-bottom: 8px;
}
.pto-setup-complete {
  color: var(--bws-text-muted, #6b7280);
  font-size: 0.9rem;
  margin: 0;
}
.pto-setup-complete .bi-check-circle-fill {
  color: #16a34a;
}
.pto-setup-compact {
  border-top: 1px solid rgba(15, 27, 51, 0.08);
  padding-top: 9px;
}
.pto-setup-compact + .pto-setup-compact {
  margin-top: 9px;
}
.pto-setup-compact > summary {
  color: var(--pto-navy);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  list-style-position: outside;
}
.pto-setup-compact[open] > summary {
  margin-bottom: 10px;
}
.pto-setup-section {
  margin-bottom: 12px;
}
.pto-setup-section:last-child {
  margin-bottom: 0;
}
.pto-setup-section-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pto-navy);
  margin-bottom: 6px;
}
.pto-setup-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-top: 1px solid rgba(15, 27, 51, 0.06);
}
.pto-setup-section > .pto-setup-next-step:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.pto-setup-next-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 220px;
  font-size: 0.9rem;
  line-height: 1.25;
}
.pto-setup-next-step-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.pto-setup-card .bws-btn-sm {
  padding: 5px 9px;
}
.pto-setup-dismiss {
  background: none;
  border: none;
  color: var(--bws-text-muted, #9ca3af);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 2px;
}
.pto-setup-more summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pto-navy);
  margin-top: 4px;
}
.pto-setup-more[open] summary {
  margin-bottom: 10px;
}

@media (min-width: 760px) {
  .pto-setup-compact[open] {
    display: block;
  }

  .pto-setup-compact[open] > .pto-setup-checklist-group,
  .pto-setup-next-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
  }

  .pto-setup-section,
  .pto-setup-checklist-group {
    margin-bottom: 0;
  }
}

@media (max-width: 520px) {
  .pto-setup-checklist li,
  .pto-setup-next-step {
    align-items: flex-start;
  }

  .pto-setup-item-text,
  .pto-setup-next-step-body {
    min-width: calc(100% - 28px);
  }

  .pto-setup-next-step-actions {
    margin-left: 28px;
  }
}

@media (min-width: 900px) {
  .pto-account-layout {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  .pto-account-sidebar {
    position: sticky;
    top: 16px;
    align-self: start;
  }

  .pto-account-tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    border-bottom: 0;
    margin-bottom: 0;
    overflow: visible;
  }

  .pto-account-tabs .pto-tab-btn {
    width: 100%;
    justify-content: flex-start;
    border-bottom: 0;
    border-left: 3px solid transparent;
    border-radius: 0 6px 6px 0;
    margin-bottom: 0;
    padding: 9px 12px;
  }

  .pto-account-tabs .pto-tab-btn.pto-tab-active {
    background: color-mix(in srgb, var(--pto-gold) 14%, transparent);
    border-left-color: var(--pto-gold);
  }

  .pto-account-tabs .bws-badge {
    margin-left: auto;
  }

  .pto-account-main .pto-tab-panel > .bws-card:first-child {
    margin-top: 0;
  }
}

.pto-school-picker,
.pto-business-suggest,
.pto-school-directory-suggest {
  position: relative;
}

.pto-school-results,
.pto-business-suggest-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 260px;
  overflow-y: auto;
  display: none;
}

.pto-business-search-panel .pto-business-suggest-results,
.pto-business-search-panel .pto-school-results,
.pto-school-search-panel .pto-school-results {
  z-index: 50;
}

.pto-school-results.pto-open,
.pto-business-suggest-results.pto-open {
  display: block;
}

.pto-school-results button,
.pto-business-suggest-results button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
}

.pto-business-suggest-results button,
.pto-school-directory-suggest .pto-school-results button {
  display: grid;
  gap: 2px;
}

.pto-business-suggest-results button strong,
.pto-school-directory-suggest .pto-school-results button strong {
  color: var(--pto-navy);
  line-height: 1.2;
}

.pto-business-suggest-results button span,
.pto-school-directory-suggest .pto-school-results button span {
  color: #6b7280;
  font-size: 0.78rem;
}

.pto-school-results button:hover,
.pto-school-results button:focus,
.pto-business-suggest-results button:hover,
.pto-business-suggest-results button:focus {
  background: #f3f4f6;
}

.pto-business-schools-card,
.pto-business-schools-card .bws-card-body,
.pto-business-school-picker {
  overflow: visible;
}

.pto-business-schools-card {
  position: relative;
  z-index: 30;
}

.pto-business-school-picker {
  z-index: 40;
}

.pto-business-school-picker .pto-school-results {
  z-index: 1000;
  top: 74px;
  max-height: 320px;
}

.pto-map {
  width: 100%;
  height: 320px;
  border-radius: 8px;
  overflow: hidden;
}
.pto-map-consent-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: var(--bws-surface, #f4f2ec);
  padding: 16px;
}
.pto-map-consent-gate p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--bws-muted);
}

.pto-business-contact-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.08);
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.14), transparent 42%),
    linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.1);
}

.pto-org-contact-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.08);
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.13), transparent 44%),
    linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.1);
}

.pto-business-contact-card .bws-card-body {
  padding: 16px;
}

.pto-org-contact-card .bws-card-body {
  padding: 16px;
}

.pto-business-contact-card .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--pto-navy);
}

.pto-org-contact-card .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--pto-navy);
}

.pto-business-contact-card .pto-info-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(15, 27, 51, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.pto-org-contact-card .pto-info-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(15, 27, 51, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.pto-business-contact-card .pto-info-icon {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  font-size: 0.92rem;
}

.pto-org-contact-card .pto-info-icon {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  font-size: 0.92rem;
}

.pto-org-contact-card .pto-info-icon:has(.bi-telephone-fill) {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.pto-org-contact-card .pto-info-icon:has(.bi-envelope-fill) {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.pto-business-contact-card .pto-info-icon:has(.bi-telephone-fill) {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.pto-business-contact-card .pto-info-icon:has(.bi-envelope-fill) {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

.pto-business-contact-card .pto-info-icon:has(.bi-globe) {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}

.pto-business-contact-card .pto-info-icon:has(.bi-geo-alt-fill),
.pto-business-contact-card .pto-info-icon:has(.bi-map) {
  background: rgba(242, 184, 75, 0.18);
  color: #a16207;
}

.pto-business-contact-card .pto-info-row a {
  color: var(--pto-navy);
  font-weight: 700;
  text-decoration: none;
}

.pto-org-contact-card .pto-info-row a {
  color: var(--pto-navy);
  font-weight: 700;
  text-decoration: none;
}

.pto-business-contact-card .pto-info-row a:hover {
  color: var(--bws-primary);
  text-decoration: underline;
}

.pto-org-contact-card .pto-info-row a:hover {
  color: var(--bws-primary);
  text-decoration: underline;
}

.pto-business-contact-card .pto-social-icon-row {
  margin: 10px 0 11px;
  padding: 9px;
  border: 1px dashed rgba(15, 27, 51, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

.pto-org-contact-card .pto-social-icon-row {
  margin: 10px 0 0;
  padding: 9px;
  border: 1px dashed rgba(15, 27, 51, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
}

.pto-business-contact-card .pto-social-icon-btn {
  width: 34px;
  height: 34px;
  background: #fff;
  font-size: 1rem;
}

.pto-org-contact-card .pto-social-icon-btn {
  width: 34px;
  height: 34px;
  background: #fff;
  font-size: 1rem;
}

.pto-business-contact-map {
  margin: 8px 0 12px;
  padding: 4px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.pto-business-contact-map .pto-map {
  height: 185px;
  border-radius: 8px;
}

.pto-school-info-map {
  margin-bottom: 14px;
}

.pto-school-info-description {
  margin: 0 0 12px;
  padding: 10px 11px;
  border-left: 4px solid var(--pto-gold);
  border-radius: 8px;
  background: rgba(242, 184, 75, 0.12);
  color: var(--pto-navy);
  line-height: 1.5;
}

.pto-school-pto-card,
.pto-next-events-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.08);
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.13), transparent 44%),
    linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.1);
}

.pto-school-pto-card .bws-card-body,
.pto-next-events-card .bws-card-body {
  padding: 16px;
}

.pto-school-pto-card .pto-section-label,
.pto-next-events-card .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  color: var(--pto-navy);
}

.pto-school-pto-hero,
.pto-school-pto-empty {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 10px;
}

.pto-school-pto-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(242, 184, 75, 0.18);
  color: #a16207;
  font-size: 1.35rem;
  overflow: hidden;
}

.pto-school-pto-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pto-school-pto-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.pto-school-pto-heading .bws-card-title {
  margin: 0;
  color: var(--pto-navy);
  line-height: 1.15;
}

.pto-school-pto-description {
  margin: 8px 0 0;
  color: var(--bws-muted);
  line-height: 1.45;
}

.pto-school-pto-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.pto-school-pto-empty {
  padding: 10px;
  border: 1px dashed rgba(15, 27, 51, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.pto-school-pto-empty p {
  margin: 0;
}

.pto-next-events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pto-next-events-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid rgba(242, 184, 75, 0.35);
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.16);
  color: #8a6508;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
}

.pto-next-events-list {
  display: grid;
  gap: 8px;
}

.pto-next-event-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  gap: 11px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9)),
    radial-gradient(circle at 0 0, rgba(242, 184, 75, 0.18), transparent 34%);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(15, 27, 51, 0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pto-next-event-card:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 184, 75, 0.42);
  box-shadow: 0 9px 20px rgba(15, 27, 51, 0.1);
}

.pto-next-event-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 52px;
  border-radius: 10px;
  background: rgba(242, 184, 75, 0.18);
  color: #9a6700;
  font-size: 1.2rem;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 51, 0.08);
}

.pto-next-event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pto-next-event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--pto-navy), #20365f);
  color: #fff;
  box-shadow: 0 8px 16px rgba(15, 27, 51, 0.14);
}

.pto-next-event-date strong {
  font-size: 1rem;
  line-height: 1;
}

.pto-next-event-date span {
  margin-top: 3px;
  color: var(--pto-gold);
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.pto-next-event-body {
  min-width: 0;
}

.pto-next-event-body strong {
  display: block;
  overflow: hidden;
  color: var(--pto-navy);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pto-next-event-body span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  color: var(--bws-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.pto-next-event-body em {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin-top: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
}

.pto-meeting-room-card,
.pto-about-card,
.pto-board-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.08);
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.12), transparent 44%),
    linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.1);
}

.pto-meeting-room-card {
  margin-bottom: 20px;
  border-color: rgba(26, 115, 232, 0.16);
  background:
    linear-gradient(135deg, rgba(26, 115, 232, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(52, 168, 83, 0.12), transparent 48%),
    linear-gradient(180deg, #fff, #f8fafc);
}

.pto-meeting-room-card .bws-card-body {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
}

.pto-meeting-room-card .pto-section-label,
.pto-about-card .pto-section-label,
.pto-board-card .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--pto-navy);
}

.pto-meeting-room-mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #fff;
  color: #1a73e8;
  font-size: 1.35rem;
  box-shadow: inset 0 0 0 1px rgba(15, 27, 51, 0.08), 0 8px 18px rgba(26, 115, 232, 0.12);
}

.pto-meeting-room-mark span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.pto-meeting-room-mark span:nth-child(2) {
  top: 8px;
  right: 10px;
  background: #34a853;
}

.pto-meeting-room-mark span:nth-child(3) {
  right: 8px;
  bottom: 10px;
  background: #fbbc04;
}

.pto-meeting-room-mark span:nth-child(4) {
  bottom: 8px;
  left: 10px;
  background: #ea4335;
}

.pto-meeting-room-copy {
  min-width: 0;
}

.pto-meeting-code {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  color: #1a73e8;
  font-weight: 800;
}

.pto-meeting-room-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-color: #1a73e8;
  background: #1a73e8;
  color: #fff;
  box-shadow: 0 8px 18px rgba(26, 115, 232, 0.2);
}

.pto-meeting-room-btn:hover {
  background: #1557b0;
  color: #fff;
}

.pto-about-card .bws-card-body,
.pto-board-card .bws-card-body {
  padding: 16px;
}

.pto-about-description {
  margin: 0;
  padding: 10px 11px;
  border-left: 4px solid var(--pto-gold);
  border-radius: 8px;
  background: rgba(242, 184, 75, 0.12);
  color: var(--pto-navy);
  line-height: 1.5;
}

.pto-board-list {
  display: grid;
  gap: 8px;
}

.pto-board-member {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 27, 51, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pto-board-member:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 184, 75, 0.42);
  box-shadow: 0 9px 20px rgba(15, 27, 51, 0.1);
}

.pto-meeting-room-btn:focus-visible,
.pto-next-events-link:focus-visible,
.pto-next-event-card:focus-visible,
.pto-board-member:focus-visible,
.pto-district-entity-row:focus-visible,
.pto-district-media-body a:focus-visible {
  outline: 3px solid rgba(15, 27, 51, 0.9);
  outline-offset: 3px;
}

.pto-board-avatar {
  display: block;
  width: 40px;
  height: 40px;
}

.pto-board-avatar img,
.pto-board-avatar .pto-avatar {
  width: 40px;
  height: 40px;
}

.pto-board-member-body {
  min-width: 0;
}

.pto-board-member-body strong {
  display: block;
  overflow: hidden;
  color: var(--pto-navy);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pto-board-member-body span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.16);
  color: #8a6508;
  font-size: 0.72rem;
  font-weight: 800;
}

.pto-board-member > i {
  color: var(--bws-muted);
  font-size: 1.1rem;
}

.pto-district-widget-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.08);
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.12), transparent 44%),
    linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.1);
}

.pto-district-widget-card .bws-card-body {
  padding: 16px;
}

.pto-district-widget-card .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--pto-navy);
}

.pto-district-leader-row {
  margin-top: 12px;
}

.pto-district-widget-list {
  display: grid;
  gap: 8px;
}

.pto-district-entity-row,
.pto-district-media-row,
.pto-district-empty-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 27, 51, 0.05);
}

.pto-district-media-row,
.pto-district-empty-row {
  grid-template-columns: 44px minmax(0, 1fr);
}

.pto-district-entity-row {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pto-district-entity-row:hover {
  transform: translateY(-1px);
  border-color: rgba(242, 184, 75, 0.42);
  box-shadow: 0 9px 20px rgba(15, 27, 51, 0.1);
}

.pto-district-entity-icon,
.pto-district-media-thumb,
.pto-district-empty-row > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(242, 184, 75, 0.18);
  color: #a16207;
  overflow: hidden;
}

.pto-district-entity-icon img,
img.pto-district-media-thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.pto-district-entity-body,
.pto-district-media-body,
.pto-district-empty-row span {
  min-width: 0;
}

.pto-district-entity-body strong,
.pto-district-media-body a,
.pto-district-media-body strong,
.pto-district-empty-row strong {
  display: block;
  overflow: hidden;
  color: var(--pto-navy);
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pto-district-media-body a {
  text-decoration: none;
}

.pto-district-media-body a:hover {
  color: var(--bws-primary);
  text-decoration: underline;
}

.pto-district-entity-body span,
.pto-district-media-body span,
.pto-district-empty-row small {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--bws-muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pto-district-entity-row > i {
  color: var(--bws-muted);
  font-size: 1.1rem;
}

@media (max-width: 640px) {
  .pto-business-contact-card .bws-card-body {
    padding: 13px;
  }

  .pto-org-contact-card .bws-card-body {
    padding: 13px;
  }

  .pto-business-contact-card .pto-info-row {
    padding: 7px;
  }

  .pto-org-contact-card .pto-info-row {
    padding: 7px;
  }

  .pto-business-contact-map .pto-map {
    height: 155px;
  }

  .pto-school-pto-card .bws-card-body,
  .pto-next-events-card .bws-card-body {
    padding: 13px;
  }

  .pto-school-pto-hero,
  .pto-school-pto-empty {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .pto-school-pto-logo {
    width: 48px;
    height: 48px;
  }

  .pto-next-events-head {
    align-items: flex-start;
  }

  .pto-next-event-card {
    grid-template-columns: 50px minmax(0, 1fr) 42px;
    gap: 8px;
  }

  .pto-next-event-thumb {
    width: 50px;
    height: 46px;
  }

  .pto-next-event-date {
    width: 42px;
    height: 42px;
  }

  .pto-meeting-room-card .bws-card-body {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 13px;
  }

  .pto-meeting-room-mark {
    width: 46px;
    height: 46px;
  }

  .pto-meeting-room-btn {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }

  .pto-about-card .bws-card-body,
  .pto-board-card .bws-card-body {
    padding: 13px;
  }

  .pto-district-widget-card .bws-card-body {
    padding: 13px;
  }

  .pto-district-entity-row,
  .pto-district-media-row,
  .pto-district-empty-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .pto-district-entity-row > i {
    display: none;
  }

  .pto-district-entity-icon,
  .pto-district-media-thumb,
  .pto-district-empty-row > i,
  .pto-district-entity-icon img,
  img.pto-district-media-thumb {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-color-scheme: dark) {
  .pto-school-results {
    background: #1f2937;
    border-color: #374151;
  }
  .pto-school-results button {
    color: #f3f4f6;
  }
  .pto-school-results button:hover,
  .pto-school-results button:focus {
    background: #374151;
  }
}

/* Supply List tab (checkbox items grouped by grade, with Amazon cart + print/PDF actions). */
.pto-supply-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* The affiliate disclosure — deliberately NOT small/muted text (parents skim past that): a
   warm, visible callout framing it as "this helps our school," not fine-print. Shared with the
   platform-level monetization disclosure (Featured Business / "how we stay free") — same warm,
   visible treatment, same reasoning. */
.pto-supply-affiliate-disclaimer,
.pto-monetization-disclosure {
  background: var(--pto-gold-soft, rgba(242,184,75,.14));
  border: 1px solid var(--pto-gold, #f2b84b);
  border-radius: var(--bws-radius-md, 10px);
  padding: 10px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--bws-text);
  margin-bottom: 16px;
}
.pto-supply-affiliate-disclaimer i,
.pto-monetization-disclosure i {
  color: #c0392b;
  margin-right: 4px;
}

.pto-supply-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.pto-supply-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--bws-border);
  border-radius: 8px;
}

.pto-supply-item-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
}

.pto-supply-item-label input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

.pto-supply-item-label img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
}

.pto-supply-item-title {
  flex: 1;
}

.pto-supply-item-qty {
  display: inline-block;
  background: var(--pto-navy, #1c2b4a);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
}

.pto-supply-item-note {
  display: inline-block;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--bws-text-muted, #6b7280);
  margin-top: 2px;
}

/* A group's own custom message ("Please be sure all supplies are out of their packaging.") —
   lighter-weight than the affiliate disclosure above (informational, not a legal disclosure),
   but still a visible callout, not muted fine print a parent would skim past. */
.pto-supply-group-message {
  background: var(--bws-surface-alt, #f4f6f9);
  border-left: 3px solid var(--pto-navy, #1c2b4a);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.9rem;
  margin-bottom: 12px;
}
.pto-supply-group-message i {
  color: var(--pto-navy, #1c2b4a);
  margin-right: 4px;
}

@media print {
  body * {
    visibility: hidden;
  }
  /* The Supply List's own tab panel is normally display:none unless it's the active tab —
     force it (and every panel, harmlessly) visible for print so the checklist actually renders. */
  .pto-tab-panel {
    display: block !important;
  }
  .pto-supply-list, .pto-supply-list * {
    visibility: visible;
  }
  .pto-supply-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  .pto-supply-toolbar, .pto-supply-item-link, .pto-supply-cart-note {
    display: none !important;
  }
  .bws-faq-answer {
    display: block !important;
  }
}

.pto-demo-banner {
  background: var(--pto-navy);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 600;
}

.pto-demo-banner a {
  color: var(--pto-gold);
  margin-left: 12px;
  text-decoration: underline;
}

/* A short, admin-editable note shown next to an entity's name in a dark hero (see
   pto_districts.hero_message) — general-purpose, not tied to any one message's wording. */
.pto-district-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(242, 184, 75, 0.16);
  border: 1px solid rgba(242, 184, 75, 0.4);
  color: var(--pto-gold);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.pto-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--bws-muted);
  display: grid;
  gap: 8px;
}

.pto-feature-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  line-height: 1.4;
}

.pto-feature-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pto-gold);
  font-weight: 700;
}

/* Business "Certificate of Support" — a printable, letter-page-friendly certificate. */
.pto-certificate-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

/* Site header logo (admin/settings.php's Branding section) — sized on its own terms (bigger
   than the letter-badge fallback it replaces), no background plate or rounding: an uploaded
   logo is shown as-is, not boxed. Sized close to the full navbar height (1rem top+bottom
   padding on .bws-navbar) rather than a small fixed icon size. */
.bws-navbar-brand-logo {
  height: 3.75rem;
  width: auto;
  max-width: 280px;
  margin-right: .6rem;
  object-fit: contain;
  flex: none;
}
@media (max-width: 760px) {
  .bws-navbar-brand-logo {
    height: 2.75rem;
    max-width: 180px;
  }
}

/* ===========================================================================
   School default cover/logo — every school looks equally finished in the directory
   and on its own page, whether or not it has uploaded real images yet.
   =========================================================================== */
.pto-school-cover-default, .pto-school-cover-img {
  width: 100%;
  object-fit: cover;
  display: block;
}
.pto-cover-banner-img {
  display: block;
  width: 100%;
  max-height: 400px;
  border-radius: 16px;
  background: #f8fafc;
  object-fit: cover;
  object-position: center;
}
.pto-school-cover-default {
  background: linear-gradient(160deg, var(--pto-navy) 0%, var(--pto-navy-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pto-school-cover-default i {
  font-size: 2.2rem;
  color: var(--pto-gold);
}
.pto-school-logo-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--pto-navy) 0%, var(--pto-navy-light) 100%);
  flex: none;
}

@media (max-width: 640px) {
  .pto-cover-banner-img {
    height: auto !important;
    max-height: none;
    aspect-ratio: auto !important;
    object-fit: cover;
    border-radius: 12px;
  }
}
.pto-school-logo-default i {
  color: var(--pto-gold);
}
.pto-school-logo-img {
  border-radius: 14px;
  object-fit: cover;
  flex: none;
  background: #fff;
}

/* Numbered pagination (1 2 3 4 5 ...) — reusable, see core/helpers.php's pto_render_pagination(). */
.pto-pagination-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.pto-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border-radius: 8px;
  border: 1px solid var(--bws-border);
  color: var(--pto-navy, #1f2b45);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}
.pto-page-link:hover {
  border-color: var(--pto-gold);
  background: var(--pto-gold-soft);
}
.pto-page-active {
  background: var(--pto-navy, #1f2b45);
  border-color: var(--pto-navy, #1f2b45);
  color: #fff;
}
.pto-page-ellipsis {
  color: var(--bws-muted);
  padding: 0 4px;
}

/* "Find Schools Near Me" — one-click geolocation search on the directory. */
.pto-locate-btn.pto-locate-loading i {
  animation: pto-locate-spin 0.8s linear infinite;
}
@keyframes pto-locate-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===========================================================================
   Features page ("business plan"-style tour) — alternating icon+copy rows,
   a problem/solution panel pair, and an anchor-link agenda strip.
   =========================================================================== */
.pto-plan-panel {
  border-radius: 14px;
  padding: 28px 26px;
  height: 100%;
  box-sizing: border-box;
}
.pto-plan-panel-problem {
  background: rgba(165, 58, 58, 0.05);
  border: 1px solid rgba(165, 58, 58, 0.18);
}
.pto-plan-panel-solution {
  background: var(--pto-gold-soft);
  border: 1px solid rgba(242, 184, 75, 0.35);
}
/* Overrides .pto-feature-list's default gold checkmark — a list of PROBLEMS must never show
   a checkmark (that read as "messy"/backwards); this list gets a clear red X instead. */
.pto-plan-list-x li::before {
  content: '\2715';
  color: #a53a3a;
}
.pto-plan-list-check li::before {
  content: '\2713';
  color: #1c7a4d;
}

/* Scroll progress bar — a slim, quiet "effect on scroll" replacing the old horizontal-scrolling
   pill nav, which never looked right at any width. */
.pto-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--pto-gold), #e8c97a);
  z-index: 999;
  transition: width 0.1s linear;
}

/* Scroll-reveal — sections fade + rise into place as they enter the viewport. Degrades to
   fully visible with no JS/IntersectionObserver support (see the inline script's fallback). */
.pto-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pto-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Audience tabs — "choose your path" presentation switcher, no page reload, no dropdown menu. */
.pto-audience-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 32px;
}
.pto-audience-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--bws-border);
  background: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pto-navy, #1f2b45);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pto-audience-tab i { font-size: 1.1rem; color: var(--pto-gold); }
.pto-audience-tab:hover { border-color: var(--pto-gold); }
.pto-audience-tab-active {
  background: var(--pto-navy, #1f2b45);
  border-color: var(--pto-navy, #1f2b45);
  color: #fff;
}
.pto-audience-tab-active i { color: var(--pto-gold); }

.pto-audience-panels { position: relative; }
.pto-audience-panel {
  display: none;
  animation: ptoAudienceFadeIn 0.35s ease;
}
.pto-audience-panel-active { display: block; }
@keyframes ptoAudienceFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.pto-audience-panel-inner {
  background: #fff;
  border: 1px solid var(--bws-border);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}
.pto-audience-panel-icon {
  width: 76px;
  height: 76px;
  border-radius: 20px;
  background: linear-gradient(160deg, var(--pto-navy) 0%, var(--pto-navy-light, #17274a) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pto-audience-panel-icon i { font-size: 2.1rem; color: var(--pto-gold); }
@media (max-width: 640px) {
  .pto-audience-panel-inner { grid-template-columns: 1fr; padding: 22px; }
  .pto-audience-panel-icon { width: 56px; height: 56px; border-radius: 14px; }
}

/* Feature-row screenshot — the real thing, once uploaded (admin/feature-screenshots.php),
   replacing the icon box. Contained, never cropped or stretched, regardless of the source
   image's own proportions. */
.pto-feature-row-shot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  border: 1px solid var(--bws-border);
  box-shadow: 0 16px 34px rgba(15, 27, 51, 0.14);
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}
.pto-feature-row-shot img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform-origin: center center;
  position: relative;
}
/* Hover to zoom in for a closer look — same interaction as the homepage's story screenshots.
   overflow flips to visible only while hovered so the enlarged image isn't clipped back down
   to the card's own box, and z-index rises so it draws above whatever's below/beside it. */
.pto-feature-row-shot:hover {
  overflow: visible;
  z-index: 5;
}
.pto-feature-row-shot:hover img {
  transform: scale(1.5);
  box-shadow: 0 18px 50px rgba(15, 27, 51, 0.35);
}

.pto-feature-rows .pto-feature-row {
  padding: 48px 0;
  border-bottom: 1px solid var(--bws-border);
  align-items: center;
  gap: 40px;
}
.pto-feature-rows .pto-feature-row:last-child {
  border-bottom: none;
}

.pto-feature-row-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.pto-feature-row-reverse .pto-feature-row-visual { order: 2; }
.pto-feature-row-reverse .pto-feature-row-copy { order: 1; }

.pto-feature-row-num {
  position: absolute;
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: 6.5rem;
  font-weight: 700;
  color: var(--pto-gold-soft);
  line-height: 1;
  z-index: 0;
  user-select: none;
}

.pto-feature-row-icon {
  position: relative;
  z-index: 1;
  width: 108px;
  height: 108px;
  border-radius: 24px;
  background: linear-gradient(160deg, var(--pto-navy) 0%, var(--pto-navy-light, #17274a) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(15, 27, 51, 0.18);
}
.pto-feature-row-icon i {
  font-size: 3rem;
  color: var(--pto-gold);
}

.pto-feature-row-copy .pto-feature-list li {
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .pto-feature-row-num { font-size: 4rem; }
  .pto-feature-row-icon { width: 84px; height: 84px; border-radius: 18px; }
  .pto-feature-row-icon i { font-size: 2.2rem; }
  .pto-feature-row-visual { min-height: 140px; margin-bottom: 4px; }
  .pto-feature-rows .pto-feature-row { padding: 32px 0; }
}

/* ===========================================================================
   "Explore PTO Moms in Action" demo showcase (inc/demo-showcase.php) — shared
   by index.php and features.php. Every tile is IMAGE-LED: the real cover
   photo/avatar/logo of the actual demo row behind a browser-chrome frame, not
   an icon-and-text card, so this section reads as real working software, not
   documentation. A missing image (a demo row renamed/removed) falls back to a
   tone-colored gradient + icon, same discipline as pto-team-cover-fallback —
   never a broken image. Tones reuse the site's established warm palette so
   the tiles read as distinct "worlds" inside one cohesive brand.
   =========================================================================== */
.pto-demo-showcase { background: linear-gradient(180deg, #fffaf0 0%, #ffffff 60%); }

.pto-demo-hero-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.pto-demo-compact-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.pto-demo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #10182b;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 18px 42px rgba(15, 27, 51, .14);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pto-demo-card:hover,
.pto-demo-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px rgba(15, 27, 51, .22);
}
.pto-demo-card:focus-visible { outline: 3px solid var(--pto-gold, #f2b84b); outline-offset: 3px; }

.pto-demo-browser-chrome {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  background: #0c1220;
}
.pto-demo-browser-dots { display: inline-flex; gap: .3rem; flex: none; }
.pto-demo-browser-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); display: block; }
.pto-demo-browser-url {
  flex: 1;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pto-demo-card-media {
  position: relative;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: #1a2440;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pto-demo-compact-row .pto-demo-card-media { aspect-ratio: 4/3; }
.pto-demo-card-media-fallback { position: relative; z-index: 1; font-size: 2.4rem; color: rgba(255,255,255,.5); }
.pto-demo-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,16,30,.05) 0%, rgba(10,16,30,.75) 100%);
}
.pto-demo-card-badge {
  position: absolute;
  left: 1rem;
  bottom: -1.35rem;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 3px solid #10182b;
  background: #fff center/cover no-repeat;
  box-shadow: 0 10px 22px rgba(0,0,0,.3);
}
.pto-demo-card-badge--round { border-radius: 50%; width: 52px; height: 52px; bottom: -1.1rem; }

.pto-demo-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1.75rem 1.15rem 1.15rem;
}
.pto-demo-compact-row .pto-demo-card-body { padding: 1.55rem 1rem 1rem; }
.pto-demo-card-kicker {
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.pto-demo-card-title {
  display: block;
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.18;
}
.pto-demo-compact-row .pto-demo-card-title { font-size: 1.05rem; }
.pto-demo-card-copy {
  color: rgba(255,255,255,.68);
  font-size: .9rem;
  line-height: 1.5;
  margin-top: .1rem;
}
.pto-demo-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  font-weight: 800;
  font-size: .85rem;
  color: #fff;
}
.pto-demo-card:hover .pto-demo-card-cta i { transform: translateX(3px); }
.pto-demo-card-cta i { transition: transform .18s ease; }

.pto-demo-card[data-tone="gold"] .pto-demo-card-kicker,
.pto-demo-card[data-tone="gold"] .pto-demo-card-cta { color: #f2b84b; }
.pto-demo-card[data-tone="rose"] .pto-demo-card-kicker,
.pto-demo-card[data-tone="rose"] .pto-demo-card-cta { color: #ff8fab; }
.pto-demo-card[data-tone="blue"] .pto-demo-card-kicker,
.pto-demo-card[data-tone="blue"] .pto-demo-card-cta { color: #8fb4ff; }
.pto-demo-card[data-tone="orange"] .pto-demo-card-kicker,
.pto-demo-card[data-tone="orange"] .pto-demo-card-cta { color: #ff9d5c; }
.pto-demo-card[data-tone="teal"] .pto-demo-card-kicker,
.pto-demo-card[data-tone="teal"] .pto-demo-card-cta { color: #6fe0cc; }
.pto-demo-card[data-tone="purple"] .pto-demo-card-kicker,
.pto-demo-card[data-tone="purple"] .pto-demo-card-cta { color: #c3a6ff; }

/* No real image at all for this tile — a designed tone gradient stands in, never a blank box. */
.pto-demo-card[data-tone="gold"] .pto-demo-card-media:not([style]) { background-image: linear-gradient(135deg,#7a5a12,#3a2a06); }
.pto-demo-card[data-tone="rose"] .pto-demo-card-media:not([style]) { background-image: linear-gradient(135deg,#7a1236,#33081a); }
.pto-demo-card[data-tone="blue"] .pto-demo-card-media:not([style]) { background-image: linear-gradient(135deg,#123a7a,#081a33); }
.pto-demo-card[data-tone="orange"] .pto-demo-card-media:not([style]) { background-image: linear-gradient(135deg,#8a3a0a,#331603); }
.pto-demo-card[data-tone="teal"] .pto-demo-card-media:not([style]) { background-image: linear-gradient(135deg,#0a6a5a,#032e27); }
.pto-demo-card[data-tone="purple"] .pto-demo-card-media:not([style]) { background-image: linear-gradient(135deg,#4a1a8a,#1e0a38); }

.pto-demo-mini-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.pto-demo-mini {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.08);
  background: #fff;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 10px 26px rgba(17,24,39,.05);
  transition: transform .16s ease, box-shadow .16s ease;
}
.pto-demo-mini:hover, .pto-demo-mini:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(17,24,39,.1); }
.pto-demo-mini-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background-size: cover;
  background-position: center;
}
.pto-demo-mini[data-tone="amber"] .pto-demo-mini-icon { background-color: #fff0d6; color: #b45309; }
.pto-demo-mini[data-tone="coral"] .pto-demo-mini-icon { background-color: #ffe1de; color: #c0392b; }
.pto-demo-mini-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.pto-demo-mini-kicker { font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; color: #92660a; }
.pto-demo-mini-title { margin: 0; color: #111827; font-size: 1rem; font-weight: 800; }
.pto-demo-mini-body .bws-text-muted { font-size: .85rem; line-height: 1.4; }
.pto-demo-mini-cta { flex: none; color: #14264b; font-size: 1.1rem; }

.pto-demo-login-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem 2.25rem;
  border-radius: 20px;
  background: linear-gradient(120deg, #0f1b33 0%, #1c2f57 55%, #3a2a4d 100%);
  box-shadow: 0 26px 64px rgba(15, 27, 51, .3);
}
.pto-demo-login-callout-copy { max-width: 620px; }
.pto-demo-login-callout-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #f2b84b;
  font-weight: 900;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pto-demo-login-callout h3 {
  margin: .35rem 0 .5rem;
  color: #fff;
  font-size: 1.85rem;
}
.pto-demo-login-callout p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  line-height: 1.55;
}
.pto-demo-login-btn {
  flex: none;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .pto-demo-hero-row { grid-template-columns: 1fr; }
  .pto-demo-compact-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pto-demo-compact-row,
  .pto-demo-mini-row { grid-template-columns: 1fr; }
  .pto-demo-card-title { font-size: 1.15rem; }
  .pto-demo-login-callout { flex-direction: column; align-items: stretch; text-align: center; padding: 1.5rem; }
  .pto-demo-login-callout-copy { max-width: none; }
  .pto-demo-login-btn { width: 100%; justify-content: center; min-height: 48px; }
}

/* ===========================================================================
   Certificate of Community Support — a dedicated 8x10 print composition, not
   a website page. Its own header/border/typography system (classic theme);
   see the "theme" class hook below for adding alternates later without a
   rewrite. Everything is sized in inches so the on-screen preview and the
   printed/PDF page match closely, per design brief.
   =========================================================================== */
.pto-cert8x10-wrap {
  width: 8in;
  margin: 0 auto;
  background: #fff;
}

.pto-cert8x10.pto-cert8x10-theme-classic {
  width: 8in;
  height: 10in;
  box-sizing: border-box;
  padding: 0.3in;
  background: #fff;
  position: relative;
}

.pto-cert-frame {
  height: 100%;
  box-sizing: border-box;
  border: 2.5px solid var(--pto-navy);
  border-radius: 3px;
  padding: 0.28in 0.34in;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background: #fffffe;
}

.pto-cert-frame::before {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid var(--pto-gold);
  border-radius: 2px;
  pointer-events: none;
}

/* Subtle corner brackets — restrained, not an ornate Word-art border. */
.pto-cert-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
.pto-cert-corner::before,
.pto-cert-corner::after {
  content: '';
  position: absolute;
  background: var(--pto-gold);
}
.pto-cert-corner::before { width: 100%; height: 2px; }
.pto-cert-corner::after { width: 2px; height: 100%; }
.pto-cert-corner-tl { top: 18px; left: 18px; }
.pto-cert-corner-tr { top: 18px; right: 18px; transform: scaleX(-1); }
.pto-cert-corner-bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.pto-cert-corner-br { bottom: 18px; right: 18px; transform: scale(-1, -1); }

/* ---- Header band: certificate's own identity, not the school-page banner ---- */
.pto-cert-header {
  flex: none;
  padding-top: 8px;
}

.pto-cert-crest {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
}

.pto-cert-heading-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}
.pto-cert-heading-rule::before,
.pto-cert-heading-rule::after {
  content: '';
  height: 1px;
  width: 46px;
  background: var(--pto-gold);
}
.pto-cert-heading-rule span {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--pto-navy);
  font-weight: 700;
  white-space: nowrap;
}

.pto-cert-title {
  font-family: var(--pto-font-serif, Georgia, serif);
  font-weight: 700;
  color: var(--pto-navy);
  letter-spacing: 0.03em;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  margin: 2px 0 0;
  line-height: 1.25;
}

.pto-cert-subtitle {
  font-size: 0.78rem;
  color: #7a7362;
  margin: 6px 0 0;
  font-style: italic;
}

/* ---- Recognition block: business is the hero, school establishes context ---- */
.pto-cert-recognition {
  flex: none;
  margin-top: 14px;
  width: 100%;
}

.pto-cert-presented-to {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7a4a;
  margin: 0 0 8px;
}

.pto-cert-logo-round {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pto-gold);
  background: #fff;
  display: block;
  margin: 0 auto 8px;
}

.pto-cert-business-name {
  font-family: var(--pto-font-serif, Georgia, serif);
  font-weight: 700;
  color: var(--pto-navy);
  font-size: clamp(1.5rem, 4.4vw, 2.2rem);
  line-height: 1.15;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* The designed connector between the two organizations — a rule + icon, never a
   floating emoji between two bare circles. */
.pto-cert-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 8px;
  color: var(--pto-gold);
}
.pto-cert-connector::before,
.pto-cert-connector::after {
  content: '';
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, transparent, var(--pto-gold));
}
.pto-cert-connector::after { background: linear-gradient(90deg, var(--pto-gold), transparent); }
.pto-cert-connector i { font-size: 0.9rem; }
.pto-cert-connector-label {
  font-size: 0.78rem;
  color: #7a7362;
  margin: 0 0 8px;
}

.pto-cert-school-logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: contain;
  border: 1.5px solid rgba(201, 146, 46, 0.65);
  background: #fff;
  display: block;
  margin: 0 auto 7px;
  padding: 3px;
}

.pto-cert-school-name {
  font-family: var(--pto-font-serif, Georgia, serif);
  font-weight: 700;
  color: #92660a;
  font-size: clamp(1.1rem, 2.8vw, 1.4rem);
  line-height: 1.2;
  margin: 0;
  overflow-wrap: break-word;
}

.pto-cert-school-location {
  font-size: 0.82rem;
  color: #7a7362;
  margin: 3px 0 0;
}

/* ---- Appreciation statement ---- */
.pto-cert-message {
  flex: none;
  max-width: 5.6in;
  margin: 14px auto 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #3a3630;
}

/* ---- Seal / badge ---- */
.pto-cert-seal {
  flex: none;
  margin: 13px auto 0;
  width: 96px;
  height: auto;
}

/* Absorbs leftover vertical space above/below so short OR long content still fills
   the page in a balanced way, without rigid fixed percentages. */
.pto-cert-fill {
  flex: 1 1 auto;
  min-height: 6px;
}

.pto-cert-donation-strip {
  flex: none;
  width: 100%;
  margin: 8px auto 12px;
  padding: 10px 12px;
  border: 1px solid rgba(201, 146, 46, 0.45);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 248, 229, 0.95), #fff 65%);
}
.pto-cert-donation-label {
  display: block;
  margin-bottom: 8px;
  color: #7a5807;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pto-cert-donation-group {
  display: grid;
  grid-template-columns: 0.95in 1fr;
  align-items: center;
  gap: 10px;
}
.pto-cert-donation-group + .pto-cert-donation-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(201, 146, 46, 0.22);
}
.pto-cert-donation-group-title {
  color: var(--pto-navy);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
}
.pto-cert-donation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pto-cert-donation-qr {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #4a4438;
  line-height: 1.15;
}
.pto-cert-donation-qr img {
  width: 0.82in;
  height: 0.82in;
  padding: 3px;
  border: 1px solid #ece6d6;
  border-radius: 5px;
  background: #fff;
}
.pto-cert-donation-qr strong {
  max-width: 100%;
  color: var(--pto-navy);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
}
.pto-cert-donation-qr span {
  max-width: 100%;
  color: #7a7362;
  font-size: 0.52rem;
  line-height: 1.1;
}

/* ---- Footer: QR + issue details + optional signature, as one designed band ---- */
.pto-cert-footer {
  flex: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid #ece6d6;
  padding-top: 12px;
}

.pto-cert-footer-side {
  flex: 1;
  text-align: left;
  font-size: 0.72rem;
  color: #8a8375;
  line-height: 1.5;
}
.pto-cert-footer-side.pto-cert-footer-right {
  text-align: right;
}
.pto-cert-footer-side strong {
  color: #4a4438;
  font-weight: 700;
}

.pto-cert-qr-card {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.pto-cert-qr-card img {
  width: 1.02in;
  height: 1.02in;
  padding: 4px;
  border: 1px solid #ece6d6;
  border-radius: 6px;
  background: #fff;
}

.pto-cert-qr-card span {
  font-size: 0.62rem;
  color: #8a8375;
  max-width: 1.5in;
  line-height: 1.3;
}

.pto-cert-signature {
  margin-top: 4px;
  font-size: 0.78rem;
  color: #4a4438;
}
.pto-cert-signature-line {
  width: 130px;
  border-top: 1px solid #b8ab7e;
  margin: 0 0 4px;
}
.pto-cert-footer-right .pto-cert-signature-line { margin-left: auto; }

@media print {
  @page {
    size: 8in 10in;
    margin: 0;
  }
  body * {
    visibility: hidden;
  }
  .pto-cert8x10-wrap, .pto-cert8x10-wrap * {
    visibility: visible;
  }
  .pto-cert8x10-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 8in;
  }
  .pto-cert-frame {
    box-shadow: none !important;
  }
  .pto-certificate-actions,
  .pto-certificate-embed {
    display: none !important;
  }
}

/* Mom Forum — thread cards get the same premium hover lift used elsewhere, plus a gold left
   accent so a scannable list of discussions still feels branded rather than like a plain forum. */
.pto-tab-panel .bws-card.bws-card-hover[href] {
  border-left: 3px solid transparent;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.pto-tab-panel .bws-card.bws-card-hover[href]:hover {
  border-left-color: var(--pto-gold);
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

/* Forums — a classic forum-index layout: category bands containing a Forum/Topics/Posts/
   Last Activity table (each row a real link, not a table row, for full-row click + a11y),
   plus a two-column main+sidebar layout reused on the section and thread pages. */
.pto-forum-band {
  background: var(--bws-surface);
  border: 1px solid var(--bws-border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--bws-shadow-sm);
}

.pto-forum-band-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--bws-text);
  border-bottom: 1px solid var(--bws-border);
  background: linear-gradient(180deg, var(--pto-gold-soft) 0%, transparent 100%);
}

.pto-forum-band-header i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--pto-gold-soft);
  color: var(--pto-gold);
  font-size: 0.95rem;
}

.pto-forum-band-table {
  background: var(--bws-surface);
}

.pto-forum-row {
  display: grid;
  grid-template-columns: 2.2fr 0.6fr 0.6fr 1.4fr;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid var(--bws-border);
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.pto-forum-row:first-child {
  border-top: none;
}

a.pto-forum-row:hover {
  background: var(--bws-surface-alt);
  border-left-color: var(--pto-gold);
}

.pto-forum-row-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bws-muted);
  font-weight: 700;
  background: transparent;
  padding-top: 12px;
  padding-bottom: 12px;
}

.pto-forum-row-head:hover {
  background: transparent;
  border-left-color: transparent;
}

.pto-forum-row .bws-text-sm strong,
.pto-forum-cell-stat {
  font-variant-numeric: tabular-nums;
}

.pto-forum-row:not(.pto-forum-row-head) .pto-forum-cell-stat {
  font-weight: 700;
  color: var(--bws-text);
}

/* The label span exists only for mobile, where the column headers are hidden — desktop
   already labels each column via .pto-forum-row-head, so it stays hidden there. */
.pto-forum-cell-label {
  display: none;
}

@media (max-width: 640px) {
  .pto-forum-row {
    display: block;
    padding: 14px 16px;
  }
  .pto-forum-row-head {
    display: none;
  }
  .pto-forum-cell-main {
    display: block;
    margin-bottom: 8px;
  }
  .pto-forum-cell-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--bws-muted);
    margin-right: 14px;
  }
  .pto-forum-cell-stat:last-child {
    display: block;
    margin-top: 6px;
    margin-right: 0;
  }
  .pto-forum-cell-label {
    display: inline;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    color: var(--bws-muted);
  }
  .pto-forum-cell-label::after {
    content: ':';
  }
}

.pto-forum-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .pto-forum-layout {
    grid-template-columns: 1fr;
  }
  .pto-forum-sidebar {
    order: 2;
  }
}

/* Up/down vote widget, reused on thread cards and individual replies. */
.pto-vote-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.pto-vote-widget form {
  margin: 0;
}

.pto-vote-btn {
  border: none;
  background: transparent;
  color: var(--bws-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1;
}

.pto-vote-btn:hover {
  background: var(--pto-gold-soft);
  color: var(--pto-gold);
}

.pto-vote-btn.pto-vote-active-up {
  color: var(--bws-success, #16a34a);
}

.pto-vote-btn.pto-vote-active-down {
  color: var(--bws-danger, #dc2626);
}

.pto-vote-score {
  font-weight: 700;
  font-size: 0.9rem;
}

.pto-vote-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: var(--pto-gold);
  font-weight: 700;
  min-width: 32px;
  flex-shrink: 0;
}

/* "Most Helpful Members" badges — three simple tiers by net vote score. */
.pto-helper-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--bws-radius-full, 999px);
  vertical-align: middle;
}

.pto-helper-bronze {
  background: rgba(180, 120, 60, 0.16);
  color: #a5652c;
}

.pto-helper-silver {
  background: rgba(148, 163, 184, 0.2);
  color: #64748b;
}

.pto-helper-gold {
  background: var(--pto-gold-soft);
  color: var(--bws-primary); /* real badge text on a light background — see --bws-primary's own contrast note */
}

/* "Volunteers Needed" recruitment banner — full width, same as every other card on the
   page (not a small floating ad-unit): image on top shown in full with nothing overlaid
   on it, then a plain kicker/title/meta text block underneath. Shared between the
   standalone ad card (.pto-volunteer-ad, used on PTO/school pages and stacked via
   .pto-volunteer-ads when several events are recruiting) and the event page's own
   Volunteer Opportunities card, which embeds the same image+textblock markup directly
   (see pto_render_volunteer_banner()) so it reads as one card, not two. The site owner
   supplies one shared image at storage/uploads/volunteers-needed.jpg. */
.pto-volunteer-ads {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.pto-volunteer-ad {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}

.pto-volunteer-ad:hover {
  transform: translateY(-2px);
  box-shadow: var(--bws-shadow-md);
}

.pto-volunteer-ad-imgwrap {
  position: relative;
  width: 100%;
  height: 200px;
  
  overflow: hidden;
}

/* Cards in this app render their image edge-to-edge above a padded body — the volunteer
   banner's image sits the same way, whether inside a standalone .pto-volunteer-ad or
   embedded at the top of another .bws-card (event.php's Volunteer Opportunities card). */
.pto-volunteer-ad.bws-card,
.bws-card > .pto-volunteer-ad-imgwrap {
  border-radius: 16px 16px 0 0;
}

.pto-volunteer-ad-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pto-volunteer-ad-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--pto-gold);
  color: #1a1305;
  font-weight: 700;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--bws-radius-full, 999px);
}

.pto-volunteer-ad-textblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px 18px;
}

.pto-volunteer-ad-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bws-primary); /* real text on a light card — see --bws-primary's own contrast note */
}

.pto-volunteer-ad-title {
  font-family: var(--bws-font-sans);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--bws-text);
}

.pto-volunteer-ad-meta {
  font-size: 0.85rem;
  color: var(--bws-muted);
}

.pto-volunteer-ad-cta {
  margin-top: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--bws-primary); /* real text on a light card — see --bws-primary's own contrast note */
}

@media (max-width: 640px) {
  .pto-volunteer-ad-imgwrap {
    height: 160px;
  }
}

/* Small rotating "We need your help!" ad for open, not-full standalone Volunteer Requests
   (pto_render_volunteer_ad_widget()/_for_district() in core/volunteer_opportunities.php) —
   deliberately a SEPARATE, much smaller visual treatment from the full-width event-recruitment
   banner directly above (.pto-volunteer-ad-*, a different feature/data model entirely — see
   that function's own doc comment). Rotates via the same generic .pto-cr-slideshow engine the
   Community Requests widget already built; only this compact card is new. */
.pto-volreq-ad-wrap {
  margin-bottom: 20px;
}
.pto-volreq-ad-card {
  position: relative;
  min-height: 118px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(197, 118, 0, 0.36);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 214, 95, 0.38), transparent 26%),
    linear-gradient(135deg, rgba(255, 246, 217, 0.98), rgba(255, 255, 255, 0.98) 52%, rgba(255, 240, 204, 0.88));
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.12);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pto-volreq-ad-card::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(255, 190, 60, 0.22);
  pointer-events: none;
}
.pto-volreq-ad-card:hover {
  transform: translateY(-2px);
  border-color: rgba(197, 118, 0, 0.6);
  box-shadow: 0 16px 34px rgba(15, 27, 51, 0.16);
}
.pto-volreq-ad-card:focus-visible {
  outline: 3px solid rgba(15, 27, 51, 0.42);
  outline-offset: 3px;
}
/* The classic "media object" pattern (same technique already proven on the Community Requests
   slideshow's own image, see that block's comment above) — taken OUT of flex flow and stretched
   to height:100%, so the image fills the ENTIRE height of the widget edge-to-edge, however tall
   the text stack next to it happens to make the card, rather than sitting as a small inset
   thumbnail with its own padding/border. Width is fixed to match the card's own min-height so it
   reads as a full-bleed square panel, not a stretched sliver. */
.pto-volreq-ad-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 118px;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  flex: none;
  border: none;
  box-shadow: none;
}
.pto-volreq-ad-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 14px 14px calc(118px + 14px);
  width: 100%;
}
.pto-volreq-ad-kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(197, 118, 0, 0.13);
  color: #7a4100;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pto-volreq-ad-title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pto-navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pto-volreq-ad-owner,
.pto-volreq-ad-location {
  font-size: 0.8rem;
  color: #4b5563;
}
.pto-volreq-ad-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--pto-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.pto-volreq-ad-wrap .pto-cr-slideshow-prev,
.pto-volreq-ad-wrap .pto-cr-slideshow-next {
  width: 26px;
  height: 26px;
  font-size: 0.8rem;
}
@media (max-width: 640px) {
  .pto-volreq-ad-card {
    min-height: 108px;
  }
  .pto-volreq-ad-image {
    width: 108px;
  }
  .pto-volreq-ad-body {
    padding: 12px 12px 12px calc(108px + 12px);
  }
  .pto-volreq-ad-title {
    font-size: 0.98rem;
  }
  .pto-volreq-ad-owner,
  .pto-volreq-ad-location {
    font-size: 0.76rem;
  }
}

/* Class Events widget (profile.php, above Class News): compact agenda rows that stay
   readable inside the teacher card without creating another nested card frame. */
.pto-cevent-ad-wrap {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pto-next-events-head {
  margin-bottom: 2px;
}
.pto-cevent-ad-card {
  width: 100%;
  min-height: 96px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(197, 118, 0, 0.16);
  border-left: 4px solid var(--pto-gold);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 248, 230, 0.96), rgba(255, 255, 255, 0.98) 56%),
    radial-gradient(circle at 96% 8%, rgba(255, 190, 60, 0.18), transparent 30%);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.07);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  flex: none;
}
.pto-cevent-ad-card:hover {
  border-color: rgba(197, 118, 0, 0.32);
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.1);
  transform: translateY(-1px);
}
.pto-cevent-ad-card:focus-visible {
  outline: 3px solid rgba(15, 27, 51, 0.42);
  outline-offset: 3px;
}
.pto-cevent-ad-image {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  border: 1px solid rgba(15, 27, 51, 0.08);
}
.pto-cevent-datebox {
  flex: none;
  width: 58px;
  min-height: 64px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--pto-navy), #20365f);
  color: #fff;
  line-height: 1;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14);
}
.pto-cevent-datebox span {
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.pto-cevent-datebox strong {
  margin-top: 2px;
  font-size: 1.22rem;
}
.pto-cevent-ad-card:has(.pto-cevent-ad-image) .pto-cevent-datebox {
  display: none;
}
.pto-cevent-ad-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 0;
  flex: 1;
}
.pto-cevent-ad-kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8a6508;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.pto-cevent-ad-title {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--pto-navy);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pto-cevent-ad-title:hover {
  color: #8a6508;
  text-decoration: underline;
}
.pto-cevent-ad-when {
  font-size: 0.8rem;
  color: #4b5563;
}
.pto-cevent-ad-description {
  display: -webkit-box;
  overflow: hidden;
  color: #344155;
  font-size: 0.84rem;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: pre-line;
}
.pto-cevent-bring {
  display: inline-flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 2px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(42, 157, 143, 0.1);
  color: #14532d;
  font-size: 0.8rem;
  line-height: 1.3;
}
.pto-cevent-bring i {
  flex: none;
  margin-top: 2px;
  color: #2a9d8f;
}
.pto-cevent-bring span {
  min-width: 0;
}
.pto-cevent-bring strong {
  font-weight: 800;
}
.pto-cevent-icon-actions {
  align-self: flex-start;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.pto-cevent-icon-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 0;
  background: #fff;
  color: #b85f00;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(197, 118, 0, 0.22);
  font-size: 1rem;
  transition: background-color 0.15s, color 0.15s, transform 0.15s;
}
.pto-cevent-icon-btn:hover,
.pto-cevent-icon-btn:focus-visible {
  background: #b85f00;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.pto-cevent-icon-btn:first-child {
  background: #fff;
  color: #1a73e8;
  box-shadow: inset 0 0 0 1px rgba(26, 115, 232, 0.22);
}
.pto-cevent-icon-btn i {
  color: inherit;
  line-height: 1;
}
.pto-cevent-icon-btn:first-child:hover,
.pto-cevent-icon-btn:first-child:focus-visible {
  background: #1a73e8;
  color: #fff;
}
.pto-cevent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.pto-class-event-detail-card .bws-card-body > p {
  margin-bottom: 14px;
}
.pto-class-event-detail-notes {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}
.pto-class-event-note {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  line-height: 1.45;
}
.pto-class-event-note > i {
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1;
}
.pto-class-event-note strong {
  display: inline;
  font-weight: 800;
}
.pto-class-event-bring-note > i {
  color: #2a9d8f;
}
.pto-class-event-donation-note > i {
  color: #b85f00;
}
.pto-teacher-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}
.pto-teacher-page-main,
.pto-teacher-page-sidebar {
  min-width: 0;
}
.pto-teacher-context-sidebar {
  display: grid;
  gap: 16px;
}
.pto-teacher-side-card .bws-card-body {
  padding: 14px;
}
.pto-teacher-side-card .pto-supply-callout {
  margin-top: 10px;
  margin-bottom: 0;
}
.pto-teacher-side-card .pto-supply-callout:first-of-type {
  margin-top: 0;
}
.pto-teacher-side-card .pto-cevent-ad-wrap {
  margin-bottom: 0 !important;
}
.pto-teacher-side-card .pto-cevent-ad-card {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 10px 10px 11px;
  border-left-width: 3px;
}
.pto-teacher-side-card .pto-cevent-ad-image {
  width: 44px;
  height: 44px;
  grid-row: 1;
}
.pto-teacher-side-card .pto-cevent-datebox {
  width: 44px;
  min-height: 44px;
  grid-row: 1;
}
.pto-teacher-side-card .pto-cevent-datebox span {
  font-size: 0.58rem;
}
.pto-teacher-side-card .pto-cevent-datebox strong {
  font-size: 1.05rem;
}
.pto-teacher-side-card .pto-cevent-ad-body {
  display: contents;
}
.pto-teacher-side-card .pto-cevent-ad-kicker {
  grid-column: 2;
  font-size: 0.66rem;
}
.pto-teacher-side-card .pto-cevent-ad-title {
  grid-column: 2;
  font-size: 0.94rem;
  white-space: normal;
}
.pto-teacher-side-card .pto-cevent-ad-when,
.pto-teacher-side-card .pto-cevent-ad-description {
  grid-column: 1 / -1;
}
.pto-teacher-side-card .pto-cevent-ad-description {
  -webkit-line-clamp: 3;
  font-size: 0.8rem;
}
.pto-teacher-side-card .pto-cevent-bring {
  grid-column: 1 / -1;
  display: inline-flex;
  padding: 7px 9px;
  font-size: 0.78rem;
}
.pto-teacher-side-card .pto-cevent-icon-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  margin-left: 0;
}
.pto-teacher-side-card .pto-cevent-icon-btn {
  width: 28px;
  height: 28px;
  background: #fff;
}
.pto-profile-teaching-card .pto-cevent-ad-card {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 8px 10px;
  padding: 10px 10px 11px;
  border-left-width: 3px;
}
.pto-profile-teaching-card .pto-cevent-ad-image {
  width: 44px;
  height: 44px;
  grid-row: 1;
}
.pto-profile-teaching-card .pto-cevent-datebox {
  width: 44px;
  min-height: 44px;
  grid-row: 1;
}
.pto-profile-teaching-card .pto-cevent-datebox span {
  font-size: 0.58rem;
}
.pto-profile-teaching-card .pto-cevent-datebox strong {
  font-size: 1.05rem;
}
.pto-profile-teaching-card .pto-cevent-ad-body {
  display: contents;
}
.pto-profile-teaching-card .pto-cevent-ad-kicker {
  grid-column: 2;
  font-size: 0.66rem;
}
.pto-profile-teaching-card .pto-cevent-ad-title {
  grid-column: 2;
  font-size: 0.94rem;
  white-space: normal;
}
.pto-profile-teaching-card .pto-cevent-ad-when,
.pto-profile-teaching-card .pto-cevent-ad-description {
  grid-column: 1 / -1;
}
.pto-profile-teaching-card .pto-cevent-ad-description {
  -webkit-line-clamp: 3;
  font-size: 0.8rem;
}
.pto-profile-teaching-card .pto-cevent-bring {
  grid-column: 1 / -1;
  display: inline-flex;
  padding: 7px 9px;
  font-size: 0.78rem;
}
.pto-profile-teaching-card .pto-cevent-icon-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  margin-left: 0;
}
.pto-profile-teaching-card .pto-cevent-icon-btn {
  width: 28px;
  height: 28px;
  background: #fff;
}
.pto-teacher-side-card .pto-news-accordion-summary {
  padding: 9px 0;
  align-items: flex-start;
}
.pto-teacher-side-card .pto-news-accordion-summary span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pto-teacher-side-card .pto-news-accordion-summary strong,
.pto-teacher-side-card .pto-news-accordion-summary small {
  display: block;
}
.pto-teacher-side-card .pto-news-accordion-summary strong {
  white-space: normal;
  line-height: 1.22;
}
.pto-teacher-side-card .pto-news-accordion-summary small {
  line-height: 1.2;
}
.pto-teacher-side-card .pto-news-accordion-content {
  padding-bottom: 10px;
}
@media (max-width: 640px) {
  .pto-cevent-ad-card {
    min-height: 0;
    gap: 8px;
    padding: 10px;
  }
  .pto-cevent-ad-image {
    width: 52px;
    height: 52px;
  }
  .pto-cevent-datebox {
    width: 48px;
    min-height: 52px;
  }
  .pto-cevent-ad-title {
    font-size: 0.92rem;
  }
  .pto-cevent-ad-when {
    font-size: 0.76rem;
  }
  .pto-cevent-ad-description {
    -webkit-line-clamp: 2;
    font-size: 0.8rem;
  }
  .pto-cevent-bring {
    font-size: 0.76rem;
    padding: 5px 7px;
  }
  .pto-cevent-icon-actions {
    flex-direction: column;
    gap: 5px;
  }
  .pto-cevent-icon-btn {
    width: 28px;
    height: 28px;
  }
  .pto-cevent-actions .bws-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}
@media (max-width: 920px) {
  .pto-teacher-page-layout {
    grid-template-columns: 1fr;
  }
  .pto-teacher-page-sidebar {
    order: -1;
  }
}

/* PWA install banner — one shared structure, several admin-selectable layouts. Colors,
   sizes, and radius all come from CSS custom properties set inline per-install (see
   pto_pwa_render_install_banner()), so this file never hard-codes any installation's
   brand. Positioning varies by data-design/data-position; everything else is shared. */
.pto-install-banner {
  position: fixed;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--pto-pwa-max-width, 420px);
  width: calc(100% - 24px);
  padding: 12px 14px;
  background: var(--pto-pwa-bg, #0f1b33);
  color: var(--pto-pwa-text, #fff);
  border: 1px solid var(--pto-pwa-border, transparent);
  border-radius: var(--pto-pwa-radius, 14px);
  box-shadow: var(--pto-pwa-shadow, 0 10px 30px rgba(0,0,0,.22));
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}

.pto-install-banner-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.pto-install-banner[hidden] {
  display: none;
}

.pto-install-banner-icon {
  width: var(--pto-pwa-icon-size, 44px);
  height: var(--pto-pwa-icon-size, 44px);
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.pto-install-banner-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pto-install-banner-title {
  font-size: 0.9rem;
  font-weight: 700;
}

.pto-install-banner-message {
  font-size: 0.78rem;
  opacity: 0.85;
}

.pto-install-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pto-install-banner-actions #ptoInstallBtn {
  background: var(--pto-pwa-btn, var(--pto-gold));
  border-color: var(--pto-pwa-btn, var(--pto-gold));
  color: #1a1305;
}

.pto-install-banner-actions #ptoInstallDismiss {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  padding: 6px 8px;
}

/* Layout variants — position only; the card itself stays identical. */
.pto-install-banner[data-design="bottom_bar"] {
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 12px);
  width: 100%;
  max-width: 100%;
  border-radius: var(--pto-pwa-radius, 14px) var(--pto-pwa-radius, 14px) 0 0;
}
.pto-install-banner[data-design="bottom_bar"].pto-install-banner-in {
  transform: translate(-50%, 0) !important;
}

.pto-install-banner[data-design="top_bar"] {
  left: 50%;
  top: 0;
  transform: translate(-50%, -12px);
  width: 100%;
  max-width: 100%;
  border-radius: 0 0 var(--pto-pwa-radius, 14px) var(--pto-pwa-radius, 14px);
}
.pto-install-banner[data-design="top_bar"].pto-install-banner-in {
  transform: translate(-50%, 0) !important;
}

.pto-install-banner[data-design="floating_card"],
.pto-install-banner[data-design="compact_card"] {
  right: 16px;
  bottom: 16px;
}
.pto-install-banner[data-design="floating_card"][data-position="bottom-left"],
.pto-install-banner[data-design="compact_card"][data-position="bottom-left"] {
  left: 16px;
  right: auto;
}

.pto-install-banner[data-design="minimal_button"] {
  left: 50%;
  bottom: 12px;
  transform: translate(-50%, 12px);
  padding: 8px 10px;
}
.pto-install-banner[data-design="minimal_button"] .pto-install-banner-message,
.pto-install-banner[data-design="minimal_button"] #ptoInstallDismissText {
  display: none;
}
.pto-install-banner-dismiss {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pto-install-banner[data-design="minimal_button"].pto-install-banner-in {
  transform: translate(-50%, 0) !important;
}

@media (max-width: 640px) {
  .pto-install-banner[data-design="floating_card"],
  .pto-install-banner[data-design="compact_card"] {
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translate(-50%, 12px);
    width: 100%;
    max-width: 100%;
  }
  .pto-install-banner[data-design="floating_card"].pto-install-banner-in,
  .pto-install-banner[data-design="compact_card"].pto-install-banner-in {
    transform: translate(-50%, 0) !important;
  }
}

/* iOS "Add to Home Screen" instruction sheet — a compact bottom sheet, not a full modal. */
.pto-ios-sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9100;
  display: flex;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.35);
}
.pto-ios-sheet[hidden] {
  display: none;
}
.pto-ios-sheet-body {
  background: var(--bws-bg);
  color: var(--bws-text);
  border-radius: 16px;
  padding: 20px;
  max-width: 340px;
  width: 100%;
  box-shadow: var(--bws-shadow-lg);
}
.pto-ios-sheet-body ol {
  margin: 10px 0;
  padding-left: 20px;
  font-size: 0.9rem;
}

.pto-update-toast {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9200;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--pto-navy);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: var(--bws-shadow-md);
  font-size: 0.85rem;
}
/* --- Avatars (account.php upload, shown anywhere a member's name appears) --- */
.pto-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: inline-flex;
}
.pto-mention {
  color: var(--bws-primary); /* real forum-post text on a light background — see --bws-primary's own contrast note */
  font-weight: 700;
  background: var(--pto-gold-soft);
  padding: 1px 4px;
  border-radius: 4px;
}
.pto-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* --- "Proud Supporter Of" ad band (business.php Overview, before Contact) --- */
.pto-support-ad {
  background: linear-gradient(135deg, var(--pto-gold-soft), rgba(242, 184, 75, 0.04));
  border: 1px solid rgba(184, 134, 11, 0.22);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}
.pto-support-ad-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #92660a;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.pto-support-ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.pto-support-card {
  display: block;
  background: var(--bws-bg, #fff);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(15, 27, 51, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pto-support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.14);
}
.pto-support-card-cover {
  height: 64px;
  background-color: var(--pto-navy);
  background-size: cover;
  background-position: center;
}
.pto-support-card-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 14px;
  margin-top: -22px;
}
.pto-support-card-logo {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid var(--bws-bg, #fff);
  background: var(--bws-bg, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex: none;
}
.pto-support-card-logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pto-gold);
  font-size: 1.1rem;
}
.pto-support-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 22px;
}
.pto-support-card-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pto-support-card-cta {
  color: #92660a;
  font-size: 0.78rem;
  font-weight: 700;
}

.pto-supporting-businesses-card .bws-card-body {
  padding: 16px;
}

/* "Happening :date" — real event flyers landing on a holiday's own date (event.php's holiday
   page). The flyer image is the dominant element (a real poster/graphic the event's own manager
   uploaded), unlike the plain logo-thumbnail rows every other sidebar card in this file uses. */
.pto-holiday-flyer-list {
  display: grid;
  gap: 12px;
}

.pto-holiday-flyer-card {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(15, 27, 51, 0.08);
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 27, 51, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pto-holiday-flyer-card:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 184, 75, 0.42);
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.1);
}

.pto-holiday-flyer-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.pto-holiday-flyer-body {
  display: block;
  padding: 10px 12px;
}

.pto-holiday-flyer-body strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.3;
  margin-bottom: 3px;
}

.pto-holiday-flyer-body span {
  display: block;
  color: #64748b;
  font-size: 0.78rem;
}

.pto-supporting-business-list {
  display: grid;
  gap: 10px;
}

.pto-supporting-business-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.12), transparent 45%),
    #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 27, 51, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pto-supporting-business-card:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 184, 75, 0.42);
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.1);
}

.pto-supporting-business-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(242, 184, 75, 0.18);
  color: #a16207;
  overflow: hidden;
}

.pto-supporting-business-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pto-supporting-business-body {
  min-width: 0;
}

.pto-supporting-business-body strong {
  display: block;
  overflow: hidden;
  color: var(--pto-navy);
  font-size: 0.95rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pto-supporting-business-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.pto-supporting-business-deals {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.2);
  color: #8a6508;
  font-size: 0.72rem;
  font-weight: 800;
}

/* --- Business Directory: live open/closed status, star ratings, reviews --- */
.pto-business-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.pto-business-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.pto-business-status-green {
  background: rgba(34, 139, 87, 0.12);
  color: #1c7a4d;
  border-color: rgba(34, 139, 87, 0.25);
}
.pto-business-status-green .pto-business-status-dot { background: #22b573; }
.pto-business-status-red {
  background: rgba(200, 60, 60, 0.1);
  color: #a53a3a;
  border-color: rgba(200, 60, 60, 0.22);
}
.pto-business-status-red .pto-business-status-dot { background: #d9534f; }
.pto-business-status-gray {
  background: rgba(120, 120, 120, 0.1);
  color: #6b6b6b;
  border-color: rgba(120, 120, 120, 0.2);
}
.pto-business-status-gray .pto-business-status-dot { background: #9a9a9a; }

.pto-business-attribute-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pto-business-attribute-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--bws-border);
  border-radius: 999px;
  background: var(--bws-surface, #fff);
  color: var(--bws-text);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
}

.pto-business-attribute-chip i {
  color: #8a6508;
  font-size: 0.98rem;
}

.pto-business-attribute-chip-cuisines i,
.pto-business-attribute-chip-restaurant-features i { color: #c2410c; }
.pto-business-attribute-chip-meal-types i { color: #b45309; }
.pto-business-attribute-chip-special-diets i { color: #15803d; }
.pto-business-attribute-chip-payment-methods i { color: #2563eb; }
.pto-business-attribute-chip-amenities i { color: #0f766e; }
.pto-business-attribute-chip-features-vibe i { color: #be185d; }

@media (max-width: 640px) {
  .pto-business-attribute-list {
    gap: 6px;
  }

  .pto-business-attribute-chip {
    min-height: 26px;
    padding: 4px 7px;
    font-size: 0.82rem;
  }
}

.pto-business-promotions-card .bws-card-body {
  padding: 16px;
}

.pto-business-promo-list {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.pto-flyer-btn {
  gap: 6px;
}

.pto-flyer-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #8a6508;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.pto-business-promo-coupon {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(242, 184, 75, 0.45);
  border-radius: 8px;
  background: linear-gradient(135deg, #fffaf0 0%, #fff 55%, #f8fbff 100%);
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.08);
}

.pto-business-promo-coupon::before,
.pto-business-promo-coupon::after {
  content: "";
  position: absolute;
  right: 112px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bws-bg, #fff);
  border: 1px solid rgba(242, 184, 75, 0.45);
}

.pto-business-promo-coupon::before {
  top: -10px;
}

.pto-business-promo-coupon::after {
  bottom: -10px;
}

.pto-business-promo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f2b84b, #d97706);
  color: #fff;
  font-size: 1.2rem;
}

.pto-business-promo-mark img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  background: #fff;
}

.pto-business-promo-content {
  min-width: 0;
  padding: 12px 0;
}

.pto-business-promo-kicker {
  color: #8a6508;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pto-business-promo-content h3 {
  margin: 2px 0 4px;
  color: var(--pto-navy);
  font-size: 1.05rem;
  line-height: 1.2;
}

.pto-business-promo-business {
  display: inline-flex;
  margin-bottom: 5px;
  color: var(--bws-primary);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.pto-business-promo-business:hover {
  text-decoration: underline;
}

.pto-business-promo-content p {
  margin: 0;
  color: var(--bws-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.pto-business-promo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
  color: #5f6877;
  font-size: 0.76rem;
  font-weight: 650;
}

.pto-business-promo-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pto-business-promo-action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-left: 1px dashed rgba(138, 101, 8, 0.35);
}

.pto-business-promo-code {
  min-width: 92px;
  padding: 6px 8px;
  border: 1px dashed rgba(138, 101, 8, 0.45);
  border-radius: 6px;
  background: #fff;
  text-align: center;
}

.pto-business-promo-code span {
  display: block;
  color: var(--bws-muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pto-business-promo-code strong {
  display: block;
  color: var(--pto-navy);
  font-size: 0.9rem;
  line-height: 1.1;
  word-break: break-word;
}

@media (max-width: 640px) {
  .pto-business-promotions-card .bws-card-body {
    padding: 14px;
  }

  .pto-business-promo-coupon {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }

  .pto-business-promo-coupon::before,
  .pto-business-promo-coupon::after {
    display: none;
  }

  .pto-business-promo-content {
    padding: 10px 10px 0 0;
  }

  .pto-business-promo-action {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-left: 0;
    border-top: 1px dashed rgba(138, 101, 8, 0.35);
    padding: 10px;
  }
}

.pto-star-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  /* Real "★" text characters (core/business_reviews.php), not an icon-font glyph — needs a
     genuinely AA-compliant color on their light background, not the bright hero-only gold. */
  color: var(--bws-primary);
  letter-spacing: 1px;
  line-height: 1;
}
.pto-star-rating-empty { color: #6b6b6b; }

.pto-star-input {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.pto-star-input label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  cursor: pointer;
}

.pto-review-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.pto-review-summary-score {
  text-align: center;
  flex: none;
}
.pto-review-summary-score strong {
  display: block;
  font-size: 2.2rem;
  line-height: 1;
  font-family: var(--pto-font-serif, inherit);
}
.pto-review-bars {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pto-review-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--bws-text-muted, #777);
}
.pto-review-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(120, 120, 120, 0.14);
  overflow: hidden;
}
.pto-review-bar-fill {
  height: 100%;
  background: var(--pto-gold);
  border-radius: 999px;
}

.pto-review-card {
  border-bottom: 1px solid var(--bws-border-color, rgba(0, 0, 0, 0.08));
  padding: 16px 0;
}
.pto-review-card:last-child { border-bottom: none; }
.pto-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pto-review-response {
  margin-top: 12px;
  margin-left: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--pto-gold-soft);
}
.pto-review-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.82rem;
}
.pto-review-actions button {
  background: none;
  border: none;
  padding: 0;
  color: var(--bws-text-muted, #777);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pto-review-actions button.pto-helpful-active {
  color: var(--bws-primary); /* real text on a light background — see --bws-primary's own contrast note */
  font-weight: 700;
}

/* --- Weekly hours editor (business-edit.php) — deliberately NOT .bws-form-row, which is a
   strict 2-column grid and mangles a row with this many independent controls. --- */
.pto-hours-edit-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bws-border-color, rgba(0, 0, 0, 0.08));
}
.pto-hours-edit-row:last-child { border-bottom: none; }
.pto-hours-edit-day {
  flex: 0 0 90px;
}
.pto-hours-edit-flag {
  flex: none;
  white-space: nowrap;
}
.pto-hours-edit-periods {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 240px;
}
.pto-hours-edit-period {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pto-hours-edit-period .bws-input {
  width: auto;
  max-width: 130px;
}
.pto-hours-edit-period[hidden] {
  display: none;
}
.pto-hours-edit-add {
  background: none;
  border: none;
  padding: 0;
  color: var(--bws-primary); /* real link-styled button text on a light form background — see --bws-primary's own contrast note */
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .pto-hours-edit-row { flex-direction: column; align-items: flex-start; }
  .pto-hours-edit-periods { width: 100%; }
}

.pto-hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--bws-border-color, rgba(0, 0, 0, 0.08));
  font-size: 0.9rem;
}
.pto-hours-row:last-child { border-bottom: none; }
.pto-hours-row-today { font-weight: 700; }

@media (max-width: 640px) {
  .pto-review-summary { flex-direction: column; align-items: flex-start; }
  .pto-review-response { margin-left: 0; }
}

/* --- Install banner design picker (4 presets — see pto_render_banner_design_picker) ------ */
.pto-banner-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}
.pto-banner-picker-option {
  border: 2px solid var(--bws-border-color, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s ease;
}
.pto-banner-picker-option:hover { border-color: var(--pto-gold); }
.pto-banner-picker-option-active {
  border-color: var(--pto-gold);
  background: var(--pto-gold-soft);
}
.pto-banner-picker-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pto-banner-picker-preview {
  position: relative;
  height: 44px;
  border-radius: 8px;
  background: #e5e7eb;
  overflow: hidden;
  flex: none;
}
.pto-banner-picker-preview span {
  position: absolute;
  background: var(--pto-navy);
  border-radius: 4px;
}
.pto-banner-picker-preview-bottom_bar span:first-child { left: 8%; right: 8%; bottom: 6px; height: 14px; border-radius: 6px; }
.pto-banner-picker-preview-bottom_bar span:last-child { display: none; }
.pto-banner-picker-preview-top_bar span:first-child { left: 8%; right: 8%; top: 6px; height: 14px; border-radius: 6px; }
.pto-banner-picker-preview-top_bar span:last-child { display: none; }
.pto-banner-picker-preview-floating_card span:first-child { right: 6px; bottom: 6px; width: 60%; height: 26px; border-radius: 8px; }
.pto-banner-picker-preview-floating_card span:last-child { display: none; }
.pto-banner-picker-preview-minimal_button span:first-child { right: 8px; bottom: 8px; width: 34%; height: 12px; border-radius: 999px; }
.pto-banner-picker-preview-minimal_button span:last-child { display: none; }

.pto-update-toast[hidden] {
  display: none;
}

/* --- Custom tab items: List display (see pto_custom_tabs.items_layout, core/custom_tabs.php) —
   a full-width stacked alternative to the product-style bws-grid-3 card grid, for policies and
   other long-form text that looked cramped forced into one column of a 3-across grid. Every
   item here is its own accordion (.bws-faq-item wrapping .bws-faq-answer.pto-tab-item-doc) —
   .pto-tab-item-list itself needs no layout rule of its own (the outer .bws-faq class it's
   paired with in the markup already stacks its .bws-faq-items with a grid+gap). Critically,
   .pto-tab-item-doc must NOT set `display` unconditionally: it shares its element with
   .bws-faq-answer (display:none by default, shown only via .bws-faq-open), and an unscoped
   `display: flex` here has equal specificity to that vendor rule — whichever rule is later in
   the stylesheet wins a specificity tie, so this one was silently overriding the accordion
   closed state and forcing every item open on page load, regardless of .bws-faq-open. The
   real fix is downstream: .pto-tab-item-doc's `display` is set only once .bws-faq-open applies. */
.pto-tab-item-doc {
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 10px;
  background: #fff;
}
.bws-faq-item.bws-faq-open .pto-tab-item-doc {
  display: flex;
}
.pto-tab-item-doc-thumb {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
}
.pto-tab-item-doc-main {
  flex: 1;
  min-width: 0;
}
.pto-tab-item-doc-title {
  margin: 0 0 6px;
}
.pto-tab-item-doc-body {
  color: var(--bws-muted);
  line-height: 1.65;
}

/* Rich text (TinyMCE-authored item bodies) needs its own normal block/list/heading rendering —
   bws-ui's utility resets otherwise leave <p>/<ul>/<strong> with no visible spacing at all. */
.pto-tab-item-richtext p { margin: 0 0 10px; }
.pto-tab-item-richtext p:last-child { margin-bottom: 0; }
.pto-tab-item-richtext ul, .pto-tab-item-richtext ol { margin: 0 0 10px 1.25em; }
.pto-tab-item-richtext strong { font-weight: 700; }
/* :not(.bws-btn) so this plain-text-link styling never fights a button-shaped link nested in
   rich text content (the optional CTA button, "Download Checklist (PDF)", "Download PDF", ...) —
   without it, this rule's (0,1,1) specificity beats a single-class button rule like
   .pto-richtext-btn's own color (0,1,0), painting the button's own text the same gold as its
   background and making it unreadable. A real reported bug: a page's "Enroll Now" CTA button
   rendered as a solid gold button with invisible gold-on-gold text. */
.pto-tab-item-richtext a:not(.bws-btn) { color: var(--pto-gold, #b8860b); text-decoration: underline; }

/* A visible expand/collapse indicator on every bws-faq accordion (group headers, item-level
   accordions, ordinary FAQ tabs alike) — the vendor component has no visual cue at all besides
   the answer content appearing, which for a short answer (e.g. just one "View" button) is easy
   to miss entirely and reads as "the click did nothing" even though it worked correctly. */
.bws-faq-question {
  position: relative;
  padding-right: 2.75rem;
}
.bws-faq-question::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 400;
  color: var(--bws-muted);
}
.bws-faq-open > .bws-faq-question::after {
  content: "\2212"; /* − */
}

/* --- Image crop modal (pto-image-crop.js) — a self-contained overlay, no bws-modals
   dependency, since the public pages that need it (account.php's avatar/cover upload) don't
   load that CSS module. --- */
.pto-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}
.pto-crop-modal.pto-crop-open {
  display: flex;
}
.pto-crop-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 27, 51, 0.72);
}
.pto-crop-dialog {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.pto-crop-title {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pto-navy);
}
.pto-crop-viewport {
  position: relative;
  overflow: hidden;
  margin: 0 auto 14px;
  background: #111;
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
}
.pto-crop-viewport-circle {
  border-radius: 50%;
}
.pto-crop-viewport:active {
  cursor: grabbing;
}
.pto-crop-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.pto-crop-slider {
  width: 100%;
  max-width: 320px;
  display: block;
  margin: 0 auto 16px;
}
.pto-crop-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* --- Public profile page (profile.php) — Facebook/LinkedIn-style header: full-bleed cover
   banner with the avatar overlapping its bottom edge, rather than a plain inline row. ------ */
.pto-profile-page {
  background: #fff;
}
.pto-profile-cover-band {
  padding: 18px 16px 0;
  background: linear-gradient(135deg, var(--pto-navy) 0%, var(--pto-navy-light) 100%);
}
.pto-profile-cover-shell {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}
.pto-profile-cover {
  aspect-ratio: 25 / 4;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background-color: var(--pto-navy);
  background-image: linear-gradient(135deg, var(--pto-navy) 0%, var(--pto-navy-light) 100%);
  box-shadow: 0 16px 34px rgba(15, 27, 51, 0.22);
}
.pto-profile-cover:has(.pto-profile-cover-img) {
  aspect-ratio: auto;
}
.pto-profile-cover-img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .pto-profile-cover-band {
    padding: 12px 12px 0;
  }
  .pto-profile-cover {
    border-radius: 12px 12px 0 0;
  }
}
.pto-profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: -56px;
  margin-bottom: 24px;
  padding: 0 4px;
}
.pto-profile-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  background: #fff;
  flex: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.pto-profile-avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  color: var(--pto-gold);
  background: var(--pto-navy);
}
.pto-profile-header-text {
  min-width: 0;
  flex: 1;
}
.pto-profile-mobile-summary {
  display: none;
}
/* A flat gray still washes out against a mid-tone cover (teal, gold, a busy photo) — a cover
   can be any color a member uploads, so no single flat text color survives every case. A
   white fill with a dark outline (layered text-shadow + text-stroke as a crisper progressive
   enhancement) reads on top of literally anything behind it, light or dark. */
.pto-profile-header-text h1 {
  font-family: 'Baloo 2', 'Playfair Display', Georgia, serif;
  color: #fff;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.65),
     1px -1px 0 rgba(0, 0, 0, 0.65),
    -1px  1px 0 rgba(0, 0, 0, 0.65),
     1px  1px 0 rgba(0, 0, 0, 0.65),
     0 2px 5px rgba(0, 0, 0, 0.4);
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.5);
}
@media (max-width: 600px) {
  .pto-profile-header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: -28px;
    margin-bottom: 18px;
    padding: 0 10px;
  }
  .pto-profile-avatar {
    width: 82px;
    height: 82px;
    border-width: 3px;
  }
  .pto-profile-header-text {
    flex: 1;
    min-width: 0;
    padding-top: 32px;
  }
  .pto-profile-header-text h1 {
    color: var(--pto-navy);
    font-size: 1.35rem;
    line-height: 1.1;
    text-shadow: none;
    -webkit-text-stroke: 0;
    overflow-wrap: anywhere;
  }
  .pto-profile-summary {
    display: none;
  }
  .pto-profile-mobile-summary {
    display: block;
    font-size: 0.88rem;
    line-height: 1.25;
  }
  .pto-profile-header-text .bws-btn {
    margin-top: 7px !important;
    padding: 6px 10px;
    font-size: 0.82rem;
  }
}

/* Two-column body: a narrower left sidebar for at-a-glance relationships (roles, board seats,
   general About), a wider right column for the actual detailed content (teaching narrative,
   business listings) — replaces the old single stacked-card layout, which read as one long
   undifferentiated block once a teacher's About Me content was added. */
.pto-profile-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}
.pto-profile-aside,
.pto-profile-main {
  min-width: 0;
}
.pto-profile-aside .bws-card,
.pto-profile-main .bws-card {
  background: #fff;
}
.pto-profile-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.1);
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.08);
}
.pto-profile-card .bws-card-body {
  padding: 16px;
}
.pto-profile-card > .bws-card-body + .bws-card-body {
  border-top: 1px solid rgba(15, 27, 51, 0.08);
}
.pto-profile-section-body {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.72), #fff);
}
.pto-profile-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pto-profile-section-head .pto-about-heading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.pto-profile-card .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--pto-navy);
}
.pto-section-label-img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid rgba(242, 184, 75, 0.55);
  box-shadow: 0 4px 10px rgba(15, 27, 51, 0.1);
}
.pto-profile-coach-team-link {
  display: inline-flex;
  margin: -2px 0 10px;
  color: var(--pto-navy, #0f1b33);
  font-weight: 900;
  text-decoration: none;
}
.pto-profile-coach-team-link:hover {
  color: var(--bws-primary, #9d174d);
  text-decoration: underline;
}
.pto-profile-coach-sidebar-card .pto-section-label {
  margin-bottom: 6px;
}
.pto-profile-coach-sidebar-card .pto-profile-coach-team-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 0 10px;
  padding: 5px 9px;
  border: 1px solid rgba(242, 184, 75, 0.4);
  border-radius: 999px;
  background: rgba(255, 248, 230, 0.88);
  color: var(--pto-navy, #0f1b33);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}
.pto-profile-coach-sidebar-card .pto-volreq-ad-wrap {
  margin-bottom: 0;
}
.pto-profile-coach-sidebar-card .pto-volreq-ad-card {
  min-height: 0;
  display: block;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, rgba(255, 246, 217, 0.94));
}
.pto-profile-coach-sidebar-card .pto-volreq-ad-card::after {
  right: -18px;
  bottom: -18px;
  width: 72px;
  height: 72px;
}
.pto-profile-coach-sidebar-card .pto-volreq-ad-image {
  position: static;
  display: block;
  width: min(208px, calc(100% + 8px));
  max-width: 200px;
  height: min(200px, calc(100vw - 64px));
  margin: 10px auto 0;
  object-fit: cover;
  object-position: center;
  clip-path: inset(0 4px);
  background: #fff;
  border-bottom: 0;
}
.pto-profile-coach-sidebar-card .pto-volreq-ad-body {
  padding: 11px 12px 12px;
}
.pto-profile-coach-sidebar-card .pto-volreq-ad-kicker {
  max-width: 100%;
  white-space: normal;
  line-height: 1.2;
}
.pto-profile-coach-sidebar-card .pto-volreq-ad-title {
  white-space: normal;
  font-size: 1rem;
}
.pto-profile-coach-sidebar-card .pto-volreq-ad-cta {
  margin-top: 6px;
}
.pto-profile-card .pto-info-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 8px;
  background: #fff;
}
.pto-profile-card .pto-info-row:last-child {
  margin-bottom: 0;
}
.pto-profile-card .pto-info-row a {
  color: var(--pto-navy);
  font-weight: 700;
  text-decoration: none;
}
.pto-profile-card .pto-info-row a:hover {
  color: var(--bws-primary);
  text-decoration: underline;
}
.pto-profile-role-row p {
  margin: 0;
  color: var(--pto-navy);
  line-height: 1.4;
}
.pto-profile-about-roles {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.pto-profile-bio-readmore + .pto-profile-about-roles,
.pto-profile-bio-text + .pto-profile-about-roles {
  margin-top: 12px;
}
.pto-profile-bio-text {
  margin: 0;
  padding: 10px 11px;
  border-left: 4px solid var(--pto-gold);
  border-radius: 8px;
  background: #fff;
  color: var(--pto-navy);
  line-height: 1.5;
  white-space: pre-line;
}
.pto-profile-bio-readmore {
  margin: 0;
}
.pto-profile-bio-readmore > summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.pto-profile-bio-readmore > summary::-webkit-details-marker {
  display: none;
}
.pto-profile-bio-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.pto-profile-bio-full {
  display: none;
  margin-top: 10px;
}
.pto-profile-bio-readmore[open] .pto-profile-bio-preview {
  display: none;
}
.pto-profile-bio-readmore[open] .pto-profile-bio-full {
  display: block;
}
.pto-profile-readmore-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: #8a6508;
  font-size: 0.84rem;
  font-weight: 800;
}
.pto-profile-readmore-label::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  font-size: 0.76rem;
}
.pto-profile-readmore-less {
  display: none;
}
.pto-profile-bio-readmore[open] .pto-profile-readmore-more {
  display: none;
}
.pto-profile-bio-readmore[open] .pto-profile-readmore-less {
  display: inline;
}
.pto-profile-bio-readmore[open] .pto-profile-readmore-label::after {
  content: "\F286";
}
.pto-profile-mini-list {
  display: grid;
  gap: 8px;
}
.pto-profile-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 8px;
  background: #fff;
  color: var(--pto-navy);
  font-weight: 700;
}
.pto-profile-stat-row i {
  color: #8a6508;
}
.pto-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.pto-profile-header-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(100%, 760px);
  margin-top: 10px;
}
.pto-profile-header-badges .pto-profile-badges {
  flex: 1;
  flex-wrap: nowrap;
  min-width: 0;
  margin-top: 0;
  padding: 2px 4px 12px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.pto-profile-header-badges .pto-profile-badge {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.pto-profile-header-badges .pto-profile-points {
  flex: none;
  margin-left: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.08);
  opacity: 1;
}
.pto-profile-badge-showcase {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: -4px 0 24px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 184, 75, 0.1));
  box-shadow: 0 14px 34px rgba(15, 27, 51, 0.09);
  overflow: visible;
}
.pto-profile-badge-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pto-profile-badge-showcase-head .pto-profile-points {
  flex: none;
  margin-left: 0;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.08);
  opacity: 1;
}
.pto-profile-badge-slider-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.pto-profile-badge-showcase-single .pto-profile-badge-slider-row {
  display: block;
}
.pto-profile-badge-slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(15, 27, 51, 0.12);
  border-radius: 999px;
  background: var(--pto-navy, #0f1b33);
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.18);
  cursor: pointer;
}
.pto-profile-badge-slide-btn:hover,
.pto-profile-badge-slide-btn:focus-visible {
  background: #243756;
  outline: 3px solid var(--pto-gold, #f2b84b);
  outline-offset: 2px;
}
.pto-profile-badge-slider-viewport {
  min-width: 0;
  padding: 4px 2px 10px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pto-profile-badge-slider-viewport::-webkit-scrollbar {
  display: none;
}
.pto-profile-badge-slider-viewport:focus-visible {
  outline: 3px solid var(--pto-gold, #f2b84b);
  outline-offset: 3px;
  border-radius: 12px;
}
.pto-profile-badge-slider-track {
  display: flex;
  gap: 14px;
  min-width: max-content;
}
.pto-profile-badge-showcase-single .pto-profile-badge-slider-viewport {
  padding-right: 0;
  padding-left: 0;
  overflow: visible;
}
.pto-profile-badge-showcase-single .pto-profile-badge-slider-track {
  justify-content: center;
  min-width: 0;
}
.pto-profile-badge-showcase .pto-profile-badge {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  border-radius: 18px;
  scroll-snap-align: center;
}
.pto-profile-badge-showcase .pto-profile-badge-img img {
  width: 72px;
  height: 72px;
}
.pto-profile-badge-showcase .pto-profile-badge > i {
  font-size: 2.2rem;
}
.pto-profile-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(242, 184, 75, 0.42);
  border-radius: 14px;
  background: linear-gradient(135deg, #fff, rgba(242, 184, 75, 0.18));
  color: var(--pto-navy, #0f1b33);
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.08);
  font-weight: 800;
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.pto-profile-badge i {
  color: #8a6508;
}
.pto-profile-badge-img {
  padding: 0;
  background: #fff;
}
.pto-profile-badge-img img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.pto-profile-badge:hover,
.pto-profile-badge:focus-visible,
.pto-profile-badge.pto-profile-badge-open {
  border-color: rgba(15, 118, 110, 0.38);
  background: #e6fffb;
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.14);
  transform: translateY(-1px);
  outline: none;
}
.pto-profile-badge-preview {
  position: absolute;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(270px, calc(100vw - 40px));
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 12px;
  background: #fff;
  color: var(--pto-navy, #0f1b33);
  box-shadow: 0 18px 38px rgba(15, 27, 51, 0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: left;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.pto-profile-badge-preview-image,
.pto-profile-badge-preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(242, 184, 75, 0.18), rgba(15, 118, 110, 0.1));
  box-shadow: inset 0 0 0 1px rgba(15, 27, 51, 0.08);
}
.pto-profile-badge-preview-image img,
.pto-profile-badge-preview-image img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 16px rgba(15, 27, 51, 0.12);
}
.pto-profile-badge-preview-icon i,
.pto-profile-badge-preview-icon i {
  color: #8a6508;
  font-size: 2rem;
}
.pto-profile-badge-preview strong {
  font-size: 0.92rem;
  line-height: 1.22;
}
.pto-profile-badge-preview small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 800;
}
.pto-profile-badge-preview p {
  margin: 0;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
}
.pto-profile-badge:hover .pto-profile-badge-preview,
.pto-profile-badge:focus-visible .pto-profile-badge-preview,
.pto-profile-badge.pto-profile-badge-open .pto-profile-badge-preview {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.pto-profile-badge-card-layer {
  position: absolute;
  z-index: 60;
  left: 56px;
  top: calc(100% - 8px);
  width: min(430px, calc(100% - 112px));
  pointer-events: none;
}
.pto-profile-badge-showcase-single .pto-profile-badge-card-layer {
  left: 50%;
  width: min(360px, calc(100% - 28px));
  transform: translateX(-50%);
}
.pto-profile-badge-card {
  display: none;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 5px 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 12px;
  background: #fff;
  color: var(--pto-navy, #0f1b33);
  box-shadow: 0 14px 30px rgba(15, 27, 51, 0.12);
  text-align: left;
  pointer-events: auto;
}
.pto-profile-badge-card .pto-profile-badge-preview-image,
.pto-profile-badge-card .pto-profile-badge-preview-icon {
  grid-row: span 3;
  width: 64px;
  aspect-ratio: 1;
}
.pto-profile-badge-card .pto-profile-badge-preview-image img {
  width: 50px;
  height: 50px;
}
.pto-profile-badge-card strong {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.2;
}
.pto-profile-badge-card small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 800;
}
.pto-profile-badge-card p {
  min-width: 0;
  margin: 0;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pto-profile-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pto-navy, #0f1b33);
  opacity: 0.75;
}
.pto-profile-points i {
  color: #8a6508;
  font-size: 0.72rem;
}
@media (max-width: 760px) {
  .pto-profile-badge-showcase {
    margin: 0 10px 20px;
    padding: 12px;
  }
  .pto-profile-badge-showcase-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .pto-profile-badge-slider-row {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 8px;
  }
  .pto-profile-badge-slide-btn {
    width: 38px;
    height: 38px;
  }
  .pto-profile-badge-showcase .pto-profile-badge {
    width: 78px;
    height: 78px;
    border-radius: 16px;
  }
  .pto-profile-badge-showcase .pto-profile-badge-img img {
    width: 62px;
    height: 62px;
  }
  .pto-profile-badge-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }
  .pto-profile-badge-card-layer {
    left: 46px;
    width: min(360px, calc(100% - 92px));
    top: calc(100% - 6px);
  }
  .pto-profile-badge-showcase-single .pto-profile-badge-card-layer {
    left: 50%;
    width: min(320px, calc(100% - 24px));
  }
  .pto-profile-badge-card .pto-profile-badge-preview-image,
  .pto-profile-badge-card .pto-profile-badge-preview-icon {
    width: 56px;
  }
  .pto-profile-badge-card .pto-profile-badge-preview-image img {
    width: 44px;
    height: 44px;
  }
  .pto-profile-header-badges {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
  }
  .pto-profile-header-badges .pto-profile-badges {
    width: 100%;
  }
  .pto-profile-header-badges .pto-profile-points {
    font-size: 0.74rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pto-profile-badge,
  .pto-profile-badge-preview {
    transition: none;
  }
}
.pto-badges-promo-card {
  overflow: hidden;
  border: 1px solid rgba(15, 27, 51, 0.08);
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.16), rgba(255, 255, 255, 0.96) 42%),
    #fff;
  box-shadow: 0 18px 38px rgba(15, 27, 51, 0.1);
}
.pto-badges-promo-card .bws-card-body {
  padding: 18px;
}
.pto-badges-promo-card .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 27, 51, 0.08);
  color: var(--pto-navy, #0f1b33);
}
.pto-badges-promo-card .pto-section-label i {
  color: #8a6508;
}
.pto-badges-promo-card .bws-text-muted {
  margin: 0 0 14px;
  color: rgba(15, 27, 51, 0.72);
  line-height: 1.5;
}
.pto-badges-promo-list {
  list-style: none;
  margin: 12px 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pto-badges-promo-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--pto-navy, #0f1b33);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.32;
}
.pto-badges-promo-list li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.18));
  color: #8a6508;
  flex-shrink: 0;
}
.pto-badges-promo-list li:nth-child(3n + 2) i {
  background: rgba(48, 121, 109, 0.12);
  color: #1f6f63;
}
.pto-badges-promo-list li:nth-child(3n) i {
  background: rgba(60, 91, 154, 0.12);
  color: #304f8f;
}
.pto-badges-promo-card .bws-btn {
  border-radius: 999px;
  font-weight: 800;
}
@media (min-width: 760px) {
  .pto-badges-promo-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.pto-profile-business-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.pto-profile-business-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
.pto-profile-business-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 162, 97, 0.18);
  color: #bc6c25;
  font-size: 1.2rem;
}
.pto-profile-business-tile a {
  max-width: 100%;
  color: var(--pto-navy);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.pto-profile-business-tile a:hover {
  color: var(--bws-primary);
  text-decoration: underline;
}
.pto-profile-offers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.pto-profile-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 14px;
  border: 1px dashed rgba(197, 118, 0, 0.38);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 190, 60, 0.16), rgba(255, 255, 255, 0) 52%),
    #fff;
}
.pto-profile-offer-ribbon {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(197, 118, 0, 0.12);
  color: #8a4d00;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pto-profile-offer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pto-profile-offer-head strong {
  display: block;
  color: var(--pto-navy);
  line-height: 1.2;
}
.pto-profile-offer-head a {
  display: inline-block;
  margin-top: 2px;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.pto-profile-offer-logo {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 162, 97, 0.18);
  color: #bc6c25;
}
.pto-profile-offer p {
  margin: 0;
  color: #374151;
  line-height: 1.4;
}
.pto-profile-offer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.pto-profile-offer-meta code {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--pto-navy);
  color: #fff;
  font-weight: 800;
}
.pto-profile-offer-meta span {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 700;
}
.pto-profile-offer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pto-orange), var(--pto-gold));
  color: #111827;
  font-weight: 800;
  text-decoration: none;
}
.pto-profile-offer-link:hover {
  filter: brightness(0.96);
  text-decoration: none;
}
.pto-profile-coach-news-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.pto-profile-coach-news-details summary::-webkit-details-marker {
  display: none;
}
.pto-profile-coach-news-details summary::before {
  content: "\F229";
  font-family: "bootstrap-icons";
  color: var(--pto-navy, #0f1b33);
  font-size: 0.9rem;
}
.pto-profile-coach-news-details[open] summary::before {
  content: "\F235";
}
.pto-profile-coach-news-details .pto-section-label {
  margin-bottom: 0;
  margin-right: auto;
}
.pto-profile-coach-news-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.pto-profile-coach-news-item {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.04);
}
.pto-profile-coach-news-image {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(15, 27, 51, 0.04);
}
.pto-profile-coach-news-image img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
  transition: transform 0.18s ease;
}
.pto-profile-coach-news-image:hover img {
  transform: scale(1.03);
}
.pto-profile-coach-news-title {
  display: inline-flex;
  color: var(--pto-navy, #0f1b33);
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
}
.pto-profile-coach-news-title:hover {
  color: var(--bws-primary, #8a0030);
  text-decoration: underline;
}
.pto-profile-coach-news-item small {
  display: block;
  margin-top: 3px;
  color: rgba(15, 27, 51, 0.58);
  font-size: 0.78rem;
  font-weight: 800;
}
.pto-profile-coach-news-item p {
  margin: 8px 0 0;
  color: rgba(15, 27, 51, 0.78);
  line-height: 1.45;
}
.pto-profile-coach-news-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  color: #945100;
  font-size: 0.84rem;
  font-weight: 900;
  text-decoration: none;
}
.pto-profile-coach-news-more:hover {
  text-decoration: underline;
}
.pto-profile-coach-teams-list {
  display: grid;
  gap: 10px;
}
.pto-profile-coach-team-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff, rgba(255, 248, 230, 0.42));
}
.pto-profile-coach-team-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(242, 184, 75, 0.5);
  border-radius: 12px;
  background: #fff;
  color: var(--pto-navy, #0f1b33);
  font-size: 1.15rem;
  box-shadow: 0 6px 14px rgba(15, 27, 51, 0.08);
}
.pto-profile-coach-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pto-profile-coach-team-row a:not(.bws-btn) {
  color: var(--pto-navy, #0f1b33);
  font-weight: 900;
  text-decoration: none;
}
.pto-profile-coach-team-row a:not(.bws-btn):hover {
  color: var(--bws-primary, #8a0030);
  text-decoration: underline;
}
.pto-profile-coach-team-row p {
  margin: 3px 0 0;
  color: rgba(15, 27, 51, 0.62);
  font-size: 0.86rem;
  line-height: 1.35;
}
@media (max-width: 860px) {
  .pto-profile-body {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .pto-profile-card .bws-card-body {
    padding: 13px;
  }
  .pto-profile-section-head {
    flex-direction: column;
    align-items: stretch;
  }
  .pto-profile-section-head .bws-btn {
    justify-content: center;
  }
  .pto-profile-card .pto-info-row {
    padding: 7px;
  }
  .pto-profile-business-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pto-profile-business-tile {
    padding: 10px 8px;
  }
  .pto-profile-business-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }
  .pto-profile-offers-grid {
    grid-template-columns: 1fr;
  }
  .pto-profile-offer {
    padding: 12px;
  }
  .pto-profile-coach-news-item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
  }
  .pto-profile-coach-news-image img {
    height: 76px;
  }
  .pto-profile-coach-news-item p {
    display: none;
  }
  .pto-profile-coach-team-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pto-profile-coach-team-row .bws-btn {
    grid-column: 1 / -1;
    justify-content: center;
  }
}
@media (max-width: 360px) {
  .pto-profile-business-grid {
    grid-template-columns: 1fr;
  }
}

/* Legal page / standalone page sidebar — reuses .pto-profile-body's own two-column grid (see
   pto_render_link_sidebar(), core/helpers.php); this is just the link-list card's own styling. */
.pto-page-sidebar-card { margin-bottom: 16px; }
.pto-page-sidebar-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pto-page-sidebar-list li { padding: 7px 0; border-bottom: 1px solid var(--bws-border); }
.pto-page-sidebar-list li:last-child { border-bottom: none; }
.pto-page-sidebar-list a { color: var(--bws-text); text-decoration: none; }
.pto-page-sidebar-list a:hover { color: var(--bws-primary); text-decoration: underline; }
.pto-page-sidebar-list strong { color: var(--bws-primary); }

/* Careers page: aggregated district hiring page. The outer list stays as BWS FAQ accordions,
   while the shared per-job accordion renderer remains untouched inside each group. */
.pto-careers-page {
  color: var(--pto-navy, #0f1b33);
}
.pto-careers-back {
  margin: 0 0 12px;
}
.pto-careers-back a {
  color: #6b7280;
  font-weight: 700;
  text-decoration: none;
}
.pto-careers-back a:hover {
  color: var(--bws-primary, #8a6508);
  text-decoration: underline;
}
.pto-careers-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  margin-bottom: 22px;
  padding: 26px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(15, 27, 51, 0.96), rgba(23, 39, 74, 0.94)),
    radial-gradient(circle at 90% 20%, rgba(242, 184, 75, 0.24), transparent 32%);
  color: #fff;
  box-shadow: 0 16px 38px rgba(15, 27, 51, 0.18);
}
.pto-careers-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--pto-gold, #f2b84b);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pto-careers-hero h1 {
  margin: 8px 0 8px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
}
.pto-careers-hero p {
  max-width: 600px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1rem;
}
.pto-careers-stats {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 10px;
}
.pto-careers-stats span {
  display: grid;
  gap: 3px;
  min-width: 108px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pto-careers-stats strong {
  color: var(--pto-gold, #f2b84b);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0;
}
.pto-careers-intro {
  margin-bottom: 18px;
}
.pto-careers-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.pto-careers-section-head p {
  margin: 0;
}
.pto-careers-accordion {
  display: grid;
  gap: 12px;
}
.pto-careers-accordion .pto-careers-group {
  overflow: hidden;
  border: 1px solid rgba(15, 27, 51, 0.1);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.07);
}
.pto-careers-accordion .pto-careers-group > .bws-faq-question {
  width: 100%;
  min-height: 64px;
  padding: 12px 46px 12px 14px;
  border: 0;
  background: linear-gradient(135deg, #fff, #fffaf0);
  color: var(--pto-navy, #0f1b33);
}
.pto-careers-group-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: left;
}
.pto-careers-group-title strong,
.pto-careers-group-title small {
  display: block;
}
.pto-careers-group-title strong {
  font-size: 1rem;
  line-height: 1.2;
}
.pto-careers-group-title small {
  margin-top: 2px;
  color: #5f6b7a;
  font-size: 0.78rem;
  font-weight: 700;
}
.pto-careers-group-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.14));
  color: #8a6508;
  font-size: 1.05rem;
}
.pto-careers-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 999px;
  background: var(--pto-navy, #0f1b33);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 900;
}
.pto-careers-group-link {
  margin: 0 0 12px;
}
.pto-careers-group-link a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--bws-primary, #8a6508);
  font-weight: 800;
  text-decoration: none;
}
.pto-careers-group-link a:hover {
  color: #6f4f04;
  text-decoration: underline;
}
.pto-careers-empty .bws-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
}
.pto-careers-empty i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.14));
  color: #8a6508;
  font-size: 1.25rem;
}
.pto-careers-empty h2,
.pto-careers-empty p {
  margin: 0;
}
.pto-careers-empty h2 {
  font-size: 1.3rem;
}

@media (max-width: 760px) {
  .pto-careers-hero,
  .pto-careers-section-head,
  .pto-careers-empty .bws-card-body {
    align-items: stretch;
    flex-direction: column;
  }
  .pto-careers-hero {
    padding: 20px;
    gap: 16px;
  }
  .pto-careers-hero h1 {
    font-size: 1.85rem;
  }
  .pto-careers-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pto-careers-stats span {
    min-width: 0;
    padding: 11px 12px;
  }
  .pto-careers-section-head {
    gap: 4px;
  }
  .pto-careers-accordion .pto-careers-group > .bws-faq-question {
    min-height: 58px;
    padding-left: 12px;
  }
  .pto-careers-group-title {
    gap: 10px;
  }
  .pto-careers-group-icon {
    width: 34px;
    height: 34px;
  }
}

/* A little color-coding per relationship type on the public profile specifically (Board=navy,
   School&PTO=red, Teaching=purple, Business=orange) instead of every .pto-info-icon reading
   the same flat gold tile — purely decorative, degrades to the normal gold tile on browsers
   without :has() support. */
.pto-profile-aside .pto-info-icon:has(.bi-bank2),
.pto-profile-main .pto-info-icon:has(.bi-bank2) { background: rgba(69, 123, 157, 0.15); color: #457b9d; }
.pto-profile-aside .pto-info-icon:has(.bi-heart-fill),
.pto-profile-main .pto-info-icon:has(.bi-heart-fill) { background: rgba(230, 57, 70, 0.12); color: #e63946; }
.pto-profile-aside .pto-info-icon:has(.bi-mortarboard-fill),
.pto-profile-main .pto-info-icon:has(.bi-mortarboard-fill) { background: rgba(42, 157, 143, 0.14); color: #2a9d8f; }
.pto-profile-main .pto-info-icon:has(.bi-person-workspace) { background: rgba(106, 76, 147, 0.14); color: #6a4c93; }
.pto-profile-main .pto-info-icon:has(.bi-shop) { background: rgba(244, 162, 97, 0.2); color: #bc6c25; }

/* Colorful circular icon badges for section headings on the public profile specifically
   (scoped to .pto-profile-* so the rest of the site's plain .pto-section-label icons, used in
   dense admin/form contexts, are untouched) — turns a flat bootstrap-icon glyph into a small
   "happy" badge instead of plain colored text. */
.pto-profile-aside .pto-section-label i,
.pto-profile-main .pto-section-label i,
.pto-about-heading i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pto-gold);
  color: #fff;
  font-size: 0.7rem;
  vertical-align: middle;
  margin-right: 2px;
}

/* A decorative callout for a teacher's Supply List — icon + two plain action links, no item
   list (kept short and visible instead of buried at the end of a long profile card). */
.pto-supply-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.1), rgba(42, 157, 143, 0.03));
  border: 1px solid rgba(42, 157, 143, 0.25);
}
.pto-supply-callout-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a9d8f;
  color: #fff;
  font-size: 1.2rem;
}
.pto-supply-callout-body {
  flex: 1;
  min-width: 0;
}

.pto-classroom-callout {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -8px;
  padding: 14px 16px;
  border: 1px solid rgba(52, 168, 83, 0.35);
  border-left: 5px solid #34a853;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(251, 188, 4, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(52, 168, 83, 0.12), rgba(66, 133, 244, 0.06));
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.06);
}

.pto-classroom-callout::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4285f4 0 33%, #fbbc04 33% 66%, #ea4335 66%);
  opacity: 0.85;
}

.pto-classroom-callout-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #34a853;
  color: #fff;
  font-size: 1.2rem;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}

.pto-classroom-callout-body {
  flex: 1;
  min-width: 0;
}

.pto-classroom-callout-body strong {
  display: block;
  color: #14532d;
  line-height: 1.2;
}

.pto-classroom-callout-body .bws-text-xs {
  color: #326345;
  margin-top: 2px;
}

.pto-classroom-callout .bws-btn {
  flex: none;
  background: #34a853;
  color: #fff;
  border: 1px solid #2f934a;
}

.pto-classroom-callout .bws-btn:hover {
  background: #2f934a;
  color: #fff;
}

@media (max-width: 640px) {
  .pto-classroom-callout {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pto-classroom-callout .bws-btn {
    width: 100%;
    justify-content: center;
  }
}

/* A labeled sub-section inside the Teaching card (About My Background / My Teaching
   Philosophy / Fun Facts About Me) — visually distinct from the plain info-row above it
   without needing its own nested card. */
.pto-about-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bws-border-color, #e9e5da);
}
.pto-about-section p {
  margin: 0 0 8px;
  line-height: 1.6;
}
.pto-about-section p:last-child {
  margin-bottom: 0;
}
.pto-about-heading {
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--pto-navy);
  margin: 0 0 8px;
}

.pto-teacher-about-card {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 27, 51, 0.05);
}

.pto-teacher-about-card .pto-about-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.pto-profile-teaching-card .pto-info-row {
  align-items: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
}
.pto-teacher-bio-readmore {
  margin-top: 10px;
}
.pto-teacher-bio-readmore > summary {
  display: block;
  list-style: none;
  cursor: pointer;
}
.pto-teacher-bio-readmore > summary::-webkit-details-marker {
  display: none;
}
.pto-teacher-bio-preview,
.pto-teacher-bio-full {
  font-family: var(--pto-font-serif, Georgia, serif);
  color: var(--pto-navy);
  font-size: 1rem;
  line-height: 1.45;
  white-space: pre-line;
}
.pto-teacher-bio-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pto-teacher-bio-full {
  margin: 0;
}
.pto-teacher-bio-readmore[open] .pto-teacher-bio-preview {
  display: none;
}
.pto-teacher-readmore-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: #8a6508;
  font-size: 0.82rem;
  font-weight: 800;
}
.pto-teacher-readmore-label::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  font-size: 0.72rem;
}
.pto-teacher-readmore-less,
.pto-teacher-bio-readmore[open] .pto-teacher-readmore-more {
  display: none;
}
.pto-teacher-bio-readmore[open] .pto-teacher-readmore-less {
  display: inline;
}
.pto-teacher-bio-readmore[open] .pto-teacher-readmore-label::after {
  content: "\F286";
}
.pto-teacher-detail {
  padding: 0;
}
.pto-teacher-detail > summary.pto-about-heading {
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  justify-content: space-between;
}
.pto-teacher-detail > summary.pto-about-heading::-webkit-details-marker {
  display: none;
}
.pto-teacher-detail > summary.pto-about-heading::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  color: #8a6508;
  font-size: 0.82rem;
  margin-left: auto;
}
.pto-teacher-detail[open] > summary.pto-about-heading::after {
  content: "\F286";
}
.pto-teacher-detail > p {
  padding: 0 12px;
}
.pto-teacher-detail > p:last-child {
  padding-bottom: 12px;
}
.pto-profile-teaching-card .pto-cevent-ad-wrap {
  margin: 0 !important;
  padding-top: 0;
  border-top: 0;
}
.pto-profile-teaching-card .pto-teacher-about-card {
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.pto-profile-teaching-card .pto-teacher-about-card:first-of-type {
  margin-top: 14px;
}
.pto-profile-teaching-card .pto-teacher-detail > summary.pto-about-heading {
  padding: 0 0 10px;
}
.pto-profile-teaching-card .pto-teacher-detail > p {
  padding: 0;
}
.pto-profile-teaching-card .pto-teacher-detail > p:last-child {
  padding-bottom: 0;
}
.pto-news-accordion-list {
  display: grid;
  gap: 0;
}
.pto-news-accordion-item {
  border: 0;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}
.pto-news-accordion-item + .pto-news-accordion-item {
  border-top: 1px solid rgba(15, 27, 51, 0.08);
}
.pto-news-accordion-summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  color: var(--pto-navy);
  list-style: none;
}
.pto-news-accordion-summary::-webkit-details-marker {
  display: none;
}
.pto-news-accordion-summary span {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.pto-news-accordion-summary strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pto-news-accordion-summary small {
  color: #6b7280;
  font-size: 0.76rem;
}
.pto-news-accordion-summary i {
  flex: none;
  color: #8a6508;
  transition: transform 0.15s;
}
.pto-news-accordion-item[open] .pto-news-accordion-summary i {
  transform: rotate(180deg);
}
.pto-news-accordion-body {
  border-top: 0;
}
.pto-news-accordion-content {
  padding: 0 0 12px;
}
.pto-news-accordion-content > .bws-flex:first-child:empty {
  display: none;
}
.pto-news-accordion-content p {
  margin-top: 0;
}
.pto-class-news-list {
  display: grid;
  gap: 12px;
}
.pto-class-news-groups {
  gap: 10px;
}
.pto-class-news-group {
  border-color: rgba(15, 27, 51, 0.1);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.05);
}
.pto-class-news-group > .pto-class-news-group-toggle {
  min-height: 54px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 248, 230, 0.78)),
    #fff;
}
.pto-class-news-group-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pto-navy);
  font-weight: 900;
}
.pto-class-news-group-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.22);
  color: #8a6508;
}
.pto-class-news-alert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  margin-right: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 16px rgba(185, 28, 28, 0.18);
}
.pto-class-news-group > .pto-class-news-group-body {
  padding: 12px;
  color: inherit;
  background: #fff;
}
.pto-class-news-group.bws-faq-open > .pto-class-news-group-toggle {
  border-bottom: 1px solid rgba(15, 27, 51, 0.08);
}
.pto-class-news-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.06);
}
.pto-class-news-image {
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  background: #f8f3e6;
}
.pto-class-news-content {
  min-width: 0;
}
.pto-class-news-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.pto-class-news-title-wrap {
  min-width: 0;
}
.pto-class-news-title {
  margin: 0;
  color: var(--pto-navy);
  font-size: 1.02rem;
  line-height: 1.22;
}
.pto-class-news-title a {
  color: inherit;
  text-decoration: none;
}
.pto-class-news-title a:hover {
  color: #8a6508;
  text-decoration: underline;
}
.pto-class-news-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 5px 0 0;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 700;
}
.pto-class-news-excerpt {
  margin: 0 0 12px;
  color: rgba(15, 27, 51, 0.78);
  line-height: 1.45;
}
.pto-class-news-content > .bws-flex:last-child {
  gap: 8px;
  flex-wrap: wrap;
}
.pto-class-news-content .bws-btn {
  min-height: 34px;
}
@media (max-width: 640px) {
  .pto-teacher-bio-preview,
  .pto-teacher-bio-full {
    font-size: 0.96rem;
  }
  .pto-teacher-detail > summary.pto-about-heading {
    padding: 9px 10px;
  }
  .pto-profile-teaching-card .pto-cevent-ad-wrap {
    margin-top: 18px;
    padding-top: 14px;
  }
  .pto-class-news-item {
    grid-template-columns: 1fr;
  }
  .pto-class-news-image {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .pto-class-news-head {
    flex-direction: column;
  }
  .pto-class-news-group > .pto-class-news-group-toggle {
    align-items: flex-start;
    gap: 8px;
  }
  .pto-class-news-alert {
    margin-left: 0;
    margin-right: 24px;
  }
}

/* One category section within a consolidated Directory tab (School Board / Teachers /
   admin-defined departments / Community Members) — a plain top rule between groups, since
   each group already renders its own card grid. */
.pto-department-group {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--bws-border-color, #e9e5da);
}
.pto-department-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* --- Unified Media system (school/PTO/district) — public gallery, lightbox, and video cards.
   The manager's own album-editing grid (.pto-media-manage-*) is shared with pto-admin.css since
   district's manager pages live under /admin while school/PTO's live on the public layout. --- */
.pto-media-manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.pto-media-manage-card {
  position: relative;
  border: 1px solid var(--bws-border);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.pto-media-manage-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.pto-media-cover-badge {
  position: absolute;
  top: 12px;
  left: 12px;
}

/* Public photo grid inside an album's accordion panel — desktop gets a clean multi-column
   grid, tablet narrows it, mobile drops to 2 columns (spec §4). */
.pto-media-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pto-media-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f0ede4;
  cursor: zoom-in;
}
.pto-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.pto-media-thumb:hover img {
  transform: scale(1.05);
}
@media (max-width: 900px) {
  .pto-media-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .pto-media-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* Lightbox overlay (pto-media.js) — same self-contained-overlay approach as the image crop
   modal, no bws-modals dependency. */
.pto-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 27, 51, 0.92);
}
.pto-media-lightbox.pto-media-lightbox-open {
  display: flex;
}
.pto-media-lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 4px;
}
.pto-media-lightbox-caption {
  color: #fff;
  text-align: center;
  margin-top: 12px;
  max-width: 90vw;
}
.pto-media-lightbox-album {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pto-media-lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pto-media-lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}
.pto-media-lightbox-close { top: 16px; right: 16px; }
.pto-media-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.pto-media-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .pto-media-lightbox-prev, .pto-media-lightbox-next { width: 36px; height: 36px; font-size: 1.1rem; }
}

/* Video/social embed cards — a lightweight thumbnail+play facade until clicked (spec §31/§32:
   never initialize dozens of heavy provider players on page load). */
.pto-media-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.pto-media-video-card {
  border: 1px solid var(--bws-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.pto-media-video-play {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #0f1b33;
}
.pto-media-aspect-9x16 .pto-media-video-play { aspect-ratio: 9 / 16; }
.pto-media-aspect-auto .pto-media-video-play { aspect-ratio: 4 / 3; }
.pto-media-video-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pto-media-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  gap: 6px;
}
.pto-media-video-placeholder i { font-size: 2rem; }
.pto-media-play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.4rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.15);
}
.pto-media-video-card.pto-media-loaded .pto-media-video-play { display: none; }
.pto-media-video-embed-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.pto-media-aspect-9x16 .pto-media-video-embed-container { aspect-ratio: 9 / 16; }
.pto-media-aspect-auto .pto-media-video-embed-container { aspect-ratio: auto; }
.pto-media-video-embed-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Video lightbox (pto-media.js) — clicking a video/social card's play button opens the real
   embed here, big and centered, instead of expanding inline inside the small grid card. Reuses
   the exact same .pto-media-video-embed-container class as the (now-unused-until-opened) inline
   slot, so the existing .pto-media-aspect-9x16/.pto-media-aspect-auto descendant rules above
   apply here too — the lightbox only needs to add its own sizing/backdrop/close-button chrome. */
.pto-media-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 27, 51, 0.92);
  padding: 56px 16px;
}
.pto-media-video-lightbox.pto-media-lightbox-open {
  display: flex;
}
.pto-media-video-lightbox-inner {
  width: min(94vw, 960px);
  max-height: 86vh;
}
.pto-media-video-lightbox-inner.pto-media-aspect-9x16 {
  width: min(70vw, 420px);
}
.pto-media-video-lightbox-inner .pto-media-video-embed-container {
  max-height: 86vh;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
.pto-media-video-lightbox-inner.pto-media-aspect-auto .pto-media-video-embed-container {
  background: #fff;
  display: flex;
  justify-content: center;
  overflow-y: auto;
}
.pto-media-video-meta {
  padding: 10px 12px;
}

/* Cookie consent banner + preferences modal (pto-cookie-consent.js). Self-contained overlay
   style, same convention as the crop modal / media lightbox — no bws-modals dependency. */
.pto-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 3500;
  background: var(--pto-navy);
  color: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
}
.pto-cookie-banner p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}
.pto-cookie-banner a {
  color: var(--pto-gold);
  text-decoration: underline;
}
.pto-cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}
.pto-cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 27, 51, 0.75);
  padding: 16px;
}
.pto-cookie-modal-card {
  background: #fff;
  color: var(--bws-text, #1a1a1a);
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
}
.pto-cookie-modal-cat {
  border: 1px solid var(--bws-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.pto-cookie-modal-cat label {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
.pto-cookie-modal-cat p {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--bws-muted);
}
@media (max-width: 640px) {
  /* Tighter than the desktop card — three full-size buttons each stacked on their own full-width
     row (the un-narrowed default) ate most of a small phone's viewport. Accept/Reject stay as a
     real two-up button row; Manage Preferences drops to a plain underlined text link beneath
     them instead of a third bordered button, since it's the least-used of the three actions. */
  .pto-cookie-banner { flex-direction: column; align-items: stretch; padding: 14px 16px; gap: 10px; }
  .pto-cookie-banner p { font-size: 0.85rem; }
  .pto-cookie-banner-actions { justify-content: stretch; flex-wrap: nowrap; }
  .pto-cookie-banner-actions .bws-btn { flex: 1; padding-top: 8px; padding-bottom: 8px; }
  .pto-cookie-banner-actions #ptoCookieManage {
    flex: 0 0 100%;
    order: 3;
    border: none;
    background: none;
    text-decoration: underline;
    padding: 2px 0 0;
    min-height: 0;
    box-shadow: none;
  }
}

/* Standalone Pages: School/PTO secondary local menu (pto_render_local_menu(), core/pages.php) —
   a plain horizontal bar under the org's cover/header, using the site's existing .bws-dropdown
   component (already loaded/wired site-wide for the language switcher) for any group with
   children, so no new dropdown JS was needed. Only ever rendered when there's at least one real
   item — see pto_render_local_menu()'s own empty-string return. */
.pto-local-menu {
  background: #fff;
  border-bottom: 1px solid var(--bws-border);
}
.pto-local-menu-inner {
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pto-local-menu-link {
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--bws-text, #1a1a1a);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pto-local-menu-link:hover {
  color: var(--bws-primary);
}
.pto-local-menu-item .bws-dropdown-toggle {
  padding: 14px 16px;
}
/* The vendor default (.bws-dropdown-menu, bws-dropdowns.css) is only 12rem wide with no
   white-space rule, which wrapped longer local-menu labels (e.g. "Concussion-Parent") onto a
   second line under their own icon. Widened + kept on one line here only, so every OTHER
   .bws-dropdown-menu in the app (language switcher, account menu, etc.) keeps the vendor's own
   default sizing. */
.pto-local-menu-item .bws-dropdown-menu {
  min-width: 220px;
  width: max-content;
  max-width: 320px;
}
.pto-local-menu-item .bws-dropdown-item {
  white-space: nowrap;
}
/* .pto-local-menu-inner's own overflow-x: auto (for horizontal scroll on narrow screens) forces
   the browser to also clip the Y axis (per the CSS overflow spec: mixing 'visible' with a
   non-visible value on the other axis computes both to 'auto') — without this, an open
   submenu's dropdown got clipped right at the bar's own height, making it look like the
   dropdown was hidden/"blocked" behind whatever content sat below the bar (e.g. the page's own
   cover image). Suspending the clip only while a dropdown is actually open keeps the horizontal
   scroll behavior intact the rest of the time. */
.pto-local-menu-inner:has(.bws-dropdown-open) {
  overflow: visible;
}
@media (max-width: 640px) {
  .pto-local-menu-link { padding: 12px 12px; font-size: 0.85rem; }
}

/* pto_render_social_icon_row() — Website + social platforms as icon-only circular buttons, side
   by side, no visible label text (school.php/pto.php's Contact/Info card). */
.pto-social-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}
.pto-social-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bws-surface, #f4f4f5);
  color: var(--bws-text, #1a1a1a);
  font-size: 1.05rem;
  text-decoration: none;
  border: 1px solid var(--bws-border);
  transition: background 0.15s, color 0.15s;
}
.pto-social-icon-btn:hover {
  background: var(--bws-primary);
  color: #fff;
}
.pto-social-icon-facebook { color: #1877f2; }
.pto-social-icon-instagram { color: #c13584; }
.pto-social-icon-x { color: #111827; }
.pto-social-icon-youtube { color: #ff0000; }
.pto-social-icon-tiktok { color: #111827; }
.pto-social-icon-linkedin { color: #0a66c2; }
.pto-social-icon-website { color: var(--bws-primary); }
.pto-social-icon-facebook:hover { background: #1877f2; }
.pto-social-icon-instagram:hover { background: #c13584; }
.pto-social-icon-x:hover { background: #111827; }
.pto-social-icon-youtube:hover { background: #ff0000; }
.pto-social-icon-tiktok:hover { background: #111827; }
.pto-social-icon-linkedin:hover { background: #0a66c2; }
.pto-social-icon-website:hover { background: var(--bws-primary); }

/* pto_render_list_intro() (core/custom_tabs.php) — optional title/rich text/image shown before
   an Items List tab/page's actual items. Nothing renders when none of it is set. */
.pto-list-intro {
  margin-bottom: 20px;
}
.pto-list-intro-title {
  margin: 0 0 8px;
}
.pto-list-intro-body {
  margin-bottom: 12px;
}
.pto-list-intro-figure {
  margin: 0 0 16px;
}
.pto-list-intro-img {
  max-width: 100%;
  width: 100%;
  max-height: 320px;
  height: auto;
  object-fit: contain;
  object-position: left center;
  border-radius: 10px;
  display: block;
}
.pto-list-intro-caption {
  font-size: 0.85rem;
  color: var(--bws-muted);
  margin-top: 6px;
}
.pto-shop-list-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(260px, 1.25fr);
  grid-template-areas:
    "copy image";
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
  padding: 16px;
  border: 1px solid rgba(242, 184, 75, 0.34);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 18%, rgba(242, 184, 75, 0.24), transparent 34%),
    linear-gradient(135deg, #fffaf0 0%, #fff 56%, #f8fafc 100%);
  box-shadow: 0 16px 42px rgba(15, 27, 51, 0.09);
}
.pto-shop-list-intro .pto-list-intro-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  padding: 4px;
}
.pto-shop-list-intro .pto-list-intro-title {
  margin: 0;
  padding: 0;
  color: var(--pto-navy, #0f1b33);
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.1;
}
.pto-shop-list-intro .pto-list-intro-title::before {
  content: "Fundraiser Shop";
  display: flex;
  align-items: center;
  width: fit-content;
  margin: 0 0 10px;
  padding: 6px 10px;
  border: 1px solid rgba(184, 134, 11, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #8a6508;
  font-family: var(--pto-font-sans, Arial, sans-serif);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pto-shop-list-intro .pto-list-intro-body {
  margin: 0;
  padding: 0;
  color: #475569;
  font-size: 0.98rem;
  line-height: 1.58;
}
.pto-shop-list-intro .pto-list-intro-figure {
  grid-area: image;
  margin: 0;
  min-height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: #0f1b33;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.pto-shop-list-intro .pto-list-intro-img {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
.pto-shop-list-intro .pto-list-intro-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (max-width: 760px) {
  .pto-shop-list-intro {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "copy";
    gap: 12px;
    padding: 12px;
  }
  .pto-shop-list-intro .pto-list-intro-title {
    font-size: 1.35rem;
  }
  .pto-shop-list-intro .pto-list-intro-body {
    font-size: 0.92rem;
  }
  .pto-shop-list-intro .pto-list-intro-figure,
  .pto-shop-list-intro .pto-list-intro-img {
    min-height: 160px;
  }
}

/* core/helpers.php's pto_404() — the shared "this doesn't exist" page every public controller
   uses instead of a bare unstyled "Not found." string. */
.pto-404-section {
  text-align: center;
  padding: 80px 16px 100px;
  max-width: 560px;
}
.pto-404-code {
  font-size: 5.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--pto-gold, #f2b84b);
  opacity: .55;
  margin-bottom: 4px;
}
.pto-404-section h1 {
  margin: 0 0 12px;
}
.pto-404-message {
  margin: 0 auto 28px;
  max-width: 440px;
}
.pto-404-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
@media (max-width: 480px) {
  .pto-404-code { font-size: 4rem; }
}
.pto-404-featured {
  padding: 32px 16px 70px;
}
.pto-404-hero {
  max-width: 520px;
  margin: 0 auto 18px;
}
.pto-404-copy h1 {
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: .96;
  margin: 10px 0 14px;
}
.pto-404-copy p {
  font-size: 1.08rem;
  max-width: 560px;
}
.pto-404-image-wrap {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  transition: transform .18s ease;
}
.pto-404-image-wrap:hover {
  transform: translateY(-2px);
}
.pto-404-image {
  display: block;
  width: 100%;
  height: auto;
}
.pto-404-widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.pto-404-widget .bws-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}
.pto-404-widget-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.pto-404-widget-head h2 {
  font-size: 1.12rem;
  margin: 0 0 4px;
}
.pto-404-widget-head p {
  color: var(--bws-muted);
  font-size: .92rem;
  margin: 0;
}
.pto-404-widget-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgba(242, 184, 75, .18);
  color: var(--pto-navy, #0f1b33);
}
.pto-404-link-list,
.pto-404-event-list {
  display: grid;
  gap: 8px;
}
.pto-404-link-list a,
.pto-404-event-list a {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--bws-border);
}
.pto-404-link-list a:hover span,
.pto-404-event-list a:hover strong {
  color: var(--pto-gold, #b8860b);
}
.pto-404-link-list small,
.pto-404-event-list span,
.pto-404-event-list small {
  color: var(--bws-muted);
  font-size: .84rem;
}
.pto-404-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f7f2e6;
  color: var(--pto-navy, #0f1b33);
  border: 1px solid rgba(15, 27, 51, .08);
}
.pto-404-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pto-404-thumb i {
  font-size: 1.35rem;
  color: var(--pto-gold, #b8860b);
}
.pto-404-item-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pto-404-item-copy > span,
.pto-404-item-copy > strong,
.pto-404-item-copy > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pto-404-widget .bws-btn {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 980px) {
  .pto-404-widget-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .pto-404-featured {
    padding-top: 28px;
  }
  .pto-404-actions {
    justify-content: flex-start;
  }
}

/* core/custom_tabs.php's pto_render_custom_tab_richtext() — a Rich Text tab/page's own optional
   checklist-style bullets (checklist_mode ON) plus its optional button/PDF, the Rich Text
   equivalents of pto_render_list_intro()'s image/link for an Items List. Only the bullet MARKER
   changes — the list stays real <ul><li> markup, so it's unaffected by anything else here. */
.pto-richtext-checklist ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 16px;
}
.pto-richtext-checklist ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.pto-richtext-checklist ul li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: #1c7a4d;
  font-weight: 700;
  font-size: 1.05em;
}
/* The checklist-PDF / CTA / attached-PDF buttons (up to 3) share one row — side by side on
   desktop, each stacking full-width once they no longer fit (mobile) rather than each forcing
   its own line regardless of screen size. */
.pto-richtext-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
}
@media (max-width: 640px) {
  .pto-richtext-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .pto-richtext-actions .bws-btn {
    justify-content: center;
  }
}
/* The optional call-to-action button — plain solid gold with black text (no gradient, no white
   text) since this sits inside plain written content, not alongside other gold-gradient CTAs. */
.pto-richtext-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .65rem 1.1rem;
  border-radius: var(--bws-radius-md, 10px);
  background: var(--pto-gold, #f2b84b);
  color: #000;
  font-weight: 650;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter .15s ease, transform .15s ease;
}
.pto-richtext-btn:hover {
  filter: brightness(0.94);
  color: #000;
  transform: translateY(-1px);
}

/* core/news_categories.php's pto_render_news_card_grid() 'list' layout — a single-column
   "blog list" (Teacher News on profile.php) instead of the 3-up grid (School/PTO/District news),
   since a 3-column grid squeezed a post's excerpt into an uncomfortably thin card in the
   narrower column that section usually lives in. */
.pto-news-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pto-news-list-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
}
.pto-news-list-image {
  width: 140px;
  min-width: 140px;
  height: auto;
  object-fit: cover;
}
@media (max-width: 520px) {
  .pto-news-list-item {
    flex-direction: column;
  }
  .pto-news-list-image {
    width: 100%;
    min-width: 0;
    max-height: 160px;
  }
}

/* contact.php — scoped school/PTO/district contact page. */
.pto-contact-page {
  padding: 42px 16px;
  background:
    linear-gradient(180deg, rgba(15, 27, 51, 0.035), rgba(255, 255, 255, 0) 220px),
    #fff;
}
.pto-contact-shell {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: 24px;
  align-items: start;
}
.pto-contact-intro {
  position: sticky;
  top: 18px;
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(15, 27, 51, 0.1);
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 12%, rgba(242, 184, 75, 0.18), transparent 28%),
    linear-gradient(135deg, #fff, rgba(249, 251, 255, 0.98));
  box-shadow: 0 14px 34px rgba(15, 27, 51, 0.08);
}
.pto-contact-intro h1 {
  margin: 8px 0 10px;
  color: var(--pto-navy);
  line-height: 1.08;
}
.pto-contact-intro > p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}
.pto-contact-detail-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.pto-contact-detail-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 10px;
  background: #fff;
}
.pto-contact-detail-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(242, 184, 75, 0.16);
  color: #8a6508;
}
.pto-contact-detail-icon:has(.bi-telephone-fill) {
  background: rgba(42, 157, 143, 0.14);
  color: #157263;
}
.pto-contact-detail-icon:has(.bi-envelope-fill) {
  background: rgba(26, 115, 232, 0.12);
  color: #1a73e8;
}
.pto-contact-detail-icon:has(.bi-geo-alt-fill) {
  background: rgba(231, 76, 60, 0.12);
  color: #c0392b;
}
.pto-contact-detail-item small {
  display: block;
  margin-bottom: 1px;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pto-contact-detail-item a {
  color: var(--pto-navy);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pto-contact-detail-item a:hover {
  color: #8a6508;
  text-decoration: underline;
}
.pto-contact-card {
  overflow: hidden;
  border-color: rgba(15, 27, 51, 0.1);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 27, 51, 0.08);
}
.pto-contact-card .bws-card-body {
  padding: 22px;
}
.pto-contact-card .bws-form {
  display: grid;
  gap: 14px;
}
.pto-contact-card .bws-form-group {
  margin-bottom: 0;
}
.pto-contact-card .bws-input,
.pto-contact-card .bws-textarea {
  min-height: 44px;
}
.pto-contact-success {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 20px;
  text-align: center;
  color: var(--pto-navy);
}
.pto-contact-success i {
  color: #2a9d8f;
  font-size: 2.1rem;
}
.pto-contact-success strong {
  font-size: 1.25rem;
}
.pto-department-picker {
  border: none;
  padding: 0;
  margin: 0 0 6px;
}
.pto-department-group-heading {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--pto-navy, #1c2b4a);
}
/* Collapsible department groups on contact.php's picker — same native <details> pattern used
   everywhere else in this app, distinct from the unrelated .pto-department-group class above
   (the Directory tab's own, different, group divider). Only the first group starts open (set
   inline via the `open` attribute); the rest collapse until clicked. */
.pto-department-picker-group {
  margin: 16px 0 8px;
}
.pto-department-picker-group > summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pto-navy, #1c2b4a);
  padding: 4px 0;
}
.pto-department-picker-group > summary::-webkit-details-marker {
  display: none;
}
.pto-department-picker-group > summary::before {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  margin-right: 6px;
  transition: transform .15s;
}
.pto-department-picker-group[open] > summary::before {
  transform: rotate(90deg);
}
.pto-department-picker-group .pto-department-grid {
  margin-top: 8px;
}
.pto-department-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.pto-department-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--bws-border);
  border-radius: var(--bws-radius-md, 10px);
  padding: 14px;
  background: var(--bws-bg);
  cursor: pointer;
  position: relative;
  min-width: 0; /* lets a long unbroken string (email address) actually wrap inside a grid track instead of forcing the track wider */
  overflow-wrap: anywhere;
  transition: border-color .15s, background .15s;
}
.pto-department-card a {
  overflow-wrap: anywhere;
}
.pto-department-card:has(input:checked) {
  border-color: var(--bws-primary);
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.16), rgba(255, 255, 255, 0.95));
  box-shadow: inset 0 0 0 1px rgba(138, 101, 8, 0.12);
}
.pto-department-card input[type="radio"] {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
}
.pto-department-card-general {
  align-items: flex-start;
  justify-content: center;
}
.pto-department-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  padding-right: 24px;
}
.pto-department-card-name {
  color: var(--bws-text-muted, #6b7280);
  font-size: 0.9rem;
}
.pto-department-bio {
  margin-top: 6px;
  font-size: 0.88rem;
}
.pto-department-bio summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--bws-primary);
}
.pto-department-bio p {
  margin: 6px 0 0;
  color: var(--bws-text-muted, #6b7280);
}
@media (max-width: 820px) {
  .pto-contact-page {
    padding: 26px 12px;
  }
  .pto-contact-shell {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pto-contact-intro {
    position: static;
    padding: 18px;
  }
  .pto-contact-intro h1 {
    font-size: 1.55rem;
  }
  .pto-contact-card .bws-card-body {
    padding: 16px;
  }
  .pto-department-grid {
    grid-template-columns: 1fr;
  }
}

/* inc/supply-catalog-picker.php — the "Add From Catalog" search + click-to-add grid on a Supply
   List tab's edit screen. */
.pto-supply-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px;
}
.pto-supply-catalog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  border: 1px solid var(--bws-border);
  border-radius: var(--bws-radius-md, 10px);
  padding: 10px;
  background: var(--bws-bg);
  cursor: pointer;
  position: relative;
  transition: border-color .15s, background .15s;
}
.pto-supply-catalog-card:has(.pto-supply-catalog-check:checked) {
  border-color: var(--bws-primary);
  background: var(--pto-gold-soft, rgba(242,184,75,.14));
}
.pto-supply-catalog-card .pto-supply-catalog-check {
  position: absolute;
  top: 8px;
  left: 8px;
}
.pto-supply-catalog-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 4px;
  pointer-events: none;
}
.pto-supply-catalog-card-title {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
  pointer-events: none;
}

/* pto_render_forms_list() / pto_render_one_form_item() (core/forms.php) — the public Forms tab
   (school.php/pto.php) and the Account "Forms To Fill" tab. Native <details>/<summary> for the
   collapse behavior (no JS needed) — a group is its own collapse boundary ("category"), each
   form within it (or standalone, ungrouped) collapses independently. Title + badges + action
   buttons stay visible in the summary at all times; only the description hides behind the click. */
.pto-forms-list {
  display: grid;
  gap: 10px;
}
.pto-form-group, .pto-form-item {
  border: 1px solid var(--bws-border);
  border-radius: var(--bws-radius-md, 10px);
  background: var(--bws-bg);
  overflow: hidden;
}
.pto-form-group-summary, .pto-form-item-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
}
.pto-form-group-summary::-webkit-details-marker, .pto-form-item-summary::-webkit-details-marker {
  display: none;
}
.pto-form-group-summary {
  font-weight: 750;
}
.pto-form-item-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pto-form-item-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pto-form-chevron {
  transition: transform 0.15s;
  flex: none;
}
.pto-form-group[open] > .pto-form-group-summary .pto-form-chevron,
.pto-form-item[open] > .pto-form-item-summary .pto-form-chevron {
  transform: rotate(90deg);
}
.pto-form-group-body {
  padding: 0 14px 14px;
  display: grid;
  gap: 10px;
}
.pto-form-item-body {
  padding: 0 14px 14px;
}
.pto-form-group .pto-form-item {
  border-color: var(--bws-border);
}

/* District main-menu dropdown items (pto_render_district_main_menu()) reuse .bws-navbar-link/
   .bws-dropdown as-is. It's a real <button> (needed for the shared bws-dropdowns.js toggle),
   which without this reset keeps the browser's own default button chrome — a grey box with a
   border/padding — instead of reading as a plain nav link like "Find a School"/"Businesses"
   beside it. Same reset .pto-lang-switcher's own dropdown toggle already uses. */
.pto-district-menu-item .bws-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: var(--bws-muted);
  cursor: pointer;
}
.pto-district-menu-item .bws-dropdown-toggle:hover {
  color: var(--bws-text);
}

/* --- Accessibility & Content Compliance publishing gate (inc/compliance-gate-fields.php,
   admin/compliance-monitor.php, admin/banned-words.php) --- */
.pto-compliance-findings {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.pto-compliance-finding {
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 0.9rem;
}
.pto-compliance-finding-blocking {
  background: rgba(220, 53, 69, 0.08);
  border-left: 3px solid #dc3545;
}
.pto-compliance-finding-warning {
  background: rgba(242, 184, 75, 0.12);
  border-left: 3px solid var(--pto-gold);
}
.pto-compliance-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.pto-compliance-status-passed { background: rgba(25, 135, 84, 0.12); color: #146c43; }
.pto-compliance-status-passed_with_review { background: rgba(242, 184, 75, 0.16); color: var(--bws-primary); }
.pto-compliance-status-blocked { background: rgba(220, 53, 69, 0.12); color: #b02a37; }
.pto-compliance-status-unscanned { background: rgba(120, 120, 120, 0.12); color: #6b6b6b; }

/* --- Content translations panel (inc/content-translations-fields.php) --- */
.pto-translation-lang {
  border: 1px solid var(--bws-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.pto-translation-lang > summary {
  cursor: pointer;
  font-weight: 700;
}
.pto-translation-lang .bws-form-group {
  margin-top: 10px;
}

/* Generic checklist mode (core/custom_tabs.php's pto_render_checklist_items(), any Items List
   tab/page with checklist_mode on) — same visual language as the Supply List checkbox items
   above, minus the Amazon-affiliate-specific cart/print toolbar (this one just links out to its
   own dedicated tab-items-pdf.php print page instead). */
.pto-checklist-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pto-checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.pto-checklist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--bws-border);
  border-radius: 8px;
}
.pto-checklist-item-label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
}
.pto-checklist-item-label input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}
.pto-checklist-item-label img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
}
.pto-checklist-item-title {
  flex: 1;
}
.pto-checklist-item-qty {
  display: inline-block;
  background: var(--pto-navy, #1c2b4a);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
}
.pto-checklist-item-note {
  display: inline-block;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--bws-text-muted, #6b7280);
  margin-top: 2px;
}

/* core/community_requests.php's pto_render_community_request_card() — a District/School/PTO's
   own "we need X" post. Deliberately NOT styled like a third-party ad: the organization's own
   logo/name always leads the card (same navy/gold theme as every other card on the site), and
   the layout matches other content cards (news, events) rather than a banner-ad shape. */
.pto-community-request-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 16px 0;
}
.pto-community-request-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pto-community-request-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.pto-community-request-owner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pto-community-request-owner img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
}
.pto-community-request-owner a {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bws-muted);
  text-decoration: none;
}
.pto-community-request-owner a:hover {
  text-decoration: underline;
}
.pto-community-request-title {
  margin: 0 0 6px;
  font-size: 1.15rem;
}
.pto-community-request-title a {
  color: inherit;
  text-decoration: none;
}
.pto-community-request-needed-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #92400e;
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.14));
  border-radius: 999px;
  padding: 4px 10px;
  margin: 4px 0 8px;
}
.pto-community-request-progress {
  background: var(--bws-border, #e5e7eb);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-top: 10px;
}
.pto-community-request-progress-bar {
  background: var(--pto-gold, #f2b84b);
  height: 100%;
  border-radius: 999px;
}
.pto-community-request-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Overview-tab slideshow widget (pto_render_community_requests_slideshow()) — same card markup
   as the grid above, one at a time, auto-rotating. Self-contained, no vendor carousel — see
   assets/js/pto-public.js for the tiny init this relies on. */
.pto-cr-slideshow-wrap {
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(242, 184, 75, 0.13), transparent 42%),
    linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 12px 28px rgba(15, 27, 51, 0.1);
}
.pto-cr-slideshow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.pto-cr-slideshow-head > div:first-child {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pto-cr-slideshow-head .pto-section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--pto-navy);
}
.pto-cr-slideshow-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.16);
  color: #8a6508;
  font-size: 0.72rem;
  font-weight: 800;
}
.pto-cr-slideshow-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pto-cr-slideshow {
  position: relative;
}
.pto-cr-slideshow-track {
  position: relative;
  min-height: 1px;
}
.pto-cr-slideshow-slide {
  display: none;
}
.pto-cr-slideshow-slide-active {
  display: block;
}
/* Slideshow slide: the classic "media object" pattern — the image is taken OUT of normal flow
   (position:absolute) so it has ZERO influence on the card's height, then stretched with
   height:100% to exactly match whatever height the TEXT side naturally needs. This is what two
   earlier flexbox-based attempts couldn't achieve: one let the image's own aspect ratio dictate
   an oversized row (huge blank space next to a short excerpt); the other capped the row at a
   guessed fixed height with overflow:hidden, which clipped the buttons whenever real content
   needed more room than the guess allowed. With this approach there is no guess and no cap — the
   text determines the height, the image just fills it, cropped via object-fit:cover, edge to
   edge, filling far more of the card than the earlier fixed-square thumbnail did. */
.pto-cr-slideshow-slide .pto-community-request-card {
  position: relative;
  min-height: 200px;
  border-color: rgba(15, 27, 51, 0.08);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 4px 14px rgba(15, 27, 51, 0.06);
}
.pto-cr-slideshow-slide .pto-community-request-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 100%;
  border-radius: 0;
  margin: 0;
}
.pto-cr-slideshow-slide .pto-community-request-card .bws-card-body {
  padding-left: calc(42% + 20px);
  text-align: left;
}
.pto-cr-slideshow-slide .pto-community-request-title {
  font-size: 1.05rem;
  line-height: 1.18;
}
.pto-cr-slideshow-slide .pto-community-request-card .bws-text-muted {
  margin: 0 0 8px;
  line-height: 1.45;
}
.pto-cr-slideshow-slide .pto-community-request-actions {
  justify-content: flex-start;
}
@media (max-width: 560px) {
  .pto-cr-slideshow-wrap {
    padding: 12px;
  }
  .pto-cr-slideshow-head {
    display: block;
  }
  .pto-cr-slideshow-actions {
    margin-top: 8px;
  }
  .pto-cr-slideshow-slide .pto-community-request-card {
    min-height: 0;
  }
  .pto-cr-slideshow-slide .pto-community-request-image {
    position: static;
    width: 100%;
    height: 180px;
    margin: 0;
    border-radius: 0;
  }
  .pto-cr-slideshow-slide .pto-community-request-card .bws-card-body {
    padding-left: 1rem;
  }
}
.pto-cr-slideshow-prev,
.pto-cr-slideshow-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--bws-border, #e5e7eb);
  background: rgba(255, 255, 255, 0.92);
  color: var(--bws-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pto-cr-slideshow-prev {
  left: 10px;
}
.pto-cr-slideshow-next {
  right: 10px;
}
.pto-cr-slideshow-prev:hover,
.pto-cr-slideshow-next:hover {
  background: #fff;
}
.pto-cr-slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.pto-cr-slideshow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--bws-border, #d1d5db);
  cursor: pointer;
  padding: 0;
}
.pto-cr-slideshow-dot-active {
  background: var(--bws-primary, #b8860b);
}

.pto-school-overview-side .pto-cr-slideshow-wrap {
  margin: 20px 0 0;
  padding: 12px;
  border-color: rgba(242, 184, 75, 0.26);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 248, 230, 0.94), #fff 42%),
    #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-school-overview-side .pto-cr-slideshow-head {
  align-items: center;
  margin-bottom: 8px;
}
.pto-school-overview-side .pto-cr-slideshow-head .pto-section-label {
  font-size: 0.76rem;
}
.pto-school-overview-side .pto-cr-slideshow-count {
  min-height: 22px;
  font-size: 0.68rem;
}
.pto-school-overview-side .pto-cr-slideshow-slide .pto-community-request-card {
  min-height: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.pto-school-overview-side .pto-cr-slideshow-slide .pto-community-request-image {
  position: static;
  width: 100%;
  height: 120px;
  border-radius: 12px 12px 0 0;
}
.pto-school-overview-side .pto-cr-slideshow-slide .pto-community-request-card .bws-card-body {
  padding: 12px;
}
.pto-school-overview-side .pto-community-request-owner {
  margin-bottom: 4px;
}
.pto-school-overview-side .pto-community-request-title {
  font-size: 1rem;
}
.pto-school-overview-side .pto-community-request-card .bws-text-muted {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pto-school-overview-side .pto-community-request-actions {
  margin-top: 10px;
}
.pto-school-overview-side .pto-cr-slideshow-prev,
.pto-school-overview-side .pto-cr-slideshow-next {
  width: 30px;
  height: 30px;
}

/* Job postings ("Jobs" tab catalog entry — see pto_render_job_items()). Each posting is a
   bws-faq-item: a collapsed summary (thumbnail + title + short meta preview + Apply button,
   the Apply link sitting as a SIBLING of the .bws-faq-question toggle button rather than nested
   inside it, since HTML forbids interactive content inside a <button>) expanding to the full
   metadata strip, narrative body, and a footer for Job ID/PDF/Questions. */
.pto-jobs-list {
  gap: 16px;
}
.pto-job-summary {
  display: flex;
  align-items: stretch;
}
.pto-job-question {
  flex: 1 1 auto;
  gap: 14px;
  min-width: 0;
}
.pto-job-image {
  width: 64px;
  height: 64px;
  border-radius: var(--bws-radius-sm, 8px);
  object-fit: cover;
  flex: none;
}
.pto-job-question-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pto-job-title {
  font-size: 1.05rem;
}
.pto-job-meta-preview {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--bws-muted, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pto-job-apply {
  flex: none;
  align-self: center;
  margin: 0 1rem;
}
.pto-job-answer {
  padding-top: 0.75rem;
  border-top: 1px solid var(--bws-border, #e5e7eb);
}
.pto-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-bottom: 10px;
  color: var(--bws-muted, #6b7280);
  font-size: 0.85rem;
}
.pto-job-meta strong {
  color: var(--bws-text, #222);
  font-weight: 600;
}
.pto-job-body {
  padding: 10px 0;
  border-top: 1px solid var(--bws-border, #e5e7eb);
}
.pto-job-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--bws-border, #e5e7eb);
}
.pto-job-footer span {
  margin-right: auto;
}

/* Third-party delivery platform buttons (pto_render_delivery_links(), core/businesses.php) —
   branded by color/name only, never the platforms' own trademarked logo artwork. */
.pto-delivery-links {
  margin-top: 16px;
}
.pto-delivery-links-label {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--bws-muted, #6b7280);
  font-weight: 700;
  margin-bottom: 6px;
}
.pto-delivery-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pto-delivery-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  min-height: 40px;
}
.pto-delivery-btn:hover,
.pto-delivery-btn:focus-visible {
  filter: brightness(0.92);
  outline: 2px solid var(--pto-navy, #0f1b33);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .pto-delivery-links-row {
    gap: 6px;
  }
  .pto-delivery-btn {
    min-height: 34px;
    padding: 6px 10px;
    gap: 5px;
    font-size: 0.78rem;
  }
}

/* "Coupon Activity" stat tiles (pto_render_coupon_stats(), core/coupons.php) — shared by the
   business-owner, school/PTO-manager, and district-admin reporting views. Styled to read as an
   extension of the coupon/flyer branding (gold border, dashed accent) rather than plain numbers
   in a bare grid — and deliberately never collapses to a single stacked column, even on the
   narrowest phones, since 4 (or 8) numbers with no visual container around them just reads as a
   loose list once there's no side-by-side column to separate them. */
.pto-coupon-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0;
}
@media (max-width: 640px) {
  .pto-coupon-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.pto-coupon-stat-tile {
  background: var(--pto-gold-soft, #fdf6e6);
  border: 1px dashed var(--pto-gold, #f2b84b);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.pto-coupon-stat-tile i {
  display: block;
  font-size: 1.1rem;
  color: var(--bws-primary, #8a6508);
  margin-bottom: 4px;
}
.pto-coupon-stat-number {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pto-navy, #0f1b33);
  line-height: 1.15;
}
.pto-coupon-stat-label {
  font-size: .68rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-top: 2px;
}

/* Navbar "Messages" unread badge (layout/header.php). */
.pto-navbar-unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #b91c1c;
  color: #fff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 5px;
  min-width: 16px;
  text-align: center;
}

/* Icon-only navbar button (Messages) — Facebook-style bubble icon, label kept for screen
   readers only via .pto-sr-only on the child span. */
.pto-navbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.05rem;
}
.pto-navbar-dark .pto-navbar-icon-btn {
  border-color: rgba(255, 255, 255, .35);
}

/* "My Account" navbar dropdown — the vendor default (.bws-dropdown-menu, bws-dropdowns.css) is
   only 12rem wide, too narrow once a longer item ("School Businesses", "My 3rd Grade Teacher")
   is present, wrapping it to two lines. Widened here (scoped to this one dropdown only, so every
   other .bws-dropdown-menu elsewhere in the app keeps the vendor's own default) and items are
   kept to one line, growing the box to fit whatever's actually the longest item instead of
   wrapping it. */
.pto-account-menu .bws-dropdown-menu {
  min-width: 15rem;
  width: max-content;
  max-width: 20rem;
}
.pto-account-menu .bws-dropdown-item {
  white-space: nowrap;
}

/* Header notification bell (layout/header.php, assets/js/pto-notifications.js) — reuses the
   same .bws-dropdown/.bws-dropdown-toggle open/close behavior the account menu above does, just
   with its own custom panel markup instead of plain .bws-dropdown-item links. */
.pto-notif-dropdown-menu {
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
}
.pto-notif-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bws-border, rgba(15, 27, 51, 0.1));
}
.pto-notif-dropdown-head strong {
  color: var(--pto-navy, #0f1b33);
  font-size: 0.92rem;
}
.pto-notif-markall {
  background: none;
  border: none;
  padding: 0;
  color: #8a6508;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.pto-notif-markall:hover {
  text-decoration: underline;
}
.pto-notif-list {
  max-height: 360px;
  overflow-y: auto;
}
.pto-notif-list-page {
  max-height: none;
  overflow-y: visible;
  border: 1px solid var(--bws-border, rgba(15, 27, 51, 0.08));
  border-radius: 10px;
  margin-top: 10px;
}
.pto-notif-list-page .pto-notif-item:last-child {
  border-bottom: none;
}
.pto-notif-empty {
  margin: 0;
  padding: 20px 14px;
  color: var(--bws-text-muted, #6b7280);
  font-size: 0.85rem;
  text-align: center;
}
.pto-notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--bws-border, rgba(15, 27, 51, 0.06));
  color: var(--pto-navy, #0f1b33);
  text-decoration: none;
}
.pto-notif-item:hover {
  background: rgba(15, 27, 51, 0.04);
}
.pto-notif-item-unread {
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.1));
}
.pto-notif-item-unread:hover {
  background: var(--pto-gold-soft, rgba(242, 184, 75, 0.16));
}
.pto-notif-item-title {
  font-size: 0.85rem;
  font-weight: 700;
}
.pto-notif-item-body {
  font-size: 0.8rem;
  color: rgba(15, 27, 51, 0.72);
}
.pto-notif-item-time {
  font-size: 0.72rem;
  color: var(--bws-text-muted, #6b7280);
  margin-top: 2px;
}
.pto-notif-viewall {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #8a6508;
  text-decoration: none;
  border-top: 1px solid var(--bws-border, rgba(15, 27, 51, 0.1));
}
.pto-notif-viewall:hover {
  text-decoration: underline;
}

/* Centralized search box (core/search.php's pto_render_search_box()) — sits inside each page's
   own dark hero, so it gets a translucent card of its own rather than looking like a stray plain
   input floating on navy. */
.pto-search-box {
  margin-top: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  padding: 12px;
  max-width: 640px;
}
.pto-search-box-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pto-search-input-wrap {
  position: relative;
  flex: 2;
  min-width: 200px;
}
.pto-search-box .pto-search-input {
  width: 100%;
}
.pto-search-box .pto-search-filter-select {
  flex: 1;
  min-width: 150px;
}
.pto-search-box .pto-search-sub-picker {
  margin-top: 8px;
}
.pto-search-box .pto-search-sub-picker select {
  width: 100%;
}
.pto-search-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--bws-bg, #fff);
  border: 1px solid var(--bws-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.pto-search-suggest-item {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--bws-text, #1a2233);
  border-bottom: 1px solid var(--bws-border, #e2e8f0);
}
.pto-search-suggest-item:last-child {
  border-bottom: none;
}
.pto-search-suggest-item:hover,
.pto-search-suggest-item:focus-visible {
  background: rgba(184, 134, 11, .1);
}
.pto-search-suggest-item strong {
  display: block;
  font-size: .92rem;
}
.pto-search-suggest-item span {
  display: block;
  font-size: .75rem;
  color: var(--bws-muted, #64748b);
}

/* search-results.php — grouped result cards. */
.pto-search-group {
  margin-top: 22px;
}
.pto-search-group-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pto-search-result {
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
}
.pto-search-result-source {
  margin: 2px 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--bws-primary, #8a6508);
}

/* ---------------------------------------------------------------------------
   Books / Reading Catalog (book.php, books.php, teacher-book-recommend.php,
   profile.php's Reading widget) — see core/books.php.
--------------------------------------------------------------------------- */
.pto-books-hero {
  padding: 42px 0;
  background:
    linear-gradient(135deg, rgba(113, 7, 45, 0.96), rgba(15, 27, 51, 0.92)),
    var(--pto-navy, #0f1b33);
  color: #fff;
}
.pto-books-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 28px;
  align-items: center;
}
.pto-books-hero-copy h1 {
  max-width: 720px;
  margin: 12px 0 10px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.02;
  font-weight: 900;
}
.pto-books-hero-copy p {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  line-height: 1.6;
}
.pto-books-hero .pto-section-label {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.pto-books-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.pto-books-hero-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
  font-weight: 800;
}
.pto-books-hero-stats strong {
  color: #fff;
  font-size: 1rem;
}
.pto-books-page {
  padding: 32px 16px 46px;
}
.pto-books-search-panel {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(242, 184, 75, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 40px rgba(15, 27, 51, 0.2);
}
.pto-books-search-input {
  position: relative;
  flex: 1 1 100%;
}
.pto-books-search-input i {
  position: absolute;
  top: 50%;
  left: 12px;
  color: rgba(15, 27, 51, 0.48);
  transform: translateY(-50%);
}
.pto-books-search-input .bws-input {
  width: 100%;
  padding-left: 38px;
}
.pto-books-shelf {
  margin-bottom: 34px;
  padding: 18px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 14px 32px rgba(15, 27, 51, 0.08);
}
.pto-books-shelf-featured {
  border-color: rgba(242, 184, 75, 0.42);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 184, 75, 0.12)),
    #fff;
}
.pto-books-section-head,
.pto-books-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.pto-books-section-head p,
.pto-books-results-head p {
  margin: 0;
  color: rgba(15, 27, 51, 0.62);
  font-size: 0.84rem;
  font-weight: 700;
}
.pto-books-section-head > div:first-child {
  min-width: 0;
}
.pto-books-slider-controls {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.pto-books-slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(15, 27, 51, 0.12);
  border-radius: 999px;
  background: #71072d;
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.16);
  cursor: pointer;
}
.pto-books-slider-btn:hover,
.pto-books-slider-btn:focus-visible {
  background: var(--pto-navy, #0f1b33);
  outline: 3px solid var(--pto-gold, #f2b84b);
  outline-offset: 2px;
}
.pto-books-slider-viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pto-books-slider-viewport::-webkit-scrollbar {
  display: none;
}
.pto-books-slider-viewport:focus-visible {
  outline: 3px solid var(--pto-gold, #f2b84b);
  outline-offset: 3px;
  border-radius: 12px;
}
.pto-books-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 190px;
  border: 1px dashed rgba(15, 27, 51, 0.16);
  border-radius: 14px;
  background: #fff;
  color: rgba(15, 27, 51, 0.72);
  text-align: center;
}
.pto-books-empty i {
  color: #8a6508;
  font-size: 2rem;
}
.pto-books-empty p {
  margin: 0;
  font-weight: 700;
}
.pto-book-page {
  padding: 32px 16px 46px;
}
.pto-book-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding: 22px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 184, 75, 0.08)),
    #fff;
  box-shadow: 0 18px 42px rgba(15, 27, 51, 0.1);
}
@media (max-width: 720px) {
  .pto-book-layout { grid-template-columns: 1fr; }
}
.pto-book-cover-col {
  position: sticky;
  top: 18px;
}
.pto-book-cover-frame {
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 34px rgba(15, 27, 51, 0.18);
  background: #f5efe3;
}
.pto-book-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pto-book-add-cover-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.pto-book-cover-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pto-book-rating-block {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.06);
}
.pto-book-rating-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--pto-navy, #0f1b33);
  margin-bottom: 8px;
}
.pto-book-rating-stars {
  color: #d4a017;
  font-size: 1.1rem;
  letter-spacing: 1px;
}
.pto-book-rate-stars {
  border: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 2px;
}
.pto-book-rate-stars input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pto-book-rate-stars label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: #d8d0bb;
}
.pto-book-rate-stars label::before { content: '★'; }
.pto-book-rate-stars input:checked ~ label,
.pto-book-rate-stars label:hover,
.pto-book-rate-stars label:hover ~ label {
  color: #d4a017;
}
.pto-book-rate-stars input:focus-visible + label {
  outline: 2px solid var(--pto-navy, #0f1b33);
  outline-offset: 2px;
}
.pto-book-info-col {
  min-width: 0;
}
.pto-book-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.16);
  color: #71072d;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pto-book-title {
  max-width: 820px;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800;
  color: var(--pto-navy, #0f1b33);
  line-height: 1.04;
  margin: 0 0 8px;
}
.pto-book-subtitle {
  font-size: 1.16rem;
  color: rgba(15, 27, 51, 0.72);
  margin: 0 0 8px;
}
.pto-book-author {
  margin: 0 0 10px;
  color: var(--pto-navy, #0f1b33);
}
.pto-book-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.pto-book-highlights span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 999px;
  background: #fff;
  color: rgba(15, 27, 51, 0.68);
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.06);
  font-size: 0.82rem;
  font-weight: 800;
}
.pto-book-highlights i {
  color: #8a6508;
}
.pto-book-highlights strong {
  color: var(--pto-navy, #0f1b33);
}
.pto-book-grades {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(15, 27, 51, 0.72);
  font-size: 0.9rem;
  font-weight: 800;
  margin: 0 0 16px;
}
.pto-book-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.pto-book-affiliate-disclaimer {
  background: var(--pto-gold-soft, rgba(242, 184, 75, .14));
  border: 1px solid var(--pto-gold, #f2b84b);
  border-radius: var(--bws-radius-md, 10px);
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bws-text, var(--pto-navy, #0f1b33));
  margin-bottom: 18px;
}
.pto-book-affiliate-disclaimer i {
  color: #c0392b;
  margin-right: 4px;
}
.pto-book-affiliate-disclaimer-bottom {
  margin-top: 28px;
  margin-bottom: 0;
}
.pto-book-description {
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  background: #fff;
  max-width: 68ch;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-book-description p {
  line-height: 1.7;
  color: var(--pto-navy, #0f1b33);
}
.pto-book-description-readmore > summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.pto-book-description-readmore > summary::-webkit-details-marker {
  display: none;
}
.pto-book-description-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.pto-book-description-full {
  display: none;
  margin-top: 4px;
}
.pto-book-description-readmore[open] .pto-book-description-preview {
  display: none;
}
.pto-book-description-readmore[open] .pto-book-description-full {
  display: block;
}
.pto-book-description-readmore-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: #8a6508;
  font-size: 0.84rem;
  font-weight: 800;
}
.pto-book-description-readmore-label::after {
  content: "\F282";
  font-family: "bootstrap-icons";
  font-size: 0.76rem;
}
.pto-book-description-readmore-less {
  display: none;
}
.pto-book-description-readmore[open] .pto-book-description-readmore-more {
  display: none;
}
.pto-book-description-readmore[open] .pto-book-description-readmore-less {
  display: inline;
}
.pto-book-description-readmore[open] .pto-book-description-readmore-label::after {
  content: "\F286";
}
.pto-book-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.pto-book-meta-grid div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: #fff;
}
.pto-book-meta-grid span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(15, 27, 51, 0.55);
}
.pto-book-meta-grid strong {
  color: var(--pto-navy, #0f1b33);
  overflow-wrap: anywhere;
}
.pto-book-footer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--bws-border, rgba(15, 27, 51, 0.1));
}
.pto-book-report-form {
  margin-top: 12px;
  max-width: 360px;
}
.pto-book-favorite-btn i {
  color: rgba(15, 27, 51, 0.55);
}
.pto-book-favorite-btn.is-favorited {
  border-color: #e0245e;
  color: #e0245e;
}
.pto-book-favorite-btn.is-favorited i {
  color: #e0245e;
}
.pto-book-favorite-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.pto-book-related {
  margin-top: 40px;
  padding: 18px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 27, 51, 0.08);
}
.pto-book-related-grid,
.pto-book-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 16px;
  margin-top: 10px;
}
.pto-book-card-grid-featured {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}
.pto-book-card-slider {
  display: flex;
  grid-template-columns: none;
  gap: 16px;
  padding: 4px 2px 14px;
}
.pto-book-card-slider .pto-book-card {
  flex: 0 0 176px;
  scroll-snap-align: start;
}
.pto-book-card-slider.pto-book-card-grid-featured .pto-book-card {
  flex-basis: 194px;
}
.pto-book-related-card,
.pto-book-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 27, 51, 0.08);
  text-decoration: none;
  color: var(--pto-navy, #0f1b33);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pto-book-related-card:hover,
.pto-book-related-card:focus-visible,
.pto-book-card:hover,
.pto-book-card:focus-visible {
  border-color: rgba(242, 184, 75, 0.6);
  box-shadow: 0 16px 34px rgba(15, 27, 51, 0.14);
  transform: translateY(-2px);
  outline: none;
}
.pto-book-card-cover {
  position: relative;
  display: block;
  margin-bottom: 9px;
}
.pto-book-related-card img,
.pto-book-card img {
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(15, 27, 51, 0.12);
}
.pto-book-card-ribbon {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 16px);
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(113, 7, 45, 0.94);
  color: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.22);
  font-size: 0.68rem;
  font-weight: 900;
}
.pto-book-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pto-book-related-title,
.pto-book-card-title {
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
}
.pto-book-related-author,
.pto-book-card-author {
  font-size: 0.78rem;
  color: rgba(15, 27, 51, 0.65);
}
.pto-book-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  color: rgba(15, 27, 51, 0.68);
  font-size: 0.76rem;
  font-weight: 800;
}
.pto-book-card-stars {
  color: #d4a017;
  letter-spacing: 0;
}
.pto-book-card-unrated {
  color: rgba(15, 27, 51, 0.5);
}
.pto-books-search-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pto-books-search-form input[type="text"] {
  flex: 1;
  min-width: 200px;
}
@media (max-width: 840px) {
  .pto-books-hero-inner {
    grid-template-columns: 1fr;
  }
  .pto-book-cover-col {
    position: static;
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 640px) {
  .bws-container.pto-books-page,
  .bws-container.pto-book-page {
    width: calc(100% - 16px);
    max-width: none;
  }
  .pto-books-page,
  .pto-book-page {
    padding-inline: 0;
  }
  .pto-books-shelf,
  .pto-book-layout,
  .pto-book-related {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .pto-books-shelf {
    padding-inline: 14px;
  }
  .pto-book-layout {
    padding: 14px;
  }
  .pto-books-section-head,
  .pto-books-results-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .pto-books-section-head {
    gap: 10px;
  }
  .pto-books-slider-controls {
    display: none;
  }
  .pto-book-card-grid,
  .pto-book-card-grid-featured {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .pto-book-card-slider,
  .pto-book-card-slider.pto-book-card-grid-featured {
    display: flex;
    gap: 12px;
  }
  .pto-book-card-slider .pto-book-card,
  .pto-book-card-slider.pto-book-card-grid-featured .pto-book-card {
    flex-basis: min(78vw, 240px);
  }
}

/* Reading assignments widget (profile.php) */
.pto-reading-widget {
  overflow: hidden;
  border-color: rgba(242, 184, 75, 0.38);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(242, 184, 75, 0.1)),
    #fff;
}
.pto-reading-widget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pto-reading-widget-head .pto-section-label > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.pto-reading-widget-head .pto-section-label small {
  color: #8a6508;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}
.pto-reading-assignment-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pto-reading-assignment-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pto-reading-assignment-tab {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(15, 27, 51, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--pto-navy, #0f1b33);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}
.pto-reading-assignment-tab-input:checked + .pto-reading-assignment-tab {
  border-color: rgba(138, 101, 8, 0.38);
  background: rgba(242, 184, 75, 0.2);
  color: #6b4200;
  box-shadow: inset 0 0 0 1px rgba(242, 184, 75, 0.28);
}
.pto-reading-assignment-tab-input:focus-visible + .pto-reading-assignment-tab {
  outline: 3px solid rgba(15, 27, 51, 0.34);
  outline-offset: 2px;
}
.pto-reading-assignment-panel {
  order: 2;
  display: none;
  width: 100%;
}
.pto-reading-assignment-tab-input:checked + .pto-reading-assignment-panel,
.pto-reading-assignment-tab-input:checked + .pto-reading-assignment-tab + .pto-reading-assignment-panel {
  display: block;
}
.pto-reading-widget-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.pto-reading-widget-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 27, 51, 0.06);
  color: rgba(15, 27, 51, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
}
.pto-reading-widget-meta i {
  color: #8a6508;
}
.pto-reading-widget-link {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  text-decoration: none;
  color: var(--pto-navy, #0f1b33);
  margin-top: 12px;
}
.pto-reading-widget-cover-wrap {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #f8f3e6;
  box-shadow: 0 10px 22px rgba(15, 27, 51, 0.13);
}
.pto-reading-widget-cover {
  width: 100%;
  height: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}
.pto-reading-widget-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 4px 0;
}
.pto-reading-widget-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #8a6508;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.pto-reading-widget-info strong {
  font-size: 1rem;
  line-height: 1.2;
}
.pto-reading-widget-info > span:last-child {
  font-size: 0.8rem;
  color: rgba(15, 27, 51, 0.65);
}
.pto-reading-widget-note {
  position: relative;
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--pto-gold, #f2b84b);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}
.pto-reading-widget-note span {
  display: block;
  margin-bottom: 4px;
  color: #8a6508;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.pto-reading-widget-note p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(15, 27, 51, 0.75);
  font-style: italic;
}
.pto-reading-widget-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pto-reading-widget-actions .bws-btn {
  flex: 1 1 auto;
}
.pto-reading-widget-prompt {
  border: 1px dashed var(--bws-border, rgba(15, 27, 51, 0.25));
  box-shadow: none;
}
.pto-reading-widget-prompt .bws-text-muted {
  margin: 4px 0 10px;
}
@media (max-width: 640px) {
  .pto-reading-widget-link {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

.pto-favorites-widget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.pto-favorites-widget-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.pto-profile-book-slide-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(138, 101, 8, 0.3);
  border-radius: 999px;
  background: #fff;
  color: #8a6508;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.1);
  cursor: pointer;
}
.pto-profile-book-slide-btn:hover,
.pto-profile-book-slide-btn:focus-visible {
  background: rgba(242, 184, 75, 0.18);
  color: var(--pto-navy);
}
.pto-favorites-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.pto-favorites-widget-slider {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  margin-top: 12px;
  padding: 2px 2px 10px;
}
.pto-favorites-widget-track {
  display: flex;
  gap: 14px;
}
.pto-favorites-widget-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 126px;
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--pto-navy, #0f1b33);
}
.pto-favorites-widget-item img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #f8f3e6;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.12);
}
.pto-favorites-widget-item span {
  font-size: 0.72rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pto-favorites-widget-viewall {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}
.pto-favorites-widget-prompt {
  border: 1px dashed var(--bws-border, rgba(15, 27, 51, 0.25));
  box-shadow: none;
}
.pto-favorites-widget-prompt .bws-text-muted {
  margin: 4px 0 10px;
}
@media (max-width: 640px) {
  .pto-favorites-widget-head {
    flex-direction: column;
  }
  .pto-favorites-widget-head-actions {
    width: 100%;
    justify-content: space-between;
  }
  .pto-favorites-widget-head-actions .bws-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .pto-profile-book-slide-btn {
    display: none;
  }
  .pto-favorites-widget-item {
    flex-basis: 104px;
  }
}

/* book-favorites.php — the "View All Recommended Books" management/overflow page */
.pto-favorites-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.pto-favorites-page-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--bws-border, rgba(15, 27, 51, 0.1));
  border-radius: 12px;
  background: #fff;
}
.pto-favorites-page-cover-wrap {
  display: block;
}
.pto-favorites-page-cover-wrap img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #f8f3e6;
}
.pto-favorites-page-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pto-favorites-page-info a {
  text-decoration: none;
  color: var(--pto-navy, #0f1b33);
}

/* Book picker (assets/js/pto-public.js's .pto-book-picker handler) */
.pto-book-picker { position: relative; }
.pto-book-picker-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--bws-border, rgba(15, 27, 51, 0.12));
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.15);
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
}
.pto-book-picker-result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.pto-book-picker-result:hover {
  background: rgba(15, 27, 51, 0.05);
}
.pto-book-picker-result img {
  width: 32px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.pto-book-picker-result span {
  display: flex;
  flex-direction: column;
}
.pto-book-picker-result small {
  color: rgba(15, 27, 51, 0.6);
}

.pto-book-favorites-quickpick {
  margin-bottom: 14px;
}
.pto-book-favorites-quickpick-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 0 4px;
}
.pto-book-favorites-quickpick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  flex-shrink: 0;
  border: 1px solid var(--bws-border, rgba(15, 27, 51, 0.12));
  border-radius: 8px;
  background: #fff;
  padding: 6px;
  cursor: pointer;
  text-align: center;
}
.pto-book-favorites-quickpick-item:hover {
  border-color: #e0245e;
}
.pto-book-favorites-quickpick-item img {
  width: 48px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
}
.pto-book-favorites-quickpick-item span {
  font-size: 11px;
  line-height: 1.2;
  color: var(--pto-navy, #0f1b33);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------------------------------------------------------------------------------------------
   Sports — School/Network directory, Team page, coach/game management, gear.
   --------------------------------------------------------------------------------------------- */
.pto-sports-directory h1 {
  margin-bottom: 12px;
}
.pto-sports-directory-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 16px;
  background:
    radial-gradient(circle at 88% 0%, rgba(242, 184, 75, 0.24), transparent 34%),
    linear-gradient(135deg, var(--pto-navy, #0f1b33), #20365f);
  color: #fff;
  box-shadow: 0 18px 40px rgba(15, 27, 51, 0.18);
}
.pto-sports-directory-hero h1 {
  margin: 10px 0 8px;
  color: #fff;
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1;
}
.pto-sports-directory-hero p {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1rem;
  line-height: 1.55;
}
.pto-sports-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pto-sports-directory-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pto-sports-directory-stats div {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}
.pto-sports-directory-stats strong {
  display: block;
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
}
.pto-sports-directory-stats span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.pto-sports-filter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-sports-filter-heading {
  flex: 1 0 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.pto-sports-filter-heading strong {
  color: var(--pto-navy, #0f1b33);
}
.pto-sports-filter-heading span {
  color: rgba(15, 27, 51, 0.62);
  font-size: 0.85rem;
  font-weight: 700;
}
.pto-sports-filter-form .pto-sports-picker {
  flex: 1 1 240px;
  min-width: 200px;
}
.pto-sports-picker {
  position: relative;
}
.pto-sports-picker-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--bws-border, rgba(15, 27, 51, 0.12));
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.15);
  max-height: 320px;
  overflow-y: auto;
  margin-top: 4px;
}
.pto-sports-picker-result {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}
.pto-sports-picker-result:hover {
  background: rgba(15, 27, 51, 0.05);
}
.pto-sports-picker-result small {
  color: rgba(15, 27, 51, 0.6);
}
.pto-sports-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.pto-sports-chip-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(242, 184, 75, 0.34);
  border-radius: 999px;
  background: rgba(255, 248, 230, 0.8);
  color: var(--pto-navy, #0f1b33);
  font-size: 0.82rem;
  font-weight: 800;
}
.pto-sports-sport-section {
  margin-bottom: 28px;
  padding: 16px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, rgba(255, 248, 230, 0.38));
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.05);
}
.pto-sports-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pto-sports-section-heading .pto-section-label {
  margin: 0;
}
.pto-sports-section-heading p {
  margin: 5px 0 0;
  color: rgba(15, 27, 51, 0.62);
  font-size: 0.86rem;
}
.pto-sports-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 0;
}
.pto-sports-team-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
  text-decoration: none;
  color: var(--pto-navy, #0f1b33);
}
.pto-sports-team-card:hover {
  border-color: var(--pto-gold, #f2b84b);
}
.pto-sports-team-card-media {
  position: relative;
  display: block;
}
.pto-sports-team-card-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 4px;
}
.pto-sports-team-card-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(242, 184, 75, 0.22), rgba(15, 27, 51, 0.07));
}
.pto-sports-team-card-cover-fallback i {
  font-size: 1.8rem;
  color: var(--pto-navy, #0f1b33);
  opacity: 0.5;
}
.pto-district-sports-directory .pto-sports-team-card {
  overflow: hidden;
  gap: 0;
  padding: 0;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.pto-district-sports-directory .pto-sports-team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 27, 51, 0.1);
}
.pto-district-sports-directory .pto-sports-team-card-cover {
  border-radius: 0;
  margin-bottom: 0;
}
.pto-sports-team-sport-badge {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 20px);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15, 27, 51, 0.86);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.pto-sports-team-card-body {
  display: grid;
  gap: 5px;
  padding: 12px 13px 13px;
}
.pto-sports-team-card-body strong {
  font-size: 1.05rem;
  line-height: 1.18;
}
.pto-sports-team-grades,
.pto-sports-team-coach {
  font-size: 0.82rem;
  color: rgba(15, 27, 51, 0.65);
}
.pto-sports-team-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--bws-primary, #8a6508);
  font-size: 0.82rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .pto-sports-directory {
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    overflow-x: clip;
  }
  .pto-sports-directory-hero {
    grid-template-columns: 1fr;
    border-radius: 12px;
    padding: 16px;
  }
  .pto-sports-directory-hero h1 {
    font-size: 2rem;
  }
  .pto-sports-directory-stats {
    grid-template-columns: repeat(3, minmax(88px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pto-sports-directory-stats::-webkit-scrollbar {
    display: none;
  }
  .pto-sports-filter-heading,
  .pto-sports-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .pto-sports-filter-form .pto-sports-picker,
  .pto-sports-filter-form .bws-select,
  .pto-sports-filter-form .bws-btn {
    width: 100%;
    min-width: 0;
  }
  .pto-sports-sport-section {
    padding: 12px;
    border-radius: 12px;
  }
  .pto-sports-team-grid {
    grid-template-columns: 1fr;
  }
}

.pto-team-manage-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.pto-team-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}
.pto-team-sidebar {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 14px;
}
.pto-team-main {
  min-width: 0;
}
.pto-team-sidebar-card {
  padding: 14px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-team-sidebar-card .pto-section-label {
  margin-bottom: 10px;
}
.pto-team-sidebar .pto-team-manage-actions {
  margin: 0;
  display: grid;
  gap: 8px;
}
.pto-team-sidebar .pto-team-manage-actions .bws-btn {
  justify-content: center;
}
.pto-team-tab-card {
  padding: 10px;
}
.pto-team-tabs-nav {
  display: grid;
  gap: 6px;
  margin: 0;
}
.pto-team-tabs-nav .pto-tab-btn {
  width: 100%;
  justify-content: flex-start;
  min-height: 42px;
  border-radius: 8px;
}
.pto-team-tabs-nav .pto-tab-active {
  background: var(--pto-navy, #0f1b33);
  border-color: var(--pto-navy, #0f1b33);
  color: #fff;
}
.pto-team-main .pto-tab-panel:not(#tab-volunteer) {
  padding: 16px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-team-main .pto-tab-panel#tab-overview {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.pto-team-main .pto-tab-panel#tab-volunteer {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.pto-team-coaches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.pto-team-connect-card {
  margin: 16px 0;
  border: 1px solid rgba(42, 157, 143, 0.22);
  background: linear-gradient(135deg, rgba(42, 157, 143, 0.08), #fff);
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-team-overview-section {
  margin: 20px 0;
  padding: 16px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-team-main .pto-tab-panel#tab-overview > .pto-team-overview-section:first-child {
  margin-top: 0;
}
.pto-team-registration-card {
  margin: 16px 0;
  border-color: rgba(242, 184, 75, 0.4);
  background: linear-gradient(135deg, rgba(255, 248, 230, 0.96), #fff);
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-team-registration-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1rem;
  margin: 6px 0;
}
.pto-team-about-registration {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 27, 51, 0.08);
}
.pto-team-about-registration .pto-section-label {
  margin-bottom: 8px;
}
.pto-team-about-registration .bws-btn {
  margin-top: 4px;
}
.pto-team-registration-overview {
  overflow: hidden;
  padding-top: 0;
}
.pto-team-registration-banner {
  display: block;
  width: calc(100% + 32px);
  height: auto;
  max-height: none;
  margin: 0 -16px 14px;
  object-fit: contain;
  object-position: center;
  border-bottom: 1px solid rgba(15, 27, 51, 0.08);
  background: #fff;
}
.pto-team-volunteer-feature .pto-volreq-ad-wrap {
  margin-bottom: 0;
}
.pto-team-volunteer-feature .pto-volreq-ad-card {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  min-height: 0;
  background: linear-gradient(135deg, #fff, rgba(255, 246, 217, 0.92));
}
.pto-team-volunteer-feature .pto-volreq-ad-image {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
  object-position: center;
  border-right: 1px solid rgba(197, 118, 0, 0.16);
}
.pto-team-volunteer-feature .pto-volreq-ad-body {
  padding: 18px;
}
.pto-team-volunteer-feature .pto-volreq-ad-title {
  white-space: normal;
  font-size: 1.25rem;
}
.pto-team-volunteer-feature .pto-volreq-ad-kicker {
  white-space: normal;
  line-height: 1.2;
}
.pto-team-news-preview-list {
  display: grid;
  gap: 12px;
}
.pto-team-news-preview-item {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.04);
}
.pto-team-news-preview-image {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(15, 27, 51, 0.04);
}
.pto-team-news-preview-image img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  transition: transform 0.18s ease;
}
.pto-team-news-preview-image:hover img {
  transform: scale(1.03);
}
.pto-team-news-preview-title {
  display: inline-flex;
  color: var(--pto-navy, #0f1b33);
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
}
.pto-team-news-preview-title:hover {
  color: var(--bws-primary, #8a0030);
  text-decoration: underline;
}
.pto-team-news-preview-item small {
  display: block;
  margin-top: 3px;
  color: rgba(15, 27, 51, 0.58);
  font-size: 0.78rem;
  font-weight: 800;
}
.pto-team-news-preview-item p {
  margin: 8px 0 0;
  color: rgba(15, 27, 51, 0.78);
  line-height: 1.45;
}
.pto-team-news-preview-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 8px;
  color: #945100;
  font-size: 0.84rem;
  font-weight: 900;
  text-decoration: none;
}
.pto-team-news-preview-more:hover {
  text-decoration: underline;
}
.pto-team-connect-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.pto-team-gear-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.pto-team-gear-item {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.04);
}
.pto-team-gear-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.pto-team-gear-feature {
  background:
    linear-gradient(135deg, rgba(255, 248, 230, 0.78), #fff 44%);
}
.pto-team-gear-feature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pto-team-gear-feature-head .pto-section-label {
  margin-bottom: 4px;
}
.pto-team-gear-feature-head p {
  margin: 0;
  color: rgba(15, 27, 51, 0.62);
  font-size: 0.88rem;
}
.pto-team-gear-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.pto-team-gear-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-team-gear-feature-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  margin: 10px 10px 0;
  padding: 10px;
  border: 1px solid rgba(15, 27, 51, 0.06);
  border-radius: 12px;
  background: #fff;
}
.pto-team-gear-feature-media img {
  width: 100%;
  height: 120px;
  object-fit: contain;
}
.pto-team-gear-feature-media span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: rgba(242, 184, 75, 0.14);
  color: var(--pto-navy, #0f1b33);
  font-size: 1.8rem;
}
.pto-team-gear-feature-body {
  display: grid;
  gap: 6px;
  padding: 11px 12px 0;
}
.pto-team-gear-feature-body strong {
  color: var(--pto-navy, #0f1b33);
  font-size: 0.98rem;
  line-height: 1.2;
}
.pto-team-gear-feature-body p {
  margin: 0;
}
.pto-team-gear-feature-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 12px;
}
.pto-team-gear-feature-actions .bws-btn {
  flex: 1 1 auto;
  justify-content: center;
}
.pto-team-gear-feature-check {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(15, 27, 51, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.08);
}
.pto-team-gear-feature-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.pto-gear-item-check-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  align-self: flex-start;
  font-size: 0.78rem;
  color: rgba(15, 27, 51, 0.65);
  cursor: pointer;
}
.pto-gear-item-check-label input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}
.pto-gear-hero {
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 12%, rgba(242, 184, 75, 0.24), transparent 28%),
    linear-gradient(135deg, var(--pto-navy, #0f1b33), #17274a);
  color: #fff;
}
.pto-gear-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
  padding: clamp(28px, 5vw, 58px) 16px;
}
.pto-gear-hero-copy h1 {
  max-width: 720px;
  margin: 12px 0 10px;
  color: #fff;
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: clamp(2.35rem, 5vw, 4.8rem);
  line-height: 0.98;
}
.pto-gear-hero-copy p {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  line-height: 1.6;
}
.pto-gear-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.pto-gear-hero-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
  font-weight: 800;
}
.pto-gear-hero-stats strong {
  color: #fff;
  font-size: 1.08rem;
}
.pto-gear-hero-showcase {
  position: relative;
  min-height: 330px;
}
.pto-gear-hero-showcase::before {
  content: "";
  position: absolute;
  inset: 34px 8px 18px;
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}
.pto-gear-hero-product {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
}
.pto-gear-hero-product img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pto-gear-hero-product-0 {
  left: 10px;
  top: 16px;
  width: 210px;
  height: 210px;
  z-index: 3;
}
.pto-gear-hero-product-1 {
  right: 12px;
  top: 78px;
  width: 170px;
  height: 170px;
  z-index: 2;
}
.pto-gear-hero-product-2 {
  left: 120px;
  bottom: 4px;
  width: 145px;
  height: 145px;
  z-index: 4;
}
.pto-gear-hero-badge {
  position: absolute;
  right: 22px;
  bottom: 26px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--pto-gold, #f2b84b);
  color: var(--pto-navy, #0f1b33);
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.pto-gear-search-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}
.pto-gear-shop-page {
  padding-top: 22px;
}
.pto-gear-sport-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pto-gear-sport-chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 999px;
  background: #fff;
  color: var(--pto-navy, #0f1b33);
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.05);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}
.pto-gear-sport-chips a.pto-gear-sport-chip-active {
  border-color: rgba(242, 184, 75, 0.64);
  background: rgba(255, 248, 230, 0.95);
  color: #7a4b00;
}
.pto-gear-results-bar {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.pto-gear-results-bar > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pto-gear-results-bar p {
  margin: 4px 0 0;
  color: rgba(15, 27, 51, 0.64);
  font-weight: 700;
}
.pto-gear-cart-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 470px;
  padding: 12px;
  border: 1px solid rgba(242, 184, 75, 0.34);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 248, 230, 0.9), #fff);
  box-shadow: 0 10px 24px rgba(15, 27, 51, 0.06);
}
.pto-gear-cart-panel > span {
  flex: 1 1 190px;
  color: var(--pto-navy, #0f1b33);
  font-size: 0.84rem;
  font-weight: 800;
}
.pto-gear-cart-panel .pto-gear-cart-note {
  flex: 1 0 100%;
  margin: 0;
}
.pto-gear-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.pto-gear-shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
  border: 1px solid rgba(15, 27, 51, 0.09);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 27, 51, 0.08);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.pto-gear-shop-card:hover {
  transform: translateY(-2px);
  border-color: rgba(242, 184, 75, 0.7);
  box-shadow: 0 18px 38px rgba(15, 27, 51, 0.12);
}
.pto-gear-shop-media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 270px;
  margin: 12px 12px 0;
  padding: 16px;
  border: 1px solid rgba(15, 27, 51, 0.06);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 12px 24px rgba(15, 27, 51, 0.04);
}
.pto-gear-shop-media img {
  width: 100%;
  height: 245px;
  object-fit: contain;
  filter: none;
}
.pto-gear-shop-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  border-radius: 24px;
  background: rgba(242, 184, 75, 0.14);
  color: var(--pto-navy, #0f1b33);
  font-size: 2.4rem;
}
.pto-gear-shop-body {
  display: grid;
  gap: 6px;
  padding: 16px 16px 0;
}
.pto-gear-shop-brand {
  color: var(--bws-primary, #8a6508);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pto-gear-shop-body h2 {
  margin: 0;
  color: var(--pto-navy, #0f1b33);
  font-size: 1.15rem;
  line-height: 1.18;
}
.pto-gear-shop-body p {
  margin: 0;
  line-height: 1.45;
}
.pto-gear-shop-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 16px;
}
.pto-gear-shop-actions .bws-btn {
  flex: 1 1 auto;
  justify-content: center;
}
.pto-gear-shop-select {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  padding: 7px 10px;
  border: 1px solid rgba(15, 27, 51, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--pto-navy, #0f1b33);
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.1);
  cursor: pointer;
}
.pto-gear-shop-select input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}
@media (max-width: 640px) {
  .pto-gear-hero-inner {
    grid-template-columns: 1fr;
    padding: 24px 8px;
  }
  .pto-gear-hero-copy h1 {
    font-size: 2.35rem;
  }
  .pto-gear-hero-showcase {
    min-height: 250px;
  }
  .pto-gear-hero-product-0 {
    width: 165px;
    height: 165px;
  }
  .pto-gear-hero-product-1 {
    width: 128px;
    height: 128px;
  }
  .pto-gear-hero-product-2 {
    left: 92px;
    width: 112px;
    height: 112px;
  }
  .pto-gear-search-panel {
    grid-template-columns: 1fr;
  }
  .pto-gear-results-bar {
    flex-direction: column;
  }
  .pto-gear-cart-panel {
    max-width: none;
  }
  .pto-gear-shop-grid {
    grid-template-columns: 1fr;
  }
  .pto-gear-shop-media {
    min-height: 250px;
  }
  .pto-gear-shop-media img {
    height: 230px;
  }
  .pto-gear-shop-actions .bws-btn {
    width: 100%;
  }
}
.pto-team-gear-item .bws-btn {
  margin-top: 6px;
  margin-right: 6px;
}
.pto-team-gear-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(15, 27, 51, 0.06);
}
.pto-team-gear-add-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}
.pto-sports-gear-quickpick-form {
  display: inline-block;
}

.pto-my-sports-team-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0;
}
.pto-my-sports-connect-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  align-items: center;
}

.pto-sports-widget-my-team {
  margin: 10px 0 4px;
  font-size: 0.9rem;
}
.pto-sports-widget-my-team strong {
  display: block;
  font-size: 1.05rem;
}
.pto-sports-widget-feature {
  overflow: hidden;
  border-color: rgba(242, 184, 75, 0.28);
  background: #fff;
}
.pto-school-pto-card + .pto-sports-widget-feature {
  margin-top: 20px;
}
.pto-sports-widget-feature .bws-card-body {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
}
.pto-sports-widget-visuals {
  position: relative;
  min-height: 118px;
  z-index: 1;
}
.pto-sports-widget-visuals::before {
  content: "";
  position: absolute;
  inset: -16px 16px -16px -16px;
  border-radius: 0 34px 34px 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(242, 184, 75, 0.22), transparent 34%),
    linear-gradient(135deg, var(--pto-navy, #0f1b33), #17274a);
}
.pto-sports-widget-thumb {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 86px;
  height: 86px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(242, 184, 75, 0.28), rgba(255, 255, 255, 0.9));
  box-shadow: 0 12px 24px rgba(15, 27, 51, 0.2);
}
.pto-sports-widget-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pto-sports-widget-thumb i {
  color: var(--pto-navy, #0f1b33);
  font-size: 2rem;
}
.pto-sports-widget-thumb-0 {
  left: 0;
  top: 4px;
  z-index: 3;
}
.pto-sports-widget-thumb-1 {
  right: 0;
  top: 22px;
  width: 70px;
  height: 70px;
  z-index: 2;
}
.pto-sports-widget-thumb-2 {
  left: 46px;
  bottom: 0;
  width: 58px;
  height: 58px;
  z-index: 4;
}
.pto-sports-widget-content {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-left: 4px;
}
.pto-sports-widget-content .pto-section-label {
  margin-bottom: 6px;
}
.pto-sports-widget-content h3 {
  margin: 0 0 6px;
  color: var(--pto-navy, #0f1b33);
  font-size: 1.15rem;
  line-height: 1.2;
}
.pto-sports-widget-content p {
  margin: 0 0 10px;
}
.pto-sports-widget-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.pto-sports-widget-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 248, 230, 0.95);
  color: var(--pto-navy, #0f1b33);
  font-size: 0.78rem;
  font-weight: 800;
}
.pto-sports-widget-stats strong {
  font-size: 1rem;
}
.pto-sports-widget-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .pto-sports-widget-feature .bws-card-body {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }
  .pto-sports-widget-visuals {
    min-height: 98px;
  }
  .pto-sports-widget-visuals::before {
    inset: -14px 10px -14px -14px;
    border-radius: 0 28px 28px 0;
  }
  .pto-sports-widget-thumb {
    width: 72px;
    height: 72px;
    border-radius: 14px;
  }
  .pto-sports-widget-thumb-1 {
    width: 56px;
    height: 56px;
  }
  .pto-sports-widget-thumb-2 {
    left: 38px;
    width: 48px;
    height: 48px;
  }
  .pto-sports-widget-content h3 {
    font-size: 1rem;
  }
  .pto-sports-widget-actions .bws-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Team page header — PTO-style team hero with a readable cover, snapshot stats, and actions. */
.pto-team-hero {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 86% 8%, rgba(242, 184, 75, 0.22), transparent 32%),
    linear-gradient(135deg, var(--pto-navy, #0f1b33), #20365f);
  color: #fff;
  box-shadow: 0 18px 40px rgba(15, 27, 51, 0.18);
}
.pto-team-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  filter: saturate(1.05);
}
.pto-team-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 27, 51, 0.94), rgba(15, 27, 51, 0.78) 52%, rgba(15, 27, 51, 0.56));
  pointer-events: none;
}
.pto-team-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(240px, 320px);
  gap: 18px;
  align-items: center;
  padding: 24px;
}
.pto-team-cover-wrap {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  height: 140px;
}
.pto-team-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  border: 3px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 26px rgba(15, 27, 51, 0.14);
}
.pto-team-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(242, 184, 75, 0.25), rgba(15, 27, 51, 0.08));
  border: 3px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 26px rgba(15, 27, 51, 0.1);
}
.pto-team-cover-fallback i {
  font-size: 2.6rem;
  color: var(--pto-navy, #0f1b33);
  opacity: 0.55;
}
.pto-team-cover-edit-btn {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  background: rgba(255, 255, 255, 0.92);
}
.pto-team-cover-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
  width: 100%;
}
.pto-team-header-text {
  flex: 1 1 240px;
  min-width: 200px;
}
.pto-team-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(242, 184, 75, 0.18);
  color: #ffe7a3;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pto-team-title {
  margin: 10px 0 6px;
  font-family: var(--pto-font-serif, Georgia, serif);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  color: #fff;
}
.pto-team-meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
}
.pto-team-meta a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(242, 184, 75, 0.7);
  text-underline-offset: 3px;
}
.pto-team-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pto-team-quick-connect-form {
  margin: 0;
}
.pto-team-hero-panel {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}
.pto-team-hero-panel .pto-section-label {
  color: #fff;
  margin-bottom: 10px;
}
.pto-team-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pto-team-stat-grid div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
}
.pto-team-stat-grid strong {
  display: block;
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
}
.pto-team-stat-grid span {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
}
.pto-team-next-event {
  display: grid;
  gap: 3px;
  margin-top: 10px;
  padding: 10px;
  border-left: 3px solid var(--pto-gold, #f2b84b);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
}
.pto-team-next-event small {
  color: #ffe7a3;
  font-weight: 900;
  text-transform: uppercase;
}
.pto-team-next-event strong {
  color: #fff;
}
.pto-team-next-event span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.82rem;
}

.pto-team-news-item {
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 27, 51, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(15, 27, 51, 0.05);
}
.pto-team-news-item img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.pto-team-forms-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
@media (max-width: 860px) {
  .pto-team-layout {
    grid-template-columns: 1fr;
  }
  .pto-team-sidebar {
    position: static;
  }
  .pto-team-tabs-nav {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  .pto-team-hero-content {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .pto-team-hero-panel {
    grid-column: 1 / -1;
  }
  .pto-team-cover-wrap {
    width: 120px;
    height: 120px;
  }
}
@media (max-width: 640px) {
  .pto-team-page {
    padding-top: 12px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    overflow-x: clip;
  }
  .pto-team-layout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .pto-team-sidebar {
    display: contents;
  }
  .pto-team-action-card {
    order: 3;
    grid-column: 1 / -1;
  }
  .pto-team-tab-card {
    order: 1;
    grid-column: 1 / -1;
  }
  .pto-team-main {
    order: 2;
    grid-column: 1 / -1;
  }
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) {
    order: 4;
    min-width: 0;
  }
  .pto-team-hero {
    border-radius: 12px;
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }
  .pto-team-hero-content {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    align-items: center;
  }
  .pto-team-cover-wrap {
    width: 82px;
    height: 82px;
  }
  .pto-team-cover-img,
  .pto-team-cover-fallback {
    border-radius: 12px;
    border-width: 2px;
  }
  .pto-team-eyebrow {
    padding: 4px 8px;
    font-size: 0.68rem;
    line-height: 1;
  }
  .pto-team-title {
    margin: 8px 0 4px;
    font-size: 1.85rem;
  }
  .pto-team-meta {
    font-size: 0.88rem;
    line-height: 1.3;
  }
  .pto-team-hero-actions .bws-btn,
  .pto-team-quick-connect-form,
  .pto-team-quick-connect-form .bws-btn {
    width: 100%;
    justify-content: center;
  }
  .pto-team-hero-actions {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .pto-team-hero-panel {
    padding: 10px;
  }
  .pto-team-hero-panel .pto-section-label {
    margin-bottom: 7px;
    font-size: 0.72rem;
  }
  .pto-team-stat-grid {
    display: flex;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pto-team-stat-grid::-webkit-scrollbar {
    display: none;
  }
  .pto-team-stat-grid div {
    flex: 0 0 76px;
    padding: 8px;
    min-width: 0;
  }
  .pto-team-stat-grid strong {
    font-size: 1.08rem;
  }
  .pto-team-stat-grid span {
    font-size: 0.68rem;
  }
  .pto-team-next-event {
    margin-top: 7px;
    padding: 8px;
  }
  .pto-team-next-event small {
    font-size: 0.68rem;
  }
  .pto-team-next-event strong {
    font-size: 0.92rem;
  }
  .pto-team-next-event span {
    font-size: 0.74rem;
  }
  .pto-team-tab-card {
    padding: 9px 10px 10px;
    overflow: hidden;
  }
  .pto-team-tab-card .pto-section-label {
    margin-bottom: 7px;
  }
  .pto-team-tabs-nav {
    display: flex;
    gap: 7px;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pto-team-tabs-nav::-webkit-scrollbar {
    display: none;
  }
  .pto-team-tabs-nav .pto-tab-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    padding: 7px 10px;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .pto-team-overview-section {
    margin: 8px 0;
    padding: 13px;
  }
  .pto-team-registration-banner {
    width: calc(100% + 26px);
    height: auto;
    max-height: none;
    margin: 0 -13px 12px;
  }
  .pto-team-volunteer-feature .pto-volreq-ad-card {
    display: block;
  }
  .pto-team-volunteer-feature .pto-volreq-ad-image {
    width: 100%;
    height: 170px;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(197, 118, 0, 0.16);
  }
  .pto-team-volunteer-feature .pto-volreq-ad-body {
    padding: 13px;
  }
  .pto-team-news-preview-item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding: 8px;
  }
  .pto-team-news-preview-image img {
    height: 76px;
  }
  .pto-team-news-preview-item p {
    display: none;
  }
  .pto-team-gear-feature-head {
    flex-direction: column;
    gap: 8px;
  }
  .pto-team-gear-feature-grid {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pto-team-gear-feature-grid::-webkit-scrollbar {
    display: none;
  }
  .pto-team-gear-feature-card {
    flex: 0 0 min(74vw, 230px);
  }
  .pto-team-gear-feature-footer .bws-btn {
    width: 100%;
    justify-content: center;
  }
  .pto-team-sidebar-card,
  .pto-team-main .pto-tab-panel:not(#tab-volunteer) {
    padding: 10px;
  }
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) {
    min-height: 0;
  }
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) .pto-section-label {
    gap: 4px;
    margin-bottom: 6px;
    font-size: 0.64rem;
    line-height: 1.2;
  }
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) p,
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) .bws-badge,
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) .bws-text-sm {
    font-size: 0.78rem;
    line-height: 1.25;
  }
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) p {
    margin: 3px 0;
  }
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) .bws-badge {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pto-navy, #0f1b33);
    text-align: left;
    white-space: normal;
  }
  .pto-team-coaches {
    display: grid;
    gap: 5px;
    margin: 0;
  }
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card) .bws-btn {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 0.78rem;
  }
  .pto-team-registration-dates {
    font-size: 0.86rem;
    line-height: 1.2;
  }
  .pto-team-connect-row {
    align-items: flex-start;
    gap: 6px;
    flex-direction: column;
  }
}
@media (max-width: 380px) {
  .pto-team-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pto-team-sidebar > .pto-team-sidebar-card:not(.pto-team-action-card):not(.pto-team-tab-card):last-child {
    grid-column: 1 / -1;
  }
}