/* ==========================================================================
   FACES - palette and components
   Institutional colours sampled from the live sites:
     #004A6F  Goethe-Universitaet corporate design ("Goethe-Blau")
     #006192  texttechnologylab.org
     #F0B600  texttechnologylab.org accent
     #E5007D  lifbi.de primary
     #4242B1  lifbi.de secondary
     #F6F3EE / #F3EFE9 / #323637 / #262929  Goethe CD warm neutrals
   Rule: blue = project / Goethe+TTLab, magenta = LIfBi, gold = interaction.
   ========================================================================== */

:root {
  --faces-blue:        #004A6F;
  --faces-blue-light:  #006192;
  --faces-blue-pale:   #E3EDF2;
  --faces-gold:        #F0B600;
  --faces-gold-soft:   #FDF3D6;
  --faces-magenta:     #E5007D;
  --faces-magenta-pale:#FBE4F0;
  --faces-violet:      #4242B1;
  --faces-sand:        #F6F3EE;
  --faces-sand-2:      #F3EFE9;
  --faces-ink:         #323637;
  --faces-ink-2:       #262929;
  --faces-line:        rgba(0, 74, 111, .16);
}

/* ---------- Material palette bindings: light ---------- */

[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--faces-blue);
  --md-primary-fg-color--light: var(--faces-blue-light);
  --md-primary-fg-color--dark:  #00374F;
  --md-primary-bg-color:        #FFFFFF;
  --md-primary-bg-color--light: rgba(255, 255, 255, .7);

  --md-accent-fg-color:         var(--faces-blue-light);
  --md-accent-fg-color--transparent: rgba(0, 97, 146, .1);
  --md-accent-bg-color:         #FFFFFF;

  --md-typeset-a-color:         var(--faces-blue-light);
  --md-default-bg-color:        #FCFBF9;
  --md-default-fg-color--light: #5A5F60;

  --faces-surface:  var(--faces-sand);
  --faces-surface-2:#FFFFFF;
  --faces-border:   var(--faces-line);
  --faces-muted:    #5A5F60;
}

/* ---------- Material palette bindings: dark ---------- */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #06293B;
  --md-primary-fg-color--light: var(--faces-blue-light);
  --md-primary-fg-color--dark:  #041C29;
  --md-primary-bg-color:        #FFFFFF;

  --md-accent-fg-color:         var(--faces-gold);
  --md-accent-fg-color--transparent: rgba(240, 182, 0, .12);

  --md-typeset-a-color:         #6FC3E8;
  --md-default-bg-color:        #1B1E1F;
  --md-default-fg-color:        #E4E1DC;

  --faces-surface:  #24282A;
  --faces-surface-2:#1F2223;
  --faces-border:   rgba(255, 255, 255, .12);
  --faces-muted:    #A9A9A4;
  --faces-blue-pale:#123243;
  --faces-gold-soft:#3A2F0B;
  --faces-magenta-pale:#3B1128;
}

/* ---------- Typography ---------- */

.md-typeset h1,
.md-typeset h2 {
  color: var(--md-primary-fg-color);
  font-weight: 600;
  letter-spacing: -.01em;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #EDEAE4;
}

.md-typeset h2 {
  border-bottom: 2px solid var(--faces-gold);
  padding-bottom: .3rem;
  margin-top: 2.2em;
}

.md-typeset h1 { margin-bottom: .6em; }

/* Active nav tab underlined in gold */
.md-tabs__link--active { border-bottom: 2px solid var(--faces-gold); }

/* ---------- Lead paragraph ---------- */

.md-typeset .lead {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--faces-muted);
  max-width: 46em;
}

/* ==========================================================================
   Hero (home page)
   ========================================================================== */

.faces-hero {
  position: relative;
  margin: 0;
  padding: 4.5rem 1.2rem 3.4rem;
  background-image:
    linear-gradient(180deg, rgba(0, 42, 63, .84) 0%, rgba(0, 55, 79, .90) 100%),
    url("../assets/img/faces-scene.png");
  background-size: cover;
  background-position: center 42%;
  color: #FFFFFF;
  text-align: left;
}

.faces-hero__inner {
  max-width: 61rem;
  margin: 0 auto;
}

.faces-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .68rem;
  font-weight: 600;
  color: var(--faces-gold);
  margin: 0 0 .7rem;
}

.faces-hero h1 {
  font-size: 3.1rem;
  line-height: 1.05;
  font-weight: 700;
  margin: 0 0 .2rem;
  color: #FFFFFF;
  letter-spacing: -.02em;
}

.faces-hero__sub {
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 1.1rem;
  color: #EAF2F6;
  max-width: 30em;
}

.faces-hero__text {
  font-size: .95rem;
  line-height: 1.62;
  color: #CFDDE5;
  max-width: 40em;
  margin: 0 0 1.8rem;
}

.faces-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }

.faces-btn {
  display: inline-block;
  padding: .62rem 1.35rem;
  border-radius: 3px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none !important;
  transition: transform .12s ease, background-color .12s ease;
}

.faces-btn--primary { background: var(--faces-gold); color: #2A2000 !important; }
.faces-btn--primary:hover { background: #FFC81F; transform: translateY(-1px); }

.faces-btn--ghost {
  background: transparent;
  color: #FFFFFF !important;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
}
.faces-btn--ghost:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }

@media screen and (max-width: 44.98em) {
  .faces-hero { padding: 3rem 1rem 2.4rem; }
  .faces-hero h1 { font-size: 2.15rem; }
  .faces-hero__sub { font-size: 1.05rem; }
}

/* ==========================================================================
   Fact strip
   ========================================================================== */

.faces-facts {
  background: var(--faces-blue);
  color: #FFFFFF;
  padding: 0;
}

.faces-facts__inner {
  max-width: 61rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.faces-fact {
  padding: 1.15rem 1.2rem;
  border-right: 1px solid rgba(255, 255, 255, .16);
}
.faces-fact:last-child { border-right: 0; }

.faces-fact__value {
  display: block;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.2;
  color: #FFFFFF;
}
.faces-fact__value a { color: #FFFFFF !important; text-decoration: none; border-bottom: 1px solid var(--faces-gold); }
.faces-fact__value a:hover { color: var(--faces-gold) !important; }

.faces-fact__label {
  display: block;
  margin-top: .22rem;
  font-size: .74rem;
  line-height: 1.35;
  color: #B9CEDA;
}

@media screen and (max-width: 59.98em) {
  .faces-facts__inner { grid-template-columns: repeat(2, 1fr); }
  .faces-fact:nth-child(2) { border-right: 0; }
  .faces-fact:nth-child(1), .faces-fact:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.16); }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.faces-section { max-width: 61rem; margin: 0 auto; padding: 2.6rem 1.2rem 0; }

.faces-section__title {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--md-primary-fg-color);
  margin: 0 0 .35rem;
}
[data-md-color-scheme="slate"] .faces-section__title { color: #EDEAE4; }

.faces-section__intro {
  color: var(--faces-muted);
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
  max-width: 44em;
}

.faces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1rem;
}

.faces-card {
  background: var(--faces-surface);
  border: 1px solid var(--faces-border);
  border-top: 3px solid var(--faces-blue);
  border-radius: 3px;
  padding: 1.1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  transition: transform .13s ease, box-shadow .13s ease, border-top-color .13s ease;
}

a.faces-card { text-decoration: none !important; color: inherit !important; }

a.faces-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 74, 111, .13);
  border-top-color: var(--faces-gold);
}

.faces-card h3 {
  margin: .1rem 0 .4rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-primary-fg-color);
  line-height: 1.3;
}
[data-md-color-scheme="slate"] .faces-card h3 { color: #EDEAE4; }

.faces-card p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--faces-muted);
}

.faces-card__more {
  margin-top: .75rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--faces-blue-light);
}
[data-md-color-scheme="slate"] .faces-card__more { color: #6FC3E8; }

/* numbered research-question cards */
.faces-card__num {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--faces-gold);
}

/* ---------- Status chips ---------- */

.faces-chip {
  display: inline-block;
  align-self: flex-start;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .17rem .5rem;
  border-radius: 2px;
  margin-bottom: .5rem;
  white-space: nowrap;
}

.faces-chip--released { background: var(--faces-blue-pale);    color: var(--faces-blue); }
.faces-chip--complete { background: var(--faces-blue-pale);    color: var(--faces-blue); }
.faces-chip--accepted { background: var(--faces-gold-soft);    color: #7A5C00; }
.faces-chip--review   { background: var(--faces-magenta-pale); color: #A1005A; }
.faces-chip--ongoing  { background: var(--faces-magenta-pale); color: #A1005A; }
.faces-chip--planned  { background: rgba(128,128,128,.14);     color: var(--faces-muted); }

[data-md-color-scheme="slate"] .faces-chip--released,
[data-md-color-scheme="slate"] .faces-chip--complete { color: #8FCDE8; }
[data-md-color-scheme="slate"] .faces-chip--accepted { color: #F0C64A; }
[data-md-color-scheme="slate"] .faces-chip--review,
[data-md-color-scheme="slate"] .faces-chip--ongoing  { color: #F58FC0; }

/* inline chips inside prose tables */
.md-typeset .faces-chip { margin-bottom: 0; }

/* ==========================================================================
   Headline stat band
   ========================================================================== */

.faces-band {
  margin-top: 2.8rem;
  background: var(--faces-sand-2);
  border-top: 1px solid var(--faces-border);
  border-bottom: 1px solid var(--faces-border);
  padding: 2.2rem 1.2rem;
}
[data-md-color-scheme="slate"] .faces-band { background: #202425; }

.faces-band__inner { max-width: 61rem; margin: 0 auto; }

.faces-band__number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--faces-blue);
  letter-spacing: -.02em;
}
[data-md-color-scheme="slate"] .faces-band__number { color: #6FC3E8; }

.faces-band__text {
  margin: .5rem 0 0;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--faces-muted);
  max-width: 44em;
}

/* ==========================================================================
   Team
   ========================================================================== */

.faces-team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.1rem;
  margin: 1.4rem 0 1rem;
}

.faces-person {
  background: var(--faces-surface);
  border: 1px solid var(--faces-border);
  border-left: 3px solid var(--faces-blue);
  border-radius: 3px;
  padding: 1.1rem 1rem;
  text-align: center;
}

.faces-person.is-lifbi { border-left-color: var(--faces-magenta); }

.faces-person__photo,
.faces-person__mono {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin: 0 auto .7rem;
  display: block;
  object-fit: cover;
}

.faces-person__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #FFFFFF;
  background: var(--faces-blue);
  border: 2px dashed rgba(255, 255, 255, .45);
}
.faces-person.is-lifbi .faces-person__mono { background: var(--faces-magenta); }

.faces-person__name {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--md-default-fg-color);
  margin: 0 0 .18rem;
}

.faces-person__role {
  font-size: .76rem;
  font-weight: 600;
  color: var(--faces-blue-light);
  margin: 0 0 .12rem;
}
.faces-person.is-lifbi .faces-person__role { color: var(--faces-magenta); }
[data-md-color-scheme="slate"] .faces-person__role { color: #6FC3E8; }
[data-md-color-scheme="slate"] .faces-person.is-lifbi .faces-person__role { color: #F58FC0; }

.faces-person__affil {
  font-size: .72rem;
  line-height: 1.4;
  color: var(--faces-muted);
  margin: 0 0 .55rem;
}

.faces-person__links a {
  font-size: .7rem;
  margin: 0 .28rem;
  text-decoration: none;
  white-space: nowrap;
}

/* ==========================================================================
   Logos, funder strip, placeholders
   ========================================================================== */

.faces-funders {
  background: var(--faces-sand-2);
  border-top: 1px solid var(--faces-border);
  padding: 1.8rem 1.2rem;
}
[data-md-color-scheme="slate"] .faces-funders { background: #202425; }

.faces-funders__inner { max-width: 61rem; margin: 0 auto; }

.faces-funders__label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faces-muted);
  margin: 0 0 1rem;
}

.faces-funders__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 2.2rem;
}

.faces-funders__row img {
  max-height: 54px;
  width: auto;
  display: block;
}

/* Institutional logos are dark-on-transparent PNGs; give them a light plate in
   dark mode so they stay legible instead of disappearing into the ground. */
[data-md-color-scheme="slate"] .faces-funders__row img {
  background: #FFFFFF;
  padding: .45rem .6rem;
  border-radius: 3px;
}

/* ==========================================================================
   Data figures - generated by scripts/build_figures.py into includes/figures/
   and pulled into pages with pymdownx.snippets. Every colour is a token, so
   each chart follows the light/dark toggle. Prefix: .ff- (FACES figure).
   ========================================================================== */

:root {
  --ff-motion:   #1F6E99;   /* primary series: motion capture */
  --ff-speech:   #B07F00;   /* secondary series: speech */
  --ff-accent:   #C98F00;   /* the one bar a figure is about; gold = interaction */
  --ff-track:    #E9EEF1;
  --ff-ink:      #323637;
  --ff-muted:    #5A5F60;
  --ff-rule:     rgba(50, 54, 55, .28);
  --ff-grid:     rgba(50, 54, 55, .08);
  /* diverging Likert: warm = disagree, cool = agree, grey = midpoint */
  --ff-lk1: #A63A1B; --ff-lk2: #E5A083; --ff-lk3: #D9D6D0; --ff-lk4: #8DB8D2; --ff-lk5: #1F5F85;
  --ff-lk1-ink: #FFFFFF; --ff-lk2-ink: #3A1A0E; --ff-lk3-ink: #323637; --ff-lk4-ink: #0E2A3B; --ff-lk5-ink: #FFFFFF;
  /* data-model layers */
  --ff-l-session: #004A6F; --ff-l-frame: #1F8A7A; --ff-l-media: #B07F00;
  --ff-l-language: #4242B1; --ff-l-instrument: #5B7F2B; --ff-l-report: #B0005F;
}

[data-md-color-scheme="slate"] {
  --ff-motion:   #5BB0DA;
  --ff-speech:   #F0B600;
  --ff-accent:   #F0B600;
  --ff-track:    #2A3033;
  --ff-ink:      #E4E1DC;
  --ff-muted:    #A9A9A4;
  --ff-rule:     rgba(228, 225, 220, .32);
  --ff-grid:     rgba(228, 225, 220, .08);
  --ff-lk1: #D8643F; --ff-lk2: #8A4A33; --ff-lk3: #4A4E50; --ff-lk4: #2F6B8E; --ff-lk5: #7CC4E8;
  --ff-lk1-ink: #1B1E1F; --ff-lk2-ink: #F6E3DA; --ff-lk3-ink: #E4E1DC; --ff-lk4-ink: #E6F2F8; --ff-lk5-ink: #0B1E29;
  --ff-l-session: #6FC3E8; --ff-l-frame: #4FC2AE; --ff-l-media: #F0B600;
  --ff-l-language: #9C9CF0; --ff-l-instrument: #9BCB6A; --ff-l-report: #F58FC0;
}

/* ---------- shared ---------- */

.ff-scroll { overflow-x: auto; }
.ff-panels, .ff-hbars, .ff-likert, .ff-avatars, .ff-avatars__axis, .ff-scroll { text-align: left; }
.ff-scroll > .ff-svg { min-width: 32rem; }

.ff-svg { display: block; width: 100%; height: auto; font-family: var(--md-text-font-family); }
.ff-svg text { fill: var(--ff-ink); }

.ff-axis, .ff-tick { stroke: var(--ff-rule); stroke-width: 1; }
.ff-grid { stroke: var(--ff-grid); stroke-width: 1; }
.ff-svg .ff-ticklabel { font-size: 10.5px; fill: var(--ff-muted); font-variant-numeric: tabular-nums; }
.ff-svg .ff-axislabel { font-size: 11px; fill: var(--ff-muted); }
.ff-ref { stroke: var(--ff-ink); stroke-width: 1.2; stroke-dasharray: 4 3; }
.ff-svg .ff-reflabel { font-size: 10.5px; font-weight: 600; }
.ff-svg .ff-reflabel--muted { font-weight: 400; fill: var(--ff-muted); }
.ff-break { stroke: var(--ff-rule); stroke-width: 1.2; fill: none; }
.ff-dot { fill: var(--ff-motion); }
.ff-dot--alt { fill: var(--ff-speech); fill-opacity: .9; }
.ff-dot--open { fill: none; stroke: var(--ff-speech); stroke-width: 1.6; }

.ff-swatch {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 2px;
  vertical-align: -.05rem; margin: 0 .3rem 0 .1rem;
}
.ff-swatch--motion { background: var(--ff-motion); }
.ff-swatch--speech { background: var(--ff-speech); margin-left: .8rem; }

/* ---------- multi-panel figure ---------- */

.ff-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 1.6rem;
}
.ff-panel--wide { grid-column: 1 / -1; }
@media screen and (max-width: 44.98em) {
  .ff-panels { grid-template-columns: minmax(0, 1fr); }
}
.md-typeset .ff-panel__title {
  margin: 0 0 .6rem;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--md-default-fg-color);
}
.md-typeset .ff-panel__key {
  margin: .5rem 0 0;
  font-size: .66rem;
  line-height: 1.45;
  color: var(--ff-muted);
}

/* ---------- log-scale bars (records by modality) ---------- */

.ff-logbars__row, .ff-logbars__axis {
  display: grid;
  grid-template-columns: 4.6rem 1fr 3.6rem;
  align-items: center;
  gap: .5rem;
}
.ff-logbars__row { margin-bottom: .32rem; }
.ff-logbars__label { font-size: .68rem; color: var(--ff-muted); text-align: right; }
.ff-logbars__track {
  display: block; height: 1.15rem;
  background: linear-gradient(90deg, var(--ff-grid) 1px, transparent 1px) 0 0 / calc(100% * 2 / 7) 100%;
}
.ff-logbars__fill {
  display: block; flex: none; height: 100%;
  border-radius: 0 2px 2px 0; background: var(--ff-motion);
}
.ff-logbars--speech .ff-logbars__fill { background: var(--ff-speech); }
.ff-logbars__value {
  text-align: right; font-size: .64rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ff-ink);
}
.ff-logbars__ticks { position: relative; height: 1rem; border-top: 1px solid var(--ff-rule); }
.ff-logbars__ticks > span {
  position: absolute; top: .15rem; transform: translateX(-50%);
  font-size: .62rem; color: var(--ff-muted); line-height: 1;
}
.ff-logbars__ticks > span:first-child { transform: none; }

/* ---------- horizontal bars (answer format) ---------- */

.ff-hbars__row, .ff-hbars__axis {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr 3.6rem;
  align-items: center;
  gap: .8rem;
}
.ff-hbars__row { margin-bottom: .55rem; }
.ff-hbars__label { font-size: .74rem; line-height: 1.3; color: var(--ff-muted); text-align: right; }
.ff-hbars__label b { display: block; color: var(--md-default-fg-color); font-weight: 600; }
.ff-hbars__track {
  display: block; height: 1.5rem;
  background: linear-gradient(90deg, var(--ff-grid) 1px, transparent 1px) 0 0 / 25% 100%;
}
.ff-hbars__fill { display: block; height: 100%; background: var(--ff-motion); border-radius: 0 2px 2px 0; }
.ff-hbars__row--accent .ff-hbars__fill { background: var(--ff-accent); }
.ff-hbars__value {
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  text-align: right; color: var(--md-default-fg-color);
}
.ff-hbars__ticks { position: relative; height: 1.1rem; border-top: 1px solid var(--ff-rule); }
.ff-hbars__ticks > span {
  position: absolute; top: .2rem; transform: translateX(-50%);
  font-size: .64rem; color: var(--ff-muted); white-space: nowrap;
}
.ff-hbars__ticks > span:first-child { transform: none; }
.ff-hbars__ticks > span:last-child  { transform: translateX(-100%); }

/* ---------- diverging Likert ---------- */

.ff-likert__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem;
  margin-bottom: 1rem; font-size: .66rem; color: var(--ff-muted);
}
.ff-likert__legend i {
  display: inline-block; width: .75rem; height: .75rem; border-radius: 2px;
  margin-right: .3rem; vertical-align: -.1rem;
}
.ff-likert__row, .ff-likert__axis {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr 4.4rem;
  align-items: center;
  gap: .8rem;
}
.ff-likert__row { margin-bottom: .4rem; }
.ff-likert__label { font-size: .74rem; text-align: right; color: var(--md-default-fg-color); line-height: 1.25; }
.ff-likert__bar {
  display: flex; height: 1.55rem;
  background: linear-gradient(90deg, transparent calc(50% - .5px), var(--ff-rule) calc(50% - .5px),
              var(--ff-rule) calc(50% + .5px), transparent calc(50% + .5px));
}
.ff-likert__bar > span {
  display: flex; flex: none; align-items: center; justify-content: center;
  font-size: .64rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden;
}
.ff-likert__stat { font-size: .64rem; line-height: 1.3; color: var(--ff-muted); font-variant-numeric: tabular-nums; }
.ff-likert__stat b { display: block; color: var(--md-default-fg-color); font-weight: 600; }
.ff-likert__ticks { position: relative; height: 1.1rem; border-top: 1px solid var(--ff-rule); }
.ff-likert__ticks > span {
  position: absolute; top: .2rem; transform: translateX(-50%);
  font-size: .62rem; color: var(--ff-muted); white-space: nowrap;
}
.ff-likert__ticks > span:first-child { transform: none; }
.ff-likert__ticks > span:last-child  { transform: translateX(-100%); }
.ff-likert__legend .ff-lk1, .ff-likert__bar .ff-lk1 { background: var(--ff-lk1); color: var(--ff-lk1-ink); }
.ff-likert__legend .ff-lk2, .ff-likert__bar .ff-lk2 { background: var(--ff-lk2); color: var(--ff-lk2-ink); }
.ff-likert__legend .ff-lk3, .ff-likert__bar .ff-lk3 { background: var(--ff-lk3); color: var(--ff-lk3-ink); }
.ff-likert__legend .ff-lk4, .ff-likert__bar .ff-lk4 { background: var(--ff-lk4); color: var(--ff-lk4-ink); }
.ff-likert__legend .ff-lk5, .ff-likert__bar .ff-lk5 { background: var(--ff-lk5); color: var(--ff-lk5-ink); }

@media screen and (max-width: 44.98em) {
  .ff-hbars__row, .ff-hbars__axis { grid-template-columns: 1fr 3.4rem; }
  .ff-hbars__label { grid-column: 1 / -1; text-align: left; }
  .ff-hbars__axis > span:first-child { display: none; }
  .ff-likert__row, .ff-likert__axis { grid-template-columns: 1fr 3.8rem; gap: .2rem .6rem; }
  .ff-likert__label { grid-column: 1 / -1; text-align: left; }
  .ff-likert__axis > span:first-child { display: none; }
}

/* ---------- headline stats ---------- */

.ff-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 1.6em 0;
  background: var(--faces-border);
  border: 1px solid var(--faces-border);
  border-radius: 3px;
  overflow: hidden;
}
@media screen and (max-width: 44.98em) {
  .ff-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ff-stats__tile { background: var(--faces-surface-2); padding: .8rem .9rem .75rem; }
.ff-stats__value {
  display: block; font-size: 1.15rem; font-weight: 700; line-height: 1.2;
  color: var(--md-default-fg-color); font-variant-numeric: tabular-nums;
}
.ff-stats__tile--key .ff-stats__value { color: var(--faces-blue); }
[data-md-color-scheme="slate"] .ff-stats__tile--key .ff-stats__value { color: #6FC3E8; }
.ff-stats__label { display: block; margin-top: .2rem; font-size: .66rem; line-height: 1.35; color: var(--ff-muted); }

/* ---------- avatar pre-study ---------- */

.ff-avatars {
  display: grid;
  grid-template-columns: 3.4rem minmax(6rem, 7.5rem) repeat(4, minmax(3.6rem, 1fr));
  align-items: center;
  gap: .55rem .8rem;
  min-width: 27rem;
}
.ff-avatars__head {
  font-size: .6rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  text-transform: uppercase; color: var(--ff-muted);
}
.md-typeset .ff-avatars__img {
  display: block; width: 3.4rem; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%;
  border-radius: 2px; background: var(--ff-track);
}
.ff-avatars__name { font-size: .78rem; font-weight: 700; line-height: 1.25; color: var(--md-default-fg-color); }
.ff-avatars__name small { display: block; margin-top: .1rem; font-size: .62rem; font-weight: 400; color: var(--ff-muted); }
.ff-avatars__cell { display: flex; align-items: center; gap: .45rem; }
.ff-avatars__track {
  position: relative; flex: 1; display: block; height: .75rem;
  background: var(--ff-track); border-radius: 1px;
}
.ff-avatars__track::after {        /* the 50th percentile */
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px;
  border-left: 1px solid var(--ff-rule);
}
.ff-avatars__fill { display: block; height: 100%; background: var(--ff-motion); border-radius: 1px; }
.ff-avatars__v {
  flex: none; width: 1.5rem; text-align: right;
  font-size: .68rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.md-typeset .ff-avatars__axis { margin: .8rem 0 0; font-size: .64rem; color: var(--ff-muted); }

/* ---------- data model diagram ---------- */

.ff-dm__band { fill: var(--faces-surface); stroke: var(--faces-border); }
.ff-svg .ff-dm__band-title { font-size: 11px; font-weight: 700; letter-spacing: .09em; }
.ff-svg .ff-dm__band-sub { font-size: 11px; fill: var(--ff-muted); }
.ff-dm__box { fill: var(--faces-surface-2); stroke: var(--ff-rule); }
.ff-svg .ff-dm__layer { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; fill: var(--ff-l); }
.ff-svg .ff-dm__name { font-size: 13.5px; font-weight: 700; }
.ff-svg .ff-dm__count { font-size: 11.5px; fill: var(--ff-muted); font-variant-numeric: tabular-nums; }
.ff-dm__track { fill: var(--ff-track); }
.ff-dm__edge { fill: none; stroke: var(--ff-muted); stroke-width: 1.3; }
.ff-dm__edge--derived { stroke-dasharray: 4 3; }
.ff-dm__head, .ff-dm__joint { fill: var(--ff-muted); }
.ff-svg .ff-dm__note { font-size: 10.5px; font-style: italic; fill: var(--ff-muted); }
.ff-svg .ff-dm__legend-title { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; fill: var(--ff-muted); }
.ff-svg .ff-dm__legend-text { font-size: 11px; }
.ff-svg .ff-dm__legend-muted { fill: var(--ff-muted); }
.ff-dm__mag--key { fill: var(--ff-muted); }
.ff-dm--session    { --ff-l: var(--ff-l-session); }
.ff-dm--frame      { --ff-l: var(--ff-l-frame); }
.ff-dm--media      { --ff-l: var(--ff-l-media); }
.ff-dm--language   { --ff-l: var(--ff-l-language); }
.ff-dm--instrument { --ff-l: var(--ff-l-instrument); }
.ff-dm--report     { --ff-l: var(--ff-l-report); }
.ff-dm__accent, .ff-dm__node .ff-dm__mag { fill: var(--ff-l); }
/* Placeholder treatment - deliberately visible, never broken.
   Delete .logo--placeholder from the markup when the real file lands. */
.logo--placeholder {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: .5rem .9rem;
  border: 1.5px dashed var(--faces-blue-light);
  border-radius: 3px;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 7px,
    rgba(0, 97, 146, .05) 7px, rgba(0, 97, 146, .05) 14px
  );
  color: var(--faces-blue-light);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.3;
}
[data-md-color-scheme="slate"] .logo--placeholder { color: #6FC3E8; border-color: #6FC3E8; }

.logo--placeholder small {
  display: block;
  font-weight: 400;
  font-size: .62rem;
  opacity: .75;
  letter-spacing: 0;
}

/* Inline brand lockup used in page headers */
.faces-brand {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.4rem;
}
.faces-brand img { height: 62px; width: auto; }
.faces-brand .logo--placeholder { min-height: 62px; }

/* Brand marks are typically dark-on-transparent; give them a light plate in
   dark mode so they stay legible instead of blending into the page. */
[data-md-color-scheme="slate"] .faces-brand img {
  background: #FFFFFF;
  padding: .4rem .6rem;
  border-radius: 3px;
}

/* Photo placeholder, for a screenshot that does not exist yet. Same visible,
   never broken treatment as .logo--placeholder, sized like an image instead of
   a logo. Sits inside a <figure markdown> alongside a normal <figcaption> so it
   picks up the figure/figcaption box and caption rules below. */
.img-placeholder {
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border: 1.5px dashed var(--faces-blue-light);
  border-radius: 2px;
  background: repeating-linear-gradient(
    45deg,
    transparent, transparent 7px,
    rgba(0, 97, 146, .05) 7px, rgba(0, 97, 146, .05) 14px
  );
  color: var(--faces-blue-light);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
  padding: 1rem;
}
.img-placeholder small {
  display: block;
  margin-top: .15rem;
  font-weight: 400;
  font-size: .7rem;
  opacity: .75;
}
[data-md-color-scheme="slate"] .img-placeholder { color: #6FC3E8; border-color: #6FC3E8; }

/* ==========================================================================
   Figures
   ========================================================================== */

/* Material makes figures fit-content flex columns, which lets a wide child
   (a diagram, a bar table) stretch the page instead of scrolling in its own
   box. Keep figures at the width of the text column. */
.md-typeset figure {
  display: block;
  width: auto;
  max-width: 100%;
  margin: 1.6em 0;
  background: var(--faces-surface-2);
  border: 1px solid var(--faces-border);
  border-radius: 3px;
  padding: .9rem;
}

.md-typeset figure img { display: block; margin: 0 auto; border-radius: 2px; }

.md-typeset figcaption {
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--faces-border);
  font-size: .76rem;
  line-height: 1.55;
  color: var(--faces-muted);
  text-align: left;
  max-width: none;
}

.md-typeset figcaption strong { color: var(--md-default-fg-color); }

/* ==========================================================================
   Tables
   ========================================================================== */

.md-typeset table:not([class]) { font-size: .76rem; border-radius: 3px; }

.md-typeset table:not([class]) th {
  background: var(--faces-blue);
  color: #FFFFFF;
  font-weight: 600;
}

/* Header-less tables (written with an empty `| | |` header row) get no empty
   header bar. */
.md-typeset table:not([class]) thead:not(:has(th:not(:empty))) { display: none; }

.md-typeset table:not([class]) tr:hover { background: var(--faces-blue-pale); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover { background: #202b31; }

/* ==========================================================================
   Misc
   ========================================================================== */

/* Institution tag used inline in prose */
.faces-tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .1rem .4rem;
  border-radius: 2px;
  vertical-align: .08em;
}
.faces-tag--gu    { background: var(--faces-blue-pale);     color: var(--faces-blue); }
.faces-tag--lifbi { background: var(--faces-magenta-pale);  color: #A1005A; }
[data-md-color-scheme="slate"] .faces-tag--gu    { color: #8FCDE8; }
[data-md-color-scheme="slate"] .faces-tag--lifbi { color: #F58FC0; }

/* Home page: no article padding above the hero */
/* Wide content scrolls inside its own box, never the page body */
.md-typeset .scrollable { overflow-x: auto; }
.md-typeset .scrollable > table { margin: 0; }

/* With markdown enabled on .faces-brand, the logo line is wrapped in a <p>;
   drop its margins so the logo stays centred against the text block. */
.faces-brand > p { margin: 0; }