/* ============================================================
   PDF Occlusion — design system
   Tokens + components lifted exactly from the design handoff.
   ============================================================ */

:root {
  /* Brand golds */
  --gold: #ffd75e;
  --gold-shadow: #e6b84d;
  --gold-deep: #b0862a;
  --gold-tint: #fff6da;
  --gold-tint-border: #ffe49a;

  /* Ink (dark) */
  --ink: #1a1a17;
  --ink-raised: #262620;
  --ink-border: #37372e;

  /* Surfaces */
  --paper: #f7f4ec;
  --white: #ffffff;
  --page: #fbfaf6;

  /* Lines */
  --border: #e6e0d2;
  --input-border: #e0d9c8;

  /* Text */
  --body: #57513f;
  --muted: #8a8370;
  --muted-2: #9a9280;
  --muted-3: #b0a892;
  --eyebrow: #6b6455;

  /* FSRS grade colors */
  --again-bg: #fbe9e7;  --again-bd: #f3c9c2;  --again-ink: #b23a2b;
  --hard-bg: #fff6da;   --hard-bd: #ffe49a;   --hard-ink: #8a6a00;
  --good-bg: #eef4e8;   --good-bd: #cfe0bf;   --good-ink: #4a7028;
  --easy-bg: #e8eff4;   --easy-bd: #c2d5e2;   --easy-ink: #2b5a78;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;

  /* Placeholder "PDF page" fill */
  --page-stripes: repeating-linear-gradient(135deg, #f4f0e6 0 8px, #fbfaf6 8px 16px);

  --card-shadow: 0 24px 50px -20px rgba(60, 50, 20, .32);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--gold-deep); }
::selection { background: var(--gold); color: var(--ink); }

h1, h2, h3, h4 { font-family: var(--font-display); }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes popIn  { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  border: none;
  border-radius: 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.btn:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }

.btn-gold {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--gold-shadow);
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--gold-shadow); }
.btn-gold.lg { box-shadow: 0 4px 0 var(--gold-shadow); }
.btn-gold.lg:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--gold-shadow); }

.btn-dark { background: var(--ink); color: var(--gold); }
.btn-dark:hover { transform: translateY(-1px); }

.btn-ghost { background: none; color: var(--ink); box-shadow: none; }

.btn-outline {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--input-border);
  box-shadow: none;
}
.btn-outline:hover { border-color: var(--ink); }

/* ---------- Inputs ---------- */
.field {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--input-border);
  border-radius: 11px;
  background: var(--white);
  outline: none;
  transition: border-color .12s ease;
}
.field:focus { border-color: var(--ink); }
.field:disabled { color: var(--muted-3); background: var(--page); }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.lib-card { transition: transform .15s ease, box-shadow .15s ease; }
.lib-card:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -14px rgba(60, 50, 20, .3); }

/* ---------- Shared page placeholder ---------- */
.pdf-page {
  background: var(--page);
  background-image: var(--page-stripes);
  border: 1px solid #eee8da;
}

/* Screen fade on route change */
.screen-enter { animation: fadeIn .18s ease both; }

/* ---------- Toast ---------- */
#toast-host {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.toast {
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 12px; font-size: 14px; font-weight: 600;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.5); animation: popIn .2s ease both;
  max-width: 90vw;
}
.toast.err { background: var(--again-ink); color: #fff; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--gold-tint-border); border-top-color: var(--gold-deep);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mobile-bottom-nav { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid, .features-head, .fsrs-grid, .dash-grid { grid-template-columns: 1fr !important; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .auth-split { flex-direction: column !important; }
  .auth-brand { min-height: 220px; }
  .auth-form-panel { width: 100% !important; }
  .editor-grid { grid-template-columns: 1fr !important; }
  .sidebar { display: none !important; }
  .mobile-bottom-nav {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
    padding: 5px; background: rgba(255,253,248,.96); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: 0 14px 38px rgba(43,36,18,.2); backdrop-filter: blur(14px);
  }
  .app-content { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  .app-topbar { padding: calc(12px + env(safe-area-inset-top)) 18px 12px !important; }
  .app-topbar-actions { gap: 9px !important; }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .landing-nav-links a { display: none; }
  .app-topbar-search { display: none !important; }
  .app-topbar { justify-content: flex-end !important; padding: calc(10px + env(safe-area-inset-top)) 12px 10px !important; }
  .app-topbar-actions > button { padding: 9px 10px !important; font-size: 12.5px !important; }
  .app-content { padding: 22px 14px calc(96px + env(safe-area-inset-bottom)) !important; }
}