/* A common header for modal panels: back on the left, close on the right. */
dialog { --panel-gutter: 24px; }
dialog .dialog-top { display:flex; align-items:center; gap:12px; min-height:52px; }
dialog .dialog-top > :is(h2,.eyebrow) { min-width:0; margin:0; flex:1; }
dialog .dialog-top > .close { margin-left:auto; flex:none; }
dialog .dialog-top > .back-control { order:-1; }
.friend-page-header > div { flex:1; min-width:0; }
.friend-page-header #friend-back { flex:none; }
.friend-page-header #friend-exit { display:inline-flex; flex:none; }
.social-header .back-control > span,.friend-page-header .back-control > span { display:none; }
.social-header .back-control,.friend-page-header .back-control { width:44px; padding:10px; }
#help-dialog { width:calc(100% - 32px); max-width:500px; padding:24px; }
#help-text { white-space:pre-line; line-height:1.65; margin-bottom:0; }
.field-heading { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.field-heading > :is(h3,label) { margin:0; }
dialog .explanation-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0; }
dialog .explanation-summary > span { color:var(--muted); font-size:.875rem; }
@media(max-width:1000px) {
  dialog { --panel-gutter:18px; }
  dialog:where(:not(#social-dialog):not(#friend-page):not(#message-coin-picker)) { padding:var(--panel-gutter); }
  dialog:where(:not(#social-dialog):not(#friend-page):not(#message-coin-picker)) .dialog-top {
    position:sticky; top:calc(-1 * var(--panel-gutter)); z-index:12;
    margin:calc(-1 * var(--panel-gutter)) calc(-1 * var(--panel-gutter)) 16px;
    padding:8px var(--panel-gutter); background:var(--surface); border-bottom:1px solid var(--line);
  }
  dialog .dialog-top h2 { font-size:1.25rem; }
  dialog .dialog-top .eyebrow { font-size:.6875rem; letter-spacing:.09em; }
  dialog .dialog-top > .back-control > span { display:none; }
  dialog :is(input:not([type="checkbox"]):not([type="radio"]),select) { min-height:44px; font-size:16px; padding:9px 11px; }
  dialog :is(label,.note-label) { font-size:.8125rem; }
  #tools-dialog .collection-tools { gap:8px; margin:12px 0; }
  #tools-dialog .collection-tools :is(input,select) { height:44px; }
  #tools-dialog .toolbar-stats { padding:10px 12px; gap:8px; }
  #tools-dialog .toolbar-icon { min-height:44px; padding:9px 11px; }
  #tools-dialog .toolbar-kind { grid-column:1/-1; }
  #tools-dialog .button.full { margin-top:8px; }
  #sort-dialog .sort-choices { gap:6px; }
  .friend-page-header { gap:8px; padding-left:12px; padding-right:12px; }
  .friend-page-header #friend-exit { display:inline-flex; padding:10px; }
  #friend-mobile-sort { justify-content:flex-end; }
  #help-dialog #help-title { font-size:1.2rem; }
  #help-text { font-size:.9375rem; }
}