/* Shared look for the widgets on the one-page Transformers explainer.
   The page already titles and explains each widget, so widgets carry
   no headline: a small label, the picture, the controls, one readout. */

.e5 { font-size: 15px; color: var(--ink); }
.e5-label { font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin: 0 0 8px; }
.e5-hint { font-size: 13px; line-height: 1.5; color: var(--ink3); margin: 10px 0 0; }

/* token chips */
.e5-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.e5-tok { font: 14px var(--mono); min-height: 34px; padding: 5px 11px; border-radius: 6px; }
.e5-tok[aria-pressed="true"], .e5-tok[aria-pressed="true"]:hover { border-color: var(--amber); color: var(--amber); background: color-mix(in srgb, var(--amber) 9%, transparent); font-weight: 650; }
.e5-tok.masked { opacity: .45; text-decoration: line-through; text-decoration-color: var(--ink3); }

/* segmented control */
.e5-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.e5-seg button { border: 0; border-radius: 0; min-height: 34px; padding: 5px 12px; font-size: 13.5px; }
.e5-seg button + button { border-left: 1px solid var(--line); }
.e5-seg button[aria-pressed="true"], .e5-seg button[aria-pressed="true"]:hover { color: var(--amber); background: color-mix(in srgb, var(--amber) 10%, transparent); font-weight: 600; }

.e5-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.e5-slider { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink2); }
.e5-slider input { width: 150px; }
.e5-slider output { font: 13px var(--mono); color: var(--amber); min-width: 3.5em; }
.e5-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink2); cursor: pointer; }
.e5-check input { accent-color: var(--amber); width: 16px; height: 16px; }

/* the one-line worked arithmetic under a widget */
.e5-readout { font: 13px/1.7 var(--mono); color: var(--ink2); background: var(--color-background-secondary); border-radius: 6px; padding: 9px 12px; margin-top: 12px; overflow-x: auto; }
.e5-readout b { color: var(--ink); font-weight: 650; }
.e5-readout .a { color: var(--amber); }
.e5-readout .t { white-space: nowrap; }

/* bars */
.e5-bars { display: grid; grid-template-columns: auto 1fr auto; gap: 5px 10px; align-items: center; }
.e5-bars .w { font: 14px var(--mono); text-align: right; }
.e5-bars .track { height: 16px; border-radius: 4px; background: var(--color-background-secondary); overflow: hidden; }
.e5-bars .fill { height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--amber) 75%, transparent); transition: width .18s; }
.e5-bars .n { font: 13px var(--mono); color: var(--ink2); text-align: right; min-width: 3.6em; }
.e5-bars .off { opacity: .35; }

/* heat-colored number cell: --v in [-1, 1] */
.e5-cell { --v: 0; font: 13px var(--mono); text-align: center; padding: 6px 4px; border-radius: 4px;
  background: color-mix(in srgb, var(--amber) calc(max(var(--v), 0) * 55%), color-mix(in srgb, var(--blue) calc(max(var(--v) * -1, 0) * 55%), transparent)); }

svg text { font-family: var(--sans); }
.e5 svg .lbl { font: 13px var(--mono); fill: var(--ink2); }
.e5 svg .lbl-strong { font: 600 13px var(--mono); fill: var(--amber); }
.e5 svg .axis { stroke: var(--line); stroke-width: 1; }