/* Presentation settings share the fixed 1080 × 1920 kiosk stage. */
.kiosk-settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: 13px;
  min-height: 78px;
  padding: 16px 25px;
  border: 2px solid #b9c9df;
  border-radius: 22px;
  background: #ffffffd9;
  color: var(--primary-deep, #002b6b);
  font: inherit;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
.kiosk-settings-button svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kiosk-settings-button:focus-visible { outline: 5px solid var(--primary-deep, #002b6b); outline-offset: 5px; }

.screen.kiosk-settings-screen { padding: 48px 72px 46px; color: #193550; overflow: hidden; }
.kiosk-settings-header { display: flex; align-items: center; flex: none; min-height: 64px; margin-bottom: 28px; }
.kiosk-settings-screen h2 { flex: none; margin: 0 0 12px; font-size: 58px; line-height: 1.12; color: var(--primary-deep, #002b6b); }
.kiosk-settings-screen h2:focus { outline: none; }
.kiosk-settings-intro { flex: none; margin: 0 0 24px; color: #506782; font-size: 27px; line-height: 1.35; }
.kiosk-settings-form { display: flex; flex-direction: column; flex: 1; gap: 20px; min-height: 0; }
/* The fields can grow with future preferences; the action footer stays visible. */
.kiosk-settings-fields { display: flex; flex-direction: column; gap: 22px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 6px 12px; margin: 0 -6px; scrollbar-width: thin; touch-action: pan-y; }
.kiosk-settings-card { flex: none; min-width: 0; margin: 0; padding: 18px 28px 24px; border: 2px solid #b8cde3; border-radius: 28px; background: #ffffffeb; }
.kiosk-settings-card legend { padding: 0 12px; color: var(--primary-deep, #002b6b); font-size: 32px; font-weight: 700; line-height: 1.3; }
.kiosk-settings-description { margin: 1px 0 20px; color: #405a75; font-size: 25px; line-height: 1.35; }
.kiosk-settings-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kiosk-settings-option { display: flex; align-items: flex-start; gap: 16px; min-width: 0; min-height: 112px; padding: 20px 18px; border: 3px solid #d3deeb; border-radius: 22px; background: #f7faff; cursor: pointer; }
.kiosk-settings-option.is-selected { border-color: var(--primary, #0046b0); background: #eaf3ff; }
.kiosk-settings-option input { flex: none; width: 32px; height: 32px; margin: 2px 0 0; accent-color: var(--primary, #0046b0); }
.kiosk-settings-option > span { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.kiosk-settings-option strong { font-size: 29px; line-height: 1.2; color: #193c65; }
.kiosk-settings-option > span > span { font-size: 23px; line-height: 1.3; color: #506782; }
.kiosk-settings-language .kiosk-settings-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kiosk-settings-language .kiosk-settings-option { align-items: center; min-height: 92px; padding: 18px 14px; gap: 12px; }
.kiosk-settings-language .kiosk-settings-option strong { font-size: 28px; }
.kiosk-settings-timing { margin-top: 22px; padding-top: 20px; border-top: 2px solid #e0e8f1; }
.kiosk-settings-number-label { display: block; margin-bottom: 12px; font-size: 26px; font-weight: 600; line-height: 1.3; }
.kiosk-settings-seconds-row { display: flex; align-items: center; gap: 20px; font-size: 27px; }
.kiosk-settings-seconds-row input { width: 190px; min-height: 82px; padding: 12px 18px; border: 3px solid #b8cde3; border-radius: 18px; background: #fff; color: #193550; font: inherit; font-size: 36px; font-weight: 600; font-variant-numeric: tabular-nums; user-select: text; -webkit-user-select: text; }
.kiosk-settings-seconds-row input[aria-invalid="true"] { border-color: #b32830; }
.kiosk-settings-hint { margin: 14px 0 0; color: #506782; font-size: 23px; line-height: 1.35; }
.kiosk-settings-error { margin: 14px 0 0; color: #9e2029; font-size: 24px; line-height: 1.35; }
.kiosk-settings-footer { flex: none; padding-top: 20px; border-top: 2px solid #cfdae7; }
.kiosk-settings-storage { margin: 0 0 18px; color: #506782; font-size: 23px; line-height: 1.35; }
.kiosk-settings-actions { display: flex; gap: 22px; }
.kiosk-settings-actions button { flex: 1; min-height: 92px; padding: 20px 28px; border: 2px solid var(--primary, #0046b0); border-radius: 22px; font: inherit; font-size: 29px; font-weight: 600; line-height: 1.25; cursor: pointer; }
.kiosk-settings-cancel { color: var(--primary-deep, #002b6b); background: #fff; }
.kiosk-settings-save { color: #fff; background: var(--primary, #0046b0); }
.kiosk-settings-screen :is(button, input):focus-visible { outline: 5px solid var(--primary-deep, #002b6b); outline-offset: 5px; }