/* Figtree (SIL Open Font Licence, see fonts/Figtree-OFL.txt), served from this site so pages never
   contact a font service. One variable file per character set covers every weight. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bopstars brand on top of the Atlassian Design System tokens (design/tokens.css, loaded before this
   file). ADS's brand and selected roles use Bopstars green instead of Atlassian blue; its blue stays
   for "information" only. Coral and sunshine yellow are Bopstars accents for stars and rewards. */
:root {
  --bs-green-50: #e7f4f1;
  --bs-green-100: #cfe9e3;
  --bs-green-200: #9fd3c8;
  --bs-green-500: #1f8f82;
  --bs-green-600: #126b63;
  --bs-green-700: #0f5b54;
  --bs-green-800: #0b4a44;
  --bs-green-900: #0b3d38;
  --bs-coral: #f26b4f;
  --bs-coral-subtle: #ffe0d7;
  --bs-sun: #f6c85f;
  --bs-sun-subtle: #fff8e6;
  --bs-sun-border: #f6c85f80;
  --bs-sun-track: #f6c85f55;
  --bs-coral-text: #c2412a;
  --bs-coral-text-bold: #9a2f1a;

  --ds-background-brand-subtlest: var(--bs-green-50);
  --ds-background-brand-subtlest-hovered: var(--bs-green-100);
  --ds-background-brand-subtlest-pressed: var(--bs-green-200);
  --ds-background-brand-bold: var(--bs-green-600);
  --ds-background-brand-bold-hovered: var(--bs-green-700);
  --ds-background-brand-bold-pressed: var(--bs-green-800);
  --ds-background-brand-boldest: var(--bs-green-900);
  --ds-background-brand-boldest-hovered: var(--bs-green-700);
  --ds-background-brand-boldest-pressed: var(--bs-green-800);
  --ds-background-selected: var(--bs-green-50);
  --ds-background-selected-hovered: var(--bs-green-100);
  --ds-background-selected-pressed: var(--bs-green-200);
  --ds-background-selected-bold: var(--bs-green-600);
  --ds-background-selected-bold-hovered: var(--bs-green-700);
  --ds-background-selected-bold-pressed: var(--bs-green-800);
  --ds-border-brand: var(--bs-green-600);
  --ds-border-selected: var(--bs-green-600);
  --ds-border-focused: var(--bs-green-500);
  --ds-text-brand: var(--bs-green-600);
  --ds-text-selected: var(--bs-green-600);
  --ds-icon-brand: var(--bs-green-600);
  --ds-icon-selected: var(--bs-green-600);
  --ds-link: var(--bs-green-600);
  --ds-link-pressed: var(--bs-green-800);
  --ds-blanket-selected: #126b6314;
  --ds-chart-brand: var(--bs-green-500);
  --ds-chart-brand-hovered: var(--bs-green-600);

  /* The app's own colour names, now pointing at ADS roles. Pages move to ADS tokens directly as
     each one is redesigned; these keep the rest looking right in the meantime. */
  --bg: var(--ds-surface);
  --bg-soft: var(--ds-surface);
  --surface: var(--ds-background-neutral);
  --panel: var(--ds-background-brand-subtlest);
  --card: var(--ds-surface-raised);
  --text: var(--ds-text);
  --muted: var(--ds-text-subtle);
  --primary: var(--ds-background-brand-bold);
  --primary-soft: var(--bs-green-500);
  --accent: var(--bs-coral);
  --accent-soft: var(--bs-coral-subtle);
  --sun: var(--bs-sun);
  --line: var(--ds-border);
  --shadow: var(--ds-shadow-overlay);
  --success: var(--ds-text-success);
  --warning: var(--ds-text-warning);
  --danger: var(--ds-text-danger);
}

:focus-visible {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 2px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ds-font-family-body);
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
}

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

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea {
  font: inherit;
}

.brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 1.2rem;
}

.brand-wrap-inline { margin-bottom: 24px; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  color: var(--muted);
  font-weight: 600;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.story {
  margin-top: 42px;
}

.story h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.06em;
}

.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 54px;
  padding-top: 48px;
}

.footer {
  margin-top: 54px;
  padding: 22px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.footer p {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.footer small {
  color: var(--muted);
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

.sidebar {
  padding: 20px 12px;
  border-right: 1px solid var(--ds-border);
  background: var(--ds-surface-sunken);
  color: var(--ds-text);
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 20px;
}

.side-nav a {
  padding: 0.6rem 0.75rem;
  border-radius: var(--ds-radius-medium);
  color: var(--ds-text-subtle);
  font-weight: 500;
}

.side-nav a:hover {
  background: var(--ds-background-neutral-subtle-hovered);
  color: var(--ds-text);
}

.side-nav a.active {
  background: var(--ds-background-selected);
  color: var(--ds-text-selected);
  font-weight: 600;
}

.main-panel {
  max-width: 1100px;
  width: 100%;
  padding: 42px 38px 64px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  padding: 0.9rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kid-avatar {
  --skin: #c9825b;
  --hair: #3d2924;
  --shirt: #126b63;
  --background: #e4f1ea;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 180px;
  height: 210px;
  overflow: hidden;
  border: 0;
  border-radius: 4px 50% 50% 50%;
  background: var(--background);
  vertical-align: middle;
  animation: kid-bob 4s ease-in-out infinite;
}

.kid-face {
  position: absolute;
  z-index: 2;
  left: 22%;
  top: 22%;
  width: 56%;
  height: 52%;
  border-radius: 46% 46% 48% 48%;
  background: var(--skin);
}

.kid-hair {
  position: absolute;
  z-index: 3;
  left: 17%;
  top: 11%;
  width: 66%;
  height: 28%;
  border-radius: 60% 60% 35% 35%;
  background: var(--hair);
}

.kid-body {
  position: absolute;
  z-index: 1;
  left: 9%;
  bottom: -13%;
  width: 82%;
  height: 48%;
  border-radius: 50% 50% 0 0;
  background: var(--shirt);
}

.kid-eye {
  position: absolute;
  top: 43%;
  width: 9%;
  height: 11%;
  border-radius: 50%;
  background: var(--text);
}

.kid-eye-left { left: 25%; }
.kid-eye-right { right: 25%; }

.kid-mouth {
  position: absolute;
  left: 39%;
  top: 67%;
  width: 22%;
  height: 12%;
  border-bottom: 2px solid var(--text);
  border-radius: 0 0 50% 50%;
}

.kid-accessory {
  position: absolute;
  z-index: 4;
  display: none;
}

.avatar-sun,
.avatar-rainbow { --background: #fff0b7; --shirt: #f26b4f; }
.avatar-star { --background: #fff0b7; --skin: #f2c39c; --hair: #6c442f; --shirt: #126b63; }
.avatar-heart,
.avatar-flower { --background: #ffe0d7; --shirt: #d95778; }
.avatar-bolt,
.avatar-rocket { --background: #dbe8ff; --shirt: #3256a8; }
.avatar-music,
.avatar-headphones { --background: #eadfff; --shirt: #8050a8; }
.avatar-gem,
.avatar-crown { --background: #d9f1ed; --shirt: #168a83; }
.avatar-smile,
.avatar-cloud { --background: #eaf4f5; --shirt: #46a7a0; }
.avatar-leaf,
.avatar-flower { --background: #e4f1ea; --shirt: #3f8c5d; }
.avatar-moon,
.avatar-book { --background: #e8e5d8; --shirt: #456b70; }
.avatar-cap,
.avatar-skate { --background: #f6e1bc; --shirt: #d88935; }
.avatar-glasses,
.avatar-soccer { --background: #f0e1d8; --shirt: #bb5b47; }

.avatar-heart,
.avatar-bolt,
.avatar-gem,
.avatar-leaf,
.avatar-rainbow,
.avatar-moon,
.avatar-crown,
.avatar-soccer {
  --skin: #5d362c;
  --hair: #211b1c;
}

.avatar-sun,
.avatar-music,
.avatar-smile,
.avatar-cloud,
.avatar-rocket,
.avatar-flower,
.avatar-book,
.avatar-skate {
  --skin: #e7ad82;
  --hair: #a55232;
}

.avatar-cap,
.avatar-glasses,
.avatar-headphones,
.avatar-rainbow {
  --skin: #f2c39c;
  --hair: #6c442f;
}

.avatar-sun {
  --skin: #f2c39c;
  --hair: #6c442f;
  --shirt: #f26b4f;
}

.avatar-bolt .kid-hair { border-radius: 20% 70% 20% 55%; transform: rotate(-10deg); }
.avatar-music .kid-hair,
.avatar-headphones .kid-hair { height: 38%; border-radius: 50%; }
.avatar-leaf .kid-hair,
.avatar-flower .kid-hair { border-radius: 50% 50% 20% 60%; }
.avatar-cap .kid-hair { top: 4%; height: 17%; border-radius: 50% 50% 10% 10%; }
.avatar-glasses .kid-accessory { display: block; left: 25%; top: 39%; width: 50%; height: 13%; border-top: 2px solid var(--text); border-bottom: 2px solid var(--text); }
.avatar-headphones .kid-accessory { display: block; left: 13%; top: 23%; width: 74%; height: 43%; border: 3px solid var(--accent); border-bottom: 0; border-radius: 50% 50% 0 0; }
.avatar-crown .kid-accessory { display: block; left: 31%; top: 3%; width: 38%; height: 15%; background: var(--sun); clip-path: polygon(0 100%, 12% 0, 42% 60%, 62% 0, 88% 60%, 100% 0, 100% 100%); }
.avatar-cap .kid-accessory { display: block; left: 15%; top: 5%; width: 70%; height: 12%; border-radius: 50%; background: var(--accent); transform: rotate(-7deg); }
.avatar-rocket .kid-accessory,
.avatar-soccer .kid-accessory { display: block; right: 8%; top: 10%; width: 19%; height: 19%; border-radius: 50%; background: var(--sun); }
.avatar-star .kid-accessory { display: block; right: 11%; top: 9%; width: 22%; height: 22%; background: var(--accent); clip-path: polygon(50% 0, 61% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 39% 36%); animation: star-pulse 2.8s ease-in-out infinite; }
.avatar-sun .kid-hair { height: 31%; border-radius: 18% 18% 35% 35%; clip-path: polygon(0 100%, 0 42%, 12% 0, 22% 35%, 35% 0, 46% 35%, 60% 0, 70% 35%, 86% 0, 100% 42%, 100% 100%); }

.avatar-star .kid-eye {
  animation: kid-blink 4.8s ease-in-out infinite;
}

.avatar-star .kid-eye-right {
  animation-delay: 0.04s;
}

.avatar-star .kid-mouth {
  animation: kid-smile 4.8s ease-in-out infinite;
}

@keyframes kid-bob {
  0%,
100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-2px) rotate(1deg); }
}

@keyframes kid-blink {
  0%,
40%,
48%,
100% { transform: scaleY(1); }
  44% { transform: scaleY(0.08); }
}

@keyframes kid-smile {
  0%,
59%,
100% {
    width: 22%;
    height: 12%;
    left: 39%;
    top: 67%;
    border-bottom-width: 2px;
  }
  67%,
86% {
    width: 34%;
    height: 23%;
    left: 33%;
    top: 61%;
    border-bottom-width: 3px;
  }
}

@keyframes star-pulse {
  0%,
100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.08) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .kid-avatar,
.avatar-star .kid-eye,
.avatar-star .kid-accessory { animation: none; }
}

@media (max-width: 900px) {
  .main-panel {
    padding-left: 18px;
    padding-right: 18px;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--ds-border);
    background: var(--ds-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .sidebar .brand-wrap-inline {
    margin: 0;
  }

  .side-nav {
    flex-direction: row;
    gap: 4px;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .side-nav::-webkit-scrollbar {
    display: none;
  }

  .side-nav a {
    flex: 0 0 auto;
    padding: 0.6rem 0.75rem;
    font-size: 0.82rem;
  }

  .nav {
    justify-content: center;
  }

  .story {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* App menu items: icon + label. On desktop the "More" links sit inline in the sidebar. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.nav-more-toggle {
  display: none;
}

.nav-more {
  display: contents;
}

@media (max-width: 900px) {
  .side-nav .nav-icon {
    display: none;
  }
}

/* Phones: a fixed app-style tab bar with a raised Points button and a "More" pop-up. */
@media (max-width: 760px) {
  .sidebar {
    position: static;
  }

  .main-panel {
    padding-bottom: calc(200px + env(safe-area-inset-bottom));
  }

  .side-nav.app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 0;
    margin: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    overflow: visible;
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 28px rgba(22, 43, 42, 0.1);
  }

  .side-nav.app-nav-kid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .side-nav.app-nav .nav-item {
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 62px;
    padding: 6px 2px;
    border: 0;
    border-radius: 16px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
  }

  .side-nav.app-nav .nav-icon {
    display: block;
    width: 44px;
    height: 30px;
    padding: 4px 11px;
    border-radius: 999px;
  }

  .side-nav.app-nav .nav-item.active,
  .side-nav.app-nav .nav-item:hover,
  .side-nav.app-nav.more-open .nav-more-toggle {
    background: none;
    color: var(--primary);
  }

  .side-nav.app-nav .nav-item.active .nav-icon,
  .side-nav.app-nav.more-open .nav-more-toggle .nav-icon {
    background: var(--panel);
  }

  /* The big raised Points button in the middle. */
  .side-nav.app-nav .nav-feature .nav-icon {
    width: 70px;
    height: 70px;
    margin-top: -34px;
    padding: 17px;
    border: 5px solid var(--bg-soft);
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    fill: #fff;
    box-shadow: 0 10px 22px rgba(242, 107, 79, 0.4);
  }

  .side-nav.app-nav .nav-feature {
    color: var(--text);
  }

  .side-nav.app-nav .nav-feature.active .nav-icon {
    background: var(--primary);
    box-shadow: 0 10px 22px rgba(18, 107, 99, 0.35);
  }

  .nav-more-toggle {
    display: flex;
  }

  .nav-more {
    display: none;
    position: fixed;
    right: 10px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    min-width: 210px;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(22, 43, 42, 0.2);
  }

  .app-nav.more-open .nav-more {
    display: flex;
  }

  .side-nav.app-nav .nav-more .nav-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 50px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 1rem;
  }

  .side-nav.app-nav .nav-more .nav-icon {
    width: 24px;
    height: 24px;
    padding: 0;
  }

  .side-nav.app-nav .nav-more .nav-item.active {
    background: var(--panel);
  }

  .side-nav.app-nav .nav-more .nav-item.active .nav-icon {
    background: none;
  }
}

/* Privacy policy and other long-read pages. */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 0 32px;
  line-height: 1.65;
}

.legal-page h1 {
  margin: 0 0 8px;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.legal-page h2 {
  margin: 36px 0 10px;
  font-size: 1.35rem;
}

.legal-page h3 {
  margin: 20px 0 6px;
  font-size: 1.05rem;
}

.legal-page a,
.footer small a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
}

.legal-page ul {
  padding-left: 1.2rem;
}

.legal-page li + li {
  margin-top: 6px;
}

.legal-updated {
  color: var(--muted);
}

@media (max-width: 540px) {

  /* Bottom space clears the fixed tab bar and its raised Points button. */
  .main-panel {
    padding: 28px 16px calc(200px + env(safe-area-inset-bottom));
  }
}

/* Touch screens (phones and tablets). iPhone Safari leaves :hover "stuck" after a tap, so anything
   that lifts on hover visibly jumps; there, taps get a gentle fade instead. The star keeps its
   press-down squash. touch-action also stops Safari waiting for a possible double-tap zoom. */
a,
button,
label,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (hover: none) {

  .side-nav.app-nav .nav-item:active {
    opacity: 0.75;
  }
}