/* Self-hosted fonts (no Google Fonts hotlinking). Files live in public/fonts/
   and are served directly by Rails. Variable Nunito covers 200–1000 weights
   in a single file; Caveat ships fixed-weight files so we only ship the two
   weights we actually use (500 + 700). */
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/fonts/nunito-latin-wght-normal.woff2") format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("/fonts/nunito-latin-ext-wght-normal.woff2") format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/caveat-latin-500-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/caveat-latin-ext-500-normal.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/caveat-latin-700-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("/fonts/caveat-latin-ext-700-normal.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@import "tailwindcss";

/* Component-scoped CSS that's too complex to express as Tailwind utilities
   (gradient meters, dialog chrome, coloured state grids). Each file matches
   the partial/view-component that uses it. */
@import "./components/tooltip.css";
@import "./components/trace_dialog.css";
@import "./components/credentials_dialog.css";
@import "./components/word_profile.css";
@import "./components/mastery.css";
@import "./components/entity_hero.css";
@import "./components/mastery_breakdown.css";
@import "./components/collectable_card.css";
@import "./components/progress_card.css";
@import "./components/auth.css";
@import "./components/documents.css";
@import "./components/year_pills.css";
@import "./components/limit_pills.css";
@import "./components/session_attempts.css";

@theme {
  --font-sans: "Nunito Variable", "Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  --color-brand-50: #E8F1FB;
  --color-brand-100: #D0E2F7;
  --color-brand-200: #A1C4EE;
  --color-brand-300: #72A7E6;
  --color-brand-400: #4389DD;
  --color-brand-500: #1565C0;
  --color-brand-600: #114FA3;
  --color-brand-700: #0D47A1;
  --color-brand-800: #0A3B85;
  --color-brand-900: #082F6A;

  --shadow-card: 0 6px 24px -12px rgb(15 23 42 / 0.12), 0 2px 6px -4px rgb(15 23 42 / 0.04);
  --shadow-card-lg: 0 12px 40px -12px rgb(15 23 42 / 0.18), 0 4px 10px -4px rgb(15 23 42 / 0.06);
}

@layer base {
  /* Contain full-bleed children (like the entity hero) that use the
     100vw / -50vw breakout trick — without this the page gets a 7px-ish
     horizontal scroll from the vertical-scrollbar-width leakage. Brand-blue
     background matches the <meta name="theme-color">, so iOS safe-area
     insets and rubber-band overscroll flow into the header colour instead
     of flashing white above/below the page body. */
  html {
    overflow-x: clip;
    /* Darkest blue from the bottom of the wallpaper gradient, so the iOS
       rubber-band overscroll and status-bar backdrop deepen into the same
       tone the auth pages fade down to. */
    background-color: #082F6A;
  }

  /* iOS Safari paints its status-bar backdrop and rubber-band overscroll
     with the page body's background colour. `bg-slate-50` alone would
     flash near-white into both safe-areas; override to a brand-blue body
     colour and inset the slate as a background-image that only covers the
     visible content band. The blue bands top and bottom sit behind the
     sticky nav / opaque footer and are invisible in-viewport, but they're
     what iOS samples for the surrounding chrome. */
  body.bg-slate-50 {
    background-color: #082F6A;
    background-image: linear-gradient(
      to bottom,
      #082F6A 0,
      #082F6A 4rem,
      #f8fafc 4rem,
      #f8fafc calc(100% - 4rem),
      #082F6A calc(100% - 4rem),
      #082F6A 100%
    );
    background-repeat: no-repeat;
  }

  /* Auth pages paint the whole viewport — including iOS safe-area insets and
     rubber-band overscroll — with the brand blue gradient. Putting the paint
     on <html> (not <body>) means the gradient reaches every edge of the
     viewport, so there's no seam between the status-bar area and the top of
     the body's background. Uses background-image (not the shorthand) so the
     fallback background-color survives, and avoids background-attachment:
     fixed because iOS Safari fails to paint fixed-attachment backgrounds on
     the root element — which leaves the safe-area flashing white. */
  html.auth-page {
    background-color: #1565C0;
    background-image:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.10) 0%, transparent 70%),
      linear-gradient(to bottom, #1565C0 0%, #0D47A1 60%, #082F6A 100%);
    background-repeat: no-repeat;
  }

  body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  /* Tailwind Preflight sets <button> to cursor: default. Restore the pointer
     for interactive buttons; disabled ones still get not-allowed when they
     use the disabled:cursor-not-allowed utility. */
  button:not(:disabled),
  [role="button"]:not(:disabled),
  summary {
    cursor: pointer;
  }
}

@layer components {
  /* Replace the browser-default chevron on styled selects with a larger,
     consistently-positioned SVG so they match the rest of the form controls. */
  .app-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'><path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06z' clip-rule='evenodd'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1.125rem 1.125rem;
  }

  /* Brand blue wash used by unauthenticated pages and by the marketing site's
     global page background. Applied to <body> via `.auth-page-body` so the
     whole viewport — including the footer strip — paints as one continuous
     solid-blue surface instead of splitting to slate-50 below the auth card. */
  .auth-page-body {
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 255, 255, 0.10) 0%, transparent 70%),
      linear-gradient(to bottom, #1565C0 0%, #0D47A1 60%, #082F6A 100%);
    background-attachment: fixed;
  }

  /* Warm amber highlighter swipe behind a run of text. Mirrors the play app
     and website so a single headline word (usually "Spello") reads like it's
     been marked with a real highlighter. Dark-on-gold for legibility. */
  .hi-marker {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 0 0.12em;
    color: #0B2A5B;
  }
  .hi-marker::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    bottom: -4%;
    background: linear-gradient(120deg, #FCD34D 0%, #FBBF24 55%, #F59E0B 100%);
    border-radius: 4px;
    transform: skewX(-4deg) rotate(-0.6deg);
    z-index: -1;
    box-shadow: 0 2px 10px -2px rgba(252, 211, 77, 0.4);
  }
}