/*
 * Formal game layout contract.
 *
 * This file is loaded after the historical runtime style injectors. It owns
 * geometry only: the top rail, game viewport, side rail/panels, command areas
 * and close controls. Theme colors remain in tm-bright-themes.css and readable
 * typography remains in tm-readable-type.css.
 */

:root {
  --tm-formal-topbar-h: 78px;
  --tm-formal-rail-w: 58px;
  --tm-formal-bottom-safe: 92px;
  --tm-formal-edge: 10px;
  /* Keep persistent game chrome below the shared modal layer (1001+). */
  --tm-formal-z-chrome: 900;
  --tm-formal-z-panel: 890;
}

/* ------------------------------------------------------------------------- */
/* Top rail and game viewport                                                 */
/* ------------------------------------------------------------------------- */

html body.tm-phase8-formal #topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: var(--tm-formal-topbar-h) !important;
  display: grid !important;
  grid-template-columns: minmax(340px, .86fr) minmax(620px, 1.72fr) max-content !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: var(--tm-formal-z-chrome) !important;
}

html body.tm-phase8-formal #G {
  margin-top: var(--tm-formal-topbar-h) !important;
  width: 100% !important;
  height: calc(100vh - var(--tm-formal-topbar-h)) !important;
  height: calc(100dvh - var(--tm-formal-topbar-h)) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body.tm-phase8-formal #topbar > .tb-left,
html body.tm-phase8-formal #topbar > .tb-vars,
html body.tm-phase8-formal #topbar > .tb-right {
  position: relative !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

html body.tm-phase8-formal #topbar > .tb-left {
  width: 100% !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 5px 11px !important;
}

html body.tm-phase8-formal #topbar .tb-seal {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  flex: 0 0 50px !important;
}

html body.tm-phase8-formal #topbar .tb-idtext {
  min-width: 78px !important;
  max-width: 128px !important;
  flex: 0 1 128px !important;
  min-height: 46px !important;
  justify-content: center !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal #topbar .tb-dyn {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  min-height: 26px !important;
  flex: 0 0 auto !important;
}

html body.tm-phase8-formal #topbar .tb-ruler {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  min-height: 15px !important;
  flex: 0 0 auto !important;
}

html body.tm-phase8-formal #topbar .tb-left .tb-time {
  min-width: 142px !important;
  max-width: none !important;
  height: 48px !important;
  flex: 1 1 190px !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 0 0 10px !important;
}

html body.tm-phase8-formal #topbar .tb-time-main,
html body.tm-phase8-formal #topbar .tb-time-sub {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.tm-phase8-formal #topbar .tb-time-main {
  font-size: 16px !important;
  line-height: 1.28 !important;
  min-height: 24px !important;
  letter-spacing: .02em !important;
}

html body.tm-phase8-formal #topbar .tb-time-sub {
  margin-top: 2px !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
  min-height: 15px !important;
}

html body.tm-phase8-formal #topbar > .tb-vars {
  width: 100% !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 4px 7px !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal #topbar .tb-vars .tb-vgrp {
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal #topbar .tb-vars .tb-grp-caifu {
  flex: 1.55 1 0 !important;
  min-width: 252px !important;
}

html body.tm-phase8-formal #topbar .tb-vars .tb-grp-minshu {
  flex: .52 1 104px !important;
  min-width: 88px !important;
}

html body.tm-phase8-formal #topbar .tb-vars .tb-grp-seals {
  flex: .9 1 214px !important;
  min-width: 184px !important;
  justify-content: space-evenly !important;
}

html body.tm-phase8-formal #topbar .tb-vars .tb-gsep {
  width: 1px !important;
  height: 62% !important;
  flex: 0 0 1px !important;
  margin: 0 7px !important;
}

html body.tm-phase8-formal #topbar .tb-var,
html body.tm-phase8-formal #topbar .tb-var.wide,
html body.tm-phase8-formal #topbar .tb-var:not(.wide) {
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide {
  flex: 1 1 0 !important;
  padding: 3px 6px !important;
  gap: 3px !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide .tb-vn {
  min-height: 14px !important;
  font-size: 11.5px !important;
  line-height: 1.15 !important;
  letter-spacing: .06em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide .tb-vsubs {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide .tb-vs {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  gap: 3px !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide .icn,
html body.tm-phase8-formal #topbar .tb-var.wide .tb-stk-svg {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide .sv {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide .sv b {
  display: block !important;
  min-height: 18px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide .sv .sd {
  display: block !important;
  min-height: 13px !important;
  margin-top: 1px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10.5px !important;
  line-height: 1.12 !important;
  font-variant-numeric: tabular-nums !important;
}

html body.tm-phase8-formal #topbar .tb-var:not(.wide) {
  flex: 1 1 88px !important;
  padding: 3px 5px !important;
}

html body.tm-phase8-formal #topbar .tb-var:not(.wide) .tb-vn,
html body.tm-phase8-formal #topbar .tb-vding {
  font-size: 11.5px !important;
  line-height: 1.22 !important;
  min-height: 15px !important;
}

html body.tm-phase8-formal #topbar .tb-var:not(.wide) .tb-vv {
  font-size: 15px !important;
  line-height: 1.18 !important;
  min-height: 18px !important;
  font-variant-numeric: tabular-nums !important;
}

html body.tm-phase8-formal #topbar .tb-var.tb-seal-idx {
  min-width: 38px !important;
  width: auto !important;
  height: 48px !important;
  flex: 1 1 44px !important;
  margin: 0 1px !important;
  padding: 0 4px !important;
  overflow: visible !important;
}

html body.tm-phase8-formal #topbar .tb-seal-idx .tsi-ch {
  font-size: 17px !important;
  line-height: 1 !important;
}

html body.tm-phase8-formal #topbar .tb-seal-idx .tsi-val {
  font-size: 10.5px !important;
  line-height: 1.08 !important;
}

html body.tm-phase8-formal #topbar > .tb-right {
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 0 !important;
}

html body.tm-phase8-formal #topbar .tb-chip {
  width: auto !important;
  min-width: 74px !important;
  height: 56px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
}

html body.tm-phase8-formal #topbar .tb-chip-icon {
  margin-right: 5px !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

html body.tm-phase8-formal #topbar .tb-chip-label {
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html body.tm-phase8-formal #topbar #tm-bright-theme-switcher .tm-bright-theme-trigger {
  min-width: 104px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 10px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

html body.tm-phase8-formal #topbar #tm-bright-theme-switcher .tm-bright-theme-trigger-label,
html body.tm-phase8-formal #topbar #tm-bright-theme-switcher .tm-bright-theme-trigger b {
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* JS applies these classes from the actual stage width, so fixed-fit virtual
 * stages behave the same as ordinary browser windows. */
html body.tm-phase8-formal #topbar.tm-tb-fit1 {
  grid-template-columns: minmax(292px, .78fr) minmax(520px, 1.72fr) max-content !important;
  gap: 6px !important;
  padding-inline: 7px !important;
}

html body.tm-phase8-formal #topbar.tm-tb-fit1 .tb-left {
  gap: 7px !important;
  padding-inline: 8px !important;
}

html body.tm-phase8-formal #topbar.tm-tb-fit1 .tb-ruler {
  display: block !important;
  font-size: 10px !important;
}
html body.tm-phase8-formal #topbar.tm-tb-fit1 .tb-idtext { min-width: 66px !important; flex-basis: 96px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit1 .tb-vars .tb-gsep { margin-inline: 4px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit1 .tb-var.wide { padding: 3px 4px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit1 .tb-var.wide .tb-vsubs { gap: 2px !important; }

html body.tm-phase8-formal #topbar.tm-tb-fit2 {
  grid-template-columns: minmax(248px, .72fr) minmax(0, 1.8fr) max-content !important;
  gap: 4px !important;
  padding-inline: 5px !important;
}

html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-idtext {
  display: flex !important;
  min-width: 56px !important;
  flex-basis: 76px !important;
}
html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-dyn { font-size: 17px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-ruler { font-size: 9px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-left .tb-time { min-width: 126px !important; padding-left: 7px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-time-main { font-size: 14px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-var.wide .tb-vn { font-size: 10.5px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-var.wide .sv b { font-size: 13.5px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-var.wide .sv .sd { font-size: 9.5px !important; }
html body.tm-phase8-formal #topbar.tm-tb-fit2 .tb-vars .tb-gsep { margin-inline: 2px !important; }

html body.tm-phase8-formal.tm-layout-medium #topbar {
  grid-template-columns: minmax(300px, .78fr) minmax(560px, 1.72fr) max-content !important;
  gap: 6px !important;
  padding-inline: 7px !important;
}

html body.tm-phase8-formal.tm-layout-medium #topbar > .tb-left {
  gap: 7px !important;
  padding-inline: 8px !important;
}

html body.tm-phase8-formal.tm-layout-medium #topbar .tb-vars .tb-gsep {
  margin-inline: 4px !important;
}

html body.tm-phase8-formal.tm-layout-medium #topbar.tm-tb-fit2 .tb-var.wide :is(.icn, .tb-stk-svg) {
  display: none !important;
}

html body.tm-phase8-formal.tm-layout-medium #topbar.tm-tb-fit2 .tb-var.wide .tb-vs {
  gap: 0 !important;
}

/* The embedded game reaches compact mode while the formal topbar is still at
 * fit2.  At that width three stock icons consume more room than their values,
 * and the legacy 25px value row clips the CJK and delta glyph boxes.  Keep the
 * numbers legible by using the available row height and omitting decorative
 * icons only in this tight layout. */
html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit2 .tb-var.wide :is(.icn, .tb-stk-svg) {
  display: none !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit2 .tb-var.wide .tb-vs {
  height: 30px !important;
  padding: 0 2px !important;
  gap: 0 !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit2 .tb-var.wide .tb-vn {
  height: 15px !important;
  min-height: 15px !important;
  font: 600 10.5px/15px "STSong", "SimSun", "Songti SC", serif !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit2 .tb-var.wide .sv b {
  height: 16px !important;
  min-height: 16px !important;
  font: 600 13.5px/16px "STSong", "SimSun", "Songti SC", serif !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit2 .tb-var.wide .sv .sd {
  height: 14px !important;
  min-height: 14px !important;
  margin-top: 0 !important;
  font: 500 9.5px/14px "STSong", "SimSun", "Songti SC", serif !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit2 .tb-var:not(.wide) .tb-vn {
  height: 15px !important;
  min-height: 15px !important;
  line-height: 15px !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar #tm-bright-theme-switcher .tm-bright-theme-trigger {
  min-width: 48px !important;
  width: 48px !important;
  padding: 0 !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar #tm-bright-theme-switcher :is(.tm-bright-theme-trigger-label, .tm-bright-theme-trigger b, .tm-bright-theme-chevron) {
  display: none !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar .tb-chip {
  min-width: 48px !important;
  width: 48px !important;
  padding: 0 !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar .tb-chip-label { display: none !important; }
html body.tm-phase8-formal.tm-layout-compact #topbar .tb-chip-icon { margin: 0 !important; }

/* ------------------------------------------------------------------------- */
/* Right rail, drawers and data panels                                        */
/* ------------------------------------------------------------------------- */

html body.tm-phase8-formal #tm-right-rail,
html body.tm-phase8-formal #tm-phase8-formal-rail {
  position: fixed !important;
  top: calc(var(--tm-formal-topbar-h) + 8px) !important;
  right: 6px !important;
  bottom: var(--tm-formal-bottom-safe) !important;
  left: auto !important;
  width: 52px !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  z-index: var(--tm-formal-z-panel) !important;
}

html body.tm-phase8-formal #tm-right-rail::-webkit-scrollbar,
html body.tm-phase8-formal #tm-phase8-formal-rail::-webkit-scrollbar { display: none !important; }

html body.tm-phase8-formal #tm-right-rail .tm-rc-icon,
html body.tm-phase8-formal #tm-phase8-formal-rail .tmf-rail-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
}

html body.tm-phase8-formal #rpanel,
html body.tm-phase8-formal #drawerRight.gs-drawer.right,
html body.tm-phase8-formal #drawerLeft.gs-drawer.left {
  position: fixed !important;
  top: calc(var(--tm-formal-topbar-h) + 4px) !important;
  bottom: var(--tm-formal-bottom-safe) !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: var(--tm-formal-z-panel) !important;
}

html body.tm-phase8-formal #rpanel,
html body.tm-phase8-formal #drawerRight.gs-drawer.right {
  right: calc(var(--tm-formal-rail-w) + 6px) !important;
  left: auto !important;
  width: min(390px, calc(100vw - var(--tm-formal-rail-w) - 32px)) !important;
  transform: translateX(calc(100% + var(--tm-formal-rail-w) + 16px)) !important;
  pointer-events: none !important;
}

html body.tm-phase8-formal #drawerLeft.gs-drawer.left {
  left: 0 !important;
  right: auto !important;
  width: min(420px, calc(100vw - var(--tm-formal-rail-w) - 28px)) !important;
  transform: translateX(calc(-100% - 16px)) !important;
  pointer-events: none !important;
}

html body.tm-phase8-formal #rpanel.show,
html body.tm-phase8-formal #drawerRight.gs-drawer.right.open,
html body.tm-phase8-formal #drawerLeft.gs-drawer.left.open {
  transform: translateX(0) !important;
  pointer-events: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html body.tm-phase8-formal #rpanel .rp-head,
html body.tm-phase8-formal :is(#drawerRight, #drawerLeft) :is(.gs-drawer-hdr, .gs-drawer-head) {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
}

html body.tm-phase8-formal #rpanel .rp-body,
html body.tm-phase8-formal :is(#drawerRight, #drawerLeft) .gs-drawer-body {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

html body.tm-phase8-formal #rpanel :is(.tmrp-meta, .tmrp-empty, p, li),
html body.tm-phase8-formal :is(#drawerRight, #drawerLeft) :is(p, li, label, .desc) {
  font-size: 14.5px !important;
  line-height: 1.62 !important;
}

/* ------------------------------------------------------------------------- */
/* Bottom command zones                                                      */
/* ------------------------------------------------------------------------- */

html body.tm-phase8-formal #tm-phase8-action-tray.zb-action-tray {
  left: 18px !important;
  bottom: 16px !important;
  max-width: calc(100vw - 560px) !important;
}

html body.tm-phase8-formal #tm-phase8-event-notice.tmv3-feed {
  top: auto !important;
  bottom: 178px !important;
  width: min(442px, calc(100vw - var(--tm-formal-rail-w) - 34px)) !important;
  height: clamp(176px, 25vh, 240px) !important;
  height: clamp(176px, 25dvh, 240px) !important;
  max-height: calc(100dvh - var(--tm-formal-topbar-h) - 250px) !important;
}

html body.tm-phase8-formal #shizheng-btn {
  bottom: 12px !important;
  z-index: var(--tm-formal-z-chrome) !important;
}

html body.tm-phase8-formal #endturn {
  position: fixed !important;
  right: calc(var(--tm-formal-rail-w) + 12px) !important;
  bottom: 12px !important;
  z-index: var(--tm-formal-z-chrome) !important;
  max-width: calc(100vw - 32px) !important;
}

html body.tm-phase8-formal #endturn .et-big {
  min-width: 236px !important;
  min-height: 64px !important;
  padding: 10px 22px !important;
  box-sizing: border-box !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
}

html body.tm-phase8-formal #endturn .sub {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

html body.tm-phase8-formal.tm-layout-compact #tm-phase8-action-tray.zb-action-tray {
  left: 12px !important;
  bottom: 14px !important;
  width: 292px !important;
  height: 123px !important;
}

html body.tm-phase8-formal.tm-layout-compact #tm-phase8-action-tray .zb-btn.zb-img-btn {
  width: 138px !important;
  height: 58px !important;
}

html body.tm-phase8-formal.tm-layout-compact #tm-phase8-action-tray #zhao-btn { left: 0 !important; top: 1px !important; }
html body.tm-phase8-formal.tm-layout-compact #tm-phase8-action-tray #zhao-btn-2 { left: 145px !important; top: 3px !important; }
html body.tm-phase8-formal.tm-layout-compact #tm-phase8-action-tray #zhao-btn-3 { left: 6px !important; top: 65px !important; }
html body.tm-phase8-formal.tm-layout-compact #tm-phase8-action-tray #zhao-btn-4 { left: 150px !important; top: 63px !important; }

html body.tm-phase8-formal.tm-layout-compact #tm-phase8-event-notice.tmv3-feed {
  bottom: 150px !important;
  width: min(360px, calc(100vw - var(--tm-formal-rail-w) - 26px)) !important;
}

html body.tm-phase8-formal.tm-layout-compact #shizheng-btn {
  width: 218px !important;
  height: 54px !important;
}

html body.tm-phase8-formal.tm-layout-compact #endturn .et-big {
  min-width: 204px !important;
  min-height: 56px !important;
  padding-inline: 16px !important;
  font-size: 15px !important;
}

/* ------------------------------------------------------------------------- */
/* Dialog headers and close controls                                          */
/* ------------------------------------------------------------------------- */

html body.tm-phase8-formal :is(
  .tmf-module > header,
  .tmf-records-dialog > header,
  .tmf-event-dialog > header,
  .tm-bridge-panel > header,
  .arc-modal > header,
  .renwu-atlas-head,
  .tm-army-detail-head
) {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
}

html body.tm-phase8-formal :is(
  .gs-drawer-close,
  #rpanel .rp-close,
  .tmf-module-close,
  .tmf-records-close,
  .tmf-event-close,
  .tmf-dossier-close,
  .renwu-atlas-close,
  .tm-bridge-close,
  .arc-close,
  .bk-close,
  .tmf-event-dialog > header > [data-close="1"],
  [data-army-close],
  [data-social-close]
) {
  position: relative !important;
  z-index: 10 !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  flex: 0 0 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

html body.tm-phase8-formal :is(button, [role="button"], .tmrp-btn, .tmf-action) {
  touch-action: manipulation;
}

/* ------------------------------------------------------------------------- */
/* Final viewport-safe geometry                                               */
/*
 * Runtime action desks were authored for a wider fixed stage and used
 * absolute offsets such as `left:50%` plus a large translate.  On the
 * embedded stage that pushed the edict and letter desks off the right edge
 * and put their headers under the top rail.  The overlay is now a padded
 * flex layer: every desk starts below the topbar, stays inside the viewport,
 * and lets its own lists scroll.
 */

html body.tm-phase8-formal #topbar.tm-tb-fit1,
html body.tm-phase8-formal #topbar.tm-tb-fit2 {
  grid-template-columns: minmax(350px, .95fr) minmax(540px, 1.65fr) max-content !important;
  gap: 6px !important;
  padding-inline: 7px !important;
}

html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit1,
html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit2 {
  grid-template-columns: minmax(350px, .95fr) minmax(540px, 1.65fr) max-content !important;
}

html body.tm-phase8-formal #topbar > .tb-left {
  min-width: 0 !important;
}

html body.tm-phase8-formal #topbar .tb-left .tb-time {
  min-width: 180px !important;
  flex-basis: 196px !important;
}

html body.tm-phase8-formal #topbar .tb-time-main {
  font-size: 15px !important;
  line-height: 1.3 !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body.tm-phase8-formal #topbar .tb-time-sub {
  font-size: 11.5px !important;
  line-height: 1.35 !important;
}

html body.tm-phase8-formal #topbar .tb-var.wide :is(.tb-vn, .sv b, .sv .sd),
html body.tm-phase8-formal #topbar .tb-var:not(.wide) :is(.tb-vn, .tb-vv, .tb-vding) {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body.tm-phase8-formal .tm-bridge-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  padding: calc(var(--tm-formal-topbar-h) + 10px) var(--tm-formal-edge) var(--tm-formal-edge) !important;
  overflow: auto !important;
  isolation: isolate !important;
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-bridge-scrim {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: auto !important;
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel,
html body.tm-phase8-formal .tm-bridge-overlay > .tm-bridge-panel {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  width: min(1240px, 100%) !important;
  height: min(820px, calc(100dvh - var(--tm-formal-topbar-h) - 22px)) !important;
  max-height: calc(100dvh - var(--tm-formal-topbar-h) - 22px) !important;
  margin: 0 auto !important;
  transform: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .36) !important;
}

@supports not (height: 100dvh) {
  html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel,
  html body.tm-phase8-formal .tm-bridge-overlay > .tm-bridge-panel {
    height: min(820px, calc(100vh - var(--tm-formal-topbar-h) - 22px)) !important;
    max-height: calc(100vh - var(--tm-formal-topbar-h) - 22px) !important;
  }
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel > .tm-action-body {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan) {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
  :is(.silk-head, .zou-titlebar, .yan-titlebar, .shi-titlebar) {
  padding-right: 104px !important;
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
  :is(.zou-chips, .yan-chips, .shi-chips) {
  right: 96px !important;
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel .head-right {
  margin-right: 48px !important;
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
  :is(.tm-action-close, .tm-floating-close) {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 20 !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 1px solid #7a2018 !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #c64a3e, #7a2018) !important;
  color: #fffaf1 !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: 0 6px 16px rgba(75, 20, 15, .34), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  font: 700 22px/1 "Microsoft YaHei", sans-serif !important;
  text-shadow: 0 1px 2px rgba(40, 8, 4, .42) !important;
  cursor: pointer !important;
}

html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
  :is(.tm-action-close, .tm-floating-close):hover,
html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
  :is(.tm-action-close, .tm-floating-close):focus-visible {
  background: linear-gradient(145deg, #db6757, #8c241b) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 1080px) {
  html body.tm-phase8-formal #topbar.tm-tb-fit1,
  html body.tm-phase8-formal #topbar.tm-tb-fit2,
  html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit1,
  html body.tm-phase8-formal.tm-layout-compact #topbar.tm-tb-fit2 {
    grid-template-columns: minmax(260px, .78fr) minmax(0, 1.8fr) max-content !important;
  }
  html body.tm-phase8-formal #topbar .tb-left .tb-time {
    min-width: 132px !important;
    flex-basis: 142px !important;
  }
  html body.tm-phase8-formal #topbar .tb-time-main {
    font-size: 14px !important;
  }
}

@media (max-width: 760px) {
  html body.tm-phase8-formal .tm-bridge-overlay {
    padding: calc(var(--tm-formal-topbar-h) + 6px) 8px 8px !important;
  }
  html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel,
  html body.tm-phase8-formal .tm-bridge-overlay > .tm-bridge-panel {
    width: 100% !important;
    height: calc(100dvh - var(--tm-formal-topbar-h) - 14px) !important;
    max-height: none !important;
  }
  html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
    :is(.silk-head, .zou-titlebar, .yan-titlebar, .shi-titlebar) {
    padding-right: 66px !important;
  }
  html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
    :is(.zou-chips, .yan-chips, .shi-chips) {
    right: 60px !important;
  }
  html body.tm-phase8-formal .tm-bridge-overlay > .tm-action-panel
    :is(.tm-action-close, .tm-floating-close) {
    top: 8px !important;
    right: 8px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* ------------------------------------------------------------------------- */
/* Bright-theme compatibility layer                                          */
/*
 * The right rail is rendered by a late runtime style block that deliberately
 * keeps the original dark palette.  That is useful for the dark theme, but it
 * wins over the bright-theme tokens for the rail itself and for a handful of
 * warning/metadata rows.  Keep this final, high-specificity layer scoped to
 * the two bright themes so the dark presentation remains unchanged.
 */

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel {
  background: linear-gradient(180deg, var(--tm-formal-surface), var(--tm-formal-surface-2)) !important;
  background-image: linear-gradient(180deg, var(--tm-formal-surface), var(--tm-formal-surface-2)) !important;
  border-left: 1px solid var(--tm-formal-border) !important;
  box-shadow: -14px 0 30px rgba(64, 52, 38, .16), inset 1px 0 0 rgba(255, 255, 255, .86) !important;
  color: var(--tm-formal-ink) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .rp-head,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .rp-head {
  background: linear-gradient(90deg, rgba(141, 91, 55, .12), transparent 78%) !important;
  border-bottom: 1px solid var(--tm-formal-border-soft) !important;
  color: var(--tm-formal-ink) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .rp-head {
  background: linear-gradient(90deg, rgba(52, 121, 107, .13), transparent 78%) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .rp-title,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .rp-title {
  color: var(--tm-formal-primary-deep) !important;
  font: 700 20px/1.28 var(--tm-font-title, var(--tm-readable-title-stack)) !important;
  letter-spacing: .10em !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .rp-close,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .rp-close {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid var(--tm-formal-border) !important;
  border-radius: 50% !important;
  background: var(--tm-formal-surface) !important;
  color: var(--tm-formal-primary-deep) !important;
  font: 700 22px/1 var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  box-shadow: 0 3px 9px rgba(64, 52, 38, .14), inset 0 1px 0 rgba(255,255,255,.92) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .rp-close:hover,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .rp-close:focus-visible,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .rp-close:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .rp-close:focus-visible {
  background: var(--tm-formal-surface-3) !important;
  border-color: var(--tm-formal-primary) !important;
  color: var(--tm-formal-primary-deep) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .rp-body,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .rp-body,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-admin-shell,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-admin-shell,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-office-shell,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-office-shell,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-finance-shell,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-finance-shell,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-army-shell,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-army-shell,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-wenshi-shell,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-wenshi-shell,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-minister-shell,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-minister-shell {
  color: var(--tm-formal-ink) !important;
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp :is(
  p, li, td, th, label, summary, .tmrp-meta, .tmrp-empty, .tmrp-step,
  .tmrp-admin-title small, .tmrp-card-title small, .tmrp-stat span,
  .tmrp-mini-grid span, .tmrp-rows span, .tmrp-fin-line small,
  .tmrp-office-node summary small, .tmrp-ledger-head small, .tmrp-wd-person small
),
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp :is(
  p, li, td, th, label, summary, .tmrp-meta, .tmrp-empty, .tmrp-step,
  .tmrp-admin-title small, .tmrp-card-title small, .tmrp-stat span,
  .tmrp-mini-grid span, .tmrp-rows span, .tmrp-fin-line small,
  .tmrp-office-node summary small, .tmrp-ledger-head small, .tmrp-wd-person small
) {
  color: var(--tm-formal-muted) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp :is(
  .tmrp-card-title > span, .tmrp-card-title b, .tmrp-admin-title b,
  .tmrp-office-node summary, .tmrp-ledger-head span, .tmrp-stat b,
  .tmrp-person b, .tmrp-mode-card b, .tmrp-ecology-head b,
  .tmrp-wd-person b
),
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp :is(
  .tmrp-card-title > span, .tmrp-card-title b, .tmrp-admin-title b,
  .tmrp-office-node summary, .tmrp-ledger-head span, .tmrp-stat b,
  .tmrp-person b, .tmrp-mode-card b, .tmrp-ecology-head b,
  .tmrp-wd-person b
) {
  color: var(--tm-formal-primary-deep) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel
  :is(.tmrp-card, .tmrp-summary, .tmrp-person, .tmrp-log, .tmrp-office-node,
    .tmrp-office-pos, .tmrp-fin-line, .tmrp-ecology, .tmrp-ecology-edge,
    .tmrp-mode-card, .tmrp-chain-step, .tmrp-pcdebug-row, .tmrp-wd-person,
    .tmrp-wd-request, .tmrp-wd-mini, .tmrp-stat, .tmrp-pill),
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel
  :is(.tmrp-card, .tmrp-summary, .tmrp-person, .tmrp-log, .tmrp-office-node,
    .tmrp-office-pos, .tmrp-fin-line, .tmrp-ecology, .tmrp-ecology-edge,
    .tmrp-mode-card, .tmrp-chain-step, .tmrp-pcdebug-row, .tmrp-wd-person,
    .tmrp-wd-request, .tmrp-wd-mini, .tmrp-stat, .tmrp-pill) {
  background-color: rgba(255, 255, 255, .70) !important;
  background-image: none !important;
  border-color: var(--tm-formal-border-soft) !important;
  color: var(--tm-formal-ink) !important;
  box-shadow: 0 2px 8px rgba(72, 57, 40, .08) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-summary,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-summary {
  background: var(--tm-formal-surface) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-step,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-step {
  min-height: 32px !important;
  box-sizing: border-box !important;
  padding: 6px 8px !important;
  margin: 6px 0 !important;
  border: 1px solid rgba(184, 76, 62, .30) !important;
  border-left: 3px solid var(--tm-readable-danger, #b84c3e) !important;
  border-radius: 4px !important;
  background: rgba(184, 76, 62, .08) !important;
  color: var(--tm-formal-ink) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-step b,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-step b {
  color: var(--tm-formal-primary-deep) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-mini-grid div,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-mini-grid div,
html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-rows div,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-rows div {
  background: rgba(255, 255, 255, .74) !important;
  border-color: var(--tm-formal-border-soft) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp :is(
  .tmrp-meta, .tmrp-empty, .tmrp-warning-line, .tmrp-detail-hint
),
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp :is(
  .tmrp-meta, .tmrp-empty, .tmrp-warning-line, .tmrp-detail-hint
) {
  font-size: 13.5px !important;
  line-height: 1.62 !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-btn,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-btn {
  min-height: 36px !important;
  padding: 7px 11px !important;
  border-color: var(--tm-formal-border) !important;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--tm-formal-primary-deep) !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #rpanel .tmrp-btn.primary,
html[data-theme="celadon-bright"] body.tm-phase8-formal #rpanel .tmrp-btn.primary {
  background: linear-gradient(135deg, var(--tm-formal-primary), var(--tm-formal-primary-deep)) !important;
  border-color: var(--tm-formal-primary) !important;
  color: #fffdf8 !important;
  text-shadow: 0 1px 2px rgba(47, 24, 12, .24) !important;
}

/* Late-created action desks need the same readable supporting text. */
html[data-theme="paper-bright"] body.tm-phase8-formal
  :is(#tm-action-edict-overlay, #tm-action-zou-overlay,
      #tm-action-yan-overlay, #tm-action-shi-overlay,
      #tm-action-memorial-overlay, #tm-action-letter-overlay,
      #tm-action-records-overlay)
  > .tm-bridge-panel :is(.hc-sub, .zt-sub, .yt-sub, .st-sub,
      .tmf-module-note, .tmf-prose, .tmrp-meta, .tmrp-empty),
html[data-theme="celadon-bright"] body.tm-phase8-formal
  :is(#tm-action-edict-overlay, #tm-action-zou-overlay,
      #tm-action-yan-overlay, #tm-action-shi-overlay,
      #tm-action-memorial-overlay, #tm-action-letter-overlay,
      #tm-action-records-overlay)
  > .tm-bridge-panel :is(.hc-sub, .zt-sub, .yt-sub, .st-sub,
      .tmf-module-note, .tmf-prose, .tmrp-meta, .tmrp-empty) {
  color: var(--tm-formal-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal
  :is(#tm-action-edict-overlay, #tm-action-zou-overlay,
      #tm-action-yan-overlay, #tm-action-shi-overlay,
      #tm-action-memorial-overlay, #tm-action-letter-overlay,
      #tm-action-records-overlay)
  > .tm-bridge-panel :is(input, textarea)::placeholder,
html[data-theme="celadon-bright"] body.tm-phase8-formal
  :is(#tm-action-edict-overlay, #tm-action-zou-overlay,
      #tm-action-yan-overlay, #tm-action-shi-overlay,
      #tm-action-memorial-overlay, #tm-action-letter-overlay,
      #tm-action-records-overlay)
  > .tm-bridge-panel :is(input, textarea)::placeholder {
  color: var(--tm-formal-muted) !important;
  opacity: 1 !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal
  :is(#tm-action-edict-overlay, #tm-action-zou-overlay,
      #tm-action-yan-overlay, #tm-action-shi-overlay,
      #tm-action-memorial-overlay, #tm-action-letter-overlay,
      #tm-action-records-overlay)
  > .tm-bridge-panel .tm-action-close,
html[data-theme="celadon-bright"] body.tm-phase8-formal
  :is(#tm-action-edict-overlay, #tm-action-zou-overlay,
      #tm-action-yan-overlay, #tm-action-shi-overlay,
      #tm-action-memorial-overlay, #tm-action-letter-overlay,
      #tm-action-records-overlay)
  > .tm-bridge-panel .tm-action-close {
  color: #fffaf1 !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 22px !important;
}

/* ------------------------------------------------------------------------- */
/* Bright-theme compatibility for the legacy standalone office tree         */
/*
 * 官制衙门 is still rendered by the historical #gt-office module. Its
 * standalone bridge intentionally adds a dark background and the office
 * stylesheet uses lacquer-coloured filter/tab/tree surfaces. That layer is
 * useful for the dark theme, but in a bright theme it creates a dark band
 * through the middle of the page and turns the tab labels into low-contrast
 * pale text. Keep this scoped to standalone office mode so the dark
 * presentation and ordinary right-rail office panel remain unchanged.
 */

/* The standalone office view already owns the full workspace.  Leaving the
 * persistent rail and bottom command tray mounted here puts a second layer
 * over the tree (especially at 1366px wide), hiding the return control and
 * the right-most department cards.  Give this view one clear set of chrome;
 * the in-panel “返回天下” control is the route back to the map. */
html body.tm-phase8-formal.tm-phase8-office-single #tm-right-rail,
html body.tm-phase8-formal.tm-phase8-office-single #tm-phase8-formal-rail,
html body.tm-phase8-formal.tm-phase8-office-single #tm-phase8-action-tray,
html body.tm-phase8-formal.tm-phase8-office-single #tm-phase8-event-notice,
html body.tm-phase8-formal.tm-phase8-office-single #endturn,
html body.tm-phase8-formal.tm-phase8-office-single #tm-nokey-banner {
  display: none !important;
  pointer-events: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single #gt-office,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single #gt-office {
  background: linear-gradient(180deg, var(--tm-formal-bg), var(--tm-formal-surface-2)) !important;
  background-image: linear-gradient(180deg, var(--tm-formal-bg), var(--tm-formal-surface-2)) !important;
  color: var(--tm-formal-ink) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single #gt-office .og-panel-wrap,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single #gt-office .og-panel-wrap {
  background-color: var(--tm-formal-bg) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.42), transparent 180px),
    repeating-linear-gradient(90deg, transparent 0, transparent 38px,
      rgba(112, 91, 63, .035) 38px, rgba(112, 91, 63, .035) 39px) !important;
  color: var(--tm-formal-ink) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-filter-bar,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-filter-bar {
  background: linear-gradient(90deg, rgba(255,255,255,.92), rgba(248,243,235,.88)) !important;
  background-image: linear-gradient(90deg, rgba(255,255,255,.92), rgba(248,243,235,.88)) !important;
  border-color: var(--tm-formal-border) !important;
  color: var(--tm-formal-ink) !important;
  box-shadow: 0 2px 8px rgba(73, 54, 35, .08) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-filter-bar {
  background: linear-gradient(90deg, rgba(255,255,255,.94), rgba(243,250,246,.90)) !important;
  background-image: linear-gradient(90deg, rgba(255,255,255,.94), rgba(243,250,246,.90)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office :is(.og-fb-title, .og-fb-stats),
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office :is(.og-fb-title, .og-fb-stats) {
  color: var(--tm-formal-primary-deep) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn {
  background: rgba(255,255,255,.78) !important;
  background-image: none !important;
  border-color: var(--tm-formal-border) !important;
  color: var(--tm-formal-muted) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn:hover,
html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.active,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.active {
  background: rgba(141,91,55,.10) !important;
  border-color: var(--tm-formal-primary) !important;
  color: var(--tm-formal-primary-deep) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.active {
  background: rgba(52,121,107,.10) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.empty:hover,
html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.empty.active,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.empty:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.empty.active {
  background: rgba(184,76,62,.10) !important;
  border-color: var(--tm-formal-danger) !important;
  color: var(--tm-formal-danger) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.filled:hover,
html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.filled.active,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.filled:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-btn.filled.active {
  background: rgba(63,141,125,.10) !important;
  border-color: var(--tm-formal-teal) !important;
  color: var(--tm-formal-teal) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-search,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-search {
  background: #fff !important;
  border-color: var(--tm-formal-border) !important;
  color: var(--tm-formal-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-search::placeholder,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-fb-search::placeholder {
  color: var(--tm-formal-muted) !important;
  opacity: 1 !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,243,235,.88)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,243,235,.88)) !important;
  border-color: var(--tm-formal-border) !important;
  color: var(--tm-formal-ink) !important;
  text-shadow: none !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,250,246,.92)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,250,246,.92)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab:hover {
  background: var(--tm-formal-surface) !important;
  background-image: none !important;
  border-color: var(--tm-formal-primary) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab.active,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab.active {
  background: linear-gradient(180deg, rgba(141,91,55,.14), rgba(141,91,55,.04)) !important;
  background-image: linear-gradient(180deg, rgba(141,91,55,.14), rgba(141,91,55,.04)) !important;
  border-color: var(--tm-formal-primary) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab.active {
  background: linear-gradient(180deg, rgba(52,121,107,.14), rgba(52,121,107,.04)) !important;
  background-image: linear-gradient(180deg, rgba(52,121,107,.14), rgba(52,121,107,.04)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab :is(.og-tab-eyebrow, .og-tab-stats),
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab :is(.og-tab-eyebrow, .og-tab-stats) {
  color: var(--tm-formal-muted) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab .og-tab-title,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab .og-tab-title {
  color: var(--tm-formal-primary-deep) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab .og-tab-stats b,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-court-tab .og-tab-stats b {
  color: var(--tm-formal-primary) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtabs-bar,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtabs-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,243,235,.86)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,243,235,.86)) !important;
  border-color: var(--tm-formal-border) !important;
  color: var(--tm-formal-ink) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtabs-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,250,246,.90)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.94), rgba(243,250,246,.90)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtabs-bar::before,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtabs-bar::before {
  color: var(--tm-formal-primary) !important;
  border-right-color: var(--tm-formal-border-soft) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab {
  background: rgba(255,255,255,.80) !important;
  background-image: none !important;
  border-color: var(--tm-formal-border) !important;
  color: var(--tm-formal-muted) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab:hover,
html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab.active,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab.active {
  background: rgba(141,91,55,.11) !important;
  border-color: var(--tm-formal-primary) !important;
  color: var(--tm-formal-primary-deep) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab.active {
  background: rgba(52,121,107,.11) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab .og-subtab-n,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab .og-subtab-n {
  background: rgba(141,91,55,.10) !important;
  color: var(--tm-formal-primary-deep) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab .og-subtab-n {
  background: rgba(52,121,107,.10) !important;
  color: var(--tm-formal-primary-deep) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab-desc,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-subtab-desc {
  color: var(--tm-formal-muted) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-frame,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-frame {
  background: var(--tm-formal-surface-2) !important;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 40px,
      rgba(112,91,63,.035) 40px, rgba(112,91,63,.035) 41px),
    radial-gradient(ellipse at center, rgba(255,255,255,.60) 0%, rgba(205,192,173,.13) 100%) !important;
  border-color: var(--tm-formal-border) !important;
  box-shadow: inset 0 2px 12px rgba(94,73,48,.10) !important;
  color: var(--tm-formal-ink) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-frame {
  background: var(--tm-formal-surface-2) !important;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 40px,
      rgba(61,104,87,.035) 40px, rgba(61,104,87,.035) 41px),
    radial-gradient(ellipse at center, rgba(255,255,255,.66) 0%, rgba(181,212,198,.14) 100%) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-hint,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-hint {
  background: rgba(255,255,255,.88) !important;
  color: var(--tm-formal-muted) !important;
  border: 1px solid var(--tm-formal-border-soft) !important;
  text-shadow: none !important;
  box-shadow: 0 2px 7px rgba(73,54,35,.08) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-hint .sep,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-hint .sep {
  color: var(--tm-formal-primary) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-zoom-ctrl button,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-zoom-ctrl button,
html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-zoom-ctrl .og-zoom-label,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-zoom-ctrl .og-zoom-label {
  background: rgba(255,255,255,.90) !important;
  border-color: var(--tm-formal-border) !important;
  color: var(--tm-formal-primary-deep) !important;
  text-shadow: none !important;
  box-shadow: 0 2px 7px rgba(73,54,35,.10) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-zoom-ctrl button:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-tree-zoom-ctrl button:hover {
  background: var(--tm-formal-surface) !important;
  border-color: var(--tm-formal-primary) !important;
}

/* Inline v10 cards carry the old pale-on-lacquer palette. Override only
 * their colours; their geometry and zoom behaviour stay intact. */
html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office :is(.og-emperor-card, .og-v10-dept, .og-v10-pos, .og-node-group),
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office :is(.og-emperor-card, .og-v10-dept, .og-v10-pos, .og-node-group) {
  color: var(--tm-formal-ink) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-emperor-card,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-emperor-card {
  background: linear-gradient(135deg, rgba(141,91,55,.16), rgba(255,255,255,.72)) !important;
  background-image: linear-gradient(135deg, rgba(141,91,55,.16), rgba(255,255,255,.72)) !important;
  border-color: var(--tm-formal-primary) !important;
  box-shadow: 0 4px 18px rgba(73,54,35,.14), inset 0 1px 0 rgba(255,255,255,.88) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-emperor-card {
  background: linear-gradient(135deg, rgba(52,121,107,.16), rgba(255,255,255,.76)) !important;
  background-image: linear-gradient(135deg, rgba(52,121,107,.16), rgba(255,255,255,.76)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-emperor-card > div,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-emperor-card > div {
  color: var(--tm-formal-primary-deep) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-node-group {
  background: linear-gradient(180deg, rgba(141,91,55,.12), rgba(255,255,255,.58)) !important;
  background-image: linear-gradient(180deg, rgba(141,91,55,.12), rgba(255,255,255,.58)) !important;
  border-color: rgba(141,91,55,.42) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-node-group {
  background: linear-gradient(180deg, rgba(52,121,107,.12), rgba(255,255,255,.62)) !important;
  background-image: linear-gradient(180deg, rgba(52,121,107,.12), rgba(255,255,255,.62)) !important;
  border-color: rgba(52,121,107,.42) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-node-group :is(.og-group-name, .og-group-desc, .og-group-stats),
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-node-group :is(.og-group-name, .og-group-desc, .og-group-stats) {
  color: var(--tm-formal-primary-deep) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-v10-dept,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-v10-dept {
  background: rgba(255,255,255,.94) !important;
  background-image: none !important;
  border-color: rgba(63,141,125,.34) !important;
  box-shadow: 0 2px 8px rgba(73,54,35,.12) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-v10-dept :is(.og-dept-name, .og-v10-dept-name, .og-dept-title),
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
  #gt-office .og-v10-dept :is(.og-dept-name, .og-v10-dept-name, .og-dept-title) {
  color: var(--tm-formal-teal) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single #tm-office-single-back,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single #tm-office-single-back {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,232,222,.94)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,232,222,.94)) !important;
  border-color: var(--tm-formal-border) !important;
  color: var(--tm-formal-primary-deep) !important;
  box-shadow: 0 4px 12px rgba(73,54,35,.16) !important;
  text-shadow: none !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single #tm-office-single-back {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(228,241,234,.94)) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.97), rgba(228,241,234,.94)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single #tm-office-single-back:hover,
html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single #tm-office-single-back:focus-visible,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single #tm-office-single-back:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single #tm-office-single-back:focus-visible {
  background: var(--tm-formal-surface) !important;
  border-color: var(--tm-formal-primary) !important;
  color: var(--tm-formal-primary-deep) !important;
}

@media (max-width: 760px) {
  html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
    #gt-office .og-fb-search,
  html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
    #gt-office .og-fb-search {
    min-width: 140px !important;
    flex: 1 1 140px !important;
  }
  html[data-theme="paper-bright"] body.tm-phase8-formal.tm-phase8-office-single
    #gt-office .og-court-tab,
  html[data-theme="celadon-bright"] body.tm-phase8-formal.tm-phase8-office-single
    #gt-office .og-court-tab {
    padding: 9px 7px !important;
  }
}