/* The Journey of Life — version 4 build. One container, paper plate in every theme (tlm-website/CONTRACT.md). */
.jol {
  position: relative; aspect-ratio: 3 / 2; min-height: 0; overflow: hidden; background: #F7F6F1; container-type: inline-size;
  font-family: Poppins, "Noto Serif Devanagari", system-ui, sans-serif; color: #26313F;
  -webkit-font-smoothing: antialiased; --jol-u: 1px; --jol-lead: 1px;
}
/* the type unit u = plate width / 960, clamped 0.85–1.4 px: in container units where supported (so a printed or reflowed plate
   is a scaled copy of the screen layout), else set in px by the module */
@supports (width: 1cqw) { .jol { --jol-u: clamp(0.85px, 0.1041667cqw, 1.4px); } }
@supports not (aspect-ratio: 3 / 2) { .jol { min-height: 280px; } }   /* the aspect ratio reserves the box; the floor is only for browsers without it */
.jol > canvas, .jol > svg.jol-leaders, .jol > .jol-labels { position: absolute; inset: 0; width: 100%; height: 100%; }
.jol > canvas { display: block; opacity: 0; transition: opacity 300ms cubic-bezier(.2,.7,.2,1); }
.jol[data-live] > canvas { opacity: 1; }
.jol > svg.jol-leaders { pointer-events: none; overflow: visible; }
.jol > .jol-labels { pointer-events: none; }

/* labels: HTML over the canvas, placed by translate3d from projected anchors */
.jol-label {
  position: absolute; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  text-align: left; pointer-events: auto; cursor: default; line-height: 1.2; white-space: nowrap;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1); -webkit-user-select: text; user-select: text;
}
.jol-label.is-small { transform-origin: 50% 50%; }   /* Artha and Kāma are set along their lanes */
button.jol-label { cursor: pointer; }
button.jol-label:focus-visible { outline: 1px dashed #9C7A3C; outline-offset: 3px; }
.jol-label .jol-name { display: block; font-weight: 500; font-size: calc(var(--jol-u) * 15); color: #26313F; transition: color .6s; }
.jol:lang(hi) .jol-label .jol-name { font-size: calc(var(--jol-u) * 16.5); }   /* Devanagari at 15 u reads about 15 % smaller than the Latin names */
.jol-label .jol-gloss { display: block; font-weight: 400; font-size: calc(var(--jol-u) * 11.5); line-height: 1.3; color: #5E6875; white-space: normal; text-wrap: balance; margin-top: calc(var(--jol-u) * 1.5); transition: color .6s; }
.jol-label[data-align="center"] { text-align: center; }
.jol-label[data-align="right"] { text-align: right; }
/* the four Purushārtha words: along their lines, Navy 3 at 12.5 u (REFINE-1 §3) */
.jol-label.is-small .jol-name { font-size: calc(var(--jol-u) * 12.5); font-weight: 400; color: #46607F; line-height: 1; }   /* one word, no descenders: a line box of 1 em still holds the ink (Poppins caps and ascenders reach 0.74 em, the box top 0.85 em), so the box the checks keep off the lines is the word's own */
.jol:lang(hi) .jol-label.is-small .jol-name { font-size: calc(var(--jol-u) * 13.75); line-height: 1.2; }   /* the road words in Devanagari: 12.5 u + 10 % (the :lang(hi) name rule above would otherwise win on specificity and set them at the name size) */
.jol.is-phone .jol-label.is-small .jol-name { font-size: 10.5px; }   /* Moksha stays on phones, at the day tag's size */
.jol-label.is-lit .jol-name { color: #9C7A3C; }
.jol-label.is-dim .jol-name, .jol-label.is-dim .jol-gloss { color: #9AA1AB; }
.jol-label.is-hidden { display: none; }
.jol-ring { display: inline-block; width: .7em; height: .7em; border: 1px solid #C4A05A; border-radius: 50%; position: relative; vertical-align: -.02em; margin-right: .36em; box-sizing: border-box; }
.jol-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: .3em; height: .3em; margin: -.15em 0 0 -.15em; border-radius: 50%; background: #C4A05A; }

/* leaders: Navy 3, 1 px, dash 3/3; Gold deep when lit; the dimmed pre-blend when dimmed */
.jol-leaders path.jol-lead { fill: none; stroke: #46607F; stroke-width: var(--jol-lead); stroke-dasharray: 3 3; transition: stroke .6s; }
.jol-leaders circle.jol-dot { fill: #46607F; transition: fill .6s; }
.jol-leaders .is-lit path.jol-lead { stroke: #9C7A3C; }
.jol-leaders .is-lit circle.jol-dot { fill: #9C7A3C; }
.jol-leaders .is-dim path.jol-lead { stroke: #B9C2C9; }
.jol-leaders .is-dim circle.jol-dot { fill: #B9C2C9; }
.jol-leaders .is-hidden { display: none; }
.jol-leaders circle.jol-circle { fill: none; stroke: #46607F; stroke-width: var(--jol-lead); stroke-dasharray: 3 3; transition: stroke .6s; }
.jol-leaders circle.jol-circle.is-lit { stroke: #9C7A3C; stroke-dasharray: none; }
.jol-leaders circle.jol-circle.is-opened { stroke: #9C7A3C; stroke-dasharray: none; stroke-width: calc(var(--jol-lead) * 1.4); }
.jol-leaders circle.jol-circle.is-dim { stroke: #B9C2C9; }
.jol-leaders path.jol-complead { fill: none; stroke: #46607F; stroke-width: var(--jol-lead); stroke-dasharray: 3 3; }
.jol-leaders path.jol-complead.is-lit { stroke: #9C7A3C; }
.jol-leaders path.jol-complead.is-dim { stroke: #B9C2C9; }
.jol-leaders g.jol-debug rect { fill: none; stroke: #C4A05A; stroke-width: 1; }
.jol-leaders g.jol-debug rect.is-bad { stroke: #B03A2E; stroke-width: 1.5; }
.jol-leaders g.jol-debug circle { fill: none; stroke: #C4A05A; stroke-width: 1; stroke-dasharray: 2 2; }
.jol-leaders g.jol-debug polyline { fill: none; stroke: #B03A2E; stroke-width: .6; opacity: .6; }
.jol-leaders g.jol-debug rect.is-margin { stroke: #46607F; stroke-dasharray: 4 4; opacity: .5; }
.jol-leaders g.jol-debug polyline.is-col { stroke: #46607F; stroke-dasharray: 4 4; opacity: .35; }

/* the gold day tag (days 1–21): under the top row at the left; one small line on phones */
.jol-daytag { position: absolute; left: 0; top: 0; font-weight: 500; font-size: calc(var(--jol-u) * 11.5); line-height: 1.25; color: #9C7A3C; border-bottom: 1px solid #C4A05A; padding-bottom: calc(var(--jol-u) * 2); white-space: normal; text-wrap: balance; pointer-events: auto; transition: opacity .6s; }
.jol.is-phone .jol-daytag { font-size: 10.5px; padding-bottom: 1px; }   /* one line where it fits, else it wraps (the module sets white-space); never clipped */
.jol-daytag.is-hidden { display: none; }

/* the companion: "the circle, amplified" (a Rule-hairline box, Gold 3 fill when the Instrument is opened); a button when interactive */
.jol-companion {
  position: absolute; display: block; box-sizing: border-box; margin: 0; border: 1px solid #D8D4C8; border-radius: 3px; background: transparent;
  padding: calc(var(--jol-u) * 7) calc(var(--jol-u) * 8) calc(var(--jol-u) * 7) calc(var(--jol-u) * 7);
  font: inherit; color: inherit; text-align: left; pointer-events: auto; transition: background-color .6s, border-color .6s, opacity .6s;
}
button.jol-companion { cursor: pointer; }
button.jol-companion:focus-visible { outline: 1px dashed #9C7A3C; outline-offset: 3px; }
.jol-companion .jol-cbody { display: grid; grid-template-columns: 34% 1fr; column-gap: calc(var(--jol-u) * 7); align-items: center; }
.jol-companion.is-opened { background: #F1E6CB; border-color: #C4A05A; }
.jol-companion.is-dim { border-color: #E6E3DA; }   /* dimmed by colour, never opacity (the greyscale check does not depend on what is behind it) */
.jol-companion.is-dim .jol-kicker, .jol-companion.is-dim .jol-crow b, .jol-companion.is-dim .jol-crow span, .jol-companion.is-dim .jol-uses { color: #9AA1AB; }
.jol-companion.is-dim svg g { stroke: #D9C9A6; }
.jol-companion.is-dim svg circle, .jol-companion.is-dim svg path, .jol-companion.is-dim svg ellipse { stroke: #B9C2C9; }
.jol-companion.is-dim svg [stroke="none"] { stroke: none; }
.jol-companion.is-dim svg path[fill="#C9CFD3"] { fill: #E5E6E5; }   /* the figure's hair (its light navy fill), dimmed with the lines: figure round 1, fix stage */
.jol-companion .jol-crow, .jol-companion .jol-crow b, .jol-companion .jol-crow span, .jol-companion .jol-uses, .jol-companion .jol-kicker,
.jol-companion-strip .jol-crow, .jol-companion-strip .jol-crow b, .jol-companion-strip .jol-crow span, .jol-companion-strip .jol-uses, .jol-companion-strip .jol-kicker { -webkit-user-select: text; user-select: text; }
.jol-companion svg { display: block; width: 100%; height: auto; grid-row: 1 / 5; }
.jol-companion .jol-kicker { display: block; font-weight: 500; font-size: calc(var(--jol-u) * 10.5); line-height: 1.2; color: #9C7A3C; margin-bottom: calc(var(--jol-u) * 4); }
.jol-companion .jol-crow { display: block; }
.jol-companion .jol-crow b { display: block; font-weight: 500; font-size: calc(var(--jol-u) * 12.5); line-height: 1.2; color: #26313F; transition: color .6s; }
.jol-companion .jol-crow span { display: block; font-weight: 400; font-size: calc(var(--jol-u) * 11.5); line-height: 1.3; color: #5E6875; margin-top: calc(var(--jol-u) * 0.5); }
.jol-companion .jol-crow.is-lit b { color: #9C7A3C; }
.jol-companion .jol-uses { display: block; font-weight: 400; font-size: calc(var(--jol-u) * 11.5); color: #5E6875; margin: calc(var(--jol-u) * 3) 0; }
.jol-companion.is-hidden { display: none; }
/* the print layout (?print=1, a 640 px plate exported at 3000 px for the PDF kit): the inset's type a step larger, so it reads at a 150 mm column */
.jol.is-print .jol-companion .jol-kicker { font-size: calc(var(--jol-u) * 11); }
.jol.is-print .jol-companion .jol-crow b { font-size: calc(var(--jol-u) * 13); }
.jol.is-print .jol-companion .jol-crow span, .jol.is-print .jol-companion .jol-uses { font-size: calc(var(--jol-u) * 12); }
/* ... and the seated figure's lines a step thinner (figure round 1, fix stage): at about 7 mm tall in the column the screen
   weights (1.4 contour and near arm, 1.0 interior) filled the head and the hand into dark masses. The rays, ring and ground line keep theirs */
.jol.is-print .jol-companion svg g[stroke-linejoin] path[stroke-width="1.4"] { stroke-width: 1; }
.jol.is-print .jol-companion svg g[stroke-linejoin] path[stroke-width="1"] { stroke-width: .7; }

/* phone (< 560 px): the companion becomes a full-width strip under the plate */
.jol-companion-strip {
  box-sizing: border-box; width: 100%; border-top: 1px solid #D8D4C8; border-bottom: 1px solid #D8D4C8; background: #F7F6F1;
  font-family: Poppins, "Noto Serif Devanagari", system-ui, sans-serif; color: #26313F; -webkit-font-smoothing: antialiased;
  padding: 10px 8px 11px; transition: background-color .6s;
}
.jol-companion-strip .jol-cbody { display: grid; grid-template-columns: 26% 1fr; column-gap: 10px; align-items: center; transition: background-color .6s; }
.jol-companion-strip.is-opened .jol-cbody { background: #F1E6CB; margin: 0 -8px -11px; padding: 9px 8px 11px; }   /* the Gold 3 fill marks the companion only, not the legend row above it */
.jol-companion-strip.is-legend.is-opened .jol-cbody { margin-top: -9px; }
.jol-companion-strip svg { display: block; width: 100%; height: auto; grid-row: 1 / 5; }
.jol-companion-strip .jol-kicker { display: block; font-weight: 500; font-size: 10.5px; color: #9C7A3C; margin-bottom: 4px; }
.jol-companion-strip .jol-crow b { display: block; font-weight: 500; font-size: 12.5px; line-height: 1.2; color: #26313F; }
.jol-companion-strip .jol-crow span { display: block; font-weight: 400; font-size: 10.5px; line-height: 1.3; color: #5E6875; }
.jol-companion-strip .jol-crow.is-lit b { color: #9C7A3C; }
.jol-companion-strip .jol-uses { display: block; font-size: 10.5px; color: #5E6875; margin: 3px 0; }
.jol-companion-strip.is-hidden { display: none; }
/* the legend row (the Vehicle and the Path) under the plate on phones, as the Day 6 / Day 15 pages set it: two columns, then the companion */
.jol-companion-strip .jol-legend { display: none; }
.jol-companion-strip.is-legend .jol-legend { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid #D8D4C8; }
.jol-legend-item { display: block; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; line-height: 1.2; -webkit-user-select: text; user-select: text; }
button.jol-legend-item { cursor: pointer; }
button.jol-legend-item:focus-visible { outline: 1px dashed #9C7A3C; outline-offset: 3px; }
.jol-legend-item .jol-name { display: block; font-weight: 500; font-size: 12.75px; color: #26313F; transition: color .6s; }
.jol-legend-item .jol-gloss { display: block; font-weight: 400; font-size: 10.5px; line-height: 1.3; color: #5E6875; margin-top: 1px; transition: color .6s; }
.jol-legend-item.is-lit .jol-name { color: #9C7A3C; }
.jol-legend-item.is-dim .jol-name, .jol-legend-item.is-dim .jol-gloss { color: #9AA1AB; }

@media (prefers-reduced-motion: reduce) {
  .jol > canvas, .jol-label, .jol-label .jol-name, .jol-label .jol-gloss, .jol-leaders *, .jol-daytag, .jol-companion, .jol-companion *, .jol-companion-strip { transition: none !important; }
}
/* the still shim (no WebGL 2, BUILD-CONTRACT §1 "poster + DOM labels"): the label-free poster is the picture and the labels,
   leaders, circle, companion and day tag draw over it, placed by the same projection (legible at any width, in any language) */
.jol.is-still > canvas { display: none; }
/* a lost context (until the browser restores it or the 3 s watchdog rebuilds): the poster alone, so nothing is doubled or
   mis-anchored over a picture the labels were not placed on */
.jol.is-lost > svg.jol-leaders, .jol.is-lost > .jol-labels, .jol.is-lost > .jol-companion, .jol.is-lost > .jol-daytag { opacity: 0 !important; pointer-events: none; transition: none !important; }
/* the first reveal starts from nothing: no label transition until the first frame is presented */
.jol.is-booting .jol-label, .jol.is-booting .jol-leaders *, .jol.is-booting .jol-daytag, .jol.is-booting .jol-companion { transition: none !important; }
/* print (BUILD-CONTRACT §7.11): the labelled print poster (dist/poster-print.png, the 640-plate layout with names at 12.75
   grid units, BRIEF D10) prints alone when the page carries it as a <source media="print">; canvas and overlay are hidden.
   Without one, the label-free poster prints with the DOM labels over it */
.jol > picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.jol img.jol-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.jol[data-live] img.jol-poster { visibility: hidden; }
@media print {
  .jol > canvas, .jol-companion-strip { display: none !important; }
  .jol.has-print-poster > svg.jol-leaders, .jol.has-print-poster > .jol-labels, .jol.has-print-poster > .jol-companion, .jol.has-print-poster > .jol-daytag { display: none !important; }
  .jol img.jol-poster { visibility: visible !important; }
}