.kiosk-button-size-tester-page {
  --kiosk-button-width: 112px;
  --kiosk-button-height: 72px;
  --kiosk-gap-size: 24px;
  --kiosk-finger-size: 52px;
  --kiosk-meter-fill: 100%;
}

.kiosk-button-size-tester-page .tool-workspace {
  grid-template-columns: minmax(18rem, .42fr) minmax(0, 1fr);
}

.kiosk-button-size-tester-page .canvas-bench {
  grid-template-rows: auto minmax(27rem, 1fr) auto;
}

.kiosk-button-size-tester-page .kiosk-stage {
  min-height: 34rem;
  padding: var(--space-3);
}

.kiosk-button-size-tester-page .kiosk-screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(100%, 38rem);
  min-height: 100%;
  border: var(--line) solid var(--tool-object-border);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 38%),
    var(--tool-object-bg);
  box-shadow: var(--tool-object-shadow);
  overflow: hidden;
}

.kiosk-button-size-tester-page .kiosk-screen__bar,
.kiosk-button-size-tester-page .kiosk-screen__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: clamp(1.1rem, 1.7vw, 1.5rem);
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  color: var(--text-muted);
  background: var(--surface-soft);
  font-family: var(--font-plain);
  font-size: var(--step--1);
  font-weight: var(--body-weight);
}

.kiosk-button-size-tester-page .kiosk-target-zone {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: max(.75rem, calc(var(--kiosk-gap-size) * .65));
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-3);
}

.kiosk-button-size-tester-page .kiosk-test-button,
.kiosk-button-size-tester-page .kiosk-neighbor-button {
  border: 0;
  font-family: var(--font-plain);
  cursor: pointer;
}

.kiosk-button-size-tester-page .kiosk-test-button {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: .2rem;
  width: var(--kiosk-button-width);
  min-width: var(--kiosk-button-width);
  height: var(--kiosk-button-height);
  min-height: var(--kiosk-button-height);
  padding: .6rem;
  border-radius: var(--radius-lg);
  color: var(--button-text);
  background: var(--button-bg);
  box-shadow: var(--shadow-control-button);
  font-size: var(--step-0);
  font-weight: var(--heading-weight);
  line-height: 1.05;
  text-align: center;
}

.kiosk-button-size-tester-page .kiosk-test-button small {
  color: currentColor;
  font-size: .68rem;
  font-weight: var(--body-weight);
  opacity: .86;
}

.kiosk-button-size-tester-page .kiosk-neighbor-button {
  min-width: 4.8rem;
  min-height: 2.8rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-md);
  color: var(--text-body);
  background: var(--form-bg);
  box-shadow: var(--inset-highlight);
}

.kiosk-button-size-tester-page .kiosk-finger-ring {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: var(--kiosk-finger-size);
  height: var(--kiosk-finger-size);
  border: var(--line) solid var(--input-focus);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 .45rem rgba(255, 255, 255, .12);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.kiosk-button-size-tester-page .kiosk-result-panel {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--line) solid var(--input-border);
  border-radius: var(--radius-xl);
  background: var(--form-bg);
  box-shadow: var(--inset-highlight);
}

.kiosk-button-size-tester-page .kiosk-result-card {
  display: grid;
  gap: .4rem;
}

.kiosk-button-size-tester-page .kiosk-result-card strong {
  color: var(--text-brand);
  font-size: var(--step-1);
  line-height: 1.1;
}

.kiosk-button-size-tester-page .kiosk-result-card span {
  color: var(--text-muted);
  font-family: var(--font-plain);
  font-size: var(--step--1);
  font-weight: var(--body-weight);
}

.kiosk-button-size-tester-page .kiosk-meter {
  height: .75rem;
  border-radius: 999px;
  background: var(--inset-surface);
  box-shadow: var(--inset-control-shadow);
  overflow: hidden;
}

.kiosk-button-size-tester-page .kiosk-meter span {
  display: block;
  width: var(--kiosk-meter-fill);
  height: 100%;
  border-radius: inherit;
  background: var(--button-bg);
}

.kiosk-button-size-tester-page .kiosk-result-panel[data-verdict="warn"] .kiosk-meter span {
  background: var(--accent);
}

.kiosk-button-size-tester-page .kiosk-result-panel[data-verdict="fail"] .kiosk-meter span {
  background: var(--text-soft);
}

.kiosk-button-size-tester-page .kiosk-result-panel textarea {
  min-height: 7.5rem;
  font-family: var(--font-mono);
  resize: vertical;
}

.kiosk-button-size-tester-page .kiosk-range-field {
  display: grid;
  gap: .45rem;
}

.kiosk-button-size-tester-page .kiosk-range-field label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: center;
  color: var(--text-label);
  font-family: var(--font-plain);
  font-size: var(--step--1);
  font-weight: var(--label-weight);
  text-transform: uppercase;
}

.kiosk-button-size-tester-page .kiosk-range-field output {
  color: var(--text-body);
  text-align: right;
}

.kiosk-button-size-tester-page .kiosk-clipboard-fallback {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 1px;
  height: 1px;
}

@media (max-width: 980px) {
  .kiosk-button-size-tester-page .tool-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .kiosk-button-size-tester-page .kiosk-stage {
    min-height: 28rem;
    padding: var(--space-2);
  }

  .kiosk-button-size-tester-page .kiosk-target-zone {
    padding-block: var(--space-4);
  }

  .kiosk-button-size-tester-page .kiosk-test-button {
    max-width: 100%;
  }
}