/* Reverb globals — reset, typography baseline, layout primitives.
 * Loaded after tokens.css. Components inherit from here.
 */

/* ------------------------------------------------------------------ */
/* Reset                                                              */
/* ------------------------------------------------------------------ */

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

html {
  /* Lock the document to a phone-friendly base font size.
   * Field reps work outdoors; 14pt body is the readability floor. */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Prevent overscroll bounce on iOS when not needed */
  overscroll-behavior-y: contain;

  /* Disable tap-highlight; we draw our own active states */
  -webkit-tap-highlight-color: transparent;

  min-height: 100vh;
  min-height: 100dvh;
}

/* Buttons are buttons. Reset the default chrome. */
button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Form controls inherit font */
input, select, textarea {
  font: inherit;
  color: inherit;
}

/* ------------------------------------------------------------------ */
/* App layout                                                         */
/* ------------------------------------------------------------------ */

/* Stage — desktop view shows the phone centered on warm paper.       */
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s5);
  background:
    radial-gradient(ellipse at center,
      var(--paper) 0%,
      var(--paper-2) 60%,
      var(--paper-3) 100%);
}

/* Phone frame — outer device + inner screen.                         */
.phone {
  width: var(--phone-w);
  height: var(--phone-h);
  background: #1A1A20;
  border-radius: var(--r-phone-bezel);
  padding: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 20px 60px rgba(0,0,0,0.25);
  position: relative;
}

.phone__screen {
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: var(--r-phone-screen);
  overflow: hidden;
  position: relative;
}

/* Dynamic island */
.phone__island {
  position: absolute;
  top: var(--s4);
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 26px;
  border-radius: 13px;
  background: var(--ink);
  z-index: 10;
}

/* Home indicator */
.phone__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 5px;
  border-radius: 2.5px;
  background: var(--ink);
  z-index: 10;
}

/* On phones, fill the viewport; no bezel mockery */
@media (max-width: 480px) {
  .stage {
    padding: 0;
    background: var(--paper);
  }
  .phone {
    width: 100vw;
    height: 100vh;
    /* svh = smallest stable viewport: always below the URL bar even when
       it's expanded. dvh "dynamic" should do this too but iOS Safari
       sometimes leaves a footer-hiding overlap; svh is the no-surprises
       option. Trade-off: a sliver of empty space when URL bar is hidden. */
    height: 100svh;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }
  .phone__screen {
    border-radius: 0;
  }
  .phone__island,
  .phone__home {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Global brand primitives                                            */
/* (The brand header itself lives in screens.css with the Web         */
/*  Component; the gold rule is a standalone primitive screens use.)  */
/* ------------------------------------------------------------------ */

/* 2px gold rule under every colored header — persistent across skins. */
.gold-rule {
  height: 2px;
  background: var(--gold);
}

/* ------------------------------------------------------------------ */
/* Utility — sentence-case enforcement is editorial, not CSS.         */
/* But all-caps microcopy gets letter-spacing per §4.4.               */
/* ------------------------------------------------------------------ */

.microcopy {
  font-size: var(--type-microcopy);
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ */
/* Accessibility — visible focus, sun-readable                        */
/* ------------------------------------------------------------------ */

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Hide focus ring on non-keyboard interaction */
:focus:not(:focus-visible) {
  outline: none;
}