/* ==========================================================
   The process, drawn.

   A board that draws itself and then runs: matters arrive one
   after another, work down the system, queue on my desk for
   round after round, go out and come back, and end on the
   signed pile. The shapes and the colour carry the story, so
   it reads with the labels switched off.
   ========================================================== */
.board{margin:0;border:1px solid var(--rule);border-radius:4px;background:#FDFDFB;
  overflow:hidden}

.board-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--rule-soft);background:#fff}
.board-ctl{display:flex;gap:8px}
.board.is-playing .when-play,.board:not(.is-playing) .when-pause{display:none}
.board-count{margin:0;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.board-count b{font-weight:600;color:var(--ink);font-feature-settings:"tnum" 1;
  min-width:1.3em;text-align:end}
.bd-sep{width:1px;height:13px;background:var(--rule);margin-inline:5px}
.bd-illus{font-style:italic}
.board-hint{display:none;margin:0;padding:10px 16px 0;font-size:.82rem;color:var(--muted)}
@media (max-width:760px){.board-hint{display:block}}

.board-scroll{position:relative}
.board-stage{padding:clamp(8px,1.4vw,18px)}
.board-inner{position:relative}
.board-svg{display:block;width:100%;height:auto}

/* the drawing itself */
.bd-draw{fill:none;stroke:#44525E;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bd-draw .fillp{fill:#fff;stroke:none}
.bd-draw .sys{stroke:var(--sys-ink)}
.bd-draw .law{stroke:var(--law-ink)}
.bd-draw .oth{stroke:var(--oth-ink)}
.bd-draw .ok{stroke:var(--ok-ink)}
.bd-draw .thin{stroke-width:1.5;opacity:.55}
/* the three tracks: faint when empty, full when a matter is in them */
.bd-draw .track{opacity:.3;transition:opacity .35s ease,stroke-width .35s ease}
.bd-draw .track.thin{opacity:.22}
.bd-draw .track.busy{opacity:.95;stroke-width:2.2}
.bd-draw .track.thin.busy{opacity:.6;stroke-width:1.5}
/* the clock and the dollar say which measure is which, so they are
   drawn at full strength rather than as background rule work */
.bd-draw .glyph{stroke-width:2.4;opacity:1;stroke:#44525E}
.bd-draw .dash{stroke-dasharray:7 7;opacity:.6}

/* the matters */
.bd-flow{stroke-linecap:round;stroke-linejoin:round}
.bd-doc{fill:#fff;stroke:#44525E;stroke-width:2}
.bd-doc.k-sys{stroke:var(--sys-ink);fill:#F7FAFF}
.bd-doc.k-law{stroke:var(--law-ink);fill:#FCF8F1}
.bd-doc.k-cl{stroke:#44525E;fill:#fff}
.bd-doc.k-oth{stroke:var(--oth-ink);fill:#FEF8F5}
.bd-doc.k-ok{stroke:var(--ok-ink);fill:#F4FBF7}
.bd-line{stroke:#C7CFD6;stroke-width:2.4}
.bd-doc.k-sys ~ .bd-line{stroke:#BFD0F5}
.bd-tick{stroke:var(--ok-ink);stroke-width:2.6;fill:none}
.bd-pen{stroke:var(--law-ink);stroke-width:2.4;fill:none}

/* labels, in a hand */
.bd-lab{position:absolute;left:calc(1% * var(--x));top:calc(1% * var(--y));
  transform:translate(-50%,-50%);
  font-family:"Architects Daughter","Amatic SC","Segoe Print",cursive;
  pointer-events:none;white-space:nowrap;color:#44525E;line-height:1;
  opacity:0;transition:opacity .7s ease}
/* the captions go on once the drawing is finished */
.board.drawn .bd-lab{opacity:1}
.bd-left{transform:translate(0,-50%)}
/* the board is mirrored for Hebrew. The captions move with it, but
   their x is flipped in board.js rather than here: one rule setting
   --x beats any amount of cascade juggling between left and right. */
[dir="rtl"] .bd-lab{direction:rtl}
/* the Hebrew hand (Amatic SC) is narrow and small on the body, so the
   Hebrew captions are set about a fifth larger to read at the same size */
[dir="rtl"] .bd-h{font-size:clamp(16px,1.78vw,23px)}
[dir="rtl"] .bd-l{font-size:clamp(15px,1.98vw,25.5px)}
[dir="rtl"] .bd-n{font-size:clamp(12.5px,1.37vw,17.5px)}
[dir="rtl"] .bd-m{font-size:clamp(13.5px,1.59vw,20.5px)}
.bd-h{font-size:clamp(13px,1.46vw,19px)}
.bd-l{font-size:clamp(12.5px,1.62vw,21px);transform:translate(0,-50%);color:var(--sys-ink)}
.bd-n{font-size:clamp(10px,1.12vw,14.5px);color:var(--muted)}
.bd-par{color:var(--sys-ink)}
/* the two measures */
.bd-m{font-size:clamp(11px,1.3vw,17px);transform:translate(0,-50%);color:var(--muted);
  opacity:0;transition:opacity .45s ease}
/* unlit, the measure captions stay in the muted ink at full strength
   (about 5:1 on the board) rather than fading below reading contrast;
   lit, they darken */
.board.drawn .bd-m{opacity:1}
.board.drawn .bd-m.lit{color:var(--ink)}
.board.drawn .bd-m.bd-ok.lit{color:var(--ok-ink)}
.bd-fill{fill:none;stroke-linecap:round}
.bd-fill.was{stroke:#BEC4CA;stroke-width:9}
.bd-fill.now{stroke:var(--ok-ink);stroke-width:9}
.bd-me{color:var(--law-ink)}
.bd-ok{color:var(--ok-ink)}

.board-foot{border-top:1px solid var(--rule-soft);padding:10px 16px}
.board-foot figcaption{font-size:.76rem;color:var(--muted)}
.board-text{border-top:1px solid var(--rule-soft);padding:16px;background:#fff}
.board-text p{max-width:72ch}
@media (max-width:600px){.board-text p.sm{font-size:1rem}}

@media (scripting: none){ .board-bar{display:none} }
/* with script on, the board itself tells the sequence; the paragraph
   stays in the page for screen readers but is not shown */
@media (scripting: enabled){
  .board-text{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0;padding:0}
}

/* a phone cannot usefully shrink a board this wide, so it scrolls
   sideways inside its own frame while the page does not */
@media (max-width:760px){
  /* thumb-sized controls on a phone */
  .board-ctl{gap:12px}
  .rr-btn{min-height:44px;padding-inline:16px}
  .board-stage{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin}
  .board-inner{min-width:700px}
  .board-scroll::after{content:"";position:absolute;inset-block:0;inset-inline-end:0;
    width:30px;pointer-events:none;
    background:linear-gradient(to left,#FDFDFB,rgba(253,253,251,0))}
  [dir="rtl"] .board-scroll::after{background:linear-gradient(to right,#FDFDFB,rgba(253,253,251,0))}
}