/* ============================================================
   screens/setup.css — pin · create-profile · splash
   All rules scoped to .scr[data-screen="…"].
   ============================================================ */

/* ---------- Shared (pin + create-profile): nav, title, button tray ---------- */
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) {
  background: #fff;
  font-family: var(--hs-font-sans);
  color: var(--hs-warm-grey-700);
}
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) button {
  -webkit-appearance: none; appearance: none;
  border: 0; background: none; padding: 0; margin: 0;
}

/* Nav Bar — 56px tall at y=44; 40px icon buttons inset 16px, 8px from top */
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-nav {
  position: absolute; left: 0; top: 44px; width: 375px; height: 56px; z-index: 3;
}
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-navbtn {
  position: absolute; top: 8px; width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color var(--hs-duration-faster) var(--hs-easing-standard);
}
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-navbtn:active { background: rgba(45, 44, 43, .08); }
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-navbtn--left { left: 16px; }
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-navbtn--right { right: 16px; }
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-navbtn img { display: block; width: 24px; height: 24px; }

/* Title & Subtitle — Mobile/Heading M (24) + Mobile/Body M (16), centred, 8px gap */
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-title {
  display: flex; flex-direction: column; gap: 8px; text-align: center; width: 100%;
}
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-h {
  margin: 0; font: 700 24px/28.8px var(--hs-font-sans); letter-spacing: -0.72px; color: var(--hs-warm-grey-700);
}
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-sub {
  margin: 0; font: 400 16px/24px var(--hs-font-sans); letter-spacing: 0; color: var(--hs-warm-grey-600);
}

/* Button Tray — pinned to bottom; pt16 pb32 px24; Primary action 48px pill */
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-tray {
  position: absolute; left: 0; bottom: 0; width: 375px; background: #fff;
  padding: 16px 24px 32px; display: flex; flex-direction: column; align-items: center;
}
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-primary {
  width: 100%; height: 48px; border-radius: 999px; padding: 0 24px;
  background: var(--hs-blue-200); color: #fff; cursor: pointer;
  font: 700 16px/19.2px var(--hs-font-sans); letter-spacing: -0.48px; text-align: center;
  box-shadow: 0 2px 0 rgba(20, 19, 19, .2);             /* Light Mode/shadowDefault */
  transition: opacity var(--hs-duration-fast) var(--hs-easing-standard),
              box-shadow var(--hs-duration-fast) var(--hs-easing-standard);
}
:is(.scr[data-screen="pin"], .scr[data-screen="create-profile"]) .su-primary:disabled {
  opacity: .4; box-shadow: none; cursor: default;
}

/* ---------- PIN ---------- */
.scr[data-screen="pin"] .pin-ui {
  position: absolute; left: 0; top: 100px; width: 375px;
  padding: 64px 0 24px; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.scr[data-screen="pin"] .pin-ui .su-title { padding: 0 24px; }
.scr[data-screen="pin"] .pin-fields {
  display: flex; gap: 12px; justify-content: center; align-items: center; cursor: pointer;
}
.scr[data-screen="pin"] .pin-box {
  box-sizing: border-box; width: 48px; height: 64px; border-radius: 12px;
  background: #fff; border: 2px solid var(--hs-warm-grey-200);            /* Border/border #E2DED9 */
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: border-color var(--hs-duration-faster) var(--hs-easing-standard);
}
.scr[data-screen="pin"] .pin-box.is-focus { border-color: var(--hs-warm-grey-500); }  /* Border/borderStronger #63605D */
.scr[data-screen="pin"] .pin-cursor {
  display: block; width: 4px; height: 40px; border-radius: 10px; background: var(--hs-blue-200);
  animation: pin-caret 1s steps(1, end) infinite;
}
@keyframes pin-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.scr[data-screen="pin"] .pin-dot {
  font: 700 51px/61.2px var(--hs-font-sans); letter-spacing: -1.53px; color: #000;
  animation: pin-pop var(--hs-duration-faster) var(--hs-easing-entrance) both;
}
.scr[data-screen="pin"] .pin-digit {
  font: 700 24px/28.8px var(--hs-font-sans); letter-spacing: -0.72px; color: var(--hs-warm-grey-700);
}
@keyframes pin-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.scr[data-screen="pin"] .pin-eye {
  width: 32px; height: 32px; display: block; cursor: pointer;
}
.scr[data-screen="pin"] .pin-eye img { display: block; width: 32px; height: 32px; }

/* iOS number keypad — Figma "Keyboard" (1703:56703): 375×308, y 504 when up */
.scr[data-screen="pin"] .pin-kb {
  position: absolute; left: 0; top: 504px; width: 375px; height: 308px; z-index: 4;
  padding: 24px 7.67px 74px; display: flex; flex-direction: column; gap: 6px;
  border-radius: 27px 27px 0 0;
  /* Figma Background: #D4D4D4 74% luminosity · #1B1B1B linear-dodge · #E6E9ED linear-burn + GLASS 8 →
     translucent frosted tray (the Save PIN button glows through at the bottom) */
  background: rgba(230, 233, 237, .8);
  -webkit-backdrop-filter: blur(10px) saturate(1.5);
  backdrop-filter: blur(10px) saturate(1.5);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .05);
  transform: translateY(100%);
  transition: transform var(--hs-duration-fast) var(--hs-easing-standard);   /* SMART_ANIMATE ease-in-out 0.3s */
  font-family: "SF Compact", "SF Compact Text", "SF Compact Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: #000;
}
.scr[data-screen="pin"] .pin-kb.is-up { transform: none; }
.scr[data-screen="pin"] .pin-kb-row { display: flex; gap: 6px; height: 48px; }
.scr[data-screen="pin"] .pin-key,
.scr[data-screen="pin"] .pin-key-space { flex: 1 0 0; min-width: 0; height: 48px; }
.scr[data-screen="pin"] .pin-key {
  position: relative; border-radius: 8.5px; cursor: pointer;
  background: #fff;   /* #191919 plus-lighter + rgba(255,255,255,.67) over the #E6E9ED tray */
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 3px 0 4px; color: #000;
  transition: background-color 80ms linear;
}
.scr[data-screen="pin"] .pin-key:active { background: #bcc0c7; }
.scr[data-screen="pin"] .pin-key-d {
  display: block; font-size: 23px; line-height: 28px; font-weight: 458; margin-bottom: -2px;
}
.scr[data-screen="pin"] .pin-key-l {
  display: block; font-size: 13px; line-height: 15px; font-weight: 556; letter-spacing: 2px;
  padding-left: 2px; /* balance trailing tracking */
}
.scr[data-screen="pin"] .pin-key--zero { justify-content: center; padding: 0; }
.scr[data-screen="pin"] .pin-key--zero .pin-key-d { margin: -1px 0 0; }
.scr[data-screen="pin"] .pin-key--del { background: transparent; padding: 0; justify-content: center; overflow: hidden; }
.scr[data-screen="pin"] .pin-key--del:active { background: rgba(0, 0, 0, .1); }
.scr[data-screen="pin"] .pin-key--del img {
  position: absolute; left: 50%; top: 0; width: 116px; height: 48px; transform: translateX(-50%); display: block;
}

/* ---------- CREATE PROFILE ---------- */
.scr[data-screen="create-profile"] .cp-form {
  position: absolute; left: 0; top: 100px; width: 375px;
  padding: 64px 24px 24px; display: flex; flex-direction: column; gap: 24px;
}
.scr[data-screen="create-profile"] .cp-fields { display: flex; flex-direction: column; gap: 12px; width: 327px; }
.scr[data-screen="create-profile"] .cp-tf { display: flex; flex-direction: column; gap: 8px; }
.scr[data-screen="create-profile"] .cp-field {
  box-sizing: border-box; min-height: 56px; width: 327px;
  padding: 5px 14px;                       /* Figma 7/16 measured from outer edge (stroke inside) */
  border: 2px solid var(--hs-warm-grey-200); border-radius: 12px; background: #fff;
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  transition: border-color var(--hs-duration-faster) var(--hs-easing-standard);
}
.scr[data-screen="create-profile"] .cp-field.is-focus { border-color: var(--hs-warm-grey-500); }
.scr[data-screen="create-profile"] .cp-li { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.scr[data-screen="create-profile"] .cp-label {
  display: block; font: 400 16px/24px var(--hs-font-sans); color: var(--hs-warm-grey-600); white-space: nowrap;
  transition: font-size var(--hs-duration-faster) var(--hs-easing-standard),
              line-height var(--hs-duration-faster) var(--hs-easing-standard),
              color var(--hs-duration-faster) linear;
}
.scr[data-screen="create-profile"] .cp-value {
  display: flex; align-items: center; height: 0; opacity: 0; overflow: hidden;
  font: 400 16px/24px var(--hs-font-sans); color: var(--hs-warm-grey-700);
  transition: height var(--hs-duration-faster) var(--hs-easing-standard),
              opacity var(--hs-duration-faster) linear;
}
.scr[data-screen="create-profile"] .cp-field.is-filled .cp-label { font-size: 12px; line-height: 18px; color: var(--hs-warm-grey-500); }
.scr[data-screen="create-profile"] .cp-field.is-filled .cp-value { height: 24px; opacity: 1; }
.scr[data-screen="create-profile"] .cp-caret {
  display: none; width: 2px; height: 20px; margin-left: 1px; border-radius: 2px; background: var(--hs-blue-200);
  animation: cp-caret 1s steps(1, end) infinite;
}
.scr[data-screen="create-profile"] .cp-field[data-field="name"].is-focus .cp-caret { display: block; }
@keyframes cp-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.scr[data-screen="create-profile"] .cp-icon { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.scr[data-screen="create-profile"] .cp-helper {
  margin: 0; padding-left: 16px; font: 400 12px/18px var(--hs-font-sans); color: var(--hs-warm-grey-500);
}

/* ---------- SPLASH ---------- */
.scr[data-screen="splash"] { background: var(--hs-warm-grey-100); }   /* Color/warmgrey/warmgrey100 #F9F4F2 */
.scr[data-screen="splash"] .sp-content {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--hs-duration-fast) linear;                  /* DISSOLVE 0.3s */
}
.scr[data-screen="splash"] .sp-content.is-in { opacity: 1; }
/* bounds = union of illustration frame (48.37,275.06 277.6×190.9) and ground (44,439 288×21) */
.scr[data-screen="splash"] .sp-world { position: absolute; left: 44px; top: 275px; width: 288px; height: 191px; overflow: hidden; }
.scr[data-screen="splash"] .sp-world img { position: absolute; left: -44px; top: -275px; width: 375px; height: 812px; display: block; max-width: none; }
.scr[data-screen="splash"] .sp-title {
  position: absolute; left: 62px; top: 490px; width: 251.708px; height: 48px; margin: 0;
  font: 900 38.541px/1.1 var(--hs-font-sans); letter-spacing: -0.7708px; color: #000; white-space: nowrap;
}
.scr[data-screen="splash"] .sp-progress {
  position: absolute; left: 48px; top: 752px; width: 280px; height: 12px; border-radius: 6px;
  background: var(--hs-warm-grey-200); overflow: hidden;                /* #E2DED9 track */
}
.scr[data-screen="splash"] .sp-progress-fill {
  height: 12px; width: 13px; border-radius: 6px; background: #02873E;    /* Figma progress green */
  transition: width 800ms var(--hs-easing-standard);
}
.scr[data-screen="splash"] .sp-content.is-full .sp-progress-fill { width: 280px; }