/* ============================================================
   NotCard — shared liquid-glass button system
   ------------------------------------------------------------
   Border language follows the dashboard's .lg card, which is the
   house standard: a thin translucent white border, a radial
   highlight coming from the top-left, and an inset top gloss —
   no iridescent ring.

   Apply `.glass-btn` to any <a> or <button>, then optionally:
     .glass-btn--block   full width, stacked layout
     .glass-btn--pill    fully rounded (default is a soft radius)
     .glass-btn--sm      compact (nav bars)
     .glass-btn--lg      hero / primary CTA size
     .glass-btn--tinted  brand-coloured primary action
     .glass-btn--quiet   secondary action
     .glass-btn--danger  destructive action

   Colour comes from --tint, layered OVER the frosted fill rather
   than replacing it, so a tinted button keeps the same material
   as a neutral one:  style="--tint: var(--glass-blue)"
   ============================================================ */

:root {
  /* Brand tints — low alpha so the glass still reads through */
  --glass-blue:   rgba(41,151,255,0.42);
  --glass-red:    rgba(255,69,58,0.30);
  --glass-green:  rgba(37,211,102,0.13);
}

/* ── House background ───────────────────────────────────────
   Taken from the home page hero, so every screen opens on the
   same note: black, with one viewport-tall wash at the top —
   blue overhead, violet low-left, a touch of rose to the right.

   Painted on the body's own background layer rather than a
   ::before, so it always sits behind content without any page
   needing to manage z-index (my_tags in particular has none).

   A page that wants a solid black section on top of this just
   sets its own background, as the home page's .steps-strip does. */
html { background-color: #000; }
body {
  background-color: #000;
  background-image:
    radial-gradient(ellipse 60% 45% at 50% 0%,  rgba(41,151,255,.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(120,60,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 60%, rgba(255,60,120,.07) 0%, transparent 60%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100vh;
  background-size: 100% 100svh;   /* excludes the mobile URL bar */
}

/* ── Page-level scroll behaviour ────────────────────────────
   `.fits` is toggled on <html> by /static/fit.js when the page
   content already fits the viewport. Horizontal panning is locked
   unconditionally; vertical only when there's nothing to scroll. */
html, body {
  overflow-x: hidden;
  overscroll-behavior: none;   /* no iOS rubber-band on either axis */
}

/* ── Zoom lock ──────────────────────────────────────────────
   Every layout here is sized to a phone viewport, so pinching
   only breaks it. `manipulation` kills double-tap zoom while
   leaving normal panning and tapping alone; the text-size-adjust
   pair stops mobile browsers inflating type on their own. iOS
   Safari's pinch gesture is cancelled in /static/nozoom.js —
   it has ignored the viewport meta since iOS 10. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html.fits, html.fits body {
  overflow: hidden;
  height: 100%;
}

.glass-btn {
  --tint:   rgba(255,255,255,0);
  --fill:   rgba(255,255,255,0.06);
  --sheen:  rgba(255,255,255,0.10);
  --edge:   rgba(255,255,255,0.14);
  --btn-h:  48px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 26px;
  border: 1px solid var(--edge);
  border-radius: 16px;
  box-sizing: border-box;

  font-family: inherit;
  font-size: 15.5px;
  font-weight: 550;
  line-height: 1;
  color: #f5f5f7;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  background:
    linear-gradient(var(--tint), var(--tint)),
    radial-gradient(ellipse 90% 50% at 20% 0%, var(--sheen) 0%, transparent 65%),
    var(--fill);
  backdrop-filter: blur(32px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 4px 24px rgba(0,0,0,0.28);
  transition: background .22s ease, border-color .22s ease,
              box-shadow .22s ease, color .2s ease;
}

.glass-btn:hover {
  --fill:  rgba(255,255,255,0.11);
  --sheen: rgba(255,255,255,0.16);
  --edge:  rgba(255,255,255,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 6px 28px rgba(0,0,0,0.32);
}

/* No press-down travel: the pressed state just matches hover. */
.glass-btn:active { transform: none; opacity: 1; }

.glass-btn:disabled,
.glass-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Modifiers ─────────────────────────────────────────────── */

.glass-btn--block {
  display: flex;
  width: 100%;
}

.glass-btn--pill { border-radius: calc(var(--btn-h) / 2); }

.glass-btn--sm {
  --btn-h: 34px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: 99px;
}

.glass-btn--lg {
  --btn-h: 54px;
  padding: 0 34px;
  font-size: 16px;
}

/* Tinted (brand) actions keep the glass material and gain a colour wash,
   with a brighter edge so they still read as the primary action. */
.glass-btn--tinted {
  --tint: var(--glass-blue);
  --edge: rgba(255,255,255,0.26);
  color: #fff;
  font-weight: 600;
}
.glass-btn--tinted:hover {
  --edge: rgba(255,255,255,0.36);
  --fill: rgba(255,255,255,0.10);
}

/* Quiet variant for secondary actions sitting next to a tinted one. */
.glass-btn--quiet {
  --fill:  rgba(255,255,255,0.04);
  --sheen: rgba(255,255,255,0.06);
  --edge:  rgba(255,255,255,0.09);
  color: #a1a1a6;
}
.glass-btn--quiet:hover {
  --fill:  rgba(255,255,255,0.09);
  --sheen: rgba(255,255,255,0.12);
  --edge:  rgba(255,255,255,0.16);
  color: #f5f5f7;
}

/* Destructive actions — same material, red wash. */
.glass-btn--danger {
  --tint: var(--glass-red);
  --edge: rgba(255,255,255,0.20);
  color: #fff;
}