/* PKR Live previews for tablet landscape.
   When mechanics are opened, keep the example beside the controls.
   Portrait and narrow screens retain their existing vertically stacked layout. */
@media (min-width:900px) and (max-width:1366px) and (orientation:landscape) {
  /* Overflow clipping on either ancestor would disable sticky positioning. */
  #typeTechnicalDetails[open],#typeTechnicalDetails[open] .typolab {overflow:visible}
  #typeTechnicalDetails[open] .typolab-layout {
    grid-template-columns:minmax(0,1fr) minmax(228px,.82fr);
    gap:12px;align-items:start;padding:12px 13px 20px;
  }
  #typeTechnicalDetails[open] .typolab-heading {padding:20px 18px 12px;gap:12px}
  #typeTechnicalDetails[open] .typolab-heading h3 {font-size:clamp(26px,3vw,36px)}
  #typeTechnicalDetails[open] .typolab-draft {white-space:normal}
  #typeTechnicalDetails[open] .typolab-stage {
    position:sticky;top:calc(var(--header,76px) + 12px);align-self:start;
    max-height:calc(100dvh - var(--header,76px) - 25px);
    overflow-y:auto;overscroll-behavior:contain;padding:15px;
  }
  #typeTechnicalDetails[open] .typolab-stage-top {font-size:9px}
  #typeTechnicalDetails[open] .typolab-canvas {padding:17px 0}
  #typeTechnicalDetails[open] .typolab-controls {width:auto;padding:16px 13px}
  #typeTechnicalDetails[open] .typolab-measures>div {gap:3px 8px}
  #typeTechnicalDetails[open] .typolab-source {padding:0 18px 20px}

  /* Component example follows the opened e-slider instead of disappearing above it. */
  .pkr-component-quick:has(> #componentMechanics[open]) {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:13px;align-items:start;
  }
  .pkr-component-quick:has(> #componentMechanics[open]) > .pkr-component-quick-head {
    grid-column:1/-1;margin-bottom:0;
  }
  .pkr-component-quick:has(> #componentMechanics[open]) > .system-preview {
    position:sticky;top:calc(var(--header,76px) + 12px);align-self:start;
    max-height:calc(100dvh - var(--header,76px) - 25px);
    overflow-y:auto;overscroll-behavior:contain;padding:15px;
  }
  .pkr-component-quick:has(> #componentMechanics[open]) > #componentMechanics {
    margin-top:0;min-width:0;
  }
  #componentMechanics[open] .pkr-component-details-body {padding:12px}
  #componentMechanics[open] .pkr-component-technical {padding:15px 12px}
  #componentMechanics[open] .pkr-component-details-body > .grid.three {
    grid-template-columns:minmax(0,1fr);
  }
  #componentMechanics[open] .pkr-component-details-body > .grid.three > .detail-box:last-child {
    grid-column:auto;
  }
  #componentMechanics[open] .slider-wrap {flex-wrap:wrap}
  #componentMechanics[open] .slider-wrap input {width:100%;min-height:32px}

  /* Format preview stays visible while the logo width and formula are changed. */
  #logoFormatCheck .pkr-print-grid {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px;align-items:start;
  }
  #logoFormatCheck .pkr-print-settings {padding:15px}
  #logoFormatCheck .pkr-print-view {
    position:sticky;top:calc(var(--header,76px) + 12px);align-self:start;
    max-height:calc(100dvh - var(--header,76px) - 25px);padding:12px;
  }
  #logoFormatCheck .pkr-print-stage {
    flex:0 1 auto;min-height:225px;
    max-height:calc(100dvh - var(--header,76px) - 140px);
    padding:10px 0;overflow:hidden;
  }
  #logoFormatCheck #pkrPrintCanvas {max-height:calc(100dvh - var(--header,76px) - 165px)}
  #logoFormatCheck .pkr-print-view-head {flex-wrap:wrap;gap:4px 10px}
}
@media (min-width:900px) and (max-width:1100px) and (orientation:landscape) {
  /* 10–11" iPad: allow two columns within the sidebar-reduced content area. */
  #typeTechnicalDetails[open] .pkr-rule-details-body {padding:11px}
  #typeTechnicalDetails[open] .typolab-heading {display:block}
  #typeTechnicalDetails[open] .typolab-draft {margin-top:10px;text-align:left}
  #typeTechnicalDetails[open] .typolab-layout {
    grid-template-columns:minmax(0,1fr) minmax(216px,.85fr);gap:10px;padding:11px;
  }
  #typeTechnicalDetails[open] .typolab-stage {padding:11px}
  #typeTechnicalDetails[open] .typolab-controls {padding:14px 11px}
  .pkr-component-quick:has(> #componentMechanics[open]) {gap:10px;padding:14px}
  #logoFormatCheck {padding:18px 14px}
  #logoFormatCheck .pkr-print-grid {gap:10px}
  #logoFormatCheck .pkr-print-settings {padding:12px}
  #logoFormatCheck .pkr-print-view {padding:10px}
}
@media (prefers-reduced-motion:reduce) {
  #typeTechnicalDetails[open] .typolab-stage,
  .pkr-component-quick:has(> #componentMechanics[open]) > .system-preview {
    scroll-behavior:auto;
  }
}