/* PROD reference: one scrolling body, writing conventions followed by glossary. */
.style-analysis-modal.style-analysis-modal {
  box-sizing: border-box; width: min(720px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0;
  border-radius: 6px; background: #fff; color: #111; overflow: hidden;
  font: 14px/1.65 var(--f-body, system-ui, sans-serif); text-align: left;
}
dialog.style-analysis-modal[open], .modal.style-analysis-modal { display: flex; flex-direction: column; }
.modal.style-analysis-modal { max-height: calc(100dvh - 160px); margin: 0 auto; }
dialog.style-analysis-modal::backdrop { background: rgb(0 0 0 / 48%); }
.style-analysis-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #e3e3df; }
.style-analysis-header h2 { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 700; }
.style-analysis-header > div { display: flex; align-items: center; gap: 12px; }
.style-analysis-header a { color: #315bff; font-size: 12px; text-decoration: none; }
.style-analysis-header .modal-close { position: static; display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #777; font-size: 18px; cursor: pointer; }
.style-analysis-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 24px; scrollbar-gutter: stable; }
.style-analysis-body section + section { margin-top: 26px; }
.style-analysis-body h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.5; font-weight: 700; }
.style-analysis-table-wrap { border: 1px solid #e3e3df; border-radius: 3px; overflow: hidden; }
.style-analysis-body table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 14px; line-height: 1.65; }
.style-analysis-label { width: 26%; }
.style-analysis-body th, .style-analysis-body td { padding: 12px 14px; text-align: left; vertical-align: top; overflow-wrap: anywhere; border: 0; border-bottom: 1px solid #e3e3df; }
.style-analysis-body thead th { background: #fafaf8; color: #767570; font-size: 12px; font-weight: 400; }
.style-analysis-body tbody th { font-weight: 650; }
.style-analysis-body tbody tr:last-child > * { border-bottom: 0; }
.style-analysis-body ul { margin: 0; padding-left: 18px; }
.style-analysis-body li + li { margin-top: 4px; }
.style-analysis-auxiliary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.style-analysis-auxiliary p { margin: 0; color: #767570; font-size: 12px; }
.style-analysis-auxiliary a { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; color: #767570; text-decoration: none; }
.style-analysis-sample { margin: 16px 0 0; color: #767570; font-size: 12px; }
.style-analysis-modal a:focus-visible, .style-analysis-modal button:focus-visible { outline: 2px solid #315bff; outline-offset: 2px; }
@media (max-width: 520px) {
  .style-analysis-modal.style-analysis-modal { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); }
  .modal.style-analysis-modal { max-height: calc(100dvh - 112px); }
  .style-analysis-header { padding: 16px; gap: 8px; }
  .style-analysis-header h2 { font-size: 18px; }
  .style-analysis-header > div { gap: 4px; }
  .style-analysis-body { padding: 18px 14px; }
  .style-analysis-label { width: 32%; }
  .style-analysis-body th, .style-analysis-body td { padding: 10px; }
}