/*
 * Tianming · formal-shell readability layer
 *
 * The Phase 8 shell is assembled at runtime and its modules append their own
 * style tags.  This file is intentionally a late, high-specificity layer:
 * it keeps one typography scale and one contrast contract for both the dark
 * and the two bright themes without changing the renderer or game state.
 *
 * The host may load this file after the regular game styles (or append it as
 * the final stylesheet).  The selectors also carry the `html body` scope so
 * they win over the runtime `body.tm-phase8-formal … !important` rules.
 */

:root {
  --tm-readable-body-stack: "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Segoe UI", Arial, sans-serif;
  --tm-readable-title-stack: "Noto Serif SC", "Source Han Serif SC", "Microsoft YaHei", "STSong", "SimSun", serif;
}

/* Dark/default contract.  Legacy dark, sepia, blue and green modes all stay
 * within this high-contrast contract; the bright themes below replace only
 * the palette, never the type scale. */
html body.tm-phase8-formal {
  --tm-readable-bg: #161d26;
  --tm-readable-surface: #202a35;
  --tm-readable-surface-raised: #2a3744;
  --tm-readable-surface-soft: #26323e;
  --tm-readable-sunken: #11171e;
  --tm-readable-ink: #f5f7fa;
  --tm-readable-muted: #c4ced8;
  --tm-readable-subtle: #a9b6c2;
  --tm-readable-border: #596a7b;
  --tm-readable-border-soft: #40505f;
  --tm-readable-accent: #f1c76a;
  --tm-readable-accent-strong: #ffdc91;
  --tm-readable-link: #8fd4c0;
  --tm-readable-danger: #ff9b8d;
  --tm-readable-success: #9ad8a8;
  --tm-readable-shadow: 0 12px 30px rgba(0, 0, 0, .34);
  --tm-readable-focus: #91d8c4;
  color-scheme: dark;
  background: var(--tm-readable-bg) !important;
  color: var(--tm-readable-ink) !important;
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  font-size: clamp(15px, calc(15px * var(--tm-ui-scale, 1)), 22px) !important;
  line-height: 1.56 !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
}

/* Light palettes.  Foreground values are deliberately dark enough for long
 * text, while accent values remain readable on white controls. */
html[data-theme="paper-bright"] body.tm-phase8-formal {
  --tm-readable-bg: #f1ece4;
  --tm-readable-surface: #fffdf8;
  --tm-readable-surface-raised: #ffffff;
  --tm-readable-surface-soft: #f7f2e9;
  --tm-readable-sunken: #e8ded0;
  --tm-readable-ink: #26332d;
  --tm-readable-muted: #53645c;
  --tm-readable-subtle: #69786f;
  --tm-readable-border: #bfae98;
  --tm-readable-border-soft: #d9cdbd;
  --tm-readable-accent: #7d4d27;
  --tm-readable-accent-strong: #64391b;
  --tm-readable-link: #2f7768;
  --tm-readable-danger: #9c3e35;
  --tm-readable-success: #347451;
  --tm-readable-shadow: 0 12px 30px rgba(76, 57, 37, .16);
  --tm-readable-focus: #2f7768;
  color-scheme: light;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal {
  --tm-readable-bg: #e9f3ee;
  --tm-readable-surface: #fafffc;
  --tm-readable-surface-raised: #ffffff;
  --tm-readable-surface-soft: #f1f9f5;
  --tm-readable-sunken: #dbece3;
  --tm-readable-ink: #20382f;
  --tm-readable-muted: #4e685d;
  --tm-readable-subtle: #648076;
  --tm-readable-border: #abc9bb;
  --tm-readable-border-soft: #cce0d5;
  --tm-readable-accent: #2f7465;
  --tm-readable-accent-strong: #245b50;
  --tm-readable-link: #286f63;
  --tm-readable-danger: #a1483e;
  --tm-readable-success: #2f7452;
  --tm-readable-shadow: 0 12px 30px rgba(49, 93, 76, .15);
  --tm-readable-focus: #286f63;
  color-scheme: light;
}

/* ------------------------------------------------------------------------- */
/* Shell surfaces                                                             */
/* ------------------------------------------------------------------------- */

html body.tm-phase8-formal #tm-phase8-main-shell,
html body.tm-phase8-formal #G,
html body.tm-phase8-formal #E,
html body.tm-phase8-formal .gc {
  background: var(--tm-readable-bg) !important;
  color: var(--tm-readable-ink) !important;
}

html body.tm-phase8-formal #topbar,
html body.tm-phase8-formal #tm-phase8-left-surface,
html body.tm-phase8-formal #tm-phase8-right-surface,
html body.tm-phase8-formal #tm-phase8-formal-rail,
html body.tm-phase8-formal #tm-right-rail,
html body.tm-phase8-formal #rpanel,
html body.tm-phase8-formal #tm-phase8-event-notice,
html body.tm-phase8-formal .tmf-panel,
html body.tm-phase8-formal .tmf-module,
html body.tm-phase8-formal .tmrp-formal,
html body.tm-phase8-formal .tmrp,
html body.tm-phase8-formal .tmv3-feed,
html body.tm-phase8-formal .tm-desk-panel,
html body.tm-phase8-formal .tm-desk-overlay,
html body.tm-phase8-formal .tm-bridge-panel,
html body.tm-phase8-formal .tm-social-detail-flyout,
html body.tm-phase8-formal .tm-army-detail-flyout,
html body.tm-phase8-formal .tmf-map-dossier,
html body.tm-phase8-formal .tmf-map-legend,
html body.tm-phase8-formal .tmf-map-tools,
html body.tm-phase8-formal .tmf-map-alerts,
html body.tm-phase8-formal .map-tools-pop,
html body.tm-phase8-formal .map-legend,
html body.tm-phase8-formal .map-tooltip,
html body.tm-phase8-formal .generic-modal,
html body.tm-phase8-formal .modal,
html body.tm-phase8-formal .modal-content,
html body.tm-phase8-formal .arc-modal,
html body.tm-phase8-formal .renwu-atlas,
html body.tm-phase8-formal .renwu-panel {
  background-color: var(--tm-readable-surface) !important;
  color: var(--tm-readable-ink) !important;
  border-color: var(--tm-readable-border) !important;
  box-shadow: var(--tm-readable-shadow) !important;
  text-shadow: none !important;
}

html body.tm-phase8-formal #topbar {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--tm-readable-surface-raised) 96%, transparent), var(--tm-readable-surface-soft)) !important;
  border-bottom: 1px solid var(--tm-readable-border) !important;
}

/* `color-mix()` is decorative only; solid fallbacks keep older Chromium
 * builds readable. */
@supports not (background: color-mix(in srgb, white, black)) {
  html body.tm-phase8-formal #topbar {
    background-image: linear-gradient(180deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  }
}

html body.tm-phase8-formal #tm-phase8-main-shell,
html body.tm-phase8-formal #tm-phase8-left-surface,
html body.tm-phase8-formal #tm-phase8-right-surface,
html body.tm-phase8-formal #tm-phase8-formal-rail,
html body.tm-phase8-formal #tm-right-rail,
html body.tm-phase8-formal #rpanel {
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
}

/* Prefix catches future runtime modules without assigning a panel background
 * to map SVG layers or image wrappers. */
html body.tm-phase8-formal :is([class^="tmf-"], [class*=" tmf-"], [class^="tmrp-"], [class*=" tmrp-"], [class^="tmv3-"], [class*=" tmv3-"], [class^="tm-desk-"], [class*=" tm-desk-"], [class^="tm-event-"], [class*=" tm-event-"]) {
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  text-shadow: none !important;
}

/* Common card/row surfaces generated by the formal modules. */
html body.tm-phase8-formal :is(
  .tmf-card, .tmf-module-body, .tmf-module-main, .tmf-module-left,
  .tmf-module-right, .tmf-module-item, .tmf-record-row, .tmf-sz-card,
  .tmf-sz-block, .tmf-bk-cause, .tmf-letter-editor, .tmf-edict-paper,
  .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-request,
  .tmrp-wd-person, .tmv3-list, .tmv3-feed, .tmv3-filters, .tmv3-foot,
  .tm-desk-card, .tm-desk-item, .tm-desk-row, .tm-desk-pane,
  .tm-desk-table, .tm-event-item, .tm-event-turn-menu, .tm-event-turn-choice,
  .renwu-card, .renwu-side-card, .renwu-work-card, .renwu-sec,
  .records-card, .records-section-v5, .records-entry-v5, .qjblock,
  .mem-card, .generic-modal-body, .modal-body, .arc-body
) {
  background: var(--tm-readable-surface-soft) !important;
  border-color: var(--tm-readable-border-soft) !important;
  color: var(--tm-readable-ink) !important;
}

html body.tm-phase8-formal :is(
  .tmf-module-body, .tmf-module-main, .tmrp-card, .tmrp-summary,
  .tmv3-list, .tm-desk-card, .tm-desk-pane, .records-card, .mem-card
) {
  background-image: linear-gradient(180deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
}

/* Scrims remain translucent so a bright theme does not turn dialogs into a
 * white-on-white veil. */
html body.tm-phase8-formal :is(.tmf-module-overlay, .tmf-records-overlay,
  .tm-bridge-scrim, .tm-bridge-overlay, .arc-scrim, .generic-modal-overlay,
  .modal-bg, .modal-overlay) {
  background: rgba(11, 16, 22, .46) !important;
  backdrop-filter: blur(4px) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal :is(.tmf-module-overlay,
  .tmf-records-overlay, .tm-bridge-scrim, .tm-bridge-overlay, .arc-scrim,
  .generic-modal-overlay, .modal-bg, .modal-overlay),
html[data-theme="celadon-bright"] body.tm-phase8-formal :is(.tmf-module-overlay,
  .tmf-records-overlay, .tm-bridge-scrim, .tm-bridge-overlay, .arc-scrim,
  .generic-modal-overlay, .modal-bg, .modal-overlay) {
  background: rgba(40, 45, 42, .30) !important;
}

/* ------------------------------------------------------------------------- */
/* One type scale for every dynamic module                                   */
/* ------------------------------------------------------------------------- */

/* Set the body and all text-bearing descendants.  `clamp()` guarantees the
 * readable floor even when a legacy “极小” preference writes a scale below 1.
 * The preferred value still follows --tm-ui-scale for larger settings. */
html body.tm-phase8-formal :is(
  #tm-phase8-main-shell, #topbar, #tm-phase8-left-surface,
  #tm-phase8-right-surface, #tm-phase8-formal-rail, #tm-right-rail, #rpanel,
  #tm-phase8-event-notice, #tm-phase8-action-tray,
  .tmf-module, .tmf-panel, .tmrp, .tmv3-feed,
  [class^="tm-desk-"], [class*=" tm-desk-"], [class^="tm-event-"], [class*=" tm-event-"],
  .tm-bridge-panel, .tm-social-detail-flyout, .tm-army-detail-flyout,
  .tmf-map-dossier, .tmf-map-legend, .tmf-map-tools, .tmf-map-alerts,
  .map-tools-pop, .map-legend, .map-tooltip, .generic-modal, .modal,
  .arc-modal, .renwu-atlas, .renwu-panel
) :is(button, input, textarea, select, label, p, li, dt, dd, td, th,
  span, b, strong, em, i, a, summary, output, figcaption, time) {
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  font-size: clamp(15px, calc(15px * var(--tm-ui-scale, 1)), 22px) !important;
  line-height: 1.52 !important;
  letter-spacing: .01em !important;
  color: var(--tm-readable-ink) !important;
  text-shadow: none !important;
}

/* Auxiliary copy is still comfortably above the 13px floor. */
html body.tm-phase8-formal :is(
  .meta, .sub, .desc, .note, .hint, .kicker, .caption, .foot,
  small, .tmf-module-note, .tmf-sz-hint, .tmrp-meta, .tmrp-empty,
  .tmrp-card-title small, .tmrp-card-title em, .tmrp-stat span,
  .tmv3-meta, .tmv3-turn, .tmv3-ttype, .tmv3-foot, .tm-desk-subtitle,
  .tm-desk-field small, .tm-event-type, .tm-event-kicker, .map-hint,
  .map-legend-note, .map-legend-sub, .map-search-label, .map-scale,
  .renwu-card-meta, .renwu-prose, .records-entry-body-v5, .letter-meta,
  .qiju-turn, .gs-panel-cnt
) {
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  font-size: clamp(13px, calc(13px * var(--tm-ui-scale, 1)), 18px) !important;
  line-height: 1.56 !important;
  color: var(--tm-readable-muted) !important;
  text-shadow: none !important;
}

/* The selector above intentionally includes only text elements.  This rule
 * catches plain text nodes in module wrappers through inheritance without
 * changing image/SVG dimensions. */
html body.tm-phase8-formal :is(
  #tm-phase8-main-shell, #topbar, #tm-phase8-left-surface,
  #tm-phase8-right-surface, #tm-phase8-formal-rail, #tm-right-rail, #rpanel,
  #tm-phase8-event-notice, #tm-phase8-action-tray, .tmf-module, .tmrp,
  .tmv3-feed, [class^="tm-desk-"], [class*=" tm-desk-"],
  [class^="tm-event-"], [class*=" tm-event-"], .tm-bridge-panel,
  .tm-social-detail-flyout, .tm-army-detail-flyout, .tmf-map-dossier,
  .tmf-map-legend, .tmf-map-tools, .tmf-map-alerts, .map-tools-pop,
  .map-legend, .map-tooltip, .generic-modal, .modal, .arc-modal,
  .renwu-atlas, .renwu-panel
) {
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  line-height: 1.56 !important;
  color: var(--tm-readable-ink) !important;
  text-shadow: none !important;
}

/* Headings and named titles use the selected title face, while values and
 * prose stay on the selected body face. */
html body.tm-phase8-formal :is(
  h1, h2, h3, h4, h5, h6,
  .tmf-module-title, .tmf-module h2, .tmf-module h3,
  .tmf-sz-detail-head, .tmf-sz-summary, .tmrp-card-title span,
  .tmrp-card-title b, .tmrp-admin-title b, .tmrp-office-node summary,
  .tmrp-ledger-head span, .tmrp-ecology-head b, .tmrp-mode-card b,
  .tmv3-title, .tmv3-turnhead, .tm-desk-title, .tm-desk-head,
  .tm-desk-tab, .tm-event-board-title, .tm-event-title-wrap b,
  .tm-event-turn-button span, .tmf-map-legend-title, .map-legend-title,
  .renwu-titletext, .renwu-profile-title, .renwu-card-name,
  .records-section-title-v5, .mem-title, .rp-title, .tm-letter-read-card h3
) {
  font-family: var(--tm-font-title, var(--tm-readable-title-stack)) !important;
  font-size: clamp(19px, calc(20px * var(--tm-ui-scale, 1)), 32px) !important;
  line-height: 1.28 !important;
  letter-spacing: .04em !important;
  color: var(--tm-readable-accent) !important;
  text-shadow: none !important;
}

html body.tm-phase8-formal :is(
  #topbar .tb-dyn, #topbar .tb-time-main, #topbar .tb-chip-label,
  #topbar .tb-var .tb-vv, #topbar .tb-seal-idx .tsi-ch,
  .tmf-desk-action .zb-action-title, .zb-action-title, .tmf-action-title,
  .tmrp-stat b, .tmrp-card-title span, .tmv3-mark, .tmv3-cnt,
  .tm-desk-stat, .tm-desk-item b, .tm-event-item b, .tm-event-main b,
  .renwu-stat b, .renwu-side-metric b
) {
  font-size: clamp(17px, calc(18px * var(--tm-ui-scale, 1)), 28px) !important;
  font-weight: 700 !important;
  color: var(--tm-readable-accent) !important;
}

html body.tm-phase8-formal :is(
  #topbar .tb-dyn, #topbar .tb-time-main, #topbar .tb-chip-label,
  .tmf-desk-action .zb-action-title, .zb-action-title, .tmf-action-title
) {
  font-family: var(--tm-font-title, var(--tm-readable-title-stack)) !important;
}

/* Formal topbar metadata has less room; it remains readable without letting
 * the variable rail become a horizontal scrollbar. */
html body.tm-phase8-formal #topbar :is(
  .tb-ruler, .tb-time-sub, .tb-w-name, .tb-w-desc, .tb-vn, .tb-vding,
  .tb-var .tb-vsubs, .tb-var .sv, .tb-seal-idx .tsi-val
) {
  font-size: clamp(13px, calc(13px * var(--tm-ui-scale, 1)), 17px) !important;
  line-height: 1.35 !important;
  color: var(--tm-readable-muted) !important;
}

/* Resource values inherit pale ink from the original dark topbar.  Give both
 * bright themes an explicit, semantic contrast hierarchy instead. */
html:is([data-theme="paper-bright"], [data-theme="celadon-bright"])
body.tm-phase8-formal #topbar .tb-var.wide .tb-vn {
  color: var(--tm-readable-accent) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

html:is([data-theme="paper-bright"], [data-theme="celadon-bright"])
body.tm-phase8-formal #topbar .tb-var.wide .tb-vs .sv b {
  color: var(--tm-readable-ink) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

html:is([data-theme="paper-bright"], [data-theme="celadon-bright"])
body.tm-phase8-formal #topbar .tb-var.wide .sv .sd {
  color: var(--tm-readable-muted) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

html:is([data-theme="paper-bright"], [data-theme="celadon-bright"])
body.tm-phase8-formal #topbar .tb-var.wide .sv .sd.up {
  color: var(--tm-readable-success) !important;
}

html:is([data-theme="paper-bright"], [data-theme="celadon-bright"])
body.tm-phase8-formal #topbar .tb-var.wide .sv .sd.dn {
  color: var(--tm-readable-danger) !important;
}

html body.tm-phase8-formal #endturn .et-big .sub {
  color: rgba(255, 246, 224, .86) !important;
  text-shadow: 0 1px 2px rgba(54, 12, 8, .72) !important;
}

/* ------------------------------------------------------------------------- */
/* Outgame readability contract                                              */
/*
 * The launch and scenario pages are rendered by the legacy launcher after
 * this stylesheet has already loaded.  Their original rules deliberately
 * use an opaque ink palette, so changing only the formal shell leaves the
 * scenario picker dark even when a bright theme is selected.  Keep this
 * late, scoped pass independent from the runtime body class and apply the
 * same typography/contrast contract before and after a scenario is chosen.
 */

html[data-theme="paper-bright"],
html[data-theme="celadon-bright"] {
  --tm-out-bg: #eef3ef;
  --tm-out-surface: #fbfdfb;
  --tm-out-surface-soft: #f2f7f3;
  --tm-out-surface-raised: #ffffff;
  --tm-out-ink: #24352e;
  --tm-out-muted: #52665c;
  --tm-out-subtle: #6c7d74;
  --tm-out-border: #b9cec2;
  --tm-out-border-soft: #d7e5dc;
  --tm-out-accent: #2f7465;
  --tm-out-accent-strong: #245a4f;
  --tm-out-shadow: 0 12px 30px rgba(42, 79, 64, .14);
}

html[data-theme="paper-bright"] {
  --tm-out-bg: #f4eee5;
  --tm-out-surface: #fffdf8;
  --tm-out-surface-soft: #f8f2e9;
  --tm-out-surface-raised: #ffffff;
  --tm-out-ink: #2d2b27;
  --tm-out-muted: #625b52;
  --tm-out-subtle: #796f62;
  --tm-out-border: #cbbca8;
  --tm-out-border-soft: #e3d8c9;
  --tm-out-accent: #8b5a32;
  --tm-out-accent-strong: #6d411f;
  --tm-out-shadow: 0 12px 30px rgba(91, 67, 40, .14);
}

html[data-theme="paper-bright"] #launch,
html[data-theme="celadon-bright"] #launch,
html[data-theme="paper-bright"] #launch .home-stage,
html[data-theme="celadon-bright"] #launch .home-stage,
html[data-theme="paper-bright"] #scn-page,
html[data-theme="celadon-bright"] #scn-page {
  background-color: var(--tm-out-bg) !important;
  color: var(--tm-out-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #launch .home-stage,
html[data-theme="celadon-bright"] #launch .home-stage {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.86), transparent 35%),
    radial-gradient(circle at 86% 30%, rgba(192,220,207,.28), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.42), transparent 52%) !important;
}

html[data-theme="paper-bright"] #launch .home-stage::before,
html[data-theme="paper-bright"] #launch .home-stage::after,
html[data-theme="celadon-bright"] #launch .home-stage::before,
html[data-theme="celadon-bright"] #launch .home-stage::after {
  background: repeating-linear-gradient(90deg, transparent 0, transparent 4em,
    rgba(94, 118, 104, .045) 4em, rgba(94, 118, 104, .045) calc(4em + 1px)) !important;
  mix-blend-mode: normal !important;
  opacity: .9 !important;
  filter: none !important;
}

html[data-theme="paper-bright"] #launch :is(.home-seal-lbl, .home-sub,
  .home-ylian, .home-ylian .s, .home-panel-title, .home-panel-title span,
  .home-recent, .home-recent .r-item, .home-recent .r-name,
  .home-recent .r-meta, .home-recent .r-empty, .home-foot,
  .home-foot .f-mid, .home-foot .f-right, .home-tools button),
html[data-theme="celadon-bright"] #launch :is(.home-seal-lbl, .home-sub,
  .home-ylian, .home-ylian .s, .home-panel-title, .home-panel-title span,
  .home-recent, .home-recent .r-item, .home-recent .r-name,
  .home-recent .r-meta, .home-recent .r-empty, .home-foot,
  .home-foot .f-mid, .home-foot .f-right, .home-tools button) {
  color: var(--tm-out-muted) !important;
  text-shadow: none !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(13px, calc(13px * var(--tm-ui-scale, 1)), 18px) !important;
  line-height: 1.55 !important;
}

html[data-theme="paper-bright"] #launch .home-title,
html[data-theme="celadon-bright"] #launch .home-title {
  color: var(--tm-out-accent) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  text-shadow: 0 2px 0 rgba(255,255,255,.84), 0 8px 22px rgba(61, 53, 41, .12) !important;
  font-family: var(--tm-readable-title-stack) !important;
}

html[data-theme="paper-bright"] #launch .home-card,
html[data-theme="celadon-bright"] #launch .home-card {
  background: linear-gradient(110deg, var(--tm-out-surface-raised), var(--tm-out-surface)) !important;
  border-color: var(--tm-out-border) !important;
  box-shadow: var(--tm-out-shadow) !important;
  color: var(--tm-out-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
}

html[data-theme="paper-bright"] #launch .home-card::before,
html[data-theme="celadon-bright"] #launch .home-card::before {
  border-color: var(--tm-out-border-soft) !important;
}

html[data-theme="paper-bright"] #launch .home-card-cn,
html[data-theme="celadon-bright"] #launch .home-card-cn {
  color: var(--tm-out-accent) !important;
  font-family: var(--tm-readable-title-stack) !important;
  font-size: clamp(19px, calc(21px * var(--tm-ui-scale, 1)), 30px) !important;
  line-height: 1.25 !important;
}

html[data-theme="paper-bright"] #launch .home-card-ti,
html[data-theme="celadon-bright"] #launch .home-card-ti {
  color: var(--tm-out-muted) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 19px) !important;
  line-height: 1.35 !important;
}

html[data-theme="paper-bright"] #launch .home-card-desc,
html[data-theme="celadon-bright"] #launch .home-card-desc {
  color: var(--tm-out-muted) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 19px) !important;
  line-height: 1.6 !important;
}

html[data-theme="paper-bright"] #launch .home-card-key,
html[data-theme="celadon-bright"] #launch .home-card-key {
  color: var(--tm-out-accent) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(13px, calc(13px * var(--tm-ui-scale, 1)), 18px) !important;
}

html[data-theme="paper-bright"] #launch :is(.home-panel, .home-tools button),
html[data-theme="celadon-bright"] #launch :is(.home-panel, .home-tools button) {
  background: var(--tm-out-surface) !important;
  border-color: var(--tm-out-border) !important;
  box-shadow: var(--tm-out-shadow) !important;
}

html[data-theme="paper-bright"] #launch .home-panel-title strong,
html[data-theme="celadon-bright"] #launch .home-panel-title strong {
  color: var(--tm-out-accent) !important;
  font-family: var(--tm-readable-title-stack) !important;
  font-size: clamp(16px, calc(16px * var(--tm-ui-scale, 1)), 22px) !important;
}

html[data-theme="paper-bright"] #launch .home-tools button:hover,
html[data-theme="celadon-bright"] #launch .home-tools button:hover {
  background: var(--tm-out-surface-raised) !important;
  border-color: var(--tm-out-accent) !important;
  color: var(--tm-out-accent-strong) !important;
}

/* Scenario picker and its dynamically-created subtitle/cards. */
html[data-theme="paper-bright"] #scn-page,
html[data-theme="celadon-bright"] #scn-page {
  background-image: linear-gradient(180deg, var(--tm-out-surface-soft), var(--tm-out-bg)) !important;
  font-size: 15px !important;
}

html[data-theme="paper-bright"] #scn-page::before,
html[data-theme="celadon-bright"] #scn-page::before {
  background: repeating-linear-gradient(90deg, transparent 0, transparent 4em,
    rgba(85, 112, 96, .045) 4em, rgba(85, 112, 96, .045) calc(4em + 1px)) !important;
  opacity: 1 !important;
}

html[data-theme="paper-bright"] #scn-page .scn-page-title,
html[data-theme="celadon-bright"] #scn-page .scn-page-title {
  color: var(--tm-out-accent) !important;
  font-family: var(--tm-readable-title-stack) !important;
  font-size: clamp(27px, calc(28px * var(--tm-ui-scale, 1)), 38px) !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #scn-page .scn-page-title::before,
html[data-theme="paper-bright"] #scn-page .scn-page-title::after,
html[data-theme="celadon-bright"] #scn-page .scn-page-title::before,
html[data-theme="celadon-bright"] #scn-page .scn-page-title::after {
  color: var(--tm-out-accent-strong) !important;
}

html[data-theme="paper-bright"] #scn-page > div[style*="text-align"],
html[data-theme="celadon-bright"] #scn-page > div[style*="text-align"] {
  color: var(--tm-out-subtle) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 18px) !important;
  line-height: 1.55 !important;
  letter-spacing: .12em !important;
}

html[data-theme="paper-bright"] #scn-page .scn-grid,
html[data-theme="celadon-bright"] #scn-page .scn-grid {
  gap: 18px !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card,
html[data-theme="celadon-bright"] #scn-page .scn-card {
  background-color: var(--tm-out-surface) !important;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 2.5em,
    rgba(120, 91, 49, .035) 2.5em, rgba(120, 91, 49, .035) calc(2.5em + 1px)),
    linear-gradient(160deg, var(--tm-out-surface-raised), var(--tm-out-surface-soft)) !important;
  border-color: var(--tm-out-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(67, 86, 75, .10) !important;
  color: var(--tm-out-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  min-height: 156px !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card::before,
html[data-theme="celadon-bright"] #scn-page .scn-card::before {
  background: linear-gradient(180deg, var(--tm-out-accent), var(--tm-out-border), var(--tm-out-accent)) !important;
  opacity: .9 !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card::after,
html[data-theme="celadon-bright"] #scn-page .scn-card::after {
  background: radial-gradient(circle at 35% 35%, #df8a70, #b34e41) !important;
  box-shadow: 0 0 0 1px rgba(117, 56, 44, .16), 0 3px 8px rgba(117, 56, 44, .16) !important;
  opacity: .78 !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card:hover,
html[data-theme="celadon-bright"] #scn-page .scn-card:hover {
  border-color: var(--tm-out-accent) !important;
  box-shadow: 0 12px 26px rgba(67, 86, 75, .16) !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card :is(.scn-era, .scn-name,
  .scn-role, .scn-bg),
html[data-theme="celadon-bright"] #scn-page .scn-card :is(.scn-era, .scn-name,
  .scn-role, .scn-bg) {
  font-family: var(--tm-readable-body-stack) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card .scn-era,
html[data-theme="celadon-bright"] #scn-page .scn-card .scn-era {
  color: var(--tm-out-accent) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 18px) !important;
  line-height: 1.45 !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card .scn-name,
html[data-theme="celadon-bright"] #scn-page .scn-card .scn-name {
  color: var(--tm-out-ink) !important;
  font-family: var(--tm-readable-title-stack) !important;
  font-size: clamp(18px, calc(18px * var(--tm-ui-scale, 1)), 24px) !important;
  line-height: 1.4 !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card .scn-role,
html[data-theme="celadon-bright"] #scn-page .scn-card .scn-role {
  color: var(--tm-out-accent-strong) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 18px) !important;
  line-height: 1.45 !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card .scn-bg,
html[data-theme="celadon-bright"] #scn-page .scn-card .scn-bg {
  color: var(--tm-out-muted) !important;
  font-size: clamp(14px, calc(15px * var(--tm-ui-scale, 1)), 20px) !important;
  line-height: 1.7 !important;
  font-style: normal !important;
}

html[data-theme="paper-bright"] #scn-page .scn-card-new,
html[data-theme="celadon-bright"] #scn-page .scn-card-new {
  background: var(--tm-out-surface-soft) !important;
  border: 1.5px dashed var(--tm-out-border) !important;
  color: var(--tm-out-accent) !important;
  font-size: clamp(15px, calc(15px * var(--tm-ui-scale, 1)), 20px) !important;
}

html[data-theme="paper-bright"] #scn-page button,
html[data-theme="celadon-bright"] #scn-page button {
  min-height: 40px !important;
  padding: 9px 14px !important;
  border-color: var(--tm-out-border) !important;
  border-radius: 8px !important;
  color: var(--tm-out-ink) !important;
  background: var(--tm-out-surface-raised) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(15px, calc(15px * var(--tm-ui-scale, 1)), 20px) !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #scn-page button.bt.bp,
html[data-theme="celadon-bright"] #scn-page button.bt.bp {
  background: linear-gradient(135deg, var(--tm-out-accent), var(--tm-out-accent-strong)) !important;
  border-color: var(--tm-out-accent-strong) !important;
  color: #fffdf8 !important;
}

/* Dynamic preview/setup dialogs use inline legacy colors; this pass keeps
 * their text and controls readable without changing their layout. */
html[data-theme="paper-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal),
html[data-theme="celadon-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) {
  background: rgba(48, 55, 51, .26) !important;
  backdrop-filter: blur(5px) !important;
}

html[data-theme="paper-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) .scn-preview-modal,
html[data-theme="celadon-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) .scn-preview-modal {
  background: linear-gradient(180deg, var(--tm-out-surface-raised), var(--tm-out-surface-soft)) !important;
  border-color: var(--tm-out-border) !important;
  box-shadow: 0 22px 60px rgba(54, 73, 63, .22) !important;
  color: var(--tm-out-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
}

html[data-theme="paper-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) .scn-preview-modal :is(div, label, p, span, input, textarea, button),
html[data-theme="celadon-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) .scn-preview-modal :is(div, label, p, span, input, textarea, button) {
  font-family: var(--tm-readable-body-stack) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) .scn-preview-modal input,
html[data-theme="paper-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) .scn-preview-modal textarea,
html[data-theme="celadon-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) .scn-preview-modal input,
html[data-theme="celadon-bright"] :is(#_scnPreview, #_mapModeChoice, #_gameSetupModal) .scn-preview-modal textarea {
  color: var(--tm-out-ink) !important;
  background: var(--tm-out-surface-raised) !important;
  border-color: var(--tm-out-border) !important;
  font-size: clamp(15px, calc(15px * var(--tm-ui-scale, 1)), 20px) !important;
  line-height: 1.5 !important;
}

@media (max-width: 760px) {
  html[data-theme="paper-bright"] #scn-page .scn-card,
  html[data-theme="celadon-bright"] #scn-page .scn-card {
    min-height: 144px !important;
  }
  html[data-theme="paper-bright"] #scn-page .scn-card .scn-bg,
  html[data-theme="celadon-bright"] #scn-page .scn-card .scn-bg {
    font-size: 14px !important;
  }
}

/* The bridge's legacy drawer rule is scoped as
 * `body.tm-phase8-formal #drawer*.gs-drawer.right` and carries !important.
 * Repeat the bright-surface rule with the same anchors (plus the theme
 * attribute) so the old dark gradient cannot win the cascade. */
html[data-theme="paper-bright"] body.tm-phase8-formal #drawerRight.gs-drawer.right,
html[data-theme="celadon-bright"] body.tm-phase8-formal #drawerRight.gs-drawer.right,
html[data-theme="paper-bright"] body.tm-phase8-formal #drawerLeft.gs-drawer.left,
html[data-theme="celadon-bright"] body.tm-phase8-formal #drawerLeft.gs-drawer.left {
  background: linear-gradient(180deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  background-image: linear-gradient(180deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  color: var(--tm-readable-ink) !important;
  border-color: var(--tm-readable-border) !important;
  box-shadow: -12px 0 30px rgba(47, 67, 58, .16) !important;
}

/* Opening ceremony: it is a full-screen game state, so it must follow the
 * selected bright palette as well.  The original ceremony intentionally uses
 * near-black surfaces and pale ink; these overrides keep the same hierarchy
 * while removing the eye-straining wash. */
html[data-theme="paper-bright"] #tm-opening,
html[data-theme="celadon-bright"] #tm-opening {
  background: linear-gradient(178deg, var(--tm-out-surface-soft), var(--tm-out-bg) 58%, var(--tm-out-surface)) !important;
  color: var(--tm-out-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-opening::before,
html[data-theme="celadon-bright"] #tm-opening::before {
  background: radial-gradient(900px 460px at 50% 0%, rgba(255,255,255,.88), transparent 68%),
    linear-gradient(135deg, rgba(217,188,143,.16), transparent 52%, rgba(172,211,194,.18)) !important;
  opacity: 1 !important;
}

html[data-theme="paper-bright"] #tm-opening::after,
html[data-theme="celadon-bright"] #tm-opening::after {
  opacity: .28 !important;
  background: radial-gradient(1px 1px at 18% 24%, rgba(85,112,96,.32), transparent),
    radial-gradient(1px 1px at 72% 16%, rgba(85,112,96,.24), transparent),
    radial-gradient(1px 1px at 44% 60%, rgba(85,112,96,.28), transparent) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-title,
html[data-theme="celadon-bright"] #tm-opening .tm-op-title {
  border-bottom-color: var(--tm-out-border) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-title::after,
html[data-theme="celadon-bright"] #tm-opening .tm-op-title::after {
  background: linear-gradient(90deg, transparent, var(--tm-out-accent), transparent) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-name,
html[data-theme="celadon-bright"] #tm-opening .tm-op-name,
html[data-theme="paper-bright"] #tm-opening .tm-op-who,
html[data-theme="celadon-bright"] #tm-opening .tm-op-who {
  color: var(--tm-out-accent) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--tm-readable-title-stack) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-name,
html[data-theme="celadon-bright"] #tm-opening .tm-op-name {
  font-size: clamp(29px, calc(32px * var(--tm-ui-scale, 1)), 42px) !important;
  line-height: 1.18 !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-sub,
html[data-theme="celadon-bright"] #tm-opening .tm-op-sub,
html[data-theme="paper-bright"] #tm-opening .tm-op-plight,
html[data-theme="celadon-bright"] #tm-opening .tm-op-plight,
html[data-theme="paper-bright"] #tm-opening .tm-op-eyes-h,
html[data-theme="celadon-bright"] #tm-opening .tm-op-eyes-h,
html[data-theme="paper-bright"] #tm-opening .tm-op-hint,
html[data-theme="celadon-bright"] #tm-opening .tm-op-hint,
html[data-theme="paper-bright"] #tm-opening .tm-op-fnote,
html[data-theme="celadon-bright"] #tm-opening .tm-op-fnote {
  color: var(--tm-out-muted) !important;
  font-family: var(--tm-readable-body-stack) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-sub,
html[data-theme="celadon-bright"] #tm-opening .tm-op-sub {
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 18px) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-fig,
html[data-theme="celadon-bright"] #tm-opening .tm-op-fig {
  background: linear-gradient(180deg, var(--tm-out-surface-raised), var(--tm-out-surface-soft)) !important;
  border-color: var(--tm-out-border) !important;
  box-shadow: var(--tm-out-shadow) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-fig img,
html[data-theme="celadon-bright"] #tm-opening .tm-op-fig img {
  filter: saturate(.98) contrast(1.02) brightness(1.06) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-vig,
html[data-theme="celadon-bright"] #tm-opening .tm-op-vig {
  background: linear-gradient(180deg, transparent 60%, rgba(255,255,255,.12)) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-frame,
html[data-theme="celadon-bright"] #tm-opening .tm-op-frame {
  border-color: var(--tm-out-border) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-frame::before,
html[data-theme="paper-bright"] #tm-opening .tm-op-frame::after,
html[data-theme="celadon-bright"] #tm-opening .tm-op-frame::before,
html[data-theme="celadon-bright"] #tm-opening .tm-op-frame::after {
  border-color: var(--tm-out-accent) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-rtag,
html[data-theme="celadon-bright"] #tm-opening .tm-op-rtag {
  color: var(--tm-out-accent-strong) !important;
  background: rgba(255,255,255,.78) !important;
  border-color: var(--tm-out-border) !important;
  font-size: 13px !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-who small,
html[data-theme="celadon-bright"] #tm-opening .tm-op-who small {
  color: var(--tm-out-muted) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 14px !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-eyes-h::before,
html[data-theme="paper-bright"] #tm-opening .tm-op-eyes-h::after,
html[data-theme="celadon-bright"] #tm-opening .tm-op-eyes-h::before,
html[data-theme="celadon-bright"] #tm-opening .tm-op-eyes-h::after {
  background: linear-gradient(90deg, transparent, var(--tm-out-border), transparent) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-eye,
html[data-theme="celadon-bright"] #tm-opening .tm-op-eye {
  background: linear-gradient(110deg, var(--tm-out-surface-raised), var(--tm-out-surface-soft)) !important;
  border-color: var(--tm-out-border-soft) !important;
  box-shadow: 0 4px 12px rgba(67, 86, 75, .08) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-eye-tx b,
html[data-theme="celadon-bright"] #tm-opening .tm-op-eye-tx b {
  color: var(--tm-out-accent) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 18px) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-eye-tx span,
html[data-theme="celadon-bright"] #tm-opening .tm-op-eye-tx span {
  color: var(--tm-out-muted) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(13px, calc(13px * var(--tm-ui-scale, 1)), 17px) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-paper,
html[data-theme="celadon-bright"] #tm-opening .tm-op-paper {
  background: repeating-linear-gradient(0deg, transparent 0 37px, rgba(91,123,104,.055) 37px 38px),
    linear-gradient(160deg, var(--tm-out-surface-raised), var(--tm-out-surface-soft)) !important;
  border-color: var(--tm-out-border) !important;
  box-shadow: inset 0 0 28px rgba(71, 96, 81, .08), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-narr,
html[data-theme="celadon-bright"] #tm-opening .tm-op-narr {
  color: var(--tm-out-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(16px, calc(16px * var(--tm-ui-scale, 1)), 22px) !important;
  line-height: 2 !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-foot,
html[data-theme="celadon-bright"] #tm-opening .tm-op-foot {
  border-top-color: var(--tm-out-border) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-skip,
html[data-theme="celadon-bright"] #tm-opening .tm-op-skip {
  color: var(--tm-out-accent-strong) !important;
  background: var(--tm-out-surface-raised) !important;
  border-color: var(--tm-out-border) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: 14px !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-enter,
html[data-theme="celadon-bright"] #tm-opening .tm-op-enter {
  color: #fffdf8 !important;
  background: linear-gradient(135deg, var(--tm-out-accent), var(--tm-out-accent-strong)) !important;
  border-color: var(--tm-out-accent-strong) !important;
  font-family: var(--tm-readable-title-stack) !important;
  font-size: clamp(17px, calc(18px * var(--tm-ui-scale, 1)), 24px) !important;
  text-shadow: none !important;
  box-shadow: 0 8px 18px rgba(53, 91, 74, .18) !important;
}

html[data-theme="paper-bright"] #tm-opening .tm-op-fig.no-img .tm-op-figseal,
html[data-theme="celadon-bright"] #tm-opening .tm-op-fig.no-img .tm-op-figseal {
  color: var(--tm-out-accent) !important;
  background: radial-gradient(120% 100% at 50% 32%, rgba(71, 132, 111, .10), transparent 62%) !important;
}

/* Controls, forms and links. */
html body.tm-phase8-formal :is(
  input, textarea, select, .tmf-action, .tmf-rail-btn,
  .tmrp-btn, .tmrp-wd-mini, .tmrp-tabs button, .tmv3-open,
  .tmv3-dbtn, .tm-desk-btn, .tm-desk-tab, .tm-desk-close,
  .tm-event-turn-button, .tm-event-turn-choice, .map-layer,
  .map-scale, .map-tools-toggle, .tmf-map-mode, .tmf-sz-choice,
  .renwu-head-btn, .renwu-tab, .renwu-ceming-btn, .generic-modal-header button,
  .modal-header button, .arc-x, .rp-close
) {
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  font-size: clamp(15px, calc(15px * var(--tm-ui-scale, 1)), 21px) !important;
  line-height: 1.35 !important;
  color: var(--tm-readable-ink) !important;
  background-color: var(--tm-readable-surface-raised) !important;
  background-image: none !important;
  border-color: var(--tm-readable-border) !important;
  text-shadow: none !important;
}

html body.tm-phase8-formal :is(
  .tmf-action, .tmrp-btn, .tmrp-wd-mini, .tmrp-tabs button, .tmv3-open,
  .tmv3-dbtn, .tm-desk-btn, .tm-desk-tab, .tm-desk-close,
  .renwu-head-btn, .renwu-tab, .renwu-ceming-btn
) {
  cursor: pointer;
}

html body.tm-phase8-formal :is(
  .tmf-action.main, .tmrp-btn.primary, .tmv3-open.primary, .tm-desk-btn.primary,
  .tmf-sz-choice.active, .tmf-map-mode.active, .map-layer.on, .map-scale.on,
  .tm-event-turn-button[aria-expanded="true"]
) {
  background: var(--tm-readable-accent) !important;
  border-color: var(--tm-readable-accent-strong) !important;
  color: var(--tm-readable-surface-raised) !important;
}

html body.tm-phase8-formal :is(a, .link-btn, .tmrp-ecology-link, .tmrp-chain-step,
  .tmf-map-search-empty, .tmf-record-row:hover, .tmv3-title:hover) {
  color: var(--tm-readable-link) !important;
}

html body.tm-phase8-formal :is(
  .tmrp-input, .tmrp-textarea, .tm-input, .tm-textarea, .tm-select,
  .map-search, .gsearch, .tm-desk-field input, .tm-desk-field select
) {
  min-height: 36px !important;
  padding: 8px 10px !important;
  box-sizing: border-box !important;
  background: var(--tm-readable-surface-raised) !important;
  color: var(--tm-readable-ink) !important;
  border: 1px solid var(--tm-readable-border) !important;
  border-radius: 5px !important;
}

html body.tm-phase8-formal :is(input, textarea, select)::placeholder {
  color: var(--tm-readable-subtle) !important;
  opacity: 1 !important;
}

html body.tm-phase8-formal :is(button, input, textarea, select, a):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tm-readable-focus) 72%, transparent) !important;
  outline-offset: 2px !important;
}

@supports not (outline-color: color-mix(in srgb, white, black)) {
  html body.tm-phase8-formal :is(button, input, textarea, select, a):focus-visible {
    outline: 3px solid var(--tm-readable-focus) !important;
  }
}

/* Preserve semantic states after the neutral text pass. */
html body.tm-phase8-formal :is(.warn, .danger, .neg, .red, .hot, .is-danger,
  .tmrp-wd-mini.danger, .tmv3-ttype.danger, .tmf-sz-badge.warn) {
  color: var(--tm-readable-danger) !important;
}
html body.tm-phase8-formal :is(.ok, .good, .pos, .up, .green, .success,
  .tmrp-trend.up, .tmv3-ttype.good) {
  color: var(--tm-readable-success) !important;
}

/* ------------------------------------------------------------------------- */
/* Map and image-bearing panels                                                */
/* ------------------------------------------------------------------------- */

html body.tm-phase8-formal :is(#mapwrap, .tmf-mapwrap, .tmf-map-stage,
  .tmf-map-paper, .ming-map-paper, .map-panel, .map-board) {
  background-color: var(--tm-readable-surface-soft) !important;
  color: var(--tm-readable-ink) !important;
  border-color: var(--tm-readable-border) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal :is(#mapwrap,
  .tmf-mapwrap, .tmf-map-stage, .tmf-map-paper, .ming-map-paper, .map-panel,
  .map-board) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.62), rgba(241,232,218,.55)) !important;
}
html[data-theme="celadon-bright"] body.tm-phase8-formal :is(#mapwrap,
  .tmf-mapwrap, .tmf-map-stage, .tmf-map-paper, .ming-map-paper, .map-panel,
  .map-board) {
  background-image: linear-gradient(180deg, rgba(255,255,255,.68), rgba(220,239,230,.52)) !important;
}

html body.tm-phase8-formal :is(#tmf-formal-map, .ming-map-svg) text,
html body.tm-phase8-formal :is(.tmf-faction-label, .tmf-region-label,
  .ming-label, .tmf-ocean-label, .ming-ocean-label) {
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  font-size: clamp(13px, calc(13px * var(--tm-ui-scale, 1)), 19px) !important;
  letter-spacing: .02em !important;
  paint-order: stroke fill !important;
}

html body.tm-phase8-formal :is(.tmf-faction-label, .tmf-region-label,
  .ming-label, .tmf-ocean-label, .ming-ocean-label) text {
  fill: var(--tm-readable-ink) !important;
  stroke: var(--tm-readable-surface-raised) !important;
  stroke-width: 3px !important;
  stroke-opacity: .82 !important;
}

/* ------------------------------------------------------------------------- */
/* Responsive guardrails                                                      */
/* ------------------------------------------------------------------------- */

@media (max-width: 980px) {
  html body.tm-phase8-formal :is(
    #tm-phase8-main-shell, #topbar, #tm-phase8-left-surface,
    #tm-phase8-right-surface, #tm-phase8-formal-rail, #tm-right-rail, #rpanel,
    #tm-phase8-event-notice, #tm-phase8-action-tray, .tmf-module, .tmrp,
    .tmv3-feed, [class^="tm-desk-"], [class*=" tm-desk-"],
    [class^="tm-event-"], [class*=" tm-event-"]
  ) :is(button, input, textarea, select, label, p, li, td, th, span, b, strong, em, i, a, summary) {
    font-size: clamp(15px, calc(15px * var(--tm-ui-scale, 1)), 20px) !important;
  }
  html body.tm-phase8-formal :is(.meta, .sub, .desc, .note, .hint, .kicker, small,
    .tmrp-meta, .tmrp-empty, .tmv3-meta, .tmv3-turn, .tmv3-ttype, .tm-desk-subtitle,
    .tm-event-type, .map-hint, .map-legend-note, .renwu-card-meta) {
    font-size: clamp(13px, calc(13px * var(--tm-ui-scale, 1)), 17px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.tm-phase8-formal *,
  html body.tm-phase8-formal *::before,
  html body.tm-phase8-formal *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The broad text rule above intentionally lists shell IDs so it can beat
 * runtime `!important` declarations.  `:is()` adopts the most-specific item
 * in that list (an ID), therefore these final passes repeat the same shell
 * anchors to let headings, captions and large values retain their tiers. */
html body.tm-phase8-formal :is(
  #tm-phase8-main-shell, #topbar, #tm-phase8-left-surface,
  #tm-phase8-right-surface, #tm-phase8-formal-rail, #tm-right-rail, #rpanel,
  #tm-phase8-event-notice, #tm-phase8-action-tray
) :is(h1, h2, h3, h4, h5, h6, .tmf-module-title, .tmf-module h2,
  .tmf-module h3, .tmf-sz-detail-head, .tmf-sz-summary,
  .tmrp-card-title span, .tmrp-card-title b, .tmrp-admin-title b,
  .tmrp-office-node summary, .tmrp-ledger-head span, .tmrp-ecology-head b,
  .tmrp-mode-card b, .tmv3-title, .tmv3-turnhead, .tm-desk-title,
  .tm-desk-head, .tm-desk-tab, .tm-event-board-title,
  .tm-event-title-wrap b, .tm-event-turn-button span, .tmf-map-legend-title,
  .map-legend-title, .renwu-titletext, .renwu-profile-title,
  .renwu-card-name, .records-section-title-v5, .mem-title, .rp-title) {
  font-family: var(--tm-font-title, var(--tm-readable-title-stack)) !important;
  font-size: clamp(19px, calc(20px * var(--tm-ui-scale, 1)), 32px) !important;
  line-height: 1.28 !important;
  letter-spacing: .04em !important;
  color: var(--tm-readable-accent) !important;
}

html body.tm-phase8-formal :is(
  #tm-phase8-main-shell, #topbar, #tm-phase8-left-surface,
  #tm-phase8-right-surface, #tm-phase8-formal-rail, #tm-right-rail, #rpanel,
  #tm-phase8-event-notice, #tm-phase8-action-tray
) :is(
  #topbar .tb-dyn, #topbar .tb-time-main, #topbar .tb-chip-label,
  #topbar .tb-var .tb-vv, #topbar .tb-seal-idx .tsi-ch,
  .tmf-desk-action .zb-action-title, .zb-action-title, .tmf-action-title,
  .tmrp-stat b, .tmrp-card-title span, .tmv3-mark, .tmv3-cnt,
  .tm-desk-stat, .tm-desk-item b, .tm-event-item b, .tm-event-main b,
  .renwu-stat b, .renwu-side-metric b
) {
  font-size: clamp(17px, calc(18px * var(--tm-ui-scale, 1)), 28px) !important;
  font-weight: 700 !important;
  color: var(--tm-readable-accent) !important;
}

html body.tm-phase8-formal :is(
  #tm-phase8-main-shell, #topbar, #tm-phase8-left-surface,
  #tm-phase8-right-surface, #tm-phase8-formal-rail, #tm-right-rail, #rpanel,
  #tm-phase8-event-notice, #tm-phase8-action-tray
) :is(.meta, .sub, .desc, .note, .hint, .kicker, .caption, .foot, small,
  .tmf-module-note, .tmf-sz-hint, .tmrp-meta, .tmrp-empty,
  .tmrp-card-title small, .tmrp-card-title em, .tmrp-stat span,
  .tmv3-meta, .tmv3-turn, .tmv3-ttype, .tmv3-foot, .tm-desk-subtitle,
  .tm-desk-field small, .tm-event-type, .tm-event-kicker, .map-hint,
  .map-legend-note, .map-legend-sub, .map-search-label, .map-scale,
  .renwu-card-meta, .renwu-prose, .records-entry-body-v5, .letter-meta,
  .qiju-turn, .gs-panel-cnt) {
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  font-size: clamp(13px, calc(13px * var(--tm-ui-scale, 1)), 18px) !important;
  line-height: 1.56 !important;
  color: var(--tm-readable-muted) !important;
}

/* ------------------------------------------------------------------------- */
/* Late-created runtime surfaces                                             */
/*
 * The launcher and formal bridge append a few surfaces after the document
 * stylesheet has loaded.  Their legacy rules carry inline colours and
 * high-specificity dark gradients, so the two bright themes need an explicit
 * final pass here.  This keeps the drawer, update bulletin and first-turn
 * guide on the same palette as the map and action tray.
 */

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight).gs-drawer,
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight).gs-drawer {
  background: linear-gradient(180deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  background-image: linear-gradient(180deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  color: var(--tm-readable-ink) !important;
  border-color: var(--tm-readable-border) !important;
  box-shadow: -12px 0 30px rgba(47, 67, 58, .16) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) .gs-drawer-hdr,
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) .gs-drawer-hdr {
  background: linear-gradient(180deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  border-bottom-color: var(--tm-readable-border-soft) !important;
  color: var(--tm-readable-ink) !important;
}

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) .gs-drawer-title,
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) .gs-drawer-title {
  color: var(--tm-readable-accent) !important;
  font-family: var(--tm-font-title, var(--tm-readable-title-stack)) !important;
  font-size: clamp(17px, calc(18px * var(--tm-ui-scale, 1)), 24px) !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) .gs-drawer-close,
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) .gs-drawer-close {
  background: var(--tm-readable-surface-raised) !important;
  border-color: var(--tm-readable-border) !important;
  color: var(--tm-readable-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: 18px !important;
  min-height: 32px !important;
}

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) .gs-drawer-body,
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) .gs-drawer-body {
  color: var(--tm-readable-ink) !important;
  scrollbar-color: var(--tm-readable-accent) var(--tm-readable-sunken) !important;
}

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-panel, .gs-self-card, .gs-energy, .gs-cd, .gs-card, .gs-section,
  .gs-block, .gs-quick-card, .gs-detail-card
),
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-panel, .gs-self-card, .gs-energy, .gs-cd, .gs-card, .gs-section,
  .gs-block, .gs-quick-card, .gs-detail-card
) {
  background: linear-gradient(160deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  background-image: linear-gradient(160deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  border-color: var(--tm-readable-border-soft) !important;
  color: var(--tm-readable-ink) !important;
  box-shadow: 0 5px 16px rgba(47, 67, 58, .10) !important;
}

/* Inline legacy colours inside the character and status cards must not turn
 * pale-on-pale in a bright theme.  Semantic state colours are restored below. */
html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) :is(
  div, span, p, small, b, strong, em, i, label, dt, dd, li, button
),
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) :is(
  div, span, p, small, b, strong, em, i, label, dt, dd, li, button
) {
  color: var(--tm-readable-ink) !important;
  font-family: var(--tm-font-body, var(--tm-readable-body-stack)) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 20px) !important;
  line-height: 1.5 !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-panel-title, .gs-self-name, .gs-cd-name-left, .gs-cd-name,
  .gs-stat-k, .gs-cd-faction, .gs-cd-office, .gs-cd-goal, .gs-cd-wuchang,
  .gs-self-tag, .gs-wuchang, .gs-panel-cnt
),
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-panel-title, .gs-self-name, .gs-cd-name-left, .gs-cd-name,
  .gs-stat-k, .gs-cd-faction, .gs-cd-office, .gs-cd-goal, .gs-cd-wuchang,
  .gs-self-tag, .gs-wuchang, .gs-panel-cnt
) {
  color: var(--tm-readable-accent) !important;
}

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-self-title, .gs-self-meta, .gs-cd-subrow, .gs-cd-tags, .gs-time-mark,
  .gs-time-text .sub, .gs-panel-note, .gs-panel-desc
),
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-self-title, .gs-self-meta, .gs-cd-subrow, .gs-cd-tags, .gs-time-mark,
  .gs-time-text .sub, .gs-panel-note, .gs-panel-desc
) {
  color: var(--tm-readable-muted) !important;
}

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-cd-loy.hi, .gs-cd-goal-pct.hi, .trait-pos, .good, .ok, .pos, .up
),
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-cd-loy.hi, .gs-cd-goal-pct.hi, .trait-pos, .good, .ok, .pos, .up
) { color: var(--tm-readable-success) !important; }

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-cd-loy.lo, .gs-cd-goal-pct.lo, .crit, .danger, .warn, .neg, .hot
),
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) :is(
  .gs-cd-loy.lo, .gs-cd-goal-pct.lo, .crit, .danger, .warn, .neg, .hot
) { color: var(--tm-readable-danger) !important; }

html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight) :is(
  button, input, textarea, select
),
html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight) :is(
  button, input, textarea, select
) {
  background: var(--tm-readable-surface-raised) !important;
  border-color: var(--tm-readable-border) !important;
  color: var(--tm-readable-ink) !important;
  min-height: 36px !important;
  text-shadow: none !important;
}

/* 邸报（tm-changelog）是异步插入 body 的独立节点，不能依赖 formal-shell
 * 的父级选择器。 */
html[data-theme="paper-bright"] #tm-changelog-ov,
html[data-theme="celadon-bright"] #tm-changelog-ov {
  background: rgba(39, 50, 45, .30) !important;
  backdrop-filter: blur(5px) !important;
}

html[data-theme="paper-bright"] #tm-changelog-ov .tm-cl-panel,
html[data-theme="celadon-bright"] #tm-changelog-ov .tm-cl-panel {
  background: linear-gradient(160deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  background-image: linear-gradient(160deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  border-color: var(--tm-readable-border) !important;
  color: var(--tm-readable-ink) !important;
  box-shadow: 0 22px 60px rgba(38, 62, 51, .22) !important;
  font-family: var(--tm-readable-body-stack) !important;
}

html[data-theme="paper-bright"] #tm-changelog-ov :is(
  .tm-cl-panel-title, .tm-cl-title, .tm-cl-what
),
html[data-theme="celadon-bright"] #tm-changelog-ov :is(
  .tm-cl-panel-title, .tm-cl-title, .tm-cl-what
) {
  color: var(--tm-readable-accent) !important;
  font-family: var(--tm-font-title, var(--tm-readable-title-stack)) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-changelog-ov :is(
  .tm-cl-panel-sub, .tm-cl-date, .tm-cl-why, .tm-cl-items li
),
html[data-theme="celadon-bright"] #tm-changelog-ov :is(
  .tm-cl-panel-sub, .tm-cl-date, .tm-cl-why, .tm-cl-items li
) {
  color: var(--tm-readable-muted) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 19px) !important;
  line-height: 1.65 !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-changelog-ov :is(
  .tm-cl-module, .tm-cl-close, .tm-cl-foot, .tm-cl-foot button
),
html[data-theme="celadon-bright"] #tm-changelog-ov :is(
  .tm-cl-module, .tm-cl-close, .tm-cl-foot, .tm-cl-foot button
) {
  background: var(--tm-readable-surface-raised) !important;
  border-color: var(--tm-readable-border-soft) !important;
  color: var(--tm-readable-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-changelog-ov .tm-cl-foot button.bt.bp,
html[data-theme="celadon-bright"] #tm-changelog-ov .tm-cl-foot button.bt.bp {
  background: linear-gradient(135deg, var(--tm-readable-accent), var(--tm-readable-accent-strong)) !important;
  border-color: var(--tm-readable-accent-strong) !important;
  color: #fffdf8 !important;
}

/* 首回合教程与无密钥提示使用内联旧色，统一改成可读的亮色卡片。 */
html[data-theme="paper-bright"] #tm-firstturn-guide,
html[data-theme="celadon-bright"] #tm-firstturn-guide {
  background: rgba(39, 50, 45, .30) !important;
  backdrop-filter: blur(5px) !important;
}

html[data-theme="paper-bright"] #tm-firstturn-guide > div,
html[data-theme="celadon-bright"] #tm-firstturn-guide > div {
  background: linear-gradient(160deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  border-color: var(--tm-readable-border) !important;
  color: var(--tm-readable-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  box-shadow: 0 22px 60px rgba(38, 62, 51, .22) !important;
}

html[data-theme="paper-bright"] #tm-firstturn-guide > div > :is(div:first-child, div:nth-child(3) b),
html[data-theme="celadon-bright"] #tm-firstturn-guide > div > :is(div:first-child, div:nth-child(3) b) {
  color: var(--tm-readable-accent) !important;
  font-family: var(--tm-font-title, var(--tm-readable-title-stack)) !important;
}

html[data-theme="paper-bright"] #tm-firstturn-guide > div > :is(div:nth-child(2), div:nth-child(3) span),
html[data-theme="celadon-bright"] #tm-firstturn-guide > div > :is(div:nth-child(2), div:nth-child(3) span) {
  color: var(--tm-readable-muted) !important;
  font-family: var(--tm-readable-body-stack) !important;
}

/* The four guide steps contain their own inline colour declarations one
 * level deeper than the card.  Target those actual descendants so the accent
 * and body colours stay synchronized with the selected palette. */
html[data-theme="paper-bright"] #tm-firstturn-guide > div > div:nth-child(3) b,
html[data-theme="celadon-bright"] #tm-firstturn-guide > div > div:nth-child(3) b {
  color: var(--tm-readable-accent) !important;
  font-family: var(--tm-font-title, var(--tm-readable-title-stack)) !important;
  font-size: clamp(16px, calc(16px * var(--tm-ui-scale, 1)), 22px) !important;
  line-height: 1.45 !important;
}

html[data-theme="paper-bright"] #tm-firstturn-guide > div > div:nth-child(3) span,
html[data-theme="celadon-bright"] #tm-firstturn-guide > div > div:nth-child(3) span {
  color: var(--tm-readable-muted) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: clamp(14px, calc(14px * var(--tm-ui-scale, 1)), 19px) !important;
  line-height: 1.65 !important;
}

html[data-theme="paper-bright"] #tm-firstturn-guide button,
html[data-theme="celadon-bright"] #tm-firstturn-guide button,
html[data-theme="paper-bright"] #tm-nokey-banner button,
html[data-theme="celadon-bright"] #tm-nokey-banner button {
  background: var(--tm-readable-surface-raised) !important;
  border-color: var(--tm-readable-border) !important;
  color: var(--tm-readable-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: 15px !important;
  min-height: 40px !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-firstturn-guide button.bt.bp,
html[data-theme="celadon-bright"] #tm-firstturn-guide button.bt.bp,
html[data-theme="paper-bright"] #tm-nokey-banner button.bt.bp,
html[data-theme="celadon-bright"] #tm-nokey-banner button.bt.bp {
  background: linear-gradient(135deg, var(--tm-readable-accent), var(--tm-readable-accent-strong)) !important;
  border-color: var(--tm-readable-accent-strong) !important;
  color: #fffdf8 !important;
}

html[data-theme="paper-bright"] #tm-nokey-banner,
html[data-theme="celadon-bright"] #tm-nokey-banner {
  background: linear-gradient(160deg, var(--tm-readable-surface-raised), var(--tm-readable-surface-soft)) !important;
  border-color: var(--tm-readable-border) !important;
  color: var(--tm-readable-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  box-shadow: 0 14px 38px rgba(38, 62, 51, .20) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] #tm-nokey-banner :is(span, b),
html[data-theme="celadon-bright"] #tm-nokey-banner :is(span, b) {
  color: var(--tm-readable-ink) !important;
  font-family: var(--tm-readable-body-stack) !important;
}

/* ------------------------------------------------------------------------- */
/* Bright-theme coverage for legacy action plaques and the right rail         */
/*
 * The action tray and国事 rail are built by phase8-formal-bridge at runtime.
 * Their original rules intentionally use near-black lacquer surfaces and
 * pale ink, which otherwise survive the bright shell pass.  Keep the artwork
 * visible, but lift the surface and switch every label to the same dark-on-
 * light contrast contract as the rest of the selected bright theme.
 */

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray.zb-action-tray,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray.zb-action-tray {
  filter: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray.zb-action-tray::before,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray.zb-action-tray::before {
  background: radial-gradient(ellipse at 42% 72%, rgba(62, 53, 40, .16), rgba(62, 53, 40, .06) 48%, transparent 74%) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-btn.zb-img-btn,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-btn.zb-img-btn {
  background: linear-gradient(145deg, #fffdf7 0%, #f4ecdf 55%, #e9dece 100%) !important;
  border-color: #b9a486 !important;
  color: #2f332f !important;
  box-shadow: 0 8px 18px rgba(73, 56, 35, .18), 0 2px 4px rgba(73, 56, 35, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94), inset 0 -1px 0 rgba(120, 91, 57, .12) !important;
  filter: drop-shadow(0 7px 12px rgba(73, 56, 35, .16)) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-btn.zb-img-btn {
  background: linear-gradient(145deg, #fbfffd 0%, #eef8f3 55%, #dcece4 100%) !important;
  border-color: #a9c7b9 !important;
  box-shadow: 0 8px 18px rgba(48, 91, 73, .16), 0 2px 4px rgba(48, 91, 73, .09),
    inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(66, 120, 97, .12) !important;
  filter: drop-shadow(0 7px 12px rgba(48, 91, 73, .14)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img {
  opacity: .42 !important;
  filter: saturate(.72) contrast(.92) brightness(1.18) !important;
  mix-blend-mode: multiply !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img-btn::before,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img-btn::before {
  background: linear-gradient(90deg, rgba(255, 253, 246, .84), rgba(255, 253, 246, .46) 54%, rgba(255, 253, 246, .68)) !important;
  opacity: .86 !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray #zhao-btn::before,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray #zhao-btn::before {
  background: linear-gradient(90deg, rgba(255, 253, 246, .62), rgba(255, 253, 246, .48) 42%, rgba(255, 253, 246, .86)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img-btn::after,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img-btn::after {
  box-shadow: inset 0 0 0 1px rgba(126, 96, 57, .30), inset 0 0 16px rgba(255, 255, 255, .38) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 44%),
    linear-gradient(90deg, rgba(168, 130, 73, .12), transparent 18%, transparent 82%, rgba(168, 130, 73, .10)) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img-btn::after {
  box-shadow: inset 0 0 0 1px rgba(71, 122, 101, .26), inset 0 0 16px rgba(255, 255, 255, .42) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .38), transparent 44%),
    linear-gradient(90deg, rgba(71, 139, 113, .12), transparent 18%, transparent 82%, rgba(71, 139, 113, .10)) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-action-copy,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-action-copy {
  color: var(--tm-readable-ink) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .90) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-action-kicker,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-action-kicker {
  color: var(--tm-readable-link) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-action-title,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-action-title {
  color: var(--tm-readable-accent-strong) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .86) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-action-sub,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-action-sub {
  color: var(--tm-readable-muted) !important;
  text-shadow: none !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img-btn:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img-btn:hover {
  border-color: var(--tm-readable-accent) !important;
  box-shadow: 0 12px 24px rgba(73, 56, 35, .22), 0 0 0 1px rgba(141, 91, 55, .16),
    inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(120, 91, 57, .12) !important;
  filter: drop-shadow(0 10px 16px rgba(73, 56, 35, .18)) brightness(1.03) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-phase8-action-tray .zb-img-btn:hover {
  box-shadow: 0 12px 24px rgba(48, 91, 73, .20), 0 0 0 1px rgba(52, 121, 107, .16),
    inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(66, 120, 97, .12) !important;
  filter: drop-shadow(0 10px 16px rgba(48, 91, 73, .16)) brightness(1.03) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-cap,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-cap {
  background: linear-gradient(180deg, #fffdf7, #eee4d5) !important;
  border-color: var(--tm-readable-border) !important;
  color: var(--tm-readable-accent-strong) !important;
  text-shadow: none !important;
  box-shadow: 0 3px 8px rgba(73, 56, 35, .14), inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-cap {
  background: linear-gradient(180deg, #fbfffd, #e4f1ea) !important;
  box-shadow: 0 3px 8px rgba(48, 91, 73, .12), inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-divider,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-divider {
  background: radial-gradient(circle at 50% 50%, var(--tm-readable-accent) 0%, transparent 24%) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-divider::before,
html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-divider::after,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-divider::before,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-divider::after {
  background: linear-gradient(90deg, transparent, var(--tm-readable-border), transparent) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon {
  background: linear-gradient(180deg, #fffefa 0%, #f3ebdf 58%, #e9dece 100%) !important;
  border-color: var(--tm-readable-border) !important;
  color: var(--tm-readable-accent-strong) !important;
  text-shadow: none !important;
  box-shadow: 0 5px 12px rgba(73, 56, 35, .16), inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -2px 0 rgba(120, 91, 57, .10) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon {
  background: linear-gradient(180deg, #fbfffd 0%, #eef8f3 58%, #dcece4 100%) !important;
  box-shadow: 0 5px 12px rgba(48, 91, 73, .14), inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -2px 0 rgba(66, 120, 97, .10) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon::before,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon::before {
  background: linear-gradient(90deg, transparent, var(--tm-readable-accent), transparent) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon.hot,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon.hot {
  border-color: var(--tm-readable-danger) !important;
  box-shadow: 0 5px 12px rgba(132, 64, 49, .16), inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -2px 0 rgba(155, 62, 53, .12) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon.ok,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon.ok {
  border-color: var(--tm-readable-success) !important;
  box-shadow: 0 5px 12px rgba(47, 116, 82, .14), inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -2px 0 rgba(47, 116, 82, .10) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon.active,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon.active,
html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon:hover,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon:hover {
  border-color: var(--tm-readable-accent) !important;
  box-shadow: 0 8px 16px rgba(73, 56, 35, .20), 0 0 0 2px rgba(141, 91, 55, .12),
    inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -2px 0 rgba(120, 91, 57, .10) !important;
}

html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon.active,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon:hover {
  box-shadow: 0 8px 16px rgba(48, 91, 73, .18), 0 0 0 2px rgba(52, 121, 107, .12),
    inset 0 1px 0 rgba(255, 255, 255, .98), inset 0 -2px 0 rgba(66, 120, 97, .10) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon .tm-rc-svg,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-icon .tm-rc-svg {
  filter: saturate(.88) contrast(.92) brightness(1.10) !important;
}

html[data-theme="paper-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-count,
html[data-theme="celadon-bright"] body.tm-phase8-formal #tm-right-rail .tm-rc-count {
  background: linear-gradient(180deg, #d5674f, #a64031) !important;
  border-color: #c48770 !important;
  color: #fffaf3 !important;
  box-shadow: 0 2px 5px rgba(104, 54, 41, .22), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}

@media (max-width: 760px) {
  html[data-theme="paper-bright"] :is(#drawerLeft, #drawerRight).gs-drawer,
  html[data-theme="celadon-bright"] :is(#drawerLeft, #drawerRight).gs-drawer {
    width: min(94vw, 390px) !important;
    right: 8px !important;
    left: auto !important;
  }
  html[data-theme="paper-bright"] #tm-changelog-ov .tm-cl-panel,
  html[data-theme="celadon-bright"] #tm-changelog-ov .tm-cl-panel {
    width: 94% !important;
    max-height: 88vh !important;
  }
}

/* ------------------------------------------------------------------------- */
/* Legacy action desks: keep their paper surfaces readable in every theme.  */
/*
 * The four action desks ship their own long, inline style blocks.  The
 * readability layer intentionally runs after those blocks, but its generic
 * shell rule used to flatten every child to the dark-shell palette.  These
 * selectors restore the desks' paper contract while retaining the hierarchy
 * and semantic colours of their original artwork.
 */

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan) {
  color: var(--ink, #241d15) !important;
  font-family: var(--font, var(--tm-readable-body-stack)) !important;
  text-shadow: none !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(div, span, p, b, strong, em, i, small, label, dt, dd, li, td, th, a,
    summary, h1, h2, h3, h4, h5, h6, button) {
  color: var(--ink, #241d15) !important;
  font-family: var(--font, var(--tm-readable-body-stack)) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-shadow: none !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(input, textarea, select) {
  color: var(--ink, #241d15) !important;
  font-family: var(--font, var(--tm-readable-body-stack)) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
}

/* Titles and supporting metadata retain a clear two-level type scale. */
html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.hc-main, .zt-main, .yt-main, .st-main) {
  font-family: var(--font, var(--tm-readable-title-stack)) !important;
  font-size: clamp(22px, 2.1vw, 29px) !important;
  line-height: 1.18 !important;
  letter-spacing: .18em !important;
  color: var(--ink, #241d15) !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.hc-sub, .zt-sub, .yt-sub, .st-sub) {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--ink-faint, #9c8b6b) !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.col-sug-t, .shelf-hd b, .roster-hd b, .inbox-hd b, .panel-hd b,
    .epc-hd b, .xh-t, .folio-empty b, .ben-empty h3, .thread-hd b) {
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--ink, #241d15) !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.cat-field, .x-field, .pizhu-ta, .cmp-textarea, .ben-text,
    .ed-scroll-text, .annal, .qjblock, .dl-text) {
  color: var(--ink, #241d15) !important;
  font-family: var(--font-doc, var(--font, var(--tm-readable-body-stack))) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Paper controls must stay paper controls; the global dark-shell pass must
 * not turn their backgrounds into navy blocks. */
html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.cat-field, .x-field, .pizhu-ta, .cmp-textarea, .tm-textarea,
    .tm-input, .tm-select, .yan-search input, .cmp-field select,
    .gsearch input) {
  background-color: rgba(255, 252, 243, .82) !important;
  background-image: none !important;
  border-color: rgba(168, 131, 58, .34) !important;
  color: var(--ink, #241d15) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.cat-field, .x-field, .cmp-textarea, .pizhu-ta)::placeholder {
  color: var(--ink-faint, #9c8b6b) !important;
  opacity: 1 !important;
}

/* Neutral paper buttons. */
html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.ed-tab:not(.active), .link-btn, .ed-scroll-btn, .filter:not(.active),
    .pact:not(.primary), .multi-toggle:not(.on), .yact:not(.primary),
    .tf:not(.active), .lc-btn:not(.hot), .inc-btn, .gbtn, .fact, .xref,
    .atag, .epc-btn) {
  background: rgba(255, 252, 243, .78) !important;
  background-image: none !important;
  border-color: rgba(125, 94, 34, .42) !important;
  color: var(--ink-soft, #574733) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Active and filled controls keep white ink on their coloured surface. */
html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.ed-tab.active, .filter.active, .multi-toggle.on, .pact.primary,
    .yact.primary, .tf.active, .lc-btn.hot, .lc-status.bad, .chip.hot,
    .zf-type, .bh-seal, .ben-empty-seal, .wax, .shelf-seal, .roster-seal,
    .inbox-seal, .inc-seal, .epc-seal, .gv-g, .panel-hd .seal,
    .fo-annot::before, .afterword::before, .pizhu-lbl::before) {
  color: #fffaf1 !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 2px rgba(60, 20, 10, .32) !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan) .act-polish {
  background: linear-gradient(162deg, #fffaf0, #ecd9ac) !important;
  border-color: #7d5e22 !important;
  color: #7d5e22 !important;
  -webkit-text-fill-color: currentColor !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan) .act-seal,
html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan) .act-seal .al {
  background-color: #241810 !important;
  color: #fff5df !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .62) !important;
}

/* Scroll contracts: the outer panel never grows past the viewport; each desk
 * owns its own long list instead of pushing a header or close control away. */
html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan) {
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.scroll-wrap, .silk, .silk-body, .col-main, .zou-body, .yan-body,
    .shi-body, .shelf, .roster, .inbox, .deskmain, .aside, .nav, .main,
    .folio) {
  min-width: 0 !important;
  min-height: 0 !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.sug-list, .xh-list, .arc-body, .shelf-scroll, .ben-body, .aside,
    .roster-scroll, .deskmain, .thread-scroll, .inbox-scroll, .nav-scroll,
    .main-scroll, .folio-scroll) {
  min-height: 0 !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-color: rgba(168, 131, 58, .56) rgba(168, 131, 58, .10) !important;
}

/* Reserve a clean corner for the shared close button. */
html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
  :is(.silk-head, .zou-titlebar, .yan-titlebar, .shi-titlebar) {
  padding-right: 104px !important;
}

html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
  .ed-yuan .head-right {
  margin-right: 48px !important;
}

@media (max-width: 900px) {
  html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
    :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
    :is(div, span, p, b, strong, em, i, small, label, dt, dd, li, td, th,
      a, summary, button, input, textarea, select) {
    font-size: 15px !important;
  }
  html body.tm-phase8-formal :is(#tm-phase8-main-shell, .tm-bridge-panel)
    :is(.ed-yuan, .zou-yuan, .yan-yuan, .shi-yuan)
    :is(.hc-main, .zt-main, .yt-main, .st-main) {
    font-size: 22px !important;
  }
}