/* Shared review shell: comfortable text columns, a separate close-control row,
   and a scrollable body that never pushes the return action out of reach. */
.dialog:is(.practice-compare-dialog,.compare-dialog) {
  width:min(900px,calc(100vw - 48px));height:fit-content;min-height:0;
  max-height:calc(100dvh - 48px);padding:0;border-radius:24px;overflow:hidden;
}
.dialog:is(.practice-compare-dialog,.compare-dialog)[open] {
  display:flex;flex-direction:column;
}
.dialog:is(.practice-compare-dialog,.compare-dialog):has(.practice-compare-previews,.compare-grid) {
  width:min(960px,calc(100vw - 48px));
}
.dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-header {padding:60px 32px 0;flex:none;}
.dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-header h2 {
  margin:0;font-size:22px;line-height:1.5;letter-spacing:0;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-header .icon-button {
  position:absolute;top:12px;right:12px;margin:0;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-body {
  display:block;flex:0 1 auto;min-height:0;overflow:auto;padding:24px 32px;
  overscroll-behavior:contain;scrollbar-width:thin;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) :is(.practice-compare,.voice-comparison,.compare-grid) {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) :is(.practice-compare,.voice-comparison)>section {
  min-width:0;padding:24px;border:1px solid var(--line);border-radius:12px;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) :is(.practice-compare,.voice-comparison) h3 {
  margin:0 0 20px;font-size:18px;line-height:1.5;color:var(--ink);
}
.dialog:is(.practice-compare-dialog,.compare-dialog) :is(.practice-compare,.voice-comparison) h4 {
  margin:0;font-size:15px;line-height:1.7;font-weight:600;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) :is(.practice-compare,.voice-comparison) p {
  font-size:15px;line-height:1.8;overflow-wrap:anywhere;margin:10px 0 0;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) :is(.comparison-decision,.voice-comparison article) {
  margin:0;padding:0;border:0;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) :is(.comparison-decision,.voice-comparison article)+article {
  margin-top:24px;padding-top:24px;border-top:1px solid var(--line);
}
.comparison-reason {color:var(--muted);}
.comparison-reason>span {display:block;margin:14px 0 4px;font-size:12px;line-height:1.5;color:var(--muted);}
.dialog:is(.practice-compare-dialog,.compare-dialog) :is(.voice-compare-note,.practice-compare-condition,.compare-note) {
  font-size:13px!important;line-height:1.7;color:var(--muted);margin:16px 0 0;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-actions {
  justify-content:center;padding:0 32px 28px;flex:none;
}
.dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-actions>.btn {
  flex:0 1 260px;width:260px;min-height:46px;box-shadow:none;font-size:15px;
}
.dialog.practice-compare-dialog .practice-compare-previews>section {padding:0;border:0;}
.dialog.practice-compare-dialog .practice-compare-previews .practice-artifact.has-phone {
  height:440px;min-height:0;
}
.dialog.compare-dialog .compare-column {container-type:normal;padding:16px;}
.dialog.compare-dialog .compare-column>.phone-preview {height:440px;}
@media(max-width:680px) {
  .dialog:is(.practice-compare-dialog,.compare-dialog),
  .dialog:is(.practice-compare-dialog,.compare-dialog):has(.practice-compare-previews,.compare-grid) {
    width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:20px;
  }
  .dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-header {padding:60px 20px 0;}
  .dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-header h2 {font-size:20px;}
  .dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-body {padding:20px;}
  .dialog:is(.practice-compare-dialog,.compare-dialog) :is(.practice-compare,.voice-comparison,.compare-grid) {
    grid-template-columns:1fr;gap:20px;
  }
  .dialog:is(.practice-compare-dialog,.compare-dialog) :is(.practice-compare,.voice-comparison)>section {padding:20px;}
  .dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-actions {padding:0 20px 20px;}
  .dialog:is(.practice-compare-dialog,.compare-dialog) .dialog-actions>.btn {flex:1;width:100%;}
}