Merge remote-tracking branch 'origin/main' into ux/context-panel-cleanup

src/ui/styles/bhote-koshi.css

@@ -518,14 +518,15 @@ html:not([lang='en']) .bhote-event-story-current strong {
   -webkit-line-clamp: 2;
 }
 
-/* Phase / time / sources run long in translation: allow a second line. */
+/* Phase / time / sources / imagery note run long in translation: allow up to
+   three lines so the last status is not cut off. */
 html:not([lang='en']) .bhote-event-story-current small {
   display: -webkit-box;
   margin-top: 3px;
   text-overflow: clip;
   white-space: normal;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 3;
 }
 
 .bhote-event-actions {

src/ui/styles/cjk.css

@@ -1,6 +1,7 @@
-/* Tight tracking keeps Chinese labels readable; preserve Latin tracking for
-   intel HUD readouts and content marked translate="no", including its containers. */
-html:lang(zh)
+/* Chinese and Japanese text. Tight tracking keeps CJK labels readable;
+   preserve Latin tracking for intel HUD readouts and content marked
+   translate="no", including its containers. */
+html:is(:lang(zh), :lang(ja))
   body
   :not(
     #intel-hud,
@@ -12,40 +13,67 @@ html:lang(zh)
   letter-spacing: 0.02em !important;
 }
 
-/* Keep small Chinese labels legible at a minimum of 9px. */
-html:lang(zh) #command-dock .gev-mic-label,
-html:lang(zh) #command-dock #gev-voice-detail,
-html:lang(zh) .gev-voice-tier-btn,
-html:lang(zh) .panel-layer-toggle {
+/* Japanese line breaking: never start a line with ー, a small kana or closing
+   punctuation (プレビュ / ー). */
+html:lang(ja) body {
+  line-break: strict;
+}
+
+/* Keep small CJK labels legible at a minimum of 9px. */
+html:is(:lang(zh), :lang(ja)) #command-dock .gev-mic-label,
+html:is(:lang(zh), :lang(ja)) #command-dock #gev-voice-detail,
+html:is(:lang(zh), :lang(ja)) .gev-voice-tier-btn,
+html:is(:lang(zh), :lang(ja)) .panel-layer-toggle {
   font-size: 9px;
 }
 
 /* A two-glyph button label must not break between its glyphs. */
-html:lang(zh) .pp-mode-btn {
+html:is(:lang(zh), :lang(ja)) .pp-mode-btn {
+  white-space: nowrap;
+}
+
+/* Japanese segment labels are short words (すべて, 平面): keep each whole. */
+html:lang(ja) .gev-segment {
   white-space: nowrap;
 }
 
 /* Keep unit symbols in their catalog case, including the cockpit readouts. */
-html:lang(zh) #intel-hud *,
-html:lang(zh) #cockpit-hud * {
+html:is(:lang(zh), :lang(ja)) #intel-hud *,
+html:is(:lang(zh), :lang(ja)) #cockpit-hud * {
   text-transform: none;
 }
 
-/* Move short travel modes (步行 / 骑行) to the next line as whole words. */
-html:lang(zh) [data-layer-id='directions'] .data-toggle-meta {
+/* Move short travel modes (步行 / 骑行, 徒歩 / 自転車) to the next line as
+   whole words. */
+html:is(:lang(zh), :lang(ja)) [data-layer-id='directions'] .data-toggle-meta {
   word-break: keep-all;
   overflow-wrap: break-word;
 }
 
 /* Leave room for the complete sensor name and resolution on two lines. */
-html:lang(zh) .recent-imagery-readout .ri-strip {
+html:is(:lang(zh), :lang(ja)) .recent-imagery-readout .ri-strip {
   height: 131px;
 }
-html:lang(zh) .recent-imagery-readout .ri-card {
+html:is(:lang(zh), :lang(ja)) .recent-imagery-readout .ri-card {
   height: 123px;
   grid-template-rows: 42px 13px 22px 11px 18px;
 }
-html:lang(zh) .recent-imagery-readout .ri-card-sensor {
+html:is(:lang(zh), :lang(ja)) .recent-imagery-readout .ri-card-sensor {
   white-space: normal;
   text-overflow: clip;
 }
+
+/* The Japanese imagery slot line wraps at its · separators, never inside a
+   word (プレ / ビュー); a run too long for the line still breaks. */
+html:lang(ja) .recent-imagery-readout .ri-slot-value {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+/* Japanese layer status lines wrap at their spaces and · separators, so an
+   age such as 1分以内 stays whole (更新 1 / 分以内); a run too long for the
+   line still breaks. */
+html:lang(ja) .data-toggle-meta {
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}

src/ui/styles/cockpit.css

@@ -730,7 +730,8 @@ html:not([lang='en']) .cockpit-roll-token.is-separator {
 }
 .cockpit-vision-controls {
   display: grid;
-  grid-template-columns: 48px 58px 48px;
+  /* The current style grows for a long translated name (ЗВИЧАЙНИЙ). */
+  grid-template-columns: 48px minmax(58px, max-content) 48px;
   align-items: stretch;
   gap: 2px;
   margin-top: 2px;

src/ui/styles/command-dock-trays.css

@@ -463,17 +463,10 @@ body:not(.ui-clean-view):not(.recording-mode):has(
 }
 
 #intel-hud[data-variant='tactical'] .hud-bottom-left,
-#intel-hud[data-variant='tactical'] .hud-bottom-right,
-#intel-hud[data-variant='operator'] .hud-bottom-left,
-#intel-hud[data-variant='operator'] .hud-bottom-right {
+#intel-hud[data-variant='tactical'] .hud-bottom-right {
   bottom: calc(2vh + 6.5rem);
 }
 
-#intel-hud[data-variant='operator'] .hud-bottom-bar {
-  bottom: calc(2vh + 9.8rem);
-  width: min(48vw, 680px);
-}
-
 #intel-hud[data-variant='minimal'] .hud-bottom-left {
   bottom: calc(2vh + 5.4rem);
 }

src/ui/styles/cyber.css

@@ -747,12 +747,6 @@
   .btn-icon::before {
   content: '◐';
 }
-:root[data-ui-theme='cyber']
-  #command-dock
-  .style-btn[data-style='snow']
-  .btn-icon::before {
-  content: '❄︎';
-}
 
 :root[data-ui-theme='cyber'] :where(#bloom-toggle, #sharpen-toggle) {
   font-size: 0;
@@ -1567,10 +1561,6 @@
   clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
 }
 
-#intel-hud[data-variant='cyber'] .hud-top-bar {
-  display: none;
-}
-
 /* Cyber keeps the useful style and locality readouts, not fictional IDs. */
 #intel-hud[data-variant='cyber'] .hud-top-left .hud-classification,
 #intel-hud[data-variant='cyber'] .hud-top-left .hud-system {
@@ -1873,7 +1863,6 @@
     background-size: 78px 78px;
   }
 
-  #intel-hud[data-variant='cyber'] .hud-top-bar,
   #intel-hud[data-variant='cyber'] .hud-bottom-bar {
     display: none;
   }

src/ui/styles/mobile-shell.css

@@ -107,7 +107,6 @@ body.mobile-shell #top-center-actions {
 /* ── HUD: one compact readout under the top bar ────────────────────────── */
 body.mobile-shell #intel-hud .hud-edge,
 body.mobile-shell #intel-hud .hud-corner,
-body.mobile-shell #intel-hud .hud-top-bar,
 body.mobile-shell #intel-hud .hud-bottom-bar {
   display: none;
 }

src/ui/styles/overlays.css

@@ -124,7 +124,6 @@
   line-height: 1.6;
 }
 
-.hud-top-bar,
 .hud-bottom-bar {
   display: none;
   position: absolute;
@@ -141,24 +140,11 @@
   pointer-events: none;
 }
 
-.hud-top-bar {
-  top: 70px;
-}
-
 .hud-bottom-bar {
   bottom: 110px;
   justify-content: center;
 }
 
-.hud-top-bar-center {
-  opacity: 0.84;
-}
-
-.hud-top-bar-left,
-.hud-top-bar-right {
-  opacity: 0.6;
-}
-
 /* Corner blocks */
 .hud-corner {
   position: absolute;
@@ -298,54 +284,15 @@
   gap: 20px;
 }
 
-#intel-hud[data-variant='tactical'] .hud-top-bar,
 #intel-hud[data-variant='tactical'] .hud-bottom-bar {
   display: none;
 }
 
-#intel-hud[data-variant='operator'] .hud-top-bar,
-#intel-hud[data-variant='operator'] .hud-bottom-bar {
-  display: flex;
-}
-
-#intel-hud[data-variant='operator'] .hud-top-bar {
-  top: max(10vh, 90px);
-  left: 50%;
-  right: auto;
-  width: min(52vw, 720px);
-  transform: translateX(-50%);
-  border-color: rgba(255, 255, 255, 0.24);
-  background: linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(8, 26, 34, 0.5));
-  box-shadow: 0 0 24px rgba(0, 255, 255, 0.08);
-}
-
 #intel-hud[data-variant='tactical'] .hud-top-left,
-#intel-hud[data-variant='tactical'] .hud-top-right,
-#intel-hud[data-variant='operator'] .hud-top-left,
-#intel-hud[data-variant='operator'] .hud-top-right {
+#intel-hud[data-variant='tactical'] .hud-top-right {
   top: max(14vh, 136px);
 }
 
-#intel-hud[data-variant='operator'] .hud-bottom-bar {
-  border-color: rgba(255, 255, 255, 0.2);
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.52),
-    rgba(8, 22, 18, 0.52)
-  );
-}
-
-#intel-hud[data-variant='operator'] .hud-corner {
-  padding: 8px 10px;
-  border: 1px solid rgba(255, 255, 255, 0.16);
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.36);
-}
-
-#intel-hud[data-variant='operator'] .hud-bracket {
-  display: none;
-}
-
 #intel-hud[data-variant='minimal'] .hud-top-right,
 #intel-hud[data-variant='minimal'] .hud-bottom-right,
 #intel-hud[data-variant='minimal'] .hud-left-edge,
@@ -378,11 +325,7 @@
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is(
-    [data-variant='minimal'],
-    [data-variant='operator'],
-    [data-variant='tactical']
-  )
+  #intel-hud:is([data-variant='minimal'], [data-variant='tactical'])
   .hud-readout,
 :root[data-scope-mask='off']:not([data-ui-theme='cyber']) .scene-text-holdout {
   background: rgba(0, 0, 0, 0.7);
@@ -399,11 +342,7 @@
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is(
-    [data-variant='minimal'],
-    [data-variant='operator'],
-    [data-variant='tactical']
-  )
+  #intel-hud:is([data-variant='minimal'], [data-variant='tactical'])
   .hud-readout {
   display: block;
   width: max-content;
@@ -413,11 +352,7 @@
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is(
-    [data-variant='minimal'],
-    [data-variant='operator'],
-    [data-variant='tactical']
-  )
+  #intel-hud:is([data-variant='minimal'], [data-variant='tactical'])
   :is(.hud-top-right, .hud-bottom-right)
   .hud-readout,
 :root[data-scope-mask='off']:not([data-ui-theme='cyber'])
@@ -427,38 +362,35 @@
 }
 
 /* Preserve glyph opacity without dimming the vertical backplates. */
-:root[data-scope-mask='off']
-  #intel-hud:is([data-variant='operator'], [data-variant='tactical'])
-  .hud-edge {
+:root[data-scope-mask='off'] #intel-hud[data-variant='tactical'] .hud-edge {
   opacity: 1;
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is([data-variant='operator'], [data-variant='tactical'])
+  #intel-hud[data-variant='tactical']
   .hud-edge
   .hud-readout
   > * {
   opacity: 0.5;
 }
 
-:root[data-scope-mask='off'] #intel-hud[data-variant='operator'] .hud-corner,
 :root[data-scope-mask='off']
-  #intel-hud:is([data-variant='minimal'], [data-variant='operator'])
-  :is(.hud-top-bar, .hud-bottom-bar) {
+  #intel-hud[data-variant='minimal']
+  .hud-bottom-bar {
   background: transparent;
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is([data-variant='minimal'], [data-variant='operator'])
-  :is(.hud-top-bar, .hud-bottom-bar) {
+  #intel-hud[data-variant='minimal']
+  .hud-bottom-bar {
   width: fit-content;
   max-width: calc(100vw - 120px);
   gap: 24px;
 }
 
 :root[data-scope-mask='off']
-  #intel-hud:is([data-variant='minimal'], [data-variant='operator'])
-  :is(.hud-top-bar, .hud-bottom-bar)
+  #intel-hud[data-variant='minimal']
+  .hud-bottom-bar
   .hud-readout {
   overflow: hidden;
   white-space: nowrap;

src/ui/styles/radio.css

@@ -690,6 +690,12 @@ html:not([lang='en']) .data-count {
   text-wrap: balance;
 }
 
+/* The status column keeps its width, so a wide chip (WIRD AKTIVIERT) never
+   overlaps the name; the name wraps in the room left beside it. */
+html:not([lang='en']) .data-toggle-right {
+  flex: none;
+}
+
 /* Row text pieces that must not break inside: a hyphenated code (ADS-B) and
    the space before a " · " separator (see setRowText in layerPanel.js). */
 html:not([lang='en']) .data-keep {

src/ui/styles/responsive.css

@@ -98,25 +98,12 @@
     display: none;
   }
 
-  .hud-top-bar,
   .hud-bottom-bar {
     width: calc(100vw - 24px);
     left: 12px;
     transform: none;
   }
 
-  .hud-top-bar {
-    top: 54px;
-    font-size: 9px;
-  }
-
-  #intel-hud[data-variant='operator'] .hud-top-bar {
-    left: 12px;
-    right: auto;
-    width: calc(100vw - 24px);
-    transform: none;
-  }
-
   .hud-bottom-bar {
     bottom: 90px;
     font-size: 9px;