/* ============================================================
   Sketch primitives — paper texture, wobbly borders, hatch fills,
   tape, scribbles. Earthy & warm. Used across all wireframes.
   ============================================================ */

:root {
  /* Earthy & warm palette — set on body, can be swapped via tweaks */
  --paper:        #f1e7d3;
  --paper-2:      #e8dcc2;
  --ink:          #3a2a1c;
  --ink-soft:     #6b5440;
  --terracotta:   #b4593a;
  --ochre:        #c89a3a;
  --sage:         #7d8a5d;
  --clay:         #8a4a32;
  --rust:         #a64a28;
  --cream:        #f7efdf;

  --hand-font:    "Caveat", "Kalam", "Comic Sans MS", cursive;
  --serif-font:   "Fraunces", "Source Serif Pro", Georgia, serif;
  --mono-font:    "JetBrains Mono", "Courier New", monospace;
  --sans-font:    "Work Sans", -apple-system, sans-serif;
}

/* Paper background — fibrous noise + subtle warm gradient */
.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(180,89,58,0.04) 0, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(125,138,93,0.05) 0, transparent 40%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.23  0 0 0 0 0.16  0 0 0 0 0.11  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-blend-mode: multiply, multiply, multiply;
}

.paper-edges::before {
  /* darker corners — vignetted old paper */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(58,42,28,0.10) 100%);
}

/* Wobbly hand-drawn border. Uses SVG turbulence for displacement. */
.wob {
  position: relative;
  border: 1.8px solid var(--ink);
  filter: url(#wobble);
}
.wob-thick { border-width: 2.6px; }
.wob-thin { border-width: 1.2px; }
.wob-dashed { border-style: dashed; }
.wob-double { border-style: double; border-width: 5px; }

/* Hatch fills */
.hatch-1 {
  background-image: repeating-linear-gradient(
    45deg, var(--ink) 0 1px, transparent 1px 6px);
  opacity:0.18;
}
.hatch-2 {
  background-image: repeating-linear-gradient(
    -30deg, var(--terracotta) 0 1.2px, transparent 1.2px 5px);
  opacity:0.35;
}
.hatch-cross {
  background-image:
    repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, var(--ink) 0 1px, transparent 1px 5px);
  opacity:0.15;
}
.dot-fill {
  background-image: radial-gradient(var(--ink) 1px, transparent 1.5px);
  background-size: 7px 7px;
  opacity: 0.22;
}

/* Tape strips — masking-tape look */
.tape {
  position:absolute;
  width: 80px; height: 22px;
  background: rgba(220,190,120,0.55);
  border-left: 1px dashed rgba(120,90,40,0.25);
  border-right: 1px dashed rgba(120,90,40,0.25);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transform: rotate(-4deg);
}
.tape.green { background: rgba(140,160,110,0.55); }
.tape.terra { background: rgba(200,120,90,0.55); }

/* Squiggle underline */
.squiggle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 6'><path d='M0 3 Q 10 0 20 3 T 40 3 T 60 3 T 80 3' stroke='%23b4593a' stroke-width='1.6' fill='none'/></svg>");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 80px 6px;
  padding-bottom: 8px;
}

/* Image placeholder boxes — diagonal lines + label */
.imgph {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(58,42,28,0.10) 0 1px, transparent 1px 9px),
    var(--paper-2);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--mono-font);
  font-size: 10px;
  color: var(--ink-soft);
  text-align:center;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.imgph::before, .imgph::after {
  content:""; position:absolute; inset:0;
  border:1.5px solid var(--ink);
}
.imgph::after {
  background: linear-gradient(135deg, transparent 49.6%, var(--ink) 49.6%, var(--ink) 50.4%, transparent 50.4%);
  opacity:0.22;
  border:none;
}

/* Hand text */
.hand   { font-family: var(--hand-font); font-weight:600; }
.serif  { font-family: var(--serif-font); }
.mono   { font-family: var(--mono-font); }
.sans   { font-family: var(--sans-font); }

/* Scribble arrow — set rotate via inline style */
.arrow {
  display:inline-block;
  width: 60px; height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><path d='M2 20 Q 15 5 30 22 T 55 22 M 48 16 L 56 22 L 49 28' stroke='%233a2a1c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-size:contain;
}

/* Sticky tab — for nav active state */
.sticky-circle {
  position:relative; display:inline-block;
}
.sticky-circle::after {
  content:""; position:absolute; left:-6px; right:-6px; top:-4px; bottom:-4px;
  border:1.6px solid var(--terracotta);
  border-radius:50% 50% 50% 50% / 60% 40% 60% 40%;
  filter: url(#wobble);
  pointer-events:none;
}

/* Pill button — sketchy */
.btn-sketch {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--hand-font); font-size: 22px; font-weight:600;
  padding: 6px 18px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 28px 26px 30px 24px / 26px 28px 24px 30px;
  filter: url(#wobble);
  cursor:pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
  text-decoration:none;
}
.btn-sketch.terra { background: var(--terracotta); color: var(--cream); }
.btn-sketch.sage  { background: var(--sage); color: var(--cream); }
.btn-sketch.ochre { background: var(--ochre); color: var(--ink); }
.btn-sketch:hover { transform: translate(1px,1px); box-shadow: 2px 2px 0 var(--ink); }

/* Doodle star */
.doodle-star {
  width: 24px; height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L13.5 9 L20 8 L14.5 12.5 L17 19 L12 15 L7 19 L9.5 12.5 L4 8 L10.5 9 Z' stroke='%233a2a1c' stroke-width='1.4' fill='%23c89a3a' stroke-linejoin='round'/></svg>");
  background-size:contain; background-repeat:no-repeat;
  display:inline-block;
}
.doodle-flower {
  width: 28px; height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><g stroke='%233a2a1c' stroke-width='1.3' fill='none'><circle cx='14' cy='14' r='2.5' fill='%23c89a3a'/><ellipse cx='14' cy='6' rx='3' ry='4'/><ellipse cx='14' cy='22' rx='3' ry='4'/><ellipse cx='6' cy='14' rx='4' ry='3'/><ellipse cx='22' cy='14' rx='4' ry='3'/></g></svg>");
  background-size:contain;
  display:inline-block;
}
.doodle-leaf {
  width: 26px; height: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><path d='M4 22 Q 13 4 22 13 Q 13 22 4 22 Z M 6 20 Q 13 13 20 14' stroke='%233a2a1c' stroke-width='1.3' fill='%237d8a5d' stroke-linejoin='round'/></svg>");
  background-size:contain;
  display:inline-block;
}
.doodle-cup {
  width: 28px; height: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><g stroke='%233a2a1c' stroke-width='1.4' fill='none' stroke-linecap='round'><path d='M6 12 H 20 V 21 Q 20 24 17 24 H 9 Q 6 24 6 21 Z' fill='%23f7efdf'/><path d='M20 14 Q 25 14 25 18 Q 25 21 20 21'/><path d='M10 8 Q 11 5 10 3 M 14 8 Q 15 5 14 3'/></g></svg>");
  background-size:contain;
  display:inline-block;
}
.doodle-book {
  width: 30px; height: 26px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 26'><g stroke='%233a2a1c' stroke-width='1.3' fill='none'><path d='M3 5 Q 9 3 15 5 Q 21 3 27 5 V 22 Q 21 20 15 22 Q 9 20 3 22 Z' fill='%23f7efdf'/><path d='M15 5 V 22'/><path d='M6 9 H 12 M 6 13 H 12 M 18 9 H 24 M 18 13 H 24'/></g></svg>");
  background-size:contain;
  display:inline-block;
}

/* Wireframe note - small circled annotation */
.note-circle {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  border:1.5px solid var(--terracotta); color:var(--terracotta);
  border-radius:50% 48% 52% 50% / 50% 52% 48% 50%;
  font-family: var(--hand-font); font-size:14px;
  filter: url(#wobble);
}

/* Sticky note */
.sticky {
  background: #fef4a8;
  padding: 12px 14px;
  font-family: var(--hand-font);
  font-size: 18px;
  color: #5a4a2a;
  box-shadow: 2px 3px 6px rgba(0,0,0,0.12);
  transform: rotate(-2deg);
}
.sticky.green { background: #d8e4b8; color:#3a4422; }
.sticky.pink  { background: #f4c8b8; color:#5a2a1a; }

/* Common artboard inner reset */
.ab {
  width:100%; height:100%;
  position:relative;
  overflow:hidden;
  color: var(--ink);
}

/* ============================================================
   90s pattern primitives
   ============================================================ */

/* Memphis-style confetti — scattered squiggles, dots, triangles */
.pat-memphis {
  background-color: var(--cream);
  background-image:
    radial-gradient(circle, var(--terracotta) 1.6px, transparent 2px),
    radial-gradient(circle, var(--sage) 1.4px, transparent 2px),
    radial-gradient(circle, var(--ochre) 1.2px, transparent 2px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='none' stroke='%23b4593a' stroke-width='1.4' stroke-linecap='round'><path d='M10 20 q 4 -4 8 0 t 8 0'/><path d='M55 60 q 4 -4 8 0 t 8 0'/></g><g fill='none' stroke='%237d8a5d' stroke-width='1.3'><path d='M62 18 l 6 6 M 68 18 l -6 6'/><path d='M14 62 l 6 6 M 20 62 l -6 6'/></g><g fill='%23c89a3a'><polygon points='40,8 44,16 36,16'/><polygon points='8,42 0,46 8,50'/></g></svg>");
  background-size: 24px 24px, 32px 32px, 18px 18px, 80px 80px;
  background-position: 0 0, 12px 18px, 6px 22px, 0 0;
  background-repeat: repeat;
}

/* Halftone — graduated radial dots, comic-book / risograph */
.pat-halftone {
  background-color: var(--paper);
  background-image: radial-gradient(var(--ink) 1.3px, transparent 1.6px);
  background-size: 8px 8px;
  opacity: 1;
}
.pat-halftone-fade {
  background:
    linear-gradient(180deg, var(--paper) 0%, transparent 70%),
    radial-gradient(var(--ink) 1.4px, transparent 1.7px) var(--cream);
  background-size: 100% 100%, 7px 7px;
}

/* Mini checkerboard — ska / 90s racing */
.pat-checker {
  background:
    conic-gradient(var(--ink) 25%, var(--cream) 0 50%, var(--ink) 0 75%, var(--cream) 0);
  background-size: 14px 14px;
}
.pat-checker-sm {
  background:
    conic-gradient(var(--ink) 25%, var(--cream) 0 50%, var(--ink) 0 75%, var(--cream) 0);
  background-size: 8px 8px;
}
.pat-checker-warm {
  background:
    conic-gradient(var(--terracotta) 25%, var(--cream) 0 50%, var(--terracotta) 0 75%, var(--cream) 0);
  background-size: 12px 12px;
}

/* Wavy stripes — Memphis sine */
.pat-wave {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'><path d='M0 6 Q 5 0 10 6 T 20 6 T 30 6 T 40 6' stroke='%23b4593a' stroke-width='1.5' fill='none'/></svg>");
  background-size: 40px 12px;
  background-repeat: repeat;
}
.pat-wave-sage {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'><path d='M0 6 Q 5 0 10 6 T 20 6 T 30 6 T 40 6' stroke='%237d8a5d' stroke-width='1.4' fill='none'/></svg>");
  background-size: 40px 12px;
}

/* Candy stripes / barber pole — diagonal alternating */
.pat-stripe-diag {
  background: repeating-linear-gradient(
    45deg,
    var(--terracotta) 0 8px,
    var(--cream) 8px 16px
  );
}
.pat-stripe-diag-soft {
  background: repeating-linear-gradient(
    45deg,
    rgba(180,89,58,0.18) 0 6px,
    transparent 6px 14px
  ), var(--paper);
}
.pat-stripe-thin {
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 1px,
    transparent 1px 6px
  ), var(--cream);
}

/* Graph paper / grid */
.pat-grid {
  background:
    linear-gradient(var(--ink-soft) 1px, transparent 1px) 0 0 / 100% 18px,
    linear-gradient(90deg, var(--ink-soft) 1px, transparent 1px) 0 0 / 18px 100%,
    var(--paper);
  background-color: var(--paper);
  opacity: 1;
  position: relative;
}
.pat-grid::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(58,42,28,0.18) 1px, transparent 1px) 0 0 / 100% 18px,
    linear-gradient(90deg, rgba(58,42,28,0.18) 1px, transparent 1px) 0 0 / 18px 100%;
}

/* Zigzag */
.pat-zigzag {
  background:
    linear-gradient(135deg, var(--terracotta) 25%, transparent 25%) 0 0 / 14px 14px,
    linear-gradient(225deg, var(--terracotta) 25%, transparent 25%) 0 0 / 14px 14px,
    linear-gradient(315deg, var(--terracotta) 25%, var(--cream) 25%) 0 0 / 14px 14px,
    linear-gradient(45deg,  var(--terracotta) 25%, var(--cream) 25%) 0 0 / 14px 14px;
}

/* Star sparkle scatter — Lisa Frank lite */
.pat-stars {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='%23c89a3a' stroke='%233a2a1c' stroke-width='0.6'><polygon points='10,2 11.5,8 17,8 12.5,11 14,17 10,13.5 6,17 7.5,11 3,8 8.5,8'/></g><g fill='%23b4593a'><polygon points='44,28 45,32 49,32 46,34 47,38 44,36 41,38 42,34 39,32 43,32'/></g><g fill='%237d8a5d'><polygon points='28,46 29,50 33,50 30,52 31,56 28,54 25,56 26,52 23,50 27,50'/></g></svg>");
  background-size: 60px 60px;
  background-repeat: repeat;
}

/* Confetti scatter — small dashes & dots */
.pat-confetti {
  background-color: var(--cream);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><g stroke-width='1.6' stroke-linecap='round'><line x1='6' y1='6' x2='10' y2='10' stroke='%23b4593a'/><line x1='32' y1='14' x2='38' y2='10' stroke='%237d8a5d'/><line x1='14' y1='38' x2='10' y2='44' stroke='%23c89a3a'/><line x1='42' y1='36' x2='44' y2='42' stroke='%238a4a32'/></g><g fill='%23b4593a'><circle cx='42' cy='12' r='1.4'/></g><g fill='%237d8a5d'><circle cx='8' cy='30' r='1.4'/></g><g fill='%23c89a3a'><circle cx='28' cy='42' r='1.4'/></g></svg>");
  background-size: 50px 50px;
}

/* Cassette / mixtape outline (decorative element) */
.cassette {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 16px 10px;
  box-shadow: 3px 4px 0 var(--terracotta);
}
.cassette::before, .cassette::after {
  content:""; position:absolute; bottom:14px; width:38px; height:38px;
  border-radius:50%;
  background:
    radial-gradient(var(--cream) 0 6px, var(--ink) 6px 8px, var(--cream) 8px 12px, var(--ink) 12px 14px, var(--cream) 14px 17px, transparent 17px);
}
.cassette::before { left: 32%; }
.cassette::after  { right: 32%; }

/* Star burst sticker */
.starburst {
  display:inline-flex; align-items:center; justify-content:center;
  width:70px; height:70px;
  background:
    conic-gradient(from 0deg,
      var(--ochre) 0 22.5deg, var(--terracotta) 22.5deg 45deg);
  clip-path: polygon(50% 0%, 60% 18%, 79% 9%, 75% 30%, 95% 30%, 80% 45%, 100% 50%, 80% 55%, 95% 70%, 75% 70%, 79% 91%, 60% 82%, 50% 100%, 40% 82%, 21% 91%, 25% 70%, 5% 70%, 20% 55%, 0% 50%, 20% 45%, 5% 30%, 25% 30%, 21% 9%, 40% 18%);
  font-family: var(--hand-font);
  font-size: 16px;
  color: var(--ink);
  text-align:center;
  line-height:0.95;
  font-weight:700;
  box-shadow: 2px 2px 0 var(--ink);
}

/* "Sticker" — round badge with rotation */
.badge-sticker {
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  border-radius: 50%;
  border: 2.4px dashed var(--ink);
  background: var(--ochre);
  color: var(--ink);
  font-family: var(--hand-font);
  font-size: 14px;
  text-align:center;
  line-height:1;
  padding:6px;
  box-shadow: 2px 2px 0 var(--ink);
}
.ab .scroll {
  position:absolute; inset:0; overflow:auto;
}

/* ============================================================
   Tweakable "feel" layers — driven by body classes set from the
   Tweaks panel. Each axis reshapes the whole page, not one property:
     • render-*  : line quality + headline type + paper grain + shadow
     • orn-*     : density of hand-drawn ornament
   (Mood/palette is handled separately via CSS custom properties.)
   ============================================================ */

/* — Rendering: PRINT — clean, flat, crisp. Wobble is pinned to 0 in JS,
     so borders straighten; here we flatten the paper + tighten shadows. */
.render-print .paper {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(180,89,58,0.03) 0, transparent 42%),
    radial-gradient(circle at 80% 70%, rgba(125,138,93,0.03) 0, transparent 46%);
  background-blend-mode: normal;
}
.render-print .paper-edges::before { display:none; }
.render-print .btn-sketch { box-shadow: 1.5px 1.5px 0 var(--ink); }

/* — Rendering: SKETCH — rough, chunky, hand-set. Wobble runs high in JS;
     here we fatten the drop-shadows so it reads like marker on paper. */
.render-sketch .btn-sketch { box-shadow: 4px 4px 0 var(--ink); }
.render-sketch .sticky     { box-shadow: 3px 5px 9px rgba(0,0,0,0.16); }

/* — Ornament: QUIET — strip the page back to restrained field notes. */
.orn-quiet .doodle-star, .orn-quiet .doodle-flower, .orn-quiet .doodle-leaf,
.orn-quiet .doodle-cup,  .orn-quiet .doodle-book,   .orn-quiet .arrow,
.orn-quiet .tape { display:none !important; }
.orn-quiet .squiggle { background-image:none; padding-bottom:0; }
.orn-quiet .sticky {
  background: var(--cream); color: var(--ink-soft);
  box-shadow:none; transform:none !important;
  border:1px solid rgba(58,42,28,0.25);
}

/* — Ornament: LOUD — amp the decoration without touching the JSX.
     Grow the doodles via width/height so their inline rotation survives. */
.orn-loud .doodle-star   { width:34px; height:34px; }
.orn-loud .doodle-flower { width:40px; height:40px; }
.orn-loud .doodle-leaf   { width:38px; height:38px; }
.orn-loud .doodle-cup    { width:40px; height:40px; }
.orn-loud .doodle-book   { width:44px; height:38px; }
.orn-loud .arrow         { width:80px; height:54px; }
.orn-loud .tape   { filter: saturate(1.5) brightness(1.04); }
.orn-loud .sticky { box-shadow: 3px 6px 13px rgba(0,0,0,0.22); }
.orn-loud .doodle-star, .orn-loud .doodle-flower, .orn-loud .doodle-leaf,
.orn-loud .doodle-cup,  .orn-loud .doodle-book {
  filter: drop-shadow(1px 2px 0 rgba(58,42,28,0.22));
}