/* ============================================================
   AML/CFT Careers NZ — low-fi sketch wireframe language
   Hand-drawn, confident, one accent. Paper-grid canvas.
   Fonts (Caveat, Kalam) are loaded via <link> in the HTML head.
   ============================================================ */

:root {
  /* ink + paper */
  --ink:       #1c1a17;
  --ink-2:     #4a463f;
  --ink-3:     #8a857a;
  --line:      #2a2722;
  --paper:     #f4f1ea;
  --paper-2:   #fbf9f4;
  --paper-3:   #ebe7dd;
  --hatch:     rgba(28,26,23,0.08);

  /* accent (overridable by Tweaks via inline --accent on .wf-root) */
  --accent:        #74aef0;
  --accent-ink:    #1c1a17;
  --accent-soft:   color-mix(in srgb, var(--accent) 22%, var(--paper));

  /* agency tints (kept muted/sketchy) */
  --dia:    #5b8def;
  --moj:    #b06ad6;
  --police: #4caa86;

  --font-hand: 'Kalam', 'Comic Sans MS', cursive;
  --font-disp: 'Caveat', 'Kalam', cursive;

  --rough-a: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --rough-b: 15px 225px 15px 255px / 255px 15px 225px 15px;
  --rough-c: 18px 220px 28px 200px / 220px 18px 200px 30px;
}

* { box-sizing: border-box; }

html {
  background: var(--paper-3);
}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: var(--font-hand);
  color: var(--ink);
}

/* dotted "wireframe paper" canvas behind everything */
body {
  min-height: 100vh;
  background-color: var(--paper-3);
  background-image: radial-gradient(var(--hatch) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}

button { font-family: inherit; cursor: pointer; }
::selection { background: var(--accent-soft); }

/* ---------- hand-drawn box ---------- */
.wbox {
  background: var(--paper-2);
  border: 2.5px solid var(--line);
  border-radius: var(--rough-a);
  position: relative;
}
.sketch-rough .wbox:nth-of-type(even) { border-radius: var(--rough-b); }
.sketch-rough .wbox:nth-of-type(3n)   { border-radius: var(--rough-c); }
.sketch-clean .wbox { border-radius: 8px; border-width: 1.5px; }

.wbox.flat { background: transparent; }
.wbox.fill { background: var(--paper); }
.wbox.dash { border-style: dashed; }

/* double-stroke "sketched twice" feel for emphasis boxes */
.sketch-rough .wbox.dbl::after {
  content: "";
  position: absolute;
  inset: 3px 4px 5px 3px;
  border: 1.5px solid var(--line);
  border-radius: inherit;
  opacity: 0.32;
  pointer-events: none;
}

/* ---------- typography ---------- */
.disp {
  font-family: var(--font-disp);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: 0.3px;
}
h1,h2,h3,h4 { font-family: var(--font-hand); font-weight: 700; margin: 0; line-height: 1.12; }
p { margin: 0; line-height: 1.5; color: var(--ink-2); }
.muted { color: var(--ink-3); }
.ink2 { color: var(--ink-2); }

/* marker underline on key words */
.mark {
  position: relative;
  white-space: nowrap;
}
.mark::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 0.04em;
  height: 0.42em;
  background: var(--accent-soft);
  z-index: -1;
  transform: rotate(-0.6deg);
  border-radius: 40% 60% 55% 45%;
}

/* scribble annotation (the "designer note" pointing at things) */
.anno {
  font-family: var(--font-disp);
  font-size: 19px;
  color: var(--accent);
  font-weight: 600;
  transform: rotate(-3deg);
  display: inline-block;
  line-height: 1;
}
.anno.flip { transform: rotate(2.5deg); }

/* eyebrow / kicker */
.kicker {
  font-family: var(--font-hand);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 13px;
  color: var(--ink-3);
}

/* ---------- buttons ---------- */
.wbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: var(--paper-2);
  border: 2.5px solid var(--line);
  border-radius: 240px 18px 230px 18px / 18px 230px 18px 240px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s;
  box-shadow: 2px 3px 0 var(--line);
}
.sketch-clean .wbtn { border-radius: 8px; border-width: 1.5px; box-shadow: 2px 2px 0 var(--line); }
.wbtn:hover { transform: translate(-1px,-1px); box-shadow: 4px 5px 0 var(--line); }
.wbtn:active { transform: translate(1px,2px); box-shadow: 1px 1px 0 var(--line); }
.wbtn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--line); }
.wbtn.ghost { background: transparent; box-shadow: none; border-style: dashed; }
.wbtn.ghost:hover { background: var(--paper); box-shadow: none; }
.wbtn.big { padding: 15px 28px; font-size: 20px; }
.wbtn.sm { padding: 7px 14px; font-size: 15px; box-shadow: 1px 2px 0 var(--line); }

/* ---------- pills / tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px;
  border: 2px solid var(--line);
  border-radius: 999px;
  font-size: 14px; font-weight: 700;
  background: var(--paper-2);
}
.pill.soft { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.pill.dia    { background: color-mix(in srgb, var(--dia) 18%, var(--paper-2)); border-color: var(--dia); }
.pill.moj    { background: color-mix(in srgb, var(--moj) 18%, var(--paper-2)); border-color: var(--moj); }
.pill.police { background: color-mix(in srgb, var(--police) 20%, var(--paper-2)); border-color: var(--police); }

/* ---------- image / video placeholders (classic wireframe X) ---------- */
.ph {
  position: relative;
  background: var(--paper);
  border: 2.5px solid var(--line);
  border-radius: var(--rough-c);
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--ink-3);
}
.sketch-clean .ph { border-radius: 8px; border-width: 1.5px; }
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top right, transparent calc(50% - 1.2px), var(--hatch) 50%, transparent calc(50% + 1.2px)),
    linear-gradient(to top left,  transparent calc(50% - 1.2px), var(--hatch) 50%, transparent calc(50% + 1.2px));
}
.ph .ph-label {
  position: relative;
  font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  background: var(--paper); padding: 4px 12px;
  border: 2px solid var(--line); border-radius: 999px;
}
.ph.play .ph-label { display: flex; align-items: center; gap: 9px; }
.ph .play-tri {
  width: 0; height: 0;
  border-left: 16px solid var(--ink);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 3px;
}

/* ---------- layout helpers ---------- */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 28px; }
.row { display: flex; gap: 18px; }
.col { display: flex; flex-direction: column; gap: 18px; }
.between { justify-content: space-between; }
.center { align-items: center; }
.wrapw { flex-wrap: wrap; }
.grid { display: grid; gap: 18px; }

/* skeleton text lines */
.lines { display: flex; flex-direction: column; gap: 8px; }
.lines i {
  display: block; height: 9px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, var(--ink-3) 0 14px, transparent 14px 18px);
  opacity: .5;
}
.lines i:last-child { width: 62%; }

/* dividers used sparingly — a sketched rule */
.rule { height: 0; border: none; border-top: 2.5px dashed var(--line); opacity: .5; margin: 0; }

/* ---------- fade/slide for screen changes ---------- */
@media (prefers-reduced-motion: no-preference) {
  .screen-enter { animation: scrIn .3s cubic-bezier(.2,.8,.2,1); }
  @keyframes scrIn { from { transform: translateY(12px); } to { transform: none; } }
  .jcard { transition: background .18s cubic-bezier(.2,.8,.2,1); }
  .jflip { animation: jflip .3s cubic-bezier(.2,.8,.2,1); transform-origin: left center; }
  @keyframes jflip { from { transform: scaleX(.82); } to { transform: scaleX(1); } }
}