/*
 * Comark stylesheet.
 *
 * One file, no preprocessor, no build step — consistent with the rest of the
 * frontend. Colours are defined once as tokens on :root and swapped under
 * prefers-color-scheme, so every surface follows the reader's system setting.
 */

:root {
  color-scheme: light dark;

  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-alt: #f4f4f7;
  --fg: #1c1c21;
  --muted: #6b6b76;
  --rule: #e2e2e8;
  --accent: #3b4cca;
  --accent-fg: #ffffff;
  --danger: #c0392b;
  --ok: #17794c;
  --warn: #9a6700;
  --code-bg: #f3f3f6;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 4%);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/*
 * Three theme states (see frontend/app/theme.js):
 *
 *   no data-theme attribute -> follow the operating system
 *   data-theme="light"      -> force light, even under a dark OS
 *   data-theme="dark"       -> force dark, even under a light OS
 *
 * The media query is guarded with :not([data-theme="light"]) so an explicit
 * light choice is not overridden by the OS preference.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131317;
    --surface: #1b1b21;
    --surface-alt: #23232b;
    --fg: #e9e9ee;
    --muted: #9a9aa6;
    --rule: #32323c;
    --accent: #8a97ff;
    --accent-fg: #16161c;
    --danger: #ff6b5e;
    --ok: #5ad19b;
    --warn: #e5b567;
    --code-bg: #24242c;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 25%);
  }
}

:root[data-theme="dark"] {
  --bg: #131317;
  --surface: #1b1b21;
  --surface-alt: #23232b;
  --fg: #e9e9ee;
  --muted: #9a9aa6;
  --rule: #32323c;
  --accent: #8a97ff;
  --accent-fg: #16161c;
  --danger: #ff6b5e;
  --ok: #5ad19b;
  --warn: #e5b567;
  --code-bg: #24242c;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 25%);
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

.theme-toggle {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--radius-sm);
  width: 2rem; height: 2rem; padding: 0;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-alt); }

* { box-sizing: border-box; }

/*
 * The `hidden` attribute must win over any `display` a class sets. Without
 * this, `.badge { display: inline-block }` silently defeats `hidden`, and a
 * private pad renders the "public snapshot" badge.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

body.centered { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
a:hover { text-decoration-color: currentColor; }

h1 { font-size: 1.6rem; line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 .25em; }
h2 { font-size: 1.15rem; margin: 0 0 .5em; }
h3 { font-size: 1rem; margin: 1.25em 0 .4em; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-fg); padding: .5rem .9rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* -- chrome --------------------------------------------------------------- */

.topbar {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .65rem 1.25rem;
  background: var(--surface); border-bottom: 1px solid var(--rule);
}

.brand { font-weight: 620; letter-spacing: -.02em; color: var(--fg); text-decoration: none; }
.topnav { display: flex; gap: 1rem; }
.topnav-end { gap: .9rem; }
.topnav a { color: var(--muted); text-decoration: none; padding: .2rem 0; }
.topnav a:hover { color: var(--fg); }
.topnav a[aria-current] { color: var(--fg); box-shadow: inset 0 -2px var(--accent); }
.topbar-user { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.username { color: var(--muted); font-size: .9rem; }

/*
 * Content spans 80% of the viewport, centred. Narrow screens fall back to the
 * full width minus a gutter, because 80% of a phone is unreadably cramped.
 */
.page, .pad-page, .flash, .footer {
  width: 80%;
  margin-inline: auto;
}
.page { padding: 1.75rem 0 4rem; }
.pad-page { padding: 1.25rem 0 3rem; }
.auth { display: grid; place-items: center; padding: 2rem 1.25rem; }

.footer {
  padding: 1.5rem 0 2.5rem;
  color: var(--muted); font-size: .82rem; display: flex; gap: .5rem;
}

.flash {
  margin-block: 1rem -0.5rem; padding: .65rem 1rem;
  border-radius: var(--radius-sm); border: 1px solid var(--rule); background: var(--surface);
}
.flash-success { border-color: color-mix(in srgb, var(--ok) 45%, var(--rule)); }
.flash-error { border-color: color-mix(in srgb, var(--danger) 45%, var(--rule)); }

/* -- forms and buttons ----------------------------------------------------- */

button, .button, input, select, textarea {
  font: inherit; color: inherit;
}

input[type="text"], input[type="search"], input[type="password"], select, textarea {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: .45rem .6rem; min-width: 0;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

button, .button {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: .45rem .8rem; cursor: pointer;
  text-decoration: none; display: inline-block;
}
button:hover, .button:hover { background: var(--surface-alt); }

button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
button.primary:hover { filter: brightness(1.08); }
button.danger, .danger { color: var(--danger); }

.link-button {
  background: none; border: none; padding: 0; color: var(--accent);
  cursor: pointer; text-decoration: underline;
}

.inline { display: inline-flex; gap: .4rem; align-items: center; }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .75rem 0; }
/* Used by the token form in settings and the create-user form in admin. */
.checkbox { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.stack { display: grid; gap: .4rem; max-width: 30rem; margin: .75rem 0; }
.stack.wide { max-width: none; }
textarea { font-family: var(--mono); font-size: .9rem; line-height: 1.6; resize: vertical; }
.stack label, .auth-card label { font-size: .85rem; color: var(--muted); }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.25rem; margin: 0 0 1.5rem; box-shadow: var(--shadow);
}
.auth-card { display: grid; gap: .5rem; width: min(24rem, 100%); }
.auth-card button { margin-top: .75rem; }

.page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.page-head h1 { margin-right: auto; }
.filters { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; flex-wrap: wrap; }
.filters input[type="search"] { flex: 1 1 18rem; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* The appearance forms: two fieldsets side by side where there is room. */
.settings-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; }
.settings-grid fieldset { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .75rem 1rem 1rem; display: grid; gap: .35rem; }
.settings-grid legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.settings-grid button, .settings-grid > p { grid-column: 1 / -1; justify-self: start; }
.appearance-sample { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.appearance-sample > * { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .85rem 1rem; margin: 0; }
.sample-editor { white-space: pre-wrap; }
.mono { font-family: var(--mono); }
.numeric { font-variant-numeric: tabular-nums; text-align: right; }
.error { color: var(--danger); }
.warning { color: var(--warn); }
.empty { color: var(--muted); padding: 2rem 0; text-align: center; }
.notice {
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--radius-sm); padding: .75rem 1rem;
}

/* -- pad list --------------------------------------------------------------- */

.pad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pad-row {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: .85rem 1rem;
}
.pad-main { min-width: 0; flex: 1; }
.pad-title { font-weight: 560; text-decoration: none; color: var(--fg); }
.pad-title:hover { color: var(--accent); }
.pad-snippet { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.pad-tags { margin: .45rem 0 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.pad-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; color: var(--muted); font-size: .8rem; }
.pad-size { font-variant-numeric: tabular-nums; }
.pad-shared { text-align: right; max-width: 22rem; }
.pad-shared .shared-name { color: var(--text); }

.badge {
  display: inline-block; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--surface-alt); color: var(--muted);
}
.badge-write { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--rule)); }
.badge-read { color: var(--muted); }
.badge-public { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--rule)); text-decoration: none; }

.tag-cloud { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
/* On the tags page the cloud is the content, so give it room and let each
   tag's size carry its count. */
.tag-cloud-large { gap: .55rem; align-items: baseline; margin-bottom: 2rem; }
.tag-cloud-large .tag { padding: .2rem .75rem; }
.tag {
  display: inline-flex; gap: .3rem; align-items: center;
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: 999px; padding: .15rem .6rem; font-size: .82rem;
  text-decoration: none; color: var(--muted);
}
.tag:hover { color: var(--fg); }
.tag-active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.tag-count { opacity: .65; font-variant-numeric: tabular-nums; }
.tag-small { font-size: .75rem; padding: .05rem .5rem; }

/* -- tables ------------------------------------------------------------------ */

.table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 560; }
.table tr.revoked td { opacity: .55; }
.table tr.selected { background: var(--surface-alt); }
.row-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.chip-list { list-style: none; margin: .5rem 0; padding: 0; display: flex; gap: .4rem; flex-wrap: wrap; }
.chip {
  display: inline-flex; gap: .35rem; align-items: center;
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: 999px; padding: .15rem .3rem .15rem .65rem; font-size: .85rem;
}
.chip-remove { background: none; border: none; padding: 0 .35rem; cursor: pointer; color: var(--muted); line-height: 1; }
.chip-remove:hover { color: var(--danger); }

.subnav { display: flex; gap: 1rem; margin: 1rem 0 1.5rem; border-bottom: 1px solid var(--rule); }
.subnav a { padding: .4rem 0; text-decoration: none; color: var(--muted); }
.subnav a[aria-current] { color: var(--fg); box-shadow: inset 0 -2px var(--accent); }

.menu { display: inline-block; position: relative; }
.menu > summary { cursor: pointer; list-style: none; padding: .45rem .8rem; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); }
.menu > summary::-webkit-details-marker { display: none; }
.menu-body {
  position: absolute; right: 0; z-index: 20; margin-top: .35rem; min-width: 12rem;
  display: grid; gap: .4rem; padding: .6rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.menu-body a { text-decoration: none; padding: .25rem .35rem; border-radius: var(--radius-sm); }
.menu-body a:hover { background: var(--surface-alt); }

.panel { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: .75rem 1rem; margin-bottom: .6rem; }
.panel > summary { cursor: pointer; font-weight: 560; }
.pad-panels { margin-top: 1.25rem; }

/* -- editor -------------------------------------------------------------------- */

.pad-header { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.pad-identity { margin-right: auto; min-width: 0; }

/* One status line under the title: access, publication, connection, who is
   here, and the pad's tags. */
.pad-status {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .45rem 0 0; min-height: 1.9rem;
}
.pad-status .presence { margin: 0; }
.pad-status .form-status { margin-left: .25rem; }

.rename-form { margin: 0; }
.rename-form input {
  font-size: 1.35rem; font-weight: 560; letter-spacing: -.02em;
  padding: .2rem .45rem; width: min(34rem, 60vw);
  background: transparent; border-color: transparent;
}
.rename-form input:hover { border-color: var(--rule); }
.rename-form input:focus { background: var(--surface); border-color: var(--rule); }

.tag-form { display: inline-flex; margin: 0; }
.tag-form input {
  font-size: .82rem; padding: .15rem .55rem; width: 14rem;
  background: transparent; border-color: transparent; border-radius: 999px;
}
.tag-form input:hover { border-color: var(--rule); }
.tag-form input:focus { background: var(--surface); border-color: var(--rule); width: 20rem; }
.pad-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.view-switch { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.view-switch button { border: none; border-radius: 0; border-right: 1px solid var(--rule); }
.view-switch button:last-child { border-right: none; }
.view-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }

/* -- presence ------------------------------------------------------------- */

.presence {
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem;
  margin: .5rem 0 0; padding: 0;
}
.presence-person {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: 999px; padding: .1rem .6rem .1rem .45rem;
  font-size: .8rem; color: var(--muted);
}
.presence-self { color: var(--fg); }
.presence-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }

/* The line a collaborator's cursor sits on, tinted in their colour. */
.cm-collaboratorLine {
  background: color-mix(in srgb, var(--collaborator-color) 16%, transparent);
  box-shadow: inset 2px 0 var(--collaborator-color);
}

.form-status { font-size: .82rem; color: var(--muted); }
.form-status[data-state="ok"] { color: var(--ok); }
.form-status[data-state="error"] { color: var(--danger); }

.conn { font-size: .8rem; color: var(--muted); }
.conn-ok { color: var(--ok); }
.conn-warn { color: var(--warn); }
.conn-error { color: var(--danger); }

/* Bounded to the viewport, so each pane scrolls inside itself rather than the
   whole page scrolling as one. That is what makes the two panes independently
   positionable — and therefore what lets the preview follow the cursor at all
   (editor.js #syncPreviewToCursor); with a page-height split there is only one
   scroll position and the rendered text drifts away from the caret. */
.editor-split {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: 1fr 1fr;
  height: calc(100vh - 14rem);
  min-height: 22rem;
}
.editor-split[data-view="source"], .editor-split[data-view="rendered"] { grid-template-columns: 1fr; }

.editor-pane, .preview-pane {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: auto;
  /* min-height:0 lets a grid item shrink below its content, which is what
     actually hands the overflow to the pane instead of the page. */
  min-height: 0;
}
/* position: relative makes this the offsetParent of the rendered blocks, which
   is what the split-view scroll sync in editor.js measures offsetTop against. */
.preview-pane { padding: 1.25rem 1.5rem; position: relative; }
/* Clicking a rendered block moves the caret to its source line, so the pane
   advertises that the text is a target rather than inert output. */
.preview-pane [data-line] { cursor: text; }

/* Collapsible heading sections in the preview (frontend/app/sections.js).
   Injected into the heading rather than wrapping it, because the preview is
   rebuilt on every keystroke and a <details> would slam shut each time. */
.section-toggle {
  background: none; border: 0; padding: 0 .4rem 0 0; margin: 0;
  color: var(--muted); cursor: pointer; font: inherit; font-size: .7em;
  line-height: 1; vertical-align: middle;
}
.section-toggle::before { content: "\25be"; display: inline-block; transition: transform .12s ease-out; }
.section-toggle[aria-expanded="false"]::before { transform: rotate(-90deg); }
.section-toggle:hover { color: var(--accent); }
.section-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.editor-pane[hidden], .preview-pane[hidden] { display: none; }

.cm-editor { height: 100%; }
.cm-editor.cm-focused { outline: none; }
/* `.cm-editor .cm-scroller`, not `.cm-scroller`: CodeMirror injects its own base
   theme into <head> at runtime, after this stylesheet, and its `.cm-scroller`
   rule sets line-height: 1.4. At equal specificity the later rule won, so the
   1.6 this file has always declared never actually applied. The extra class
   wins, which is what makes the setting take effect at all. */
.cm-editor .cm-scroller {
  font-family: var(--mono);
  font-size: var(--editor-font-size, .92rem);
  line-height: var(--editor-line-height, 1.6);
}
.cm-gutters { background: var(--surface); border-right: 1px solid var(--rule); color: var(--muted); }
/* Heading folding. The markers are CodeMirror's own text ("\25be"/"\25b8"); all
   this does is make them legible and give them a hit area worth clicking. */
.cm-foldGutter { min-width: 1.1rem; }
.cm-foldGutter .cm-gutterElement { padding: 0 .2rem; cursor: pointer; opacity: .45; }
.cm-foldGutter .cm-gutterElement:hover { opacity: 1; color: var(--accent); }
.cm-foldPlaceholder {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--rule); border-radius: 4px;
  margin: 0 .25rem; padding: 0 .4rem; color: var(--muted);
}
.cm-activeLine { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.cm-activeLineGutter { background: transparent; }

/* Collaborator cursors from y-codemirror.next. */
.cm-ySelection { opacity: .3; }
.cm-ySelectionCaret { position: relative; border-left: 2px solid; margin-left: -1px; }
.cm-ySelectionInfo {
  position: absolute; top: -1.35em; left: -2px; font-size: .68rem; padding: 0 .3em;
  border-radius: 3px 3px 3px 0; color: #fff; white-space: nowrap; user-select: none;
}

.fallback-content { white-space: pre-wrap; background: var(--code-bg); padding: 1rem; border-radius: var(--radius); }

/* -- markdown ---------------------------------------------------------------------- */

.markdown-body {
  font-size: var(--preview-font-size, 1rem);
  line-height: var(--preview-line-height, 1.6);
}
.markdown-body > :first-child { margin-top: 0; }
.markdown-body h1, .markdown-body h2 { border-bottom: 1px solid var(--rule); padding-bottom: .25em; }
.markdown-body pre { background: var(--code-bg); padding: .85rem 1rem; border-radius: var(--radius-sm); overflow-x: auto; }
.markdown-body code { font-family: var(--mono); font-size: .92em; background: var(--code-bg); padding: .12em .35em; border-radius: 3px; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.markdown-body table { border-collapse: collapse; width: 100%; }
.markdown-body th, .markdown-body td { border: 1px solid var(--rule); padding: .4rem .6rem; }
.markdown-body blockquote { margin: 0; padding-left: 1rem; border-left: 3px solid var(--rule); color: var(--muted); }
.markdown-body figure { margin: 1rem 0; }
.markdown-body figcaption { color: var(--muted); font-size: .82rem; }

/* -- history / tokens ---------------------------------------------------------------- */

.diff { background: var(--code-bg); padding: .85rem 1rem; border-radius: var(--radius-sm); overflow-x: auto; font-family: var(--mono); font-size: .85rem; }
.diff-add { color: var(--ok); display: block; }
.diff-del { color: var(--danger); display: block; }
.diff-hunk { color: var(--accent); display: block; }
.diff-meta, .diff-context { color: var(--muted); display: block; }
.revision-detail { margin-top: 2rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }

.token, .clone-command {
  background: var(--code-bg); padding: .65rem .85rem; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: .85rem; overflow-x: auto; user-select: all;
}
.token-reveal {
  border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--rule));
  border-radius: var(--radius); padding: .85rem 1rem; margin: 1rem 0;
  background: color-mix(in srgb, var(--warn) 6%, var(--surface));
}

@media (max-width: 900px) {
  .page, .pad-page, .flash, .footer { width: auto; margin-inline: 1rem; }
}

@media (max-width: 760px) {
  .editor-split { grid-template-columns: 1fr; }
  /* Stacked rather than side by side, so the height is split between them. */
  .editor-split[data-view="split"] { grid-template-rows: 1fr 1fr; }
  .topnav { gap: .75rem; }
  .page-head { flex-direction: column; align-items: stretch; }
}

/* -- dialogs ---------------------------------------------------------------- */

.dialog {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface); color: var(--fg);
  padding: 1.25rem 1.5rem; width: min(38rem, 92vw); box-shadow: var(--shadow);
}
.dialog::backdrop { background: rgb(0 0 0 / 45%); }
.dialog-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.dialog-head h2 { margin: 0; margin-right: auto; }
.dialog-head .link-button { font-size: 1.3rem; text-decoration: none; line-height: 1; }

.pad-edited { white-space: nowrap; }