/* Kerning Lab: Layout und Komponenten. Farben, Schrift und Maße kommen aus tokens.css. */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

[hidden] { display: none !important; }

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  height: 100dvh;
  font-family: var(--font-family-sans);
  font-weight: var(--fw-normal);
  font-size: var(--base-font-size);
  color: var(--text-color);
  background: var(--background-color);
}

button, input, select { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
  outline: var(--border-width) solid var(--interaction-color);
  outline-offset: 2px;
}

kbd {
  font-family: inherit;
  font-size: 0.75em;
  font-weight: var(--fw-medium);
  padding: 0.1em 0.45em;
  border: var(--border-width-hairline) solid var(--border-color);
  border-bottom-width: var(--border-width);
  border-radius: var(--radius-xs);
  color: var(--text-muted-color);
}

/* --- Kopfzeile und Steuerleiste ------------------------------------------ */

.topbar,
.controls {
  display: grid;
  gap: var(--size-xs);
  padding: var(--size-s) var(--size-m);
  background: var(--surface-color);
}

.topbar { padding-block: var(--size-s); }

/* Untere Leiste als Drawer */
.controls {
  position: relative;
  padding: 0 var(--size-m);
}

.drawer-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s var(--ease-emphasized);
}

.drawer-inner {
  display: grid;
  gap: var(--size-s);
  min-height: 0;
  overflow: hidden;
  padding: var(--size-m) 0 var(--size-m);
}

.controls.is-collapsed .drawer-body { grid-template-rows: 0fr; }
.controls.is-collapsed .drawer-inner { padding-block: 0; }
.drawer-inner { transition: padding 0.35s var(--ease-emphasized); }

.drawer-handle {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -100%;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 1.25rem;
  padding: 0;
  border: var(--border-width-hairline) solid var(--border-color);
  border-bottom: 0;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  background: var(--surface-color);
  color: var(--text-muted-color);
  cursor: pointer;
  z-index: 1;
}

.drawer-handle:hover { color: var(--interaction-color); }

.drawer-handle svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 0.35s var(--ease-emphasized);
}

.controls.is-collapsed .drawer-handle svg { rotate: 180deg; }
.controls.is-instant,
.controls.is-instant * { transition: none !important; }

.topbar { border-bottom: var(--border-width-hairline) solid var(--border-color); }
.controls { border-top: var(--border-width-hairline) solid var(--border-color); }

.topbar-row,
.controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--size-xs) var(--size-m);
}

.controls-row { justify-content: space-between; }

.brand {
  margin: 0;
  font-size: var(--size-l);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  color: var(--interaction-color);
}

.menu-button { margin-left: auto; }
.menu-button svg { width: 1.5rem; height: 1.5rem; }

/* Hamburger-Menü als Popover, oben rechts unter dem Knopf */
.menu {
  position: fixed;
  inset: auto;
  top: 3.6rem;
  right: var(--size-m);
  margin: 0;
  min-width: 17rem;
  padding: var(--size-xxs);
  border: var(--border-width-hairline) solid var(--border-color);
  border-radius: var(--radius-s);
  background: var(--background-color);
  color: var(--text-color);
  box-shadow: var(--box-shadow);
}

.menu hr {
  margin: var(--size-xxs) 0;
  border: 0;
  border-top: var(--border-width-hairline) solid var(--border-color);
}

.menu-item,
.menu-language {
  display: flex;
  align-items: center;
  gap: var(--size-xs);
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--size-xs);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover { background: var(--surface-color); color: var(--interaction-color); }
.menu-item span,
.menu-language span { flex: 1; }
.menu-language { cursor: default; }
.language-list { display: flex; gap: 2px; }

.language-option {
  min-width: 2.1rem;
  height: 2rem;
  padding: 0 0.35rem;
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  font-weight: var(--fw-medium);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--text-muted-color);
  cursor: pointer;
}

.language-option:hover { color: var(--interaction-color); border-color: var(--border-color); }

.language-option[aria-checked="true"] {
  background: var(--interaction-color);
  color: var(--color-white);
}

.menu svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field {
  display: inline-flex;
  flex-direction: column-reverse;   /* Beschriftung steht im HTML vorn, erscheint aber unter dem Feld */
  gap: 3px;
}

.field-label {
  padding-left: 2px;
  font-size: 0.8rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  color: var(--text-muted-color);
}

.field-controls {
  display: flex;
  gap: var(--size-xxs);
}

/* Schalter auf Höhe der Felder, nicht der Beschriftungen darunter */
.setup-row .toggle,
.setup-row .hint { min-height: 2.25rem; }

/* Bold gehört zur Schrift: eng dran, dafür deutlich Abstand zum Textfeld */
.font-group {
  display: flex;
  align-items: flex-start;
  gap: var(--size-xs);
  margin-right: var(--size-m);
}

.setup-row {
  justify-content: flex-start;
  padding-bottom: var(--size-s);
  border-bottom: var(--border-width-hairline) solid var(--border-color);
}

select,
input[type="text"],
input[type="number"] {
  height: 2.25rem;
  padding: 0 var(--size-xs);
  border: var(--border-width-hairline) solid var(--border-color);
  border-radius: var(--radius-xs);
  background: var(--background-color);
}

select:hover,
input[type="text"]:hover,
input[type="number"]:hover { border-color: var(--text-muted-color); }

.text-field input { width: 14rem; font-size: 1.1rem; font-weight: var(--fw-medium); }

input[type="number"] {
  width: 5.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
  font-size: 1.1rem;
}

input[type="checkbox"],
input[type="range"] { accent-color: var(--interaction-color); }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--size-xxs);
  cursor: pointer;
  user-select: none;
}

.toggle:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.toggle input { width: 1.1rem; height: 1.1rem; margin: 0; }

.hint {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--fw-light);
  color: var(--text-muted-color);
}

#examples { width: auto; color: var(--text-muted-color); }

.icon-button,
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--size-xxs);
  height: 2.25rem;
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-xs);
  background: transparent;
  cursor: pointer;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}

.icon-button { width: 2.25rem; padding: 0; }
.text-button { padding: 0 var(--size-xs); font-weight: var(--fw-medium); }

.icon-button:hover,
.text-button:hover { border-color: var(--border-color); background: var(--background-color); }

.icon-button:disabled,
.text-button:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; border-color: transparent; }

.icon-button svg,
.text-button svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-group { display: flex; align-items: center; gap: var(--size-xxs); flex-wrap: wrap; }

.pair-control {
  display: flex;
  align-items: center;
  gap: var(--size-xxs);
  min-height: 2.5rem;
}

.pair-label {
  min-width: 5.5rem;
  margin-right: var(--size-xs);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
}

.pair-label.is-empty {
  min-width: 0;
  font-size: 1rem;
  font-weight: var(--fw-light);
  color: var(--text-muted-color);
}

.pair-label b { color: var(--interaction-color); font-weight: var(--fw-bold); }

.font-value {
  margin-left: var(--size-s);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--font-layer-color);
}

.overlays {
  min-height: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size-xs) var(--size-s);
  margin: 0;
  padding: 0;
  border: 0;
}

.size-field input { width: 8rem; }


/* Steuerung des aktiven Paars: liegt auf der Bühnenfläche, immer sichtbar */
.stage-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-xs) var(--size-m);
  padding: var(--size-xs) var(--size-m) var(--size-m);
  background: var(--stage-color);
}

/* --- Bühne ------------------------------------------------------------- */

.stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--size-l) var(--size-xl);
  background: var(--stage-color);
  overflow: hidden;
}

.stage:fullscreen { padding: 4vmin 6vmin; }

#stage-svg {
  display: block;
  overflow: visible;
  touch-action: none;
  user-select: none;
}

.stage-message {
  position: absolute;
  margin: 0;
  color: var(--text-muted-color);
}

.glyph path { fill: var(--glyph-color); }
.glyph .hit { fill: transparent; }
.glyph.pair { cursor: ew-resize; outline: none; }
.glyph.pair:hover path { fill: color-mix(in oklab, var(--glyph-color) 75%, var(--interaction-color)); }
.glyph.is-active path { fill: var(--glyph-color); }

.mark { stroke: var(--interaction-color); stroke-linecap: round; }
.mark.is-other { opacity: 0.35; }

.ghost { fill: var(--font-layer-color); opacity: 0.35; }

.guide { stroke: var(--decoration-color); stroke-width: 1px; opacity: 0.45; }
.guide.is-baseline { stroke-width: 2px; opacity: 1; }
.guide-label { fill: var(--text-muted-color); font-family: var(--font-family-sans); font-weight: var(--fw-medium); opacity: 0.6; }
.guide-label.is-baseline { opacity: 1; }

.box { fill: none; stroke: var(--decoration-color); stroke-width: 1px; }
.bearing { fill: var(--decoration-color); opacity: 0.22; }

.value-label {
  fill: var(--interaction-color);
  font-family: var(--font-family-sans);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.delta-label {
  fill: var(--text-muted-color);
  font-family: var(--font-family-sans);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}
.delta-label.is-close { fill: var(--font-layer-color); font-weight: var(--fw-bold); }

/* --- Dialog, Toast, Drop-Zone -------------------------------------------- */

dialog {
  max-width: min(40rem, 92vw);
  max-height: 88vh;
  padding: var(--size-m);
  border: 0;
  border-radius: var(--radius-s);
  box-shadow: var(--box-shadow);
  color: var(--text-color);
  background: var(--background-color);
}

dialog::backdrop { background: rgb(0 0 0 / 50%); }

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--size-s);
}

.dialog-head h2 { margin: 0; font-size: 1.3rem; font-weight: var(--fw-medium); }

/* Hilfe */
.help { width: min(40rem, 92vw); padding: 0; }
.help .dialog-head {
  position: sticky;
  top: 0;
  margin: 0;
  padding: var(--size-m) var(--size-m) var(--size-s);
  background: var(--background-color);
  border-bottom: var(--border-width-hairline) solid var(--border-color);
}
.help-body { padding: var(--size-xs) var(--size-m) var(--size-m); line-height: 1.45; }
.help section + section { margin-top: var(--size-m); }
.help h3 {
  margin: var(--size-s) 0 var(--size-xxs);
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  color: var(--font-layer-color);
}
.help p { margin: 0 0 var(--size-xs); }
.help ol,
.help ul { margin: 0; padding-left: 1.3rem; }
.help li + li { margin-top: var(--size-xxs); }
.help-overlays { list-style: none; padding-left: 0 !important; }
.help-overlays li { position: relative; padding-left: 1.4rem; }
.help-overlays li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.8rem;
  height: 0.6rem;
  border-radius: 2px;
}
.help-overlays .is-guides::before { height: 0; top: 0.7em; border-top: 2px solid var(--decoration-color); }
.help-overlays .is-boxes::before { border: 1px solid var(--decoration-color); background: color-mix(in oklab, var(--decoration-color) 25%, transparent); }
.help-overlays .is-font::before,
.help-overlays .is-compare::before { background: var(--font-layer-color); opacity: 0.5; }
.help-privacy { color: var(--text-muted-color); font-size: 0.92rem; }

.shortcuts { border-collapse: collapse; width: 100%; }
.shortcuts td { padding: var(--size-xxs) var(--size-s) var(--size-xxs) 0; vertical-align: top; }
.shortcuts td:first-child { white-space: nowrap; }
.shortcuts tr + tr td { border-top: var(--border-width-hairline) solid var(--border-color); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 7rem;
  translate: -50% 1rem;
  max-width: min(32rem, 90vw);
  padding: var(--size-xs) var(--size-m);
  border-radius: var(--radius-s);
  background: var(--text-color);
  color: var(--background-color);
  font-weight: var(--fw-medium);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tr-fast), translate var(--tr-fast) var(--ease-emphasized);
}

.toast.is-visible { opacity: 1; translate: -50% 0; }

.drop-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--background-color) 85%, transparent);
  border: 4px dashed var(--interaction-color);
  font-size: var(--size-l);
  font-weight: var(--fw-medium);
  color: var(--interaction-color);
  pointer-events: none;
}

/* --- Kleine Bildschirme -------------------------------------------------- */

@media (max-width: 40rem) {
  .topbar { padding: var(--size-xs) var(--size-s); }
  .controls { padding: 0 var(--size-s); }
  .drawer-inner { padding-block: var(--size-s); }
  .stage { padding: var(--size-s); }
  .stage-bar { padding: var(--size-xs) var(--size-s) var(--size-m); }
  .text-field input { flex: 1; width: auto; }
  .text-field { flex: 1 1 100%; }
  .menu { right: var(--size-s); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}