new finctions and fixes

static/css/styles.css

@@ -300,6 +300,18 @@ textarea:focus {
   min-width: 0;
 }
 
+.document-heading--copy {
+  border-radius: 6px;
+  cursor: copy;
+  outline: none;
+}
+
+.document-heading--copy:hover,
+.document-heading--copy:focus-visible {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
 .document-heading h1 {
   overflow: hidden;
   margin: 0;
@@ -4532,11 +4544,22 @@ dialog::backdrop {
     gap: 5px;
     max-width: calc(100vw - 20px);
     padding: 5px;
+    isolation: isolate;
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 999px;
-    background: rgba(17, 21, 28, .88);
+    background: transparent;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
+  }
+
+  .pad-page .mobile-editor-bubble::before {
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: rgba(17, 21, 28, .88);
     backdrop-filter: blur(10px);
+    content: "";
+    pointer-events: none;
   }
 
   .mobile-editor-bubble>button,
@@ -5059,6 +5082,12 @@ dialog::backdrop {
   flex-wrap: wrap;
 }
 
+.authorship-controls button:disabled,
+.authorship-controls input:disabled+.switch-control__track {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
 .switch-control {
   display: inline-flex;
   align-items: center;
@@ -5107,17 +5136,6 @@ dialog::backdrop {
   background: var(--accent);
 }
 
-.editor-settings-save {
-  min-height: 22px;
-  height: 22px;
-  padding: 0 8px;
-  font-size: 11px;
-}
-
-.editor-settings-save:disabled {
-  opacity: .45;
-  cursor: not-allowed;
-}
 
 .share-link-row .share-link-info {
   margin-top: 8px;
@@ -5320,6 +5338,7 @@ dialog::backdrop {
     width: auto;
   }
 }
+
 /* Optional links to exact editor lines. */
 .line-number-button {
   display: block;
@@ -5357,3 +5376,81 @@ dialog::backdrop {
   background: color-mix(in srgb, var(--success) 18%, transparent);
   color: var(--text);
 }
+
+/* Personal editor preferences in the compact mobile action bar. */
+@media (max-width: 1499px) {
+  .mobile-editor-options {
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  .mobile-editor-options>summary {
+    display: inline-grid;
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    place-items: center;
+    border: 0;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, .07);
+    color: var(--text);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .mobile-editor-options>summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .mobile-editor-options[open]>summary {
+    background: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, .07));
+  }
+
+  .mobile-editor-options__panel {
+    position: fixed;
+    right: 12px;
+    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
+    left: auto;
+    display: grid;
+    width: min(360px, calc(100vw - 24px));
+    max-height: calc(100dvh - 88px);
+    gap: 5px;
+    padding: 12px;
+    overflow-y: auto;
+    border: 1px solid var(--border-strong);
+    border-radius: 10px;
+    background: var(--surface-strong, #11161e);
+    box-shadow: 0 16px 40px rgb(0 0 0 / 45%);
+  }
+
+  .mobile-editor-options__panel>label:not(.mobile-option-check) {
+    display: grid;
+    grid-template-columns: 70px minmax(0, 1fr);
+    align-items: center;
+    gap: 10px;
+    color: var(--muted);
+    font-size: .78rem;
+  }
+
+  .mobile-editor-options__panel select {
+    width: 100%;
+    min-height: 34px;
+  }
+
+  .mobile-option-check {
+    display: flex;
+    min-height: 24px;
+    align-items: center;
+    gap: 7px;
+    color: var(--text);
+    font-size: .8rem;
+    line-height: 1.2;
+  }
+
+  .mobile-option-check input {
+    width: 17px;
+    height: 17px;
+    margin: 0;
+  }
+
+}