/* The frame owns the close button. Fitted puzzle content cannot scroll over feedback. */
.dialog-content-area { display: contents; }
/* Even unthemed dialogs keep the close control outside the content flow. */
.overlay-frame:not([data-art]) .frame-close { position: absolute; z-index: 3; top: 12px; right: 12px; }
.overlay-frame:not([data-art]) .dialog-heading { padding-right: 44px; }
.overlay-frame[data-art] .frame-close {
  position: absolute; z-index: 3; top: var(--overlay-close-top); right: var(--overlay-close-right);
  transform: translate(50%, -50%); width: 46px; height: 46px; opacity: 1;
  display: grid; place-items: center; padding: 0; border: 2px solid #d4ad67;
  background: #0d1e2b; color: #ffe2a1; box-shadow: 0 2px 5px #000b, inset 0 0 0 3px #765730;
  font: 25px/1 Arial, sans-serif;
}
.overlay-frame[data-art] .frame-close:hover { background: #253749; color: white; }
.overlay-frame[data-art] .frame-close:active { transform: translate(50%, -50%); }
.overlay-frame[data-fit=true] .overlay-body {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px;
  overflow: clip; padding: 0;
}
.overlay-frame[data-fit=true] .dialog-top { min-height: 16px; margin-bottom: 8px; }
.overlay-frame[data-fit=true] h2 { font-size: clamp(24px, 3vw, 36px); margin: 0; }
.overlay-frame[data-fit=true] .dialog-content-area { display: block; min-height: 0; position: relative; overflow: clip; }
.overlay-frame[data-fit=true] #dialog-content {
  position: absolute; top: 2px; left: 4px; right: 4px;
  transform: scale(var(--content-scale, 1)); transform-origin: top center;
}
.overlay-frame[data-fit=true] .dialog-feedback,
.overlay-frame[data-fit=true] .dialog-feedback[hidden] {
  display: flex !important; align-items: center; justify-content: center;
  min-height: 60px; margin: 0; padding: 10px 14px;
  border: 1px solid var(--overlay-accent); border-left-width: 4px;
  background: #07131fe8; font-size: 16px; line-height: 1.45; text-align: center;
}
.overlay-frame[data-fit=true] .dialog-feedback[hidden] { visibility: hidden; }
/* Documents use the full sheet; only puzzle views need an empty result slot. */
.overlay-frame[data-fit=true][data-reserve-feedback=false] .overlay-body { grid-template-rows: auto minmax(0, 1fr); }
.overlay-frame[data-fit=true][data-reserve-feedback=false] .dialog-feedback[hidden] { display: none !important; }
.overlay-frame[data-fit=true][data-tone=paper] .dialog-feedback { background: #f6e8cbd9; }
.overlay-frame[data-fit=true] .puzzle-form > p { margin-bottom: 14px; }
.overlay-frame[data-fit=true] .color-dials { flex-wrap: nowrap; gap: clamp(8px, 2vw, 22px); margin: 18px 0; }
.overlay-frame[data-fit=true] .dial-holder { min-width: 0; gap: 8px; flex: 0 1 108px; }
.overlay-frame[data-fit=true] .color-dial { width: 100%; height: auto; aspect-ratio: 1; max-width: 108px; }
.overlay-frame[data-fit=true] .dial-form > .small-print { margin-bottom: 12px; }
.overlay-frame[data-fit=true] .dial-form > .primary-button { display: block; margin: 8px auto; }
.overlay-frame[data-fit=true] .puzzle-help { display: block; margin: 6px auto 0; min-height: 32px; }
@media (max-width: 600px) {
  .overlay-frame[data-fit=true] .overlay-body { gap: 10px; }
  .overlay-frame[data-art] .frame-close { width: 38px; height: 38px; font-size: 21px; }
  .overlay-frame[data-fit=true] .color-dial span { font-size: clamp(21px, 7vw, 29px); }
  .overlay-frame[data-fit=true] .dialog-feedback { font-size: 15px; min-height: 64px; }
  .overlay-frame[data-fit=true] .code-display { margin-bottom: 10px; }
  .overlay-frame[data-fit=true][data-layout=keypad] .keypad { margin: 6px auto; }
  .overlay-frame[data-fit=true][data-layout=keypad] .puzzle-form > .primary-button { display: block; margin: 6px auto; }
}
@media (max-height: 740px) and (min-width: 601px) {
  .overlay-frame[data-fit=true] .dial-holder { flex-basis: 84px; }
  .overlay-frame[data-fit=true] .color-dial { max-width: 84px; }
  .overlay-frame[data-fit=true] .color-dials { margin: 12px 0; }
  .overlay-frame[data-fit=true] .dial-form > .primary-button { min-height: 48px; padding: 12px 20px; }
}
@media (max-height: 540px) and (min-width: 601px) {
  .overlay-frame[data-fit=true] { width: min(var(--overlay-width), 96vw); height: 96dvh; aspect-ratio: auto; }
  .overlay-frame[data-fit=true] .overlay-body { gap: 6px; }
  .overlay-frame[data-fit=true] h2 { font-size: 23px; }
  .overlay-frame[data-fit=true] .dialog-top { margin-bottom: 2px; }
  .overlay-frame[data-fit=true] .dialog-feedback { min-height: 42px; padding: 6px 10px; font-size: 14px; }
  .overlay-frame[data-fit=true] .puzzle-form { gap: 6px 18px; }
  .overlay-frame[data-fit=true] .puzzle-form > p { font-size: 12px; line-height: 1.4; margin-bottom: 0; }
  .overlay-frame[data-fit=true] .code-display { min-height: 42px; font-size: 24px; padding: 7px; margin: 5px 0; }
  .overlay-frame[data-fit=true] .primary-button { min-height: 38px; padding: 8px 18px; }
  .overlay-frame[data-fit=true] .puzzle-help { min-height: 26px; margin-top: 3px; }
  .overlay-frame[data-fit=true][data-layout=keypad] .keypad button { min-height: 34px; padding: 5px; font-size: 19px; }
  .overlay-frame[data-fit=true] .calculation-terms { padding: 3px 12px; }
  .overlay-frame[data-fit=true] .calculation-terms dt, .overlay-frame[data-fit=true] .calculation-terms dd { padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
  .overlay-frame[data-fit=true] .dial-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: center; }
  .overlay-frame[data-fit=true] .dial-form > p:first-child { grid-column: 1; margin: 0; }
  .overlay-frame[data-fit=true] .color-dials { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .overlay-frame[data-fit=true] .dial-form > .small-print { grid-column: 1; margin: 4px 0; }
  .overlay-frame[data-fit=true] .dial-form > .primary-button { grid-column: 1 / -1; min-height: 42px; padding: 10px 20px; }
}