/*
 * "Continue with Google": one button for every Bot School page (kid.html header and sign-in prompts,
 * teachers.html, login.html). Markup (web/js/net/google-button.js googleButtonHtml() writes the same):
 *
 *   <a class="google-button" href="/api/auth/google?intent=…">
 *     <img class="google-button-g" src="/vendor/google/g-logo.svg" alt="" width="20" height="20" />
 *     <span class="google-button-label">Continue with Google</span>
 *   </a>
 *
 * Follows Google's Sign in with Google branding guidelines
 * (https://developers.google.com/identity/branding-guidelines, checked 2026-10-10):
 * - Text: "Continue with Google" (one of the three allowed strings), never "Google" alone.
 * - Logo: Google's own standard-colour "G" (web/vendor/google/, see its README), never resized relative to the
 *   button, recoloured or drawn by us; it sits on the button's own fill (white, or the dark theme's #131314).
 * - Themes: light (fill #FFFFFF, 1px inside stroke #747775, text #1F1F1F) by default, dark (fill #131314, stroke
 *   #8E918F, text #E3E3E3) when the page is dark (same rule as kid.html's theme: prefers-color-scheme unless
 *   data-theme='light', or data-theme='dark'). Neutral (#F2F2F2, no stroke) is available as .neutral.
 * - Font: Google Sans Medium 14/20, vendored (OFL), because the guidelines don't allow a custom font on the
 *   button. Bot School's own font stays everywhere else.
 * - Padding (web): 12px before the logo, 10px between logo and text, 12px after the text. Height 40px.
 * - Shape: pill. Rectangular and pill are both allowed; the pill matches Bot School's rounded look.
 * - Size: the guidelines allow scaling if the proportions are kept, so every measure is 40px-button measure ×
 *   --gsi-scale. Default 1.1 (44px tall: the minimum touch target for kids on iPads and touch Chromebooks);
 *   .big is 1.3 (52px) for the sign-in prompts and login.html.
 * - Icon-only (.icon-only): the "G" alone in a circle with the button's fill and stroke, which the guidelines
 *   allow as an action button. The label stays for screen readers. Used in the kid header when a lesson leaves
 *   no room (1024×768).
 * - States: a Material state layer (text colour at 8% on hover, 12% pressed) and a focus ring in the page's
 *   accent, as Google's own rendered buttons do. Nothing else about the button changes.
 */

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../vendor/google/google-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122,
    U+2212, U+FEFF, U+FFFD;
}

.google-button {
  --gsi-scale: 1.1;
  --gsi-fill: #ffffff;
  --gsi-stroke: #747775;
  --gsi-text: #1f1f1f;
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10px * var(--gsi-scale));
  height: calc(40px * var(--gsi-scale));
  min-width: min-content;
  padding: 0 calc(12px * var(--gsi-scale));
  border: 1px solid var(--gsi-stroke); /* inside: border-box */
  border-radius: 999px;
  background: var(--gsi-fill);
  color: var(--gsi-text);
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: calc(14px * var(--gsi-scale));
  line-height: calc(20px * var(--gsi-scale));
  letter-spacing: 0.25px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  vertical-align: middle;
}
.google-button[hidden] {
  display: none;
}
.google-button:hover,
.google-button:visited,
.google-button:active {
  color: var(--gsi-text);
  text-decoration: none;
}
.google-button-g {
  flex: none;
  display: block;
  width: calc(20px * var(--gsi-scale));
  height: calc(20px * var(--gsi-scale));
}
.google-button-label {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Material state layer: the text colour over the fill. */
.google-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gsi-text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
@media (hover: hover) {
  .google-button:hover::before {
    opacity: 0.08;
  }
}
.google-button:active::before {
  opacity: 0.12;
}
.google-button:focus-visible {
  outline: 3px solid var(--accent, #1f6feb);
  outline-offset: 2px;
}

.google-button.big {
  --gsi-scale: 1.3;
}
.google-button.block {
  display: flex;
  width: 100%;
}
.google-button.icon-only {
  width: calc(40px * var(--gsi-scale));
  padding: 0;
}
.google-button.icon-only .google-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.google-button.neutral {
  --gsi-fill: #f2f2f2;
  --gsi-stroke: #f2f2f2;
}

/* Dark theme, by the same rule as kid.html / login.html (meta color-scheme + data-theme override). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .google-button:not(.neutral) {
    --gsi-fill: #131314;
    --gsi-stroke: #8e918f;
    --gsi-text: #e3e3e3;
  }
}
:root[data-theme='dark'] .google-button:not(.neutral) {
  --gsi-fill: #131314;
  --gsi-stroke: #8e918f;
  --gsi-text: #e3e3e3;
}

@media (prefers-reduced-motion: reduce) {
  .google-button::before {
    transition: none;
  }
}