/* UI-03: the canonical policy text scrolls inside a stable desktop dialog. */
@media (min-width: 1024px) {
  #legalModal { z-index: 10000; }
  #legalModal .legal-modal-panel {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(800px, calc(100vw - 64px));
    max-height: calc(100dvh - 64px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--otx-ds-line, #b8c6da);
    border-radius: var(--otx-ds-radius, 16px);
    background: var(--otx-ds-surface, #e4eaf3);
    color: var(--otx-ds-ink, #17243a);
  }
  #legalModal .legal-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-areas: 'kicker close' 'title close';
    gap: 6px 24px;
    padding: 24px;
    border-bottom: 1px solid var(--otx-ds-line, #b8c6da);
  }
  #legalModal #legalModalKicker { grid-area: kicker; margin: 0; font-size: 12px; color: #596782; }
  #legalModal #legalModalTitle { grid-area: title; margin: 0; padding: 0; font-size: 24px; line-height: 1.4; }
  #legalModal .legal-modal-close { grid-area: close; position: static; width: 44px; height: 44px; }
  #legalModal #legalModalBody { min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; font-size: 16px; line-height: 1.7; }
  #legalModal #legalModalBody > section + section { margin-top: 24px; }
  #legalModal #legalModalBody section h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.4; }
  #legalModal #legalModalBody p { margin: 0 0 16px; color: #4f6278; overflow-wrap: anywhere; }
  #legalModal #legalModalBody .legal-policy-source { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--otx-ds-line, #b8c6da); }
  #legalModal .legal-policy-source a { color: #514579; text-decoration: underline; text-underline-offset: 3px; }
}
/* Extend the existing control-theme owner rather than adding a global force
   layer. These scoped properties replace its legacy legal-dialog variants. */
@layer otxControlTheme {
  @media (min-width: 1024px) {
    #legalModal .legal-modal-panel { padding: 0 !important; border-radius: 16px !important; overflow: hidden !important; }
    #legalModal #legalModalTitle { margin: 0 !important; padding: 0 !important; font-size: 24px !important; line-height: 1.4 !important; }
    #legalModal .legal-modal-close { position: static !important; width: 44px !important; height: 44px !important; min-height: 44px !important; }
    #legalModal #legalModalBody section h2 { font-size: 20px !important; line-height: 1.4 !important; }
  }
}