/* Mersenne Checkpoint — wireframe sketch system
   Warm-paper Cambridge realism, ink + red teacher annotations. */

:root {
  --paper: #f3efe3;
  --paper-warm: #fafaf7;
  --paper-cool: #f5f7fa;
  --paper-white: #fdfdfb;
  --ink: #2a2724;
  --ink-soft: #5a564f;
  --ink-faint: #9a958c;
  --rule: #c9c2b0;
  --red-ink: #c44a3e;
  --red-ink-soft: #d97a72;
  --gold:    #FFC000; /* Number */
  --algebra: #4472C4; /* Algebra */
  --graphs:  #70AD47; /* Graphs */
  --ratio:   #ED7D31; /* Ratio */
  --geom:    #C00080; /* Geometry */
  --prob:    #5B9BD5; /* Probability */
  --stats:   #BF8F00; /* Statistics */

  --font-body: "Cardo", "Crimson Text", Georgia, serif;
  --font-hand: "Caveat", "Patrick Hand", cursive;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-ui:   "Cardo", Georgia, serif;
}

/* Paper texture — subtle noise via SVG bg */
.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(rgba(120, 100, 70, 0.04) 1px, transparent 1px),
    radial-gradient(rgba(120, 100, 70, 0.025) 1px, transparent 1px);
  background-size: 5px 5px, 11px 11px;
  background-position: 0 0, 2px 3px;
  color: var(--ink);
  font-family: var(--font-body);
  position: relative;
}
.paper.warm  { background-color: var(--paper-warm); }
.paper.cool  { background-color: var(--paper-cool); }
.paper.white { background-color: var(--paper-white); }

/* Ruled left margin (notebook style) */
.paper.ruled::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 27px, rgba(74,98,160,0.18) 27px 28px
  );
  pointer-events: none;
}
.paper.ruled::after {
  content: ""; position: absolute; left: 64px; top: 0; bottom: 0;
  width: 1px; background: rgba(196,74,62,0.45);
  pointer-events: none;
}

/* Sketch-wobble filter applied via .wobble class on the parent.
   The filter itself lives in a global <svg> in app HTML. */
.wobble       { filter: url(#wobble); }
.wobble-soft  { filter: url(#wobbleSoft); }
.wobble-heavy { filter: url(#wobbleHeavy); }

/* Sketchy box — hand-drawn outline */
.sk-box {
  border: 1.2px solid var(--ink);
  border-radius: 2px;
  background: transparent;
}
.sk-box-dashed {
  border: 1.2px dashed var(--ink);
  border-radius: 2px;
}
.sk-box-thin { border-width: 0.9px; }
.sk-box-red  { border-color: var(--red-ink); color: var(--red-ink); }

/* Buttons */
.sk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1.2px solid var(--ink);
  background: transparent;
  font-family: var(--font-hand);
  font-size: 18px;
  color: var(--ink);
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}
.sk-btn.primary {
  background: var(--ink); color: var(--paper);
}
.sk-btn.ghost {
  border-style: dashed;
}
.sk-btn.sm { font-size: 14px; padding: 4px 8px; }
.sk-btn.lg { font-size: 22px; padding: 9px 16px; }

/* Inputs */
.sk-input {
  border: none;
  border-bottom: 1.2px solid var(--ink);
  background: transparent;
  font-family: var(--font-hand);
  font-size: 18px;
  padding: 4px 2px;
}

/* Type helpers */
.hand   { font-family: var(--font-hand); }
.mono   { font-family: var(--font-mono); letter-spacing: 0.02em; }
.serif  { font-family: var(--font-body); }
.tiny   { font-size: 11px; }
.small  { font-size: 13px; }
.med    { font-size: 15px; }
.lg     { font-size: 19px; }
.xl     { font-size: 26px; }
.xxl    { font-size: 36px; }
.huge   { font-size: 54px; line-height: 0.95; }
.faint  { color: var(--ink-faint); }
.soft   { color: var(--ink-soft); }
.red    { color: var(--red-ink); }
.smallcaps {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-family: var(--font-body);
  color: var(--ink-soft);
}
.underline-hand {
  background-image: linear-gradient(transparent 70%, rgba(196,74,62,0.55) 70%);
  background-size: 100% 100%;
  padding: 0 2px;
}

/* Strand chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid currentColor;
  background: transparent;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.chip.num    { color: #b08400; }
.chip.alg    { color: #2f55a0; }
.chip.grp    { color: #527d33; }
.chip.rat    { color: #b85d22; }
.chip.geo    { color: #8e0060; }
.chip.prb    { color: #3e7aa8; }
.chip.sta    { color: #8a6700; }

/* Ribbon — left edge strand mark */
.ribbon {
  width: 4px; background: currentColor; align-self: stretch;
}

/* Image placeholder — striped */
.img-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    rgba(42,39,36,0.06) 0 6px,
    rgba(42,39,36,0.10) 6px 12px
  );
  border: 1.2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}

/* Stamp — official-looking circle */
.stamp {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--red-ink);
  color: var(--red-ink);
  border-radius: 50%;
  font-family: var(--font-hand);
  text-align: center;
  line-height: 1;
  transform: rotate(-8deg);
}

/* QR placeholder — simulated dot grid */
.qr {
  display: inline-block;
  width: 56px; height: 56px;
  background:
    linear-gradient(to bottom, var(--ink) 8%, transparent 8%) repeat,
    linear-gradient(to right,  var(--ink) 8%, transparent 8%) repeat;
  background-size: 4px 4px;
  border: 1.2px solid var(--ink);
  position: relative;
}
.qr::before, .qr::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--paper);
  outline: 2px solid var(--ink);
  background: var(--ink);
}
.qr::before { top: 3px; left: 3px; }
.qr::after  { top: 3px; right: 3px; }

/* 3x3 Mersenne logo */
.logo3x3 {
  display: inline-grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  width: 28px; height: 28px;
  gap: 2px;
}
.logo3x3 i {
  background: var(--ink);
  border-radius: 1px;
}
.logo3x3 i:nth-child(5) { background: var(--red-ink); } /* center */
.logo3x3.lg { width: 56px; height: 56px; gap: 4px; }
.logo3x3.huge { width: 120px; height: 120px; gap: 8px; }

/* Hand-drawn arrow */
.arrow-hand::after { content: " →"; font-family: var(--font-hand); }

/* Marginalia note */
.marginalia {
  font-family: var(--font-hand);
  color: var(--red-ink);
  font-size: 18px;
  line-height: 1.1;
}

/* Tab look */
.sk-tab {
  padding: 6px 14px;
  border: 1.2px solid var(--ink);
  border-bottom: none;
  font-family: var(--font-hand);
  font-size: 18px;
  background: var(--paper);
}
.sk-tab.active { background: var(--ink); color: var(--paper); }

/* Tick/cross marks */
.tick { color: var(--graphs); font-family: var(--font-hand); font-size: 22px; }
.cross { color: var(--red-ink); font-family: var(--font-hand); font-size: 22px; }
.star  { color: var(--gold); font-size: 18px; }
.star.empty { color: var(--ink-faint); }

/* Heatmap cells */
.hm-grid { display: grid; gap: 3px; }
.hm-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(0,0,0,0.15);
  background: var(--paper);
}
.hm-cell.m4 { background: currentColor; }
.hm-cell.m3 { background: currentColor; opacity: 0.7; }
.hm-cell.m2 { background: currentColor; opacity: 0.4; }
.hm-cell.m1 { background: currentColor; opacity: 0.18; }
.hm-cell.m0 { background: #e3dfd2; }

/* Circle heatmap variant */
.hm-circ {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.2px solid currentColor;
  background: var(--paper);
}
.hm-circ.m4 { background: currentColor; }
.hm-circ.m3 { background: currentColor; opacity: 0.6; }
.hm-circ.m2 { background: var(--paper); }
.hm-circ.m1 { background: var(--paper); border-style: dashed; }
.hm-circ.m0 { background: var(--paper); border-color: var(--ink-faint); border-style: dotted; }

/* Toolbar */
.toolbar {
  display: inline-flex; gap: 2px;
  border: 1.2px solid var(--ink);
  background: var(--paper-warm);
  padding: 3px;
  border-radius: 4px;
}
.toolbar .tool {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-hand); font-size: 17px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}
.toolbar .tool.active {
  background: var(--ink); color: var(--paper);
}

/* Sketchy underline for headings — fake hand-drawn */
.h-uline {
  position: relative; display: inline-block;
}
.h-uline::after {
  content: ""; position: absolute; left: -2px; right: -4px; bottom: -4px;
  height: 4px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M0 3 Q 25 0 50 3 T 100 3' fill='none' stroke='%232a2724' stroke-width='1.4'/></svg>") no-repeat;
  background-size: 100% 100%;
}

/* Annotation overlay — red squiggle */
.annot {
  font-family: var(--font-hand);
  color: var(--red-ink);
  pointer-events: none;
}

/* Section label on artboard */
.scrlabel {
  position: absolute;
  top: -28px; left: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* Density variants applied to a wrapper */
.dense { font-size: 0.92em; }
.dense .sk-btn { padding: 4px 9px; font-size: 16px; }
.loose { font-size: 1.06em; }