/* ── layout ─────────────────────────────────────────────────────── */
.jp-wrap { margin:0 auto; padding:.5rem 1rem 2rem; }

/* ── legend / filter chips ───────────────────────────────────────── */
.jp-legend { display:flex; gap:.5rem; flex-wrap:wrap; margin:.5rem 0 1.25rem; align-items:center; }

.jp-chip {
  border:2px solid #000;
  border-radius:999px;
  padding:.25rem .65rem;
  font-size:.8rem;
  background:#fff;
  font-weight:700;
}
.jp-chip.coach   { background:#86efac; }
.jp-chip.ham     { background:#fde047; }
.jp-chip.online  { background:#93c5fd; }
.jp-chip.special { background:#fca5a5; }

.jp-chip.filter {
  cursor:pointer;
  font-weight:800;
  box-shadow:3px 3px 0 #000;
  transition:transform .1s ease, box-shadow .1s ease;
}
.jp-chip.filter:hover  { transform:translate(-1px,-1px); box-shadow:4px 4px 0 #000; }
.jp-chip.filter:active { transform:translate(2px,2px);   box-shadow:1px 1px 0 #000; }
.jp-chip.filter.active  { box-shadow:3px 3px 0 #000; }
.jp-chip.filter.partial { box-shadow:3px 3px 0 #888; opacity:.7; }

/* ── day-order select ────────────────────────────────────────────── */
.jp-order-wrap { display:inline-flex; align-items:center; gap:.4rem; margin-left:.5rem; }
.jp-order-wrap label { font-size:.78rem; color:#000; font-weight:800; }
.jp-order-select {
  font-size:.78rem;
  padding:.2rem .4rem;
  border:2px solid #000;
  border-radius:4px;
  background:#fff;
  cursor:pointer;
  box-shadow:2px 2px 0 #000;
  font-weight:700;
}

/* ── sprint section ──────────────────────────────────────────────── */
.jp-sprint { display:grid; grid-template-columns:90px 90px 1fr; gap:.75rem; margin:0 0 1.5rem; }

.jp-rail, .jp-project {
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  border-radius:4px;
  text-align:center;
  font-weight:900;
  padding:.65rem .35rem;
  letter-spacing:.05em;
  border:2px solid #000;
}
.jp-rail    { background:#d8b4fe; box-shadow:3px 3px 0 #000; }
.jp-project { background:#f5f5f5; box-shadow:3px 3px 0 #000; }

/* ── week card ───────────────────────────────────────────────────── */
.jp-week {
  border:2px solid #000;
  margin-bottom:.75rem;
  box-shadow:4px 4px 0 #000;
  background:#fff;
}
.jp-week.special { background:#fff5f5; }

/* ── week header ─────────────────────────────────────────────────── */
.jp-head {
  background:#f0f0f0;
  border-bottom:2px solid #000;
  padding:.5rem .75rem;
  display:flex;
  align-items:center;
  cursor:pointer;
  user-select:none;
  transition:background-color .1s;
  gap:.6rem;
}
.jp-head:hover { background:#e5e5e5; }

.jp-head::before {
  content:'▼';
  font-size:.7rem;
  flex-shrink:0;
  transition:transform .2s ease;
  color:#000;
  font-weight:900;
}
.jp-head.collapsed::before { transform:rotate(-90deg); }

.jp-head > span:last-child { margin-left:auto; font-size:.78rem; font-weight:700; color:#333; }
.jp-head .wk       { font-weight:900; font-size:.95rem; }
.jp-head .wk-theme { font-size:.82rem; color:#555; font-weight:600; }

/* ── special week body ───────────────────────────────────────────── */
.jp-special-body {
  min-height:120px;
  background:repeating-linear-gradient(
    45deg,
    #fff5f5, #fff5f5 10px,
    #fecaca 10px, #fecaca 20px
  );
  padding:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#000;
  font-weight:900;
  font-size:1.1rem;
}

/* ── day rows ────────────────────────────────────────────────────── */
.jp-day { min-height:80px; border-top:2px solid #000; display:grid; grid-template-columns:130px 1fr; }
.jp-day:first-of-type { border-top:none; }

.jp-day .label {
  font-weight:900;
  font-size:.78rem;
  border-right:2px solid #000;
  padding:.55rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.jp-day.coach  .label { background:#86efac; }
.jp-day.ham    .label { background:#fde047; }
.jp-day.online .label { background:#93c5fd; }

/* ── flow grid + pauze divider ───────────────────────────────────── */
.jp-flow {
  display:grid;
  grid-template-columns:1fr 14px 1fr;
  gap:.5rem;
  padding:.5rem;
  align-items:stretch;
}

.jp-break {
  background:#000;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.jp-break::after {
  content:'pauze';
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  color:#fff;
  font-size:.52rem;
  font-weight:900;
  letter-spacing:.05em;
}

/* ── half panels ─────────────────────────────────────────────────── */
.jp-half {
  border:2px solid #000;
  border-radius:3px;
  padding:.35rem;
  display:flex;
  gap:.35rem;
  background:#fafafa;
}
.jp-half.sequential { flex-direction:row; }    /* side by side — one after another in time */
.jp-half.parallel   { flex-direction:column; } /* stacked — parallel tracks simultaneously */
.jp-half.single     { flex-direction:column; }

/* ── content blocks ──────────────────────────────────────────────── */
.blk {
  flex:1;
  border:2px solid #000;
  border-radius:2px;
  min-height:3rem;
  background-color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.76rem;
  font-weight:700;
  color:#000;
  text-align:center;
  padding:.3rem;
  line-height:1.3;
  position:relative; /* needed for absolutely-positioned .jp-links */
  background-image:repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(0,0,0,.08) 4px, rgba(0,0,0,.08) 6px
  );
}
/* reserve right padding so text never slides under the icon cluster
   (cluster is at most 2 columns wide = 2×1rem + 2px gap ≈ 2.1rem)   */
.blk.has-links { padding-right:2.5rem; }
.coach  .blk { background-color:#86efac; }
.ham    .blk { background-color:#fde047; }
.online .blk { background-color:#93c5fd; }

/* ── link icon cluster ───────────────────────────────────────────────
   All block types (single, sequential, parallel) support up to 4 hrefs
   arranged in a 2×2 grid anchored to the top-right corner of the block.

   Fill order differs by layout:

     .jp-links           column-first  (single + sequential)
       1 icon  → top-right
       2 icons → stacked vertically in right column
       3–4     → 2×2 (right column fills first, then left)

     .jp-links.parallel  row-first     (parallel blocks + ham dagopdracht)
       1 icon  → top-right
       2 icons → side-by-side in top row
       3–4     → 2×2 (top row fills first, then bottom)

   direction:rtl on both ensures new cells always appear to the LEFT of
   existing ones, keeping icon 1 anchored at right:3px.
   direction:ltr on each .jp-link-box keeps the ↗ arrow visually correct. */

/* default: column-first — for single and sequential blocks */
.jp-links {
  position:absolute;
  top:3px;
  right:3px;
  display:grid;
  grid-template-rows:1rem 1rem;  /* 2 explicit rows; fills column before starting next */
  grid-auto-flow:column;
  grid-auto-columns:1rem;
  gap:2px;
  direction:rtl;
}

/* row-first — for parallel blocks and hamburger dagopdracht */
.jp-links.parallel {
  grid-template-rows:1rem;        /* 1 explicit row; auto rows handle overflow */
  grid-template-columns:1rem 1rem; /* 2 fixed columns (always 2rem wide) */
  grid-auto-flow:row;
  grid-auto-rows:1rem;
}

.jp-link-box {
  width:1rem;
  height:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #000;
  border-radius:2px;
  background:#fff;
  font-size:.65rem;
  line-height:1;
  text-decoration:none;
  color:#000;
  direction:ltr; /* keep ↗ arrow visually correct inside rtl grid */
  box-shadow:1px 1px 0 #000;
  transition:transform .1s, box-shadow .1s;
  cursor:pointer;
}
.jp-link-box:hover  { transform:translate(-1px,-1px); box-shadow:2px 2px 0 #000; }
.jp-link-box:active { transform:translate(1px,1px);   box-shadow:0 0 0 #000; }

/* ── hamburger day ───────────────────────────────────────────────── */
.jp-day.ham .jp-flow { display:block; padding:.35rem .5rem; }
.jp-ham-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.45rem; width:100%; min-height:74px; }

.jp-ham-cell {
  position:relative; /* needed for absolutely-positioned .jp-links inside dagopdracht */
  border:2px solid #000;
  background-color:#fde047;
  border-radius:3px;
  min-height:74px;
  padding:.35rem .45rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background-image:repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(0,0,0,.08) 4px, rgba(0,0,0,.08) 6px
  );
}

/* reserve right padding in the value area when dagopdracht has link icons */
.jp-ham-cell.has-links .v { padding-right:2.5rem; }

.jp-ham-cell .k {
  font-size:.7rem;
  color:#000;
  font-weight:900;
  display:block;
  margin-bottom:.25rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.jp-ham-cell .v { min-height:1.3rem; font-size:.88rem; color:#000; font-weight:700; flex:1; }

/* ── plain fill (decision weeks — slot has no data) ──────────────── */
.jp-plain-fill {
  border:2px solid #000;
  border-radius:3px;
  min-height:74px;
  background:#f5f5f5;
  background-image:repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(0,0,0,.08) 4px, rgba(0,0,0,.08) 6px
  );
}
.jp-flow.plain { display:block; }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:900px){
  .jp-sprint { grid-template-columns:1fr; }
  .jp-rail, .jp-project { writing-mode:horizontal-tb; transform:none; }
}