/* Components: tiles, sheets, card faces, tab bar and toast.
 * Split out of app.css to keep every file under the 300-line rule
 * in CLAUDE.md section 2. */

/* ------------------------------------------------------------ tiles */

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3);
}

.tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--slate);
  border: 0;
  border-radius: var(--r-tile);
  padding: var(--s4);
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--moonlight);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring);
}

.tile:active {
  transform: scale(0.97);
}

.tile:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: 2px;
}

.tile-name {
  font-weight: 600;
  line-height: 1.25;
  /* Never truncate a name below two lines (section 5, accessibility). */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile-value {
  font-family: var(--font-round);
  font-weight: 500;
  font-size: var(--t-sub);
  color: var(--haze);
}

.tile[data-on="true"] .tile-value {
  color: var(--moonlight);
}

.tile-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--haze);
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}

.tile[data-on="true"] .tile-dot {
  opacity: 1;
  background: var(--light, var(--filament));
}

.tile[data-offline="true"] {
  opacity: 0.5;
}

/* ------------------------------------------------------------ sheet */

.sheet-scrim {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  z-index: 40;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}

.sheet-scrim[data-open="true"] {
  opacity: 1;
}

.sheet {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 41;
  background: var(--slate);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: var(--s4) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease-spring);
}

.sheet[data-open="true"] {
  transform: translateY(0);
}

.sheet-grip {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--haze);
  opacity: 0.4;
  margin: 0 auto var(--s4);
}

/* ------------------------------------------------------------ card faces */

.wallet {
  display: grid;
  gap: var(--s3);
}

.card-face {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-ratio);
  border-radius: var(--r-card);
  border: 0;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--moonlight);
  font: inherit;
  text-align: start;
  cursor: pointer;
  background: linear-gradient(150deg, var(--tint-from, #333), var(--tint-to, #111));
  transition: transform var(--dur-fast) var(--ease-spring);
}

.card-face:active {
  transform: scale(0.985);
}

.card-face:focus-visible {
  outline: 2px solid var(--filament);
  outline-offset: 3px;
}

.card-symbol {
  font-size: 1.75rem;
  line-height: 1;
}

.card-nfc {
  position: absolute;
  top: var(--s4);
  inset-inline-end: var(--s4);
  opacity: 0.6;
  font-size: 1.1rem;
}

/* ------------------------------------------------------------ tab bar */

.tabs {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--dusk) 88%, transparent);
  backdrop-filter: blur(18px);
  border-top: 1px solid var(--edge);
}

.tab {
  flex: 1;
  max-width: 160px;
  border: 0;
  background: transparent;
  color: var(--haze);
  font: inherit;
  font-size: var(--t-sub);
  padding: var(--s2);
  min-height: 44px;
  border-radius: var(--s3);
  cursor: pointer;
}

.tab[aria-selected="true"] {
  color: var(--moonlight);
  font-weight: 600;
}

/* ------------------------------------------------------------ toast */

.toast {
  position: fixed;
  inset-inline: var(--s4);
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 60;
  margin: 0 auto;
  max-width: 520px;
  background: var(--slate);
  border: 1px solid var(--edge);
  border-radius: var(--s3);
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s3);
  /* Translate clear of the tab bar, not just past its own height: a partial
     offset leaves the dismissed toast sitting on top of the tabs and eating
     their taps, since it stays in the DOM above them. */
  transform: translateY(calc(100% + 120px));
  opacity: 0;
  pointer-events: none;
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out);
}

.toast[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast[data-kind="error"] {
  border-color: color-mix(in srgb, var(--alert) 45%, transparent);
}