/* ============================================================================
   Screen templates
   ----------------------------------------------------------------------------
   The shared furniture of §6: the strip a filter row sits in, the foot the
   actions are pinned to, and the stage a ceremony plays on.

   Deliberately small. A template layer that owns everything is a template
   layer every screen fights; what is genuinely shared is the shell.

   Depends on tokens.css and kit.css.
   ========================================================================== */

/* A filter row belongs OUTSIDE the scroll frame. A filter you have to scroll
   back up to is a filter nobody uses twice. */
.tpl-filters {
  flex: 0 0 auto;
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2) var(--s3);
  overflow-x: auto;
  scrollbar-width: none;
}
.tpl-filters::-webkit-scrollbar { display: none; }

/* The one-screen rule, in two declarations.

   A template root is a full-height column whose BODY scrolls; everything else
   — the back row, the filter strip, the action foot — is `flex: 0 0 auto` and
   therefore stays put. Without this the root simply grew and `.screen`
   scrolled the whole thing, which is why the title and the "pinned" actions
   both slid away the moment a screen had more content than a phone.

   `min-height: 0` on the body is what lets a flex child actually shrink and
   scroll instead of stretching its parent. */
[data-template='list'],
[data-template='detail'] {
  display: flex;
  min-height: 100%;
  max-height: 100%;
  flex-direction: column;
}
[data-template='list'] > .pad.stack,
[data-template='detail'] > .pad.stack {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The CTA zone. Pinned at the foot where the thumb already is, rather than
   at the end of however long the body turned out to be. */
.tpl-actions:empty { display: none; }
.tpl-actions {
  flex: 0 0 auto;
  display: flex;
  gap: var(--s2);
  align-items: stretch;
  padding: var(--s3);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(8, 11, 18, 0.98) 55%, transparent);
}

/* --- ceremony ---------------------------------------------------------------
   One centrepiece on a dark field, rewards revealed in sequence, one way out.
   Anything that is a table goes behind a "details" control: a wall of numbers
   is a report, and a report is not a moment. */

.tpl-ceremony {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 100%;
  background: radial-gradient(120% 70% at 50% 18%, #1d2740 0%, #0d1220 55%, #070a12 100%);
}
.tpl-ceremony.tone-lose {
  background: radial-gradient(120% 70% at 50% 18%, #241d26 0%, #14101a 55%, #080609 100%);
}

.tpl-stage { display: grid; place-items: center; padding: var(--s4); }
.tpl-reveal { display: grid; gap: var(--s2); padding: 0 var(--s4) var(--s3); }
.tpl-exit {
  padding: var(--s3);
  padding-bottom: max(var(--s3), env(safe-area-inset-bottom));
}

/* --- battle -----------------------------------------------------------------
   The one screen with no chrome: team bars at the top, ultimate avatars at
   the foot, and nothing else competing with the field. */

.tpl-battle { position: relative; height: 100%; }
.tpl-field { position: absolute; inset: 0; z-index: var(--z-scene); }
.tpl-battle-top { position: absolute; inset: 0 0 auto 0; z-index: var(--z-hud); }
.tpl-battle-foot { position: absolute; inset: auto 0 0 0; z-index: var(--z-hud); }