/* §22.6xx.658dr.746 — Escalado del chrome por viewport.
 *
 * Las islas de la interfaz están medidas para 1920x1080. En un portátil la
 * fila superior se solapa y los pillos laterales pisan la cabecera y la
 * barra de abajo.
 *
 * Las medidas de partida (medidas en el browser, no estimadas):
 * - Escritorio, con el pincel activo: isla izquierda 294 px, isla central
 *   1037 px (los 6 steppers), isla derecha 304 px. Con 24 px de hueco la
 *   fila necesita 1659 px de viewport.
 * - Táctil: la isla central es más estrecha (521 px), la fila necesita
 *   1119 px de islas, o sea 1143 px de viewport.
 * - El pillo de herramientas mide 468 px de alto y va centrado en el
 *   viewport. La cabecera ocupa 100 px y la barra de abajo 136 px, así que
 *   el pillo cabe cuando H/2 + 234 * escala <= H - 136, o sea a partir de
 *   H >= 272 + 468 * escala.
 *
 * Por qué `transform: scale()` y no `zoom`: `zoom` está soportado desde
 * Firefox 126 pero no es estándar; `transform` funciona en todos. El
 * escalado no cambia el layout (las islas siguen ocupando su ancho), pero
 * como cada una está anclada a su borde (o al centro), al encoger se
 * separan justo lo que hace falta.
 *
 * El canvas NO se toca: la pintura y la matemática del puntero se quedan
 * como están.
 *
 * Cómo se eligen los factores: cada escalón es el mayor que cabe en su
 * tramo, y el tramo empieza en el ancho mínimo donde ese factor deja de
 * solapar. Por eso van con `min-width` y en orden ascendente: el último
 * que coincide es el que manda, y así se lee de arriba abajo como "a
 * partir de X px, el factor es Y". El ancho de cada escalón es el que
 * hace falta para su propio factor, redondeado hacia arriba, para que en
 * el borde del tramo ni un pixel se solape.
 *
 * El primer escalón (el de 0 px) es el suelo: por debajo de 433 px de ancho
 * en escritorio, de 360 px en táctil y de 506 px de alto, la fila ya no cabe
 * ni con el factor más pequeño.
 */

:root {
  /* Escala de las islas de la cabecera. */
  --ui-scale-top: 1;
  /* Cuánto puede conservarse el alto respecto al ancho. 1.15 = la letra
   * conserva un 15% más de alto y solo se estrecha, en vez de encogerse. */
  --ui-scale-top-ratio: 1.15;
  /* Escala de los pillos verticales. */
  --ui-scale-pill: 1;
}

/* Las dos variables derivadas viven en el BODY, y no en :root, a propósito:
 * una custom property se sustituye en el elemento donde se DECLARA, no donde
 * se usa. Como el factor de ancho lo ponen las media queries en el body
 * (`body:not(.touch-mode)` / `body.touch-mode`), si estas se declararan en
 * :root se calcularían con el factor de :root (1) y el alto nunca se
 * encogería.
 *
 * --ui-scale-top-y: escala del alto de las islas del borde superior. Es la
 * MISMA para las tres, para que su borde inferior quede alineado.
 * --ui-aspect-fix: corrección de proporción de los hijos cuadrados (botones,
 * flechas, logo): sin ella la isla los estiraría en vertical. */
body {
  --ui-scale-top-y: min(1, calc(var(--ui-scale-top) * var(--ui-scale-top-ratio)));
  --ui-aspect-fix: max(var(--ui-scale-top), calc(1 / var(--ui-scale-top-ratio)));
}

/* ── HORIZONTAL, escritorio ────────────────────────────────────────────────
 * 1635 px de islas + 24 px de hueco = 1659 px que necesita la fila. */

@media (min-width: 0px) {
  body:not(.touch-mode) { --ui-scale-top: 0.25; }
}
@media (min-width: 433px) {
  body:not(.touch-mode) { --ui-scale-top: 0.25; }
}
@media (min-width: 515px) {
  body:not(.touch-mode) { --ui-scale-top: 0.30; }
}
@media (min-width: 597px) {
  body:not(.touch-mode) { --ui-scale-top: 0.35; }
}
@media (min-width: 678px) {
  body:not(.touch-mode) { --ui-scale-top: 0.40; }
}
@media (min-width: 760px) {
  body:not(.touch-mode) { --ui-scale-top: 0.45; }
}
@media (min-width: 842px) {
  body:not(.touch-mode) { --ui-scale-top: 0.50; }
}
@media (min-width: 924px) {
  body:not(.touch-mode) { --ui-scale-top: 0.55; }
}
@media (min-width: 1005px) {
  body:not(.touch-mode) { --ui-scale-top: 0.60; }
}
@media (min-width: 1087px) {
  body:not(.touch-mode) { --ui-scale-top: 0.65; }
}
@media (min-width: 1169px) {
  body:not(.touch-mode) { --ui-scale-top: 0.70; }
}
@media (min-width: 1251px) {
  body:not(.touch-mode) { --ui-scale-top: 0.75; }
}
@media (min-width: 1332px) {
  body:not(.touch-mode) { --ui-scale-top: 0.80; }
}
@media (min-width: 1414px) {
  body:not(.touch-mode) { --ui-scale-top: 0.85; }
}
@media (min-width: 1496px) {
  body:not(.touch-mode) { --ui-scale-top: 0.90; }
}
@media (min-width: 1578px) {
  body:not(.touch-mode) { --ui-scale-top: 0.95; }
}
@media (min-width: 1659px) {
  body:not(.touch-mode) { --ui-scale-top: 1; }
}

/* ── HORIZONTAL, táctil ───────────────────────────────────────────────────
 * En táctil la isla central es más estrecha, así que la fila necesita
 * mucho menos: 1119 px de islas + 24 px de hueco. */

@media (min-width: 0px) {
  body.touch-mode { --ui-scale-top: 0.30; }
}
@media (min-width: 360px) {
  body.touch-mode { --ui-scale-top: 0.30; }
}
@media (min-width: 416px) {
  body.touch-mode { --ui-scale-top: 0.35; }
}
@media (min-width: 472px) {
  body.touch-mode { --ui-scale-top: 0.40; }
}
@media (min-width: 528px) {
  body.touch-mode { --ui-scale-top: 0.45; }
}
@media (min-width: 584px) {
  body.touch-mode { --ui-scale-top: 0.50; }
}
@media (min-width: 640px) {
  body.touch-mode { --ui-scale-top: 0.55; }
}
@media (min-width: 696px) {
  body.touch-mode { --ui-scale-top: 0.60; }
}
@media (min-width: 752px) {
  body.touch-mode { --ui-scale-top: 0.65; }
}
@media (min-width: 808px) {
  body.touch-mode { --ui-scale-top: 0.70; }
}
@media (min-width: 897px) {
  body.touch-mode { --ui-scale-top: 0.78; }
}
@media (min-width: 987px) {
  body.touch-mode { --ui-scale-top: 0.86; }
}
@media (min-width: 1054px) {
  body.touch-mode { --ui-scale-top: 0.92; }
}
@media (min-width: 1099px) {
  body.touch-mode { --ui-scale-top: 0.96; }
}
@media (min-width: 1143px) {
  body.touch-mode { --ui-scale-top: 1; }
}

/* ── VERTICAL: los pillos laterales ───────────────────────────────────────
 * El pillo está centrado en el viewport (`top: 50%` + `translateY(-50%)`),
 * pero el hueco libre no lo está: va de la cabecera (100 px) a la barra de
 * abajo (136 px). El borde que aprieta es el de abajo, así que la escala
 * cabe a partir de H >= 272 + 468 * escala. */

@media (min-height: 0px) {
  :root { --ui-scale-pill: 0.50; }
}
@media (min-height: 506px) {
  :root { --ui-scale-pill: 0.50; }
}
@media (min-height: 530px) {
  :root { --ui-scale-pill: 0.55; }
}
@media (min-height: 553px) {
  :root { --ui-scale-pill: 0.60; }
}
@media (min-height: 572px) {
  :root { --ui-scale-pill: 0.64; }
}
@media (min-height: 591px) {
  :root { --ui-scale-pill: 0.68; }
}
@media (min-height: 609px) {
  :root { --ui-scale-pill: 0.72; }
}
@media (min-height: 623px) {
  :root { --ui-scale-pill: 0.75; }
}
@media (min-height: 656px) {
  :root { --ui-scale-pill: 0.82; }
}
@media (min-height: 694px) {
  :root { --ui-scale-pill: 0.90; }
}
@media (min-height: 740px) {
  :root { --ui-scale-pill: 1; }
}

/* ── Aplicación ───────────────────────────────────────────────────────────
 * Cada isla se encoge hacia su anclaje: la izquierda hacia la izquierda, la
 * derecha hacia la derecha y la central hacia el centro (de ahí que la
 * central conserve el translateX(-50%) de la utility).
 *
 * El origen del escalado va ARRIBA, no en el centro: si el origen fuera el
 * centro vertical, al encogerse en alto la isla bajaría del borde superior
 * del viewport (4 px a 1366 de ancho, 21 px a 900). Las islas tienen que
 * quedar pegadas al borde superior siempre. Como las tres tienen la misma
 * altura y el mismo factor de alto, sus bordes inferiores siguen alineados.
 *
 * Las tres islas del borde superior escalan en los dos ejes: el ancho es el
 * que aprieta (por el ancho de la fila) y el alto se encoge lo justo para no
 * perder tamaño de lectura. El alto es el mismo factor en las tres, así que
 * su borde inferior queda alineado. Así la letra sale algo más alta y algo
 * más estrecha en vez de diminuta.
 *
 * Como el alto se conserva más que el ancho, lo que tiene que seguir siendo
 * cuadrado (los botones, las flechas de los steppers, el logo) se estira. Por
 * eso los hijos cuadrados llevan la corrección de proporción: con ella se
 * ven igual que si la isla se escalase de forma uniforme, que es lo que
 * quiere el usuario. */

.app-header .tray-island-left {
  transform: scale(var(--ui-scale-top), var(--ui-scale-top-y));
  transform-origin: left top;
}

.app-header .tray-island-right {
  transform: scale(var(--ui-scale-top), var(--ui-scale-top-y));
  transform-origin: right top;
}

.app-header .tray-island-center {
  transform: translateX(-50%) scale(var(--ui-scale-top), var(--ui-scale-top-y));
  transform-origin: center top;
}

/* La property `scale` (y no `transform`) porque compone con el `transform`
 * del `:active` de los botones en vez de pisarlo. */
.app-header .tray-island .btn-wood-icon,
.app-header .tray-island .navbar-stepper-arrow,
.app-header .tray-island .stepper-help-btn,
.app-header .tray-island .tools-btn-trigger,
.app-header .tray-island .logo-mark {
  scale: 1 var(--ui-aspect-fix);
}

.tray-island-vertical {
  transform: translateY(-50%) scale(var(--ui-scale-pill));
}

.hud-toolbar-pill-right {
  transform-origin: right center;
}

.hud-toolbar-pill-left {
  transform-origin: left center;
}