/* Spark — page layout only. Components style themselves (vanilla.css); this file owns the
   stage, the phone frame, and the spacing between component roots. Tokens only, zero radius. */

.dating {
  --dating-phone-w: 390px; /* device width: must not scale with the size axis */
  --dating-top-h: var(--ss-shell-top-h);
  --dating-nav-h: var(--ss-bottom-nav-h, var(--ss-shell-top-h));
  margin: 0;
  min-height: 100vh;
  background: var(--ss-bg);
  color: var(--ss-fg);
}

/* ---- stage: page background, the phone centred, a caption to its left ------------------- */

.dating-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dating-phone-w) minmax(0, 1fr);
  align-items: center;
  min-height: 100vh;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ss-line) 0 1px,
    transparent 1px var(--ss-s-12)
  );
}

.dating-aside {
  grid-column: 1;
  justify-self: end;
  max-width: 22rem;
  padding: var(--ss-s-6);
  margin-right: var(--ss-s-10);
  border-left: 2px solid var(--ss-primary);
  background: var(--ss-bg);
}

.dating-aside p {
  margin: 0 0 var(--ss-s-3);
}
.dating-aside p:last-child {
  margin-bottom: 0;
}

.dating-aside-kicker {
  font-family: var(--ss-font-mono);
  font-size: var(--ss-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-primary);
}

.dating-aside-copy {
  font-size: var(--ss-size-sm);
  color: var(--ss-fg-muted);
}

.dating-aside-keys {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss-s-1) var(--ss-s-2);
  font-family: var(--ss-font-mono);
  font-size: var(--ss-size-xs);
  color: var(--ss-fg-muted);
}

/* ---- phone frame ------------------------------------------------------------------------- */

.dating-phone {
  grid-column: 2;
  position: relative; /* containing block for the bottom nav */
  display: grid;
  grid-template-rows: var(--dating-top-h) minmax(0, 1fr);
  width: var(--dating-phone-w);
  height: 100vh;
  max-height: 100vh;
  border: 1px solid var(--ss-line);
  border-top: 0;
  border-bottom: 0;
  background: var(--ss-bg);
  box-shadow: var(--ss-shadow-2);
  overflow: hidden;
}

/* BottomNav is viewport-fixed by design; inside the frame it belongs to the phone. */
.dating-phone .ss-bottom-nav {
  position: absolute;
}

.dating-top {
  display: flex;
  align-items: center;
  gap: var(--ss-s-3);
  padding: 0 var(--ss-s-3) 0 var(--ss-s-4);
  border-bottom: 1px solid var(--ss-line);
}

.dating-brand {
  margin: 0;
  font-family: var(--ss-font-display);
  font-size: var(--ss-size-h3);
  letter-spacing: 0.04em;
  color: var(--ss-fg);
}

.dating-brand-mark {
  margin-right: var(--ss-s-2);
  color: var(--ss-primary);
}

.dating-counter {
  margin: 0 auto 0 0;
  padding-left: var(--ss-s-2);
  font-family: var(--ss-font-mono);
  font-size: var(--ss-size-xs);
  color: var(--ss-fg-faint);
}

.dating-main {
  display: flex;
  flex-direction: column;
  gap: var(--ss-gap-sm);
  min-height: 0;
  padding: var(--ss-s-3) var(--ss-s-3) calc(var(--dating-nav-h) + var(--ss-s-4));
  overflow-y: auto;
}

/* ---- deck + card internals that are ours (not component parts) --------------------------- */

.dating-deck {
  display: grid; /* one cell: cards stack, only the front one is visible */
}

.dating-tags,
.dating-shared {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ss-s-1) var(--ss-s-2);
}

.dating-bio {
  margin: var(--ss-s-3) 0;
  font-size: var(--ss-size-sm);
  color: var(--ss-fg-muted);
}

.dating-shared {
  padding-top: var(--ss-s-3);
  border-top: 1px solid var(--ss-line);
}

.dating-shared-label {
  margin-right: var(--ss-s-1);
  font-family: var(--ss-font-mono);
  font-size: var(--ss-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ss-fg-faint);
}

/* ---- action row + key hints -------------------------------------------------------------- */

.dating-actions {
  display: flex;
  justify-content: center;
  gap: var(--ss-s-4);
  padding-top: var(--ss-s-1);
}

.dating-actions .ss-btn {
  min-width: var(--ss-s-12);
  min-height: var(--ss-s-12);
}

.dating-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ss-s-1) var(--ss-s-2);
  margin: 0;
  font-family: var(--ss-font-mono);
  font-size: var(--ss-size-xs);
  color: var(--ss-fg-faint);
}

.dating-keys-sep {
  color: var(--ss-line-strong);
}

/* ---- modals ------------------------------------------------------------------------------ */

.dating-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ss-s-4);
  padding: var(--ss-s-2) 0 var(--ss-s-4);
}

.dating-pair-heart {
  font-size: var(--ss-size-h2);
  color: var(--ss-primary);
}

.dating-pair-copy {
  margin: 0;
  text-align: center;
  color: var(--ss-fg-muted);
}

.dating-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-s-3);
  padding: var(--ss-s-3) 0;
}
.dating-setting + .dating-setting {
  border-top: 1px solid var(--ss-line);
}

.dating-setting-label {
  font-size: var(--ss-size-sm);
}

/* ---- responsive: the frame becomes the screen ------------------------------------------- */

@media (max-width: 900px) {
  .dating-aside {
    display: none;
  }
}

@media (max-width: 430px) {
  .dating-stage {
    display: block;
    background-image: none;
  }
  .dating-phone {
    width: 100%;
    border: 0;
    box-shadow: none;
  }
}

/* Keyboard hints are noise where there is no keyboard (DS-0157): the key caps hide themselves on
   coarse-pointer devices, so hide the words around them too. */
@media (hover: none) and (pointer: coarse) {
  .dating-aside-keys,
  .dating-keys {
    display: none;
  }
}