#account-dialog { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-y: auto; padding: 20px; background: var(--parchment); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; corner-shape: bevel; box-shadow: var(--bevel), var(--ledge); font: 14px/1.5 var(--read); text-shadow: none; }
#account-dialog::backdrop { background: rgb(20 35 28 / 65%); }
#account-dialog h2 { margin: 0 0 12px; font: 20px/1.4 var(--blocks); color: var(--leaf-deep); }
#account-dialog h3 { font-size: 16px; }
#account-dialog p { margin: 10px 0; }
#account-dialog label { display: block; margin: 10px 0; font-weight: 700; }
#account-dialog input:not([type=checkbox]), #account-dialog textarea { display: block; box-sizing: border-box; width: 100%; padding: 9px; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); color: var(--ink); font: 15px var(--read); }
#account-dialog textarea { font-family: monospace; overflow-wrap: anywhere; resize: none; }
#account-dialog button { padding: 9px 12px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); font: 700 14px var(--read); cursor: pointer; }
#account-dialog button:disabled { opacity: .6; cursor: wait; }
#account-dialog #account-submit { background: var(--evergreen); color: var(--paper); }
#account-dialog .account-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#account-dialog .account-check { display: flex; align-items: start; gap: 8px; }
#account-dialog #account-error { color: #943817; font-weight: 700; }
#account-dialog #account-password-help { font-size: 12px; }
#account-dialog [hidden] { display: none; }
/* A new name, asked for by a moderator (client/js/rename.js): the account dialog's parchment, a little darker behind. */
#rename-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-y: auto; padding: 20px; background: var(--parchment); color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; corner-shape: bevel; box-shadow: var(--bevel), var(--ledge); font: 14px/1.5 var(--read); text-shadow: none; }
#rename-dialog::backdrop { background: rgb(20 35 28 / 75%); }
#rename-dialog h2 { margin: 0 0 12px; font: 20px/1.4 var(--blocks); color: var(--leaf-deep); }
#rename-dialog p { margin: 10px 0; }
#rename-dialog blockquote { margin: 10px 0; padding: 8px 12px; border-left: 4px solid var(--leaf-deep); background: var(--paper); font-style: italic; overflow-wrap: anywhere; }
#rename-dialog label { display: block; margin: 12px 0; font-weight: 700; }
#rename-dialog input { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; padding: 9px; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); color: var(--ink); font: 15px var(--read); }
#rename-dialog #rename-note { font-size: 12px; }
#rename-dialog #rename-error { color: #943817; font-weight: 700; }
#rename-dialog .rename-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#rename-dialog button { padding: 9px 12px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink); font: 700 14px var(--read); cursor: pointer; }
#rename-dialog button:disabled { opacity: .6; cursor: wait; }
#rename-dialog #rename-submit { background: var(--evergreen); color: var(--paper); }
#rename-dialog [hidden] { display: none; }