/* Yen -> INR converter. Design tokens read off the supplied mockup. */
:root {
  --bg:     #151E2E;  /* screen background */
  --fg:     #FFFFFF;  /* labels, values, arrow */
  --muted:  #38445A;  /* placeholder glyphs + rate footer */
  --key:    #1E293B;  /* keypad key surface */
  --key-on: #2B3A52;  /* keypad key, pressed */

  --value-size: clamp(44px, 15vw, 64px);
  --label-size: clamp(11px, 3.4vw, 14px);
  --gap-sm: clamp(10px, 2.2vh, 18px);   /* label -> value, kept tight as a pair */
  --gap-lg: clamp(34px, 10vh, 84px);    /* value -> arrow, the airy gap */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overscroll-behavior: none;   /* no pull-to-refresh while tapping keys */
  touch-action: manipulation;  /* no double-tap zoom */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  padding-top: env(safe-area-inset-top);
}

/* ---------- display ---------- */

.display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 0;
}

.label {
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
}

.value {
  font-size: var(--value-size);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin-top: var(--gap-sm);
  white-space: nowrap;
}

/* empty state: the ghosted glyphs from the left panel of the design */
.value.is-placeholder { color: var(--muted); }

.arrow {
  width: clamp(22px, 6.5vw, 30px);
  height: auto;
  margin: var(--gap-lg) 0;
  color: var(--fg);
  flex: none;
}

/* step the numerals down so long amounts never overflow */
.display.len-long  { --value-size: clamp(36px, 11.5vw, 50px); }
.display.len-xlong { --value-size: clamp(28px, 9vw, 40px); }

/* ---------- rate footer ---------- */

.rate-footer {
  flex: none;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding: 0 16px 12px;
  min-height: 1.2em;
}

/* ---------- keypad ---------- */

.keypad {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  /* floor keeps the four 52px rows + gaps intact on short screens */
  height: clamp(232px, 42dvh, 380px);
  padding: 0 8px calc(8px + env(safe-area-inset-bottom));
}

.keypad button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  background: var(--key);
  color: var(--fg);
  font: inherit;
  font-size: clamp(22px, 6.5vw, 28px);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 90ms ease-out;
  -webkit-tap-highlight-color: transparent;
}

.keypad button:active,
.keypad button.is-pressed { background: var(--key-on); }

.keypad button:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.k-back svg { display: block; }

@media (prefers-reduced-motion: reduce) {
  .keypad button { transition: none; }
}