/* components.css — shared building blocks. READ-ONLY to agents.
   Need a new shared component? Report it; put one-off styles in your own
   css/screen-<name>.css instead. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* MUST come before any component sets `display`. The UA's [hidden] rule is only
   `display:none` at low specificity, so `.btn { display:inline-flex }` silently
   beats it and G.render.show(node,false) does nothing on a button. Found by S3
   in the reader; it would have hit every screen that hides a button. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-text-size-adjust: 100%;
}

/* ---- buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap); min-width: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  border: none; border-radius: var(--r-pill);
  background: var(--c-primary); color: #fff;
  font-family: var(--font); font-size: var(--fs-big); font-weight: 700;
  box-shadow: 0 4px 0 var(--c-primary-d);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-pop), box-shadow var(--dur-fast);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-primary-d); }
.btn--ghost { background: var(--c-surface); color: var(--c-ink);
              box-shadow: 0 4px 0 var(--c-line); }
.btn--accent { background: var(--c-accent); box-shadow: 0 4px 0 #35A5A5; }
.btn--big { font-size: var(--fs-huge); padding: var(--sp-4) var(--sp-7); }
.btn--round { border-radius: 50%; padding: 0; width: var(--tap); height: var(--tap);
              font-size: var(--fs-big); }

/* Unaffordable things stay VISIBLE with their price showing — a visible goal
   motivates; a hidden one just confuses. Never display:none a shop item. */
.is-disabled, .btn[disabled] {
  filter: grayscale(.65); opacity: .6; cursor: default;
  box-shadow: 0 4px 0 var(--c-line);
}

/* ---- cards & surfaces ------------------------------------------------- */
.card {
  background: var(--c-surface); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--shadow);
}
.card--tap { cursor: pointer; transition: transform var(--dur-fast) var(--ease-pop); }
.card--tap:active { transform: scale(.97); }

/* ---- meters (pet needs) ----------------------------------------------- */
.meter { height: 18px; border-radius: var(--r-pill); background: var(--c-line);
         overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--r-pill);
               background: var(--c-good); transition: width var(--dur-slow) ease; }
.meter__fill--low { background: var(--c-buck); }

/* ---- price tags ------------------------------------------------------- */
.price { display: inline-flex; align-items: center; gap: var(--sp-1);
         padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
         background: var(--c-bg-2); font-size: var(--fs-body); font-weight: 700; }
.price--heart { color: var(--c-heart); }
.price--buck  { color: #A9761A; }

/* ---- currency HUD ----------------------------------------------------- */
#hud { position: fixed; top: var(--sp-3); right: var(--sp-3); z-index: 60;
       display: flex; gap: var(--sp-2); }
.hud__chip { display: flex; align-items: center; gap: var(--sp-1);
             background: var(--c-surface); border-radius: var(--r-pill);
             padding: var(--sp-2) var(--sp-4); font-weight: 700;
             font-size: var(--fs-body); box-shadow: var(--shadow); }
.hud__chip.is-bumped { animation: hud-bump var(--dur) var(--ease-pop); }
@keyframes hud-bump { 50% { transform: scale(1.25); } }

/* ---- speak button (every label can be heard) -------------------------- */
/* Was 48px, below the 64px floor CONTRACTS.md calls non-negotiable. Three agents
   independently caught it and each patched it locally; fixed at source instead. */
.speak {
  width: var(--tap); height: var(--tap); border: none; border-radius: 50%;
  background: var(--c-bg-2); color: var(--c-ink); font-size: 26px;
  cursor: pointer; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- screens & nav ---------------------------------------------------- */
/* Top padding clears the fixed #hud (top:12px, ~48px tall). Two agents patched
   this locally at 72px before it was fixed here. */
.screen { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
          padding: 72px var(--sp-4) calc(var(--tap) + var(--sp-7));
          animation: screen-in var(--dur) ease; }
.screen[hidden] { display: none; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } }

#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
       display: flex; background: var(--c-surface);
       border-top: 3px solid var(--c-line);
       padding-bottom: env(safe-area-inset-bottom, 0); }
#nav[hidden] { display: none; }
.nav__btn { flex: 1; min-height: var(--tap); border: none; background: none;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 2px; font-family: var(--font); font-size: var(--fs-small);
            color: var(--c-ink-soft); cursor: pointer; padding: var(--sp-2); }
.nav__btn .nav__icon { font-size: 26px; line-height: 1; }
.nav__btn.is-active { color: var(--c-primary); font-weight: 700; }
.nav__btn.is-active .nav__icon { transform: scale(1.18); }

.h1 { font-size: var(--fs-huge); margin: 0 0 var(--sp-4); }
.badge { position: absolute; top: -6px; right: -6px; min-width: 26px; height: 26px;
         border-radius: var(--r-pill); background: var(--c-heart); color: #fff;
         font-size: var(--fs-small); font-weight: 700;
         display: flex; align-items: center; justify-content: center; padding: 0 6px; }

#save-warning { position: fixed; bottom: calc(var(--tap) + 8px); left: var(--sp-3);
                right: var(--sp-3); z-index: 70; background: var(--c-buck);
                color: var(--c-ink); border-radius: var(--r-md);
                padding: var(--sp-3); font-size: var(--fs-small); text-align: center; }