/* app-wallet.css: Profile — the laminate student ID, the leather wallet that
   holds Lessons / Progress / Payments, and the three sub-screens behind them.
   Sugar Paper only: app.css owns .card/.panel/.scroll-panel/.pill/.field-row,
   this file only shapes the pieces app.css has no form for. */

/* Tighter than the 14 px house gap: every point saved between the blocks is a
   point the wallet gets, and the wallet is the one thing here that scales. */
.wallet-shell {
  gap: 9px;
}

/* Parent mode has no wallet to feed, so it keeps the house gap. */
.wallet-parent-shell {
  gap: 14px;
}

/* ---- the laminate ID (ProfileView.StudentIDCard, option E) --------------- */

.wallet-id {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: none;
  width: 100%;
  height: 166px;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sticker);
  text-align: left;
  transform: rotate(-0.8deg);
  transition: transform 120ms ease;
}

.wallet-id:active {
  transform: rotate(-0.8deg) scale(0.985);
}

/* The photo half: a powder panel with the student's live ghostie in it. */
.wallet-id-photo {
  display: flex;
  flex: 0 0 44%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(207, 227, 245, 0.62);
}

.wallet-id-ghostie {
  flex: none;
}

.wallet-id-initials {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  box-shadow: var(--shadow-feather);
}

.wallet-id-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 15px 15px 15px 17px;
}

.wallet-id-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.09em;
  color: var(--ink);
}

.wallet-id-flower {
  font-size: 13px;
  line-height: 1;
}

.wallet-id-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.wallet-id-name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-id-level {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-id-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wallet-id-meta {
  display: flex;
  gap: 10px;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.07em;
  color: var(--ink);
  white-space: nowrap;
}

.wallet-id-meta em {
  font-style: normal;
  color: var(--ink-soft);
}

/* Ink stripes on a 14 px repeat — BarcodeStripes, bar for bar. */
.wallet-id-barcode {
  height: 20px;
  opacity: 0.8;
  border-radius: 2px;
  background-repeat: repeat-x;
  background-size: 14px 100%;
  background-image: linear-gradient(
    90deg,
    var(--ink) 0 2px,
    transparent 2px 4px,
    var(--ink) 4px 7px,
    transparent 7px 9px,
    var(--ink) 9px 10px,
    transparent 10px 14px
  );
}

/* The laminate plastic shine: one soft powder band across the card. */
.wallet-id-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    rgba(191, 217, 242, 0) 42%,
    rgba(191, 217, 242, 0.3) 50%,
    rgba(191, 217, 242, 0) 58%
  );
}

/* ---- the wallet (ProfileView.walletArea) --------------------------------- */

/* The leather is the app's own artwork, the same two PNGs iOS draws:
   /art/wallet-back (the stitched shell) under the three cards, /art/wallet-front
   (the pouch with the m✦ emboss and the snap strap) over their bottoms.
   Everything between them is laid out at the iOS geometry — the 322×380 pt
   wallet area of ProfileView — expressed in ONE unit: --wallet-unit is one iOS
   point. The phone decides how big a point is, the proportions never move.

   The unit comes from the leftover height of .wallet-fit, measured by the
   browser itself (container query units) rather than by a resize listener, and
   is capped at 1px so the wallet never draws larger than it does on iOS. */
.wallet-fit {
  position: relative;
  z-index: 0;
  display: flex;
  flex: 1 1 0;
  justify-content: center;
  min-height: 0;
  container-type: size;
}

.wallet-pocket {
  /* Fallback for engines without container queries: the smallest phone's share. */
  --wallet-unit: 0.5px;
  position: relative;
  flex: none;
  align-self: center;
  width: calc(322 * var(--wallet-unit));
  height: calc(380 * var(--wallet-unit));
}

@supports (container-type: size) {
  .wallet-pocket {
    --wallet-unit: min(calc(100cqh / 380), calc(100cqw / 322), 1px);
  }
}

/* Image("wallet-back") 310×363 at (3, 11), and Image("wallet-front")
   315.4×176 at (3, 201) — drop-shadow so the blur follows the leather's own
   cut-out edge, the way the SwiftUI shadow follows the alpha. */
.wallet-leather {
  position: absolute;
  left: calc(3 * var(--wallet-unit));
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.wallet-leather-back {
  top: calc(11 * var(--wallet-unit));
  z-index: 0;
  width: calc(310 * var(--wallet-unit));
  height: calc(363 * var(--wallet-unit));
  filter: drop-shadow(0 calc(9 * var(--wallet-unit)) calc(30 * var(--wallet-unit)) rgba(61, 56, 53, 0.26));
}

.wallet-leather-front {
  top: calc(201 * var(--wallet-unit));
  z-index: 8;
  width: calc(315.4 * var(--wallet-unit));
  height: calc(176 * var(--wallet-unit));
  filter: drop-shadow(0 calc(5 * var(--wallet-unit)) calc(19 * var(--wallet-unit)) rgba(61, 56, 53, 0.2));
}

/* The three cards: 270 wide at x 23, radius 22, docked at 26 / 70 / 114 with
   heights 324 / 280 / 236 — all three end at 350, so the pouch front (201…377)
   swallows their bottoms and only the title strips read. */
.wallet-slip {
  position: absolute;
  left: calc(23 * var(--wallet-unit));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(12 * var(--wallet-unit));
  width: calc(270 * var(--wallet-unit));
  padding: calc(11 * var(--wallet-unit)) calc(18 * var(--wallet-unit)) 0 calc(22 * var(--wallet-unit));
  border-radius: calc(22 * var(--wallet-unit));
  text-align: left;
  box-shadow: 0 calc(-4 * var(--wallet-unit)) calc(24 * var(--wallet-unit)) rgba(61, 56, 53, 0.12);
  transition: transform 120ms ease;
}

/* A press pulls the card up out of the pouch, the way tapping it does on iOS. */
.wallet-slip:active {
  transform: translateY(calc(-4 * var(--wallet-unit)));
}

.wallet-slip[data-slot="0"] {
  top: calc(26 * var(--wallet-unit));
  height: calc(324 * var(--wallet-unit));
  z-index: 2;
}

.wallet-slip[data-slot="1"] {
  top: calc(70 * var(--wallet-unit));
  height: calc(280 * var(--wallet-unit));
  z-index: 3;
}

.wallet-slip[data-slot="2"] {
  top: calc(114 * var(--wallet-unit));
  height: calc(236 * var(--wallet-unit));
  z-index: 4;
}

.wallet-slip[data-tone="pink"] { background: var(--pink); }
.wallet-slip[data-tone="lilac"] { background: var(--lilac); }
.wallet-slip[data-tone="powder"] { background: var(--powder); }

/* SpeckleTexture(density: 150, opacity: 0.22, dotSize: 0.9…2.0) — iOS scatters
   about one speck per 580 pt². Three dot fields at co-prime spacings hit the
   same density while breaking the lattice a single grid would show. */
.wallet-slip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(61, 56, 53, 0.24) calc(0.9 * var(--wallet-unit)), transparent calc(1.5 * var(--wallet-unit))),
    radial-gradient(circle, rgba(61, 56, 53, 0.18) calc(0.6 * var(--wallet-unit)), transparent calc(1.1 * var(--wallet-unit))),
    radial-gradient(circle, rgba(61, 56, 53, 0.2) calc(1.1 * var(--wallet-unit)), transparent calc(1.8 * var(--wallet-unit))),
    radial-gradient(circle, rgba(61, 56, 53, 0.16) calc(0.7 * var(--wallet-unit)), transparent calc(1.3 * var(--wallet-unit)));
  background-size:
    calc(34 * var(--wallet-unit)) calc(41 * var(--wallet-unit)),
    calc(47 * var(--wallet-unit)) calc(29 * var(--wallet-unit)),
    calc(59 * var(--wallet-unit)) calc(53 * var(--wallet-unit)),
    calc(37 * var(--wallet-unit)) calc(67 * var(--wallet-unit));
  background-position:
    0 0,
    calc(11 * var(--wallet-unit)) calc(17 * var(--wallet-unit)),
    calc(23 * var(--wallet-unit)) calc(7 * var(--wallet-unit)),
    calc(29 * var(--wallet-unit)) calc(31 * var(--wallet-unit));
}

/* The iOS title and the disc share one HStack, so the 20 pt serif rides the
   centre of the 32 pt disc rather than the top of the card. A 32-unit line box
   puts it there without a wrapper the markup contract does not have. */
.wallet-slip-title {
  position: relative;
  font-family: var(--font-serif);
  font-size: calc(20 * var(--wallet-unit));
  font-weight: 600;
  line-height: calc(32 * var(--wallet-unit));
  color: var(--ink);
}

.wallet-slip-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: calc(32 * var(--wallet-unit));
  height: calc(32 * var(--wallet-unit));
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 calc(2 * var(--wallet-unit)) calc(14 * var(--wallet-unit)) rgba(61, 56, 53, 0.16);
}

.wallet-slip-icon svg {
  width: calc(16 * var(--wallet-unit));
  height: calc(16 * var(--wallet-unit));
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* WalletCard.iconColor — the disc is white, the glyph carries the card's ink. */
.wallet-slip[data-tone="pink"] .wallet-slip-icon { color: #b05252; }
.wallet-slip[data-tone="lilac"] .wallet-slip-icon { color: var(--ink); }
.wallet-slip[data-tone="powder"] .wallet-slip-icon { color: #41709a; }

/* ---- the AI row's neighbours -------------------------------------------- */

.wallet-shell .field-row,
.wallet-parent-shell .field-row {
  flex: none;
  min-height: 52px;
}

.wallet-ai-missing {
  margin-left: auto;
}

/* ---- footer small print -------------------------------------------------- */

.wallet-footer {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: auto;
  padding-top: 4px;
  text-align: center;
}

.wallet-role-link {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 700;
}

.wallet-legal-pair {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.wallet-legal-link {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(61, 56, 53, 0.55);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.wallet-legal-link:active {
  opacity: 0.6;
}

.wallet-legal-dot {
  color: rgba(61, 56, 53, 0.36);
  font-size: 11px;
}

.wallet-version {
  color: rgba(61, 56, 53, 0.42);
  font-size: 10px;
  font-weight: 700;
}

/* ---- parent profile ------------------------------------------------------ */

.wallet-parent-shell {
  gap: 14px;
}

/* No ledger to fill this screen, so the identity takes the free height and
   centres in it — the settings row and the small print keep the bottom. */
.wallet-parent-head {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  text-align: center;
}

.wallet-parent-avatar {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sticker);
  font-size: 46px;
  transform: rotate(-3deg);
}

.wallet-parent-head .muted {
  font-size: 13px;
}

/* ---- sub-screens (Lessons / Progress / Payments) ------------------------- */

.wallet-sub-shell {
  gap: 12px;
}

.wallet-headline {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
}

.wallet-headline-value {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}

.wallet-headline-value.is-empty {
  color: var(--ink-soft);
  font-weight: 700;
}

.wallet-headline-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.wallet-balance-value {
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Hugs a short list and shrinks (so the .scroll-panel inside starts
   scrolling) once the list outgrows the screen — never a tall white void. */
.wallet-panel {
  flex: 0 1 auto;
  min-height: 0;
  gap: 8px;
}

.wallet-rows {
  display: flex;
  flex-direction: column;
}

.wallet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.wallet-row:first-child {
  border-top: 0;
}

.wallet-row-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.wallet-row-main {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-row-sub {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-empty-note {
  margin: 0;
  font-size: 13px;
}

.wallet-stats {
  display: flex;
  flex: none;
  gap: 10px;
  padding: 14px 18px;
}

.wallet-stat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wallet-stat-value {
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}

.wallet-teacher-line {
  margin: 0;
  flex: none;
  padding: 0 6px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}