.visual-layout-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 4px;color:#26232d;font-size:13px;line-height:1.4}
.visual-layout-bar[hidden]{display:none}
.visual-layout-bar button{appearance:none;border:1px solid #ddd4e8;border-radius:12px;background:#fff;color:#332841;padding:10px 14px;font:inherit;cursor:pointer;touch-action:manipulation}
.visual-layout-bar button:disabled{opacity:.5;cursor:default}
.visual-layout-status{flex-basis:100%;color:#64586d}
.visual-layout-bar button:focus-visible{outline:2px solid #7438cc;outline-offset:2px}
.canvas-visual-layout { background: rgba(88, 38, 164, .94); }
.canvas-visual-layout > span { font: 700 11px/1.15 Inter, sans-serif; }
.canvas-visual-layout > small { font: 500 10px/1.15 Inter, sans-serif; }

.visual-layout-assessment{flex-basis:100%;padding:12px 14px;border:1px solid #e8e3ed;border-radius:12px;background:#faf9fb;color:#332841}
.visual-layout-assessment[hidden]{display:none}
.visual-layout-assessment summary{font-weight:600;cursor:pointer}
.visual-layout-assessment p{margin:10px 0 0}
.visual-layout-assessment ul{padding-left:20px;margin:10px 0 0}
.visual-layout-assessment li+li{margin-top:8px}
.visual-layout-remaining:empty{display:none}

/* Language list of the translate button (A文) next to the artwork. */
.canvas-visual-layout > span { font-size: 15px; letter-spacing: -.02em; }
.translate-menu { position: absolute; z-index: 31; top: auto; bottom: 76px; right: 70px; width: 220px; max-width: calc(100% - 84px); max-height: calc(100% - 110px);
  display: flex; flex-direction: column; box-sizing: border-box; padding: 10px; border: 1px solid #e4dbef; border-radius: 16px; background: #fff; color: #231a2e;
  box-shadow: 0 14px 36px rgba(28, 12, 58, .22), 0 2px 6px rgba(28, 12, 58, .08); }
.translate-menu[hidden], html.is-text-editing .translate-menu { display: none; }
.translate-menu__title { margin: 2px 4px 8px; font: 700 12px/1.3 Inter, system-ui, sans-serif; color: #6d6378; }
.translate-menu__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.translate-menu button { appearance: none; min-height: 38px; margin: 0; padding: 7px 8px; border: 0; border-radius: 10px; background: #f5f1fa; color: #231a2e;
  font: 600 13px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; touch-action: manipulation; }
.translate-menu button:disabled { opacity: .45; cursor: default; }
.translate-menu button:focus-visible { outline: 2px solid #7438cc; outline-offset: 1px; }
@media (hover: hover) { .translate-menu button:not(:disabled):hover { background: #ebe2f7; } }
.translate-menu .translate-menu__review { margin-top: 8px; background: #fff; border: 1px solid #ded5e9; color: #5a2fa8; text-align: center; }

/* Direct layout action uses words instead of the translation glyph. */
.story-frame > #adaptive-layout-run > span { font: 600 10px/1.15 Inter, sans-serif; letter-spacing: 0; }
.story-frame > #adaptive-layout-run > small { font: 500 9px/1.15 Inter, sans-serif; }