/* Dialogs (v8.86.0): one header for every pop-up, sheet and editor, forms in
   the interface font, and editors that fill a phone. The last stylesheet.
   - The header is the pages' (.page-head in side-menu.css): the title in
     spaced capitals in the accent, a 44 px close, and an accent rule under it
     from edge to edge, held at the top while the dialog scrolls. A footer of
     buttons is held at the bottom the same way, above a hairline.
   - Forms are in Epilogue: labels, hints, fields and choices. EB Garamond
     stays for story text (a reported passage, a sample reply) and for the
     record sheets (a person, an item, magic), which read like the side panel.
   - An editor (.dialog-editor) is a window 720 px wide on a wide screen and
     the whole screen on a phone. Small dialogs (report, cloud sync, a
     painter) stay boxes.
   The character creator keeps its own shell (creator.css). */

/* The box: its padding as a variable, so the header and footer reach its
   edges; a field scrolled to (focus, a search) stops clear of both. */
dialog:not(.page-dialog,.ruleset-editor)>.dialog-card{--card-pad:20px;padding:var(--card-pad);scroll-padding:64px 0 80px}
@media(max-width:600px){dialog:not(.page-dialog,.ruleset-editor)>.dialog-card{--card-pad:16px}}

/* The header. A sticky box keeps clear of its scroller's padding, so it
   is held at minus that padding to sit on the edge. */
dialog:not(.page-dialog,.ruleset-editor)>.dialog-card>header{position:sticky;top:calc(-1 * var(--card-pad));z-index:3;flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:52px;margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;padding:4px 4px 4px var(--card-pad);border-bottom:2px solid var(--accent-700);background:var(--surface)}
dialog:not(.page-dialog,.ruleset-editor)>.dialog-card>header:not(:has(.icon)){padding-right:var(--card-pad)}
.dialog-card>header h2,.rs-top h2,.tools-head h2,.here-head h2,.atlas-head h2,#build-dialog .creator-top h2{margin:0;min-width:0;color:var(--accent);font:600 var(--size-compact)/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase;overflow-wrap:anywhere}
:is(dialog:not(.page-dialog)>.dialog-card>header,.rs-top,.atlas-head,#build-dialog .creator-top) .icon{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:var(--ledger-radius);background:none;color:var(--text-dim)}
:is(dialog:not(.page-dialog)>.dialog-card>header,.rs-top,.atlas-head,#build-dialog .creator-top) .icon:is(:hover,:focus-visible){color:var(--accent);background:var(--accent-950)}
:is(dialog:not(.page-dialog)>.dialog-card>header,.rs-top,.atlas-head,#build-dialog .creator-top) .icon:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* The footer: Cancel and the action, right-aligned; a status line, when it says something, on the left. */
dialog:not(.page-dialog,.ruleset-editor)>.dialog-card>footer:last-child{position:sticky;bottom:calc(-1 * var(--card-pad));z-index:3;flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-5);margin:auto calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));padding:12px var(--card-pad);border-top:1px solid var(--line);background:var(--surface)}
dialog:not(.page-dialog)>.dialog-card>footer:last-child:empty{display:none}
dialog:not(.page-dialog)>.dialog-card>footer>[role=status]{flex:1 1 220px;margin:0;color:var(--text-dim);font-size:var(--size-ui)}
dialog:not(.page-dialog)>.dialog-card>footer>[role=status]:empty{display:none}
@media(max-width:600px){dialog:not(.page-dialog)>.dialog-card>footer>[role=status]{flex-basis:100%}}
dialog:not(.page-dialog)>.dialog-card>footer>button{min-height:44px;padding:0 18px}

/* Forms in the interface font. */
:where(dialog:not(.page-dialog,.person-sheet,#item-dialog,#magic-dialog))>.dialog-card{font:400 var(--size-small)/1.45 var(--head)}
:where(dialog:not(.page-dialog,.person-sheet,#item-dialog,#magic-dialog)) .dialog-card label{font-weight:500;font-size:var(--size-ui);color:var(--text-dim)}
:where(dialog:not(.page-dialog,.person-sheet,#item-dialog,#magic-dialog)) .dialog-card :is(label:has(>input:is([type=checkbox],[type=radio])),label.checkbox-row,label.toggle-row){font-weight:400;font-size:var(--size-small);color:var(--text)}
:where(dialog:not(.page-dialog,.person-sheet,#item-dialog,#magic-dialog)) .dialog-card :is(.hint,legend){font-size:var(--size-ui);line-height:1.45}
.dialog-card :where(input:not([type=checkbox],[type=radio],[type=color],[type=range],[type=file]),textarea,select){font-size:var(--size-compact);line-height:1.4}
@media(max-width:800px){.dialog-card :where(input:not([type=checkbox],[type=radio],[type=color],[type=range],[type=file]),textarea,select){font-size:var(--size-body)}}
.portrait-card textarea{font-family:var(--head)}
#sync-dialog .settings-group legend{font:600 var(--size-ui) var(--head)}
.world-cast>legend,.roleplay-cast>legend{font:600 var(--size-ui) var(--head)}
.scenario-label{color:var(--text);font:600 var(--size-small) var(--head)}
.catalog-editor .scenario-more summary{font:600 var(--size-small) var(--head)}
.scenario-more summary small{font:400 var(--size-ui)/1.4 var(--head)}
.world-generate h3{font-size:var(--size-compact)}
.card-used h3{font:600 var(--size-ui) var(--head)}
.scenario-option small,.rs-way small,.rs-step small,.rs-list>button small,.rs-nav button small{font:400 var(--size-ui)/1.35 var(--head)}
.rs-head h3{font:600 var(--size-lead) var(--head)}
.rs-editor-head h4{font:600 var(--size-compact) var(--head)}
/* Story text stays in the story's font. */
.report-quote{font:italic var(--size-body)/1.5 var(--body)}
.scenario-sample{font:var(--size-body)/1.5 var(--body)}

/* Square corners, as on the pages; pills and faces keep theirs. */
.dialog-card :is(input:not([type=checkbox],[type=radio]),textarea,select),:where(.dialog-card) button,.scenario-assist,.scenario-icon,.scenario-option,.scenario-content,.scenario-cast-row,.scenario-pick,.scenario-more,.scenario-picture,.world-generate,.world-cast,.world-factions,.catalog-editor :is(.world-person,.world-faction),.roleplay-cast,.persona-copy,.persona-figure,.card-context,.card-used,.card-part .scenario-field,#sync-dialog .settings-group,.rs-progress li,.rs-nav button,.rs-attr,.rs-button,.rs-box,.rs-pool,.rs-list,.rs-checks,.we-stages li,.we-map{border-radius:var(--ledger-radius)}

/* The world and rules editors: the name as the title, what it is under it,
   and what saving does in a line below the header. Their card fills the
   dialog (app.css narrows every card by 20 px on a phone). */
.ruleset-editor>.dialog-card{width:100%}
.rs-top{align-items:center;min-height:61px;padding:4px 6px 4px 20px;border-bottom:2px solid var(--accent-700)}
.rs-top>div{min-width:0}
.rs-top h2{font-size:var(--size-lead);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.rs-top .rs-eyebrow{margin:2px 0 0;color:var(--muted);font:400 var(--size-label)/1.3 var(--head);letter-spacing:0;text-transform:none}
.rs-usage{margin:0;padding:8px 20px;border-bottom:1px solid var(--stone-800);background:var(--surface-low);line-height:1.45}
.rs-foot{justify-content:flex-end}
.rs-foot button{min-height:44px;padding:0 18px}
@media(max-width:760px){
  .rs-top{min-height:calc(61px + env(safe-area-inset-top));padding:calc(4px + env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) 4px max(14px,env(safe-area-inset-left))}
  .rs-usage{padding:8px 14px}
  .rs-foot button{flex:none;min-height:44px}
}

/* The sheets over the story (tools, story tools, people here) and the map. */
.tools-head,.here-head{align-items:center;min-height:52px;padding:4px 4px 4px 16px;border-bottom:2px solid var(--accent-700)}
.tools-tabs{padding-top:0}
.here-where{margin:2px 0 0;color:var(--muted);font:var(--size-label)/1.3 var(--head)}
.atlas-head{border-bottom:2px solid var(--accent-700)}
.atlas-head h2{flex:1;font-size:var(--size-lead);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}

/* Editors: a window on a wide screen, the whole screen on a phone. */
dialog.dialog-editor{width:min(720px,calc(100vw - 24px));max-width:none;max-height:min(92dvh,1000px)}
.dialog-editor>.dialog-card{width:100%;max-height:min(92dvh,1000px)}
dialog.dialog-editor>.dialog-card>header{min-height:61px}
.dialog-editor>.dialog-card>header h2{font-size:var(--size-lead)}
@media(max-width:760px){
  dialog.dialog-editor{width:100vw;height:100dvh;max-height:none;margin:0;inset:0}
  dialog.dialog-editor::backdrop{background:var(--bg)}
  .dialog-editor>.dialog-card{height:100%;max-height:none;border:0;border-radius:0}
  dialog.dialog-editor>.dialog-card>header{min-height:calc(61px + env(safe-area-inset-top));padding-top:calc(4px + env(safe-area-inset-top));padding-left:max(var(--card-pad),env(safe-area-inset-left))}
  dialog.dialog-editor>.dialog-card>footer:last-child{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* New adventure: Hard-core's box beside its sentence (the editor's labels
   stack their field under them), and a fold tall enough to tap. */
.catalog-editor label.checkbox-row{display:flex;flex-direction:row;align-items:flex-start;gap:var(--space-5)}
.catalog-editor label.checkbox-row>input{flex:none;width:18px;min-width:18px;margin:1px 0 0;padding:0}
.dialog-card details>summary{min-height:44px}
#adventure-dialog details>summary{display:flex;align-items:center}

/* The scene painter: its options folded under the description. */
.scene-options{margin:0;padding:0 14px 4px;border:1px solid var(--stone-750);border-radius:var(--ledger-radius);background:rgb(var(--surface-low-rgb) / .58)}
.scene-options[open]{padding-bottom:14px}
.scene-options>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:10px 0;color:var(--accent);font:600 var(--size-small) var(--head)}
.scene-options>summary small{color:var(--muted);font:400 var(--size-ui) var(--head)}
.scene-options[open]>:not(summary){margin-top:10px}