@a3s-lab/office 0.13.1 → 0.15.0

package/dist/styles.css

@@ -4877,7 +4877,7 @@ html[data-ds-resizing="horizontal"], html[data-ds-resizing="horizontal"] * {
   display: grid;
 }
 
-.work-office-checkbox.checked .work-office-checkbox-box {
+.work-office-checkbox.checked .work-office-checkbox-box, .work-office-checkbox.indeterminate .work-office-checkbox-box {
   border-color: var(--work-office-control-accent, var(--a3s-blue));
   background: var(--work-office-control-accent, var(--a3s-blue));
 }
@@ -14985,6 +14985,17 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   grid-template-columns: 20px minmax(0, 1fr);
 }
 
+.work-spreadsheet-find-select-menu > button, .work-spreadsheet-paste-menu > button {
+  grid-template-columns: 20px minmax(0, 1fr) auto;
+}
+
+.work-spreadsheet-ribbon-menu-separator {
+  background: var(--a3s-line);
+  border: 0;
+  height: 1px;
+  margin: 4px 8px;
+}
+
 .work-spreadsheet-ribbon-menu > button > span:last-child {
   white-space: normal;
 }
@@ -15592,6 +15603,839 @@ button.work-office-collaboration-participant:hover .work-office-collaboration-lo
   }
 }
 
+.work-spreadsheet-format-cells-dialog {
+  width: min(680px, 100%);
+}
+
+.work-spreadsheet-format-cells-dialog > .ds-dialog-body {
+  padding-top: 0;
+}
+
+.work-spreadsheet-format-cells-tabs.ds-tabs {
+  border-bottom: 1px solid var(--a3s-line);
+  scrollbar-width: thin;
+  gap: 0;
+  overflow-x: auto;
+}
+
+.work-spreadsheet-format-cells-tabs.ds-tabs > button {
+  flex: 1 0 auto;
+  min-width: max-content;
+  padding-inline: 13px;
+}
+
+.work-spreadsheet-format-cells-dialog form {
+  min-height: 290px;
+}
+
+.work-spreadsheet-format-cells-panel {
+  outline: 0;
+  min-height: 270px;
+  padding: 20px 2px 4px;
+}
+
+.work-spreadsheet-format-cells-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px 20px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-grid.font {
+  align-items: start;
+}
+
+.work-spreadsheet-format-cells-field {
+  min-width: 0;
+  color: var(--a3s-muted);
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-field > .work-office-select, .work-spreadsheet-format-cells-field > .work-office-number-field, .work-spreadsheet-format-cells-field > .work-office-text-field, .work-spreadsheet-format-cells-field > .work-office-color-picker, .work-spreadsheet-format-cells-field > .work-office-select > button[role="combobox"], .work-spreadsheet-format-cells-field .work-office-color-trigger {
+  width: 100%;
+}
+
+.work-spreadsheet-format-cells-field > .work-office-text-field {
+  min-height: 29px;
+}
+
+.work-spreadsheet-format-cells-number {
+  grid-template-columns: minmax(150px, .7fr) minmax(240px, 1.3fr);
+  gap: 16px 20px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-number > [role="alert"], .work-spreadsheet-format-cells-grid > [role="alert"] {
+  color: var(--a3s-red);
+  grid-column: 1 / -1;
+  margin: -8px 0 0;
+  font-size: 11px;
+}
+
+.work-spreadsheet-format-cells-sample {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel-soft);
+  border-radius: 10px;
+  grid-column: 1 / -1;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-content: center;
+  gap: 7px 16px;
+  min-height: 104px;
+  padding: 16px 18px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-sample > span {
+  color: var(--a3s-muted);
+  grid-column: 1 / -1;
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-format-cells-sample > output {
+  color: var(--a3s-ink);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 22px;
+  font-weight: 650;
+  overflow: hidden;
+}
+
+.work-spreadsheet-format-cells-sample > small {
+  color: var(--a3s-muted);
+  font-family: var(--font-mono);
+  align-self: center;
+  font-size: 10px;
+}
+
+.work-spreadsheet-format-cells-options {
+  border: 1px solid var(--a3s-line);
+  border-radius: 8px;
+  gap: 4px;
+  min-width: 0;
+  margin: 0;
+  padding: 9px 12px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-options > legend {
+  color: var(--a3s-muted);
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-format-cells-options.emphasis {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.work-spreadsheet-format-cells-font-preview {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel-soft);
+  text-align: center;
+  border-radius: 9px;
+  grid-column: 1 / -1;
+  place-items: center;
+  min-height: 72px;
+  padding: 12px;
+  display: grid;
+  overflow: hidden;
+}
+
+.work-spreadsheet-format-cells-border {
+  gap: 18px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-border-tools {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-border-layout {
+  grid-template-columns: minmax(190px, .8fr) minmax(220px, 1.2fr);
+  align-items: center;
+  gap: 24px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-border-actions {
+  grid-template-columns: repeat(5, 34px);
+  gap: 8px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-border-actions > .ds-button {
+  grid-column: 1 / -1;
+  justify-self: start;
+}
+
+.work-spreadsheet-border-edge {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel);
+  cursor: pointer;
+  border-radius: 7px;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  padding: 7px;
+  display: grid;
+  position: relative;
+}
+
+.work-spreadsheet-border-edge:hover, .work-spreadsheet-border-edge[aria-pressed="true"] {
+  border-color: color-mix(in srgb, var(--a3s-green) 48%, var(--a3s-line));
+  background: color-mix(in srgb, var(--a3s-green) 9%, var(--a3s-panel));
+}
+
+.work-spreadsheet-border-edge > span {
+  border: 1px solid var(--a3s-line-strong);
+  width: 18px;
+  height: 18px;
+  position: relative;
+}
+
+.work-spreadsheet-border-edge.top > span {
+  border-top: 2px solid;
+}
+
+.work-spreadsheet-border-edge.bottom > span {
+  border-bottom: 2px solid;
+}
+
+.work-spreadsheet-border-edge.left > span {
+  border-left: 2px solid;
+}
+
+.work-spreadsheet-border-edge.right > span {
+  border-right: 2px solid;
+}
+
+.work-spreadsheet-border-edge.diagonal > span:after {
+  content: "";
+  border-top: 2px solid;
+  width: 20px;
+  position: absolute;
+  top: 8px;
+  left: -2px;
+  transform: rotate(-45deg);
+}
+
+.work-spreadsheet-format-cells-border-preview {
+  border: 1px dashed var(--a3s-line-strong);
+  background: var(--a3s-panel-soft);
+  justify-self: center;
+  place-items: center;
+  width: min(220px, 100%);
+  height: 126px;
+  display: grid;
+  position: relative;
+}
+
+.work-spreadsheet-format-cells-border-preview > span {
+  pointer-events: none;
+  position: absolute;
+  inset: 10px;
+}
+
+.work-spreadsheet-format-cells-border-preview > .diagonal {
+  inset: 50% 5%;
+  transform: rotate(-26deg);
+}
+
+.work-spreadsheet-format-cells-border-preview > strong {
+  color: var(--a3s-muted);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.work-spreadsheet-format-cells-fill {
+  grid-template-columns: minmax(190px, 1fr) auto;
+  align-items: end;
+  gap: 16px;
+  max-width: 430px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-fill-preview {
+  border: 1px solid var(--a3s-line);
+  min-height: 118px;
+  color: var(--a3s-ink);
+  border-radius: 9px;
+  grid-column: 1 / -1;
+  place-items: center;
+  font-size: 11px;
+  font-weight: 650;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-fill-preview.empty {
+  background: var(--a3s-panel-soft);
+  color: var(--a3s-muted);
+}
+
+.work-spreadsheet-format-cells-protection {
+  gap: 8px;
+  max-width: 460px;
+  display: grid;
+}
+
+.work-spreadsheet-format-cells-protection > p, .work-spreadsheet-format-cells-mixed {
+  color: var(--a3s-muted);
+  margin: 8px 0 0;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.work-spreadsheet-format-cells-mixed {
+  grid-column: 1 / -1;
+}
+
+@media (width <= 620px) {
+  .work-spreadsheet-format-cells-dialog form {
+    min-height: 360px;
+  }
+
+  .work-spreadsheet-format-cells-panel {
+    min-height: 340px;
+  }
+
+  .work-spreadsheet-format-cells-grid, .work-spreadsheet-format-cells-number, .work-spreadsheet-format-cells-border-tools, .work-spreadsheet-format-cells-border-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .work-spreadsheet-format-cells-border-layout {
+    align-items: start;
+  }
+
+  .work-spreadsheet-format-cells-border-preview {
+    width: 100%;
+    height: 100px;
+  }
+
+  .work-spreadsheet-format-cells-fill {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .work-spreadsheet-format-cells-fill-preview {
+    grid-column: 1;
+  }
+}
+
+.work-spreadsheet-data-validation-dialog {
+  --work-office-control-accent: var(--work-spreadsheet-accent, #159469);
+  width: min(640px, 100%);
+}
+
+.work-spreadsheet-data-validation-dialog form {
+  gap: 18px;
+  display: grid;
+}
+
+.work-spreadsheet-data-validation-dialog section {
+  gap: 12px;
+  min-width: 0;
+  display: grid;
+}
+
+.work-spreadsheet-data-validation-dialog section + section {
+  border-top: 1px solid var(--a3s-line);
+  padding-top: 16px;
+}
+
+.work-spreadsheet-data-validation-dialog h3 {
+  color: var(--a3s-ink);
+  margin: 0;
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-data-validation-scope {
+  background: var(--a3s-panel-soft);
+  border-radius: 8px;
+  grid-template-columns: 32px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 9px 11px;
+  display: grid;
+}
+
+.work-spreadsheet-data-validation-scope > span {
+  background: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 11%,
+    var(--a3s-panel));
+  width: 32px;
+  height: 32px;
+  color: var(--work-spreadsheet-accent, #159469);
+  border-radius: 7px;
+  place-items: center;
+  display: grid;
+}
+
+.work-spreadsheet-data-validation-scope > div {
+  gap: 2px;
+  min-width: 0;
+  display: grid;
+}
+
+.work-spreadsheet-data-validation-scope strong, .work-spreadsheet-data-validation-scope small {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.work-spreadsheet-data-validation-scope strong {
+  color: var(--a3s-ink);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-data-validation-scope small {
+  color: var(--a3s-muted);
+  font-size: 10px;
+}
+
+.work-spreadsheet-data-validation-mixed {
+  color: color-mix(in srgb, var(--a3s-ink) 74%, #9a6900);
+  margin: -6px 0 0;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.work-spreadsheet-data-validation-section-heading {
+  color: var(--work-spreadsheet-accent, #159469);
+  align-items: center;
+  gap: 7px;
+  display: flex;
+}
+
+.work-spreadsheet-data-validation-condition-grid, .work-spreadsheet-data-validation-values.two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  display: grid;
+}
+
+.work-spreadsheet-data-validation-values {
+  gap: 8px;
+  min-width: 0;
+  display: grid;
+}
+
+.work-spreadsheet-data-validation-inline-error {
+  color: var(--a3s-danger, #c23535);
+  grid-column: 1 / -1;
+  font-size: 10px;
+}
+
+.work-spreadsheet-data-validation-behavior {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  display: grid;
+}
+
+.work-spreadsheet-data-validation-behavior .work-office-checkbox {
+  min-height: 40px;
+  padding: 8px 10px;
+}
+
+.work-spreadsheet-data-validation-dialog textarea {
+  resize: vertical;
+  min-height: 70px;
+}
+
+.work-spreadsheet-data-validation-error {
+  color: var(--a3s-danger, #c23535);
+  margin: 0;
+  font-size: 11px;
+}
+
+.work-spreadsheet-data-validation-remove {
+  margin-right: auto;
+}
+
+@media (width <= 560px) {
+  .work-spreadsheet-data-validation-condition-grid, .work-spreadsheet-data-validation-values.two, .work-spreadsheet-data-validation-behavior {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.work-spreadsheet-hyperlink-dialog {
+  --work-office-control-accent: var(--work-spreadsheet-accent, #159469);
+  width: min(610px, 100%);
+}
+
+.work-spreadsheet-hyperlink-dialog form {
+  gap: 18px;
+  display: grid;
+}
+
+.work-spreadsheet-hyperlink-types {
+  border: 0;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.work-spreadsheet-hyperlink-types > legend {
+  color: var(--a3s-muted);
+  margin-bottom: 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.work-spreadsheet-hyperlink-types > div {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 7px;
+  display: grid;
+}
+
+.work-spreadsheet-hyperlink-types label {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel);
+  min-width: 0;
+  min-height: 62px;
+  color: var(--a3s-muted);
+  cursor: pointer;
+  border-radius: 8px;
+  grid-template-columns: 20px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 9px 10px;
+  display: grid;
+  position: relative;
+}
+
+.work-spreadsheet-hyperlink-types label:hover {
+  border-color: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 42%,
+    var(--a3s-line));
+}
+
+.work-spreadsheet-hyperlink-types label.selected {
+  border-color: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 58%,
+    var(--a3s-line));
+  background: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 8%,
+    var(--a3s-panel));
+  color: var(--work-spreadsheet-accent, #159469);
+}
+
+.work-spreadsheet-hyperlink-types label:has(input:focus-visible) {
+  outline: 2px solid
+    color-mix(in srgb, var(--work-spreadsheet-accent, #159469) 38%, transparent);
+  outline-offset: 2px;
+}
+
+.work-spreadsheet-hyperlink-types input {
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+}
+
+.work-spreadsheet-hyperlink-types label > span {
+  gap: 1px;
+  min-width: 0;
+  display: grid;
+}
+
+.work-spreadsheet-hyperlink-types strong, .work-spreadsheet-hyperlink-types small {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.work-spreadsheet-hyperlink-types strong {
+  color: var(--a3s-ink);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-hyperlink-types small {
+  color: var(--a3s-muted);
+  font-size: 9px;
+}
+
+.work-spreadsheet-hyperlink-preview {
+  background: var(--a3s-panel-soft);
+  border-radius: 8px;
+  grid-template-columns: 30px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  min-height: 56px;
+  padding: 9px 11px;
+  display: grid;
+}
+
+.work-spreadsheet-hyperlink-preview > span {
+  background: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 11%,
+    var(--a3s-panel));
+  width: 30px;
+  height: 30px;
+  color: var(--work-spreadsheet-accent, #159469);
+  border-radius: 7px;
+  place-items: center;
+  display: grid;
+}
+
+.work-spreadsheet-hyperlink-preview > div {
+  gap: 1px;
+  min-width: 0;
+  display: grid;
+}
+
+.work-spreadsheet-hyperlink-preview strong, .work-spreadsheet-hyperlink-preview small {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.work-spreadsheet-hyperlink-preview strong {
+  color: var(--a3s-ink);
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-hyperlink-preview small {
+  color: var(--a3s-muted);
+  font-size: 10px;
+}
+
+.work-spreadsheet-hyperlink-remove {
+  margin-right: auto;
+}
+
+@media (width <= 560px) {
+  .work-spreadsheet-hyperlink-types > div {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .work-spreadsheet-hyperlink-types label {
+    min-height: 50px;
+  }
+}
+
+.work-spreadsheet-paste-special-dialog {
+  --work-office-control-accent: var(--work-spreadsheet-accent, #159469);
+  width: min(660px, 100%);
+}
+
+.work-spreadsheet-paste-special-dialog > .ds-dialog-body {
+  padding-top: 0;
+}
+
+.work-spreadsheet-paste-special-source {
+  background: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 7%,
+    var(--a3s-panel-soft));
+  min-height: 34px;
+  color: var(--a3s-muted);
+  border-radius: 7px;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 15px;
+  padding: 0 11px;
+  font-size: 11px;
+  display: flex;
+}
+
+.work-spreadsheet-paste-special-source strong {
+  color: var(--a3s-ink);
+  font-weight: 650;
+}
+
+.work-spreadsheet-paste-special-dialog form {
+  grid-template-columns: minmax(0, 1.55fr) minmax(170px, .75fr);
+  align-items: start;
+  gap: 18px 22px;
+  display: grid;
+}
+
+.work-spreadsheet-paste-special-dialog fieldset {
+  border: 0;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.work-spreadsheet-paste-special-dialog legend {
+  width: 100%;
+  color: var(--a3s-muted);
+  margin-bottom: 8px;
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.work-spreadsheet-paste-special-modes {
+  grid-row: span 2;
+}
+
+.work-spreadsheet-paste-special-modes > div {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 3px;
+  display: grid;
+}
+
+.work-spreadsheet-paste-special-modes label {
+  min-height: 37px;
+  color: var(--a3s-ink);
+  cursor: pointer;
+  border-radius: 7px;
+  grid-template-columns: 14px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  font-size: 11px;
+  display: grid;
+  position: relative;
+}
+
+.work-spreadsheet-paste-special-modes label:hover {
+  background: var(--a3s-panel-soft);
+}
+
+.work-spreadsheet-paste-special-modes label.selected {
+  background: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 10%,
+    var(--a3s-panel));
+}
+
+.work-spreadsheet-paste-special-modes label:has(input:focus-visible), .work-spreadsheet-paste-special-operations label:has(input:focus-visible) {
+  outline: 2px solid
+    color-mix(in srgb, var(--work-spreadsheet-accent, #159469) 32%, transparent);
+  outline-offset: 1px;
+}
+
+.work-spreadsheet-paste-special-modes label:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: .48;
+}
+
+.work-spreadsheet-paste-special-modes input, .work-spreadsheet-paste-special-operations input {
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  position: absolute;
+}
+
+.work-spreadsheet-paste-special-modes label > span[aria-hidden="true"] {
+  box-sizing: border-box;
+  border: 1px solid var(--a3s-line-strong);
+  background: var(--a3s-panel);
+  border-radius: 50%;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  display: grid;
+}
+
+.work-spreadsheet-paste-special-modes label.selected > span[aria-hidden="true"] {
+  border: 4px solid var(--work-spreadsheet-accent, #159469);
+}
+
+.work-spreadsheet-paste-special-modes small {
+  color: var(--a3s-muted);
+  grid-column: 2;
+  margin-top: -2px;
+  font-size: 9px;
+  line-height: 1.2;
+}
+
+.work-spreadsheet-paste-special-operations > div {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px;
+  display: grid;
+}
+
+.work-spreadsheet-paste-special-operations label {
+  border: 1px solid var(--a3s-line);
+  background: var(--a3s-panel);
+  min-height: 30px;
+  color: var(--a3s-muted);
+  cursor: pointer;
+  border-radius: 6px;
+  place-items: center;
+  font-size: 10px;
+  display: grid;
+  position: relative;
+}
+
+.work-spreadsheet-paste-special-operations label:first-child {
+  grid-column: 1 / -1;
+}
+
+.work-spreadsheet-paste-special-operations label:hover {
+  border-color: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 42%,
+    var(--a3s-line));
+}
+
+.work-spreadsheet-paste-special-operations label.selected {
+  border-color: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 58%,
+    var(--a3s-line));
+  background: color-mix(in srgb,
+    var(--work-spreadsheet-accent, #159469) 9%,
+    var(--a3s-panel));
+  color: var(--a3s-ink);
+  font-weight: 650;
+}
+
+.work-spreadsheet-paste-special-operations label:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: .42;
+}
+
+.work-spreadsheet-paste-special-options {
+  gap: 8px;
+  padding-top: 2px;
+  display: grid;
+}
+
+.work-spreadsheet-paste-special-options .work-office-checkbox {
+  min-height: 28px;
+}
+
+.work-spreadsheet-paste-special-error {
+  background: color-mix(in srgb, var(--a3s-red) 8%, var(--a3s-panel));
+  color: color-mix(in srgb, var(--a3s-red) 88%, var(--a3s-ink));
+  border-radius: 6px;
+  grid-column: 1 / -1;
+  margin: -4px 0 0;
+  padding: 8px 10px;
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+@media (width <= 620px) {
+  .work-spreadsheet-paste-special-dialog form {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 16px;
+  }
+
+  .work-spreadsheet-paste-special-modes {
+    grid-row: auto;
+  }
+
+  .work-spreadsheet-paste-special-options {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (width <= 420px) {
+  .work-spreadsheet-paste-special-modes > div, .work-spreadsheet-paste-special-options {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
 .work-spreadsheet-chart-manager {
   border: 0;
   grid-template-columns: minmax(180px, 230px) minmax(720px, 1fr);