/* apu.tools look (picked in session 1 – "B, greener"): the APU socials banners on deep green.
   Handwritten headings, lots of green at every width, the hoodie Apu badge beside the heading on desktop
   and above it on phones, tiles with lime check badges, chip stats. Structure lives in base.css. */

@font-face {
  font-family: "Gochi Hand";
  src: url("/assets/fonts/gochi-hand-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --font-display: "Gochi Hand", "Bricolage Grotesque", cursive;
  --bg: #0f1e0b;
  --surface: #162713;
  --surface-2: #18220f;
  --border: #284020;
  --border-strong: #3a5c2c;
  --green: #7cc44f;
  --chart-total: #a1f666;
  --chart-total-fill: rgba(161, 246, 102, .32);
  --chart-fill-end: rgba(161, 246, 102, .02);
  --chart-marker: rgba(243, 249, 238, .45);
  --chart-marker-text: #f3f9ee;
}

/* Green at every width, sized to the page (vw), behind everything. */
body { position: relative; background: linear-gradient(180deg, #172d10 0%, #10210c 50%, #0c180a 100%); background-color: var(--bg); }
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 42vw at 78% 8%, rgba(116, 168, 74, .5), transparent 70%),
    radial-gradient(55vw 40vw at 10% 0%, rgba(95, 154, 58, .32), transparent 70%),
    radial-gradient(60vw 50vw at 100% 100%, rgba(95, 154, 58, .4), transparent 70%),
    radial-gradient(50vw 45vw at 0% 75%, rgba(95, 154, 58, .3), transparent 70%),
    radial-gradient(1px 1px at 1px 1px, rgba(255, 255, 255, .08) 1px, transparent 0) 0 0 / 14px 14px;
}

.brand__name { font-family: var(--font-display); font-weight: 400; font-size: 25px; letter-spacing: 0; }
.nav a { background: rgba(0, 0, 0, .35); border: 1px solid var(--border-strong); color: var(--text); }
.nav a[aria-current="page"] { background: rgba(124, 196, 79, .2); border-color: rgba(161, 246, 102, .35); color: var(--text); }
.site-footer { background: rgba(0, 0, 0, .18); }

/* splash */
.home .hero { display: grid; gap: 8px; align-items: center; padding-block: 64px 30px; }
.hero__title { font-weight: 400; letter-spacing: 0; line-height: .95; font-size: clamp(58px, 16vw, 112px); }
.hero__title .accent { color: var(--lime); white-space: nowrap; }
.tick { display: inline-block; width: .55em; height: .5em; margin-left: .1em; color: var(--lime); vertical-align: .05em; }
.hero__lede { color: #c9cec3; margin-top: 18px; }
.hero__art { position: relative; justify-self: center; order: -1; margin-bottom: 8px; }
.hero__art .badge { width: 230px; }
.bubble { position: absolute; top: -58px; right: -10px; padding: 8px 14px; border-radius: 16px; background: #f3f9ee; color: #0c120a; font-family: var(--font-display); font-size: 18px; white-space: nowrap; transform: rotate(-3deg); }
.bubble::after { content: ""; position: absolute; left: 22px; bottom: -9px; border: 9px solid transparent; border-top-color: #f3f9ee; border-bottom: 0; }

.tool-card { grid-template-columns: auto 1fr; padding: 18px 20px; background: rgba(22, 39, 19, .92); border: 1.5px solid var(--border-strong); border-radius: 16px; }
.tool-card__icon { background: #0d170a; border: 1px solid var(--border-strong); border-radius: 14px; color: var(--lime); }
.tool-card__check { position: absolute; top: -11px; right: -9px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: #0c120a; box-shadow: 0 0 0 4px #13240e; }
.tool-card__check svg { width: 18px; height: 18px; }
.tool-card:hover { border-color: rgba(161, 246, 102, .5); }
.tool-card--soon { display: grid; grid-template-columns: 1fr; place-items: center; text-align: center; min-height: 92px; border-style: dashed; background: rgba(0, 0, 0, .12); color: var(--lime); font-family: var(--font-display); font-size: 22px; transform: none !important; }

@media (min-width: 720px) {
  .home .hero { grid-template-columns: 1.4fr 1fr; padding-block: 88px 56px; }
  .hero__art { order: 0; margin-bottom: 0; }
  .hero__art .badge { width: 300px; }
  .bubble { top: -62px; right: -14px; font-size: 20px; }
  .tools { grid-template-columns: repeat(2, 1fr); }
}

/* tool page */
.tool-head__title { font-weight: 400; letter-spacing: 0; font-size: clamp(52px, 13vw, 92px); line-height: .95; }
.tool-head__title .accent { color: var(--lime); }
.tool-head__lede { margin-top: 10px; color: #c9cec3; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .28); border: 1px solid var(--border-strong); font-size: 14px; color: #c9cec3; }
.chip b { color: var(--text); font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px rgba(161, 246, 102, .7); }
.dot--warn { background: #f3f9ee; box-shadow: none; }
.chart-card { background: rgba(22, 39, 19, .9); border: 1.5px solid var(--border-strong); border-radius: 16px; }
.seg button[aria-pressed="true"] { background: var(--lime); }
.switch input:checked + .switch__track { background: var(--lime); }