/* MLSH showroom pages — built on ITS UI Kit tokens (uikit/css/tokens.css). BEM, no inline styles. */

.mlsh-muted { color: var(--text-muted); }

/* ── Header language switch ────────────────────────────────────── */
.mlsh-lang { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
.mlsh-lang__item { padding: 0 var(--s-2); height: var(--control-h); font-family: var(--font-nav); font-size: var(--fs-12); color: var(--text-muted); background: transparent; border: 0; cursor: pointer; }
.mlsh-lang__item:hover { color: var(--text); }
.mlsh-lang__item.is-active { background: var(--accent-strong); color: var(--accent-strong-contrast); }

/* ── Home: hero + card grid ────────────────────────────────────── */
.mlsh-hero { max-width: 760px; margin: var(--s-6) auto var(--s-10); text-align: center; }
.mlsh-hero__kicker { font-family: var(--font-nav); font-size: var(--fs-12); letter-spacing: .12em; text-transform: uppercase; color: var(--decorative); margin: 0 0 var(--s-3); }
.mlsh-hero__title { margin: 0 0 var(--s-4); }
.mlsh-hero__lead { font-size: var(--fs-20); font-weight: var(--fw-light); line-height: 1.4; margin: 0 0 var(--s-4); }
.mlsh-hero__hint { font-size: var(--fs-14); color: var(--text-muted); margin: 0; }

.mlsh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-4); max-width: 1200px; margin: 0 auto; }
.mlsh-card { text-decoration: none; color: inherit; padding: 0; overflow: hidden; transition: border-color var(--motion-base); }
.mlsh-card:hover { border-color: var(--accent); }
.mlsh-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mlsh-card__preview { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
.mlsh-card > .its-card__title { padding: var(--s-4) var(--s-4) 0; font-size: var(--fs-20); }
.mlsh-card__subtitle { padding: 0 var(--s-4); color: var(--text-muted); font-size: var(--fs-13); }
.mlsh-card__text { padding: 0 var(--s-4); margin: var(--s-2) 0 0; font-size: var(--fs-14); line-height: 1.5; flex: 1; }
.mlsh-card__cta { padding: var(--s-3) var(--s-4) var(--s-4); font-family: var(--font-nav); font-size: var(--fs-13); color: var(--accent); }

/* ── Project page ──────────────────────────────────────────────── */
.mlsh-page-head { max-width: 900px; margin: var(--s-2) 0 var(--s-8); }
.mlsh-page-head__subtitle { font-size: var(--fs-20); font-weight: var(--fw-light); color: var(--text-muted); margin: 0 0 var(--s-2); }
.mlsh-page-head__text { margin: 0; line-height: 1.5; }
.mlsh-section { margin: 0 0 var(--s-10); }
.mlsh-section > .its-h2 { margin-bottom: var(--s-2); }
.mlsh-subhead { margin: var(--s-6) 0 var(--s-3); color: var(--text-muted); }

/* Presets + upload tiles */
.mlsh-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 220px)); gap: var(--s-3); margin: var(--s-4) 0; }
.mlsh-tile { margin: 0; }
.mlsh-tile__button { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; padding: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; cursor: pointer; transition: border-color var(--motion-fast); }
.mlsh-tile__button:hover { border-color: var(--accent); }
.mlsh-tile__button:focus-visible, .mlsh-tile__upload:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.mlsh-tile__img { width: 100%; height: 100%; object-fit: cover; }
.mlsh-tile__upload { flex-direction: column; gap: var(--s-1); border-style: dashed; color: var(--text-muted); font-size: var(--fs-14); }
.mlsh-tile__icon { font-size: var(--fs-24); color: var(--accent); }
.mlsh-tile__meta { font-family: var(--font-nav); font-size: var(--fs-12); }
.mlsh-tile__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Result area */
.mlsh-result { position: relative; min-height: 160px; border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--s-4); }
.mlsh-result__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: 120px; color: var(--text-muted); }
.mlsh-result__empty-icon { font-size: var(--fs-32); }
.mlsh-result__loading { display: none; align-items: center; gap: var(--s-2); color: var(--text-muted); }
.mlsh-result.htmx-request .mlsh-result__empty { display: none; }
.mlsh-result.htmx-request .mlsh-result__loading { display: flex; }

.mlsh-run { display: grid; gap: var(--s-4); }
.mlsh-run__status { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.mlsh-run__timings { display: flex; gap: var(--s-5); flex-wrap: wrap; font-family: var(--font-nav); font-size: var(--fs-13); color: var(--text-muted); }
.mlsh-run__timings strong { color: var(--text); font-weight: var(--fw-semibold); }
.mlsh-run__panes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 800px) { .mlsh-run__panes { grid-template-columns: 1fr; } }
.mlsh-run__pane { display: grid; gap: var(--s-2); }
.mlsh-run__label { font-family: var(--font-nav); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.mlsh-run__image { width: 100%; max-height: 520px; object-fit: contain; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-control); }
.mlsh-run__actions { display: flex; gap: var(--s-2); }

.mlsh-carousel { display: grid; gap: var(--s-2); }
.mlsh-carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--s-3); font-family: var(--font-nav); font-size: var(--fs-13); color: var(--text-muted); }

/* Algorithm columns, schema, publications */
.mlsh-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.mlsh-column__list { margin: 0; padding-left: var(--s-5); line-height: 1.7; }
.mlsh-schema { margin: 0; padding: var(--s-4); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; }
.mlsh-schema img { display: block; max-width: 100%; margin: 0 auto; }
.mlsh-pub { margin-top: var(--s-4); }
.mlsh-pub__authors { margin: 0; font-size: var(--fs-14); }
.mlsh-pub__author--first { color: var(--accent); }
.mlsh-pub__author { color: var(--text-muted); }
.mlsh-pub__venue, .mlsh-pub__doi { margin: 0; font-size: var(--fs-13); color: var(--text-muted); }
.mlsh-pub__actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }