/* ==========================================================================
   Drop Bears: locked members-only pages (2026-10-20)
   Loaded by _middleware.js only when a page is locked. Builds on the sign-in
   pop-up in tools.css (.t-signin): a close button, the builder blurred under
   it with a slim bar once it is closed, and the cash board's open top 3.
   ========================================================================== */

/* The pop-up is display:grid in tools.css, which would beat [hidden]. */
.t-signin[hidden] { display: none; }
html.gate-open { overflow: hidden; }
/* What sits behind is the tease (the blurred builder, the open top 3), so
   the backdrop only dims it rather than blacking it out. */
.t-signin[data-gate] {
  background: rgba(8, 8, 12, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.t-signin[data-gate="cash"] { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

.t-signin__card { position: relative; }
.t-signin__x {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--mute);
  cursor: pointer;
  transition: color .16s var(--ease);
}
.t-signin__x svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.t-signin__x:hover { color: var(--bone); }
.t-signin__x:focus-visible { outline: 2px solid var(--ember); outline-offset: -4px; }

/* The step titles moved from h2 to h3 under the pop-up's own h2. */
.t-signin__steps h3 { font-size: 1.125rem; line-height: 1.25; margin: 0; }
.t-signin__inside { margin: var(--s2) auto 0; max-width: 34ch; color: var(--bone); font-weight: 700; }

/* ------------------------------------------------------------ builder --- */

.gate-locked {
  filter: blur(6px) brightness(.55);
  pointer-events: none;
  user-select: none;
}
.gate-bar {
  position: sticky;
  bottom: 0;
  z-index: 60;
  background: rgba(19, 20, 19, .97);
  border-top: 2px solid var(--ember);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .5);
}
.gate-bar[hidden] { display: none; }
.gate-bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: 12px;
}
.gate-bar__t { margin: 0; font-weight: 700; color: var(--bone); }
.gate-bar__b { flex: none; min-height: 48px; }

/* ---------------------------------------------------- cash, signed out --- */

.tz__what { margin: 0 0 var(--s2); color: var(--mute); font-size: .9375rem; }
.tz__table { width: 100%; }
.tz__table .name { font-weight: 700; }
.tz__table .top .name { color: var(--bone); }
.tz__v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.tz__table .top:first-child .tz__v { color: var(--ember); }
.tz--more .tz__wrap { position: relative; }
/* The card rides up over the fading placeholder rows. */
.tz--more .lock-card { margin-top: calc(var(--s6) * -1); }
.tz--more .tz__wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(rgba(19, 20, 19, 0), var(--ink));
  pointer-events: none;
}

@media (max-width: 479px) {
  .gate-bar__in { padding-block: 8px; }
  .gate-bar__t { font-size: .9375rem; line-height: 1.3; }
}