/* Documents — the Random template dialog and its toolbar button. Colours and fonts come from app.css tokens. */
.tb-text { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-weight: 600; }
.tb-text .ic { width: 16px; height: 16px; }
.tpl-body { display: flex; flex-direction: column; gap: 12px; width: min(540px, 100%); max-width: 100%; }
.tpl-seed { font-family: var(--mono); width: 100%; box-sizing: border-box; }
.tpl-thumb { display: grid; place-items: center; padding: 12px; background: var(--desk); border: 1px solid var(--line-2); border-radius: 6px; cursor: zoom-in; overflow: hidden; }
.tpl-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-thumb .page { box-shadow: 0 1px 4px rgba(0, 0, 0, .35); pointer-events: none; }
.tpl-info { margin: 0; color: var(--dim); font-size: 12px; line-height: 1.45; }
.tpl-full { max-width: min(860px, 86vw); max-height: 72vh; overflow: auto; padding: 12px; background: var(--desk); border-radius: 6px; }
.tpl-full .page { margin: 0 auto; }
/* A fixed dialog and preview: regenerating changes the page and the text, never the size, so the buttons stay put. */
.tpl-dlg { width: min(600px, 94vw); }
.tpl-body { width: 100%; }
.tpl-thumb { height: 440px; box-sizing: border-box; align-content: center; justify-items: center; }
.tpl-info { min-height: 54px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }