/* Credits left (pages/credits.js): each card in the brief's wallet turns over like a playing card, the traffic-light
   colors, the balance dialogs and Settings › API credits. The turn itself is Web Animations in credits.js; this file
   holds the card's two resting states, so the animation only ever has to move between them. The stack of three and
   the top bar's coins are in wallet.css. */

/* ---- Traffic light ---- */
.lvl-green, .lvl-none { --lvl: var(--good); --lvl-soft: var(--good-soft); }
.lvl-amber { --lvl: var(--warn); --lvl-soft: var(--warn-soft); }
.lvl-red, .lvl-out { --lvl: var(--red); --lvl-soft: var(--red-soft); }
.cr-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lvl);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lvl) 20%, transparent);
}
.lvl-red .cr-dot, .lvl-out .cr-dot { animation: cr-beat 1.8s ease-out infinite; }
@keyframes cr-beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lvl) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

/* ---- The card: two faces in one grid cell, the back one turned away ---- */
.flipcard { position: relative; perspective: 1500px; }
.flip-inner { display: grid; position: relative; transform-style: preserve-3d; }
.flip-face {
  grid-area: 1 / 1; position: relative; min-width: 0; display: flex; flex-direction: column; isolation: isolate;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flip-back, .flipcard[data-side="back"] .flip-inner { transform: rotateY(180deg); }
.flipcard[data-side="front"] .flip-back, .flipcard[data-side="back"] .flip-front { visibility: hidden; }
.flipcard.turn-ready .flip-inner, .flipcard.turn-ready .flip-face, .flipcard.turning .flip-inner, .flipcard.turning .flip-face { will-change: transform; }
.flip-body { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
/* While it turns: the face darkens toward the edge going away from you, and a deeper shadow while it's lifted. */
.flip-shade, .flip-lift { position: absolute; inset: -1px; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; }
.flip-shade { background: linear-gradient(90deg, transparent 10%, rgba(4, 8, 16, .62)); }
.flip-back .flip-shade { background: linear-gradient(270deg, transparent 10%, rgba(4, 8, 16, .62)); }
.flip-lift { box-shadow: 0 34px 64px -26px var(--sh-3), 0 12px 26px -14px var(--sh-2); }

/* The front keeps the spend card as it was; its bars grow into any room the taller back leaves. */
.flip-front .bars { flex: 1 1 64px; height: auto; min-height: 64px; max-height: 150px; }

/* The turn-over button, top right of each side: a solid pill, so it reads as a button against the card. Dark until a
   balance is typed, then the traffic-light color; blue on the back, like the bars it turns back to. */
.flip-btn {
  --btn: var(--ink); --btn-ink: var(--panel);
  appearance: none; position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; margin: -8px -10px -8px 0;
  padding: 8px 11px 8px 13px; border: 0; border-radius: 999px; cursor: pointer;
  font: 650 11.5px/1 var(--mono); letter-spacing: .02em; text-transform: none; white-space: nowrap;
  color: var(--btn-ink); background: var(--btn);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 18px -9px color-mix(in srgb, var(--btn) 80%, transparent), 0 1px 2px var(--sh-1);
  transition: transform .18s var(--ease), box-shadow .2s, filter .2s;
}
.flip-btn.lvl-green, .flip-btn.lvl-amber, .flip-btn.lvl-red, .flip-btn.lvl-out, .flip-back .flip-btn { --btn: var(--lvl); --btn-ink: light-dark(#fff, #08101e); }
.flip-back .flip-btn { --btn: var(--blue); }
/* White words on the logo red and blue, in both themes. */
.flip-btn.lvl-red, .flip-btn.lvl-out, .flip-back .flip-btn { --btn-ink: #fff; }
.flip-btn:hover {
  transform: translateY(-1px); filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 12px 22px -9px color-mix(in srgb, var(--btn) 90%, transparent), 0 2px 4px var(--sh-1);
}
.flip-btn:active { transform: scale(.95); filter: brightness(.96); }
.flip-btn:focus-visible { outline: 2px solid var(--btn); outline-offset: 3px; }
.flip-btn .ic { transition: transform .6s var(--spring); }
.flip-btn:hover .ic { transform: rotateY(180deg); }
/* The dot takes the button's text color, so it shows on any fill (and still beats when red). */
.flip-btn .cr-dot { --lvl: currentColor; }
/* Until the card has been turned once on a device, the button rings twice when the brief opens (credits.js). */
.flip-btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px var(--btn);
}
.flip-btn.hint::after { animation: flip-hint 1.5s cubic-bezier(.2, .7, .3, 1) 2; }
.flip-btn.hint .ic { animation: flip-hint-ic 1.5s var(--spring) 2; }
@keyframes flip-hint { 0% { opacity: .85; transform: none; } 100% { opacity: 0; transform: scale(1.16, 1.7); } }
@keyframes flip-hint-ic { 0%, 25% { transform: none; } 70%, 100% { transform: rotateY(360deg); } }

/* ---- The back: credits left ---- */
.flip-back::before {
  /* A wash of the traffic-light color in the corner, so the side reads at a glance. */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--lvl) 13%, transparent), transparent 62%);
}
.flip-back.lvl-none::before { display: none; }
.cr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cr-num { color: var(--lvl); font-variant-numeric: tabular-nums; }
.cr-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 10px; border-radius: 999px;
  font: 700 11.5px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--lvl); background: var(--lvl-soft);
}
.cr-pace { margin: 6px 0 0; font-size: 14px; color: var(--muted); text-wrap: pretty; }
.cr-pace b { color: var(--ink); font-weight: 650; }
.cr-pace a { color: var(--red-ink); }
.cr-meter {
  position: relative; height: 10px; margin: 14px 0 4px; border-radius: 999px; overflow: hidden; isolation: isolate;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line);
}
.cr-run { position: absolute; inset: 0; display: flex; }
.cr-seg { display: block; height: 100%; flex: none; }
.cr-seg.monthly { background: var(--blue); }
.cr-seg.paid { background: var(--lvl); }
.cr-run > .cr-seg:last-child { border-radius: 0 999px 999px 0; }
.cr-pots { margin-top: 8px; }
.cr-pot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.cr-pot:first-child { border-top: 0; }
.cr-pot > span { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.cr-pot small { font: 500 11.5px/1.2 var(--mono); color: var(--muted); }
.cr-pot b { font: 600 13px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.cr-key { width: 9px; height: 9px; border-radius: 3px; flex: none; align-self: center; background: var(--lvl); }
.cr-key.monthly { background: var(--blue); }
.cr-key.spent { background: var(--panel-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, var(--line)); }
.cr-foot { margin: auto 0 0; padding-top: 10px; font-size: 12px; color: var(--muted); }
.linkish {
  appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--red-ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px;
}
.linkish:hover { text-decoration-color: currentColor; }

/* No balance yet */
.cr-empty { display: grid; gap: 4px; justify-items: start; }
.cr-ask { margin: 2px 0 0; font: 850 30px/1.02 var(--display); font-stretch: 78%; }
.cr-lights { display: inline-flex; gap: 6px; padding: 6px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.cr-lights i { width: 9px; height: 9px; border-radius: 50%; background: var(--lvl); }
.cr-lights i:nth-child(1) { animation: cr-light 3.6s ease-in-out infinite; }
.cr-lights i:nth-child(2) { animation: cr-light 3.6s ease-in-out 1.2s infinite; }
.cr-lights i:nth-child(3) { animation: cr-light 3.6s ease-in-out 2.4s infinite; }
@keyframes cr-light { 0%, 100% { opacity: .35; } 12%, 30% { opacity: 1; } 45% { opacity: .35; } }
.flip-back .card-actions { margin-top: auto; padding-top: 14px; }

/* ---- The balance dialog ---- */
.cr-money { display: flex; align-items: center; position: relative; }
.cr-money > span { position: absolute; left: 13px; font: 600 15px/1 var(--mono); color: var(--muted); pointer-events: none; }
.cr-money input[type="text"] { padding-left: 27px; font: 600 16px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
#cr-paid { font-size: 20px; min-height: 48px; }
.cr-guess { margin: 6px 0 4px; }
.cr-guess b { color: var(--ink); font-family: var(--mono); }
.cr-monthly { margin: 4px 0 0 24px; }
.cr-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.cr-fields label { margin: 8px 0 0; display: grid; gap: 5px; }
.cr-fields input[type="date"] { min-width: 0; }
.cr-clear { margin-left: auto; color: var(--muted); }
@media (max-width: 560px) { .cr-fields { grid-template-columns: 1fr 1fr; } .cr-fields label:last-child { grid-column: 1 / -1; } }

/* ---- Settings › Claude credits ---- */
.cr-said { display: inline-flex; align-items: center; gap: 8px; color: var(--lvl); font-weight: 700; }
.cr-steps { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.cr-steps a { color: var(--red-ink); }
.cr-env {
  margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; overflow-x: auto; white-space: pre;
  font: 500 12px/1.6 var(--mono); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line);
}

/* ---- Reduce Motion: no turning; the other side fades in instead (credits.js) ---- */
@media (prefers-reduced-motion: reduce) {
  .flip-back, .flipcard[data-side="back"] .flip-inner { transform: none; }
  .lvl-red .cr-dot, .lvl-out .cr-dot, .cr-lights i { animation: none; }
  .cr-lights i { opacity: 1; }
  .flip-btn:hover .ic { transform: none; }
  .flip-btn:hover { transform: none; }
  .flip-btn.hint::after, .flip-btn.hint .ic { animation: none; }
}