/* #professions (owner P4). CALL-E P02 "Pick-and-watch": 14 course tags on two cords (one scrollable cord at <=991)
   + a two-pane demo board (sand | cream) hung from two pegs. Kit classes + semantic variables only (dark = automatic).
   Behaviour: js/professions.js (tabs, autoplay 4.2 s, pause, keys, swipe). */

#professions .split-head .note { max-width: 36ch; }
#professions .split-head h2 { text-wrap: balance; }

/* ---------- tag cords (>=1200: 7 + 7, CALL-E errtag 170 px) ---------- */
#professions .pk-tabs { margin-top: 36px; }
#professions .pk-row { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
#professions .pk-row + .pk-row { margin-top: 26px; }
#professions .pk-row > .hg { flex: 0 1 170px; min-width: 0; }
#professions .pk-tag { width: 100%; font-size: 16px; }
#professions .pk-tag .lbl { overflow-wrap: break-word; }
#professions .pk-tag.wob { transform-origin: 50% 0; animation: wobble 0.7s var(--ease); }
@media (1200px <= width <= 1339px) {
  #professions .pk-tag { padding: 16px 12px 12px; font-size: 15px; }
}
/* 992-1199: each cord row wraps 4 + 3 on two painted cords (fixed tag height, CALL-E grid2 mechanics) */
@media (992px <= width <= 1199px) {
  #professions .pk-row {
    --h: 96px; --gap: 52px; --pitch: calc(var(--h) + var(--gap));
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap) 18px;
    margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
    background:
      var(--cord-img) repeat-x 0 12px / 12px 28px,
      var(--cord-img) repeat-x 0 calc(12px + var(--pitch)) / 12px 28px;
  }
  #professions .pk-row > .cord { display: none; }
  #professions .pk-row .pk-tag { height: var(--h); }
}
/* <=991: one horizontally scrollable cord (scroll-snap); the active tag is kept in view by the script */
@media (width <= 991px) {
  #professions .pk-tabs {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none;
    margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 24px;
    background: var(--cord-img) repeat-x 0 12px / 12px 28px; background-attachment: local;
  }
  #professions .pk-tabs::-webkit-scrollbar { display: none; }
  #professions .pk-row { flex: none; gap: 14px; }
  #professions .pk-row + .pk-row { margin-top: 0; }
  #professions .pk-row > .cord { display: none; }
  #professions .pk-row > .hg { flex: none; width: 160px; scroll-snap-align: start; }
  #professions .pk-boardrow { margin-top: 0; }
}

/* ---------- the board: sand pane | cream pane, 2 px ink frame (CALL-E demo board) ---------- */
#professions .pk-boardrow { margin-top: 44px; }
#professions .pk-hang { width: 100%; }
#professions .pk-board {
  display: grid; grid-template-columns: minmax(0, 23fr) minmax(0, 40fr); grid-template-rows: auto auto;
  touch-action: pan-y;
}
/* every panel sits in the same cell, so the board keeps the height of the longest course;
   inactive panels carry [hidden] (set by the script) and are kept in layout but invisible */
#professions .pk-panel {
  grid-column: 1 / -1; grid-row: 1 / span 2;
  display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid;
}
#professions .pk-panel[hidden] { display: grid !important; visibility: hidden; }
#professions .pk-panel:focus-visible { outline-offset: -6px; }
#professions .pk-l {
  grid-column: 1; grid-row: 1 / span 2; min-width: 0;
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px);
  background: var(--paper-sand); border-right: 2px solid var(--fg);
}
#professions .pk-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#professions .pk-ico { width: 56px; height: 56px; border-radius: 14px; }
#professions .pk-ico svg { width: 28px; height: 28px; }
#professions .pk-n { font: 400 14px/1.2 var(--mono); text-transform: uppercase; color: var(--fg3); font-variant-numeric: tabular-nums; }
#professions .pk-t {
  font-size: clamp(30px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.015em; font-weight: 400;
  overflow-wrap: break-word;
}
#professions .pk-r {
  grid-column: 2; grid-row: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px) 0;
}
#professions .pk-d { font-size: clamp(19px, 0.6vw + 13px, 22px); line-height: 1.4; color: var(--fg); max-width: 34ch; }
#professions .pk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
#professions .pk-chips .wpill { white-space: normal; }

/* ticks: CALL-E timeline (2 px track + ink bar over a row of tick dots) */
#professions .pk-dots {
  grid-column: 2; grid-row: 2; align-self: end; min-width: 0; container-type: inline-size;
  padding: 36px clamp(24px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
}
#professions .pk-track { position: relative; height: 2px; margin: 0 16px 10px; background: var(--line); }
#professions .pk-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--fg); transition: width 0.4s var(--ease); }
#professions .pk-tl { display: flex; justify-content: space-between; }
#professions .pk-tl .tick { min-width: 32px; }
@container (width < 600px) {
  #professions .pk-track { display: none; }
  #professions .pk-tl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 6px; }
  #professions .pk-tl .tick { min-width: 0; }
}

/* CTA under the board */
#professions .pk-cta { margin-top: 48px; }

/* stacked board (CALL-E panes wrap below ~960 px): sand pane over cream pane, ticks at the bottom */
@media (width <= 991px) {
  #professions .pk-board { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  #professions .pk-panel { grid-row: 1 / span 2; }
  #professions .pk-l { grid-column: 1; grid-row: 1; border-right: 0; border-bottom: 2px solid var(--fg); }
  #professions .pk-r { grid-column: 1; grid-row: 2; }
  #professions .pk-dots { grid-column: 1; grid-row: 3; }
  #professions .pk-d { max-width: none; }
}
@media (width <= 767px) {
  #professions .pk-l { gap: 16px; padding: 24px 20px; }
  #professions .pk-r { gap: 18px; padding: 24px 20px 0; }
  #professions .pk-dots { padding: 28px 20px 22px; }
  #professions .pk-t { font-size: clamp(28px, 7.4vw, 32px); }
  #professions .pk-d { font-size: 19px; }
  #professions .pk-cta { margin-top: 36px; }
}

/* before the script runs: only the first course shows (same box as the final state) */
@media (scripting: enabled) {
  #professions .pk:not(.ready) .pk-panel:not(:first-of-type) { visibility: hidden; }
}
/* JavaScript off: every course is shown, stacked inside the board; tags jump to their course */
@media (scripting: none) {
  #professions .pk-board { display: block; }
  #professions .pk-panel { display: grid; grid-template-columns: minmax(0, 23fr) minmax(0, 40fr); }
  #professions .pk-panel + .pk-panel { border-top: 2px solid var(--fg); }
  #professions .pk-l { grid-row: auto; }
  #professions .pk-r { padding-bottom: clamp(28px, 3vw, 44px); }
  #professions .pk-dots { display: none; }
  #professions .pk-tag.on { background: var(--paper); color: var(--fg); }
}
@media (scripting: none) and (width <= 991px) {
  #professions .pk-panel { grid-template-columns: minmax(0, 1fr); }
  #professions .pk-l { border-right: 0; border-bottom: 2px solid var(--fg); }
}