@a3s-lab/office 0.1.0 → 0.2.2

package/dist/styles.css

@@ -5546,7 +5546,9 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 .work-office-ribbon-panel {
+  align-items: stretch;
   min-width: 0;
+  display: flex;
   position: relative;
 }
 
@@ -5556,9 +5558,10 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 .work-office-ribbon .work-office-toolbar {
   border: 0;
-  flex-basis: 74px;
+  flex: auto;
   align-items: stretch;
   gap: 0;
+  width: auto;
   height: 74px;
   min-height: 74px;
   padding: 5px 10px;
@@ -5582,20 +5585,20 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   color: var(--work-office-accent);
   cursor: pointer;
   border-radius: 7px;
+  flex: 0 0 27px;
   place-items: center;
+  margin-block: 5px 6px;
   padding: 0;
   display: grid;
-  position: absolute;
-  top: 5px;
   box-shadow: 0 3px 12px #141b2b1a;
 }
 
 .work-office-ribbon-scroll.previous {
-  left: 4px;
+  margin-left: 4px;
 }
 
 .work-office-ribbon-scroll.next {
-  right: 4px;
+  margin-right: 4px;
 }
 
 .work-office-ribbon-scroll:hover, .work-office-ribbon-scroll:focus-visible {
@@ -5609,6 +5612,19 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   box-shadow: 0 5px 16px #141b2b24;
 }
 
+.work-office-ribbon-scroll:disabled {
+  cursor: default;
+  opacity: .38;
+}
+
+.work-office-ribbon-scroll:disabled:hover {
+  border-color: color-mix(in srgb,
+    var(--work-office-accent) 18%,
+    var(--a3s-line));
+  background: color-mix(in srgb, var(--a3s-panel) 94%, transparent);
+  box-shadow: 0 3px 12px #141b2b1a;
+}
+
 .work-office-ribbon-group {
   border-right: 1px solid var(--a3s-line);
   flex: none;
@@ -5904,6 +5920,59 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   margin: 4px 7px;
 }
 
+@media (width <= 640px) {
+  .workspace-context-menu {
+    right: 8px;
+    bottom: max(8px, env(safe-area-inset-bottom));
+    scrollbar-color: var(--a3s-overlay-border) transparent;
+    scrollbar-width: thin;
+    border-radius: 12px;
+    width: auto;
+    min-width: 0;
+    max-width: none;
+    max-height: min(62dvh, 480px);
+    padding: 8px;
+    top: auto !important;
+    left: 8px !important;
+  }
+
+  .workspace-context-menu:before {
+    background: var(--a3s-overlay-border);
+    content: "";
+    border-radius: 999px;
+    justify-self: center;
+    width: 32px;
+    height: 4px;
+    margin: 1px 0 5px;
+  }
+
+  .work-office-context-menu > button {
+    grid-template-columns: 20px minmax(0, 1fr) auto;
+    gap: 10px;
+    min-height: 44px;
+    padding: 9px 10px;
+    font-size: 12px;
+  }
+
+  .work-office-context-menu > button > svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .work-office-context-menu kbd {
+    font-size: 10px;
+  }
+
+  .workspace-context-menu::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .workspace-context-menu::-webkit-scrollbar-thumb {
+    background: var(--a3s-overlay-border);
+    border-radius: 999px;
+  }
+}
+
 @media (forced-colors: active) {
   .work-office-context-menu {
     border-color: canvastext;
@@ -6759,7 +6828,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   }
 }
 
-.work-document-pagination-popover, .work-document-paragraph-spacing-popover, .work-office-table-insert-popover {
+.work-document-pagination-popover, .work-document-paragraph-spacing-popover, .work-document-table-margins-popover, .work-office-table-insert-popover {
   align-items: center;
   display: flex;
 }
@@ -6866,6 +6935,16 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   font-size: 9px;
 }
 
+.work-document-table-border-target-select {
+  width: 88px;
+}
+
+.work-document-table-border-target-select > button[role="combobox"] {
+  height: 29px;
+  padding-inline: 6px 4px;
+  font-size: 9px;
+}
+
 .work-document-table-size-fields {
   gap: 3px;
   width: 116px;
@@ -6908,193 +6987,531 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   font-size: 9px;
 }
 
-.work-office-table-picker-panel {
-  --work-office-table-picker-accent: var(--work-office-control-accent, var(--a3s-blue));
-  width: 277px;
-  padding: 11px;
+.work-document-table-properties-dialog {
+  width: min(520px, 100%);
 }
 
-.work-office-table-picker-grid {
-  border: 0;
-  grid-template-columns: repeat(10, 22px);
+.work-document-table-properties-dialog form {
+  gap: 0;
+  display: grid;
+}
+
+.work-document-table-properties-tabs {
+  background: var(--a3s-panel-soft);
+  border-radius: 8px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 3px;
-  min-width: 0;
-  margin: 0;
-  padding: 0;
+  margin: -4px 0 18px;
+  padding: 3px;
   display: grid;
 }
 
-.work-office-table-picker-grid > button {
-  box-sizing: border-box;
-  border: 1px solid var(--a3s-line-strong);
-  background: var(--a3s-bg);
+.work-document-table-properties-tabs > button {
+  min-height: 36px;
+  color: var(--a3s-muted);
+  font: inherit;
   cursor: pointer;
-  border-radius: 3px;
-  width: 22px;
-  height: 20px;
-  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 6px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 620;
 }
 
-.work-office-table-picker-grid > button[data-highlighted="true"] {
-  border-color: color-mix(in srgb,
-    var(--work-office-table-picker-accent) 48%,
-    var(--a3s-line));
-  background: color-mix(in srgb,
-    var(--work-office-table-picker-accent) 14%,
-    var(--a3s-panel));
+.work-document-table-properties-tabs > button[aria-selected="true"] {
+  background: var(--a3s-panel);
+  color: var(--a3s-blue);
+  box-shadow: 0 1px 3px #141c2a1a;
 }
 
-.work-office-table-picker-grid > button:hover, .work-office-table-picker-grid > button:focus-visible {
-  outline: 2px solid
-    color-mix(in srgb, var(--work-office-table-picker-accent) 65%, transparent);
+.work-document-table-properties-tabs > button:hover {
+  color: var(--a3s-ink);
+}
+
+.work-document-table-properties-tabs > button:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--a3s-blue) 58%, transparent);
   outline-offset: 1px;
 }
 
-.work-office-table-picker-compact {
-  gap: 10px;
+.work-document-table-properties-panel {
+  outline: none;
+  align-content: start;
+  gap: 20px;
+  min-height: 260px;
   display: grid;
 }
 
-.work-office-table-picker-dimension {
+.work-document-table-properties-section {
   border: 0;
+  gap: 12px;
   min-width: 0;
   margin: 0;
   padding: 0;
+  display: grid;
 }
 
-.work-office-table-picker-dimension > legend {
-  color: var(--a3s-muted);
-  margin-bottom: 5px;
-  padding: 0;
-  font-size: 11px;
+.work-document-table-properties-section > legend {
+  color: var(--a3s-ink);
+  margin-bottom: 10px;
+  font-size: 12px;
   font-weight: 650;
-  line-height: 16px;
 }
 
-.work-office-table-picker-stepper {
-  border: 1px solid var(--a3s-line-strong);
-  background: var(--a3s-panel);
-  border-radius: 8px;
-  grid-template-columns: 44px minmax(0, 1fr) 44px;
-  height: 44px;
+.work-document-table-properties-choice-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
   display: grid;
-  overflow: hidden;
 }
 
-.work-office-table-picker-stepper > button, .work-office-table-picker-stepper > input {
+.work-document-table-properties-choice-grid label {
+  cursor: pointer;
   min-width: 0;
-  height: 42px;
-  color: var(--a3s-ink);
-  background: none;
-  border: 0;
-  border-radius: 0;
-  margin: 0;
+  position: relative;
 }
 
-.work-office-table-picker-stepper > button {
-  color: var(--a3s-muted);
-  cursor: pointer;
-  place-items: center;
-  padding: 0;
-  display: grid;
+.work-document-table-properties-choice-grid input {
+  opacity: 0;
+  pointer-events: none;
+  width: 1px;
+  height: 1px;
+  position: absolute;
 }
 
-.work-office-table-picker-stepper > button:first-child {
-  border-right: 1px solid var(--a3s-line);
+.work-document-table-properties-choice-grid label > span {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel);
+  min-height: 38px;
+  color: var(--a3s-muted);
+  border-radius: 7px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 580;
+  display: flex;
 }
 
-.work-office-table-picker-stepper > button:last-child {
-  border-left: 1px solid var(--a3s-line);
+.work-document-table-properties-choice-grid label:hover > span {
+  border-color: color-mix(in srgb, var(--a3s-blue) 35%, var(--a3s-line));
+  background: var(--a3s-panel-soft);
+  color: var(--a3s-ink);
 }
 
-.work-office-table-picker-stepper > button:hover:not(:disabled) {
-  background: color-mix(in srgb,
-    var(--work-office-table-picker-accent) 9%,
-    var(--a3s-panel));
-  color: var(--work-office-table-picker-accent);
+.work-document-table-properties-choice-grid input:checked + span {
+  border-color: color-mix(in srgb, var(--a3s-blue) 72%, var(--a3s-line));
+  background: color-mix(in srgb, var(--a3s-blue) 9%, var(--a3s-panel));
+  color: var(--a3s-blue);
 }
 
-.work-office-table-picker-stepper > button:disabled {
-  color: var(--a3s-faint);
-  cursor: default;
-  opacity: .55;
+.work-document-table-properties-choice-grid input:focus-visible + span {
+  outline: 2px solid color-mix(in srgb, var(--a3s-blue) 58%, transparent);
+  outline-offset: 2px;
 }
 
-.work-office-table-picker-stepper > input {
-  appearance: textfield;
-  width: 100%;
-  font: inherit;
-  text-align: center;
-  padding: 0 6px;
-  font-size: 15px;
-  font-weight: 680;
+.work-document-table-properties-number-row {
+  color: var(--a3s-muted);
+  grid-template-columns: 72px minmax(0, 1fr) 34px;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  display: grid;
 }
 
-.work-office-table-picker-stepper > input::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
+.work-document-table-properties-number-row .work-office-number-field {
+  width: 100%;
+  height: 34px;
 }
 
-.work-office-table-picker-stepper > input::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
+.work-document-table-properties-number-row small {
+  color: var(--a3s-faint);
+  font-size: 10px;
 }
 
-.work-office-table-picker-stepper:focus-within {
-  border-color: color-mix(in srgb,
-    var(--work-office-table-picker-accent) 64%,
-    var(--a3s-line-strong));
-  box-shadow: 0 0 0 2px
-    color-mix(in srgb, var(--work-office-table-picker-accent) 16%, transparent);
+.work-document-table-properties-select-row {
+  color: var(--a3s-muted);
+  grid-template-columns: 92px minmax(0, 180px);
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  display: grid;
 }
 
-.work-office-table-picker-stepper > :focus-visible {
-  outline: 2px solid
-    color-mix(in srgb, var(--work-office-table-picker-accent) 68%, transparent);
-  outline-offset: -3px;
+.work-document-table-properties-select-row .work-office-select, .work-document-table-properties-select-row button[role="combobox"] {
+  width: 100%;
 }
 
-.work-office-table-picker-compact > .work-office-table-picker-submit {
-  border: 1px solid var(--work-office-table-picker-accent);
-  background: var(--work-office-table-picker-accent);
-  color: #fff;
-  cursor: pointer;
-  height: 44px;
-  font: inherit;
-  border-radius: 8px;
-  padding: 0 16px;
-  font-size: 13px;
-  font-weight: 680;
+.work-document-table-properties-checkboxes {
+  gap: 6px;
+  display: grid;
 }
 
-.work-office-table-picker-compact > .work-office-table-picker-submit:hover {
-  border-color: color-mix(in srgb,
-    var(--work-office-table-picker-accent) 86%,
-    #000);
-  background: color-mix(in srgb,
-    var(--work-office-table-picker-accent) 90%,
-    #000);
+.work-document-table-properties-checkboxes .work-office-checkbox, .work-document-table-properties-section > .work-office-checkbox {
+  border-radius: 6px;
+  min-height: 34px;
+  padding: 5px 6px;
 }
 
-.work-office-table-picker-compact > .work-office-table-picker-submit:focus-visible {
-  outline: 2px solid
-    color-mix(in srgb, var(--work-office-table-picker-accent) 58%, transparent);
-  outline-offset: 2px;
+.work-document-table-properties-margin-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 14px;
+  display: grid;
 }
 
-.work-office-table-picker-size {
-  min-height: 18px;
+.work-document-table-properties-margin {
   color: var(--a3s-muted);
-  text-align: center;
-  margin-top: 8px;
+  grid-template-columns: 22px minmax(0, 1fr) 30px;
+  align-items: center;
+  gap: 6px;
   font-size: 11px;
-  font-weight: 620;
-  line-height: 18px;
-  display: block;
+  display: grid;
 }
 
-.work-document-pagination-panel {
-  width: 238px;
+.work-document-table-properties-margin .work-office-number-field {
+  width: 100%;
+  height: 34px;
+}
+
+.work-document-table-properties-margin small {
+  color: var(--a3s-faint);
+  font-size: 9px;
+}
+
+.work-document-table-properties-margin > p[role="alert"] {
+  color: var(--a3s-red);
+  grid-column: 2 / -1;
+  margin: -3px 0 0;
+  font-size: 10px;
+  line-height: 1.35;
+}
+
+.work-document-table-properties-section > p[role="alert"] {
+  color: var(--a3s-red);
+  margin: -5px 0 0 80px;
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+.work-document-picture-properties-dialog {
+  width: min(560px, 100%);
+}
+
+.work-document-picture-properties-dialog form {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 22px 26px;
+  display: grid;
+}
+
+.work-document-picture-properties-section {
+  border: 0;
+  align-content: start;
+  gap: 11px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  display: grid;
+}
+
+.work-document-picture-properties-section.position, .work-document-picture-properties-alt-text {
+  grid-column: 1 / -1;
+}
+
+.work-document-picture-properties-section > legend {
+  color: var(--a3s-ink);
+  margin-bottom: 9px;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.work-document-picture-properties-number-row {
+  min-height: 34px;
+  color: var(--a3s-muted);
+  grid-template-columns: 64px minmax(0, 1fr) 34px;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  display: grid;
+}
+
+.work-document-picture-properties-number-row .work-office-number-field {
+  width: 100%;
+  height: 34px;
+}
+
+.work-document-picture-properties-number-row small, .work-document-picture-properties-alt-text small {
+  color: var(--a3s-faint);
+  font-size: 10px;
+}
+
+.work-document-picture-properties-section > .work-office-checkbox {
+  border-radius: 6px;
+  min-height: 34px;
+  padding: 5px 6px;
+}
+
+.work-document-picture-properties-choice-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
+  display: grid;
+}
+
+.work-document-picture-properties-choice-grid label {
+  cursor: pointer;
+  min-width: 0;
+  position: relative;
+}
+
+.work-document-picture-properties-choice-grid input {
+  opacity: 0;
+  pointer-events: none;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+}
+
+.work-document-picture-properties-choice-grid label > span {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel);
+  min-height: 40px;
+  color: var(--a3s-muted);
+  text-align: center;
+  border-radius: 7px;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 7px;
+  font-size: 10px;
+  font-weight: 580;
+  line-height: 1.25;
+  display: flex;
+}
+
+.work-document-picture-properties-choice-grid label:hover > span {
+  border-color: color-mix(in srgb, var(--a3s-blue) 35%, var(--a3s-line));
+  background: var(--a3s-panel-soft);
+  color: var(--a3s-ink);
+}
+
+.work-document-picture-properties-choice-grid input:checked + span {
+  border-color: color-mix(in srgb, var(--a3s-blue) 72%, var(--a3s-line));
+  background: color-mix(in srgb, var(--a3s-blue) 9%, var(--a3s-panel));
+  color: var(--a3s-blue);
+}
+
+.work-document-picture-properties-choice-grid input:focus-visible + span {
+  outline: 2px solid color-mix(in srgb, var(--a3s-blue) 58%, transparent);
+  outline-offset: 2px;
+}
+
+.work-document-picture-properties-section > p[role="alert"] {
+  color: var(--a3s-red);
+  margin: -5px 0 0 72px;
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+.work-document-picture-properties-alt-text {
+  min-width: 0;
+  color: var(--a3s-muted);
+  gap: 7px;
+  font-size: 11px;
+  font-weight: 620;
+  display: grid;
+}
+
+.work-document-picture-properties-alt-text .work-office-text-area {
+  resize: vertical;
+  min-height: 86px;
+}
+
+.work-office-table-picker-panel {
+  --work-office-table-picker-accent: var(--work-office-control-accent, var(--a3s-blue));
+  width: 277px;
+  padding: 11px;
+}
+
+.work-office-table-picker-grid {
+  border: 0;
+  grid-template-columns: repeat(10, 22px);
+  gap: 3px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  display: grid;
+}
+
+.work-office-table-picker-grid > button {
+  box-sizing: border-box;
+  border: 1px solid var(--a3s-line-strong);
+  background: var(--a3s-bg);
+  cursor: pointer;
+  border-radius: 3px;
+  width: 22px;
+  height: 20px;
+  padding: 0;
+}
+
+.work-office-table-picker-grid > button[data-highlighted="true"] {
+  border-color: color-mix(in srgb,
+    var(--work-office-table-picker-accent) 48%,
+    var(--a3s-line));
+  background: color-mix(in srgb,
+    var(--work-office-table-picker-accent) 14%,
+    var(--a3s-panel));
+}
+
+.work-office-table-picker-grid > button:hover, .work-office-table-picker-grid > button:focus-visible {
+  outline: 2px solid
+    color-mix(in srgb, var(--work-office-table-picker-accent) 65%, transparent);
+  outline-offset: 1px;
+}
+
+.work-office-table-picker-compact {
+  gap: 10px;
+  display: grid;
+}
+
+.work-office-table-picker-dimension {
+  border: 0;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.work-office-table-picker-dimension > legend {
+  color: var(--a3s-muted);
+  margin-bottom: 5px;
+  padding: 0;
+  font-size: 11px;
+  font-weight: 650;
+  line-height: 16px;
+}
+
+.work-office-table-picker-stepper {
+  border: 1px solid var(--a3s-line-strong);
+  background: var(--a3s-panel);
+  border-radius: 8px;
+  grid-template-columns: 44px minmax(0, 1fr) 44px;
+  height: 44px;
+  display: grid;
+  overflow: hidden;
+}
+
+.work-office-table-picker-stepper > button, .work-office-table-picker-stepper > input {
+  min-width: 0;
+  height: 42px;
+  color: var(--a3s-ink);
+  background: none;
+  border: 0;
+  border-radius: 0;
+  margin: 0;
+}
+
+.work-office-table-picker-stepper > button {
+  color: var(--a3s-muted);
+  cursor: pointer;
+  place-items: center;
+  padding: 0;
+  display: grid;
+}
+
+.work-office-table-picker-stepper > button:first-child {
+  border-right: 1px solid var(--a3s-line);
+}
+
+.work-office-table-picker-stepper > button:last-child {
+  border-left: 1px solid var(--a3s-line);
+}
+
+.work-office-table-picker-stepper > button:hover:not(:disabled) {
+  background: color-mix(in srgb,
+    var(--work-office-table-picker-accent) 9%,
+    var(--a3s-panel));
+  color: var(--work-office-table-picker-accent);
+}
+
+.work-office-table-picker-stepper > button:disabled {
+  color: var(--a3s-faint);
+  cursor: default;
+  opacity: .55;
+}
+
+.work-office-table-picker-stepper > input {
+  appearance: textfield;
+  width: 100%;
+  font: inherit;
+  text-align: center;
+  padding: 0 6px;
+  font-size: 15px;
+  font-weight: 680;
+}
+
+.work-office-table-picker-stepper > input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.work-office-table-picker-stepper > input::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+.work-office-table-picker-stepper:focus-within {
+  border-color: color-mix(in srgb,
+    var(--work-office-table-picker-accent) 64%,
+    var(--a3s-line-strong));
+  box-shadow: 0 0 0 2px
+    color-mix(in srgb, var(--work-office-table-picker-accent) 16%, transparent);
+}
+
+.work-office-table-picker-stepper > :focus-visible {
+  outline: 2px solid
+    color-mix(in srgb, var(--work-office-table-picker-accent) 68%, transparent);
+  outline-offset: -3px;
+}
+
+.work-office-table-picker-compact > .work-office-table-picker-submit {
+  border: 1px solid var(--work-office-table-picker-accent);
+  background: var(--work-office-table-picker-accent);
+  color: #fff;
+  cursor: pointer;
+  height: 44px;
+  font: inherit;
+  border-radius: 8px;
+  padding: 0 16px;
+  font-size: 13px;
+  font-weight: 680;
+}
+
+.work-office-table-picker-compact > .work-office-table-picker-submit:hover {
+  border-color: color-mix(in srgb,
+    var(--work-office-table-picker-accent) 86%,
+    #000);
+  background: color-mix(in srgb,
+    var(--work-office-table-picker-accent) 90%,
+    #000);
+}
+
+.work-office-table-picker-compact > .work-office-table-picker-submit:focus-visible {
+  outline: 2px solid
+    color-mix(in srgb, var(--work-office-table-picker-accent) 58%, transparent);
+  outline-offset: 2px;
+}
+
+.work-office-table-picker-size {
+  min-height: 18px;
+  color: var(--a3s-muted);
+  text-align: center;
+  margin-top: 8px;
+  font-size: 11px;
+  font-weight: 620;
+  line-height: 18px;
+  display: block;
+}
+
+.work-document-pagination-panel {
+  width: 238px;
   padding: 10px 12px 12px;
 }
 
@@ -7103,6 +7520,82 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   padding: 10px 12px 12px;
 }
 
+.work-document-table-margins-panel {
+  width: 258px;
+  padding: 10px 12px 12px;
+}
+
+.work-document-table-margins-panel fieldset {
+  border: 0;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  display: grid;
+}
+
+.work-document-table-margins-panel legend {
+  color: var(--a3s-ink);
+  font-size: 11px;
+  font-weight: 680;
+}
+
+.work-document-table-margins-panel fieldset > p {
+  color: var(--a3s-muted);
+  margin: 0;
+  font-size: 9px;
+  line-height: 1.4;
+}
+
+.work-document-table-margins-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 7px 9px;
+  display: grid;
+}
+
+.work-document-table-margins-grid > .work-document-table-margin-field {
+  color: var(--a3s-muted);
+  grid-template-columns: 18px minmax(0, 1fr) 24px;
+  align-items: center;
+  gap: 4px;
+  font-size: 9px;
+  display: grid;
+}
+
+.work-document-table-margins-grid .work-office-number-field {
+  min-width: 0;
+}
+
+.work-document-table-margins-grid small {
+  color: var(--a3s-faint);
+  font-size: 8px;
+}
+
+.work-document-table-margins-reset {
+  color: var(--a3s-blue);
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 5px;
+  justify-self: end;
+  padding: 4px 7px;
+  font-size: 10px;
+}
+
+.work-document-table-margins-reset:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--a3s-blue) 8%, transparent);
+}
+
+.work-document-table-margins-reset:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--a3s-blue) 65%, transparent);
+  outline-offset: 1px;
+}
+
+.work-document-table-margins-reset:disabled {
+  cursor: default;
+  opacity: .42;
+}
+
 .work-document-pagination-panel fieldset, .work-document-paragraph-spacing-panel fieldset {
   border: 0;
   gap: 8px;
@@ -7157,6 +7650,219 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   opacity: .42;
 }
 
+@media (width <= 520px) {
+  .work-document-picture-properties-dialog form {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .work-document-picture-properties-section.position, .work-document-picture-properties-alt-text {
+    grid-column: auto;
+  }
+
+  .work-document-picture-properties-number-row {
+    grid-template-columns: 64px minmax(0, 1fr) 32px;
+    min-height: 44px;
+  }
+
+  .work-document-picture-properties-number-row .work-office-number-field {
+    grid-template-columns: minmax(0, 1fr) 88px;
+    height: 44px;
+  }
+
+  .work-document-picture-properties-number-row .work-office-number-field > input {
+    font-size: 12px;
+  }
+
+  .work-document-picture-properties-number-row .work-office-number-steppers {
+    grid-template-rows: 44px;
+    grid-template-columns: repeat(2, 44px);
+  }
+
+  .work-document-picture-properties-number-row .work-office-number-steppers > button:first-child {
+    border-right: 1px solid var(--a3s-line);
+    border-bottom: 0;
+  }
+
+  .work-document-picture-properties-choice-grid label > span {
+    min-height: 44px;
+    padding-inline: 4px;
+  }
+
+  .work-document-picture-properties-section > .work-office-checkbox {
+    min-height: 44px;
+    padding-block: 8px;
+  }
+
+  .work-document-picture-properties-dialog > footer .ds-button {
+    min-height: 44px;
+    padding-inline: 16px;
+  }
+
+  .work-document-picture-properties-alt-text .work-office-text-area {
+    min-height: 96px;
+  }
+
+  .work-document-table-properties-tabs {
+    margin-bottom: 14px;
+  }
+
+  .work-document-table-properties-tabs > button {
+    min-height: 44px;
+    padding-inline: 4px;
+  }
+
+  .work-document-table-properties-panel {
+    gap: 18px;
+    min-height: 0;
+  }
+
+  .work-document-table-properties-choice-grid.alignment {
+    grid-template-columns: 1fr;
+  }
+
+  .work-document-table-properties-choice-grid label > span {
+    min-height: 44px;
+  }
+
+  .work-document-table-properties-number-row {
+    grid-template-columns: 64px minmax(0, 1fr) 32px;
+    min-height: 44px;
+  }
+
+  .work-document-table-properties-number-row .work-office-number-field {
+    grid-template-columns: minmax(0, 1fr) 88px;
+    height: 44px;
+  }
+
+  .work-document-table-properties-number-row .work-office-number-field > input {
+    font-size: 12px;
+  }
+
+  .work-document-table-properties-number-row .work-office-number-steppers {
+    grid-template-rows: 44px;
+    grid-template-columns: repeat(2, 44px);
+  }
+
+  .work-document-table-properties-number-row .work-office-number-steppers > button:first-child {
+    border-right: 1px solid var(--a3s-line);
+    border-bottom: 0;
+  }
+
+  .work-document-table-properties-dialog > footer .ds-button {
+    min-height: 44px;
+    padding-inline: 16px;
+  }
+
+  .work-document-table-properties-section > p[role="alert"] {
+    margin-left: 72px;
+  }
+
+  .work-document-table-properties-select-row {
+    grid-template-columns: 84px minmax(0, 1fr);
+    min-height: 44px;
+  }
+
+  .work-document-table-properties-select-row button[role="combobox"] {
+    min-height: 44px;
+  }
+
+  .work-document-table-properties-checkboxes .work-office-checkbox, .work-document-table-properties-section > .work-office-checkbox {
+    min-height: 44px;
+    padding-block: 8px;
+  }
+
+  .work-document-table-properties-margin-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .work-document-table-properties-margin {
+    grid-template-columns: 44px minmax(0, 1fr) 32px;
+    min-height: 44px;
+  }
+
+  .work-document-table-properties-margin .work-office-number-field {
+    grid-template-columns: minmax(0, 1fr) 88px;
+    height: 44px;
+  }
+
+  .work-document-table-properties-margin .work-office-number-steppers {
+    grid-template-rows: 44px;
+    grid-template-columns: repeat(2, 44px);
+  }
+
+  .work-document-table-properties-margin .work-office-number-steppers > button:first-child {
+    border-right: 1px solid var(--a3s-line);
+    border-bottom: 0;
+  }
+
+  .work-document-pagination-panel, .work-document-paragraph-spacing-panel, .work-document-table-margins-panel {
+    width: min(320px, 100vw - 32px);
+    padding: 12px;
+  }
+
+  .work-document-pagination-panel fieldset, .work-document-paragraph-spacing-panel fieldset, .work-document-table-margins-panel fieldset {
+    gap: 10px;
+  }
+
+  .work-document-pagination-panel legend, .work-document-paragraph-spacing-panel legend, .work-document-table-margins-panel legend {
+    font-size: 12px;
+  }
+
+  .work-document-pagination-panel .work-office-checkbox {
+    border-radius: 6px;
+    min-height: 44px;
+    padding: 8px 6px;
+    font-size: 11px;
+  }
+
+  .work-document-pagination-panel .work-office-checkbox:not(.disabled):hover {
+    background: var(--a3s-panel-soft);
+  }
+
+  .work-document-paragraph-spacing-field {
+    grid-template-columns: 44px minmax(0, 1fr) 18px;
+    min-height: 44px;
+    font-size: 11px;
+  }
+
+  .work-document-paragraph-spacing-panel .work-office-number-field {
+    grid-template-columns: minmax(0, 1fr) 88px;
+    height: 44px;
+  }
+
+  .work-document-paragraph-spacing-panel .work-office-number-field > input {
+    font-size: 12px;
+  }
+
+  .work-document-paragraph-spacing-panel .work-office-number-steppers {
+    grid-template-rows: 44px;
+    grid-template-columns: repeat(2, 44px);
+  }
+
+  .work-document-paragraph-spacing-panel .work-office-number-steppers > button:first-child {
+    border-right: 1px solid var(--a3s-line);
+    border-bottom: 0;
+  }
+
+  .work-document-pagination-reset, .work-document-paragraph-spacing-reset, .work-document-table-margins-reset {
+    min-height: 44px;
+    padding: 8px 10px;
+    font-size: 11px;
+  }
+
+  .work-document-table-margins-grid {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .work-document-table-margins-grid > .work-document-table-margin-field {
+    grid-template-columns: 30px minmax(0, 1fr) 28px;
+    min-height: 44px;
+    font-size: 11px;
+  }
+}
+
 .work-document-ribbon .work-document-font-tools button:not([role="combobox"]), .work-document-ribbon .work-document-paragraph-tools button:not([role="combobox"]) {
   width: 26px;
   min-width: 26px;
@@ -7211,13 +7917,13 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   font-size: 9px;
 }
 
-.work-document-changes-bulk-actions, .work-document-change-list article > div {
+.work-document-changes-bulk-actions, .work-document-change-item > div {
   align-items: center;
   gap: 5px;
   display: flex;
 }
 
-.work-document-changes-bulk-actions button, .work-document-change-list article > div button {
+.work-document-changes-bulk-actions button, .work-document-change-item > div button {
   border: 1px solid var(--a3s-line);
   background: var(--a3s-bg);
   height: 27px;
@@ -7246,12 +7952,14 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 .work-document-change-list {
   gap: 5px;
+  margin: 0;
   padding: 7px 10px 9px;
+  list-style: none;
   display: grid;
   overflow: auto;
 }
 
-.work-document-change-list article {
+.work-document-change-item {
   border: 1px solid var(--a3s-line);
   background: var(--a3s-bg);
   border-left: 3px solid #2d8a58;
@@ -7263,7 +7971,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   display: grid;
 }
 
-.work-document-change-list article.deletion {
+.work-document-change-item.deletion {
   border-left-color: var(--a3s-red);
 }
 
@@ -7288,7 +7996,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   padding: 2px 5px;
 }
 
-.work-document-change-list article.deletion .work-document-change-summary > span {
+.work-document-change-list .work-document-change-item.deletion .work-document-change-summary > span {
   color: var(--a3s-red);
   background: #fff0ee;
 }
@@ -7434,10 +8142,13 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 .work-document-comment-track {
   min-height: calc(100% - 46px);
+  margin: 0;
+  padding: 0;
+  list-style: none;
   position: relative;
 }
 
-.work-document-comment-track > article {
+.work-document-comment-track > .work-document-comment-card, .work-document-comment-track > .work-document-comment-draft-item > .work-document-comment-composer {
   border: 1px solid color-mix(in srgb, #d65c5c 35%, var(--a3s-line));
   background: var(--a3s-panel);
   border-left: 2px solid #d65c5c;
@@ -7453,17 +8164,21 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   box-shadow: 0 5px 16px #22263014;
 }
 
-.work-document-comment-track > article.active {
+.work-document-comment-track > .work-document-comment-card.active {
   border-color: color-mix(in srgb, #d65c5c 70%, var(--a3s-line));
   box-shadow: 0 7px 20px #2226301c, 0 0 0 2px #d65c5c14;
 }
 
-.work-document-comment-track > article.resolved {
+.work-document-comment-track > .work-document-comment-card.resolved {
   border-left-color: var(--a3s-line-strong);
   opacity: .64;
 }
 
-.work-document-comment-track > .work-document-comment-composer {
+.work-document-comment-draft-item, .work-document-comment-empty-item {
+  display: contents;
+}
+
+.work-document-comment-track > .work-document-comment-draft-item > .work-document-comment-composer {
   z-index: 3;
   border-color: color-mix(in srgb, #d65c5c 72%, var(--a3s-line));
   gap: 9px;
@@ -7517,7 +8232,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   line-height: 1.45;
 }
 
-.work-document-comment-track > .work-document-comment-composer > footer {
+.work-document-comment-track > .work-document-comment-draft-item > .work-document-comment-composer > footer {
   justify-content: flex-end;
   gap: 5px;
   display: flex;
@@ -7621,11 +8336,11 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   line-height: 1.45;
 }
 
-.work-document-comment-reply, .work-document-comment-track > article > footer {
+.work-document-comment-reply, .work-document-comment-track > .work-document-comment-card > footer {
   display: none;
 }
 
-.work-document-comment-track > article.active .work-document-comment-reply {
+.work-document-comment-track > .work-document-comment-card.active .work-document-comment-reply {
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: end;
   gap: 6px;
@@ -7640,7 +8355,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   font-size: 9px;
 }
 
-.work-document-comment-track > article.active > footer {
+.work-document-comment-track > .work-document-comment-card.active > footer {
   justify-content: flex-end;
   gap: 5px;
   display: flex;
@@ -7747,7 +8462,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
     min-height: 0 !important;
   }
 
-  .work-document-comment-track > article, .work-document-comment-track > .work-document-comment-composer {
+  .work-document-comment-track > .work-document-comment-card, .work-document-comment-track > .work-document-comment-draft-item > .work-document-comment-composer {
     position: relative;
     left: auto;
     right: auto;
@@ -7821,15 +8536,18 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 .work-document-list-panel {
+  overscroll-behavior: contain;
   border-color: var(--a3s-line-strong);
   background: color-mix(in srgb, var(--a3s-panel) 98%, transparent);
   width: min(300px, 100vw - 32px);
+  max-height: calc(100dvh - 32px);
   color: var(--a3s-ink);
   backdrop-filter: blur(18px);
   border-radius: 10px;
   gap: 8px;
   padding: 10px;
   display: grid;
+  overflow-y: auto;
   box-shadow: 0 16px 38px #0f172a2e;
 }
 
@@ -7998,8 +8716,41 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
     width: calc(100vw - 32px);
   }
 
+  .work-document-list-clear, .work-document-numbering-actions > button, .work-document-numbering-start > button {
+    min-height: 44px;
+    padding: 8px 10px;
+    font-size: 11px;
+  }
+
+  .work-document-list-clear {
+    justify-content: flex-start;
+    justify-self: stretch;
+    width: 100%;
+  }
+
   .work-document-numbering-start {
     grid-template-columns: auto minmax(0, 1fr);
+    gap: 8px;
+    font-size: 11px;
+  }
+
+  .work-document-numbering-start .work-office-number-field {
+    grid-template-columns: minmax(0, 1fr) 88px;
+    height: 44px;
+  }
+
+  .work-document-numbering-start .work-office-number-field > input {
+    font-size: 12px;
+  }
+
+  .work-document-numbering-start .work-office-number-steppers {
+    grid-template-rows: 44px;
+    grid-template-columns: repeat(2, 44px);
+  }
+
+  .work-document-numbering-start .work-office-number-steppers > button:first-child {
+    border-right: 1px solid var(--a3s-line);
+    border-bottom: 0;
   }
 
   .work-document-numbering-start > button {
@@ -8598,7 +9349,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 .work-document-page.paginated {
   box-shadow: none;
-  border-color: #0000;
+  border: 0;
   background-color: #0000 !important;
 }
 
@@ -9049,6 +9800,38 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   margin: 0 0 var(--work-document-render-paragraph-after);
 }
 
+:where(.work-document-page .tiptap, .work-document-preview-page, .work-pdf-export-page.document) :is(p, h1, h2, h3, h4, h5, h6)[data-office-auto-line-height] {
+  line-height: var(--work-document-office-auto-line-height) !important;
+}
+
+:where(.work-document-page .tiptap, .work-document-preview-page, .work-pdf-export-page.document) :is(p, h1, h2, h3, h4, h5, h6)[data-office-auto-line-height] > :where(span, a, strong, em, u, s, code) {
+  top: var(--work-document-office-auto-line-shift, 0);
+  position: relative;
+}
+
+:where(.work-document-page .tiptap, .work-document-preview-page, .work-pdf-export-page.document) :is(p, h1, h2, h3, h4, h5, h6)[data-office-auto-line-height] > :where(span, a, strong, em, u, s, code)[data-office-word-line-height-factor] {
+  line-height: calc(var(--work-document-office-auto-line-multiple, 1) *
+    var(--work-document-word-line-height-factor));
+  top: calc((1 - var(--work-document-office-auto-line-multiple, 1)) *
+    var(--work-document-word-line-height-factor) *
+    .5em);
+}
+
+:where(.work-document-page .tiptap, .work-document-preview-page, .work-pdf-export-page.document) section:is([data-section-document-grid-type="lines"], [data-section-document-grid-type="linesAndChars"], [data-section-document-grid-type="snapToChars"]) :is(p, h1, h2, h3, h4, h5, h6)[data-office-auto-line-height] {
+  line-height: round(up,
+    calc(var(--work-document-office-auto-line-height, 1.15) * 1em),
+    var(--work-document-word-grid-line-pitch)) !important;
+}
+
+:where(.work-document-page .tiptap, .work-document-preview-page, .work-pdf-export-page.document) section:is([data-section-document-grid-type="lines"], [data-section-document-grid-type="linesAndChars"], [data-section-document-grid-type="snapToChars"]) :is(p, h1, h2, h3, h4, h5, h6)[data-office-auto-line-height] > :where(span, a, strong, em, u, s, code)[data-office-word-line-height-factor] {
+  vertical-align: top;
+  line-height: round(up,
+    calc(var(--work-document-office-auto-line-multiple, 1) *
+      var(--work-document-word-line-height-factor) *
+      1em),
+    var(--work-document-word-grid-line-pitch));
+}
+
 .work-document-page .tiptap .work-document-tab, .work-pdf-export-page.document .work-document-tab {
   vertical-align: -.12em;
   white-space: pre;
@@ -9208,22 +9991,22 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   overflow-x: auto;
 }
 
+.work-document-page .tiptap .tableWrapper:has( > table[data-office-table-imported="true"]) {
+  margin: 0;
+}
+
 .work-document-page .tiptap table {
-  table-layout: fixed;
+  table-layout: auto;
   border-collapse: collapse;
-  width: 100%;
+  width: auto;
 }
 
-.work-document-page .tiptap table[data-office-table-layout="contents"] {
+.work-document-page .tiptap table[data-office-table-layout="autofit"], .work-document-page .tiptap table[data-office-table-layout="contents"] {
   table-layout: auto;
-  width: max-content;
-  max-width: 100%;
 }
 
 .work-document-page .tiptap table[data-office-table-layout="fixed"] {
   table-layout: fixed;
-  width: auto;
-  max-width: 100%;
 }
 
 .work-document-page .tiptap table[data-office-table-layout="window"] {
@@ -9232,10 +10015,13 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 .work-document-page .tiptap th, .work-document-page .tiptap td {
+  min-width: 25px;
+  padding: var(--work-table-cell-margin-top, 0px)
+    var(--work-table-cell-margin-right, 7.2px)
+    var(--work-table-cell-margin-bottom, 0px)
+    var(--work-table-cell-margin-left, 7.2px);
   vertical-align: top;
   border: 1px solid #cfd5df;
-  min-width: 80px;
-  padding: 7px 9px;
   position: relative;
 }
 
@@ -9645,16 +10431,18 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 .work-document-preview-page table, .work-document-print-body table {
-  table-layout: fixed;
+  table-layout: auto;
   border-collapse: collapse;
-  width: 100%;
-  max-width: 100%;
+  width: auto;
   margin: 18px 0 22px;
 }
 
-.work-document-preview-page table[data-office-table-layout="contents"], .work-document-print-body table[data-office-table-layout="contents"] {
+.work-document-preview-page table[data-office-table-imported="true"], .work-document-print-body table[data-office-table-imported="true"] {
+  margin: 0;
+}
+
+.work-document-preview-page table[data-office-table-layout="autofit"], .work-document-print-body table[data-office-table-layout="autofit"], .work-document-preview-page table[data-office-table-layout="contents"], .work-document-print-body table[data-office-table-layout="contents"] {
   table-layout: auto;
-  width: max-content;
 }
 
 .work-document-preview-page table[data-office-table-layout="fixed"], .work-document-print-body table[data-office-table-layout="fixed"] {
@@ -9668,10 +10456,13 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 .work-document-preview-page :is(th, td), .work-document-print-body :is(th, td) {
+  min-width: 25px;
+  padding: var(--work-table-cell-margin-top, 0px)
+    var(--work-table-cell-margin-right, 7.2px)
+    var(--work-table-cell-margin-bottom, 0px)
+    var(--work-table-cell-margin-left, 7.2px);
   vertical-align: top;
   border: 1px solid #cfd5df;
-  min-width: 80px;
-  padding: 7px 9px;
 }
 
 .work-document-preview-page th, .work-document-print-body th {
@@ -9796,7 +10587,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   display: grid;
 }
 
-:is(.work-document-preview-page, .work-pdf-export-page.document) img, :is(.work-document-preview-page, .work-pdf-export-page.document) table {
+:is(.work-document-preview-page, .work-pdf-export-page.document) img {
   max-width: 100%;
 }
 
@@ -10242,14 +11033,20 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   align-content: center;
 }
 
-.work-document-change-list article {
+.work-document-change-window-spacer {
+  pointer-events: none;
+  width: 100%;
+  min-height: 0;
+}
+
+.work-document-change-item {
   grid-template-columns: minmax(0, 1fr);
   align-items: stretch;
   gap: 8px;
   padding: 8px;
 }
 
-.work-document-change-list article > div {
+.work-document-change-item > div {
   justify-content: flex-end;
 }
 
@@ -10707,6 +11504,15 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   min-width: 0;
 }
 
+.work-document-outline > ol > li.work-document-navigation-window-spacer, .work-document-search-results > ol > li.work-document-navigation-window-spacer {
+  contain: strict;
+  pointer-events: none;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  display: block;
+}
+
 .work-document-search-result {
   width: 100%;
   min-width: 0;
@@ -10796,6 +11602,12 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   min-width: 0;
 }
 
+.work-document-page-navigation > ol > li.work-document-page-navigation-spacer {
+  contain: strict;
+  pointer-events: none;
+  min-height: 0;
+}
+
 .work-document-page-navigation > ol > li > button {
   width: 100%;
   min-width: 0;
@@ -10838,8 +11650,8 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   border: 1px solid #d7dbe2;
   border-radius: 2px;
   width: min(138px, 100%);
-  padding: 13px 11px;
   display: block;
+  position: relative;
   overflow: hidden;
   box-shadow: 0 3px 10px #1b22301f;
 }
@@ -10849,10 +11661,23 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   width: min(170px, 100%);
 }
 
-.work-document-page-thumbnail > span {
+.work-document-page-thumbnail > img {
+  object-fit: contain;
+  pointer-events: none;
+  -webkit-user-select: none;
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.work-document-page-thumbnail-fallback {
   white-space: normal;
   -webkit-line-clamp: 16;
   -webkit-box-orient: vertical;
+  width: 100%;
+  height: 100%;
+  padding: 13px 11px;
   font-family: ui-serif, Georgia, Times New Roman, Songti SC, serif;
   font-size: 5px;
   line-height: 1.55;
@@ -10860,13 +11685,19 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   overflow: hidden;
 }
 
+.work-document-page-thumbnail[data-thumbnail-state="loading"] .work-document-page-thumbnail-fallback, .work-document-page-thumbnail[data-thumbnail-state="refreshing"] .work-document-page-thumbnail-fallback {
+  opacity: .72;
+}
+
 .work-document-page-thumbnail-label {
   font-variant-numeric: tabular-nums;
   justify-content: center;
   align-items: baseline;
   gap: 6px;
   min-width: 0;
+  min-height: 11px;
   font-size: 9px;
+  line-height: 11px;
   display: flex;
 }
 
@@ -11041,6 +11872,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 .work-markdown-editor {
   --work-office-accent: #586574;
+  --work-markdown-reading-width: 760px;
   --work-markdown-zoom: 100;
   background: var(--a3s-bg);
   flex-direction: column;
@@ -11082,6 +11914,10 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   user-select: none;
 }
 
+.work-markdown-compact-switch {
+  display: none;
+}
+
 .work-markdown-pane {
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
@@ -11136,22 +11972,22 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 .work-markdown-pane-label {
   z-index: 2;
   border-bottom: 1px solid var(--a3s-line);
-  background: color-mix(in srgb, var(--a3s-panel) 94%, transparent);
-  height: 28px;
-  color: var(--a3s-faint);
-  backdrop-filter: blur(10px);
-  flex: 0 0 28px;
+  background: color-mix(in srgb, var(--a3s-panel) 97%, var(--a3s-bg));
+  height: 32px;
+  color: var(--a3s-muted);
+  letter-spacing: .035em;
+  flex: 0 0 32px;
   align-items: center;
-  padding: 0 12px;
-  font-size: 9px;
-  font-weight: 620;
+  padding: 0 16px;
+  font-size: 10px;
+  font-weight: 650;
   display: flex;
   position: sticky;
   top: 0;
 }
 
 .work-markdown-pane.source {
-  background: var(--a3s-panel);
+  background: color-mix(in srgb, var(--a3s-panel) 96%, var(--a3s-bg));
 }
 
 .work-markdown-pane.source textarea {
@@ -11161,7 +11997,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   min-height: 100%;
   color: var(--a3s-ink);
   font-family: var(--font-mono);
-  font-size: calc(13px * var(--work-markdown-zoom) / 100);
+  font-size: calc(14px * var(--work-markdown-zoom) / 100);
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
   tab-size: 2;
@@ -11169,33 +12005,44 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   border: 0;
   outline: 0;
   flex: 1;
-  padding: 34px clamp(24px, 5vw, 72px) 72px;
-  line-height: 1.75;
+  padding: 38px clamp(28px, 5vw, 72px) 80px;
+  line-height: 1.8;
+}
+
+.work-markdown-pane.source textarea::placeholder {
+  color: var(--a3s-faint);
+}
+
+.work-markdown-pane.source textarea::selection {
+  background: color-mix(in srgb, var(--work-office-accent) 18%, transparent);
 }
 
 .work-markdown-workspace.split .work-markdown-pane.source textarea {
-  min-height: calc(100% - 28px);
-  padding: 26px clamp(20px, 3vw, 44px) 60px;
+  min-height: calc(100% - 32px);
+  padding: 32px clamp(24px, 3.5vw, 46px) 72px;
 }
 
 .work-markdown-pane.visual {
-  background: var(--a3s-bg);
+  background: color-mix(in srgb, var(--a3s-bg) 82%, var(--a3s-panel));
 }
 
 .work-markdown-canvas {
   border: 1px solid var(--a3s-line);
   background: var(--a3s-panel);
-  border-radius: 9px;
-  width: min(900px, 100% - 48px);
-  min-height: calc(100% - 48px);
-  margin: 24px auto;
-  box-shadow: 0 8px 28px #161c2812;
+  border-radius: 10px;
+  width: min(880px, 100% - 64px);
+  min-height: calc(100% - 64px);
+  margin: 32px auto;
+  box-shadow: 0 1px 2px #161c280a, 0 12px 34px #161c280d;
 }
 
 .work-markdown-workspace.split .work-markdown-canvas {
-  width: calc(100% - 28px);
-  min-height: calc(100% - 56px);
-  margin: 14px;
+  width: 100%;
+  min-height: calc(100% - 32px);
+  box-shadow: none;
+  border: 0;
+  border-radius: 0;
+  margin: 0;
 }
 
 .work-markdown-canvas > div {
@@ -11204,16 +12051,19 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 .work-markdown-canvas .tiptap {
   min-height: 100%;
+  max-width: var(--work-markdown-reading-width);
   color: var(--a3s-ink);
-  font-size: calc(15px * var(--work-markdown-zoom) / 100);
+  font-family: var(--a3s-ui-font);
+  font-size: calc(16px * var(--work-markdown-zoom) / 100);
   overflow-wrap: anywhere;
   outline: 0;
-  padding: 48px clamp(34px, 7vw, 82px) 90px;
-  line-height: 1.75;
+  margin: 0 auto;
+  padding: 56px clamp(42px, 7vw, 86px) 96px;
+  line-height: 1.8;
 }
 
 .work-markdown-workspace.split .work-markdown-canvas .tiptap {
-  padding: 34px clamp(24px, 4vw, 48px) 68px;
+  padding: 42px clamp(28px, 4vw, 52px) 80px;
 }
 
 .work-markdown-canvas .tiptap > :first-child {
@@ -11226,29 +12076,26 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 .work-markdown-canvas .tiptap h1, .work-markdown-canvas .tiptap h2, .work-markdown-canvas .tiptap h3, .work-markdown-canvas .tiptap h4, .work-markdown-canvas .tiptap h5, .work-markdown-canvas .tiptap h6 {
   color: var(--a3s-ink);
-  margin: 1.4em 0 .55em;
-  font-weight: 720;
-  line-height: 1.28;
+  letter-spacing: -.02em;
+  margin: 1.65em 0 .6em;
+  font-weight: 700;
+  line-height: 1.3;
 }
 
 .work-markdown-canvas .tiptap h1 {
-  border-bottom: 1px solid var(--a3s-line);
-  padding-bottom: .28em;
-  font-size: 2em;
+  font-size: 1.9em;
 }
 
 .work-markdown-canvas .tiptap h2 {
-  border-bottom: 1px solid var(--a3s-line);
-  padding-bottom: .24em;
-  font-size: 1.55em;
+  font-size: 1.45em;
 }
 
 .work-markdown-canvas .tiptap h3 {
-  font-size: 1.25em;
+  font-size: 1.2em;
 }
 
 .work-markdown-canvas .tiptap p {
-  margin: .75em 0;
+  margin: .85em 0;
 }
 
 .work-markdown-canvas .tiptap ul, .work-markdown-canvas .tiptap ol {
@@ -11296,10 +12143,30 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 .work-markdown-canvas .tiptap li[data-type="taskItem"] > label input {
-  width: 14px;
-  height: 14px;
-  accent-color: var(--work-office-accent);
+  border: 1px solid var(--a3s-line-strong);
+  appearance: none;
+  background-color: var(--a3s-panel);
+  opacity: 1;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
   margin: 0;
+  transition: border-color .12s, background-color .12s, box-shadow .12s;
+}
+
+.work-markdown-canvas .tiptap li[data-type="taskItem"] > label input:checked {
+  border-color: var(--work-office-accent);
+  background-color: var(--work-office-accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath d=%27m2.5 6 2.1 2.1L9.5 3.5%27 fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.8%27/%3E%3C/svg%3E");
+}
+
+.work-markdown-canvas .tiptap li[data-type="taskItem"] > label input:not(:disabled):hover {
+  border-color: color-mix(in srgb,
+    var(--work-office-accent) 72%,
+    var(--a3s-line));
 }
 
 .work-markdown-canvas .tiptap li[data-type="taskItem"] > div {
@@ -11313,9 +12180,6 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 .work-markdown-canvas .tiptap li[data-type="taskItem"][data-checked="true"] > div {
   color: var(--a3s-muted);
-  text-decoration: line-through;
-  -webkit-text-decoration-color: color-mix(in srgb, var(--a3s-muted) 65%, transparent);
-  text-decoration-color: color-mix(in srgb, var(--a3s-muted) 65%, transparent);
 }
 
 .work-markdown-canvas .tiptap li[data-type="taskItem"] ul[data-type="taskList"] {
@@ -11324,28 +12188,39 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 .work-markdown-canvas .tiptap blockquote {
-  border-left: 3px solid var(--a3s-line-strong);
+  border-left: 3px solid
+    color-mix(in srgb, var(--work-office-accent) 68%, var(--a3s-line));
+  background: color-mix(in srgb, var(--a3s-panel-soft) 82%, transparent);
   color: var(--a3s-muted);
-  margin: 1em 0;
-  padding: .1em 0 .1em 1em;
+  border-radius: 0 7px 7px 0;
+  margin: 1.25em 0;
+  padding: .7em 1em;
+}
+
+.work-markdown-canvas .tiptap blockquote > :first-child {
+  margin-top: 0;
+}
+
+.work-markdown-canvas .tiptap blockquote > :last-child {
+  margin-bottom: 0;
 }
 
 .work-markdown-canvas .tiptap code {
   background: var(--a3s-panel-soft);
-  color: color-mix(in srgb, var(--a3s-red) 82%, var(--a3s-ink));
+  color: color-mix(in srgb, var(--work-office-accent) 76%, var(--a3s-ink));
   font-family: var(--font-mono);
   border-radius: 4px;
-  padding: .15em .34em;
+  padding: .16em .38em;
   font-size: .9em;
 }
 
 .work-markdown-canvas .tiptap pre {
   border: 1px solid var(--a3s-line);
-  background: var(--a3s-panel-soft);
+  background: color-mix(in srgb, var(--a3s-panel-soft) 90%, var(--a3s-bg));
   color: var(--a3s-ink);
-  border-radius: 8px;
-  margin: 1em 0;
-  padding: 16px 18px;
+  border-radius: 9px;
+  margin: 1.3em 0;
+  padding: 18px 20px;
   line-height: 1.6;
   overflow: auto;
 }
@@ -11379,24 +12254,38 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 .work-markdown-canvas .tiptap table {
-  border-collapse: collapse;
-  table-layout: fixed;
+  border: 1px solid var(--a3s-line-strong);
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: auto;
+  border-radius: 8px;
   width: 100%;
-  margin: 1.25em 0;
+  margin: 1.5em 0;
+  overflow: hidden;
 }
 
 .work-markdown-canvas .tiptap th, .work-markdown-canvas .tiptap td {
-  border: 1px solid var(--a3s-line-strong);
+  border: 0;
+  border-right: 1px solid var(--a3s-line);
+  border-bottom: 1px solid var(--a3s-line);
   vertical-align: top;
   min-width: 80px;
-  padding: 8px 10px;
+  padding: 9px 12px;
   position: relative;
 }
 
+.work-markdown-canvas .tiptap tr > :last-child {
+  border-right: 0;
+}
+
+.work-markdown-canvas .tiptap tr:last-child > * {
+  border-bottom: 0;
+}
+
 .work-markdown-canvas .tiptap th {
-  background: var(--a3s-panel-soft);
+  background: color-mix(in srgb, var(--a3s-panel-soft) 84%, var(--a3s-panel));
   text-align: left;
-  font-weight: 680;
+  font-weight: 660;
 }
 
 .work-markdown-canvas .tiptap th > p, .work-markdown-canvas .tiptap td > p {
@@ -11433,16 +12322,57 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 @media (width <= 640px) {
   .work-markdown-workspace.split {
-    grid-template-rows: repeat(2, minmax(220px, 1fr));
+    grid-template-rows: 56px minmax(0, 1fr);
     grid-template-columns: minmax(0, 1fr);
     display: grid;
   }
 
-  .work-markdown-workspace.split .work-markdown-pane.visual {
-    border-top: 1px solid var(--a3s-line);
+  .work-markdown-compact-switch {
+    z-index: 3;
+    border: 0;
+    border-bottom: 1px solid var(--a3s-line);
+    background: color-mix(in srgb, var(--a3s-panel) 97%, var(--a3s-bg));
+    grid-area: 1 / 1;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 4px;
+    min-width: 0;
+    margin: 0;
+    padding: 6px 12px;
+    display: grid;
+  }
+
+  .work-markdown-compact-switch button {
+    min-width: 0;
+    min-height: 44px;
+    color: var(--a3s-muted);
+    font: inherit;
+    cursor: pointer;
+    background: none;
+    border: 1px solid #0000;
+    border-radius: 7px;
+    padding: 0 14px;
+    font-size: 12px;
+    font-weight: 640;
+  }
+
+  .work-markdown-compact-switch button[aria-pressed="true"] {
+    border-color: var(--a3s-line);
+    background: var(--a3s-panel);
+    color: var(--a3s-ink);
+    box-shadow: 0 1px 2px #161c280f;
+  }
+
+  .work-markdown-compact-switch button:focus-visible {
+    outline: 2px solid
+      color-mix(in srgb, var(--work-office-accent) 48%, transparent);
+    outline-offset: 1px;
+  }
+
+  .work-markdown-workspace.split .work-markdown-pane {
+    grid-area: 2 / 1;
   }
 
-  .work-markdown-splitter {
+  .work-markdown-workspace.split[data-compact-pane="source"] .work-markdown-pane.visual, .work-markdown-workspace.split[data-compact-pane="preview"] .work-markdown-pane.source, .work-markdown-workspace.split .work-markdown-pane-label, .work-markdown-splitter {
     display: none;
   }
 
@@ -11456,8 +12386,21 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   }
 
   .work-markdown-canvas .tiptap {
-    padding-left: 28px;
-    padding-right: 28px;
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+
+  .work-markdown-workspace.split .work-markdown-pane.source textarea {
+    min-height: 100%;
+    padding: 28px 20px 64px;
+  }
+
+  .work-markdown-workspace.split .work-markdown-canvas {
+    min-height: 100%;
+  }
+
+  .work-markdown-workspace.split .work-markdown-canvas .tiptap {
+    padding: 30px 22px 68px;
   }
 
   .work-markdown-status .work-office-save-status {
@@ -11558,10 +12501,35 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 
 @media (width <= 600px) {
   .work-spreadsheet-find-bar {
+    gap: 4px;
     width: auto;
+    min-height: 50px;
+    padding: 4px;
     left: 8px;
     right: 8px;
   }
+
+  .work-spreadsheet-find-bar > svg {
+    display: none;
+  }
+
+  .work-spreadsheet-find-bar > .work-office-text-field {
+    min-width: 96px;
+    height: 40px;
+    min-height: 40px;
+    padding-inline: 9px;
+  }
+
+  .work-spreadsheet-find-bar > output {
+    min-width: 42px;
+  }
+
+  .work-spreadsheet-find-actions .ds-icon-button {
+    border-radius: 7px;
+    width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
 }
 
 .work-spreadsheet-ribbon-toolbar .work-office-select {
@@ -13873,6 +14841,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   min-width: 0;
   min-height: 0;
   display: flex;
+  position: relative;
 }
 
 .work-presentation-workspace {
@@ -15212,6 +16181,92 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
 }
 
 @media (width <= 640px) {
+  .work-presentation-comments-panel {
+    z-index: 32;
+    background: var(--a3s-panel);
+    border-bottom: 0;
+    max-height: none;
+    position: absolute;
+    inset: 0;
+    box-shadow: 0 18px 48px #171c2a38;
+  }
+
+  .work-presentation-comments-panel > header {
+    flex: 0 0 54px;
+    min-height: 54px;
+    padding: 7px 8px 7px 14px;
+  }
+
+  .work-presentation-comments-panel > header strong {
+    font-size: 13px;
+  }
+
+  .work-presentation-comments-panel > header span {
+    font-size: 11px;
+  }
+
+  .work-presentation-comments-panel > header button.close {
+    border-radius: 8px;
+    width: 44px;
+    height: 44px;
+  }
+
+  .work-presentation-comment-list {
+    flex: 1;
+    grid-template-columns: minmax(0, 1fr);
+    align-content: start;
+    gap: 12px;
+    min-height: 0;
+    padding: 12px;
+  }
+
+  .work-presentation-comment-list > article {
+    border-left-width: 4px;
+    border-radius: 10px;
+    gap: 9px;
+    padding: 12px;
+  }
+
+  .work-presentation-comment-location {
+    gap: 7px;
+    min-height: 44px;
+    font-size: 11px;
+  }
+
+  .work-presentation-comment-list > article > header strong {
+    font-size: 12px;
+  }
+
+  .work-presentation-comment-list > article > header time, .work-presentation-comment-list > article > footer {
+    font-size: 10px;
+  }
+
+  .work-presentation-comment-list textarea {
+    resize: none;
+    border-radius: 8px;
+    min-height: 104px;
+    padding: 10px;
+    font-size: 13px;
+    line-height: 1.5;
+  }
+
+  .work-presentation-comment-list > article > footer button {
+    border-radius: 8px;
+    justify-content: center;
+    min-width: 72px;
+    height: 44px;
+    padding: 0 12px;
+    font-size: 11px;
+  }
+
+  .work-presentation-comments-empty.ds-collection-state {
+    min-height: 96px;
+    margin: 0;
+    padding: 14px;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
   .work-presentation-slide-navigation-toggle {
     z-index: 18;
     border: 1px solid var(--a3s-line-strong);