/* Masheen website: the glossary (T69). Loaded on /glossary and its term pages
   only. Same four materials, same tokens; no colour literals, no hover
   effects. The figures are drawn by App\Support\Figures; this file gives
   their parts a material and their steps a motion. */

/* ---------------------------------------------------------------- figures: materials */
.gf { display: block; width: 100%; height: auto; overflow: visible; --gf-bg: var(--iron-floor); }
.gf .g-f.m-chalk { fill: var(--chalk); }
.gf .g-f.m-steel { fill: var(--steel); }
.gf .g-f.m-steel2 { fill: var(--steel-light); }
.gf .g-f.m-collar { fill: var(--collar); }
.gf .g-f.m-floor { fill: var(--gf-bg); }
.gf .g-f.m-faint { fill: var(--chalk); opacity: .42; }
.gf .g-f.m-band { fill: var(--chalk); opacity: .1; }
.gf .g-f.m-hollow { fill: var(--gf-bg); stroke: var(--chalk-dim); stroke-width: 1.5; }
.gf .g-f.m-ghost { fill: none; stroke: var(--chalk-dim); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gf .g-s { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gf .g-s.s-steel { stroke: var(--steel); }
.gf .g-s.s-steel2 { stroke: var(--steel-light); }
.gf .g-s.s-chalk { stroke: var(--chalk); }
.gf .g-s.s-dim { stroke: var(--chalk-dim); }
.gf .g-s.s-hair { stroke: var(--hairline); }
.gf .g-s.s-floor { stroke: var(--gf-bg); }
.gf .g-hl { stroke: var(--plate-hl); stroke-width: 1; stroke-linecap: round; }
.gf .g-x { font-family: var(--f-body); font-weight: 500; fill: var(--chalk-dim); font-variant-numeric: tabular-nums lining-nums; }
.gf .g-x.g-n { font-family: var(--f-display); font-weight: 700; fill: var(--chalk); letter-spacing: .2px; }
.gf .g-x.g-n11 { font-size: 11.5px; }
.gf .g-x.g-n13 { font-size: 13px; }

/* The live part: chalk at rest; hot only while site.js says this figure is the
   one live element in the viewport (MASHEEN_WORLD §11). */
.gf .g-f.g-now, .gf .g-f.is-now, .gf .is-now > .g-f.m-chalk { fill: var(--chalk); stroke: none; transition: fill 360ms ease, opacity 200ms ease, transform 420ms cubic-bezier(.2, 1.3, .4, 1); }
.gf .g-s.g-now, .gf .g-s.is-now { stroke: var(--chalk); transition: stroke 360ms ease; }
.gf .g-x.g-now, .gf .g-x.is-now { fill: var(--chalk); transition: fill 360ms ease; }
.gf.is-live .g-f.g-now, .gf.is-live .g-f.is-now, .gf.is-live .is-now > .g-f.m-chalk { fill: var(--ember); }
.gf.is-live .g-s.g-now, .gf.is-live .g-s.is-now { stroke: var(--ember); }
.gf.is-live .g-x.g-now, .gf.is-live .g-x.is-now { fill: var(--ember-text); }
/* parts whose turn has not come: an outline (turns), or dim (poses, counts) */
.gf-turns .g-f[data-now]:not(.is-now) { fill: var(--gf-bg); stroke: var(--steel-light); stroke-width: 1.5; }
.gf-turns .g-f[data-now].is-done { fill: var(--chalk); stroke: none; }
.gf-lift .gf-pose:not(.is-now) { opacity: .5; }
.gf-tempo .g-n[data-now]:not(.is-now) { fill: var(--chalk-dim); }

/* steps: a part is in the drawing only in the steps it names */
.gf [data-on] { opacity: 0; transition: opacity 200ms ease, transform 420ms cubic-bezier(.2, 1.3, .4, 1); }
.gf [data-on].is-on { opacity: 1; }
.gf [data-mv], .gf [data-rot] { transition: opacity 200ms ease, transform 420ms cubic-bezier(.2, 1.3, .4, 1); transform-box: view-box; }
.gf [data-rot] { transition: transform 900ms cubic-bezier(.4, 0, .2, 1); }
.gf [data-ms] { transition-timing-function: linear; }
.gf [data-say] { cursor: pointer; }
.gf[data-drag] { touch-action: pan-y; cursor: ew-resize; }
@media (prefers-reduced-motion: reduce) {
  .gf [data-on], .gf [data-mv], .gf [data-rot], .gf .g-now, .gf .is-now { transition: none !important; }
}

/* ---------------------------------------------------------------- the figure at reading size */
.gfig { margin: 0; display: grid; gap: 16px; }
.gfig-stage { padding: clamp(14px, 3vw, 28px); border-radius: var(--r-surface); background: var(--iron-plate); }
.gfig-stage .gf { --gf-bg: var(--iron-plate); max-width: 760px; margin-inline: auto; }
.gfig-cap { display: grid; gap: 6px; max-width: 46em; }
.gfig-step { min-height: 1.5em; font-weight: 600; font-size: 17px; line-height: 1.45; }
.gfig-ex { font-size: 15px; line-height: 1.5; color: var(--chalk-dim); }
.gfig-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gfig-ctl[hidden] { display: none; }
.gfig-play { min-width: 96px; }
.gfig-n { font: 700 20px/1 var(--f-display); color: var(--chalk-dim); letter-spacing: .4px; }
.gfig-n b { color: var(--chalk); font-weight: 700; }
.gfig-range { flex: 1 1 160px; max-width: 320px; height: 44px; margin: 0; background: transparent; accent-color: var(--chalk); }

/* ---------------------------------------------------------------- the hub */
.glossary .hub-head .h1 { font-size: clamp(64px, 17.5vw, 216px); }
.gl-tools { display: grid; gap: 18px; margin-top: clamp(28px, 5vw, 56px); }
.gl-search { display: grid; gap: 10px; }
.gl-field { position: relative; display: flex; align-items: center; gap: 10px; max-width: 760px; }
.gl-glass { position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px; pointer-events: none; }
.gl-glass circle, .gl-glass path { fill: none; stroke: var(--steel-icon); stroke-width: 2.2; stroke-linecap: round; }
.gl-q { flex: 1; min-width: 0; min-height: 64px; padding: 0 18px 0 54px; border: 1px solid var(--hairline); border-radius: var(--r-surface); background: var(--iron-raised); color: var(--chalk); font: 600 20px/1.2 var(--f-body); -webkit-appearance: none; appearance: none; }
.gl-q::placeholder { color: var(--chalk-dim); font-weight: 400; opacity: 1; }
.gl-q:focus { outline: none; border-color: var(--chalk); }
.gl-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.js .gl-go { display: none; }
.gl-count { min-height: 1.5em; font-size: 14px; color: var(--chalk-dim); }
.gl-az { display: flex; gap: 2px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gl-az::-webkit-scrollbar { display: none; }
.gl-l { flex: none; display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: var(--r-button); font: 700 20px/1 var(--f-display); letter-spacing: .4px; text-decoration: none; color: var(--chalk); }
.gl-l.is-off { color: var(--steel-light); }
.gl-l[aria-current="true"] { background: var(--chalk); color: var(--on-chalk); }
.gl-l-all { padding: 0 14px; text-transform: uppercase; }

.gl-bands { margin-top: clamp(20px, 4vw, 40px); }
.gl-band { border-top: 1px solid var(--hairline); padding-block: clamp(36px, 6vw, 80px); scroll-margin-top: 72px; }
.gl-band[hidden], .gl-row[hidden], .gl-none[hidden] { display: none; }
.gl-grid { display: grid; gap: 22px; }
.gl-side { display: grid; gap: 10px; align-content: start; }
.gl-side .h2 { font-size: clamp(34px, 4.6vw, 56px); }
@media (min-width: 1000px) {
  .gl-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 72px; }
  .gl-side { position: sticky; top: 96px; align-self: start; }
}
.gl-rows { border-top: 1px solid var(--hairline); }
.gl-row { border-bottom: 1px solid var(--hairline); scroll-margin-top: 84px; }
.gl-main { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; align-items: center; min-height: 88px; padding: 16px 0; text-decoration: none; }
.gl-text { display: grid; gap: 4px; min-width: 0; }
.gl-name { font: 700 clamp(26px, 3.3vw, 34px)/1.02 var(--f-display); letter-spacing: .4px; text-transform: uppercase; }
.gl-long { font-size: 13px; line-height: 1.35; color: var(--chalk-dim); }
.gl-mean { margin-top: 4px; max-width: 54ch; font-size: 15px; line-height: 1.5; color: var(--chalk-dim); }
.gl-fig { display: block; aspect-ratio: 2 / 1; opacity: 0; transform: translateY(6px); transition: opacity 320ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1); }
.gl-fig.has-fig { opacity: 1; transform: none; }
.no-js .gl-main { grid-template-columns: minmax(0, 1fr); }
.no-js .gl-fig { display: none; }
.gl-row[data-kind="s"] .gl-main { align-items: start; min-height: 0; padding-bottom: 10px; }
.gl-more { max-width: calc(54ch + 126px); padding: 0 126px 18px 0; font-size: 15px; line-height: 1.55; color: var(--chalk); }
.gl-more a { text-underline-offset: 3px; text-decoration-color: var(--steel-light); }
.no-js .gl-more { padding-right: 0; }
@media (min-width: 600px) {
  .gl-main { grid-template-columns: minmax(0, 1fr) 216px; gap: 28px; min-height: 132px; padding: 20px 0; }
  .gl-more { max-width: calc(54ch + 244px); padding-right: 244px; }
  /* a short term: its figure stands beside both its meaning and its extra sentences */
  .js .gl-row[data-kind="s"] { position: relative; min-height: 148px; }
  .js .gl-row[data-kind="s"] .gl-main { grid-template-columns: minmax(0, 1fr); padding-right: 244px; padding-bottom: 8px; }
  .js .gl-row[data-kind="s"] .gl-fig { position: absolute; right: 0; top: 20px; width: 216px; }
}
.gl-row.is-open .gl-main .gl-fig { visibility: hidden; }
.gl-open { padding: 4px 0 28px; }
.gl-peek { display: grid; gap: 22px; }
.gl-peek-text { font-size: 16px; line-height: 1.65; }
.gl-peek-text > * + * { margin-top: 1em; }
.gl-peek .gfig-stage .gf { max-width: 620px; }
.gl-row[data-kind="s"].is-open .gl-more { display: none; }
.gl-none { display: grid; gap: 28px; padding-block: clamp(32px, 6vw, 72px); }
.gl-none .pm-stage { width: 100%; height: auto; }
.gl-none .pm-stage svg { width: 100%; height: auto; overflow: visible; }
.gl-none a { text-underline-offset: 3px; text-decoration-color: var(--steel-light); }
@media (prefers-reduced-motion: reduce) { .gl-fig { transition: none; transform: none; } }

/* ---------------------------------------------------------------- a term's page */
.term-head { padding-top: clamp(12px, 3vw, 32px); padding-bottom: clamp(24px, 4vw, 40px); }
.term-head .overline a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.term-h { margin-top: 0; letter-spacing: 0; overflow-wrap: break-word; }
.term-h-xl { font-size: clamp(112px, 30vw, 300px); line-height: .8; }
.term-h-l { font-size: clamp(64px, 15vw, 190px); line-height: .84; }
.term-h-m { font-size: clamp(48px, 10.5vw, 128px); line-height: .88; }
.term-aka { display: grid; gap: 4px; margin-top: clamp(14px, 2vw, 22px); }
.term-long { font: 700 clamp(22px, 3.4vw, 34px)/1.05 var(--f-display); letter-spacing: .5px; text-transform: uppercase; color: var(--chalk-dim); }
.term-also { font-size: 14px; color: var(--chalk-dim); }
.term-head .answer { margin-top: clamp(18px, 2.6vw, 28px); max-width: 30em; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; }
.term-stage { border-block: 1px solid var(--hairline); padding-block: clamp(20px, 4vw, 44px); }
.term-stage .gfig { max-width: 680px; }
.term-stage .gfig-stage { background: transparent; padding: 0; }
.term-stage .gfig-stage .gf { --gf-bg: var(--iron-floor); max-width: none; }
.term-body { padding-top: clamp(32px, 5vw, 56px); }
.term-app { margin-top: clamp(32px, 5vw, 48px); max-width: 68ch; }
.term-app-text { font: 700 clamp(22px, 3.2vw, 28px)/1.14 var(--f-display); letter-spacing: .3px; }
.term-app-text p + p { margin-top: .5em; }
.term-app-text a { color: inherit; }
.term-sec { max-width: 68ch; margin-top: clamp(40px, 6vw, 64px); padding-top: 28px; border-top: 1px solid var(--hairline); }
.term-sec > h2 { font: 700 clamp(30px, 4.6vw, 40px)/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; }
.term-pairs { margin-top: 14px; border-top: 1px solid var(--hairline); }
.term-pair { display: grid; gap: 4px; min-height: 66px; padding: 16px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.term-pair .gl-mean { color: var(--chalk); max-width: none; }
.term-related { margin-top: 14px; }
.term-related .gl-fig { opacity: 1; transform: none; }
.term-page .tblock { margin-top: clamp(40px, 6vw, 64px); }
/* a marked outline stays an outline (a warm-up set that is the point of the figure) */
.gf .g-f.m-hollow.g-now { fill: var(--gf-bg); stroke: var(--chalk); stroke-width: 2.5; transition: stroke 360ms ease; }
.gf.is-live .g-f.m-hollow.g-now { fill: var(--gf-bg); stroke: var(--ember); }
/* a rest in the turns figure: a pale band, lit while it is the step */
.gf .g-f.m-rest { fill: var(--chalk); opacity: .08; }
.gf-turns .g-f.m-rest[data-now]:not(.is-now) { fill: var(--chalk); stroke: none; }
.gf .g-f.m-rest.is-now { opacity: .32; }

/* a row on a phone: the name runs the full width, the meaning sits beside a figure wide enough to read */
@media (max-width: 599px) {
  .js .gl-main { grid-template-columns: minmax(0, 1fr) 144px; gap: 4px 12px; align-items: start; }
  .js .gl-text { display: contents; }
  .js .gl-name, .js .gl-long { grid-column: 1 / -1; }
  .js .gl-mean { margin-top: 6px; }
  .js .gl-fig { margin-top: 6px; }
  .js .gl-more { max-width: none; padding-right: 0; }
}