/* Widen only the keyboard reference page. */
.page-inner:has(#apple-keyboards) { max-width: 1200px; }

.keyboard-browser {
  margin: 28px 0 44px;
  padding: 24px;
  border: 1px solid #e8e8ed;
  border-radius: 24px;
  background: #f5f5f7;
  color: #1d1d1f;
}
.keyboard-browser [hidden] { display: none !important; }

.keyboard-category-tabs,
.keyboard-model-tabs {
  display: flex;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  gap: 3px;
  padding: 5px;
  border-radius: 999px;
  background: #e8e8ed;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.keyboard-category-tabs { margin: 0 auto; }
.keyboard-category-tabs button,
.keyboard-model-tabs button {
  appearance: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #515154;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.keyboard-model-tabs button { padding: 9px 14px; font-size: 13px; }
.keyboard-category-tabs button:hover,
.keyboard-model-tabs button:hover {
  background: rgba(255, 255, 255, 0.45);
  color: #1d1d1f;
}
.keyboard-category-tabs button[aria-selected="true"],
.keyboard-model-tabs button[aria-selected="true"] {
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.keyboard-category-tabs button:focus-visible,
.keyboard-model-tabs button:focus-visible,
.keyboard-browser select:focus-visible,
.keyboard-photo:focus-visible,
.keyboard-source-link:focus-visible {
  outline: 3px solid #0071e3;
  outline-offset: 3px;
}

.keyboard-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 20px;
  min-width: 0;
  margin: 24px 0;
}
.keyboard-language-control,
.keyboard-model-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}
.keyboard-browser label {
  flex: 0 0 auto;
  color: #6e6e73;
  font-size: 13px;
  line-height: 1.4;
}
.keyboard-browser select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 140px;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 38px 8px 12px;
  border: 1px solid #d2d2d7;
  border-radius: 10px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: #1d1d1f;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.35;
  cursor: pointer;
}
.keyboard-language-control select { width: 200px; }
.keyboard-model-control { flex: 0 1 560px; }
.keyboard-model-control select { flex: 1 1 auto; width: 440px; min-width: 0; }

.keyboard-stage {
  min-width: 0;
  padding: 30px;
  border: 1px solid #e8e8ed;
  border-radius: 18px;
  background: #fff;
}
.keyboard-current-figure { min-width: 0; margin: 0; }
.keyboard-photo {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Only the display window removes empty white margins. The linked original
   remains complete and untouched. Ratios leave room around the whole keyboard. */
.keyboard-photo > .keyboard-image {
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  aspect-ratio: 3.5;
  overflow: hidden;
}
.is-compact .keyboard-photo > .keyboard-image {
  width: 66.62%;
  min-width: 0;
  aspect-ratio: 2.35;
}
.markdown-section .keyboard-photo .keyboard-image > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  margin: 0;
  transform: translateY(-50%);
}
/* iPad layouts use a group-specific window around the complete key area.
   Four normalized coordinates are set on the figure. The linked asset stays
   untouched, including its iPad display and trackpad outside this window. */
.is-ipad .keyboard-photo {
  overflow: hidden;
}
.is-ipad .keyboard-photo > .keyboard-image {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: calc(480px * var(--ipad-crop-width, 0.64) / var(--ipad-crop-height, 0.28));
  min-height: 0;
  margin: 0 auto;
  aspect-ratio: var(--ipad-crop-width, 0.64) / var(--ipad-crop-height, 0.28);
  overflow: hidden;
}
.markdown-section .is-ipad .keyboard-photo .keyboard-image > img {
  position: absolute;
  top: calc(-100% * var(--ipad-crop-y, 0.435) / var(--ipad-crop-height, 0.28));
  left: calc(-100% * var(--ipad-crop-x, 0.18) / var(--ipad-crop-width, 0.64));
  width: calc(100% / var(--ipad-crop-width, 0.64));
  min-width: 0;
  max-width: none;
  max-height: none;
  height: auto;
  transform: none;
}

.markdown-section .keyboard-caption { margin-top: 24px; text-align: center; }
.markdown-section .keyboard-caption h2 {
  margin: 0 0 8px;
  color: #1d1d1f;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.3px;
}
.markdown-section .keyboard-caption p {
  max-width: 760px;
  margin: 0 auto 10px;
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.6;
}
.keyboard-source-link,
.keyboard-source-link a { color: #06c; font-size: 13px; line-height: 1.5; }
.keyboard-browser-footer { text-align: center; }
.markdown-section .keyboard-browser-footer p { margin: 16px 0 6px; }
.keyboard-availability {
  margin: 16px 0 0;
  color: #6e6e73;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
.keyboard-status {
  margin: 16px 0 0;
  color: #6e6e73;
  font-size: 14px;
}
.keyboard-provenance { color: #6e6e73; font-size: 13px; }

@media (max-width: 700px) {
  .keyboard-browser { padding: 16px; border-radius: 18px; }
  .keyboard-category-tabs button { padding: 9px 14px; font-size: 13px; }
  .keyboard-controls { gap: 14px; margin: 20px 0; }
  .keyboard-model-tabs { flex: 0 1 auto; }
  .keyboard-stage { padding: 20px 16px; border-radius: 14px; }
  .markdown-section .keyboard-caption h2 { font-size: 19px; }
  .keyboard-photo > .keyboard-image,
  .is-compact .keyboard-photo > .keyboard-image { width: 100%; min-width: 0; }
}
@media (max-width: 420px) {
  .keyboard-browser { padding: 12px; }
  .keyboard-stage { padding: 16px 12px; }
  .keyboard-language-control,
  .keyboard-model-control { flex: 1 1 100%; justify-content: space-between; }
  .keyboard-browser select { flex: 1 1 auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .keyboard-category-tabs button,
  .keyboard-model-tabs button { transition: none; }
}
@media print {
  .keyboard-browser { padding: 0; border: 0; background: #fff; }
  .keyboard-category-tabs,
  .keyboard-controls { display: none; }
  .keyboard-stage { padding: 0; border: 0; break-inside: avoid; }
  .keyboard-photo { overflow: visible; }
  .keyboard-photo > .keyboard-image,
  .is-compact .keyboard-photo > .keyboard-image { min-width: 0; }
}