/* ─── The Collaborative Transformation Journey — the poster ─────────────────
   ONE STYLESHEET, FOUR SURFACES: the shared screen, the institution's record,
   the learner's copy, and the landscape PDF. They must be the same picture, so
   they are the same rules.

   EVERYTHING IS SIZED IN cqw — one per cent of the canvas width. The poster is
   therefore resolution-free: it is identical on a 4K room screen, a phone
   preview and an A4 landscape page, and a box that fits on one fits on all of
   them. Sizing in px would mean a canvas that fits the projector and overflows
   the print, which is the one thing this design cannot do: "the boxes have to
   be fixed so there is no data overflow".

   The fit itself is decided in transformation-journey-pure.js, at the moment
   the lecturer fixes a word, in front of the room. BOX_BUDGET and
   ANCHOR_BUDGET there are the character counts these rules leave room for. A
   change to one is a change to the other.

   WHY THE CANVAS IS 2.31:1 AND NOT 16:9. The design it is drawn from is a
   wide, shallow board — the room around it is part of the picture, not wasted
   space. Making the board 16:9 to fill a projector was the mistake that
   produced boxes half as tall again as the design's, "too bland" and with
   nothing to look at inside them. The board keeps its own shape and the stage
   fills the screen around it.
   ───────────────────────────────────────────────────────────────────────── */

/* The copy built for the paper. Present in the document from the start and
   shown only by the print rules, because a sheet assembled at the moment the
   button is pressed is a sheet whose images have not loaded yet. */
.tj-print-sheet { display: none; }

/* ── the stage ──────────────────────────────────────────────────────────
   The room the board hangs in. Screen only: it is atmosphere, and a
   photograph behind nineteen boxes of text is the opposite of a document.
   @media print drops it entirely. */
.tj-stage {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1671 / 941;
  background: #02080f center / cover no-repeat;
  overflow: hidden;
}
.tj-stage > .tj-canvas {
  position: absolute;
  /* Measured against the plate, and deliberately a little LARGER than the
     board drawn on it, so the artwork's own empty boxes are covered rather
     than peeping out along an edge. */
  left: 2.0%;
  top: 1.1%;
  /* 69.5% puts the bottom edge at y=664 of the plate — four pixels ABOVE the
     top of his head, which begins at 668. Nothing of him is behind the board
     any more.
     The board it used to have to reach down to cover has been painted out of
     the plate: journey-stage.jpg is the room with the artwork's own board
     removed and the man kept, so the live board is free to end wherever the
     design needs it to rather than wherever the artwork did. */
  width: 96.8%;
  height: 69.5%;
  aspect-ratio: auto;
}

/* THE TOKENS BELONG TO BOTH, and this is not tidiness.
   The mark and the stamp moved OUT of the board and onto the stage, where
   --tj-white was not declared: an undeclared custom property makes the whole
   colour declaration invalid, so the stamp inherited whatever the page gave
   it and printed the date in near-black on a near-black floor. Anything that
   can be rendered outside the board needs the palette outside the board. */
.tj-stage, .tj-canvas {
  --tj-frame:     #2f9ae8;
  --tj-white:     #ffffff;
  --tj-blue:      #3db8ff;
  --tj-blue-hi:   #36d8ff;
  --tj-me:        #ffd90d;
  --tj-moves:     #2bf49c;
  --tj-notch:     1.5cqw;
  /* The face travels with the palette, and for the same reason: the stamp
     fell back to the page's serif the moment it stood outside the board. */
  font-family: var(--font-display, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
}

.tj-canvas {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 2.31 / 1;
  box-sizing: border-box;
  padding: 0.9cqw 1.4cqw 0.75cqw;
  /* Lit from the top, like a board on a wall with the room's light above it. */
  background:
    radial-gradient(130% 150% at 50% -10%, #0e2f56 0%, #061c36 45%, #03101f 100%);
  background-color: #04101f;
  overflow: hidden;
  font-family: var(--font-display, "Inter", system-ui, -apple-system, "Segoe UI", sans-serif);
  display: flex;
  flex-direction: column;
  gap: 0.7cqw;
  /* The cut corners of the design. clip-path takes the border with it, so the
     frame line is drawn back on by ::after, which follows the same clip. */
  clip-path: polygon(
    var(--tj-notch) 0, calc(100% - var(--tj-notch)) 0, 100% var(--tj-notch),
    100% calc(100% - var(--tj-notch)), calc(100% - var(--tj-notch)) 100%,
    var(--tj-notch) 100%, 0 calc(100% - var(--tj-notch)), 0 var(--tj-notch));
}
.tj-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 0.12cqw rgba(64, 170, 245, 0.85),
    inset 0 0 1.6cqw rgba(45, 150, 230, 0.20);
  clip-path: inherit;
}

/* ── the top bar ────────────────────────────────────────────────────────
   Topic left, title centred in its own tab, session right. The title is
   centred on the CANVAS and not between its neighbours, so a long topic name
   cannot drag it sideways. */
.tj-topbar {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1cqw;
  min-height: 2.4cqw;
  padding-bottom: 0.15cqw;
}
.tj-topic, .tj-session {
  color: var(--tj-white);
  font-size: 0.95cqw;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 0.7cqw rgba(120, 200, 255, 0.45);
}
.tj-session { text-align: right; }
.tj-title {
  margin: 0;
  padding: 0.22cqw 2.4cqw 0.3cqw;
  color: var(--tj-white);
  font-size: 1.85cqw;
  font-weight: 800;
  letter-spacing: 0.005em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(20, 74, 130, 0.75), rgba(9, 38, 72, 0.55));
  border-bottom: 0.1cqw solid rgba(80, 190, 255, 0.8);
  clip-path: polygon(1.1cqw 0, calc(100% - 1.1cqw) 0, 100% 100%, 0 100%);
  text-shadow: 0 0 1cqw rgba(110, 200, 255, 0.55);
}

/* ── the three panels ───────────────────────────────────────────────────
   Blue, yellow, green — left to right, as drawn. This is NOT the order the
   room fills them in (yellow, blue, green); that order lives in PANEL_ORDER
   and never touches the layout. */
.tj-panels {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 0.85cqw;
}
.tj-panel {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 0.7cqw 0.7cqw 0.8cqw;
  background: linear-gradient(180deg, rgba(10, 40, 78, 0.55), rgba(5, 20, 42, 0.45));
  border: 0.11cqw solid currentColor;
  border-radius: 0.5cqw;
  display: flex;
  flex-direction: column;
  gap: 0.6cqw;
}
.tj-panel--world {
  color: var(--tj-blue);
  box-shadow: 0 0 0.35cqw rgba(61, 184, 255, 0.55), 0 0 1.8cqw rgba(61, 184, 255, 0.22),
              inset 0 0 1.6cqw rgba(61, 184, 255, 0.07);
}
.tj-panel--me {
  color: var(--tj-me);
  box-shadow: 0 0 0.35cqw rgba(255, 217, 13, 0.5), 0 0 1.8cqw rgba(255, 217, 13, 0.18),
              inset 0 0 1.6cqw rgba(255, 217, 13, 0.06);
}
.tj-panel--moves {
  color: var(--tj-moves);
  box-shadow: 0 0 0.35cqw rgba(43, 244, 156, 0.5), 0 0 1.8cqw rgba(43, 244, 156, 0.18),
              inset 0 0 1.6cqw rgba(43, 244, 156, 0.06);
}

.tj-panel-head { text-align: center; }
.tj-panel--world .tj-panel-head { text-align: left; }
.tj-panel-title {
  margin: 0;
  font-size: 1.08cqw;
  font-weight: 800;
  line-height: 1.22;
  color: currentColor;
  text-shadow: 0 0 0.9cqw currentColor;
  text-wrap: balance;
}
.tj-panel--world .tj-panel-title { color: var(--tj-blue-hi); }
/* The lead stays white, as drawn. The panel colour belongs to what the ROOM
   put there, which is what "the same colour as the boxes" is about. */
.tj-panel-lead {
  margin: 0.2cqw 0 0;
  font-size: 0.66cqw;
  line-height: 1.32;
  font-weight: 500;
  color: var(--tj-white);
  text-wrap: balance;
}

/* ── the grids ──────────────────────────────────────────────────────────
   Explicit row counts, never auto: a box that stretched to fill a gap would
   be a different size on a poster with gaps in it, and the whole promise of
   this canvas is that the boxes are fixed. */
.tj-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* FIXED HEIGHTS, not 1fr. A box is a constant of the design, not a
     consequence of how tall its panel happened to be — which is what makes
     the poster, the projector and the A4 page the same picture. Whatever
     height is left over opens the gaps BETWEEN the rows rather than
     stretching the boxes to swallow it, so a smaller box stays a smaller box
     and the panel still reads as full. */
  grid-template-rows: repeat(3, 9.2cqw);
  align-content: space-between;
  gap: 0.6cqw;
}
.tj-me-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* The anchor row is SHORTER than the two beside it: giving it a full row of
     height would leave a third of the middle panel empty and make the four
     words look like an afterthought floating in it. They are the opposite of
     that.

     BUT NOT AS SHORT AS IT WAS. The row was written when a slot held a word
     and nothing else, and it holds a word AND an explanation — so at 5.2cqw
     the second line of an explanation was clipped by the slot's own overflow:
     "The words get cut. It should not be so."

     The 1.4cqw the row gains is taken back off the two beside it, so the
     middle panel is exactly as tall as it was and the three panels still line
     up: 10.3 + 6.6 + 10.3 = 11 + 5.2 + 11. An ordinary box loses 0.7cqw, which
     is half a line it was not using — BOX_BUDGET allows five and the boxes
     were measured with room to spare. */
  grid-template-rows: 10.3cqw 6.6cqw 10.3cqw;
  align-content: space-between;
  gap: 0.6cqw;
}
.tj-box--anchor { grid-column: 1 / -1; }

/* ── m414 · the other two templates ─────────────────────────────────────
   ONE DESIGN, THREE BOX SETS. Everything above is untouched and stays the
   full board; these two rules each say only how many COLUMNS a panel is
   drawn in, and once for Ready-Reckoner how tall its two rows are.

   The anchor needs no rule at all, which is worth saying because it looks
   like it should. It spans every column of the ME panel whatever the count
   (grid-column: 1 / -1 above), and the ME panel is the same 1.5fr of the
   board in all three — so the four words sit in exactly the same strip of
   exactly the same width on every template, and the row height they were
   measured against in m401 still holds. */
.tj-canvas--insightful .tj-grid    { grid-template-columns: 1fr; }
.tj-canvas--insightful .tj-me-grid { grid-template-columns: repeat(2, 1fr); }

/* Two rows instead of three, and they take the third one's height between
   them rather than leaving the panel two-thirds full: 14.1 + 0.6 + 14.1 is
   the 28.8 that three rows of 9.2 and two gaps came to. The three panels
   still line up, which is the whole reason these are fixed numbers and
   never 1fr. */
.tj-canvas--ready_reckoner .tj-grid {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 14.1cqw);
}
.tj-canvas--ready_reckoner .tj-me-grid { grid-template-columns: 1fr; }

/* ── m435 · Essential · one box, and the box is the panel ───────────────
   "there are only 3 boxes, one in teh middle one on the left and one on the
   right"

   ONE ROW OF 1fr, which the comment on .tj-grid above says never to write —
   and the reason it says so does not reach this board. A row of 1fr was
   forbidden because a box that stretched to swallow a panel's leftover
   height would be a different size on a poster with gaps in it. There is no
   leftover here and there are no gaps: ONE row takes the whole panel, every
   Essential panel is the same height as the other two, and the stage is a
   fixed shape — so this box is exactly as constant as the fixed numbers
   above it, and saying 28.8cqw instead would be the same height written as a
   number that then has to be kept in step with three others by hand.

   The ME panel needs no anchor row because this board has no anchor; the
   renderer does not draw one, so there is nothing for a middle row to hold. */
.tj-canvas--essential .tj-grid,
.tj-canvas--essential .tj-me-grid {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

/* "Can put upto 5 words and phrases in each box" / "each phrase and box will
   come one after another with a small space after each."

   The space is the body's gap, raised from 0.12cqw — which was the distance
   between two entries sharing a small box and reads as one block when there
   are five — to something that separates them into five answers. */
.tj-canvas--essential .tj-box-body { gap: 0.62cqw; }

/* "The phrase and words will be a little bigger."

   A little: the word goes 1.3 → 1.55cqw and the explanation 1.02 → 1.22cqw,
   both about a fifth. The box is twice as wide and three times as tall as
   the one those numbers were measured in, so the type could have gone much
   further — and a word at twice the size in a box holding five of them would
   be five shouts rather than a board. ESSENTIAL_BUDGET in
   transformation-journey-pure.js is these three font sizes counted back into
   characters, and the two move together or the board overflows in front of a
   room. */
.tj-canvas--essential .tj-word   { font-size: 1.55cqw; }
.tj-canvas--essential .tj-phrase { font-size: 1.22cqw; margin-top: 0.18cqw; }
/* The heading grows with them — six tenths of a cqw under a 1.55cqw word is
   a label that has lost its argument with the answer. */
.tj-canvas--essential .tj-box-heading { font-size: 0.72cqw; margin-bottom: 0.3cqw; }



/* ══ m416 · one board is not one palette ═══════════════════════════════
   m414 gave the three templates three box counts and one look, on a reading
   of "its all the same except for the logic" that was wrong: the three
   drawings are three different boards. The blue one is a lit studio, the
   cream one a warm lobby, the pale one a grey office, and a product
   administrator picking between them is picking a WHOLE PICTURE.

   Everything above stays the dark board, untouched. Each theme below
   redeclares the palette tokens and then overrides only the rules that
   carry a literal colour — the neon glows, which are what a lit board in a
   dark room has and a printed board in daylight does not.

   THE TOKENS GO ON THE STAGE AS WELL AS THE CANVAS, for the reason the
   original block gives: the mark and the stamp stand on the floor beside
   the board, and a palette declared only inside the canvas leaves them the
   dark board's white on a cream floor. */

/* ── Insightful · cream and gold, in the warm lobby ───────────────────── */
.tj-stage--insightful, .tj-canvas--insightful {
  --tj-frame:     #c9921a;
  /* "white" is the name of the colour that sits ON the ground, and on cream
     that is a dark brown. The token is what every rule above already reads. */
  --tj-white:     #4a3a18;
  --tj-blue:      #2e6fd6;
  --tj-blue-hi:   #1b4a8f;
  --tj-me:        #b0790a;
  --tj-moves:     #1a8a3e;
  --tj-ground:    #fcf4df;
  --tj-box:       #fbf5e3;
}
/* ── Essential · cream and ink, in the long room with the map ──────────
   A third daylight board, and deliberately not a third gold one. Insightful
   is gold on cream and Ready-Reckoner navy on pale blue; this one is the
   warm cream of its own plate with the ink darkened until three boxes the
   size of panels can be read across a hall — which is the one thing this
   board has to do that the others do not. */
.tj-stage--essential, .tj-canvas--essential {
  --tj-frame:     #b98a3c;
  --tj-white:     #3c3220;
  --tj-blue:      #1d4f96;
  --tj-blue-hi:   #143869;
  /* 4.9:1 on the box. The word is bigger here than anywhere else and still
     gets the darker brown, because a five-entry box is read from further
     back than a one-entry box ever was. */
  --tj-me:        #8a6309;
  --tj-moves:     #1a7f39;
  --tj-ground:    #fbf2e6;
  --tj-box:       #fdf8ee;
}
/* ── Ready-Reckoner · pale blue and cream, in the grey office ─────────── */
.tj-stage--ready_reckoner, .tj-canvas--ready_reckoner {
  --tj-frame:     #9cc9e8;
  --tj-white:     #123a75;
  --tj-blue:      #1b4a8f;
  --tj-blue-hi:   #123a75;
  /* m425 — DARKER, and not only because it was asked for. #c08b12 on the
     cream box was 2.85:1, which is below the 3:1 a large bold word needs to
     be read at the back of a room; #9c700b is 4.17:1 and sits beside the
     green's 3.90 instead of floating a shade above it. Insightful's gold is
     deliberately NOT changed: the two cream boards are two palettes, which
     is the whole of the m416 correction. */
  --tj-me:        #9c700b;
  --tj-moves:     #1f8f40;
  --tj-ground:    #e9f7fe;
  --tj-box:       #fdf8e7;
}

/* One rule per surface, all three daylight boards at once: the only
   difference between them is in the tokens above, which is the point. */
.tj-canvas--insightful,
.tj-canvas--essential,
.tj-canvas--ready_reckoner {
  background: var(--tj-ground);
  background-color: var(--tj-ground);
}
.tj-canvas--insightful::after,
.tj-canvas--essential::after,
.tj-canvas--ready_reckoner::after {
  box-shadow: inset 0 0 0 0.12cqw var(--tj-frame);
}
.tj-canvas--insightful .tj-topic,
.tj-canvas--essential .tj-topic,
.tj-canvas--insightful .tj-session,
.tj-canvas--essential .tj-session,
.tj-canvas--ready_reckoner .tj-topic,
.tj-canvas--ready_reckoner .tj-session { text-shadow: none; }
.tj-canvas--insightful .tj-title,
.tj-canvas--essential .tj-title,
.tj-canvas--ready_reckoner .tj-title {
  background: #ffffff;
  border-bottom-color: var(--tj-frame);
  text-shadow: none;
}

/* The panels and the boxes are paper here, not light. The glow goes; the
   colour stays where it was — on the border and on the title. */
.tj-canvas--insightful .tj-panel,
.tj-canvas--essential .tj-panel,
.tj-canvas--ready_reckoner .tj-panel {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
.tj-canvas--ready_reckoner .tj-panel--world { background: rgba(220, 238, 251, 0.85); }
.tj-canvas--insightful .tj-panel-title,
.tj-canvas--essential .tj-panel-title,
.tj-canvas--ready_reckoner .tj-panel-title { text-shadow: none; }
/* m425 · A PANEL'S HEADING IS THE PANEL'S COLOUR.
   m416 painted all three of Ready-Reckoner's headings the same navy, reading
   the drawing as saying the colour was carried by the boxes' borders alone.
   It is not: "the headings for both the brown and green should be brown and
   green not blue." So the override goes and .tj-panel-title's currentColor
   does what it already does on every other board — ME brown, MOVES green,
   MY WORLD navy from the rule below, which is the one that was right. */
.tj-canvas--ready_reckoner .tj-panel--world .tj-panel-title { color: var(--tj-blue-hi); }

.tj-canvas--insightful .tj-box,
.tj-canvas--essential .tj-box,
.tj-canvas--ready_reckoner .tj-box,
.tj-canvas--insightful .tj-box--world,
.tj-canvas--essential .tj-box--world,
.tj-canvas--insightful .tj-box--me,
.tj-canvas--essential .tj-box--me,
.tj-canvas--insightful .tj-box--moves,
.tj-canvas--essential .tj-box--moves,
.tj-canvas--ready_reckoner .tj-box--world,
.tj-canvas--ready_reckoner .tj-box--me,
.tj-canvas--ready_reckoner .tj-box--moves {
  background: var(--tj-box);
  box-shadow: none;
}
/* Six tenths of a gold on cream is not a heading anybody reads. */
.tj-canvas--insightful .tj-box-heading,
.tj-canvas--essential .tj-box-heading,
.tj-canvas--ready_reckoner .tj-box-heading { opacity: 0.95; }
.tj-canvas--insightful .tj-word,
.tj-canvas--essential .tj-word,
.tj-canvas--ready_reckoner .tj-word { text-shadow: none; }
.tj-canvas--insightful .tj-anchor-slot,
.tj-canvas--essential .tj-anchor-slot,
.tj-canvas--ready_reckoner .tj-anchor-slot { border-left-color: rgba(0, 0, 0, 0.18); }

/* Open still pulses and working is still the white-and-red rule — both say
   something about the room and neither belongs to the palette. On paper
   they need a dark edge rather than a white bloom to be seen at all. */
.tj-canvas--insightful .tj-box.is-open,
.tj-canvas--essential .tj-box.is-open,
.tj-canvas--ready_reckoner .tj-box.is-open,
.tj-canvas--insightful .tj-anchor-slot.is-open,
.tj-canvas--essential .tj-anchor-slot.is-open,
.tj-canvas--ready_reckoner .tj-anchor-slot.is-open {
  box-shadow: 0 0 0 0.16cqw currentColor;
  animation: none;
}
.tj-canvas--insightful .tj-box.is-working,
.tj-canvas--essential .tj-box.is-working,
.tj-canvas--ready_reckoner .tj-box.is-working {
  border-color: #1b1b1b;
  box-shadow: 0 0 0 0.16cqw #d7261c;
}
.tj-canvas--insightful .tj-anchor-slot.is-working,
.tj-canvas--essential .tj-anchor-slot.is-working,
.tj-canvas--ready_reckoner .tj-anchor-slot.is-working {
  outline-color: #1b1b1b;
  box-shadow: 0 0 0 0.14cqw #d7261c;
}

/* The furniture on a lit floor. A white bloom under a dark name is a smudge. */
.tj-stage--insightful > .tj-footer .tj-stamp,
.tj-stage--essential > .tj-footer .tj-stamp,
.tj-stage--ready_reckoner > .tj-footer .tj-stamp,
.tj-stage--insightful .tj-institution,
.tj-stage--essential .tj-institution,
.tj-stage--ready_reckoner .tj-institution,
.tj-canvas--insightful .tj-institution,
.tj-canvas--essential .tj-institution,
.tj-canvas--ready_reckoner .tj-institution { text-shadow: none; }
.tj-stage--insightful .tj-logo,
.tj-stage--essential .tj-logo,
.tj-stage--ready_reckoner .tj-logo,
.tj-canvas--insightful .tj-logo,
.tj-canvas--essential .tj-logo,
.tj-canvas--ready_reckoner .tj-logo { filter: none; }

/* ── one box ────────────────────────────────────────────────────────────
   A box is a heading it always shows and a body that may be empty. Its
   height comes from the grid row and never from its contents, which is the
   whole point: the poster is the same shape whatever the room said. */
.tj-box {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 0.4cqw 0.6cqw;
  border: 0.1cqw solid currentColor;
  border-radius: 0.42cqw;
  background: linear-gradient(180deg, rgba(10, 38, 74, 0.5), rgba(5, 20, 42, 0.35));
  display: flex;
  flex-direction: column;
  gap: 0.12cqw;
  overflow: hidden;
}
.tj-box--world {
  color: var(--tj-blue);
  box-shadow: 0 0 0.3cqw rgba(61, 184, 255, 0.4), inset 0 0 0.9cqw rgba(61, 184, 255, 0.10);
}
.tj-box--me {
  color: var(--tj-me);
  box-shadow: 0 0 0.3cqw rgba(255, 217, 13, 0.35), inset 0 0 0.9cqw rgba(255, 217, 13, 0.08);
}
.tj-box--moves {
  color: var(--tj-moves);
  box-shadow: 0 0 0.3cqw rgba(43, 244, 156, 0.35), inset 0 0 0.9cqw rgba(43, 244, 156, 0.08);
}

/* The question, always legible and never competing with the answer. An
   unanswered box still carries it — a poster with gaps should say what was
   missed, not show a blank square. */
.tj-box-heading {
  margin: 0;
  font-size: 0.62cqw;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.6;
}
.tj-box-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.28cqw;
  overflow: hidden;
}
.tj-entry { min-width: 0; }
.tj-word {
  margin: 0;
  font-size: 1.3cqw;
  line-height: 1.14;
  font-weight: 800;
  color: currentColor;
  text-shadow: 0 0 0.8cqw currentColor;
  overflow-wrap: break-word;
}
.tj-phrase {
  margin: 0.14cqw 0 0;
  font-size: 1.02cqw;
  line-height: 1.28;
  font-weight: 500;
  color: currentColor;
  opacity: 0.9;
  overflow-wrap: break-word;
}

/* ── the room's answers are NOT in the box ──────────────────────────────
   They used to scroll here. An anchor slot is 5.2cqw tall and carries a word
   set to be read from the back of a room; a ranked list of fifty answers drew
   straight over the top of it. The scroll lives in the work bar under the
   board, where a row is the size of a finger, and the board carries only what
   has been fixed — which is the box the finished poster will print. */

/* ── the box the phones are answering, and the box being worked ────────
   TWO DIFFERENT FACTS, and the board drew only one of them:

     is-open     the phones are answering this box right now
     is-working  the lecturer has it in the work bar and is choosing in it

   A box can be either, both or neither, so the two marks have to be legible
   together and apart. Open PULSES in the box's own colour — it is the room's
   state and it is alive. Working is a hard white rule with a red outer edge,
   which is the one thing on this board that is not in a panel colour, so it
   reads at a glance from a lectern: "We dont know which box is selected. it
   shoudl show bold border or a red overborder so we know which it is". */
.tj-box.is-open, .tj-anchor-slot.is-open {
  border-color: currentColor;
  box-shadow: 0 0 0.5cqw currentColor, 0 0 1.8cqw rgba(255, 255, 255, 0.18),
              inset 0 0 1.2cqw rgba(255, 255, 255, 0.07);
  animation: tj-open-pulse 2.4s ease-in-out infinite;
}
@keyframes tj-open-pulse {
  0%, 100% { box-shadow: 0 0 0.35cqw currentColor, inset 0 0 1cqw rgba(255, 255, 255, 0.05); }
  50%      { box-shadow: 0 0 0.9cqw currentColor, inset 0 0 1.4cqw rgba(255, 255, 255, 0.10); }
}
@media (prefers-reduced-motion: reduce) {
  .tj-box.is-open, .tj-anchor-slot.is-open { animation: none; }
}

.tj-box.is-working {
  border-color: #ffffff;
  border-width: 0.22cqw;
  box-shadow: 0 0 0 0.16cqw #ff3b30, 0 0 1.6cqw rgba(255, 59, 48, 0.55);
}
/* A slot has no border of its own — it is divided from its neighbours by a
   rule — so it is marked with an outline, which needs no box to hang on. */
.tj-anchor-slot.is-working {
  outline: 0.18cqw solid #ffffff;
  outline-offset: -0.18cqw;
  box-shadow: 0 0 0 0.14cqw #ff3b30, 0 0 1.2cqw rgba(255, 59, 48, 0.5);
  border-radius: 0.3cqw;
}
/* The wide anchor box lights up when one of its slots is being worked, but
   quietly: the slot is the answer to "which one", the box only says where. */
.tj-box--anchor.is-working { box-shadow: 0 0 0 0.1cqw rgba(255, 59, 48, 0.45); }

/* ── the four words of the story ────────────────────────────────────────
   Four slots sharing one wide box, so each is tighter than an ordinary box
   and ANCHOR_BUDGET says so in characters. The dividers are what make four
   answers read as four rather than as a sentence. */
.tj-anchor-slots {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 0.5cqw;
}
.tj-anchor-slot {
  min-width: 0;
  height: 100%;
  /* "the boxes overspill". A slot is a fixed rectangle on a poster that says
     it never overflows, so it clips — and the learner's keyboard is capped at
     what fits, so there should be nothing to clip. */
  overflow: hidden;
  padding: 0 0.35cqw;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 0.07cqw solid rgba(255, 217, 13, 0.32);
}
.tj-anchor-slot:first-child { border-left: 0; }
.tj-anchor-slot .tj-word   { font-size: 1.45cqw; letter-spacing: 0.01em; }
/* Two lines of explanation have to FIT the taller row with something in hand,
   or the clip comes back the first time somebody types to the very end of
   the cap. ANCHOR_BUDGET.chars is the other half of this number. */
.tj-anchor-slot .tj-phrase { font-size: 0.85cqw; line-height: 1.24; margin-top: 0.1cqw; }

/* ── the mark and the stamp ─────────────────────────────────────────────
   On the stage they stand on the floor BESIDE the table, not on the board:
   they are the room's furniture, not the room's work, and taking them off
   buys back the strip of height that was standing on somebody's head.
   Off the stage — the PDF, the learner's copy — there is no floor to stand
   them on, so they sit inside the board as before. */
.tj-footer {
  display: flex;
  /* TOP, not centre. With two marks stacked at the left, centring drops the
     date to the middle of the stack and it stops reading as a pair with the
     platform mark it belongs beside. */
  align-items: flex-start;
  justify-content: space-between;
  min-height: 1.6cqw;
}
.tj-stage > .tj-footer {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  top: 71.4%;
  min-height: 0;
}
/* Standing on a lit floor rather than on the board's own dark, they need
   their own weight or they read as a smudge. */
.tj-stage > .tj-footer .tj-logo { height: 2.6cqw; opacity: 1; }
/* Doubled, on the project owner's instruction. object-fit: contain means a
   squarish mark takes the full height while a very wide wordmark is limited
   by max-width instead — never stretched, and never running out over the
   table. */
.tj-stage > .tj-footer .tj-logo--institution { height: 7.6cqw; max-width: 40cqw; }
.tj-stage > .tj-footer .tj-stamp {
  margin-top: 0.55cqw;
  font-size: 0.92cqw;
  font-weight: 600;
  opacity: 1;
  text-shadow: 0 0 0.9cqw rgba(0, 0, 0, 0.9), 0 0 1.6cqw rgba(120, 200, 255, 0.35);
}
.tj-marks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35cqw;
  min-width: 0;
}
/* NOT INVERTED, AND THAT WAS THE BUG. brightness(0) invert(1) makes every
   opaque pixel white, which is right for a black-ink WORDMARK and destroys a
   colour EMBLEM: unshelvedmind-logo.png is a 768x768 round mark, so the board
   and the first PDF both carried a small white dot where the platform's logo
   should be. It gets the same treatment as the institution's — its own
   colours, and a soft halo so a dark-inked mark still has an edge against
   this floor. Neither is guesswork about the artwork. */
.tj-logo {
  height: 1.9cqw; width: auto; display: block;
  opacity: 1;
  filter: drop-shadow(0 0 0.16cqw rgba(255, 255, 255, 0.85))
          drop-shadow(0 0 0.45cqw rgba(255, 255, 255, 0.5));
}
/* NEITHER MARK IS INVERTED, and the one above used to be. The reasoning then
   was that the platform's mark is ours and we know it is black ink on white,
   so forcing it white is safe — and that was simply wrong about the file:
   unshelvedmind-logo.png is a 768x768 colour emblem, and inverting it gave
   the board a white dot.
   Both get a soft light halo instead. It costs a mark that is already light
   nothing at all, and gives one drawn in dark ink a readable silhouette
   against this floor. Neither is guesswork about the artwork, which is the
   whole point: an institution's logo is theirs, and inverting it would turn a
   red crest blue. */
.tj-logo--institution {
  height: 5.2cqw;
  max-width: 40cqw;
  object-fit: contain;
  object-position: left center;
  opacity: 1;
  filter: drop-shadow(0 0 0.16cqw rgba(255, 255, 255, 0.85))
          drop-shadow(0 0 0.45cqw rgba(255, 255, 255, 0.55))
          drop-shadow(0 0 1.3cqw rgba(255, 255, 255, 0.3));
}
/* THE NAME, WHICH IS WHAT THE SHARED SCREEN CARRIES.
   "remove the logo, just put the institution name, so the boxes are better."
   A mark big enough to read costs the nineteen boxes the height they need,
   and during a class the room is looking at the boxes. The document keeps the
   mark; the working screen gets the name. */
.tj-institution {
  color: var(--tj-white);
  font-size: 0.95cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  max-width: 44cqw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 0.9cqw rgba(0, 0, 0, 0.9);
}
.tj-stage > .tj-footer .tj-institution { font-size: 1.35cqw; }

.tj-stamp {
  color: var(--tj-white);
  font-size: 0.6cqw;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.78;
}

/* ── print ──────────────────────────────────────────────────────────────
   Landscape, and the same BOARD — without the room it hangs in. A photograph
   behind nineteen boxes of text is the opposite of a document, and it is the
   one part of this design that is atmosphere rather than record. */
/* ── the paper ──────────────────────────────────────────────────────────
   A4 landscape is 1.45:1 and the board is 2.31:1, so on A4 the board is
   width-limited and a THIRD OF THE PAGE is empty underneath it — which is
   most of why the first PDF read as small and unclear. A named page sized to
   the board's own shape puts every millimetre of paper under the board, and
   everything on it comes out about half as big again.

   The plain @page stays as the fallback: a browser that does not support
   named pages ignores `page:` and prints A4 landscape exactly as before,
   which is worse but not broken. */
@page { size: A4 landscape; margin: 8mm; }
@page journeyboard { size: 297mm 133mm; margin: 4mm; }

@media print {
  html, body { background: #ffffff; margin: 0; padding: 0; }
  /* The sheet built for the paper. Hidden until the button is pressed — see
     journeyPrintSheetHtml() for why the paper gets its own copy at all. */
  .tj-print-sheet.tj-poster-print {
    display: block;
    page: journeyboard;
  }
  .tj-canvas {
    width: 100%;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .tj-canvas * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* ── NO GLOW ON PAPER ────────────────────────────────────────────────
     This is what "the pdf … is unclear" actually was, and it is not a
     matter of size at all.

     The board is lit: the panel titles, the fixed words and the frame all
     carry a BLURRED shadow in their own colour, which on a screen reads as
     neon. A PDF rasteriser does not have a screen's blending — it resolves a
     large-radius shadow into a filled rectangle of that colour. So
     "ME - The Person" printed as a solid yellow block, "MY MOVES" as a solid
     green one, "indecisive" and "fear" as yellow rectangles with nothing in
     them, and the canvas frame's inner glow as a grey slab lying across the
     middle panel. The text was there the whole time, the same colour as the
     brick that was drawn on top of it.

     BLUR IS THE THING THAT BREAKS. Every shadow with a blur radius goes;
     every hard-edged one stays, because a zero-blur shadow is a rectangle to
     begin with and rasterises as one. What is left is the same board in flat
     colour — the panels and boxes keep their identity from their BORDERS,
     which printed correctly all along — and flat colour is what a document
     wants anyway. */
  .tj-stage, .tj-stage *,
  .tj-canvas, .tj-canvas *,
  .tj-footer, .tj-footer * { text-shadow: none !important; }

  /* The frame keeps its hard inner ring and loses the glow around it. */
  .tj-canvas::after {
    box-shadow: inset 0 0 0 0.12cqw rgba(64, 170, 245, 0.9) !important;
  }
  /* Panels and boxes are drawn by their borders on paper. */
  .tj-panel, .tj-panel--world, .tj-panel--me, .tj-panel--moves,
  .tj-box, .tj-box--world, .tj-box--me, .tj-box--moves,
  .tj-anchor-slot { box-shadow: none !important; }
  /* A drop-shadow is a blur too, and a mark does not need a halo on white. */
  .tj-logo, .tj-logo--institution { filter: none !important; }
  /* Nothing on a document is mid-class, so neither mark belongs on it. */
  .tj-box.is-open, .tj-anchor-slot.is-open,
  .tj-box.is-working, .tj-anchor-slot.is-working {
    animation: none !important;
    outline: none !important;
  }
  /* Nothing STAGED reaches the paper any more — the print sheet is never
     staged — but the rules stay, because a staged canvas rendered anywhere
     else would otherwise print its footer across the middle of the board. */
  .tj-stage { aspect-ratio: auto; background: none; overflow: visible; }
  .tj-stage > .tj-canvas {
    position: static; left: auto; top: auto;
    width: 100%; height: auto; aspect-ratio: 2.31 / 1;
  }
  .tj-stage > .tj-footer { position: static; }
}


/* ═══ m431 · "…and the rest of what the room said" ═══════════════════════════
   A board keeps one word per box. The control below it is the way back to the
   other thirty-nine — on the institution's record and the learner's own copy,
   and nowhere else. It is drawn only where `more` was handed in, so the print
   rules below need say nothing about it; @media print hides it anyway, because
   a reader who prints the PAGE rather than pressing Download PDF should get
   the same paper. */
.tj-box-more {
  font: inherit;
  font-size: 0.62cqw;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 0.25cqw;
  padding: 0.12cqw 0.5cqw;
  cursor: pointer;
  color: currentColor;
  background: transparent;
  border: 0.08cqw solid currentColor;
  border-radius: 999px;
  opacity: 0.75;
  align-self: flex-start;
}
.tj-box-more:hover, .tj-box-more:focus-visible { opacity: 1; }
.tj-anchor-slot .tj-box-more { font-size: 0.55cqw; margin-top: 0.2cqw; }

/* THE PANEL ITSELF IS NOT PART OF THE BOARD, and so is not in this file:
   every length here is cqw, because the poster has to be the same on a 4K room
   screen, a phone and an A4 page. A dialog is page furniture and is sized in
   rem like the rest of the page, so .tj-more-* lives in platform.css beside
   the two screens that mount it. */

@media print {
  .tj-box-more { display: none !important; }
}