/* Shared Login/Sign Up dialog + Account-section trigger buttons, built by
   shared/coa-auth.js. Every color is var(--name, fallback) so this degrades
   sanely on products missing some of the usual custom-property set (e.g.
   Ultimate Tic Tac Toe/Pipe Game, which are dark-only and don't define
   --surface-color/--accent-green/--accent-pink/--focus-color/--on-accent at
   all). Products built entirely with Tailwind utility classes (Math
   Collapse, Math Flashcards) don't load this file - they get equivalent
   markup hand-authored with Tailwind classes instead, so it isn't tested
   for them.

   Fallback colors use CSS light-dark() (not a single fixed hex) so a
   product with no matching custom property still gets a correct color for
   its OWN active theme, not just one guess - this relies on color-scheme
   being declared on the page's theme root, which is now true sitewide. A
   product with no light/dark distinction at all (fixed-theme games like
   Ultimate Tic Tac Toe/Pipe Game) declares color-scheme: dark
   unconditionally, so light-dark() correctly resolves to the dark branch
   there too - "no theme toggle" is treated as dark mode throughout.
*/

.coa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}

/* --- Account-section trigger buttons, used inside each product's own
   Settings surface (not inside the dialog below). --- */
.coa-auth-account-section {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border-color, var(--border-light, #475569));
}
.coa-auth-login-btn,
.coa-auth-signup-btn {
  display: block;
  width: 100%;
  background: transparent;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-color, light-dark(#111827, #ffffff));
  font-family: inherit;
}
.coa-auth-login-btn {
  border: 2px solid var(--accent-green, light-dark(#097732, #4ade80));
  margin-bottom: 10px;
}
.coa-auth-signup-btn {
  border: 2px solid var(--accent-pink, light-dark(#800d48, #f472b6));
}
/* Subtle lighten (dark mode)/darken (light mode) tint on hover, not a full
   color swap - mixes in the page's own text-color at low strength, which
   is white in dark mode and black in light mode, so one rule does the
   right thing in both themes without touching the text color at all.
   Keyboard focus keeps its own clear outline on top of the same tint,
   matching the sitewide focus-ring convention - a subtle tint alone isn't
   enough for keyboard users to see where focus is. */
.coa-auth-login-btn:hover,
.coa-auth-login-btn:focus-visible,
.coa-auth-signup-btn:hover,
.coa-auth-signup-btn:focus-visible {
  /* !important: several host products define their own generic
     `button:hover:not(:disabled) { background-color: ... }` rule, which
     (element + 2 pseudo-classes) outranks this class selector on
     specificity alone and silently repaints these buttons in the host's
     own button color instead of this widget's tint - confirmed on the
     Ultimate Tic Tac Toe pilot. */
  background: color-mix(in srgb, var(--text-color, light-dark(#000, #fff)) 12%, transparent) !important;
}
.coa-auth-login-btn:focus-visible,
.coa-auth-signup-btn:focus-visible {
  outline: 3px solid var(--focus-color, #fdfd96);
  outline-offset: 2px;
}
.coa-auth-account-status:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-weight: bold;
  color: var(--text-color, light-dark(#111827, #ffffff));
}
.coa-auth-logout-btn {
  background: transparent;
  border: 2px solid var(--border-color, var(--border-light, #475569));
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: bold;
  cursor: pointer;
  color: var(--text-color, light-dark(#111827, #ffffff));
  font-family: inherit;
}
.coa-auth-logout-btn:hover,
.coa-auth-logout-btn:focus-visible {
  border-color: var(--focus-color, #fdfd96);
}

/* --- Signed-in account pill (replaces the name+Log Out pair above once a
   real account is signed in) and the Account Menu dialog it opens. The
   whole pill - avatar circle AND name - is one <button>, not two separate
   clickable pieces, so its children are decorative/pointer-events:none. */
.coa-auth-account-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 4px 16px;
  border-radius: 999px;
  /* Dark gray in dark mode, light gray in light mode - literally
     --surface-color's own two values, restated as the light-dark()
     fallback for products that don't define that custom property at all
     (see the file-level comment at the top of this file). */
  background: var(--surface-color, light-dark(#dddddd, #242424));
  border: 2px solid var(--accent-green, light-dark(#097732, #4ade80));
  /* Was a flat #fff fallback - correct for dark mode only, so a product
     with no --text-color (e.g. Access-a-Bible, which names its
     equivalent --text-main instead) got unreadable white-on-light-gray
     text in light mode. Matches the theme-aware light-dark() fallback
     pattern the two properties above already use. */
  color: var(--text-color, light-dark(#111827, #ffffff));
  font-weight: bold;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}
.coa-auth-account-pill:hover,
.coa-auth-account-pill:focus-visible {
  outline: 3px solid var(--focus-color, #fdfd96);
  outline-offset: 2px;
}
.coa-auth-avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  flex-shrink: 0;
  border-radius: 50%;
  /* Page background, not --surface-color - the circle needs to read as a
     distinct badge against the pill's own --surface-color fill, not blend
     into it. */
  background: var(--bg-color, light-dark(#f5f5f5, #121212));
  border: 2px solid var(--accent-pink, light-dark(#800d48, #f472b6));
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.auth-account-firstname {
  max-width: 10em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.coa-auth-account-menu {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  width: min(320px, calc(100% - 48px));
  max-height: 85vh;
  background: var(--bg-color, light-dark(#f5f5f5, #121212));
  color: var(--text-color, light-dark(#111827, #ffffff));
  border: 2px solid var(--border-light, var(--border-color, #475569));
  border-radius: 12px;
  overflow: hidden;
}
.coa-auth-account-menu::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.coa-auth-account-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 2px solid var(--border-light, var(--border-color, #475569));
}
.coa-auth-account-menu-header h2 {
  margin: 0;
  font-size: 19px;
}
.coa-auth-account-menu-close-btn {
  flex-shrink: 0;
  width: 2.3em;
  height: 2.3em;
  background: transparent;
  border: 2px solid var(--border-light, var(--border-color, #475569));
  border-radius: 50%;
  color: var(--text-color, light-dark(#111827, #ffffff));
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.coa-auth-account-menu-close-btn:hover,
.coa-auth-account-menu-close-btn:focus-visible {
  background-color: var(--border-light, var(--border-color, #475569));
  color: var(--bg-color, light-dark(#f5f5f5, #121212));
}
.coa-auth-account-menu-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  overflow-y: auto;
  text-align: left;
}
.coa-auth-account-menu-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 2px;
  border-bottom: 2px solid var(--border-light, var(--border-color, #475569));
}
.coa-auth-account-menu-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--surface-color, var(--bg-color, light-dark(#e5e5e5, #1e1e1e)));
  border: 2px solid var(--accent-pink, light-dark(#800d48, #f472b6));
  font-weight: 800;
  font-size: 1.1rem;
}
.coa-auth-account-menu-label {
  margin: 0;
  font-size: 0.8rem;
  color: var(--border-light, light-dark(#444444, #aaaaaa));
}
.coa-auth-account-menu-name {
  margin: 2px 0 0;
  font-weight: bold;
  font-size: 1.05rem;
  word-break: break-word;
}
.coa-auth-account-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-color, light-dark(#111827, #ffffff));
  border: 2px solid var(--border-color, var(--border-light, #475569));
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  /* Now a real <a href> (navigates to profile.html/favorites.html), not a
     button - box-sizing/underline/hover-color resets so it still reads as
     a menu item, not a link. */
  text-decoration: none;
  box-sizing: border-box;
}
.coa-auth-account-menu-link:hover,
.coa-auth-account-menu-link:focus-visible,
.coa-auth-account-menu-link:visited {
  color: var(--text-color, light-dark(#111827, #ffffff));
  text-decoration: none;
}
.coa-auth-account-menu-link:hover,
.coa-auth-account-menu-link:focus-visible {
  border-color: var(--accent-green, light-dark(#097732, #4ade80));
}
.coa-auth-account-menu-logout-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  color: var(--text-color, light-dark(#111827, #ffffff));
  /* Light red border in dark mode, dark red border in light mode - a
     deliberately different accent from every other button here (no
     shared sitewide "danger" custom property exists) since logging out
     is a one-way, disruptive action worth visually distinguishing from
     "My Profile"/"Favorites" above. */
  border: 2px solid var(--error-color, light-dark(#b91c1c, #f87171));
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  margin-top: 6px;
}
.coa-auth-account-menu-logout-btn:hover,
.coa-auth-account-menu-logout-btn:focus-visible {
  background: color-mix(in srgb, var(--error-color, light-dark(#b91c1c, #f87171)) 15%, transparent);
  outline: 3px solid var(--focus-color, #fdfd96);
  outline-offset: 2px;
}

/* --- Favorite ("heart") icon-only toggle button, used next to every
   product's Launch App/Play Now/Get it now button (its own info page AND
   every hub listing card on index.html/apps.html/games.html), plus the
   remove button on each card on favorites.html. Deliberately sized to
   match .btn's own box model exactly (10px padding + 2px border + 24px
   content = 48px square, vs .btn's 10px padding + 2px border + 15px*1.6
   line-height text = 48px tall) so it lines up with whichever .btn sits
   next to it despite having no text of its own - height matches via that
   shared math, not a hard-coded value. White/black border (same
   max-contrast convention as .coa-auth-field input above) and a neutral
   heart *outline* when not favorited; both the heart and a background
   tint turn pink once favorited. */
.coa-favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* Matches .app-card's own border when not favorited, so the button
     reads as part of the card rather than calling attention to itself -
     switches to the higher-contrast text-color border once favorited
     (see .is-favorited below), where standing out is exactly the point. */
  border: 2px solid var(--border-light, light-dark(#444444, #aaaaaa));
  border-radius: 8px;
  padding: 10px;
  margin-top: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: all 150ms ease;
  flex-shrink: 0;
  /* Every neighboring .btn is display:inline-block text, so the two sit
     in the same inline-level baseline-alignment context by default - but
     this button has no text of its own to set a matching baseline,
     which left it sitting visibly lower than the buttons next to it. */
  vertical-align: middle;
}
.coa-favorite-btn:hover,
.coa-favorite-btn:focus-visible {
  outline: 3px solid var(--focus-color, #fdfd96);
  outline-offset: 2px;
}
.coa-favorite-btn.is-favorited {
  border-color: var(--text-color, light-dark(#000000, #ffffff));
  background: color-mix(in srgb, var(--accent-pink, light-dark(#800d48, #f472b6)) 35%, transparent);
}
.coa-favorite-heart-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  pointer-events: none;
}
.coa-favorite-heart-icon path {
  fill: none;
  stroke: var(--text-color, light-dark(#000000, #ffffff));
  stroke-width: 2;
  transition: all 150ms ease;
}
.coa-favorite-btn.is-favorited .coa-favorite-heart-icon path {
  fill: var(--accent-pink, light-dark(#800d48, #f472b6));
  stroke: var(--accent-pink, light-dark(#800d48, #f472b6));
}

/* --- The Login/Sign Up <dialog> itself --- */
.coa-auth-dialog {
  /* Explicit centering, not the browser default margin:auto trick - several
     product stylesheets reset every element to margin:0 (e.g. `* { margin:
     0; }`), which silently defeats that default and left this pinned to the
     top-left corner instead of centered. */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 420px;
  width: calc(100% - 48px);
  background: var(--surface-color, var(--modal-bg, light-dark(#ffffff, #1e1e1e)));
  color: var(--text-color, light-dark(#111827, #ffffff));
  border: 2px solid var(--border-color, var(--border-light, #475569));
  border-radius: 16px;
  padding: 0;
}
.coa-auth-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.coa-auth-dialog-inner {
  position: relative;
  padding: 28px 26px;
}
.coa-auth-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-color, light-dark(#111827, #ffffff));
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}
.coa-auth-close:hover,
.coa-auth-close:focus-visible {
  color: var(--focus-color, #fdfd96);
}
.coa-auth-heading {
  margin: 0 0 18px;
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--text-color, light-dark(#111827, #ffffff));
}
.coa-auth-banner {
  background: color-mix(in srgb, var(--error-color, light-dark(#b91c1c, #f87171)) 16%, transparent);
  border-left: 3px solid var(--error-color, light-dark(#b91c1c, #f87171));
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.coa-auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  color: var(--text-color, light-dark(#111827, #ffffff));
  border: 2px solid var(--border-color, var(--border-light, #475569));
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  white-space: normal;
  text-align: center;
}
.coa-auth-google-btn:hover,
.coa-auth-google-btn:focus-visible {
  /* !important: see the matching login/signup hover rule above - same host
     `button:hover:not(:disabled)` specificity collision. */
  background: color-mix(in srgb, var(--text-color, light-dark(#000, #fff)) 12%, transparent) !important;
}
.coa-auth-google-btn:focus-visible {
  outline: 3px solid var(--focus-color, #fdfd96);
  outline-offset: 2px;
}
.coa-auth-google-btn svg {
  flex-shrink: 0;
}

.coa-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  /* No --border-color fallback here on purpose - a product's own
     --border-color (e.g. Ultimate Tic Tac Toe's #475569) is tuned for
     subtle container borders, not for text/line contrast on a dark
     background, and read as too low-contrast in testing. Falls straight
     from --border-light to the literal light-dark() pair matching root
     style.css's own --border-light values instead. */
  color: var(--border-light, light-dark(#444444, #aaaaaa));
  font-size: 0.85rem;
}
.coa-auth-divider::before,
.coa-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-light, light-dark(#444444, #aaaaaa));
}

.coa-auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* The rest of this dialog is center-aligned by design, but several host
     pages set `body { text-align: center }`, which - without this - would
     otherwise be inherited by the field labels/inputs/error text too. */
  text-align: left;
}
.coa-auth-field label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.coa-auth-field input {
  width: 100%;
  background: var(--bg-color, light-dark(#f5f5f5, #121212));
  color: var(--text-color, light-dark(#111827, #ffffff));
  /* Higher-contrast outline than the muted --border-color used elsewhere -
     white in dark mode, black in light mode (or just white, on a page with
     no light mode at all - treated as dark throughout this file). */
  border: 2px solid var(--text-color, light-dark(#000000, #ffffff));
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
}
.coa-auth-field input:focus-visible {
  outline: 3px solid var(--focus-color, #fdfd96);
  outline-offset: 2px;
}
.coa-auth-field.has-error input {
  border-color: var(--error-color, light-dark(#b91c1c, #f87171));
}
.coa-auth-field-error {
  color: var(--error-color, light-dark(#b91c1c, #f87171));
  font-size: 0.85rem;
  margin: 6px 0 0;
  font-weight: bold;
}
.coa-auth-field-error:empty {
  display: none;
}

.coa-auth-password-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.coa-auth-password-row input {
  flex: 1;
  /* A real floor (not 0) so the row actually wraps the toggle onto its own
     line once space is tight, instead of just squeezing the input down to
     an unusably thin sliver forever - a flex item's default willingness to
     shrink is what a plain 0 here would rely on, and wrapping only kicks
     in once that floor is reached. */
  min-width: 100px;
}
/* Yellow ("Show" - password currently hidden, clicking reveals it) vs pink
   ("Hide" - password currently visible, clicking hides it again) - the same
   two accent colors used for the "Recommended for Low Vision"/"Desktop
   Recommended" flags elsewhere on the site, reused here as a color cue for
   which state a toggle is in rather than introducing a third accent. */
.coa-auth-password-toggle {
  flex-shrink: 0;
  background: transparent;
  border: 2px solid var(--focus-color, #fdfd96);
  color: var(--text-color, light-dark(#111827, #ffffff));
  font-weight: bold;
  font-size: 0.85rem;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.coa-auth-password-toggle:focus-visible {
  outline: 3px solid var(--focus-color, #fdfd96);
  outline-offset: 2px;
}
.coa-auth-password-toggle.is-showing {
  border-color: var(--accent-pink, #f472b6);
  color: var(--border-light, light-dark(#444444, #aaaaaa));
}

.coa-auth-submit-btn {
  width: 100%;
  text-align: center;
  /* !important: a host page's own `button:hover:not(:disabled)` rule
     (element + 2 pseudo-classes) outranks this class selector's base
     background even with no hover rule of ours to lose to directly - it
     just overwrites this declaration outright on hover. Confirmed on the
     Ultimate Tic Tac Toe pilot, which repainted this button its own navy
     button-hover blue instead of the accent-green background. */
  background: var(--accent-green, light-dark(#097732, #4ade80)) !important;
  /* Was a flat black fallback - correct against dark mode's bright-green
     fallback background, but the button's OWN background already flips to
     a dark green in light mode (see above), so black-on-black-green was
     unreadable there. Opposite pairing from the page-level --text-color
     fallback above, since this button's background inverts opposite to
     the page's usual light/dark surface. */
  color: var(--on-accent, light-dark(#ffffff, #000000));
  border: 2px solid var(--accent-green, light-dark(#097732, #4ade80));
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: bold;
  font-family: inherit;
  cursor: pointer;
  margin-top: 4px;
}
.coa-auth-submit-btn:hover,
.coa-auth-submit-btn:focus-visible {
  outline: 3px solid var(--focus-color, #fdfd96);
  outline-offset: 2px;
}

.coa-auth-switch {
  text-align: center;
  margin: 18px 0 0;
  font-size: 0.9rem;
}
.coa-auth-switch-btn {
  background: none;
  border: none;
  color: var(--focus-color, #fdfd96);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-weight: bold;
  font-family: inherit;
  padding: 0;
}

button:disabled,
input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}