/* aitism learn: parts shared by the activity sheets (kit.js, acts-*.js).
   Paper rules: every size in em of the sheet base, Print Black on white, the line colour only on route furniture,
   dashed only where something is unsettled (a cut, a gap to fill). */

/* a picture in a square tile, like a step picture */
.sheet .pbox { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border: 2px solid #111; border-radius: .35em; background: #fff; flex: none; }
.sheet .pbox .em { font-size: 1.15em; line-height: 1; }

/* a cut-out grid: dashed cut lines with the scissors mark, like the word cards */
.cutgrid { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-rows: 1fr;
  border-top: 2px dashed #666; border-left: 2px dashed #666; margin-top: .3em; }
.cutgrid::before { content: "\2702"; position: absolute; top: -.6em; left: .5em; font: 400 .7em/1 "Segoe UI Symbol", var(--ui); background: #fff; padding: 0 .15em; color: #444; z-index: 1; }
.cutgrid > * { border-right: 2px dashed #666; border-bottom: 2px dashed #666; min-width: 0; min-height: 0; }

/* the usual sheets for the new subjects: deliberately typical, outside the system */
.u-clocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; font-size: 1em; }
.u-clocks span { display: grid; justify-items: center; gap: 4px; }
.u-clocks i { width: 76px; height: 76px; border: 2px solid #444; border-radius: 50%; }
.u-clocks b { font-weight: 400; color: #555; }
.u-search { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); border: 2px solid #444; font: 700 17px/1.55 "Courier New", monospace; text-align: center; }
.u-words { font-size: .9em; line-height: 1.5; }
.u-mosaic { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); border: 2px solid #444; }
.u-mosaic span { aspect-ratio: 1; border: 1px solid #888; font-size: 10px; display: grid; place-items: center; color: #555; }
.u-key { font-size: .9em; }
.u-faces { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; font-size: 1.6em; text-align: center; }