/**
 * SCREENS.CSS - Screen-specific layouts (entry point)
 * 
 * This file contains:
 * - @import statements for all screen and drawer CSS modules
 * - Global app shell styles (.app)
 * - Screen system base styles (.screen, .screen.hidden)
 * - Shared UI components (header buttons, tooltips, stamps)
 * 
 * Import order matters for CSS cascade. Screens are loaded first,
 * then drawers, then reduced-motion overrides last.
 *
 * NOTE: @import keeps your HTML clean (one <link>), but it is render-blocking.
 * If you ever add a build step, convert these into a single bundled CSS file.
 */

/* ========================================
   GLOBAL: APP SHELL
   Contains all screens - must be fully responsive for foldables
   ======================================== */

:root{
  /* timing vars (safe defaults) */
  --intro-base: 0s;
  --intro-step: .08s;

  /* explainer stamp fill token */
  --stamp-ink: rgba(43, 44, 48, 0.78); /* stretch-limo-ish */
}

.app{
  position: relative;
  min-height: 100dvh;
  /* Ensure app never exceeds viewport width (fixes foldable device overflow) */
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  padding:
    max(14px, var(--safe-top))
    max(14px, var(--safe-right))
    max(18px, var(--safe-bot))
    max(14px, var(--safe-left));
  background: transparent !important;
}

/* ========================================
   GLOBAL: SCREEN SYSTEM
   ======================================== */

.screen{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: inherit;
  background: transparent !important;
}

.screen.hidden{ display: none !important; }

/* ========================================
   GLOBAL: SHARED UI (buttons, tooltips)
   ======================================== */

/* Header icon buttons (info/settings/etc) */
.header-btn{
  position: relative;
  overflow: visible;

  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--stroke-1);
  background: var(--glass-1);

  display: grid;
  place-items: center;

  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.header-btn:hover{ background: var(--glass-2); }
.header-btn:active{ transform: scale(0.96); }

.header-btn svg{
  width: 20px;
  height: 20px;
  fill: rgba(246, 251, 252, .7);
}

.header-btn--info:hover{
  border-color: color-mix(in srgb, var(--p-capri) 30%, var(--stroke-1));
}

.header-btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--p-capri) 55%, transparent);
  outline-offset: 2px;
}

/* Tooltip (reads aria-label) */
.header-btn::after{
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-2px);

  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(246, 251, 252, .95);

  background: rgba(0, 0, 0, .78);
  border: 1px solid color-mix(in srgb, var(--stroke-1) 70%, transparent);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);

  padding: 7px 11px;
  border-radius: 999px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  z-index: 999;

  backdrop-filter: blur(10px);
  -webkit-font-smoothing: antialiased;

  transition: opacity .15s ease, transform .15s ease;
}

.header-btn:hover::after,
.header-btn:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Alternative icon button (used elsewhere) */
.icon-btn{ position: relative; }

.icon-btn::after{
  content: attr(aria-label);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;

  opacity: 0;
  pointer-events: none;

  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  white-space: nowrap;

  transition: opacity .15s ease, transform .15s ease;
}

.icon-btn:hover::after,
.icon-btn:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.icon-btn--labeled{
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 10px 10px 8px;
  min-width: 56px;
}

/* “BA+” lil hover wiggle (used on multiple screens) */
.baPlus{
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform .15s ease;
}
button:hover .baPlus,
a:hover .baPlus{ transform: rotate(-10deg) scale(1.06); }
button:active .baPlus,
a:active .baPlus{ transform: rotate(8deg) scale(.98); }

/* ========================================
   GLOBAL: STAMPS (used in explainer + drawers)
   ======================================== */

.stamp{
  /* per-stamp knobs */
  --r: 0deg; /* rotation */
  --x: 0px;  /* nudge X */
  --y: 0px;  /* nudge Y */
  --tint: rgba(255, 255, 255, 0.10); /* overlay tint */

  padding: 6px 12px;
  border-radius: 6px;

  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;

  border: 2px solid currentColor;
  background:
    linear-gradient(0deg, var(--tint), var(--tint)),
    linear-gradient(0deg, var(--stamp-ink), var(--stamp-ink));

  box-shadow:
    0 2px 10px rgba(0, 0, 0, .45),
    0 0 18px color-mix(in srgb, currentColor 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .10);

  text-shadow: 0 0 18px color-mix(in srgb, currentColor 70%, transparent);

  transform: translate(var(--x), var(--y)) rotate(var(--r));
  animation: stampSlam 0.45s cubic-bezier(.36, .07, .19, .97) backwards;
}

@keyframes stampSlam{
  0%{
    opacity: 0;
    transform: translate(var(--x), calc(var(--y) - 16px)) rotate(calc(var(--r) + 16deg)) scale(2.2);
    filter: blur(3px);
  }
  60%{
    opacity: 1;
    transform: translate(var(--x), var(--y)) rotate(calc(var(--r) - 10deg)) scale(0.92);
    filter: blur(0);
  }
  80%{
    transform: translate(var(--x), var(--y)) rotate(calc(var(--r) + 6deg)) scale(1.05);
  }
  100%{
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
}