/* ============================================================
   The Student Axis — Paper & Scrapbook Design System
   Shared across every page. Pure CSS, no image assets.
   ============================================================ */

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

:root {
  /* ---- Paper surfaces ---- */
  --paper:        #f4efe2;   /* aged page — app background */
  --paper-sheet:  #fbf8f0;   /* clean note sheet — cards */
  --paper-white:  #fefdfa;   /* brightest sheet */
  --paper-kraft:  #e0d0ad;   /* kraft / tan note */
  --paper-edge:   #e6ddc7;   /* torn edge shadowing */

  /* ---- Ink ---- */
  --ink:        #1f1c17;
  --ink-soft:   #45403a;
  --ink-muted:  #6e675d;   /* 4.6:1 on --paper-sheet */
  --ink-faint:  #a49a8a;

  /* ---- Brand blue ---- */
  --blue:       #3f78bd;
  --blue-deep:  #2d5c99;
  --blue-soft:  #a6c6e8;
  --blue-wash:  #e2edf9;

  /* ---- Notes & accents ---- */
  --sticky-blue:   #9dc0e6;
  --sticky-cream:  #f0e3bd;
  --tape:          rgba(226, 216, 190, 0.82);
  --rule:          rgba(63, 120, 189, 0.16);   /* notebook ruled line */
  --grid:          rgba(63, 120, 189, 0.10);   /* graph paper */
  --margin-line:   rgba(203, 106, 106, 0.30);  /* red margin */

  /* ---- Semantic ---- */
  --success: #3f8f6b;
  --danger:  #c0553f;
  --warning: #c08a2e;

  /* ---- Type ---- */
  --hand: 'Kalam', 'Comic Sans MS', cursive;
  --sans: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  /* ---- Elevation (paper lifting off paper) ---- */
  --lift-1: 0 1px 2px rgba(60, 50, 30, 0.07), 0 2px 6px rgba(60, 50, 30, 0.05);
  --lift-2: 0 2px 4px rgba(60, 50, 30, 0.08), 0 6px 16px rgba(60, 50, 30, 0.08);
  --lift-3: 0 4px 8px rgba(60, 50, 30, 0.10), 0 14px 34px rgba(60, 50, 30, 0.12);

  /* ---- z-index scale ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-backdrop: 200;
  --z-modal: 210;
  --z-toast: 300;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   BASE
   ============================================================ */

html {
  scroll-behavior: smooth;
  /* Always keep the vertical scrollbar's space reserved. Without this, short
     pages (no scrollbar) are ~17px wider than long ones, and the centred
     layout — navbar included — visibly slides sideways when navigating
     between them. */
  overflow-y: scroll;
}

body {
  font-family: var(--sans);
  background-color: var(--paper);
  color: var(--ink-soft);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  /* Collage pieces are rotated and can poke past the viewport edge —
     never let that turn into a horizontal scrollbar. */
  overflow-x: hidden;
}

/* Paper grain over the whole page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-base);
  opacity: 0.55;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.22'/%3E%3C/svg%3E");
}

::selection { background: var(--blue-soft); color: var(--ink); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.hand {
  font-family: var(--hand);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.15;
}

h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }

.page-title {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.9rem);
  color: var(--ink);
  line-height: 1.1;
  display: inline-block;
  position: relative;
}

/* Hand-drawn squiggle underline under a heading */
.underline-doodle::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -8px;
  bottom: -10px;
  height: 12px;
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2,8 C28,3 44,10 70,6 C96,2 118,9 146,5 C166,2 182,7 198,4' fill='none' stroke='%233f78bd' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.page-sub {
  font-size: 0.95rem;
  color: var(--ink-muted);
  margin-top: 14px;
}

.eyebrow-hand {
  font-family: var(--hand);
  font-size: 1rem;
  color: var(--blue-deep);
}

/* Hand-drawn circle around a word */
.circled {
  position: relative;
  display: inline-block;
  padding: 0 0.22em;
}
.circled::after {
  content: '';
  position: absolute;
  inset: -18% -6%;
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M126,6 C64,2 12,18 8,44 C4,70 62,86 128,84 C190,82 234,66 232,42 C230,20 188,7 120,7' fill='none' stroke='%233f78bd' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Marker highlight behind text */
.highlight {
  background: linear-gradient(to bottom, transparent 12%, var(--blue-soft) 12%, var(--blue-soft) 88%, transparent 88%);
  padding: 0 0.15em;
  opacity: 0.9;
}

/* ============================================================
   PAPER SURFACES
   ============================================================ */

.sheet {
  position: relative;
  background: var(--paper-sheet);
  border: 1px solid var(--paper-edge);
  border-radius: 4px;
  box-shadow: var(--lift-2);
  z-index: var(--z-base);
}

/* Ruled notebook paper */
.sheet--ruled {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    var(--rule) 31px,
    var(--rule) 32px
  );
  background-position: 0 8px;
}

/* Graph / grid paper */
.sheet--grid {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 19px, var(--grid) 19px 20px),
    repeating-linear-gradient(to right,  transparent 0 19px, var(--grid) 19px 20px);
}

/* Red margin rule down the left */
.sheet--margin::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 46px;
  width: 1.5px;
  background: var(--margin-line);
  pointer-events: none;
}

/* Torn top + bottom edge */
.torn {
  clip-path: polygon(
    0% 10%, 5% 4%, 11% 9%, 17% 3%, 23% 8%, 30% 3%, 36% 8%, 43% 3%, 50% 8%,
    57% 3%, 63% 8%, 70% 3%, 77% 8%, 84% 3%, 90% 8%, 96% 3%, 100% 7%,
    100% 93%, 95% 98%, 89% 92%, 82% 97%, 75% 92%, 68% 97%, 61% 91%, 54% 97%,
    47% 92%, 40% 97%, 33% 91%, 26% 97%, 19% 92%, 12% 97%, 6% 92%, 0% 96%
  );
}

/* Torn bottom edge only */
.torn-bottom {
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 95%, 94% 99%, 87% 94%, 80% 99%, 72% 94%, 64% 99%, 56% 94%,
    48% 99%, 40% 94%, 32% 99%, 24% 94%, 16% 99%, 8% 94%, 0% 98%
  );
}

/* Spiral binding along the top edge */
.spiral-top { position: relative; }
.spiral-top::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 26px;
  right: 26px;
  height: 22px;
  background-image: radial-gradient(ellipse 5.5px 10px at center, transparent 0 52%, #b6a98d 53%, #8f8368 74%, transparent 76%);
  background-size: 30px 22px;
  background-repeat: repeat-x;
  pointer-events: none;
}

/* ============================================================
   COLLAGE ELEMENTS — tape, clips, sticky notes, polaroids
   ============================================================ */

.tape {
  position: absolute;
  width: 92px;
  height: 26px;
  background: var(--tape);
  border-left: 1px dashed rgba(160, 148, 118, 0.35);
  border-right: 1px dashed rgba(160, 148, 118, 0.35);
  box-shadow: 0 1px 2px rgba(60, 50, 30, 0.10);
  opacity: 0.92;
}
.tape--tl { top: -12px; left: 26px; transform: rotate(-6deg); }
.tape--tr { top: -12px; right: 26px; transform: rotate(5deg); }
.tape--tc { top: -13px; left: 50%; transform: translateX(-50%) rotate(-2deg); }

.paperclip {
  position: absolute;
  top: -16px;
  width: 22px;
  height: 46px;
  border: 2.5px solid #9aa3ad;
  border-radius: 11px;
  border-bottom-color: transparent;
  transform: rotate(8deg);
  opacity: 0.85;
}

.sticky {
  position: relative;
  padding: 18px 20px;
  background: var(--sticky-cream);
  box-shadow: var(--lift-2);
  font-family: var(--hand);
  color: var(--ink);
  line-height: 1.4;
}
.sticky--blue { background: var(--sticky-blue); }
.sticky--kraft { background: var(--paper-kraft); }

.polaroid {
  background: var(--paper-white);
  padding: 12px 12px 44px;
  box-shadow: var(--lift-3);
  border: 1px solid rgba(0,0,0,0.05);
}
.polaroid figcaption {
  font-family: var(--hand);
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 12px;
}

/* Rotation utilities — collage never sits perfectly straight */
.rot-l1 { transform: rotate(-1deg); }
.rot-l2 { transform: rotate(-2.2deg); }
.rot-r1 { transform: rotate(1deg); }
.rot-r2 { transform: rotate(2.2deg); }

/* ============================================================
   NAVIGATION
   ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(244, 239, 226, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--paper-edge);
}

.topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  font-family: var(--sans);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-words { display: block; }
.brand-words span { display: block; }
.brand .brand-2 { color: var(--blue); }

/* Star logo — treated as a stuck-on paper sticker.
   `multiply` melts its cream backing into the paper behind it. */
.brand-logo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  transform: rotate(-7deg);
  mix-blend-mode: multiply;
  transition: transform 0.3s var(--ease);
}
.brand:hover .brand-logo { transform: rotate(4deg) scale(1.08); }

/* Larger centred mark for the auth cards */
.auth-logo {
  display: block;
  width: 66px;
  height: 66px;
  object-fit: contain;
  margin: 0 auto 6px;
  transform: rotate(-5deg);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-logo { transform: rotate(-7deg); }
}

.nav-links {
  display: flex;
  /* Ten links live here since the branch pages joined; tighter gap and a
     slightly smaller size keep the row inside the 1120px bar. */
  gap: 15px;
  list-style: none;
  align-items: center;
  margin-left: 8px;
}
.nav-links a {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 0;
  position: relative;
  transition: color 0.18s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -3px;
  height: 7px;
  background: no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' preserveAspectRatio='none'%3E%3Cpath d='M2,5 C18,2 30,7 46,4 C58,2 70,6 78,3' fill='none' stroke='%233f78bd' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nav-spacer { margin-left: auto; }

.nav-user {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1.5px solid var(--paper-edge);
  background: var(--paper-sheet);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.nav-user:hover { border-color: var(--blue-soft); box-shadow: var(--lift-1); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px;
}
.nav-toggle span { width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; }

/* ============================================================
   CLOSE / ESCAPE HATCH
   Full-page screens (sign in, sign up, reset) have no site nav, so
   without this there is no way back out to the site.
   ============================================================ */

.close-page {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: var(--z-sticky);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper-sheet);
  border: 1.5px solid var(--paper-edge);
  box-shadow: var(--lift-1);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.close-page:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
  transform: rotate(90deg) scale(1.07);
  box-shadow: var(--lift-2);
}
.close-page:focus-visible {
  outline: 2.5px solid var(--blue-deep);
  outline-offset: 3px;
}
.close-page svg { width: 19px; height: 19px; }

@media (max-width: 560px) {
  .close-page { top: 12px; right: 12px; width: 40px; height: 40px; }
  .close-page svg { width: 17px; height: 17px; }
}

/* ============================================================
   AVATARS
   ============================================================ */

.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--blue-wash);
  color: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
  border: 2px solid var(--paper-white);
  box-shadow: 0 0 0 1px var(--paper-edge);
}
.avatar--xs { width: 26px; height: 26px; font-size: 0.7rem; }
.avatar--sm { width: 32px; height: 32px; font-size: 0.78rem; }
.avatar--md { width: 42px; height: 42px; font-size: 0.95rem; }
.avatar--lg { width: 92px; height: 92px; font-size: 2rem; }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease), background 0.16s var(--ease);
  line-height: 1.3;
}

.btn:focus-visible { outline: 2.5px solid var(--blue-deep); outline-offset: 2px; }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--lift-1);
}
.btn--primary:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: var(--lift-2); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--paper-sheet);
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--paper-white); transform: translateY(-1px); box-shadow: var(--lift-1); }

.btn--quiet {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--paper-edge);
}
.btn--quiet:hover { color: var(--ink); border-color: var(--ink-faint); background: var(--paper-sheet); }

.btn--sm { padding: 7px 14px; font-size: 0.82rem; border-radius: 8px; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.btn .spin {
  width: 15px; height: 15px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: none;
}
.btn.is-loading .spin { display: block; }
.btn.is-loading .btn-label { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   FILTER CHIPS
   ============================================================ */

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.chip {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--paper-edge);
  background: var(--paper-sheet);
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper-sheet);
}
.chip:focus-visible { outline: 2.5px solid var(--blue-deep); outline-offset: 2px; }

/* ============================================================
   TYPE BADGES  (Discussion / Idea / Initiative / Question / Poll)
   ============================================================ */

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.type-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--blue-wash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--blue-deep);
}
.type-icon svg { width: 18px; height: 18px; }

/* ============================================================
   POST CARDS
   ============================================================ */

.post-card {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--paper-white);
  border: 1.5px solid var(--paper-edge);
  border-radius: 10px;
  box-shadow: var(--lift-1);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-2);
  border-color: var(--blue-soft);
}

.post-body { flex: 1; min-width: 0; }

.post-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
  margin: 6px 0 5px;
}

.post-excerpt {
  font-size: 0.875rem;
  color: var(--ink-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.post-meta .who { font-weight: 700; color: var(--ink-soft); }
.post-meta .dot { color: var(--ink-faint); }

.post-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-left: 6px;
  flex-shrink: 0;
  text-align: center;
}
.stat-num {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
}
.stat-label {
  font-size: 0.66rem;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Support (like) toggle */
.support-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 8px;
  transition: background 0.16s var(--ease);
}
.support-btn:hover { background: var(--blue-wash); }
.support-btn[aria-pressed="true"] .stat-num,
.support-btn[aria-pressed="true"] svg { color: var(--blue); }
.support-btn svg { width: 17px; height: 17px; color: var(--ink-muted); }
.support-btn:focus-visible { outline: 2.5px solid var(--blue-deep); outline-offset: 2px; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */

.field { margin-bottom: 18px; }

.field label,
.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  margin-bottom: 7px;
}

.input,
.textarea,
.select {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--ink);
  padding: 11px 14px;
  background: var(--paper-white);
  border: 1.5px solid var(--paper-edge);
  border-radius: 9px;
  outline: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-faint); }

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(63, 120, 189, 0.14);
}

.textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236e675d' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Post-type picker (radio cards) */
.type-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
}
.type-option { position: relative; }
.type-option input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  cursor: pointer;
  margin: 0;
}
.type-option span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 8px;
  background: var(--paper-white);
  border: 1.5px solid var(--paper-edge);
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-align: center;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease), color 0.16s var(--ease);
}
.type-option span svg { width: 22px; height: 22px; }
.type-option input:hover + span { border-color: var(--ink-faint); }
.type-option input:checked + span {
  border-color: var(--blue);
  background: var(--blue-wash);
  color: var(--blue-deep);
}
.type-option input:focus-visible + span { outline: 2.5px solid var(--blue-deep); outline-offset: 2px; }

/* ============================================================
   MODAL
   ============================================================ */

.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(38, 32, 22, 0.42);
  backdrop-filter: blur(3px);
  z-index: var(--z-backdrop);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.backdrop.is-open { display: flex; }

.modal {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  max-width: 560px;
  background: var(--paper-sheet);
  border: 1.5px solid var(--paper-edge);
  border-radius: 6px;
  box-shadow: var(--lift-3);
  padding: 32px 30px 28px;
  animation: modalIn 0.32s var(--ease);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) rotate(-0.4deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--paper-edge);
  background: var(--paper-white);
  color: var(--ink-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.modal-close:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ============================================================
   MESSAGES / STATES
   ============================================================ */

.notice {
  padding: 12px 16px;
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: none;
}
.notice.is-shown { display: block; }
.notice--error   { background: rgba(192, 85, 63, 0.10);  border: 1.5px solid rgba(192, 85, 63, 0.25);  color: #9c412e; }
.notice--success { background: rgba(63, 143, 107, 0.10); border: 1.5px solid rgba(63, 143, 107, 0.25); color: #2f6b50; }

.empty-state {
  text-align: center;
  padding: 56px 24px;
}
.empty-state .doodle { font-size: 2.4rem; margin-bottom: 10px; opacity: 0.5; }
.empty-state h3 { font-family: var(--hand); font-size: 1.4rem; margin-bottom: 6px; }
.empty-state p { font-size: 0.9rem; color: var(--ink-muted); max-width: 42ch; margin: 0 auto 18px; }

/* Skeleton loading — paper strips, not spinners */
.skeleton {
  background: linear-gradient(90deg, var(--paper-edge) 25%, #f0e9d8 37%, var(--paper-edge) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ============================================================
   LAYOUT
   ============================================================ */

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: var(--z-base);
}
.wrap--narrow { max-width: 760px; }

.stack-sm > * + * { margin-top: 10px; }
.stack   > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 28px; }

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  margin-top: 72px;
  padding: 34px 24px 42px;
  border-top: 1.5px dashed var(--paper-edge);
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-muted);
  position: relative;
  z-index: var(--z-base);
}
.site-footer a { color: var(--blue-deep); font-weight: 700; text-decoration: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The breakpoint sits high (was 820px) because ten links need real width —
   below this the menu folds into the hamburger button. */
@media (max-width: 1080px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper-sheet);
    border-bottom: 1.5px solid var(--paper-edge);
    box-shadow: var(--lift-2);
    padding: 8px 0;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 24px; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-toggle { display: flex; }
  .topbar-inner { gap: 14px; position: relative; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .post-card { padding: 15px 16px; gap: 11px; }
  .post-stats { gap: 8px; }
  .modal { padding: 26px 20px 22px; }
  .tape { width: 70px; }
}

/* ============================================================
   TORN EDGES — real ragged paper, via SVG masks
   ============================================================ */

/* Ragged on all four sides */
.tear-all {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M6,9 L20,3 L34,10 L49,2 L64,9 L79,3 L94,10 L109,4 L124,9 L139,3 L154,10 L169,3 L184,9 L199,4 L214,10 L229,3 L244,9 L259,4 L274,10 L289,3 L304,9 L319,4 L334,10 L349,3 L364,9 L379,4 L394,8 L397,20 L391,36 L396,52 L390,70 L395,88 L389,106 L396,124 L390,142 L395,160 L389,178 L396,196 L390,214 L395,232 L389,250 L396,268 L391,284 L394,293 L379,297 L364,291 L349,297 L334,290 L319,296 L304,291 L289,297 L274,290 L259,296 L244,291 L229,297 L214,290 L199,296 L184,291 L169,297 L154,290 L139,296 L124,291 L109,297 L94,290 L79,296 L64,291 L49,297 L34,290 L20,296 L6,292 L3,280 L9,264 L4,248 L10,230 L5,212 L11,194 L4,176 L10,158 L5,140 L11,122 L4,104 L10,86 L5,68 L11,50 L4,32 L9,16 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M6,9 L20,3 L34,10 L49,2 L64,9 L79,3 L94,10 L109,4 L124,9 L139,3 L154,10 L169,3 L184,9 L199,4 L214,10 L229,3 L244,9 L259,4 L274,10 L289,3 L304,9 L319,4 L334,10 L349,3 L364,9 L379,4 L394,8 L397,20 L391,36 L396,52 L390,70 L395,88 L389,106 L396,124 L390,142 L395,160 L389,178 L396,196 L390,214 L395,232 L389,250 L396,268 L391,284 L394,293 L379,297 L364,291 L349,297 L334,290 L319,296 L304,291 L289,297 L274,290 L259,296 L244,291 L229,297 L214,290 L199,296 L184,291 L169,297 L154,290 L139,296 L124,291 L109,297 L94,290 L79,296 L64,291 L49,297 L34,290 L20,296 L6,292 L3,280 L9,264 L4,248 L10,230 L5,212 L11,194 L4,176 L10,158 L5,140 L11,122 L4,104 L10,86 L5,68 L11,50 L4,32 L9,16 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Ragged top + bottom only (keeps straight sides) */
.tear-y {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0,8 L16,2 L32,9 L48,3 L64,10 L80,3 L96,9 L112,2 L128,9 L144,3 L160,10 L176,3 L192,9 L208,2 L224,9 L240,4 L256,10 L272,3 L288,9 L304,2 L320,9 L336,4 L352,10 L368,3 L384,9 L400,4 L400,296 L384,291 L368,297 L352,290 L336,296 L320,291 L304,297 L288,291 L272,296 L256,290 L240,297 L224,291 L208,296 L192,290 L176,297 L160,291 L144,296 L128,290 L112,297 L96,291 L80,296 L64,290 L48,297 L32,291 L16,296 L0,292 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M0,8 L16,2 L32,9 L48,3 L64,10 L80,3 L96,9 L112,2 L128,9 L144,3 L160,10 L176,3 L192,9 L208,2 L224,9 L240,4 L256,10 L272,3 L288,9 L304,2 L320,9 L336,4 L352,10 L368,3 L384,9 L400,4 L400,296 L384,291 L368,297 L352,290 L336,296 L320,291 L304,297 L288,291 L272,296 L256,290 L240,297 L224,291 L208,296 L192,290 L176,297 L160,291 L144,296 L128,290 L112,297 L96,291 L80,296 L64,290 L48,297 L32,291 L16,296 L0,292 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ============================================================
   COLLAGE KIT — washi, clips, stamps, stickers, scraps
   ============================================================ */

/* Coloured washi tape with torn ends */
.washi {
  position: absolute;
  width: 104px;
  height: 30px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.22) 0 5px, transparent 5px 10px),
    var(--sticky-blue);
  opacity: 0.88;
  box-shadow: 0 2px 4px rgba(60,50,30,0.14);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M3,0 L97,0 L94,7 L98,15 L95,23 L97,30 L4,30 L2,22 L6,15 L1,8 Z' fill='%23fff'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M3,0 L97,0 L94,7 L98,15 L95,23 L97,30 L4,30 L2,22 L6,15 L1,8 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.washi--cream { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.25) 0 5px, transparent 5px 10px), var(--sticky-cream); }
.washi--kraft { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 5px, transparent 5px 10px), var(--paper-kraft); }

/* Torn scrap of paper — a scrap of another sheet peeking through */
.scrap {
  position: absolute;
  background: var(--paper-kraft);
  box-shadow: var(--lift-1);
}

/* Rubber-stamp style label */
.stamp {
  display: inline-block;
  font-family: var(--hand);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border: 2.5px solid var(--blue-deep);
  border-radius: 4px;
  padding: 4px 12px;
  opacity: 0.72;
  transform: rotate(-6deg);
}

/* Metal paperclip (sharper than the .paperclip outline) */
.clip {
  position: absolute;
  width: 17px;
  height: 44px;
  border: 2.5px solid #97a1ac;
  border-radius: 9px 9px 7px 7px;
  border-bottom-color: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.clip::after {
  content: '';
  position: absolute;
  top: 6px; left: 3px;
  width: 6px; height: 28px;
  border: 2.5px solid #b3bcc6;
  border-radius: 4px 4px 3px 3px;
  border-bottom-color: transparent;
}

/* ============================================================
   ANIMATION SYSTEM
   ============================================================ */

/* NOTE: entrance animations are deliberately TRANSFORM-ONLY.
   Animating opacity risks shipping invisible content if animations never
   tick (hidden tab, headless renderer, blocked JS). Worst case here is an
   element resting a few pixels off — still fully visible and readable. */

@keyframes driftIn {
  from { transform: translateY(22px) rotate(var(--rot, 0deg)) scale(0.97); }
  to   { transform: translateY(0)    rotate(var(--rot, 0deg)) scale(1); }
}

@keyframes slideInLeft {
  from { transform: translateX(-26px) rotate(var(--rot, 0deg)); }
  to   { transform: translateX(0)     rotate(var(--rot, 0deg)); }
}

@keyframes stickIn {
  0%   { transform: rotate(calc(var(--rot, 0deg) - 14deg)) scale(0.72); }
  70%  { transform: rotate(calc(var(--rot, 0deg) + 3deg))  scale(1.04); }
  100% { transform: rotate(var(--rot, 0deg))               scale(1); }
}

@keyframes tapeDown {
  from { transform: translateY(-14px) rotate(var(--rot, 0deg)) scaleX(0.6); }
  to   { transform: translateY(0)     rotate(var(--rot, 0deg)) scaleX(1); }
}

/* SVG doodles that draw themselves */
@keyframes drawStroke { to { stroke-dashoffset: 0; } }

.draw path {
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  animation: drawStroke 1.1s var(--ease) forwards;
}

/* Gentle idle float for small decorative bits */
@keyframes floaty {
  0%, 100% { transform: translateY(0)    rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-7px) rotate(calc(var(--rot, 0deg) + 2deg)); }
}
.floaty { animation: floaty 5s ease-in-out infinite; }
.floaty--slow { animation-duration: 7.5s; }

/* Staggered load-in delays */
.d1 { animation-delay: 0.06s; }
.d2 { animation-delay: 0.14s; }
.d3 { animation-delay: 0.22s; }
.d4 { animation-delay: 0.32s; }
.d5 { animation-delay: 0.42s; }
.d6 { animation-delay: 0.54s; }

/* On-load entrances (run immediately — never gate visibility) */
.anim-drift { animation: driftIn 0.72s var(--ease) backwards; }
.anim-left  { animation: slideInLeft 0.7s var(--ease) backwards; }
.anim-stick { animation: stickIn 0.62s var(--ease) backwards; }
.anim-tape  { animation: tapeDown 0.55s var(--ease) backwards; }

/* ---- Scroll reveals ----
   Purely ADDITIVE: the element is always visible; entering the viewport just
   plays a transform animation. Nothing is ever gated behind the animation
   firing, so a paused/blocked renderer can't blank a section. */
.js-anim .reveal.is-in       { animation: driftIn 0.72s var(--ease); }
.js-anim .reveal-stick.is-in { animation: stickIn 0.62s var(--ease); }

/* ---- Hover: paper physically lifts and straightens ---- */
.lift-hover {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lift-hover:hover {
  transform: rotate(0deg) translateY(-5px) scale(1.012);
  box-shadow: var(--lift-3);
  z-index: 5;
}

/* Sticker nudge on hover */
.wiggle-hover { transition: transform 0.28s var(--ease); }
.wiggle-hover:hover { transform: rotate(calc(var(--rot, 0deg) + 4deg)) scale(1.05); }

/* ============================================================
   THEME SWITCH — floating button, bottom-LEFT on every page.
   Bottom-left on purpose: toasts pop up bottom-right on the profile
   and admin pages, and .close-page owns the top-right on auth pages.
   The button itself is created by a small script at the end of each
   page's <body>, so the markup lives in one snippet, not twelve files.
   ============================================================ */

.theme-fab {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: var(--z-sticky);   /* under modals and toasts, above content */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper-sheet);
  border: 1.5px solid var(--paper-edge);
  box-shadow: var(--lift-2);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.theme-fab:hover {
  color: var(--ink);
  border-color: var(--ink-faint);
  transform: translateY(-2px) rotate(-10deg);
  box-shadow: var(--lift-3);
}
.theme-fab:focus-visible { outline: 2.5px solid var(--blue-deep); outline-offset: 3px; }
.theme-fab svg { width: 21px; height: 21px; }

@media (max-width: 560px) {
  .theme-fab { bottom: 16px; left: 16px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-fab:hover { transform: none; }
}

/* ============================================================
   DARK MODE — "midnight desk"
   Turned on by data-theme="dark" on <html>. Every page sets that
   attribute (or not) in a tiny inline script in <head>, BEFORE the
   page is drawn, by reading localStorage key 'sa_theme' — so there
   is never a white flash. The switch itself lives on /profile.

   The whole design system runs on the variables at the top of this
   file, so most of dark mode is just re-pointing those variables at
   a night-time palette. The handful of rules after the variable
   block patch places where a colour was written out by hand.
   ============================================================ */

html[data-theme="dark"] {
  /* Tells the browser to draw ITS OWN parts dark too — the scrollbar
     (always visible now that its space is reserved), select dropdowns,
     checkboxes. Without this they stay glaring white on the dark page. */
  color-scheme: dark;

  /* ---- Paper surfaces: a desk lit by a lamp at night ---- */
  --paper:        #211d17;
  --paper-sheet:  #2c2820;
  --paper-white:  #332e25;
  --paper-kraft:  #3a3223;
  --paper-edge:   #46402f;

  /* ---- Ink flips to chalk ---- */
  --ink:        #f0ead9;
  --ink-soft:   #d8d0bd;
  --ink-muted:  #a79d88;   /* still ≥4.5:1 on --paper-sheet */
  --ink-faint:  #6f6754;

  /* ---- Brand blue, lifted so it reads on dark paper ---- */
  --blue:       #5e97d6;
  --blue-deep:  #8ab4e8;   /* used as TEXT in many places — must be light */
  --blue-soft:  #3f5f86;
  --blue-wash:  #253244;

  /* ---- Notes & accents ---- */
  --sticky-blue:   #35507a;
  --sticky-cream:  #48412c;
  --tape:          rgba(96, 87, 63, 0.78);
  --rule:          rgba(110, 160, 220, 0.13);
  --grid:          rgba(110, 160, 220, 0.08);
  --margin-line:   rgba(203, 106, 106, 0.32);

  /* ---- Semantic ---- */
  --success: #6fbf97;
  --danger:  #e08a72;
  --warning: #d9a84e;

  /* ---- Shadows need to be heavier to show on dark ---- */
  --lift-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.28);
  --lift-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 6px 16px rgba(0, 0, 0, 0.36);
  --lift-3: 0 4px 8px rgba(0, 0, 0, 0.46), 0 14px 34px rgba(0, 0, 0, 0.52);
}

/* Hand-written colours that the variables can't reach.
   Some of these classes live in individual pages' own <style> blocks
   (.toast, .strength-bar, .toggle-switch, .enabled-tag, .pill--handled);
   their dark versions are centralised here on purpose, so dark mode has
   one home instead of eight. */

html[data-theme="dark"] .topbar { background: rgba(33, 29, 23, 0.94); }

/* --blue-deep is light in dark mode, so the hover would put white text
   on a light button. Hover darkens instead. */
html[data-theme="dark"] .btn--primary:hover { background: #4a80bf; }

html[data-theme="dark"] .notice--error {
  background: rgba(224, 138, 114, 0.12);
  border-color: rgba(224, 138, 114, 0.35);
  color: #eb9f88;
}
html[data-theme="dark"] .notice--success {
  background: rgba(111, 191, 151, 0.12);
  border-color: rgba(111, 191, 151, 0.35);
  color: #86ceab;
}

html[data-theme="dark"] .toast.success { background: #24362d; border-color: rgba(111, 191, 151, 0.4); color: #86ceab; }
html[data-theme="dark"] .toast.error   { background: #3d2a24; border-color: rgba(224, 138, 114, 0.4); color: #eb9f88; }

html[data-theme="dark"] .enabled-tag,
html[data-theme="dark"] .pill--handled { background: rgba(111, 191, 151, 0.15); color: #86ceab; }

html[data-theme="dark"] .strength-text.medium { color: #d9a84e; }
html[data-theme="dark"] .strength-text.strong { color: #86ceab; }
html[data-theme="dark"] .strength-bar { background: rgba(255, 255, 255, 0.12); }

html[data-theme="dark"] .toggle-switch { background: rgba(255, 255, 255, 0.20); }

html[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--paper-edge) 25%, #3a352a 37%, var(--paper-edge) 63%);
  background-size: 400% 100%;
}

/* The paper-grain overlay multiplies, which reads too harsh on dark */
html[data-theme="dark"] body::before { opacity: 0.35; }

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .post-card:hover, .btn:hover, .lift-hover:hover, .wiggle-hover:hover { transform: none; }
  .close-page:hover { transform: none; }
  .floaty { animation: none; }
  .draw path { stroke-dashoffset: 0; }
}