/* style.css -- VOKEY_WEB homepage. Dark neon theme matching the brand
   reference image (2026-07-16). Real hero/device photos are
   replaceable assets (see home_content.html's comments) -- this file
   styles the placeholder boxes to preserve composition/aspect ratio so
   dropping in the real PNGs later needs no layout changes. */

* { box-sizing: border-box; }

.hidden { display: none; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #000;
  color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Fills exactly whatever's left below .topnav, however tall that
   actually is -- no guessing its height in rem/vh (2026-07-18: an
   earlier calc(100vh - 6rem) version left a partial scroll since the
   real topnav height didn't match the guess). #main-content itself
   needs to be a flex column too so its own child (.hero or
   .page-fullbleed) can flex:1 to fill it in turn. */
#main-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.topnav {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid #1a1a1a;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  background: none;
  border: none;
  color: #e8e8e8;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}

.nav-link.active {
  color: #f5d90a;
  border-bottom: 2px solid #f5d90a;
}

/* Live login button (2026-07-18) -- replaces the old static .brand/
   .brand-logo/.brand-fallback topnav text entirely (now orphaned,
   removed). Same button/popover/glow pattern as VOKEY_CRUD's Admin
   Console classic.css, adapted to this site's own dark theme. */
.vokey-signin-wrap {
  position: relative;
  flex: 0 0 auto;
}

.vokey-signin-btn {
  width: auto;
  background: transparent;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  border-radius: 6px;
  flex: 0 0 auto;
}

#vokey-signin-logo {
  height: 40px;
  width: auto;
  display: block;
  filter: grayscale(100%) brightness(0.7);
  transition: filter 0.3s ease;
}

.vokey-signin-btn.signed-in #vokey-signin-logo {
  filter: none;
  animation: vokey-glow 1.6s ease-in-out infinite alternate;
}

@keyframes vokey-glow {
  from { filter: drop-shadow(0 0 2px rgb(0, 238, 255)); }
  to   { filter: drop-shadow(0 0 10px rgb(0, 238, 255)) drop-shadow(0 0 4px #7c3aed); }
}

.vokey-signin-popover {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.75rem;
  min-width: 220px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 50;
}

.pin-display {
  font-size: 1.6rem;
  letter-spacing: 0.3rem;
  text-align: center;
  font-family: monospace;
  color: #f5d90a;
}

.signin-tagline {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  opacity: 0.7;
  margin: 0 0 0.5rem;
}

.vokey-signin-popover #pin-instruction {
  text-align: center;
  font-size: 0.8rem;
  color: #ccc;
  margin: 0.3rem 0;
}

.status {
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  margin-top: 0.5rem;
}

.status.ok { background: #0f2e1a; color: #7ee2a0; border: 1px solid #1e5c36; }
.status.fail { background: #2e0f0f; color: #e27e7e; border: 1px solid #5c1e1e; }
.status.info { background: #0f1e2e; color: #7eb8e2; border: 1px solid #1e3c5c; }

/* My Devices tab (2026-07-18) -- radio-select table + Reset/Remove
   toolbar, same interaction shape as VOKEY_CRUD's Admin -> Humans tab,
   own class names since this site has no metagrid-* CSS of its own. */
.my-devices-note {
  color: #999;
  font-size: 0.9rem;
}

.my-devices-toolbar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.my-devices-table-wrap {
  overflow-x: auto;
}

/* My PlayVocal's create form (2026-07-18) -- own class since it's a
   distinct control group from the toolbar below it, but reuses the
   same input/select styling convention. */
.my-playvocal-create {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 10px;
}

.my-playvocal-create h3 {
  color: #f5d90a;
  margin: 0;
  width: 100%;
}

.my-playvocal-create input,
.my-playvocal-create select {
  background: #1a1a1a;
  color: #eee;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  width: auto;
}

table.my-devices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: #ddd;
}

table.my-devices-table thead th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  color: #f5d90a;
  border-bottom: 2px solid #1a1a1a;
}

table.my-devices-table tbody td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #1a1a1a;
}

table.my-devices-table input[type="radio"] {
  width: auto;
  margin: 0;
}

/* Try Vokey demo (2026-07-18, moved here from try_vokey.html's own
   <style> block when that page stopped being fully standalone and
   started using the shared base.html shell). */
.demo-panel {
  max-width: 560px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  text-align: center;
}
.demo-panel h1 { font-size: 1.8rem; margin-bottom: 0.25rem; }
.demo-panel .demo-subtitle { color: #aaa; margin-bottom: 2rem; }
#try-demo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: min(60vw, 260px);
}
#try-demo-btn img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(100%) brightness(0.7);
  transition: filter 0.2s ease;
}
#try-demo-btn.signed-in img {
  filter: none;
  animation: vokey-glow 1.6s ease-in-out infinite alternate;
}
#try-demo-btn:disabled { cursor: default; }
.try-demo-hint {
  color: #999;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.try-demo-caption {
  color: #ddd;
  font-size: 1rem;
  max-width: 26rem;
  margin: 0 auto 0.75rem;
}

.try-demo-hear-btn {
  background: transparent;
  border: 1px solid #3ee68c;
  color: #3ee68c;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 1.5rem;
  width: auto;
}

.hero {
  display: grid;
  /* 1fr 1.4fr, not 1fr 1fr (2026-07-18) -- gives the right-side visual
     column more room so the image itself can scale up larger, not just
     fill the same box more tightly. */
  grid-template-columns: 1fr 1.4fr;
  gap: 2rem;
  padding: 3rem 2.5rem;
  align-items: stretch;
  max-width: 1400px;
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
}

.hero-eyebrow {
  color: #f5d90a;
  font-size: 1.4rem;
  margin: 0;
}

.hero-title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-title-logo {
  height: 5rem;
  width: auto;
}

.hero-title {
  font-size: 5rem;
  font-weight: 800;
  margin: 0;
  /* line-height: 1.15, not 1 (2026-07-18) -- with background-clip:text,
     a tight line-height of exactly 1 clips descenders (the tail of the
     "y" in "Vokey") against the line box. Enough room for the full
     glyph, still visually tight. */
  line-height: 1.15;
  background: linear-gradient(90deg, #3b5bff, #7b2ff7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  font-size: 1.6rem;
  font-weight: bold;
  color: #f5d90a;
}

.hero-subtitle::selection { background: #3b5bff; }

.hero-body {
  color: #f5d90a;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 32rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: #2b6cb0;
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: #3ee68c;
  border: 1px solid #3ee68c;
}

.hero-microcopy {
  color: #999;
  font-size: 0.85rem;
  margin: -0.75rem 0 1.5rem 0;
}

.hero-microlink {
  color: #3ee68c;
  cursor: pointer;
}

.trust-box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 1.25rem;
  max-width: 32rem;
}

.trust-icon {
  font-size: 1.75rem;
}

.trust-title {
  color: #f5d90a;
  font-weight: bold;
  margin: 0 0 0.4rem 0;
}

.trust-body {
  color: #ddd;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

/* Vertically centers the copy block within the now-near-full-viewport
   .hero row (2026-07-18) -- without this the text sat top-anchored with
   a large dead gap below it, since .hero-copy is shorter than the row
   it's stretched into. */
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-visual {
  position: relative;
  height: 100%;
  min-height: 420px;
  display: flex;
}

.hero-photo {
  width: 100%;
  height: 100%;
  /* contain, not cover (2026-07-18) -- cover was cropping/overflowing
     the image (the "Trusted Devices" circle ran off the right edge of
     the viewport). contain guarantees the whole image is always
     visible, scaled to fit, never cropped. */
  object-fit: contain;
  border-radius: 12px;
}

.stub {
  padding: 3rem 2.5rem;
  max-width: 1400px;
  margin: 0 auto;
}

.stub h2 {
  color: #f5d90a;
}

.page {
  padding: 3rem 2.5rem;
  max-width: 900px;
  margin: 0 auto;
}

.page-eyebrow {
  color: #f5d90a;
  font-size: 1.2rem;
  margin: 0;
}

.page-title {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  margin: 0.25rem 0 0.75rem 0;
  background: linear-gradient(90deg, #3b5bff, #7b2ff7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-subtitle {
  font-size: 1.25rem;
  font-weight: bold;
  color: #f5d90a;
  margin: 0 0 1.75rem 0;
}

.page-fullbleed {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
}

.concept-image-full {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.page-body {
  color: #ddd;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 42rem;
  margin: 0 0 1.25rem 0;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 2rem 0;
}

@media (max-width: 800px) {
  .info-grid { grid-template-columns: 1fr; }
}

.info-card {
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 1.25rem;
}

.info-icon {
  font-size: 1.5rem;
}

.info-title {
  color: #f5d90a;
  font-weight: bold;
  margin: 0.5rem 0 0.4rem 0;
}

.info-text {
  color: #ccc;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Mobile (iPhone/Android), added 2026-07-16 -- kept in sync with the
   same block in style.css, see that file's comment for why. */
@media (max-width: 600px) {
  .topnav {
    padding: 1rem 1.25rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .hero,
  .stub,
  .page {
    padding: 2rem 1.25rem;
  }

  .hero-title {
    font-size: 2.75rem;
  }

  .hero-title-logo {
    height: 2.75rem;
  }

  .hero-subtitle {
    font-size: 1.25rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .page-title {
    font-size: 2rem;
  }

  .page-subtitle {
    font-size: 1.05rem;
  }

  .hero-visual {
    min-height: 240px;
  }
}

/* ---- TEST-ONLY marker, same convention as VOKEY_CRUD's style-test.css ---- */
body {
  border-top: 6px solid #d69e2e;
}

body::before {
  content: "TEST ENVIRONMENT -- not production";
  display: block;
  background: #fefcbf;
  color: #744210;
  padding: 0.4rem 0.6rem;
  font-size: 0.75rem;
  font-weight: bold;
  text-align: center;
}