AI: address issue #455

frontend/src/index.css

@@ -626,17 +626,22 @@ body
   will-change: transform;
 }
 
-/* Loaded only by the development-only sample, with the OFL alongside the font. */
+/* Locally hosted Mongolian font; the OFL accompanies the font file. */
 @font-face
 {
-  font-family: 'BTRC Mongolian Preview';
+  font-family: 'BTRC Mongolian';
   src: url('/fonts/noto-sans-mongolian/NotoSansMongolian-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }
 
-/* Development-only /mn-Mong layout. Unannotated pages retain horizontal text. */
+/* Mongolian flows down each line, then into the next column on the right. */
+:lang(mn-Mong)
+{
+  font-family: 'BTRC Mongolian', 'Mongolian Baiti', 'Noto Sans JP Variable', sans-serif;
+}
+
 [data-vertical-preview]
 {
   min-width: 0;
@@ -675,6 +680,56 @@ body
   overscroll-behavior-x: contain;
 }
 
+/* Specialised lists below retain their own grid and table layouts. */
+[data-vertical-preview] .main-area[data-vertical-content]:not(
+    .posts-main-area, .tags-main-area, .wiki-main-area)
+{
+  writing-mode: vertical-lr;
+  text-orientation: mixed;
+  text-align: start;
+  overflow-y: auto;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content]:not(
+    .posts-main-area, .tags-main-area, .wiki-main-area) > :is(div, article, section)
+{
+  max-width: none;
+  max-inline-size: 100%;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] .prose
+{
+  max-width: none;
+  max-inline-size: 100%;
+}
+
+/* Input and data widgets keep their physical coordinates and nested scrolling. */
+[data-vertical-preview] .main-area[data-vertical-content] :is(
+    form, .form-layout, pre, .overflow-x-auto, .rc-md-editor, .not-prose)
+{
+  writing-mode: horizontal-tb;
+  text-orientation: mixed;
+  max-height: 100%;
+  overflow: auto;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] :is(form, .form-layout)
+{
+  width: min(36rem, calc(100vw - 2rem));
+}
+
+[data-vertical-preview] :where(.main-area[data-vertical-content]) :is(
+    button, input, select, textarea, code, time, table, img, video, iframe, canvas, svg)
+{
+  writing-mode: horizontal-tb;
+}
+
+[data-vertical-preview] .main-area[data-vertical-content] :is(img, video, iframe, canvas)
+{
+  max-height: 100%;
+  object-fit: contain;
+}
+
 [data-vertical-preview] .sidebar-panel
 {
   width: 100%;
@@ -741,16 +796,22 @@ body
   height: 1px;
 }
 
-[data-vertical-preview] .vertical-preview-sample
+[data-vertical-preview] .top-nav-locale-name:has(:lang(mn-Mong))
 {
+  display: inline;
   writing-mode: vertical-lr;
   text-orientation: mixed;
-  font-family: 'BTRC Mongolian Preview', 'Mongolian Baiti', sans-serif;
   font-size: 1.25rem;
   line-height: 1.5;
   flex-shrink: 0;
 }
 
+[data-vertical-preview] .top-nav-menu-link:has(.top-nav-locale-name)
+{
+  height: auto;
+  min-height: 2rem;
+}
+
 /* The post grid fills each column downwards before continuing to the right. */
 [data-vertical-preview] .posts-main-area > div
 {