/* timmerman-werkboek 1.0.0 · werkmap met zwevende notities naar ReactBits FolderFloat.
   Eigen vanilla CSS; kleuren en fonts alleen via --m-*-tokens, tinten met color-mix. */
.msm-timmerman-werkboek {
  --wb-ink: var(--m-ink, #241e18);
  --wb-paper: var(--m-bg, #efe8dc);
  --wb-accent: var(--m-primary, #ba4d2f);
  --wb-display: var(--m-font-display, Georgia, serif);
  --wb-body: var(--m-font-body, Arial, sans-serif);
  --wb-muted: color-mix(in srgb, var(--wb-ink) 66%, transparent);
  --wb-sheet: color-mix(in srgb, var(--wb-paper) 22%, white);
  --wb-board: color-mix(in srgb, color-mix(in srgb, var(--wb-accent) 18%, var(--wb-ink)) 34%, var(--wb-paper));
  --wb-flap: color-mix(in srgb, color-mix(in srgb, var(--wb-accent) 18%, var(--wb-ink)) 22%, var(--wb-paper));
  --wb-w: 360px;
  --wb-h: 252px;
  --wb-tab: 18px;
  --wb-open: 520ms;
  --wb-close: 312ms;
  --wb-stagger: 45ms;
  --wb-n: 5;
  --wb-spring: cubic-bezier(0.34, 1.57, 0.64, 1);
  --wb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  display: block;
  scroll-margin-top: 110px;
  background: var(--wb-paper);
  color: var(--wb-ink);
  font: 400 16px/1.65 var(--wb-body);
  padding: clamp(64px, 9vw, 128px) clamp(20px, 4vw, 64px);
  overflow-x: clip;
}
.msm-timmerman-werkboek *,
.msm-timmerman-werkboek *::before,
.msm-timmerman-werkboek *::after { box-sizing: border-box; }
.msm-timmerman-werkboek .wb-wrap {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.msm-timmerman-werkboek .wb-kicker { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.msm-timmerman-werkboek h2 { margin: 16px 0 18px; font: 400 clamp(42px, 5.6vw, 82px)/0.95 var(--wb-display); letter-spacing: -0.045em; }
.msm-timmerman-werkboek .wb-intro { margin: 0; max-width: 46ch; color: var(--wb-muted); font-size: clamp(15px, 1.4vw, 17px); }
.msm-timmerman-werkboek .wb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Uitgelichte notitie: een vel uit het werkboek met twee stukjes tape. */
.msm-timmerman-werkboek .wb-feature {
  position: relative;
  margin-top: clamp(32px, 4vw, 48px);
  padding: 38px clamp(22px, 3vw, 34px) 26px;
  background: var(--wb-sheet);
  box-shadow: 0 26px 50px -26px color-mix(in srgb, var(--wb-ink) 50%, transparent);
  transform: rotate(-0.6deg);
}
.msm-timmerman-werkboek .wb-tape {
  position: absolute;
  top: -14px;
  width: 86px;
  height: 30px;
  background: color-mix(in srgb, white 58%, var(--wb-accent));
  clip-path: polygon(3% 9%, 96% 0, 100% 87%, 6% 100%);
  mix-blend-mode: multiply;
}
.msm-timmerman-werkboek .wb-tape-a { left: 9%; transform: rotate(-7deg); }
.msm-timmerman-werkboek .wb-tape-b { right: 9%; transform: rotate(8deg); }
.msm-timmerman-werkboek .wb-feature-tag { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wb-accent); }
.msm-timmerman-werkboek .wb-feature-quote {
  margin: 12px 0 22px;
  font: italic 400 clamp(23px, 2.5vw, 32px)/1.22 var(--wb-display);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.msm-timmerman-werkboek .wb-feature-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--wb-ink) 18%, transparent); }
.msm-timmerman-werkboek .wb-feature-meta dt { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-muted); }
.msm-timmerman-werkboek .wb-feature-meta dd { margin: 3px 0 0; font-size: 14px; line-height: 1.4; }

/* De map. */
.msm-timmerman-werkboek .wb-stage { position: relative; min-width: 0; }
.msm-timmerman-werkboek .wb-float { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 28px; }
.msm-timmerman-werkboek .wb-folder { position: relative; width: var(--wb-w); max-width: 100%; height: var(--wb-h); margin-top: var(--wb-tab); }
.msm-timmerman-werkboek .wb-back {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 3px;
  background: var(--wb-board);
  box-shadow: 0 30px 40px -24px color-mix(in srgb, var(--wb-ink) 60%, transparent);
  transform: perspective(600px) rotateX(8deg);
  transform-origin: 50% 100%;
}
.msm-timmerman-werkboek .wb-back::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--wb-tab));
  left: 0;
  width: 42%;
  height: calc(var(--wb-tab) + 6px);
  border-radius: 3px 3px 0 0;
  background: inherit;
}
.msm-timmerman-werkboek .wb-back::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--wb-tab) + 7px);
  left: 16px;
  width: 52px;
  height: 3px;
  background: var(--wb-accent);
}
.msm-timmerman-werkboek .wb-paper {
  position: absolute;
  top: 10%;
  left: 8%;
  right: 8%;
  z-index: 1;
  height: 50%;
  border-radius: 2px;
  background: var(--wb-sheet);
  opacity: 0;
  transform: translateY(10px);
  transition: transform var(--wb-close) var(--wb-ease-out), opacity var(--wb-close) ease;
}
.msm-timmerman-werkboek .wb-peek {
  position: absolute;
  z-index: 1;
  left: 13%;
  right: 20%;
  top: -30px;
  height: 92px;
  padding: 9px 12px 0 14px;
  overflow: hidden;
  background: var(--wb-sheet);
  border-left: 3px solid var(--wb-accent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--wb-ink) 16%, transparent);
  font: italic 400 15px/1.25 var(--wb-display);
  transform: rotate(-2.5deg);
  transition: transform var(--wb-open) var(--wb-ease-out), opacity 0.2s ease;
}
.msm-timmerman-werkboek .wb-front {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  height: 76%;
  padding: 16px 20px 18px;
  border-radius: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wb-flap) 86%, white), var(--wb-flap) 60%);
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--wb-ink) 22%, transparent);
  transform: perspective(600px) rotateX(-16deg);
  transform-origin: 50% 100%;
  transition: transform var(--wb-open) var(--wb-ease-out);
}
.msm-timmerman-werkboek .wb-label { font: 400 24px/1.05 var(--wb-display); letter-spacing: -0.02em; }
.msm-timmerman-werkboek .wb-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wb-muted); }
.msm-timmerman-werkboek .wb-trigger {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 76%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msm-timmerman-werkboek .wb-trigger:focus-visible { outline: 3px solid var(--wb-accent); outline-offset: 4px; }
.msm-timmerman-werkboek[data-open] .wb-front { transform: perspective(600px) rotateX(-34deg); }
.msm-timmerman-werkboek[data-open] .wb-paper { opacity: 1; transform: translateY(0); transition: transform var(--wb-open) var(--wb-ease-out), opacity 0.2s ease; }
.msm-timmerman-werkboek[data-open] .wb-peek { opacity: 0; transform: translateY(40px) rotate(-2.5deg); }

/* Notities: zonder JavaScript een gewone lijst boven de map. */
.msm-timmerman-werkboek .wb-items { display: grid; gap: 10px; width: 100%; margin: 0; padding: 0; list-style: none; }
.msm-timmerman-werkboek .wb-note {
  display: grid;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  padding: 10px 14px 11px 15px;
  border: 1px solid color-mix(in srgb, var(--wb-ink) 14%, transparent);
  border-left: 3px solid var(--wb-accent);
  background: var(--wb-sheet);
  color: var(--wb-ink);
  font: italic 400 16px/1.25 var(--wb-display);
  text-align: left;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--wb-ink) 14%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msm-timmerman-werkboek .wb-note-tag { font: normal 700 9.5px/1.3 var(--wb-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wb-muted); }
.msm-timmerman-werkboek .wb-note-full { font-size: 15px; }
.msm-timmerman-werkboek .wb-note-opdracht,
.msm-timmerman-werkboek .wb-note-hout { font: normal 400 13px/1.4 var(--wb-body); color: var(--wb-muted); }
.msm-timmerman-werkboek .wb-note[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wb-ink), 0 6px 16px color-mix(in srgb, var(--wb-ink) 18%, transparent); }
.msm-timmerman-werkboek .wb-note:focus-visible { outline: 3px solid var(--wb-accent); outline-offset: 3px; }
.msm-timmerman-werkboek .wb-hint { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--wb-muted); }
.msm-timmerman-werkboek:not([data-ready]) .wb-hint,
.msm-timmerman-werkboek:not([data-ready]) .wb-trigger { display: none; }

/* Met JavaScript: de map opent en de notities zweven erboven (FolderFloat). */
.msm-timmerman-werkboek[data-ready] .wb-stage { padding-top: var(--wb-cloud, 320px); }
.msm-timmerman-werkboek[data-ready] .wb-float { display: block; width: var(--wb-w); max-width: 100%; margin: 0 auto; }
.msm-timmerman-werkboek[data-ready] .wb-items { position: absolute; top: var(--wb-tab); left: 50%; z-index: 1; display: block; width: 0; height: 0; }
.msm-timmerman-werkboek[data-ready] .wb-items li { display: contents; }
.msm-timmerman-werkboek[data-ready] .wb-note {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  max-width: 236px;
  opacity: 0;
  transform: translate(-50%, 44px) scale(0.6);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transition:
    transform var(--wb-close) var(--wb-ease-out) calc((var(--wb-n) - 1 - var(--i, 0)) * var(--wb-stagger) * 0.5),
    opacity 160ms ease calc((var(--wb-n) - 1 - var(--i, 0)) * var(--wb-stagger) * 0.5 + var(--wb-close) * 0.45),
    scale 160ms var(--wb-ease-out);
}
.msm-timmerman-werkboek[data-ready] .wb-note-full,
.msm-timmerman-werkboek[data-ready] .wb-note-opdracht,
.msm-timmerman-werkboek[data-ready] .wb-note-hout { display: none; }
.msm-timmerman-werkboek[data-open] .wb-note {
  opacity: 1;
  transform: translate(calc(-50% + var(--x, 0px)), var(--y, -60px)) rotate(var(--r, 0deg)) scale(1);
  pointer-events: auto;
  transition:
    transform var(--wb-open) var(--wb-spring) calc(var(--i, 0) * var(--wb-stagger)),
    opacity 160ms ease calc(var(--i, 0) * var(--wb-stagger)),
    scale 160ms var(--wb-ease-out);
}
.msm-timmerman-werkboek[data-live] .wb-note { cursor: grab; transition: scale 160ms var(--wb-ease-out); }
.msm-timmerman-werkboek[data-live] .wb-note[data-drag] { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
  .msm-timmerman-werkboek[data-open] .wb-note:hover { scale: 1.05; }
}
.msm-timmerman-werkboek[data-open] .wb-note:active { scale: 0.97; }
.msm-timmerman-werkboek .wb-note[data-pop] { animation: wb-pop 320ms var(--wb-ease-out); }
@keyframes wb-pop {
  30% { scale: 1.1; }
  100% { scale: 1; }
}

@media (max-width: 900px) {
  .msm-timmerman-werkboek .wb-wrap { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .msm-timmerman-werkboek .wb-copy { display: contents; }
  .msm-timmerman-werkboek .wb-stage { order: 2; margin-top: 44px; }
  .msm-timmerman-werkboek .wb-feature { order: 3; margin-top: 52px; }
}
@media (max-width: 520px) {
  .msm-timmerman-werkboek { --wb-w: 270px; --wb-h: 196px; }
  .msm-timmerman-werkboek[data-ready] .wb-note { max-width: 150px; padding: 8px 9px 9px 11px; font-size: 14px; }
  .msm-timmerman-werkboek .wb-note-tag { font-size: 8.5px; letter-spacing: 0.1em; }
  .msm-timmerman-werkboek .wb-feature-meta { grid-template-columns: minmax(0, 1fr); }
  .msm-timmerman-werkboek .wb-peek { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-timmerman-werkboek .wb-front,
  .msm-timmerman-werkboek .wb-paper,
  .msm-timmerman-werkboek .wb-peek { transition: opacity 0.2s ease; }
  .msm-timmerman-werkboek[data-open] .wb-front { transform: perspective(600px) rotateX(-16deg); }
  .msm-timmerman-werkboek .wb-paper { transform: none; }
  .msm-timmerman-werkboek[data-open] .wb-peek { transform: rotate(-2.5deg); }
  .msm-timmerman-werkboek[data-ready] .wb-note { transition: opacity 0.2s ease; }
  .msm-timmerman-werkboek[data-ready][data-open] .wb-note { transition: opacity 0.2s ease calc(var(--i, 0) * var(--wb-stagger)); }
  .msm-timmerman-werkboek .wb-note[data-pop] { animation: none; }
}