/* Next in Marketing — shared canvas engine styles.
   Used by every board page (index.html, boards/*.html).
   Per-page theme colors (--yellow, --pink, etc.) are set on :root
   in the page's own <style> block, before this file is applied. */

:root{
  --ground:#F6F4EF;
  --dot:#D6D0C4;
  --ink:#171512;
  --ink-2:#5C554B;
  --ink-3:#6E675C; /* 5.1:1 on the cream board (was #8B8377, 3.4:1) */
  --card:#FFFFFF;
  --card-edge:#DAD4C7;

  /* default palette — override per-page for a different theme */
  --yellow:#FFE8A6;  --yellow-e:#D9AE33;
  --pink:#FFD3DF;    --pink-e:#CE7191;
  --blue:#CFE0FF;    --blue-e:#4E7CC4;
  --green:#CDEBCF;   --green-e:#549A5E;
  --peach:#FFDCC0;   --peach-e:#D3843F;
  --purple:#E1D8FF;  --purple-e:#7E68D2;

  --font-heading:"Familjen Grotesk",sans-serif;
  --font-body:"Public Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-hand:"Caveat",cursive;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;overflow:hidden;background:var(--ground);color:var(--ink);
  font-family:var(--font-body);-webkit-font-smoothing:antialiased;
}

/* ── viewport + canvas ───────────────────────────── */
/* --header-h/--footer-h default to 0 (a board opened on its own, no site
   chrome); index.html and boards/learnings.html set real values on :root
   once the fixed site header/footer are in play — see chrome.css. */
#viewport{
  position:fixed;inset:var(--header-h,0) 0 var(--footer-h,0) 0;overflow:hidden;cursor:grab;touch-action:none;
  background-color:var(--ground);
}
#viewport.panning{cursor:grabbing}
#canvas{
  position:absolute;top:0;left:0;width:4000px;height:2750px;
  transform-origin:0 0;
  overflow:visible;
}
/* dot grid — injected as an SVG pattern inside #canvas by canvas.js, so it
   rides the exact same transform as every node. See initDots() there for
   why: a CSS background kept in sync by hand is what used to drift. */
#wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#wires path{fill:none;stroke-linecap:round;transition:opacity .22s ease,stroke-width .22s ease,filter .22s ease}
#wires path.wire-dimmed{opacity:0.14!important}
#wires path.wire-active{opacity:1!important;stroke-width:calc(var(--stroke-w, 2px) + 2.2px)!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,.2))}

/* ── nodes ───────────────────────────────────────── */
.node{position:absolute;user-select:none;touch-action:none}
#viewport.mode-hand, #viewport.mode-hand .node{cursor:grab}
#viewport.mode-hand.panning, #viewport.mode-hand.panning .node{cursor:grabbing}
#viewport.mode-hand .node a,
#viewport.mode-hand .node button,
#viewport.mode-hand .node .faq-flip-btn,
#viewport.mode-hand .node .badge-circle,
#viewport.mode-hand .node .hub{cursor:pointer}

#viewport.mode-select{cursor:default}
#viewport.mode-select.panning{cursor:grabbing}
#viewport.mode-select .node{cursor:default}
#viewport.mode-select .user-item{cursor:move}
#viewport.mode-select .node a,
#viewport.mode-select .node button,
#viewport.mode-select .node .faq-flip-btn,
#viewport.mode-select .node .badge-circle,
#viewport.mode-select .node .hub{cursor:pointer}

#viewport.space-panning{cursor:grab}
#viewport.space-panning:active{cursor:grabbing}
.node .kill{display:none!important}
[contenteditable]{outline:none;transition:box-shadow .15s ease}
[contenteditable]:focus{box-shadow:0 0 0 2px var(--ink),0 0 10px rgba(23,21,18,.15);border-radius:4px}

/* hub */
.hub{
  border-radius:999px;padding:14px 26px;border:2.5px solid;
  font-family:var(--font-heading);font-weight:800;
  font-size:22px;letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 3px 0 rgba(60,45,25,.13);
}

/* sticky note — optional .k-* class adds a colored left rail + tag chip
   for categorized boards (fact / problem / try / missing …) */
.sticky{width:250px;padding:12px 14px 13px;border-radius:5px;border:1.5px solid;box-shadow:2px 3px 0 rgba(60,45,25,.10)}
.sticky .tag{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.62;display:block;margin-bottom:6px}
.sticky .txt{font-size:14.5px;line-height:1.42;font-weight:500;color:var(--ink)}
.sticky .txt b{font-weight:700}

/* explainer card (usually holds a small inline SVG diagram) */
.card{width:400px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:10px;padding:14px 16px 12px;box-shadow:0 4px 0 rgba(60,45,25,.09)}
.card .hd{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.card .hd .dot{width:9px;height:9px;border-radius:50%;flex:none}
.card svg{display:block;width:100%;height:auto}
.card .cap{font-family:var(--font-hand);font-size:19px;line-height:1.24;color:var(--ink-2);margin-top:9px}

/* homepage hero — photo, name, role, the hand-drawn "that's me" callout */
.herocard{width:620px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:16px;padding:26px 30px;box-shadow:0 5px 0 rgba(60,45,25,.10);display:flex;gap:22px;align-items:center}
.herocard .avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;border:3px solid var(--card-edge);flex:none}
.herocard h1{font-family:var(--font-heading);font-size:30px;margin:0 0 5px;letter-spacing:-.01em}
.herocard .role{font-size:14px;color:var(--ink-2);margin:0 0 8px}
.herocard .bio{font-size:14px;font-weight:500;color:var(--ink-2);margin:0;line-height:1.45}
.herocard .callout{position:absolute;left:100%;top:6px;margin-left:18px;width:170px;font-family:var(--font-hand);font-size:22px;color:var(--ink-2);line-height:1.15}
.herocard .callout::before{content:"↰";display:block;font-size:26px;color:var(--ink-3);margin-bottom:2px}

/* homepage journey — one per employer, logo + dates + role + bullets */
.jobcard{width:640px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:14px;padding:20px 24px;box-shadow:0 4px 0 rgba(60,45,25,.09);display:flex;gap:18px}
.jobcard .logo{width:60px;height:60px;border-radius:12px;background:#fff;border:1.5px solid var(--card-edge);object-fit:contain;padding:8px;flex:none}
.jobcard .logo.ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--ink-3)}
.jobcard .when{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.jobcard .co{font-family:var(--font-heading);font-size:22px;font-weight:700;margin:0 0 2px}
.jobcard h3{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--ink-2)}
.jobcard ul{margin:0;padding-left:18px}
.jobcard li{font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:4px;line-height:1.45}

/* extra shape vocabulary — Miro's own board mixes rectangles with ovals,
   rhombi and ribbons for emphasis without turning into a flowchart (no
   arrows between these — they're standalone accents, drop one next to a
   sticky/card to break up an all-rectangles board). */
.badge-circle{
  width:64px;height:64px;border-radius:50%;border:2.5px solid;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:22px;
  box-shadow:0 3px 0 rgba(60,45,25,.13);
  cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s cubic-bezier(.2,.8,.25,1);
}
.badge-circle:hover{
  transform:scale(1.15);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.diamond{width:120px;height:120px;border:2.5px solid;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 rgba(60,45,25,.13)}
.diamond span{transform:rotate(-45deg);font-family:var(--font-heading);font-weight:700;font-size:12.5px;text-align:center;line-height:1.2;padding:8px}
/* no position here — .node already makes it absolute (which the ::before/
   ::after tails anchor to). A position:relative override turned every ribbon
   into a full-width 4000px bar and broke fit-to-screen. */
.ribbon{padding:8px 22px;border:2.5px solid;font-family:var(--font-hand);font-size:19px;box-shadow:0 3px 0 rgba(60,45,25,.13);white-space:nowrap}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:0;width:0;height:0;border-style:solid}
.ribbon::before{left:-11px;border-width:16px 11px 16px 0;border-color:transparent currentColor transparent transparent;opacity:.55}
.ribbon::after{right:-11px;border-width:16px 0 16px 11px;border-color:transparent transparent transparent currentColor;opacity:.55}

/* plain section label — Learnings' PUBLISHED/PLANNED headers. Deliberately
   NOT a .hub pill: no wires, no mind-map read, just a heading. */
.section-label{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* thumbnail-style card — used on the Learnings board: a colored "art" block
   standing in for a video thumbnail, title + description below. Wrap in an
   <a> to link out; add .soon for a not-yet-published topic. */
.thumbcard,.thumbcard:active{width:280px;background:var(--card);border:1.5px solid var(--card-edge);border-radius:12px;overflow:hidden;box-shadow:0 4px 0 rgba(60,45,25,.09);text-decoration:none;color:var(--ink);display:block;cursor:pointer}
.thumbcard.soon,.thumbcard.soon:active{cursor:default}
.thumbcard .art{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:18px;text-align:center;padding:14px;color:#171512}
.thumbcard .body{padding:12px 14px 14px}
.thumbcard .tag{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px}
.thumbcard h3{margin:0 0 5px;font-size:14.5px;font-family:var(--font-heading)}
.thumbcard p{margin:0;font-size:13px;font-weight:500;color:var(--ink-2);line-height:1.42}
.thumbcard.soon{opacity:.55}
.thumbcard.soon .art{background:repeating-linear-gradient(135deg,#EEE9DD,#EEE9DD 8px,#F6F4EF 8px,#F6F4EF 16px)}
.thumbcard.casecard{width:260px;background:#FFF;border:1.5px solid var(--border);box-shadow:0 3px 10px rgba(60,45,25,.07);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.thumbcard.casecard:hover{transform:translateY(-3px);border-color:var(--blue-e);box-shadow:0 8px 20px rgba(60,45,25,.12)}
.thumbcard.casecard .art{aspect-ratio:16/7;font-size:14.5px;padding:10px;font-weight:700}
.thumbcard.casecard .metric-pill{display:inline-block;font-family:var(--font-mono);font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;margin-top:6px;background:rgba(0,0,0,.06)}

/* core hub — the center of the board */
#core{width:470px}
#core .over,#core .under{font-family:var(--font-hand);font-size:22px;color:var(--ink-2);text-align:center;line-height:1.2}
#core .over{margin-bottom:9px}
#core .under{margin-top:11px}
#core .box{background:#171512;border-radius:20px;padding:22px 24px 18px;box-shadow:0 6px 0 rgba(23,21,18,.22)}
#core h1{font-family:var(--font-heading);font-weight:700;color:#FFFFFF;font-size:34px;line-height:1.02;letter-spacing:-.015em;margin:0;text-align:center}
#core .sub{color:#C4BCAE;font-size:15px;text-align:center;margin:9px 0 0;line-height:1.45}
#core .pills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:15px}
#core .pill{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#171512;border-radius:999px;padding:4px 10px}

/* ── chrome: Miro-style left toolbar ───────────────
   Researched against Miro's own board (help.miro.com + a live board):
   Miro's creation tools sit in a slim vertical strip fixed to the left
   edge; zoom controls are a separate cluster, bottom-right. We don't need
   two clusters for five tools, so everything lives in one left rail —
   same side Miro uses, condensed to what this site actually needs. */
.side-toolbar{
  position:fixed;left:16px;top:calc(var(--header-h,0px) + 16px);z-index:20;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.side-toolbar button{
  position:relative;
  width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:17px;line-height:1;
  background:var(--card);color:var(--ink);border:1.5px solid var(--card-edge);border-radius:10px;
  box-shadow:0 2px 0 rgba(60,45,25,.10);cursor:pointer;
}
.side-toolbar button:hover{background:var(--ink);color:var(--card);border-color:var(--ink)}
.side-toolbar button:focus-visible{outline:3px solid var(--yellow-e);outline-offset:2px}

/* Custom tooltip (Miro shows a name+shortcut on hover for every side-panel
   icon) — a styled label beats the browser's native title="" delay/look. */
.side-toolbar button[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:#171512;color:#fff;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;padding:6px 10px;border-radius:6px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease;z-index:25;
}
.side-toolbar button[data-tip]:hover::after{opacity:1;visibility:visible}
#zoomval{font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--ink-3);text-align:center}
#hint{position:fixed;left:16px;bottom:calc(var(--footer-h,0px) + 16px);z-index:20;background:rgba(255,255,255,.94);border:1.5px solid var(--card-edge);border-radius:9px;padding:11px 14px;max-width:390px;font-size:12.5px;line-height:1.65;color:var(--ink-2)}
#hint b{color:var(--ink);font-weight:600}
/* ── email-gated download modal ─────────────────── */
#leadOverlay{position:fixed;inset:0;z-index:40;background:rgba(23,21,18,.5);display:none;align-items:center;justify-content:center}
#leadOverlay.open{display:flex}
#leadCard{background:var(--card);border-radius:14px;padding:26px 28px;width:min(360px,86vw);box-shadow:0 14px 0 rgba(23,21,18,.14)}
#leadCard h2{margin:0 0 6px;font-family:var(--font-heading);font-size:20px}
#leadCard p{margin:0 0 16px;font-size:13px;color:var(--ink-2);line-height:1.5}
#leadCard input{width:100%;padding:10px 12px;border:1.5px solid var(--card-edge);border-radius:8px;font-size:14px;font-family:var(--font-body);margin-bottom:12px}
#leadCard input:focus{outline:2.5px solid var(--ink);border-color:var(--ink)}
#leadCard .row{display:flex;gap:8px;justify-content:flex-end}
#leadCard .row button{padding:9px 16px}
#leadMsg{font-size:12px;margin-top:8px;min-height:16px}
#leadMsg.err{color:#B23A3A}
#leadMsg.ok{color:#3A8C4A}

/* ── phones: the infinite canvas becomes a scroll-through ──────────── */
@media (max-width:760px){
  html,body{height:auto;overflow:visible}
  #viewport{position:static;inset:auto;overflow:visible;height:auto;cursor:auto;touch-action:auto;padding:0 14px 34px}
  #canvas{position:static;width:auto;height:auto;transform:none!important;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding-top:14px}
  #wires{display:none}
  #nimDotsLayer{display:none}
  .node{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:100%;cursor:auto;touch-action:auto}
  .node .kill{display:none!important}
  .hub{width:100%;white-space:normal;text-align:center;border-radius:12px;font-size:15px;padding:12px 16px;margin-top:8px;box-shadow:0 2px 0 rgba(60,45,25,.13)}
  .sticky{width:100%!important}
  .sticky .txt{font-size:14.5px;line-height:1.5}
  .tag,.sticky .tag,.thumbcard .tag,.flip .tag{font-size:11px}
  .section-label{font-size:13px}
  .thumbcard p,.card .hd{font-size:13px}
  .card{width:100%!important}
  .card .cap{font-size:17px;line-height:1.3}
  #core{width:100%!important}
  #core .box{padding:18px 16px 16px;border-radius:16px}
  #core h1{font-size:26px}
  #core .over,#core .under{font-size:18px}
  /* the whole canvas becomes a plain scrolling document on phones (no
     pan/zoom/drag), so the toolbar has nothing left to control */
  .side-toolbar{display:none}
  #hint{display:none}
  #note{position:static;inset:auto;max-width:none;margin:22px 0 0;font-size:12px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ── user-added items (movable, resizable, editable) ── */
.user-item {
  position: absolute;
  z-index: 50;
  cursor: grab;
  user-select: none;
  box-sizing: border-box;
  touch-action: none;
}
.user-item:active {
  cursor: grabbing;
}
.user-item .user-del {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  border: 1.5px solid #fff;
  font-size: 11px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.user-item:hover .user-del {
  display: flex;
}
.user-item .user-del:hover {
  transform: scale(1.15);
  background: #E53E3E;
}
.user-item .user-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(0,0,0,0.3) 50%);
  border-bottom-right-radius: 4px;
  z-index: 60;
}
.user-sticky {
  width: 240px;
  min-height: 140px;
  background: #FFF9D2;
  border: 1.5px solid #E6D884;
  border-radius: 6px;
  box-shadow: 2px 4px 12px rgba(60,45,25,0.12);
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
}
.user-sticky .user-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  cursor: grab;
}
.user-sticky .user-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(60,45,25,0.6);
}
.user-sticky .txt {
  flex: 1;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  outline: none;
  cursor: text;
  word-break: break-word;
}
.user-item img, .user-stk-icon, .user-stk-icon img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.user-item.stickerdrop {
  width: auto;
  min-width: 72px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1.5px dashed transparent;
  border-radius: 12px;
  padding: 4px 6px;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.user-item.stickerdrop:hover {
  border-color: rgba(78, 124, 196, 0.45);
}
.user-item.stickerdrop .user-stk-icon img {
  width: 68px;
  height: 68px;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.14));
}
.user-item.stickerdrop .user-txt {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 4px;
  text-align: center;
  outline: none;
  cursor: text;
  max-width: 180px;
  word-break: break-word;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(60, 45, 25, 0.12);
  border-radius: 6px;
  padding: 2px 8px;
  box-shadow: 0 2px 5px rgba(60, 45, 25, 0.08);
}

/* Hand / Pan mode cursors */
#viewport.mode-hand, #viewport.mode-hand * {
  cursor: grab !important;
}
#viewport.mode-hand.panning, #viewport.mode-hand.panning * {
  cursor: grabbing !important;
}