@echothink-ui/documents 0.1.0

package/src/styles.css

@@ -0,0 +1,962 @@
+@import "@echothink-ui/core/styles.css";
+
+.eth-doc-editor-shell {
+  --eth-doc-editor-shell-padding: var(--eth-space-lg);
+  --eth-doc-editor-shell-page-padding: var(--eth-space-2xl);
+  --eth-doc-editor-shell-min-block: 32rem;
+
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  font-family: var(--eth-font-family), "IBM Plex Sans", sans-serif;
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow: hidden;
+}
+
+.eth-doc-editor-shell--compact {
+  --eth-doc-editor-shell-padding: var(--eth-space-md);
+  --eth-doc-editor-shell-page-padding: var(--eth-space-xl);
+  --eth-doc-editor-shell-min-block: 28rem;
+}
+
+.eth-doc-editor-shell--comfortable {
+  --eth-doc-editor-shell-padding: var(--eth-space-xl);
+  --eth-doc-editor-shell-page-padding: var(--eth-space-3xl);
+  --eth-doc-editor-shell-min-block: 36rem;
+}
+
+.eth-doc-editor-shell__bar {
+  align-items: flex-start;
+  background: var(--eth-color-layer-01);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  gap: var(--eth-space-lg);
+  justify-content: space-between;
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-doc-editor-shell__title {
+  min-inline-size: 0;
+}
+
+.eth-doc-editor-shell__title h2 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1.75rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.25;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-doc-editor-shell__status {
+  align-items: center;
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+  justify-content: flex-end;
+  max-inline-size: 100%;
+}
+
+.eth-doc-lock-badge {
+  --eth-doc-lock-badge-block-size: 1.5rem;
+
+  display: inline-flex;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  vertical-align: middle;
+}
+
+.eth-doc-lock-badge--comfortable {
+  --eth-doc-lock-badge-block-size: 1.75rem;
+}
+
+.eth-doc-lock-badge__tag {
+  block-size: var(--eth-doc-lock-badge-block-size);
+  margin: 0;
+  max-inline-size: 100%;
+}
+
+.eth-doc-lock-badge__tag .cds--tag__label {
+  align-items: center;
+  display: inline-flex;
+  max-inline-size: min(20rem, 100%);
+  min-inline-size: 0;
+}
+
+.eth-doc-lock-badge__content {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--eth-space-xs);
+  max-inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-doc-lock-badge__icon {
+  block-size: 0.75rem;
+  flex: 0 0 auto;
+  inline-size: 0.75rem;
+}
+
+.eth-doc-lock-badge__label,
+.eth-doc-lock-badge__detail {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.eth-doc-lock-badge__label {
+  font-weight: 600;
+}
+
+.eth-doc-lock-badge__detail {
+  color: color-mix(in srgb, currentColor 72%, var(--eth-color-text-secondary));
+  font-weight: 400;
+}
+
+.eth-doc-lock-badge__tag--locked-by-agent {
+  background-color: var(--eth-color-warning, #fcf4d6);
+  color: #684e00;
+}
+
+.eth-doc-editor-shell__toolbar {
+  background: var(--eth-color-layer-02);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  inline-size: 100%;
+  min-inline-size: 0;
+  overflow-x: auto;
+}
+
+.eth-doc-toolbar {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  inline-size: 100%;
+  min-block-size: 3rem;
+  min-inline-size: 0;
+  padding-inline: var(--eth-space-xs);
+}
+
+.eth-doc-toolbar:empty {
+  display: none;
+}
+
+.eth-doc-toolbar__group {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--eth-space-xs);
+  min-block-size: 3rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-sm);
+}
+
+.eth-doc-toolbar__group + .eth-doc-toolbar__group {
+  border-inline-start: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-doc-toolbar__group--actions {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.eth-doc-toolbar__group--mode {
+  gap: 0;
+}
+
+.eth-doc-toolbar__group--mode .eth-doc-toolbar__mode-button + .eth-doc-toolbar__mode-button {
+  margin-inline-start: -1px;
+}
+
+.eth-doc-toolbar__mode-button.eth-button {
+  min-inline-size: 4.5rem;
+}
+
+.eth-doc-toolbar__action.eth-button {
+  min-inline-size: max-content;
+}
+
+.eth-doc-toolbar__action .eth-button__icon,
+.eth-doc-toolbar__action-icon,
+.eth-doc-toolbar__icon-link .eth-button__icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+}
+
+.eth-doc-toolbar__action-icon {
+  margin-inline-end: var(--eth-space-sm);
+}
+
+.eth-doc-toolbar__format-symbol {
+  align-items: center;
+  color: currentcolor;
+  display: inline-flex;
+  font-family: var(--eth-font-family);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-style: normal;
+  font-weight: 600;
+  inline-size: 1rem;
+  justify-content: center;
+  line-height: 1;
+}
+
+.eth-doc-toolbar__format-symbol--underline {
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+}
+
+.eth-doc-toolbar__format-symbol--strike {
+  text-decoration: line-through;
+}
+
+.eth-doc-toolbar__icon-link {
+  align-items: center;
+  block-size: 2.5rem;
+  color: var(--eth-color-link);
+  display: inline-flex;
+  inline-size: 2.5rem;
+  justify-content: center;
+  min-inline-size: 2.5rem;
+  padding: 0;
+  text-decoration: none;
+}
+
+.eth-doc-toolbar__icon-link:hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-doc-toolbar__link--disabled {
+  color: var(--eth-color-text-helper);
+  cursor: not-allowed;
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+@media (width <= 42rem) {
+  .eth-doc-toolbar {
+    align-items: stretch;
+    padding-inline: 0;
+  }
+
+  .eth-doc-toolbar__group,
+  .eth-doc-toolbar__group--actions {
+    inline-size: 100%;
+    justify-content: flex-start;
+    margin-inline-start: 0;
+  }
+
+  .eth-doc-toolbar__group + .eth-doc-toolbar__group {
+    border-block-start: 1px solid var(--eth-color-border-subtle);
+    border-inline-start: 0;
+  }
+
+  .eth-doc-toolbar__group--actions .eth-doc-toolbar__action.eth-button {
+    flex: 1 1 9rem;
+  }
+}
+
+.eth-doc-editor-shell__grid {
+  align-items: start;
+  background: var(--eth-color-background);
+  display: grid;
+  gap: var(--eth-space-lg);
+  grid-template-columns: var(--eth-doc-editor-shell-grid-template, minmax(0, 1fr));
+  min-block-size: var(--eth-doc-editor-shell-min-block);
+  min-inline-size: 0;
+  padding: var(--eth-doc-editor-shell-padding);
+}
+
+.eth-doc-editor-shell__outline,
+.eth-doc-editor-shell__editor,
+.eth-doc-editor-shell__inspector {
+  min-inline-size: 0;
+}
+
+.eth-doc-editor-shell__editor {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  min-block-size: calc(var(--eth-doc-editor-shell-min-block) - 2rem);
+  overflow: auto;
+  padding: var(--eth-doc-editor-shell-page-padding);
+}
+
+.eth-doc-editor-shell__editor :where(h1, h2, h3, p, ul, ol) {
+  max-inline-size: 46rem;
+}
+
+.eth-doc-editor-shell__editor :where(h1, h2, h3) {
+  color: var(--eth-color-text-primary);
+  font-weight: 400;
+  letter-spacing: 0;
+  margin-block: 0 var(--eth-space-md);
+}
+
+.eth-doc-editor-shell__editor :where(h1) {
+  font-size: calc(2.625rem * var(--eth-text-scale, 1));
+  line-height: 1.19;
+}
+
+.eth-doc-editor-shell__editor :where(h2) {
+  font-size: calc(1.75rem * var(--eth-text-scale, 1));
+  line-height: 1.2857;
+  margin-block-start: var(--eth-space-2xl);
+}
+
+.eth-doc-editor-shell__editor :where(h3) {
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.375;
+  margin-block-start: var(--eth-space-xl);
+}
+
+.eth-doc-editor-shell__editor :where(p, li) {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  line-height: 1.5;
+}
+
+.eth-doc-editor-shell__editor :where(p) {
+  margin-block: 0 var(--eth-space-lg);
+}
+
+.eth-doc-editor-shell__inspector {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  min-block-size: calc(var(--eth-doc-editor-shell-min-block) - 2rem);
+}
+
+.eth-doc-editor-shell__inspector-stack {
+  display: grid;
+}
+
+.eth-doc-editor-shell__inspector > :not(.eth-doc-editor-shell__inspector-stack) {
+  margin: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-doc-editor-shell__inspector-stack > section {
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-md);
+  padding: var(--eth-space-lg);
+}
+
+.eth-doc-editor-shell__inspector-stack > section:last-child {
+  border-block-end: 0;
+}
+
+.eth-doc-editor-shell__inspector :where(h3) {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  margin: 0;
+}
+
+.eth-doc-editor-shell__inspector :where(p, li, dd, dt) {
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+}
+
+.eth-doc-editor-shell__inspector :where(p, ul, ol, dl) {
+  margin: 0;
+}
+
+.eth-doc-editor-shell__inspector :where(ul, ol) {
+  display: grid;
+  gap: var(--eth-space-sm);
+  padding-inline-start: var(--eth-space-lg);
+}
+
+.eth-doc-editor-shell__inspector :where(dl) {
+  display: grid;
+  gap: var(--eth-space-sm);
+}
+
+.eth-doc-editor-shell__inspector :where(dl > div) {
+  display: grid;
+  gap: var(--eth-space-2xs);
+}
+
+.eth-doc-editor-shell__inspector :where(dt) {
+  color: var(--eth-color-text-secondary);
+}
+
+.eth-doc-editor-shell__inspector :where(dd) {
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+  margin: 0;
+}
+
+.eth-doc-outline {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  inline-size: 100%;
+  max-inline-size: 20rem;
+  min-inline-size: 14rem;
+  overflow: hidden;
+}
+
+.eth-doc-outline__header {
+  align-items: baseline;
+  background: var(--eth-color-layer-02);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+  min-inline-size: 0;
+  padding: var(--eth-space-md) var(--eth-space-lg);
+}
+
+.eth-doc-outline__label {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.3333;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.eth-doc-outline__count {
+  color: var(--eth-color-text-secondary);
+  flex: 0 0 auto;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  white-space: nowrap;
+}
+
+.eth-doc-outline__list {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 0;
+  padding: var(--eth-space-xs) 0;
+}
+
+.eth-doc-outline__list .eth-doc-outline__list {
+  border-inline-start: 1px solid var(--eth-color-border-subtle);
+  margin-inline-start: var(--eth-space-lg);
+  padding-block: 0;
+}
+
+.eth-doc-outline__item {
+  min-inline-size: 0;
+  position: relative;
+}
+
+.eth-doc-outline__link {
+  align-items: center;
+  color: var(--eth-color-text-primary);
+  display: flex;
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  gap: var(--eth-space-sm);
+  line-height: 1.4286;
+  min-block-size: 2rem;
+  min-inline-size: 0;
+  padding: var(--eth-space-sm) var(--eth-space-lg);
+  position: relative;
+  text-decoration: none;
+}
+
+.eth-doc-outline__link:hover {
+  background: var(--eth-color-layer-hover);
+  color: var(--eth-color-text-primary);
+}
+
+.eth-doc-outline__link:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-doc-outline__text {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-doc-outline__item--level-1 > .eth-doc-outline__link {
+  font-weight: 600;
+}
+
+.eth-doc-outline__item--level-3 > .eth-doc-outline__link,
+.eth-doc-outline__item--level-4 > .eth-doc-outline__link {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.8125rem * var(--eth-text-scale, 1));
+}
+
+.eth-doc-outline__item--active > .eth-doc-outline__link {
+  background: var(--eth-color-layer-selected);
+  box-shadow: inset 3px 0 0 var(--eth-color-interactive-primary);
+  color: var(--eth-color-text-primary);
+  font-weight: 600;
+}
+
+.eth-doc-outline__item--active > .eth-doc-outline__link:hover {
+  background: var(--eth-color-layer-selected);
+}
+
+.eth-doc-outline__item--contains-active > .eth-doc-outline__link {
+  color: var(--eth-color-text-primary);
+}
+
+.eth-doc-outline__empty {
+  border: 1px dashed var(--eth-color-border-subtle);
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: var(--eth-space-lg);
+  padding: var(--eth-space-lg);
+}
+
+.eth-doc-viewer {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.eth-doc-viewer__header {
+  align-items: flex-start;
+  background: var(--eth-color-layer-02);
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  gap: var(--eth-space-lg);
+  justify-content: space-between;
+  padding: var(--eth-space-lg) var(--eth-space-xl);
+}
+
+.eth-doc-viewer__header h2 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1.25rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.4;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.eth-doc-viewer__metadata.eth-meta-grid {
+  background: var(--eth-color-layer-01);
+  border: 0;
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.eth-doc-viewer__metadata.eth-meta-grid div {
+  border-inline-end: 1px solid var(--eth-color-border-subtle);
+  flex: 0 1 13rem;
+  min-inline-size: 11rem;
+  padding: var(--eth-space-md) var(--eth-space-xl);
+}
+
+.eth-doc-viewer__metadata.eth-meta-grid dt {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+}
+
+.eth-doc-viewer__metadata.eth-meta-grid dd {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  overflow-wrap: anywhere;
+}
+
+.eth-doc-viewer__body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-inline-size: 0;
+}
+
+.eth-doc-viewer--with-annotations .eth-doc-viewer__body {
+  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
+}
+
+.eth-doc-viewer__content {
+  min-inline-size: 0;
+  padding: var(--eth-space-xl);
+}
+
+.eth-doc-viewer--with-annotations .eth-doc-viewer__content {
+  border-inline-end: 1px solid var(--eth-color-border-subtle);
+}
+
+.eth-doc-viewer__content > :first-child {
+  margin-block-start: 0;
+}
+
+.eth-doc-viewer__content > :last-child {
+  margin-block-end: 0;
+}
+
+.eth-doc-viewer__content :where(article) {
+  display: grid;
+  gap: var(--eth-space-xl);
+  max-inline-size: 50rem;
+}
+
+.eth-doc-viewer__content :where(section) {
+  display: grid;
+  gap: var(--eth-space-sm);
+}
+
+.eth-doc-viewer__content :where(h1, h2, h3, h4, p, ul, ol, blockquote, pre) {
+  margin: 0;
+}
+
+.eth-doc-viewer__content :where(h1) {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1.75rem * var(--eth-text-scale, 1));
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 1.2857;
+}
+
+.eth-doc-viewer__content :where(h2) {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.375;
+}
+
+.eth-doc-viewer__content :where(h3, h4) {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.4286;
+}
+
+.eth-doc-viewer__content :where(p, li) {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.5715;
+}
+
+.eth-doc-viewer__content :where(ul, ol) {
+  display: grid;
+  gap: var(--eth-space-xs);
+  padding-inline-start: var(--eth-space-xl);
+}
+
+.eth-doc-viewer__content :where(a) {
+  color: var(--eth-color-link);
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+}
+
+.eth-doc-viewer__content :where(a:focus-visible) {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: 2px;
+}
+
+.eth-doc-viewer__annotations {
+  background: var(--eth-color-layer-02);
+  min-inline-size: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-doc-viewer__annotations h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(1rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  letter-spacing: 0;
+  line-height: 1.375;
+  margin: 0 0 var(--eth-space-md);
+}
+
+.eth-doc-viewer__annotations ul {
+  display: grid;
+  gap: var(--eth-space-md);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.eth-doc-viewer__annotation {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  padding: var(--eth-space-md);
+}
+
+.eth-doc-viewer__annotation-header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--eth-space-sm);
+}
+
+.eth-doc-viewer__annotation-header strong {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  min-inline-size: 0;
+}
+
+.eth-doc-viewer__annotation-header .cds--tag {
+  margin: 0;
+}
+
+.eth-doc-viewer__annotation-header time {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  margin-inline-start: auto;
+  white-space: nowrap;
+}
+
+.eth-doc-viewer__annotation p {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: var(--eth-space-sm) 0 0;
+}
+
+.eth-doc-agent-lock-panel {
+  inline-size: 100%;
+  max-inline-size: 62rem;
+}
+
+.eth-doc-agent-lock-panel .eth-surface__subtitle {
+  max-inline-size: 48rem;
+}
+
+.eth-doc-agent-lock-panel .eth-meta-grid {
+  background: var(--eth-color-layer-02);
+}
+
+.eth-doc-agent-lock-panel .eth-meta-grid dd {
+  align-items: center;
+  display: flex;
+  gap: var(--eth-space-sm);
+  min-block-size: 1.5rem;
+  min-inline-size: 0;
+}
+
+.eth-doc-agent-lock-panel .eth-meta-grid .cds--tag {
+  margin: 0;
+}
+
+.eth-doc-agent-lock-panel__notice .cds--inline-notification {
+  inline-size: 100%;
+  margin: 0;
+  max-inline-size: none;
+}
+
+.eth-doc-agent-lock-panel__changes-section {
+  display: grid;
+  gap: var(--eth-space-md);
+}
+
+.eth-doc-agent-lock-panel__changes-header {
+  align-items: center;
+  display: flex;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+}
+
+.eth-doc-agent-lock-panel__changes-header h3 {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  margin: 0;
+}
+
+.eth-doc-agent-lock-panel__count {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  white-space: nowrap;
+}
+
+.eth-doc-agent-lock-panel__changes {
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  counter-reset: pending-change;
+  display: grid;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.eth-doc-agent-lock-panel__change {
+  border-block-end: 1px solid var(--eth-color-border-subtle);
+  counter-increment: pending-change;
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: 1.5rem minmax(0, 1fr);
+  padding: var(--eth-space-md);
+}
+
+.eth-doc-agent-lock-panel__change:last-child {
+  border-block-end: 0;
+}
+
+.eth-doc-agent-lock-panel__change::before {
+  align-items: center;
+  background: var(--eth-color-layer-01);
+  block-size: 1.5rem;
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-secondary);
+  content: counter(pending-change);
+  display: inline-flex;
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  inline-size: 1.5rem;
+  justify-content: center;
+  line-height: 1;
+}
+
+.eth-doc-agent-lock-panel__change-body {
+  display: grid;
+  gap: var(--eth-space-sm);
+  min-inline-size: 0;
+}
+
+.eth-doc-agent-lock-panel__summary {
+  color: var(--eth-color-text-primary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  font-weight: 600;
+  line-height: 1.4286;
+  overflow-wrap: anywhere;
+}
+
+.eth-doc-agent-lock-panel__diff {
+  background: var(--eth-color-layer-01);
+  border-inline-start: 3px solid var(--eth-color-border-strong);
+  color: var(--eth-color-text-secondary);
+  font-family: var(--eth-font-mono);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  line-height: 1.3333;
+  margin: 0;
+  max-block-size: 12rem;
+  overflow: auto;
+  padding: var(--eth-space-sm) var(--eth-space-md);
+  white-space: pre-wrap;
+}
+
+.eth-doc-agent-lock-panel__empty {
+  border: 1px dashed var(--eth-color-border-subtle);
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.875rem * var(--eth-text-scale, 1));
+  line-height: 1.4286;
+  margin: 0;
+  padding: var(--eth-space-lg);
+}
+
+.eth-doc-agent-lock-panel__actions {
+  border-block-start: 1px solid var(--eth-color-border-subtle);
+  justify-content: flex-end;
+  padding-block-start: var(--eth-space-lg);
+}
+
+@media (width <= 42rem) {
+  .eth-doc-editor-shell__bar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .eth-doc-editor-shell__status {
+    justify-content: flex-start;
+  }
+
+  .eth-doc-toolbar {
+    min-inline-size: 100%;
+  }
+
+  .eth-doc-toolbar__group,
+  .eth-doc-toolbar__group--mode {
+    border-inline: 0;
+    border-block-end: 1px solid var(--eth-color-border-subtle);
+    inline-size: 100%;
+    margin-inline-start: 0;
+    overflow-x: auto;
+  }
+
+  .eth-doc-toolbar__group:last-child {
+    border-block-end: 0;
+  }
+
+  .eth-doc-editor-shell__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .eth-doc-editor-shell__editor,
+  .eth-doc-editor-shell__inspector {
+    min-block-size: auto;
+  }
+
+  .eth-doc-outline {
+    max-inline-size: none;
+    min-inline-size: 0;
+  }
+
+  .eth-doc-outline__header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--eth-space-xs);
+  }
+
+  .eth-doc-viewer__header,
+  .eth-doc-viewer__content,
+  .eth-doc-viewer__annotations {
+    padding-inline: var(--eth-space-lg);
+  }
+
+  .eth-doc-viewer__metadata.eth-meta-grid div {
+    flex: 1 1 11rem;
+    padding-inline: var(--eth-space-lg);
+  }
+
+  .eth-doc-viewer--with-annotations .eth-doc-viewer__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .eth-doc-viewer--with-annotations .eth-doc-viewer__content {
+    border-block-end: 1px solid var(--eth-color-border-subtle);
+    border-inline-end: 0;
+  }
+
+  .eth-doc-viewer__annotation-header time {
+    margin-inline-start: 0;
+    white-space: normal;
+  }
+
+  .eth-doc-agent-lock-panel__changes-header {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: var(--eth-space-xs);
+  }
+
+  .eth-doc-agent-lock-panel__actions {
+    align-items: stretch;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .eth-doc-agent-lock-panel__actions .eth-button {
+    inline-size: 100%;
+  }
+}