/* GROAT V3. Polish pass on surfaces added fast: dev lock panel, nav wallet
   connect + picker modal, pre-stake card. Loads AFTER layout-v3.css and
   prestake.css so it can override their base rules without editing them.
   No new colours, radii or fonts: every value here is an existing token
   from tokens.css or a pattern copied from primitives-v3.css/evidence-v3.css. */

/* ---------------------------------------------------------------------
   1. Dev lock panel (#devlock .devlock)
   The old panel used a bespoke rgba(178,235,118,*) glow border/shadow
   that no other surface on the site uses. Replace it with the site's
   real card face: the same glass + hairline + notch clip-path every
   .card/.glass-card uses (primitives-v3.css lines 108-132), applied on
   a ::before so the notch never clips the heading or button inside.
   --------------------------------------------------------------------- */
#devlock .devlock {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#devlock .devlock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--glass);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

/* Step the hierarchy: mono kicker (unchanged, already correct) -> heading
   pinned to the same h3 scale the rest of the site uses for card titles
   (was a fixed 26px/22px, off the type scale) -> body -> button (native
   .btn-primary, untouched) -> quiet verification line. */
#devlock .devlock__head {
  margin-bottom: var(--space-16, 16px);
}

#devlock .devlock__head h2 {
  margin: var(--space-8, 8px) 0 0;
  font-size: var(--fs-h3);
  letter-spacing: -0.018em;
  line-height: 1.1;
}

#devlock .devlock p {
  margin: 0 0 var(--space-24, 24px);
}

/* The raw PinkLock URL read as dumped text. Give it the site's own
   evidence-line treatment: a hairline rule above it (the same quiet
   separator the rule/receipt sections use) and the small solid dot this
   site already uses to mark a verifiable data point (.ev-wall-dot,
   .ev-tick-dot, .marquee__track span::after). Text itself is untouched;
   only the forced uppercase from .mono-label is turned off since this
   is a URL people copy, not a label, and wrapping matches the site's
   own .mono/.hash convention instead of the old word-break: break-all. */
#devlock .devlock__note {
  display: flex;
  align-items: center;
  gap: var(--space-8, 8px);
  margin-top: var(--space-16, 16px);
  padding-top: var(--space-16, 16px);
  border-top: 1px solid var(--hairline);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#devlock .devlock__note::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--lime);
}

/* ---------------------------------------------------------------------
   2. Nav wallet connect (.nav-connect) + wallet picker modal
   .nav-connect sat in mono font at sentence case next to the display-font
   nav buttons either side of it, so it read as a foreign control. Every
   other mono element on the site is uppercase + tracked (.mono-label,
   .chip); every button is display-font. This is a button, so it now
   matches the button voice instead of straddling both.
   --------------------------------------------------------------------- */
.nav-connect {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--forest);
  border-color: var(--hairline);
}

.nav-connect:hover:not(:disabled) {
  color: var(--forest);
  border-color: var(--forest);
}

/* The picker card and its rows used off-scale radii (18px / 12px) and a
   generic drop shadow found nowhere else on the site. Give the card the
   same notch face as the dev lock panel and .card, and square the rows
   off to match .chip / .ev-tick* (the site's other list-row pattern). */
.wallet-picker__card {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.wallet-picker__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--glass);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

.wallet-picker__head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.wallet-picker__row {
  border-radius: 0;
}

.wallet-picker__close:hover {
  color: var(--forest);
}

.wallet-picker__note {
  text-transform: uppercase;
  letter-spacing: var(--track-label, 0.09em);
}

/* ---------------------------------------------------------------------
   3. Pre-stake card hierarchy
   --------------------------------------------------------------------- */

/* machine.html nests #prestakeCard.prestake inside #tokenStakeCard, a
   .glass-card that already carries the site's card face. The nested
   .prestake then drew its OWN card face on top: card inside a card,
   the one thing the house rules ban outright. Strip its face and let it
   sit flush in the parent's own padding, closed off by a plain hairline
   rule instead of a second border, matching how sections elsewhere use
   .divider between blocks rather than nesting panels. */
#tokenStakeCard .prestake {
  padding: 0 0 var(--space-24, 24px);
  margin-bottom: var(--space-24, 24px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--hairline);
}

/* index.html's readout variant (.prestake--readout) is NOT nested; it
   sits alone in the FAQ column and needs its own face. Give it the same
   glass/hairline/notch treatment as the dev lock panel and .card, in
   place of the old flat 18px-radius box, so it reads as one more card
   in this system rather than a separate widget style. */
.prestake--readout {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.prestake--readout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--glass);
  border: 1px solid var(--hairline);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

/* Heading emphasis: index uses <h3 id="prestakeHead"> (already on the
   h3 scale, left alone); machine uses <h2 id="prestakeTitle">, which at
   the h2 scale (up to 56px) dwarfed the kicker, bar, stats and button
   below it inside a card. Cap both to the same h3 scale used by every
   other card title on the site (.ev-card-title) so the heading leads
   without overpowering the rest of the stack. Tag names are untouched,
   only the two ids are targeted. */
#prestakeHead,
#prestakeTitle {
  font-size: var(--fs-h3);
  line-height: 1.15;
}

/* State kicker: match the rectangular chip language used for every
   other state/label pill on the site (.mono-label.is-simulated,
   .ev-filters .chip) instead of the one-off 999px pill. */
.prestake__state {
  border-radius: 0;
}

/* Amount input sits directly beside #tokenStakeAmount, which uses
   var(--radius-sm). The pre-stake amount field used a 999px pill instead,
   the only rounded text input on either page. */
.prestake__amount {
  border-radius: var(--radius-sm, 8px);
}

@media (prefers-reduced-motion: reduce) {
  .nav-connect,
  .wallet-picker__row,
  .wallet-picker__close {
    transition: none;
  }
}