/* The Trail (js/trail.js, js/art*.js): a route from an origin through square checkpoints, with
   mono time stamps, ending at the sign-off.
   Colour: routes, labels, origins and empty boxes take the context colour (currentColor); ticked
   boxes take the quiet mark colour (--tr-mark, ink on light surfaces); only the sign-off takes the
   Seal colour (--tr-key). Ticks are knocked out in the background colour (--tr-bg). States differ
   by shape too, so they read in greyscale: origin = solid dot, empty = outline, ticked = solid +
   tick, signed off = solid + tick + two rings, sign-off still to come = outline + outline rings. */
.trail { display: block; overflow: hidden; }

.tr-route { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.tr-route--draw { stroke-dasharray: 1; }
.tr-route--thin { opacity: .45; }
.tr-route--dash { stroke-dasharray: 1 9; }

.tr-node__box { fill: var(--tr-bg, var(--paper)); stroke: currentColor; }
.tr-node--done .tr-node__box { fill: var(--tr-mark, var(--ink)); stroke: var(--tr-mark, var(--ink)); }
.tr-node--key .tr-node__box { fill: var(--tr-key, var(--seal)); stroke: var(--tr-key, var(--seal)); }
.tr-node__ring { fill: none; stroke: var(--tr-key, var(--seal)); }
.tr-node__ring--outer { stroke-opacity: .5; }
.tr-node--due .tr-node__ring { stroke: currentColor; }
.tr-origin { fill: currentColor; stroke: none; }
.tr-tick {
  fill: none;
  stroke: var(--tr-bg, var(--paper));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}
.tr-node__body, .tr-tag, .tr-label { transform-box: fill-box; transform-origin: center; }

.tr-label {
  fill: currentColor;
  stroke: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
}
.tr-dim { opacity: .62; }
.tr-strong { font-weight: 500; }
.tr-tag rect { fill: none; stroke: currentColor; stroke-opacity: .4; }

/* Per context: route colour, mark colours and the background used for ticks and open boxes. */
.principle__art { color: var(--ink); --tr-bg: var(--sheet); --tr-mark: var(--ink); --tr-key: var(--seal); }
.principle__art .tr-label { font-size: 15px; }
.closing__art--routes { color: var(--mist); --tr-bg: var(--ink); --tr-mark: var(--mist); --tr-key: var(--seal-light); }

/* Smaller screens: keep the routes and checkpoints, drop text too small to read. */
@media (max-width: 767px) {
  .principle__art .tr-label, .principle__art .tr-tag, .principle__art .tr-leader { display: none; }
}