/*
 * Stewarding OS brand language, in Sustainability Week colors.
 * Same system as Stewarding OS: Plus Jakarta Sans, deep ink panels, white rounded cards with soft
 * layered shadows, filled tinted status pills, the fixed pinwheel mark.
 * Violet/indigo is replaced by leaf green over deep forest. Everything derives from --accent
 * (Admin > Settings > Accent color), so changing the accent re-themes the whole app.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  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;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  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;
}

:root {
  --accent: #1a7f4b;                                   /* leaf green, white text passes 4.5:1 */
  --accent-600: color-mix(in srgb, var(--accent) 82%, #000);
  --accent-100: color-mix(in srgb, var(--accent) 12%, #fff);

  /* deep forest ink (Stewarding OS "ink" sidebar scale, hue moved from indigo to forest) */
  --ink-950: color-mix(in srgb, var(--accent) 22%, #03100a);
  --ink-900: color-mix(in srgb, var(--accent) 30%, #04130c);
  --ink-800: color-mix(in srgb, var(--accent) 38%, #06170f);
  --ink-border: color-mix(in srgb, var(--accent) 34%, #0a1f15);
  --ink-text: #e6f4ec;
  --ink-text-muted: #8fb5a0;

  /* sage neutral scale (Stewarding OS "steel", tinted green instead of lavender) */
  --sage-50: #f3f7f4;
  --sage-100: #ebf1ed;
  --sage-200: #dce6df;
  --sage-300: #c2d1c7;
  --sage-500: #6f8a7a;
  --sage-700: #3f5547;
  --sage-900: #17261d;

  /* category palette: leaf, ocean, sun, clay (answer tiles + data) */
  --leaf: #1f8a4c;
  --ocean: #1c6fb8;
  --sun: #bf8200;
  --clay: #cf4a3c;

  /* status pills: tinted bg + darker text */
  --good: #0f7a45;  --good-bg: #d6f0e1;
  --warn: #8a5a00;  --warn-bg: #fdecc2;
  --bad: #b3261e;   --bad-bg: #fbdcd8;
  --info: #17598f;  --info-bg: #d9e9f7;

  --shadow-card: 0 1px 2px rgba(10, 36, 22, .05), 0 8px 24px rgba(10, 36, 22, .07);
  --radius-card: 1rem;
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html { font-family: var(--font-ui); }
body { font-family: var(--font-ui); font-feature-settings: "tnum" 0; }
.tnum, .pin, .clock span, .sc, td.num { font-variant-numeric: tabular-nums; }

/* browser surfaces carry the brand too */
::selection { background: color-mix(in srgb, var(--accent) 35%, #fff); color: #06170f; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, #fff); outline-offset: 2px; border-radius: 6px; }
input, textarea, select, button { caret-color: var(--accent); }
* { scrollbar-color: color-mix(in srgb, var(--accent) 45%, #fff) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 40%, #cfe0d5); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
a { text-underline-offset: .18em; }

/* the Stewarding OS pinwheel mark */
.brandmark { display: block; width: 40px; height: 40px; object-fit: contain; }
@keyframes mark-turn { to { transform: rotate(360deg); } }
.brandmark.turn { animation: mark-turn 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .brandmark.turn { animation: none; } }

/* inline icon set (one stroke weight, drawn as SVG) */
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: -.2em; }

/* sound controls (host + player) */
.snd-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; position: relative; padding: 0; }
.snd-btn:hover { background: rgba(255,255,255,.2); }
.snd-btn .ico { width: 20px; height: 20px; }
.snd-btn.off { color: rgba(255,255,255,.5); }
.snd-btn.off::after { content: ""; position: absolute; width: 26px; height: 2.5px; background: currentColor; border-radius: 2px; transform: rotate(-45deg); box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.sndhint { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: .6em; padding: .65em 1.2em; border-radius: 99px; background: #fff; color: var(--sage-900); font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.35); animation: hintpulse 2s ease-in-out infinite; }
.sndhint[hidden] { display: none; }
@keyframes hintpulse { 50% { transform: translateX(-50%) translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .sndhint { animation: none; } }

/* ======================================================================
   Dribbble-inspired upgrade: living landscape, chunky tactile controls, avatars
   ====================================================================== */
:root {
  --lime: #bff55c;
  --lime-lip: #6ea61f;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* animated hills, turbines, clouds and fireflies behind the content */
.scene { position: fixed; left: 0; right: 0; bottom: 0; height: clamp(150px, 27vw, 50vh); background: url("../img/scene.svg") center bottom / cover no-repeat; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%); }
.host, .app, .login-wrap, .install-wrap { position: relative; z-index: 1; }

/* avatar disc */
.av { --s: 2em; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c, #2b86d1); color: #fff; font-weight: 800; font-size: .95em; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.25); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.28), 0 2px 6px rgba(0,0,0,.25); flex: 0 0 auto; }
.av.lg { --s: 3.4em; font-size: 1.1em; }
.av.xl { --s: 5em; font-size: 1.3em; }
.av.av-ch { position: relative; text-shadow: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.25); }
.av-ch svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* chunky lime button: the pressed-lip look from the Dribbble game UIs */
.btn-chunk { font-family: inherit; font-weight: 800; color: #0a2a12; border: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  background: linear-gradient(180deg, #d6ff8a, var(--lime) 55%, #a6e63f); border-radius: 18px; padding: .6em 1.4em;
  box-shadow: 0 6px 0 var(--lime-lip), 0 14px 26px rgba(0,0,0,.30), inset 0 2px 0 rgba(255,255,255,.6);
  transition: transform .12s var(--ease-out), box-shadow .12s var(--ease-out), filter .15s; }
.btn-chunk:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.btn-chunk:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--lime-lip), 0 4px 10px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5); }
.btn-chunk:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn-chunk .ico { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.btn-chunk.ghost { background: rgba(255,255,255,.14); color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.16); }
.btn-chunk.green { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent) 60%, var(--accent-600)); color: #fff; box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 14px 26px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.35); }

/* chunky white panel */
.panel-chunk { background: #fff; color: var(--sage-900); border-radius: 28px; box-shadow: 0 8px 0 rgba(0,0,0,.16), 0 24px 48px rgba(0,0,0,.30), inset 0 0 0 2px rgba(255,255,255,.9); }

@keyframes pop-in { from { transform: scale(.6) translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .scene { background-image: url("../img/scene.svg"); } }