/* Temporary EL-08 review tool. Remove this file and its script for production. */
.el08-font-explorer {
  --el08-font-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--el08-font-bottom) + var(--el08-font-keyboard-inset, 0px));
  max-width: calc(100% - 32px);
  z-index: 200;
  color: #2b302c;
  font: 400 14px/1.45 Gilroy, Arial, sans-serif;
  text-align: left;
  letter-spacing: 0;
}

.el08-font-explorer *, .el08-font-explorer *::before, .el08-font-explorer *::after {
  box-sizing: border-box;
}

.el08-font-explorer button, .el08-font-explorer input {
  font: 400 14px/1.3 Gilroy, Arial, sans-serif;
  color: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.el08-font-explorer button {
  cursor: pointer;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.el08-font-explorer button:focus-visible, .el08-font-explorer input:focus-visible {
  outline: 2px solid #1b3967;
  outline-offset: 3px;
}

.el08-font-explorer .el08-font-toggle {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-left: auto;
  border: 1px solid #f0eee780;
  border-radius: 50%;
  background: #1b3967;
  color: #fff;
  font: 24px/1 Georgia, 'Times New Roman', serif;
  box-shadow: 0 4px 20px #13264430;
}

.el08-font-explorer .el08-font-panel {
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  max-width: 100%;
  max-height: calc(var(--el08-font-viewport-height, 100dvh) - var(--el08-font-bottom) - 84px);
  margin-bottom: 12px;
  padding: 0;
  border: 1px solid #2b302c30;
  border-radius: 12px;
  background: #faf9f5;
  box-shadow: 0 8px 40px #13264430;
  overflow: hidden;
}

.el08-font-explorer [hidden] { display: none !important; }

.el08-font-explorer .el08-font-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 20px 14px;
  flex-shrink: 0;
}

.el08-font-explorer .el08-font-kicker {
  margin: 0 0 5px;
  color: #63695f;
  font: 400 11px/1.4 Gilroy, Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.el08-font-explorer .el08-font-heading {
  margin: 0;
  font: 400 26px/1.15 Georgia, 'Times New Roman', serif;
  letter-spacing: -.02em;
}

.el08-font-explorer .el08-font-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -8px -10px 0 0;
  font-size: 26px;
  flex-shrink: 0;
}

.el08-font-explorer .el08-font-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

.el08-font-explorer .el08-font-fields {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  padding: 0 20px;
}

.el08-font-explorer .el08-font-help {
  margin: 0 0 14px;
  font: 400 13px/1.5 Gilroy, Arial, sans-serif;
  color: #63695f;
}

.el08-font-explorer .el08-font-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid #2b302c20;
}

.el08-font-explorer .el08-font-label {
  display: block;
  font: 500 14px/1.3 Gilroy, Arial, sans-serif;
}

.el08-font-explorer .el08-font-default {
  display: block;
  margin: 5px 0 0;
  color: #63695f;
  font: 400 12px/1.4 Gilroy, Arial, sans-serif;
}

.el08-font-explorer .el08-font-stepper {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  height: 44px;
  border: 1px solid #2b302c40;
  border-radius: 6px;
  background: #fff;
}

.el08-font-explorer .el08-font-stepper button {
  min-width: 0;
  font-size: 20px;
}

.el08-font-explorer .el08-font-stepper button:hover { background: #e8ebe5; }

.el08-font-explorer .el08-font-stepper input {
  font-size: 16px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-right: 1px solid #2b302c20;
  border-left: 1px solid #2b302c20;
  border-radius: 0;
  background: transparent;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.el08-font-explorer input::-webkit-inner-spin-button,
.el08-font-explorer input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.el08-font-explorer .el08-font-actions {
  flex-shrink: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid #2b302c30;
  background: #faf9f5;
}

.el08-font-explorer .el08-font-status {
  margin: 0 0 12px;
  min-height: 18px;
  color: #63695f;
  font: 400 12px/1.5 Gilroy, Arial, sans-serif;
}

.el08-font-explorer .el08-font-buttons { display: flex; gap: 12px; }

.el08-font-explorer .el08-font-reset, .el08-font-explorer .el08-font-save {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #2b302c40;
  border-radius: 6px;
  flex: 1;
}

.el08-font-explorer .el08-font-save { background: #1b3967; border-color: #1b3967; color: #fff; }

.el08-font-explorer .el08-font-toast {
  position: absolute;
  right: 64px;
  bottom: 6px;
  width: max-content;
  max-width: calc(100vw - 116px);
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #2b302c30;
  border-radius: 6px;
  background: #faf9f5;
  box-shadow: 0 3px 16px #13264420;
  font: 400 13px/1.4 Gilroy, Arial, sans-serif;
}

@media (max-width: 360px) {
  .el08-font-explorer .el08-font-header { padding: 16px 14px 12px; }
  .el08-font-explorer .el08-font-fields { padding: 0 14px; }
  .el08-font-explorer .el08-font-actions { padding: 12px 14px; }
  .el08-font-explorer .el08-font-row { grid-template-columns: minmax(0, 1fr) 116px; gap: 8px; }
}

/* Keep the chapter navigation usable while the tool is closed. */
@media (max-width: 900px) {
  body.el-08-home .el08-font-explorer {
    --el08-font-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
  body.el-08-home .el08-font-explorer.el08-font-keyboard {
    --el08-font-bottom: 16px;
  }
}

.el08-font-explorer.el08-font-short .el08-font-header { padding: 10px 14px; align-items: center; }
.el08-font-explorer.el08-font-short .el08-font-kicker,
.el08-font-explorer.el08-font-short .el08-font-help { display: none; }
.el08-font-explorer.el08-font-short .el08-font-heading { font-size: 22px; }
.el08-font-explorer.el08-font-short .el08-font-close { margin-top: 0; }
.el08-font-explorer.el08-font-short .el08-font-row { padding: 8px 0; }
.el08-font-explorer.el08-font-short .el08-font-actions { padding: 10px 14px; }
.el08-font-explorer.el08-font-short .el08-font-status { margin-bottom: 8px; }

@media print { .el08-font-explorer { display: none !important; } }