/* A figure inside a TutorBot reply (figure.js). Shared by Marcel's page and the parent portal:
   web/parent/figure.css is a byte-for-byte copy (a test holds them equal). Brand tokens only
   (web/brand/tokens.css): a white tile in the bubble, ink words, one accent for what the reply
   points at, the faint line color for the grid. No motion: a figure arrives with its bubble. */

.fig{
  --fig-bar:#cdc5ea;   /* a bar the reply is not pointing at: the accent's quiet neighbor */
  display:block;margin:10px 0 2px;padding:12px 14px 10px;max-width:560px;
  background:var(--card);border-radius:14px;box-shadow:inset 0 0 0 2px var(--line);
  color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:normal;
}
.fig:first-child{margin-top:4px}
.fig-title{margin:0 0 8px;font-size:15px;line-height:1.3;font-weight:800;letter-spacing:-0.01em}
.fig .fig-svg{display:block;max-width:100%;height:auto;overflow:visible}

.fig text{fill:var(--ink);font-size:13px;font-weight:600}
.fig .fig-tick{fill:var(--mute)}
.fig .fig-unit{fill:var(--mute);font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase}
.fig .fig-ptlabel{font-weight:800}

/* Answer boxes (ask): a name with a small fixed-width box beside it, one per asked bar, lettered dot or
   overlay name, in a row that wraps so it is never wider than the card; then one Send. The boxes take
   16px type so a phone does not zoom; read-only once sent, showing what was typed. */
.fig .fig-ask-letter{fill:var(--acc);font-weight:800}
.fig-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px;min-width:0;max-width:100%}
.fig-ask-item{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:13px;font-weight:800;color:var(--acc)}
.fig-ask-in{flex:0 0 64px;width:64px;box-sizing:border-box;padding:6px 4px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:16px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.fig-ask-in::placeholder{color:var(--mute);font-weight:600}
.fig-ask-in:focus-visible{outline:none;border-color:var(--acc)}
.fig-ask-in[readonly]{background:var(--sand);border-color:transparent;color:var(--ink)}
.fig-ask-send{display:block;margin:10px 0 0 auto;padding:7px 18px;border:0;border-radius:99px;background:var(--acc);color:#fff;font:inherit;font-size:14px;font-weight:800;line-height:1.2;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform 120ms cubic-bezier(0.23,1,0.32,1),opacity 120ms ease}
.fig-ask-send:active{transform:scale(0.97)}
.fig-ask-send:disabled{opacity:.6;cursor:default}
.fig .fig-axis{stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.fig .fig-tickmark{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.fig .fig-grid{stroke:var(--line);stroke-width:1.5}
.fig .fig-guide{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 5}

.fig .fig-bar{fill:var(--fig-bar)}
.fig .fig-part{fill:var(--track)}
.fig .fig-dot{fill:var(--mute);stroke:var(--card);stroke-width:2}
.fig .fig-pt{fill:var(--acc);stroke:var(--card);stroke-width:2}
.fig .fig-bar.is-hi,.fig .fig-part.is-on,.fig .fig-dot.is-hi{fill:var(--acc)}

.fig-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.35}
.fig-table th{padding:4px 12px 6px 0;text-align:left;font-size:13px;font-weight:800;color:var(--mute);border-bottom:2px solid var(--line)}
.fig-table td{padding:7px 12px 7px 0;font-weight:600;border-bottom:2px solid var(--line)}
.fig-table tr:last-child td{border-bottom:0}
.fig-table th:last-child,.fig-table td:last-child{padding-right:0}
.fig-table .num{text-align:right}

/* A picture card: the catalog picture at the bubble's width, a light border, rounded like the other
   figures, its caption under it. Hidden until it has loaded; a missing picture leaves the caption. */
.fig [hidden]{display:none !important}
.fig.fig-card{max-width:none;padding:0;background:none;box-shadow:none}
.fig-card-img img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 2px var(--line);background:var(--card)}
.fig-cap{margin:8px 2px 0;font-size:14px;line-height:1.35;font-weight:600;color:var(--mute)}
.fig-card-img[hidden] + .fig-cap{margin-top:0}

/* A sketch: soft tints from the brand pastels with a thin darker outline, ink lines, arrows in one of
   four colors with a head, words on a thin white halo so they read over a fill. */
.fig .sk-region,.fig .sk-circle{stroke-width:1.5;stroke-linejoin:round}
.fig .sk-fill-blue{fill:var(--sky);stroke:#7fa6d9}
.fig .sk-fill-orange{fill:#ffe2c4;stroke:#e3a368}
.fig .sk-fill-gray{fill:#efecf3;stroke:#aaa3bb}
.fig .sk-fill-green{fill:var(--mint);stroke:#6fbf98}
.fig .sk-fill-yellow{fill:#fff0bf;stroke:#dcb64a}
.fig .sk-fill-none{fill:none;stroke:var(--ink)}
.fig .sk-line{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.fig .sk-line.is-dotted{stroke-dasharray:2 6}
.fig .sk-curve{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.fig .sk-arrow{stroke-width:2.5;stroke-linecap:round}
.fig .sk-arrow.sk-c-accent{stroke:var(--acc)}
.fig .sk-arrow.sk-c-red{stroke:var(--bad)}
.fig .sk-arrow.sk-c-blue{stroke:#3b74c4}
.fig .sk-arrow.sk-c-gray{stroke:var(--mute)}
.fig .sk-head{stroke:none}
.fig .sk-head.sk-c-accent{fill:var(--acc)}
.fig .sk-head.sk-c-red{fill:var(--bad)}
.fig .sk-head.sk-c-blue{fill:#3b74c4}
.fig .sk-head.sk-c-gray{fill:var(--mute)}
.fig .sk-head.sk-c-ink{fill:var(--ink)}
.fig .sk-label{font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}

/* An overlay: Marcel's own picture again, the marks over it in the accent. 2px strokes, unfilled
   circles and boxes, a light accent tint for a shaded area, words on a white halo, numbered badges. */
.fig.fig-overlay{max-width:none}
.fig-ov{position:relative;line-height:0}
/* The window shows the picture, or only its crop: the stage (picture, marks, words, all in full-picture
   fractions) is scaled and shifted inside it by figure.js. */
.fig-ov-window{position:relative;overflow:hidden;border-radius:10px;aspect-ratio:4/3}
.fig-ov-stage{position:absolute;left:0;top:0;width:100%}
.fig-ov-stage img{display:block;width:100%;height:auto}
.fig-ov .fig-ov-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fig .ov-arrow,.fig .ov-circle,.fig .ov-box{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fig .ov-head,.fig .ov-dot{fill:var(--acc)}
.fig .ov-shade{fill:var(--acc);fill-opacity:.18;stroke:none}
/* A label's leader: a thin accent line from its badge to the exact point, and a small dot at the point. */
.fig .ov-leader{stroke:var(--acc);stroke-width:1.5;stroke-linecap:round}
.fig .ov-pt{fill:var(--acc);stroke:#fff;stroke-width:1}
/* No words on the picture: a label is a small numbered badge at its point (accent, white number, white
   halo), and its words sit in the legend under the picture, one line per badge. */
.fig-ov-pin,.fig-ov-badge{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--acc);color:#fff;font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px #fff,0 1px 3px rgba(35,25,66,.35)}
.fig-ov-pin{position:absolute;transform:translate(-50%,-50%);pointer-events:none}
.fig-ov-legend{margin:8px 2px 0;display:grid;gap:4px}
.fig-ov-key{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;line-height:1.3;font-weight:700;color:var(--ink)}
.fig-ov-key .fig-ov-badge{flex:none;box-shadow:none}