/* Draw together: the headline over the app's canvas, the plan drawn on it a record at a time with
   each author's hand at their change, and under the canvas the app's track, every column in the
   colour of whoever made it, over the names of the people it belongs to. js/together.js plays it
   and sizes the canvas to the room left.
   The canvas is the page's plate (.plate in css/base.css), the one step up every drawing on the
   page stands on, so it reads as the same object as the studies' and form finding's; nothing else
   here paints a ground. */
.together { --top: clamp(40px, 7.5vh, 84px); --foot: clamp(14px, 3.4vh, 34px); }
.tg-layout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--top) 0 var(--foot); }
.tg-head { flex: none; text-align: center; }
.tg-head .say { margin: clamp(12px, 2.2vh, 22px) auto 0; }
/* Under the words, the board: the canvas, the track and the people under it, sized by
   js/together.js to the room the words leave, and the whole stood in the middle of the stage. */
.tg-board { flex: none; width: 100%; margin-top: clamp(22px, 4.2vh, 44px); display: flex; flex-direction: column; align-items: center; }

/* The canvas takes its ground, hairline and corners from .plate; js/together.js sizes it and sets
   --r. It was the app's model grey with a shadow under it, one step lighter than every other plate
   on the page and the only one lifted off the ground, which made it read as a different object. */
.tg-card { position: relative; flex: none; width: var(--cw, 0px); height: var(--ch, 0px); overflow: hidden; }
.tg-plan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* The drawing in the app's own inks, as its writer wrote them, the set-out grid included. Pens are
   held to the widths the app's screen gives them at any zoom: --mpp is how many millimetres of the
   drawing a pixel of the canvas covers, set by js/together.js. */
.tg-plan path { fill: none; stroke-width: calc(var(--mpp, 20) * 1); }
.tg-plan path.wide { stroke-width: calc(var(--mpp, 20) * 1.7); }
.tg-plan text { font-family: var(--sans); font-weight: 500; }
/* A record's things are on or off; how they arrive and leave is played by js/together.js. A
   dimension too small on the screen to read fades, lines, ticks and figure together, as the app
   fades it (--fade). */
.tg-e, .tg-pills .pill { opacity: 0; }
.tg-e.on, .tg-pills .pill.on { opacity: var(--fade, 1); }
/* The figures wear the page's pill (css/app.css); the unit after a bare reading is the app's, one
   step smaller and read after the digits. */
.tg-unit { font-weight: 500; fill-opacity: 0.75; }
/* While the grid condenses out of its cells, the cells are the grid. */
.tg-plan.celling [data-layer="Grid"] { visibility: hidden; }
.tg-cells { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.tg-cells.on { opacity: 1; }

/* ── somebody else's hand, as the app draws it on the paper (its on-the-paper.css) ── */
.tg-hands { position: absolute; inset: 0; pointer-events: none; }
.tg-hand { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.45s var(--ease); will-change: transform; }
.tg-hand.on { opacity: 1; }
/* The arrow's tip is at (5, 4) in its box, pulled back so the tip is the point, and it leans about
   the tip toward where it is going. Two shadows lift it off the ink it passes over. */
.tg-hand svg {
  display: block; margin: -4px 0 0 -5px; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) drop-shadow(0 5px 7px rgba(0, 0, 0, 0.3));
  transform-origin: 5px 4px; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tg-arrow { fill: var(--tint); stroke: var(--tint); stroke-width: 2.5; stroke-linejoin: round; }
.tg-name {
  position: absolute; left: 13px; top: 19px; padding: 3px 9px 4px; border-radius: 4px 11px 11px 11px;
  background: var(--tint); color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
  font: 600 11.5px/15px var(--sans); letter-spacing: 0.01em; white-space: nowrap;
}
/* A click: two soft discs of the person's colour swelling out from under the tip, a beat apart. */
.tg-ring { position: absolute; left: 0; top: 0; }
.tg-ring > span {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%;
  background: color-mix(in srgb, var(--tint) 35%, transparent); opacity: 0;
  animation: tg-ring 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.tg-ring > span + span { animation-delay: 140ms; }
@keyframes tg-ring { 0% { opacity: 0.6; transform: scale(0.25); } 100% { opacity: 0; transform: scale(1.5); } }

/* ── the journal under the canvas: the app's track, on the page's ground ──
   A column for every record, filled as the app's timeline fills it, in its author's colour; the
   past lit, the rest faint. The track is the history's timeline island's to the pixel (css/
   history.css): 42 px tall, a column the record's share of it less 8, and the columns as far apart
   as the island's (--tw, set by js/together.js), so the two timelines on the page read as one
   thing. Stretched to the canvas's width the columns stood three times as far apart and read as a
   row of dashes. The block is centred under the canvas, whichever way the board is aligned. */
.tg-track, .tg-foot { width: var(--tw, 0px); margin-inline: calc((var(--cw, 0px) - var(--tw, 0px)) / 2); }
.tg-track { position: relative; flex: none; height: 42px; margin-top: clamp(10px, 2vh, 18px); }
.tg-col {
  position: absolute; top: 50%; height: max(2px, calc(var(--h) * (100% - 8px))); border-radius: 2px; transform: translateY(-50%);
  opacity: 0.2; transition: opacity 0.36s var(--ease);
}
.tg-col.past { opacity: 0.75; }

/* Whose columns they are, and what the record on the canvas did, in the app's own words. The one
   who made it is lit; the others wait in the faint ink. */
.tg-foot { flex: none; margin-top: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.tg-who { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 500 13.5px/20px var(--sans); letter-spacing: -0.005em; }
.tg-person { display: inline-flex; align-items: center; gap: 7px; color: var(--snow-faint); transition: color 0.3s var(--ease); }
.tg-person i { width: 8px; height: 8px; border-radius: 50%; opacity: 0.45; transition: opacity 0.3s var(--ease); }
.tg-person.lit { color: var(--snow); }
.tg-person.lit i { opacity: 1; }
.tg-words { min-width: 0; font: 400 13.5px/20px var(--sans); color: var(--snow-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.tg-words.tick { animation: tg-tick 0.32s var(--ease); }
@keyframes tg-tick { from { opacity: 0.2; } to { opacity: 1; } }
/* The last record's words, once the two on the drawing now have taken over: read a moment, then gone. */
.tg-words.gone { opacity: 0; transition: opacity 0.9s var(--ease) 0.4s; }

/* A short, wide window: the words take a column on the left and the canvas stands in the rest of
   the height beside them, where under them it came out a third smaller. */
@media (max-height: 640px) and (min-aspect-ratio: 3/2) {
  .tg-layout { flex-direction: row; gap: clamp(28px, 4vw, 64px); padding-top: clamp(28px, 7vh, 56px); }
  .tg-head { width: min(34%, 440px); text-align: left; }
  .tg-head .say { margin-left: 0; }
  .tg-board { flex: 1 1 0; min-width: 0; margin-top: 0; align-items: flex-end; }
  .tg-track { margin-top: 8px; }
  .tg-foot { margin-top: 2px; }
}
/* A phone: the words go under the names, where beside them they had no room. */
@media (max-width: 760px) {
  .tg-head .say { font-size: 19px; }
  .tg-foot { flex-direction: column; align-items: flex-start; }
  .tg-words { text-align: left; max-width: 100%; }
  .tg-who { gap: 4px 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene.together { height: 100vh; height: 100svh; }
  .tg-hand, .tg-hand svg, .tg-col, .tg-person, .tg-person i { transition: none; }
  .tg-words.tick { animation: none; }
}