/* Pebble: the shared look (nature theme: greens, warm stones, friendly rounded type).
 * Used by the student page, the teacher page, the store and the landing page.
 * Load the fonts in the page head (this file does not import them):
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Fredoka:wght@500;600;700&display=swap">
 *
 * CLASS NAMES (all start with pb-)
 *   Page:      body.pb-body (the nature background), .pb-page (padded column; leaves room for the ZoodleBug Home
 *              button top-left via padding-left: var(--zb-home-space)), .pb-center (centred narrow column),
 *              .pb-logo (the Pebble logo image), .pb-h1 .pb-h2 (headings), .pb-muted (soft text), .pb-hint
 *   Panels:    .pb-panel (cream card), .pb-panel.pb-dark (deep green card), .pb-row (flex row, wraps), .pb-grid
 *   Buttons:   .pb-btn (+ .pb-primary green, .pb-warn amber, .pb-bad red, .pb-ghost, .pb-big, .pb-small, .pb-on)
 *              every button is at least 44px tall
 *   Forms:     .pb-input, .pb-code (the big 6-letter code box), .pb-label, .pb-check (checkbox + label row),
 *              .pb-select, .pb-switch (toggle row)
 *   Small bits: .pb-pill (rounded badge), .pb-diamonds (the diamond counter), .pb-chip, .pb-timer (+ .pb-low),
 *              .pb-badge-good / .pb-badge-bad
 *   Messages:  .pb-toast (+ .pb-toast-bad), .pb-err (inline error text), .pb-banner (big coloured strip)
 *   Numbers:   .pb-num .pb-frac .pb-n .pb-d .pb-whole .pb-minus  (what PebbleMath.html() writes; sized in em, so they
 *              grow with whatever font-size their parent has)
 *   Board:     .pb-board and everything inside it is styled by board.js itself (it injects its own small style block);
 *              this file only gives it a nicer frame (.pb-board-frame)
 *   Table:     .pb-table (simple report / leaderboard table), .pb-me (the row that is "you")
 * Colour variables are on :root (--pb-*), so a page can reuse them.
 */
:root {
  --pb-leaf: #2f8f3a;
  --pb-leaf-dk: #1f6a2a;
  --pb-moss: #6cb44a;
  --pb-forest: #12361f;
  --pb-forest2: #1d4d2c;
  --pb-stone: #efe6d2;
  --pb-stone2: #e0d3b2;
  --pb-stone3: #b9a77c;
  --pb-bark: #7a4f2a;
  --pb-cream: #fbf6e8;
  --pb-ink: #1d3a2a;
  --pb-ink-soft: #566b5c;
  --pb-sun: #f5a623;
  --pb-sun-dk: #8a5600;
  --pb-sky: #bfe9ff;
  --pb-good: #1f7a3c;
  --pb-bad: #b3303f;
  --pb-diamond: #2aa5d6;
  --zb-home-space: 190px;
  --zb-home-top: 58px;
}
.pb-body, .pb-body * { box-sizing: border-box; }
html:has(.pb-body) { height: 100%; }
.pb-body {
  margin: 0; min-height: 100%;
  font-family: "Andika", "Fredoka", "Trebuchet MS", Arial, sans-serif;
  color: var(--pb-ink);
  background:
    radial-gradient(900px 420px at 10% -8%, #8fd081 0, transparent 62%),
    radial-gradient(800px 460px at 100% 6%, #b5e39a 0, transparent 60%),
    linear-gradient(#d7f0c4, #bfe3a6 55%, #a6d58b);
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}
.pb-body button { font: inherit; cursor: pointer; color: inherit; }
.pb-body button:focus-visible, .pb-body a:focus-visible, .pb-body input:focus-visible, .pb-body select:focus-visible, .pb-body [tabindex]:focus-visible {
  outline: 3px solid var(--pb-sun); outline-offset: 2px;
}
.pb-body [hidden] { display: none !important; }

/* ---------- page ---------- */
.pb-page { min-height: 100%; padding: 14px 18px 56px; padding-left: max(18px, var(--zb-home-space)); }
.pb-center { margin: 0 auto; width: 100%; max-width: 560px; text-align: center; padding: 16px; }
.pb-logo { display: block; margin: 0 auto 6px; max-width: min(420px, 80%); height: auto; }
.pb-h1, .pb-h2 { font-family: "Fredoka", "Andika", sans-serif; margin: 0 0 8px; color: var(--pb-forest); line-height: 1.15; }
.pb-h1 { font-size: clamp(28px, 5vw, 42px); font-weight: 700; }
.pb-h2 { font-size: clamp(22px, 3.6vw, 30px); font-weight: 600; }
.pb-muted { color: var(--pb-ink-soft); }
.pb-hint { color: var(--pb-forest2); font-size: 18px; margin: 6px 0; }

/* ---------- panels ---------- */
.pb-panel {
  background: var(--pb-cream); border: 3px solid var(--pb-stone3); border-radius: 20px;
  padding: 16px 18px; box-shadow: 0 5px 0 rgba(60, 80, 40, .22);
}
.pb-panel.pb-dark { background: var(--pb-forest2); border-color: var(--pb-forest); color: var(--pb-cream); }
.pb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pb-grid { display: grid; gap: 12px; }

/* ---------- buttons (all at least 44px tall) ---------- */
.pb-btn {
  min-height: 48px; min-width: 48px; padding: 8px 18px; border-radius: 14px;
  border: 3px solid var(--pb-stone3); background: var(--pb-cream); color: var(--pb-forest);
  font-weight: 700; font-size: 17px; box-shadow: 0 3px 0 rgba(60, 60, 30, .3);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.pb-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(60, 60, 30, .3); }
.pb-btn.pb-primary { background: var(--pb-leaf); border-color: var(--pb-leaf-dk); color: #fff; }
.pb-btn.pb-warn { background: #ffe9b8; border-color: var(--pb-sun-dk); color: #5a3800; }
.pb-btn.pb-bad { background: #fde1e4; border-color: var(--pb-bad); color: #7d1625; }
.pb-btn.pb-ghost { background: transparent; box-shadow: none; border-color: rgba(18, 54, 31, .35); }
.pb-btn.pb-big { min-height: 64px; font-size: 22px; padding: 10px 28px; }
.pb-btn.pb-small { min-height: 44px; font-size: 15px; padding: 4px 12px; }
.pb-btn.pb-on, .pb-btn[aria-pressed="true"] { background: var(--pb-forest2); border-color: var(--pb-forest); color: var(--pb-cream); }
.pb-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- forms ---------- */
.pb-label { display: block; font-weight: 700; margin: 8px 0 4px; text-align: left; }
.pb-input, .pb-select {
  width: 100%; min-height: 52px; padding: 8px 14px; font: inherit; font-size: 20px;
  border: 3px solid var(--pb-stone3); border-radius: 14px; background: #fff; color: var(--pb-ink);
}
.pb-code {
  width: 100%; min-height: 84px; font-family: "Fredoka", "Andika", sans-serif; font-weight: 700;
  font-size: clamp(40px, 11vw, 60px); letter-spacing: .22em; text-align: center; text-transform: uppercase;
  border: 4px solid var(--pb-leaf); border-radius: 18px; background: #fff; color: var(--pb-forest);
  padding: 6px 10px 6px calc(10px + .22em);
}
.pb-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; cursor: pointer; text-align: left; }
.pb-check input { width: 28px; height: 28px; flex: 0 0 auto; accent-color: var(--pb-leaf); }
.pb-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 700; }

/* ---------- small bits ---------- */
.pb-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 999px;
  background: var(--pb-cream); border: 3px solid var(--pb-stone3); font-weight: 700; color: var(--pb-forest);
}
.pb-diamonds { border-color: var(--pb-diamond); color: #0a5b7d; background: #eaf8ff; font-size: 18px; }
.pb-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--pb-stone2); font-size: 14px; font-weight: 700; }
.pb-timer { font-family: "Fredoka", "Andika", sans-serif; font-size: 28px; font-weight: 700; min-width: 4.2ch; text-align: center; }
.pb-timer.pb-low { color: var(--pb-bad); animation: pb-pulse 1s ease-in-out infinite; }
@keyframes pb-pulse { 50% { transform: scale(1.12); } }
.pb-badge-good { background: #d8f0d8; color: #0f4a22; border-color: var(--pb-good); }
.pb-badge-bad { background: #fde1e4; color: #7d1625; border-color: var(--pb-bad); }

/* ---------- messages ---------- */
.pb-toast {
  position: fixed; left: 50%; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 12px 20px; border-radius: 16px; z-index: 9000;
  background: var(--pb-forest2); color: var(--pb-cream); font-weight: 700; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.pb-toast.pb-toast-bad { background: #8a1c28; }
.pb-err { color: #8a1c28; font-weight: 700; min-height: 24px; }
.pb-banner {
  padding: 10px 18px; border-radius: 16px; font-family: "Fredoka", "Andika", sans-serif; font-weight: 700;
  font-size: clamp(20px, 4vw, 30px); text-align: center; background: var(--pb-sun); color: #3a2300; border: 3px solid var(--pb-sun-dk);
}

/* ---------- numbers: what PebbleMath.html() writes ---------- */
.pb-num { display: inline-flex; align-items: center; justify-content: center; gap: .12em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-whole { line-height: 1; }
.pb-minus { line-height: 1; margin-right: .02em; }
.pb-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; vertical-align: middle; }
.pb-n { padding: 0 .14em .06em; border-bottom: .09em solid currentColor; font-size: .66em; line-height: 1.05; text-align: center; }
.pb-d { padding: .06em .14em 0; font-size: .66em; line-height: 1.05; text-align: center; }

/* ---------- board frame and tables ---------- */
.pb-board-frame { background: rgba(255, 255, 255, .35); border: 3px solid var(--pb-stone3); border-radius: 22px; padding: 6px; }
.pb-table { width: 100%; border-collapse: collapse; font-size: 18px; }
.pb-table th, .pb-table td { padding: 8px 12px; text-align: left; border-bottom: 2px solid var(--pb-stone2); }
.pb-table th { font-family: "Fredoka", "Andika", sans-serif; font-weight: 600; }
.pb-table tr.pb-me td { background: #fff4c4; font-weight: 700; }

@media (max-width: 640px) {
  .pb-page { padding: 10px 12px 48px; padding-left: max(12px, var(--zb-home-space)); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-timer.pb-low { animation: none; }
}